@clayui/breadcrumb 3.157.0 → 3.159.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/package.json +17 -7
- package/src/index.tsx +0 -138
package/package.json
CHANGED
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
"extends browserslist-config-clay"
|
|
4
4
|
],
|
|
5
5
|
"dependencies": {
|
|
6
|
-
"@clayui/button": "^3.
|
|
7
|
-
"@clayui/icon": "^3.
|
|
8
|
-
"@clayui/link": "^3.
|
|
9
|
-
"@clayui/shared": "^3.
|
|
6
|
+
"@clayui/button": "^3.159.0",
|
|
7
|
+
"@clayui/icon": "^3.159.0",
|
|
8
|
+
"@clayui/link": "^3.159.0",
|
|
9
|
+
"@clayui/shared": "^3.159.0",
|
|
10
10
|
"classnames": "2.3.1",
|
|
11
11
|
"warning": "^4.0.3"
|
|
12
12
|
},
|
|
@@ -19,10 +19,10 @@
|
|
|
19
19
|
"react"
|
|
20
20
|
],
|
|
21
21
|
"license": "BSD-3-Clause",
|
|
22
|
-
"main": "
|
|
22
|
+
"main": "lib/cjs/index.js",
|
|
23
23
|
"name": "@clayui/breadcrumb",
|
|
24
24
|
"peerDependencies": {
|
|
25
|
-
"@clayui/css": "^3.
|
|
25
|
+
"@clayui/css": "^3.159.0",
|
|
26
26
|
"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
|
|
27
27
|
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
|
|
28
28
|
},
|
|
@@ -34,5 +34,15 @@
|
|
|
34
34
|
"buildTypes": "cross-env NODE_ENV=production tsc --project ./tsconfig.declarations.json",
|
|
35
35
|
"test": "jest --config ../../jest.config.js"
|
|
36
36
|
},
|
|
37
|
-
"version": "3.
|
|
37
|
+
"version": "3.159.0",
|
|
38
|
+
"module": "lib/esm/index.js",
|
|
39
|
+
"exports": {
|
|
40
|
+
".": {
|
|
41
|
+
"types": "./lib/index.d.ts",
|
|
42
|
+
"import": "./lib/esm/index.js",
|
|
43
|
+
"require": "./lib/cjs/index.js"
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
"types": "lib/index.d.ts",
|
|
47
|
+
"ts:main": "src/index.tsx"
|
|
38
48
|
}
|
package/src/index.tsx
DELETED
|
@@ -1,138 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SPDX-FileCopyrightText: (c) 2026 Liferay, Inc. https://liferay.com
|
|
3
|
-
* SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import {ClayButtonWithIcon} from '@clayui/button';
|
|
7
|
-
import classNames from 'classnames';
|
|
8
|
-
import React, {useState} from 'react';
|
|
9
|
-
import warning from 'warning';
|
|
10
|
-
|
|
11
|
-
import Item from './Item';
|
|
12
|
-
|
|
13
|
-
type TItem = React.ComponentProps<typeof Item>;
|
|
14
|
-
type TItems = Array<TItem>;
|
|
15
|
-
|
|
16
|
-
interface IProps extends React.HTMLAttributes<HTMLOListElement> {
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* Defines the aria label of component elements.
|
|
20
|
-
*/
|
|
21
|
-
ariaLabels?: {
|
|
22
|
-
breadcrumb: string;
|
|
23
|
-
close: string;
|
|
24
|
-
open: string;
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* The number of Breadcrumb Items to show on each side of the active Breadcrumb Item before
|
|
29
|
-
* using an ellipsis dropdown.
|
|
30
|
-
* @deprecated since v3.91.0 - It is no longer necessary.
|
|
31
|
-
*/
|
|
32
|
-
ellipsisBuffer?: number;
|
|
33
|
-
|
|
34
|
-
/**
|
|
35
|
-
* Use this property for defining `otherProps` that will be passed to ellipsis dropdown trigger.
|
|
36
|
-
* @deprecated since v3.91.0 - It is no longer necessary.
|
|
37
|
-
*/
|
|
38
|
-
ellipsisProps?: Object;
|
|
39
|
-
|
|
40
|
-
/**
|
|
41
|
-
* Property to define Breadcrumb's items.
|
|
42
|
-
*/
|
|
43
|
-
items: Array<React.ComponentProps<typeof Item>>;
|
|
44
|
-
|
|
45
|
-
/**
|
|
46
|
-
* Path to the location of the spritemap resource.
|
|
47
|
-
*/
|
|
48
|
-
spritemap?: string;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
function findActiveItems(items: TItems) {
|
|
52
|
-
return items.filter((item) => {
|
|
53
|
-
return item.active;
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
function Breadcrumb({
|
|
58
|
-
ariaLabels = {
|
|
59
|
-
breadcrumb: 'Breadcrumb',
|
|
60
|
-
close: 'Partially nest breadcrumbs',
|
|
61
|
-
open: 'See full nested',
|
|
62
|
-
},
|
|
63
|
-
|
|
64
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
65
|
-
ellipsisBuffer = 1,
|
|
66
|
-
|
|
67
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
68
|
-
ellipsisProps = {},
|
|
69
|
-
className,
|
|
70
|
-
items,
|
|
71
|
-
spritemap,
|
|
72
|
-
...otherProps
|
|
73
|
-
}: IProps) {
|
|
74
|
-
warning(
|
|
75
|
-
findActiveItems(items).length === 1,
|
|
76
|
-
'ClayBreadcrumb expects at least one `active` item on `items`.'
|
|
77
|
-
);
|
|
78
|
-
const [collapsed, setCollapsed] = useState(false);
|
|
79
|
-
|
|
80
|
-
return (
|
|
81
|
-
<nav aria-label={ariaLabels.breadcrumb} className="breadcrumb-bar">
|
|
82
|
-
{items.length > 3 && (
|
|
83
|
-
<ClayButtonWithIcon
|
|
84
|
-
aria-expanded={collapsed}
|
|
85
|
-
aria-label={collapsed ? ariaLabels.close : ariaLabels.open}
|
|
86
|
-
className="breadcrumb-toggle"
|
|
87
|
-
displayType={null}
|
|
88
|
-
onClick={() => setCollapsed(!collapsed)}
|
|
89
|
-
size="xs"
|
|
90
|
-
spritemap={spritemap}
|
|
91
|
-
symbol={
|
|
92
|
-
collapsed ? 'angle-double-left' : 'angle-double-right'
|
|
93
|
-
}
|
|
94
|
-
title={collapsed ? ariaLabels.close : ariaLabels.open}
|
|
95
|
-
/>
|
|
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
|
-
}
|
|
113
|
-
|
|
114
|
-
type ItemsProps = {
|
|
115
|
-
items: TItems;
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
function Items({items}: ItemsProps) {
|
|
119
|
-
return (
|
|
120
|
-
<>
|
|
121
|
-
{items.map((item: TItem | React.ReactNode, i: number) =>
|
|
122
|
-
React.isValidElement(item) ? (
|
|
123
|
-
React.cloneElement(item, {key: `ellipsis${i}`})
|
|
124
|
-
) : (
|
|
125
|
-
<Item
|
|
126
|
-
active={(item as TItem).active}
|
|
127
|
-
href={(item as TItem).href}
|
|
128
|
-
key={`breadcrumbItem${i}`}
|
|
129
|
-
label={(item as TItem).label}
|
|
130
|
-
onClick={(item as TItem).onClick}
|
|
131
|
-
/>
|
|
132
|
-
)
|
|
133
|
-
)}
|
|
134
|
-
</>
|
|
135
|
-
);
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
export default Breadcrumb;
|