@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.
Files changed (10) hide show
  1. package/lib/Item.js +10 -17
  2. package/lib/index.d.ts +11 -1
  3. package/lib/index.js +61 -16
  4. package/package.json +3 -5
  5. package/src/Item.tsx +14 -29
  6. package/src/__tests__/__snapshots__/index.tsx.snap +135 -230
  7. package/src/index.tsx +66 -21
  8. package/lib/Ellipsis.d.ts +0 -18
  9. package/lib/Ellipsis.js +0 -63
  10. 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
- onClick = _ref.onClick,
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), !active && href ? /*#__PURE__*/_react.default.createElement(_link.default, {
35
+ }, otherProps), /*#__PURE__*/_react.default.createElement(_link.default, {
36
+ "aria-current": active ? 'page' : undefined,
38
37
  className: "breadcrumb-link",
39
38
  href: href,
40
- role: "button"
41
- }, /*#__PURE__*/_react.default.createElement("span", {
42
- className: "breadcrumb-text-truncate"
43
- }, label)) : !active && onClick ? /*#__PURE__*/_react.default.createElement(_button.default, {
44
- className: "breadcrumb-link",
45
- displayType: "unstyled",
46
- onClick: onClick,
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: ({ className, ellipsisBuffer, ellipsisProps, items, spritemap, ...otherProps }: IProps) => JSX.Element;
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 _shared = require("@clayui/shared");
10
+ var _button = require("@clayui/button");
9
11
 
10
12
  var _classnames = _interopRequireDefault(require("classnames"));
11
13
 
12
- var _react = _interopRequireDefault(require("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 = ["className", "ellipsisBuffer", "ellipsisProps", "items", "spritemap"];
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 className = _ref.className,
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
- var activeItems = findActiveItems(items);
48
- var breadCrumbItems = ellipsisBuffer ? (0, _shared.getEllipsisItems)({
49
- EllipsisComponent: _Ellipsis.default,
50
- ellipsisProps: ellipsisProps,
51
- items: items,
52
- spritemap: spritemap
53
- }, ellipsisBuffer, items.indexOf(activeItems[0])) : items;
54
- return /*#__PURE__*/_react.default.createElement("ol", _extends({}, otherProps, {
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
- }), breadCrumbItems.map(function (item, i) {
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.91.1",
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.83.0",
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": "e1bac197f040e17357f4d850aaca51fd1b51bb90"
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
- {!active && href ? (
41
- <ClayLink
42
- className="breadcrumb-link"
43
- data-testid={`testId${label}`}
44
- href={href}
45
- role="button"
46
- >
47
- <span className="breadcrumb-text-truncate">{label}</span>
48
- </ClayLink>
49
- ) : !active && onClick ? (
50
- <ClayButton
51
- className="breadcrumb-link"
52
- data-testid={`testId${label}`}
53
- displayType="unstyled"
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
 
package/src/__tests__/__snapshots__/index.tsx.snap CHANGED
@@ -2,285 +2,190 @@
2
2
 
3
3
  exports[`ClayBreadcrumb calls callback when an item is clicked 1`] = `
4
4
  <div>
5
- <ol
6
- class="breadcrumb"
5
+ <nav
6
+ aria-label="Breadcrumb"
7
+ class="align-items-center d-flex"
7
8
  >
8
- <li
9
- class="breadcrumb-item active"
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
- <span
12
- class="breadcrumb-text-truncate"
13
- data-testid="testId1"
14
- title="1"
16
+ <svg
17
+ class="lexicon-icon lexicon-icon-angle-double-right"
18
+ role="presentation"
15
19
  >
16
- 1
17
- </span>
18
- </li>
19
- <li
20
- class="breadcrumb-item"
20
+ <use
21
+ xlink:href="path/to/spritemap#angle-double-right"
22
+ />
23
+ </svg>
24
+ </button>
25
+ <ol
26
+ class="breadcrumb"
21
27
  >
22
- <button
23
- class="breadcrumb-link btn btn-unstyled"
24
- data-testid="testId2"
25
- title="2"
26
- type="button"
28
+ <li
29
+ class="breadcrumb-item"
27
30
  >
28
- <span
29
- class="breadcrumb-text-truncate"
31
+ <a
32
+ class="breadcrumb-link"
33
+ data-testid="testId4"
30
34
  >
31
- 2
32
- </span>
33
- </button>
34
- </li>
35
- <li
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
- <span
74
- class="breadcrumb-text-truncate"
41
+ <a
42
+ class="breadcrumb-link"
43
+ data-testid="testId5"
75
44
  >
76
45
  5
77
- </span>
78
- </button>
79
- </li>
80
- </ol>
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
- <ol
87
- class="breadcrumb"
55
+ <nav
56
+ aria-label="Breadcrumb"
57
+ class="align-items-center d-flex"
88
58
  >
89
- <li
90
- class="breadcrumb-item active"
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
- <span
93
- class="breadcrumb-text-truncate"
94
- data-testid="testId1"
95
- title="1"
66
+ <svg
67
+ class="lexicon-icon lexicon-icon-angle-double-right"
68
+ role="presentation"
96
69
  >
97
- 1
98
- </span>
99
- </li>
100
- <li
101
- class="breadcrumb-item"
70
+ <use
71
+ xlink:href="path/to/spritemap#angle-double-right"
72
+ />
73
+ </svg>
74
+ </button>
75
+ <ol
76
+ class="breadcrumb"
102
77
  >
103
- <a
104
- class="breadcrumb-link"
105
- data-testid="testId2"
106
- href="#2"
107
- role="button"
78
+ <li
79
+ class="breadcrumb-item"
108
80
  >
109
- <span
110
- class="breadcrumb-text-truncate"
81
+ <a
82
+ class="breadcrumb-link"
83
+ data-testid="testId4"
84
+ href="#4"
111
85
  >
112
- 2
113
- </span>
114
- </a>
115
- </li>
116
- <li
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
- <svg
128
- class="lexicon-icon lexicon-icon-ellipsis-h"
129
- role="presentation"
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
- </span>
159
- </a>
160
- </li>
161
- </ol>
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
- <ol
168
- class="breadcrumb"
107
+ <nav
108
+ aria-label="Breadcrumb"
109
+ class="align-items-center d-flex"
169
110
  >
170
- <li
171
- class="breadcrumb-item active"
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
- <span
174
- class="breadcrumb-text-truncate"
175
- data-testid="testId1"
176
- title="1"
118
+ <svg
119
+ class="lexicon-icon lexicon-icon-angle-double-right"
120
+ role="presentation"
177
121
  >
178
- 1
179
- </span>
180
- </li>
181
- <li
182
- class="breadcrumb-item"
122
+ <use
123
+ xlink:href="path/to/spritemap#angle-double-right"
124
+ />
125
+ </svg>
126
+ </button>
127
+ <ol
128
+ class="breadcrumb"
183
129
  >
184
- <a
185
- class="breadcrumb-link"
186
- data-testid="testId2"
187
- href="#2"
188
- role="button"
130
+ <li
131
+ class="breadcrumb-item"
189
132
  >
190
- <span
191
- class="breadcrumb-text-truncate"
133
+ <a
134
+ class="breadcrumb-link"
135
+ data-testid="testId4"
136
+ href="#4"
192
137
  >
193
- 2
194
- </span>
195
- </a>
196
- </li>
197
- <li
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
- <svg
210
- class="lexicon-icon lexicon-icon-ellipsis-h"
211
- role="presentation"
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
- </span>
241
- </a>
242
- </li>
243
- </ol>
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
- <ol
250
- class="breadcrumb"
159
+ <nav
160
+ aria-label="Breadcrumb"
161
+ class="align-items-center d-flex"
251
162
  >
252
- <li
253
- class="breadcrumb-item"
163
+ <ol
164
+ class="breadcrumb"
254
165
  >
255
- <a
256
- class="breadcrumb-link"
257
- data-testid="testId1"
258
- href="#1"
259
- role="button"
166
+ <li
167
+ class="breadcrumb-item"
260
168
  >
261
- <span
262
- class="breadcrumb-text-truncate"
169
+ <a
170
+ class="breadcrumb-link"
171
+ data-testid="testId1"
172
+ href="#1"
263
173
  >
264
174
  1
265
- </span>
266
- </a>
267
- </li>
268
- <li
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
- <span
278
- class="breadcrumb-text-truncate"
180
+ <a
181
+ class="breadcrumb-link"
182
+ data-testid="testId2"
183
+ href="#2"
279
184
  >
280
185
  2
281
- </span>
282
- </a>
283
- </li>
284
- </ol>
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 {getEllipsisItems} from '@clayui/shared';
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
- className,
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 activeItems = findActiveItems(items);
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
- const breadCrumbItems = ellipsisBuffer
62
- ? getEllipsisItems(
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
- <ol {...otherProps} className={classNames('breadcrumb', className)}>
76
- {breadCrumbItems.map((item: TItem | React.ReactNode, i: number) =>
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
- </ol>
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;