@clayui/breadcrumb 3.91.1 → 3.92.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/lib/Item.js +10 -17
- package/lib/index.d.ts +11 -1
- package/lib/index.js +61 -16
- package/package.json +3 -5
- package/src/Item.tsx +14 -29
- package/src/__tests__/__snapshots__/index.tsx.snap +135 -230
- package/src/index.tsx +66 -21
- package/lib/Ellipsis.d.ts +0 -18
- package/lib/Ellipsis.js +0 -63
- package/src/Ellipsis.tsx +0 -59
package/lib/Item.js
CHANGED
|
@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
|
|
8
|
-
var _button = _interopRequireDefault(require("@clayui/button"));
|
|
9
|
-
|
|
10
8
|
var _link = _interopRequireDefault(require("@clayui/link"));
|
|
11
9
|
|
|
12
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
@@ -27,29 +25,24 @@ var Item = function Item(_ref) {
|
|
|
27
25
|
var active = _ref.active,
|
|
28
26
|
href = _ref.href,
|
|
29
27
|
label = _ref.label,
|
|
30
|
-
|
|
28
|
+
_onClick = _ref.onClick,
|
|
31
29
|
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
32
30
|
|
|
33
31
|
return /*#__PURE__*/_react.default.createElement("li", _extends({
|
|
34
32
|
className: (0, _classnames.default)('breadcrumb-item', {
|
|
35
33
|
active: active
|
|
36
34
|
})
|
|
37
|
-
}, otherProps),
|
|
35
|
+
}, otherProps), /*#__PURE__*/_react.default.createElement(_link.default, {
|
|
36
|
+
"aria-current": active ? 'page' : undefined,
|
|
38
37
|
className: "breadcrumb-link",
|
|
39
38
|
href: href,
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
title: label
|
|
48
|
-
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
49
|
-
className: "breadcrumb-text-truncate"
|
|
50
|
-
}, label)) : /*#__PURE__*/_react.default.createElement("span", {
|
|
51
|
-
className: "breadcrumb-text-truncate",
|
|
52
|
-
title: label
|
|
39
|
+
onClick: function onClick(event) {
|
|
40
|
+
if (_onClick) {
|
|
41
|
+
event.preventDefault();
|
|
42
|
+
|
|
43
|
+
_onClick(event);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
53
46
|
}, label));
|
|
54
47
|
};
|
|
55
48
|
|
package/lib/index.d.ts
CHANGED
|
@@ -7,13 +7,23 @@ import Item from './Item';
|
|
|
7
7
|
declare type TItem = React.ComponentProps<typeof Item>;
|
|
8
8
|
declare type TItems = Array<TItem>;
|
|
9
9
|
interface IProps extends React.HTMLAttributes<HTMLOListElement> {
|
|
10
|
+
/**
|
|
11
|
+
* Defines the aria label of component elements.
|
|
12
|
+
*/
|
|
13
|
+
ariaLabels?: {
|
|
14
|
+
breadcrumb: string;
|
|
15
|
+
open: string;
|
|
16
|
+
close: string;
|
|
17
|
+
};
|
|
10
18
|
/**
|
|
11
19
|
* The number of Breadcrumb Items to show on each side of the active Breadcrumb Item before
|
|
12
20
|
* using an ellipsis dropdown.
|
|
21
|
+
* @deprecated since v3.91.0 - It is no longer necessary.
|
|
13
22
|
*/
|
|
14
23
|
ellipsisBuffer?: number;
|
|
15
24
|
/**
|
|
16
25
|
* Use this property for defining `otherProps` that will be passed to ellipsis dropdown trigger.
|
|
26
|
+
* @deprecated since v3.91.0 - It is no longer necessary.
|
|
17
27
|
*/
|
|
18
28
|
ellipsisProps?: Object;
|
|
19
29
|
/**
|
|
@@ -25,5 +35,5 @@ interface IProps extends React.HTMLAttributes<HTMLOListElement> {
|
|
|
25
35
|
*/
|
|
26
36
|
spritemap?: string;
|
|
27
37
|
}
|
|
28
|
-
declare const ClayBreadcrumb: ({
|
|
38
|
+
declare const ClayBreadcrumb: ({ ariaLabels, ellipsisBuffer, ellipsisProps, className, items, spritemap, ...otherProps }: IProps) => JSX.Element;
|
|
29
39
|
export default ClayBreadcrumb;
|
package/lib/index.js
CHANGED
|
@@ -1,28 +1,44 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
+
|
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
|
4
6
|
value: true
|
|
5
7
|
});
|
|
6
8
|
exports.default = void 0;
|
|
7
9
|
|
|
8
|
-
var
|
|
10
|
+
var _button = require("@clayui/button");
|
|
9
11
|
|
|
10
12
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
13
|
|
|
12
|
-
var _react =
|
|
14
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
13
15
|
|
|
14
16
|
var _warning = _interopRequireDefault(require("warning"));
|
|
15
17
|
|
|
16
|
-
var _Ellipsis = _interopRequireDefault(require("./Ellipsis"));
|
|
17
|
-
|
|
18
18
|
var _Item = _interopRequireDefault(require("./Item"));
|
|
19
19
|
|
|
20
|
-
var _excluded = ["
|
|
20
|
+
var _excluded = ["ariaLabels", "ellipsisBuffer", "ellipsisProps", "className", "items", "spritemap"];
|
|
21
|
+
|
|
22
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
|
+
|
|
24
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
25
|
|
|
22
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
27
|
|
|
24
28
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
25
29
|
|
|
30
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
31
|
+
|
|
32
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
33
|
+
|
|
34
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
35
|
+
|
|
36
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
37
|
+
|
|
38
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
39
|
+
|
|
40
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
41
|
+
|
|
26
42
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
27
43
|
|
|
28
44
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
@@ -34,26 +50,55 @@ var findActiveItems = function findActiveItems(items) {
|
|
|
34
50
|
};
|
|
35
51
|
|
|
36
52
|
var ClayBreadcrumb = function ClayBreadcrumb(_ref) {
|
|
37
|
-
var
|
|
53
|
+
var _ref$ariaLabels = _ref.ariaLabels,
|
|
54
|
+
ariaLabels = _ref$ariaLabels === void 0 ? {
|
|
55
|
+
breadcrumb: 'Breadcrumb',
|
|
56
|
+
close: 'Partially nest breadcrumbs',
|
|
57
|
+
open: 'See full nested'
|
|
58
|
+
} : _ref$ariaLabels,
|
|
38
59
|
_ref$ellipsisBuffer = _ref.ellipsisBuffer,
|
|
39
60
|
ellipsisBuffer = _ref$ellipsisBuffer === void 0 ? 1 : _ref$ellipsisBuffer,
|
|
40
61
|
_ref$ellipsisProps = _ref.ellipsisProps,
|
|
41
62
|
ellipsisProps = _ref$ellipsisProps === void 0 ? {} : _ref$ellipsisProps,
|
|
63
|
+
className = _ref.className,
|
|
42
64
|
items = _ref.items,
|
|
43
65
|
spritemap = _ref.spritemap,
|
|
44
66
|
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
45
67
|
|
|
46
68
|
"production" !== "production" ? (0, _warning.default)(findActiveItems(items).length === 1, 'ClayBreadcrumb expects at least one `active` item on `items`.') : void 0;
|
|
47
|
-
|
|
48
|
-
var
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
69
|
+
|
|
70
|
+
var _useState = (0, _react.useState)(false),
|
|
71
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
72
|
+
collapsed = _useState2[0],
|
|
73
|
+
setCollapsed = _useState2[1];
|
|
74
|
+
|
|
75
|
+
return /*#__PURE__*/_react.default.createElement("nav", {
|
|
76
|
+
"aria-label": ariaLabels.breadcrumb,
|
|
77
|
+
className: "align-items-center d-flex"
|
|
78
|
+
}, items.length > 3 && /*#__PURE__*/_react.default.createElement(_button.ClayButtonWithIcon, {
|
|
79
|
+
"aria-expanded": collapsed,
|
|
80
|
+
"aria-label": collapsed ? ariaLabels.close : ariaLabels.open,
|
|
81
|
+
className: "c-focus-inset",
|
|
82
|
+
displayType: null,
|
|
83
|
+
onClick: function onClick() {
|
|
84
|
+
return setCollapsed(!collapsed);
|
|
85
|
+
},
|
|
86
|
+
size: "xs",
|
|
87
|
+
spritemap: spritemap,
|
|
88
|
+
symbol: collapsed ? 'angle-double-left' : 'angle-double-right',
|
|
89
|
+
title: collapsed ? ariaLabels.close : ariaLabels.open
|
|
90
|
+
}), /*#__PURE__*/_react.default.createElement("ol", _extends({}, otherProps, {
|
|
55
91
|
className: (0, _classnames.default)('breadcrumb', className)
|
|
56
|
-
}),
|
|
92
|
+
}), items.length > 3 && !collapsed ? /*#__PURE__*/_react.default.createElement(Items, {
|
|
93
|
+
items: [items[items.length - 2], items[items.length - 1]]
|
|
94
|
+
}) : /*#__PURE__*/_react.default.createElement(Items, {
|
|
95
|
+
items: items
|
|
96
|
+
})));
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
function Items(_ref2) {
|
|
100
|
+
var items = _ref2.items;
|
|
101
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, items.map(function (item, i) {
|
|
57
102
|
return /*#__PURE__*/_react.default.isValidElement(item) ? /*#__PURE__*/_react.default.cloneElement(item, {
|
|
58
103
|
key: "ellipsis".concat(i)
|
|
59
104
|
}) : /*#__PURE__*/_react.default.createElement(_Item.default, {
|
|
@@ -64,7 +109,7 @@ var ClayBreadcrumb = function ClayBreadcrumb(_ref) {
|
|
|
64
109
|
onClick: item.onClick
|
|
65
110
|
});
|
|
66
111
|
}));
|
|
67
|
-
}
|
|
112
|
+
}
|
|
68
113
|
|
|
69
114
|
var _default = ClayBreadcrumb;
|
|
70
115
|
exports.default = _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clayui/breadcrumb",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.92.0",
|
|
4
4
|
"description": "ClayBreadcrumb component",
|
|
5
5
|
"license": "BSD-3-Clause",
|
|
6
6
|
"repository": "https://github.com/liferay/clay",
|
|
@@ -26,11 +26,9 @@
|
|
|
26
26
|
"react"
|
|
27
27
|
],
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@clayui/button": "^3.
|
|
30
|
-
"@clayui/drop-down": "^3.91.1",
|
|
29
|
+
"@clayui/button": "^3.92.0",
|
|
31
30
|
"@clayui/icon": "^3.56.0",
|
|
32
31
|
"@clayui/link": "^3.88.0",
|
|
33
|
-
"@clayui/shared": "^3.89.0",
|
|
34
32
|
"classnames": "^2.2.6",
|
|
35
33
|
"warning": "^4.0.3"
|
|
36
34
|
},
|
|
@@ -42,5 +40,5 @@
|
|
|
42
40
|
"browserslist": [
|
|
43
41
|
"extends browserslist-config-clay"
|
|
44
42
|
],
|
|
45
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "7e52e53506434967cbab92acb124fa31d7080f84"
|
|
46
44
|
}
|
package/src/Item.tsx
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
import ClayButton from '@clayui/button';
|
|
7
6
|
import ClayLink from '@clayui/link';
|
|
8
7
|
import classNames from 'classnames';
|
|
9
8
|
import React from 'react';
|
|
@@ -37,34 +36,20 @@ const Item = ({active, href, label, onClick, ...otherProps}: IItem) => (
|
|
|
37
36
|
})}
|
|
38
37
|
{...otherProps}
|
|
39
38
|
>
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
onClick={onClick}
|
|
55
|
-
title={label}
|
|
56
|
-
>
|
|
57
|
-
<span className="breadcrumb-text-truncate">{label}</span>
|
|
58
|
-
</ClayButton>
|
|
59
|
-
) : (
|
|
60
|
-
<span
|
|
61
|
-
className="breadcrumb-text-truncate"
|
|
62
|
-
data-testid={`testId${label}`}
|
|
63
|
-
title={label}
|
|
64
|
-
>
|
|
65
|
-
{label}
|
|
66
|
-
</span>
|
|
67
|
-
)}
|
|
39
|
+
<ClayLink
|
|
40
|
+
aria-current={active ? 'page' : undefined}
|
|
41
|
+
className="breadcrumb-link"
|
|
42
|
+
data-testid={`testId${label}`}
|
|
43
|
+
href={href}
|
|
44
|
+
onClick={(event) => {
|
|
45
|
+
if (onClick) {
|
|
46
|
+
event.preventDefault();
|
|
47
|
+
onClick(event);
|
|
48
|
+
}
|
|
49
|
+
}}
|
|
50
|
+
>
|
|
51
|
+
{label}
|
|
52
|
+
</ClayLink>
|
|
68
53
|
</li>
|
|
69
54
|
);
|
|
70
55
|
|
|
@@ -2,285 +2,190 @@
|
|
|
2
2
|
|
|
3
3
|
exports[`ClayBreadcrumb calls callback when an item is clicked 1`] = `
|
|
4
4
|
<div>
|
|
5
|
-
<
|
|
6
|
-
|
|
5
|
+
<nav
|
|
6
|
+
aria-label="Breadcrumb"
|
|
7
|
+
class="align-items-center d-flex"
|
|
7
8
|
>
|
|
8
|
-
<
|
|
9
|
-
|
|
9
|
+
<button
|
|
10
|
+
aria-expanded="false"
|
|
11
|
+
aria-label="See full nested"
|
|
12
|
+
class="c-focus-inset btn btn-monospaced btn-xs"
|
|
13
|
+
title="See full nested"
|
|
14
|
+
type="button"
|
|
10
15
|
>
|
|
11
|
-
<
|
|
12
|
-
class="
|
|
13
|
-
|
|
14
|
-
title="1"
|
|
16
|
+
<svg
|
|
17
|
+
class="lexicon-icon lexicon-icon-angle-double-right"
|
|
18
|
+
role="presentation"
|
|
15
19
|
>
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
20
|
+
<use
|
|
21
|
+
xlink:href="path/to/spritemap#angle-double-right"
|
|
22
|
+
/>
|
|
23
|
+
</svg>
|
|
24
|
+
</button>
|
|
25
|
+
<ol
|
|
26
|
+
class="breadcrumb"
|
|
21
27
|
>
|
|
22
|
-
<
|
|
23
|
-
class="breadcrumb-
|
|
24
|
-
data-testid="testId2"
|
|
25
|
-
title="2"
|
|
26
|
-
type="button"
|
|
28
|
+
<li
|
|
29
|
+
class="breadcrumb-item"
|
|
27
30
|
>
|
|
28
|
-
<
|
|
29
|
-
class="breadcrumb-
|
|
31
|
+
<a
|
|
32
|
+
class="breadcrumb-link"
|
|
33
|
+
data-testid="testId4"
|
|
30
34
|
>
|
|
31
|
-
|
|
32
|
-
</
|
|
33
|
-
</
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
class="dropdown breadcrumb-item"
|
|
37
|
-
>
|
|
38
|
-
<button
|
|
39
|
-
aria-controls="clay-dropdown-menu-3"
|
|
40
|
-
aria-expanded="false"
|
|
41
|
-
aria-haspopup="true"
|
|
42
|
-
class="dropdown-toggle breadcrumb-link btn btn-unstyled"
|
|
43
|
-
data-testid="breadcrumbDropdownTrigger"
|
|
44
|
-
type="button"
|
|
45
|
-
>
|
|
46
|
-
<svg
|
|
47
|
-
class="lexicon-icon lexicon-icon-ellipsis-h"
|
|
48
|
-
role="presentation"
|
|
49
|
-
>
|
|
50
|
-
<use
|
|
51
|
-
xlink:href="path/to/spritemap#ellipsis-h"
|
|
52
|
-
/>
|
|
53
|
-
</svg>
|
|
54
|
-
<svg
|
|
55
|
-
class="lexicon-icon lexicon-icon-caret-bottom"
|
|
56
|
-
role="presentation"
|
|
57
|
-
>
|
|
58
|
-
<use
|
|
59
|
-
xlink:href="path/to/spritemap#caret-bottom"
|
|
60
|
-
/>
|
|
61
|
-
</svg>
|
|
62
|
-
</button>
|
|
63
|
-
</li>
|
|
64
|
-
<li
|
|
65
|
-
class="breadcrumb-item"
|
|
66
|
-
>
|
|
67
|
-
<button
|
|
68
|
-
class="breadcrumb-link btn btn-unstyled"
|
|
69
|
-
data-testid="testId5"
|
|
70
|
-
title="5"
|
|
71
|
-
type="button"
|
|
35
|
+
4
|
|
36
|
+
</a>
|
|
37
|
+
</li>
|
|
38
|
+
<li
|
|
39
|
+
class="breadcrumb-item"
|
|
72
40
|
>
|
|
73
|
-
<
|
|
74
|
-
class="breadcrumb-
|
|
41
|
+
<a
|
|
42
|
+
class="breadcrumb-link"
|
|
43
|
+
data-testid="testId5"
|
|
75
44
|
>
|
|
76
45
|
5
|
|
77
|
-
</
|
|
78
|
-
</
|
|
79
|
-
</
|
|
80
|
-
</
|
|
46
|
+
</a>
|
|
47
|
+
</li>
|
|
48
|
+
</ol>
|
|
49
|
+
</nav>
|
|
81
50
|
</div>
|
|
82
51
|
`;
|
|
83
52
|
|
|
84
53
|
exports[`ClayBreadcrumb renders 1`] = `
|
|
85
54
|
<div>
|
|
86
|
-
<
|
|
87
|
-
|
|
55
|
+
<nav
|
|
56
|
+
aria-label="Breadcrumb"
|
|
57
|
+
class="align-items-center d-flex"
|
|
88
58
|
>
|
|
89
|
-
<
|
|
90
|
-
|
|
59
|
+
<button
|
|
60
|
+
aria-expanded="false"
|
|
61
|
+
aria-label="See full nested"
|
|
62
|
+
class="c-focus-inset btn btn-monospaced btn-xs"
|
|
63
|
+
title="See full nested"
|
|
64
|
+
type="button"
|
|
91
65
|
>
|
|
92
|
-
<
|
|
93
|
-
class="
|
|
94
|
-
|
|
95
|
-
title="1"
|
|
66
|
+
<svg
|
|
67
|
+
class="lexicon-icon lexicon-icon-angle-double-right"
|
|
68
|
+
role="presentation"
|
|
96
69
|
>
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
70
|
+
<use
|
|
71
|
+
xlink:href="path/to/spritemap#angle-double-right"
|
|
72
|
+
/>
|
|
73
|
+
</svg>
|
|
74
|
+
</button>
|
|
75
|
+
<ol
|
|
76
|
+
class="breadcrumb"
|
|
102
77
|
>
|
|
103
|
-
<
|
|
104
|
-
class="breadcrumb-
|
|
105
|
-
data-testid="testId2"
|
|
106
|
-
href="#2"
|
|
107
|
-
role="button"
|
|
78
|
+
<li
|
|
79
|
+
class="breadcrumb-item"
|
|
108
80
|
>
|
|
109
|
-
<
|
|
110
|
-
class="breadcrumb-
|
|
81
|
+
<a
|
|
82
|
+
class="breadcrumb-link"
|
|
83
|
+
data-testid="testId4"
|
|
84
|
+
href="#4"
|
|
111
85
|
>
|
|
112
|
-
|
|
113
|
-
</
|
|
114
|
-
</
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
class="dropdown breadcrumb-item"
|
|
118
|
-
>
|
|
119
|
-
<button
|
|
120
|
-
aria-controls="clay-dropdown-menu-1"
|
|
121
|
-
aria-expanded="false"
|
|
122
|
-
aria-haspopup="true"
|
|
123
|
-
class="dropdown-toggle breadcrumb-link btn btn-unstyled"
|
|
124
|
-
data-testid="breadcrumbDropdownTrigger"
|
|
125
|
-
type="button"
|
|
86
|
+
4
|
|
87
|
+
</a>
|
|
88
|
+
</li>
|
|
89
|
+
<li
|
|
90
|
+
class="breadcrumb-item"
|
|
126
91
|
>
|
|
127
|
-
<
|
|
128
|
-
class="
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
<use
|
|
132
|
-
xlink:href="path/to/spritemap#ellipsis-h"
|
|
133
|
-
/>
|
|
134
|
-
</svg>
|
|
135
|
-
<svg
|
|
136
|
-
class="lexicon-icon lexicon-icon-caret-bottom"
|
|
137
|
-
role="presentation"
|
|
138
|
-
>
|
|
139
|
-
<use
|
|
140
|
-
xlink:href="path/to/spritemap#caret-bottom"
|
|
141
|
-
/>
|
|
142
|
-
</svg>
|
|
143
|
-
</button>
|
|
144
|
-
</li>
|
|
145
|
-
<li
|
|
146
|
-
class="breadcrumb-item"
|
|
147
|
-
>
|
|
148
|
-
<a
|
|
149
|
-
class="breadcrumb-link"
|
|
150
|
-
data-testid="testId5"
|
|
151
|
-
href="#5"
|
|
152
|
-
role="button"
|
|
153
|
-
>
|
|
154
|
-
<span
|
|
155
|
-
class="breadcrumb-text-truncate"
|
|
92
|
+
<a
|
|
93
|
+
class="breadcrumb-link"
|
|
94
|
+
data-testid="testId5"
|
|
95
|
+
href="#5"
|
|
156
96
|
>
|
|
157
97
|
5
|
|
158
|
-
</
|
|
159
|
-
</
|
|
160
|
-
</
|
|
161
|
-
</
|
|
98
|
+
</a>
|
|
99
|
+
</li>
|
|
100
|
+
</ol>
|
|
101
|
+
</nav>
|
|
162
102
|
</div>
|
|
163
103
|
`;
|
|
164
104
|
|
|
165
105
|
exports[`ClayBreadcrumb renders with properties passed by \`ellipsisProps\` 1`] = `
|
|
166
106
|
<div>
|
|
167
|
-
<
|
|
168
|
-
|
|
107
|
+
<nav
|
|
108
|
+
aria-label="Breadcrumb"
|
|
109
|
+
class="align-items-center d-flex"
|
|
169
110
|
>
|
|
170
|
-
<
|
|
171
|
-
|
|
111
|
+
<button
|
|
112
|
+
aria-expanded="false"
|
|
113
|
+
aria-label="See full nested"
|
|
114
|
+
class="c-focus-inset btn btn-monospaced btn-xs"
|
|
115
|
+
title="See full nested"
|
|
116
|
+
type="button"
|
|
172
117
|
>
|
|
173
|
-
<
|
|
174
|
-
class="
|
|
175
|
-
|
|
176
|
-
title="1"
|
|
118
|
+
<svg
|
|
119
|
+
class="lexicon-icon lexicon-icon-angle-double-right"
|
|
120
|
+
role="presentation"
|
|
177
121
|
>
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
122
|
+
<use
|
|
123
|
+
xlink:href="path/to/spritemap#angle-double-right"
|
|
124
|
+
/>
|
|
125
|
+
</svg>
|
|
126
|
+
</button>
|
|
127
|
+
<ol
|
|
128
|
+
class="breadcrumb"
|
|
183
129
|
>
|
|
184
|
-
<
|
|
185
|
-
class="breadcrumb-
|
|
186
|
-
data-testid="testId2"
|
|
187
|
-
href="#2"
|
|
188
|
-
role="button"
|
|
130
|
+
<li
|
|
131
|
+
class="breadcrumb-item"
|
|
189
132
|
>
|
|
190
|
-
<
|
|
191
|
-
class="breadcrumb-
|
|
133
|
+
<a
|
|
134
|
+
class="breadcrumb-link"
|
|
135
|
+
data-testid="testId4"
|
|
136
|
+
href="#4"
|
|
192
137
|
>
|
|
193
|
-
|
|
194
|
-
</
|
|
195
|
-
</
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
class="dropdown breadcrumb-item"
|
|
199
|
-
style="font-size: 15px;"
|
|
200
|
-
>
|
|
201
|
-
<button
|
|
202
|
-
aria-controls="clay-dropdown-menu-2"
|
|
203
|
-
aria-expanded="false"
|
|
204
|
-
aria-haspopup="true"
|
|
205
|
-
class="dropdown-toggle breadcrumb-link btn btn-unstyled"
|
|
206
|
-
data-testid="breadcrumbDropdownTrigger"
|
|
207
|
-
type="button"
|
|
138
|
+
4
|
|
139
|
+
</a>
|
|
140
|
+
</li>
|
|
141
|
+
<li
|
|
142
|
+
class="breadcrumb-item"
|
|
208
143
|
>
|
|
209
|
-
<
|
|
210
|
-
class="
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
<use
|
|
214
|
-
xlink:href="path/to/spritemap#ellipsis-h"
|
|
215
|
-
/>
|
|
216
|
-
</svg>
|
|
217
|
-
<svg
|
|
218
|
-
class="lexicon-icon lexicon-icon-caret-bottom"
|
|
219
|
-
role="presentation"
|
|
220
|
-
>
|
|
221
|
-
<use
|
|
222
|
-
xlink:href="path/to/spritemap#caret-bottom"
|
|
223
|
-
/>
|
|
224
|
-
</svg>
|
|
225
|
-
</button>
|
|
226
|
-
</li>
|
|
227
|
-
<li
|
|
228
|
-
class="breadcrumb-item"
|
|
229
|
-
>
|
|
230
|
-
<a
|
|
231
|
-
class="breadcrumb-link"
|
|
232
|
-
data-testid="testId5"
|
|
233
|
-
href="#5"
|
|
234
|
-
role="button"
|
|
235
|
-
>
|
|
236
|
-
<span
|
|
237
|
-
class="breadcrumb-text-truncate"
|
|
144
|
+
<a
|
|
145
|
+
class="breadcrumb-link"
|
|
146
|
+
data-testid="testId5"
|
|
147
|
+
href="#5"
|
|
238
148
|
>
|
|
239
149
|
5
|
|
240
|
-
</
|
|
241
|
-
</
|
|
242
|
-
</
|
|
243
|
-
</
|
|
150
|
+
</a>
|
|
151
|
+
</li>
|
|
152
|
+
</ol>
|
|
153
|
+
</nav>
|
|
244
154
|
</div>
|
|
245
155
|
`;
|
|
246
156
|
|
|
247
157
|
exports[`ClayBreadcrumb throws a warning when not passing \`active\` to any \`items\` 1`] = `
|
|
248
158
|
<div>
|
|
249
|
-
<
|
|
250
|
-
|
|
159
|
+
<nav
|
|
160
|
+
aria-label="Breadcrumb"
|
|
161
|
+
class="align-items-center d-flex"
|
|
251
162
|
>
|
|
252
|
-
<
|
|
253
|
-
class="breadcrumb
|
|
163
|
+
<ol
|
|
164
|
+
class="breadcrumb"
|
|
254
165
|
>
|
|
255
|
-
<
|
|
256
|
-
class="breadcrumb-
|
|
257
|
-
data-testid="testId1"
|
|
258
|
-
href="#1"
|
|
259
|
-
role="button"
|
|
166
|
+
<li
|
|
167
|
+
class="breadcrumb-item"
|
|
260
168
|
>
|
|
261
|
-
<
|
|
262
|
-
class="breadcrumb-
|
|
169
|
+
<a
|
|
170
|
+
class="breadcrumb-link"
|
|
171
|
+
data-testid="testId1"
|
|
172
|
+
href="#1"
|
|
263
173
|
>
|
|
264
174
|
1
|
|
265
|
-
</
|
|
266
|
-
</
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
class="breadcrumb-item"
|
|
270
|
-
>
|
|
271
|
-
<a
|
|
272
|
-
class="breadcrumb-link"
|
|
273
|
-
data-testid="testId2"
|
|
274
|
-
href="#2"
|
|
275
|
-
role="button"
|
|
175
|
+
</a>
|
|
176
|
+
</li>
|
|
177
|
+
<li
|
|
178
|
+
class="breadcrumb-item"
|
|
276
179
|
>
|
|
277
|
-
<
|
|
278
|
-
class="breadcrumb-
|
|
180
|
+
<a
|
|
181
|
+
class="breadcrumb-link"
|
|
182
|
+
data-testid="testId2"
|
|
183
|
+
href="#2"
|
|
279
184
|
>
|
|
280
185
|
2
|
|
281
|
-
</
|
|
282
|
-
</
|
|
283
|
-
</
|
|
284
|
-
</
|
|
186
|
+
</a>
|
|
187
|
+
</li>
|
|
188
|
+
</ol>
|
|
189
|
+
</nav>
|
|
285
190
|
</div>
|
|
286
191
|
`;
|
package/src/index.tsx
CHANGED
|
@@ -3,26 +3,36 @@
|
|
|
3
3
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
import {
|
|
6
|
+
import {ClayButtonWithIcon} from '@clayui/button';
|
|
7
7
|
import classNames from 'classnames';
|
|
8
|
-
import React from 'react';
|
|
8
|
+
import React, {useState} from 'react';
|
|
9
9
|
import warning from 'warning';
|
|
10
10
|
|
|
11
|
-
import Ellipsis from './Ellipsis';
|
|
12
11
|
import Item from './Item';
|
|
13
12
|
|
|
14
13
|
type TItem = React.ComponentProps<typeof Item>;
|
|
15
14
|
type TItems = Array<TItem>;
|
|
16
15
|
|
|
17
16
|
interface IProps extends React.HTMLAttributes<HTMLOListElement> {
|
|
17
|
+
/**
|
|
18
|
+
* Defines the aria label of component elements.
|
|
19
|
+
*/
|
|
20
|
+
ariaLabels?: {
|
|
21
|
+
breadcrumb: string;
|
|
22
|
+
open: string;
|
|
23
|
+
close: string;
|
|
24
|
+
};
|
|
25
|
+
|
|
18
26
|
/**
|
|
19
27
|
* The number of Breadcrumb Items to show on each side of the active Breadcrumb Item before
|
|
20
28
|
* using an ellipsis dropdown.
|
|
29
|
+
* @deprecated since v3.91.0 - It is no longer necessary.
|
|
21
30
|
*/
|
|
22
31
|
ellipsisBuffer?: number;
|
|
23
32
|
|
|
24
33
|
/**
|
|
25
34
|
* Use this property for defining `otherProps` that will be passed to ellipsis dropdown trigger.
|
|
35
|
+
* @deprecated since v3.91.0 - It is no longer necessary.
|
|
26
36
|
*/
|
|
27
37
|
ellipsisProps?: Object;
|
|
28
38
|
|
|
@@ -44,9 +54,16 @@ const findActiveItems = (items: TItems) => {
|
|
|
44
54
|
};
|
|
45
55
|
|
|
46
56
|
const ClayBreadcrumb = ({
|
|
47
|
-
|
|
57
|
+
ariaLabels = {
|
|
58
|
+
breadcrumb: 'Breadcrumb',
|
|
59
|
+
close: 'Partially nest breadcrumbs',
|
|
60
|
+
open: 'See full nested',
|
|
61
|
+
},
|
|
62
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
48
63
|
ellipsisBuffer = 1,
|
|
64
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
49
65
|
ellipsisProps = {},
|
|
66
|
+
className,
|
|
50
67
|
items,
|
|
51
68
|
spritemap,
|
|
52
69
|
...otherProps
|
|
@@ -56,24 +73,52 @@ const ClayBreadcrumb = ({
|
|
|
56
73
|
'ClayBreadcrumb expects at least one `active` item on `items`.'
|
|
57
74
|
);
|
|
58
75
|
|
|
59
|
-
const
|
|
76
|
+
const [collapsed, setCollapsed] = useState(false);
|
|
77
|
+
|
|
78
|
+
return (
|
|
79
|
+
<nav
|
|
80
|
+
aria-label={ariaLabels.breadcrumb}
|
|
81
|
+
className="align-items-center d-flex"
|
|
82
|
+
>
|
|
83
|
+
{items.length > 3 && (
|
|
84
|
+
<ClayButtonWithIcon
|
|
85
|
+
aria-expanded={collapsed}
|
|
86
|
+
aria-label={collapsed ? ariaLabels.close : ariaLabels.open}
|
|
87
|
+
className="c-focus-inset"
|
|
88
|
+
displayType={null}
|
|
89
|
+
onClick={() => setCollapsed(!collapsed)}
|
|
90
|
+
size="xs"
|
|
91
|
+
spritemap={spritemap}
|
|
92
|
+
symbol={
|
|
93
|
+
collapsed ? 'angle-double-left' : 'angle-double-right'
|
|
94
|
+
}
|
|
95
|
+
title={collapsed ? ariaLabels.close : ariaLabels.open}
|
|
96
|
+
/>
|
|
97
|
+
)}
|
|
98
|
+
<ol {...otherProps} className={classNames('breadcrumb', className)}>
|
|
99
|
+
{items.length > 3 && !collapsed ? (
|
|
100
|
+
<Items
|
|
101
|
+
items={[
|
|
102
|
+
items[items.length - 2],
|
|
103
|
+
items[items.length - 1],
|
|
104
|
+
]}
|
|
105
|
+
/>
|
|
106
|
+
) : (
|
|
107
|
+
<Items items={items} />
|
|
108
|
+
)}
|
|
109
|
+
</ol>
|
|
110
|
+
</nav>
|
|
111
|
+
);
|
|
112
|
+
};
|
|
60
113
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
EllipsisComponent: Ellipsis,
|
|
65
|
-
ellipsisProps,
|
|
66
|
-
items,
|
|
67
|
-
spritemap,
|
|
68
|
-
},
|
|
69
|
-
ellipsisBuffer,
|
|
70
|
-
items.indexOf(activeItems[0])
|
|
71
|
-
)
|
|
72
|
-
: items;
|
|
114
|
+
type ItemsProps = {
|
|
115
|
+
items: TItems;
|
|
116
|
+
};
|
|
73
117
|
|
|
118
|
+
function Items({items}: ItemsProps) {
|
|
74
119
|
return (
|
|
75
|
-
|
|
76
|
-
{
|
|
120
|
+
<>
|
|
121
|
+
{items.map((item: TItem | React.ReactNode, i: number) =>
|
|
77
122
|
React.isValidElement(item) ? (
|
|
78
123
|
React.cloneElement(item, {key: `ellipsis${i}`})
|
|
79
124
|
) : (
|
|
@@ -86,8 +131,8 @@ const ClayBreadcrumb = ({
|
|
|
86
131
|
/>
|
|
87
132
|
)
|
|
88
133
|
)}
|
|
89
|
-
|
|
134
|
+
</>
|
|
90
135
|
);
|
|
91
|
-
}
|
|
136
|
+
}
|
|
92
137
|
|
|
93
138
|
export default ClayBreadcrumb;
|
package/lib/Ellipsis.d.ts
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
3
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
4
|
-
*/
|
|
5
|
-
import React from 'react';
|
|
6
|
-
import Item from './Item';
|
|
7
|
-
interface IEllipsisProps extends React.HTMLAttributes<HTMLLIElement> {
|
|
8
|
-
/**
|
|
9
|
-
* Property to define BreadcrumbEllipsis's items.
|
|
10
|
-
*/
|
|
11
|
-
items: Array<React.ComponentProps<typeof Item>>;
|
|
12
|
-
/**
|
|
13
|
-
* Path to the location of the spritemap resource.
|
|
14
|
-
*/
|
|
15
|
-
spritemap?: string;
|
|
16
|
-
}
|
|
17
|
-
declare const Ellipsis: ({ items, spritemap, title, ...otherProps }: IEllipsisProps) => JSX.Element;
|
|
18
|
-
export default Ellipsis;
|
package/lib/Ellipsis.js
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
var _button = _interopRequireDefault(require("@clayui/button"));
|
|
9
|
-
|
|
10
|
-
var _dropDown = _interopRequireDefault(require("@clayui/drop-down"));
|
|
11
|
-
|
|
12
|
-
var _icon = _interopRequireDefault(require("@clayui/icon"));
|
|
13
|
-
|
|
14
|
-
var _react = _interopRequireDefault(require("react"));
|
|
15
|
-
|
|
16
|
-
var _excluded = ["items", "spritemap", "title"];
|
|
17
|
-
|
|
18
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
-
|
|
20
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
21
|
-
|
|
22
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
23
|
-
|
|
24
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
25
|
-
|
|
26
|
-
var Ellipsis = function Ellipsis(_ref) {
|
|
27
|
-
var items = _ref.items,
|
|
28
|
-
spritemap = _ref.spritemap,
|
|
29
|
-
title = _ref.title,
|
|
30
|
-
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
31
|
-
|
|
32
|
-
return /*#__PURE__*/_react.default.createElement(_dropDown.default, _extends({
|
|
33
|
-
className: "breadcrumb-item",
|
|
34
|
-
containerElement: "li",
|
|
35
|
-
trigger: /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
36
|
-
"aria-label": otherProps['aria-label'],
|
|
37
|
-
className: "breadcrumb-link",
|
|
38
|
-
displayType: "unstyled",
|
|
39
|
-
title: title
|
|
40
|
-
}, /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
41
|
-
spritemap: spritemap,
|
|
42
|
-
symbol: "ellipsis-h"
|
|
43
|
-
}), /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
44
|
-
spritemap: spritemap,
|
|
45
|
-
symbol: "caret-bottom"
|
|
46
|
-
}))
|
|
47
|
-
}, otherProps, {
|
|
48
|
-
"aria-label": undefined
|
|
49
|
-
}), /*#__PURE__*/_react.default.createElement(_dropDown.default.ItemList, null, items.map(function (_ref2, i) {
|
|
50
|
-
var href = _ref2.href,
|
|
51
|
-
label = _ref2.label,
|
|
52
|
-
onClick = _ref2.onClick;
|
|
53
|
-
return /*#__PURE__*/_react.default.createElement(_dropDown.default.Item, {
|
|
54
|
-
href: href,
|
|
55
|
-
key: "breadcrumbEllipsisItem".concat(i),
|
|
56
|
-
onClick: onClick,
|
|
57
|
-
title: label
|
|
58
|
-
}, label);
|
|
59
|
-
})));
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
var _default = Ellipsis;
|
|
63
|
-
exports.default = _default;
|
package/src/Ellipsis.tsx
DELETED
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
3
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import ClayButton from '@clayui/button';
|
|
7
|
-
import ClayDropDown from '@clayui/drop-down';
|
|
8
|
-
import ClayIcon from '@clayui/icon';
|
|
9
|
-
import React from 'react';
|
|
10
|
-
|
|
11
|
-
import Item from './Item';
|
|
12
|
-
|
|
13
|
-
interface IEllipsisProps extends React.HTMLAttributes<HTMLLIElement> {
|
|
14
|
-
/**
|
|
15
|
-
* Property to define BreadcrumbEllipsis's items.
|
|
16
|
-
*/
|
|
17
|
-
items: Array<React.ComponentProps<typeof Item>>;
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* Path to the location of the spritemap resource.
|
|
21
|
-
*/
|
|
22
|
-
spritemap?: string;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
const Ellipsis = ({items, spritemap, title, ...otherProps}: IEllipsisProps) => (
|
|
26
|
-
<ClayDropDown
|
|
27
|
-
className="breadcrumb-item"
|
|
28
|
-
containerElement="li"
|
|
29
|
-
trigger={
|
|
30
|
-
<ClayButton
|
|
31
|
-
aria-label={otherProps['aria-label']}
|
|
32
|
-
className="breadcrumb-link"
|
|
33
|
-
data-testid="breadcrumbDropdownTrigger"
|
|
34
|
-
displayType="unstyled"
|
|
35
|
-
title={title}
|
|
36
|
-
>
|
|
37
|
-
<ClayIcon spritemap={spritemap} symbol="ellipsis-h" />
|
|
38
|
-
<ClayIcon spritemap={spritemap} symbol="caret-bottom" />
|
|
39
|
-
</ClayButton>
|
|
40
|
-
}
|
|
41
|
-
{...otherProps}
|
|
42
|
-
aria-label={undefined}
|
|
43
|
-
>
|
|
44
|
-
<ClayDropDown.ItemList>
|
|
45
|
-
{items.map(({href, label, onClick}, i) => (
|
|
46
|
-
<ClayDropDown.Item
|
|
47
|
-
href={href}
|
|
48
|
-
key={`breadcrumbEllipsisItem${i}`}
|
|
49
|
-
onClick={onClick}
|
|
50
|
-
title={label}
|
|
51
|
-
>
|
|
52
|
-
{label}
|
|
53
|
-
</ClayDropDown.Item>
|
|
54
|
-
))}
|
|
55
|
-
</ClayDropDown.ItemList>
|
|
56
|
-
</ClayDropDown>
|
|
57
|
-
);
|
|
58
|
-
|
|
59
|
-
export default Ellipsis;
|