@olenbetong/synergi-react 2.4.0 → 2.5.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/es/components/Toolbar/Toolbar.css +124 -0
- package/es/components/Toolbar/index.d.ts +15 -0
- package/es/components/Toolbar/index.js +64 -0
- package/es/index.d.ts +1 -0
- package/es/index.js +1 -0
- package/package.json +2 -2
- package/src/components/Toolbar/Toolbar.css +124 -0
- package/src/components/Toolbar/index.tsx +132 -0
- package/src/index.ts +8 -0
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
.ob-breadcrumbs {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
overflow: hidden;
|
|
5
|
+
width: 100%;
|
|
6
|
+
height: 100%;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.ob-breadcrumbs__list {
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
list-style: none;
|
|
13
|
+
margin: 0;
|
|
14
|
+
padding: 0;
|
|
15
|
+
gap: var(--ds-space-100, 0.25rem);
|
|
16
|
+
flex-wrap: nowrap;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.ob-breadcrumbs__item {
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
font-size: var(--ds-font-size-100, 0.875rem);
|
|
24
|
+
white-space: nowrap;
|
|
25
|
+
color: var(--ds-text-subtle, currentColor);
|
|
26
|
+
|
|
27
|
+
a {
|
|
28
|
+
color: var(--ds-link-default, var(--ds-text-subtle, currentColor));
|
|
29
|
+
text-decoration: none;
|
|
30
|
+
|
|
31
|
+
&:hover {
|
|
32
|
+
text-decoration: underline;
|
|
33
|
+
color: var(--ds-link-default-hovered, var(--ds-text, currentColor));
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&:focus-visible {
|
|
37
|
+
outline: 2px solid var(--ds-border-focused, currentColor);
|
|
38
|
+
outline-offset: 2px;
|
|
39
|
+
border-radius: var(--ds-border-radius-100, 2px);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&:not(:last-child)::after {
|
|
44
|
+
content: "/";
|
|
45
|
+
margin-inline-start: var(--ds-space-100, 0.25rem);
|
|
46
|
+
color: var(--ds-text-disabled, currentColor);
|
|
47
|
+
opacity: 0.5;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
span[aria-current="page"] {
|
|
51
|
+
color: var(--ds-text, currentColor);
|
|
52
|
+
font-weight: var(--ds-font-weight-semibold, 500);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.ob-breadcrumbs__overflow {
|
|
57
|
+
position: relative;
|
|
58
|
+
|
|
59
|
+
button {
|
|
60
|
+
background: none;
|
|
61
|
+
border: 1px solid transparent;
|
|
62
|
+
border-radius: var(--ds-border-radius-100, 2px);
|
|
63
|
+
color: var(--ds-text-subtle, currentColor);
|
|
64
|
+
cursor: pointer;
|
|
65
|
+
font-size: var(--ds-font-size-100, 0.875rem);
|
|
66
|
+
line-height: 1;
|
|
67
|
+
padding: var(--ds-space-050, 0.125rem) var(--ds-space-150, 0.375rem);
|
|
68
|
+
|
|
69
|
+
&:hover {
|
|
70
|
+
background: var(--ds-background-neutral-default, rgba(0, 0, 0, 0.06));
|
|
71
|
+
border-color: var(--ds-border-default, transparent);
|
|
72
|
+
color: var(--ds-text, currentColor);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&:focus-visible {
|
|
76
|
+
outline: 2px solid var(--ds-border-focused, currentColor);
|
|
77
|
+
outline-offset: 2px;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&::after {
|
|
82
|
+
content: "/";
|
|
83
|
+
margin-inline-start: var(--ds-space-100, 0.25rem);
|
|
84
|
+
color: var(--ds-text-disabled, currentColor);
|
|
85
|
+
opacity: 0.5;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.ob-breadcrumbs__overflow-menu {
|
|
90
|
+
background: var(--ds-surface-overlay, #fff);
|
|
91
|
+
border: 1px solid var(--ds-border-default, currentColor);
|
|
92
|
+
border-radius: var(--ds-border-radius-100, 4px);
|
|
93
|
+
box-shadow: var(--ds-shadow-overlay, 0 4px 8px rgba(0, 0, 0, 0.16));
|
|
94
|
+
left: 0;
|
|
95
|
+
list-style: none;
|
|
96
|
+
margin: var(--ds-space-050, 0.25rem) 0 0;
|
|
97
|
+
min-width: 10rem;
|
|
98
|
+
padding: var(--ds-space-100, 0.25rem) 0;
|
|
99
|
+
position: absolute;
|
|
100
|
+
top: 100%;
|
|
101
|
+
z-index: var(--ds-z-index-modal, 400);
|
|
102
|
+
|
|
103
|
+
li {
|
|
104
|
+
a,
|
|
105
|
+
span {
|
|
106
|
+
color: var(--ds-text, inherit);
|
|
107
|
+
display: block;
|
|
108
|
+
font-size: var(--ds-font-size-100, 0.875rem);
|
|
109
|
+
padding: var(--ds-space-100, 0.25rem) var(--ds-space-200, 0.5rem);
|
|
110
|
+
text-decoration: none;
|
|
111
|
+
white-space: nowrap;
|
|
112
|
+
|
|
113
|
+
&:hover {
|
|
114
|
+
background: var(--ds-background-neutral-default, rgba(0, 0, 0, 0.06));
|
|
115
|
+
color: var(--ds-text, inherit);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
a:focus-visible {
|
|
120
|
+
outline: 2px solid var(--ds-border-focused, currentColor);
|
|
121
|
+
outline-offset: -2px;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import "./Toolbar.css";
|
|
2
|
+
export type ToolbarPortalSlot = "breadcrumbs" | "search" | "actions";
|
|
3
|
+
export type ToolbarPortalProps = {
|
|
4
|
+
slot: ToolbarPortalSlot;
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
};
|
|
7
|
+
export declare function ToolbarPortal({ slot, children }: ToolbarPortalProps): import("react").ReactPortal | null;
|
|
8
|
+
export type BreadcrumbItem = {
|
|
9
|
+
label: string;
|
|
10
|
+
href?: string;
|
|
11
|
+
};
|
|
12
|
+
export type ToolbarBreadcrumbsProps = {
|
|
13
|
+
items: BreadcrumbItem[];
|
|
14
|
+
};
|
|
15
|
+
export declare function ToolbarBreadcrumbs({ items }: ToolbarBreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import "./Toolbar.css";
|
|
3
|
+
import { useEffect, useLayoutEffect, useRef, useState } from "react";
|
|
4
|
+
import { createPortal } from "react-dom";
|
|
5
|
+
export function ToolbarPortal({ slot, children }) {
|
|
6
|
+
// Target element IDs: ob-toolbar-breadcrumbs, ob-toolbar-search, ob-toolbar-actions
|
|
7
|
+
const target = document.getElementById(`ob-toolbar-${slot}`);
|
|
8
|
+
if (!target)
|
|
9
|
+
return null;
|
|
10
|
+
return createPortal(children, target);
|
|
11
|
+
}
|
|
12
|
+
function BreadcrumbsInner({ items }) {
|
|
13
|
+
let [firstVisible, setFirstVisible] = useState(0);
|
|
14
|
+
let [overflowOpen, setOverflowOpen] = useState(false);
|
|
15
|
+
let navRef = useRef(null);
|
|
16
|
+
let listRef = useRef(null);
|
|
17
|
+
let overflowItemRef = useRef(null);
|
|
18
|
+
// Detect overflow: increment firstVisible until the list fits within the nav.
|
|
19
|
+
// Runs after every render so it keeps pushing items into overflow until the
|
|
20
|
+
// list stops overflowing or only the last item (current page) remains.
|
|
21
|
+
useLayoutEffect(() => {
|
|
22
|
+
let nav = navRef.current;
|
|
23
|
+
let list = listRef.current;
|
|
24
|
+
if (!nav || !list)
|
|
25
|
+
return;
|
|
26
|
+
if (list.scrollWidth > nav.clientWidth && firstVisible < items.length - 1) {
|
|
27
|
+
setFirstVisible((prev) => prev + 1);
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
// ResizeObserver resets firstVisible to 0 on container resize so that the
|
|
31
|
+
// overflow calculation starts fresh at the new container width.
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
let nav = navRef.current;
|
|
34
|
+
if (!nav)
|
|
35
|
+
return;
|
|
36
|
+
let observer = new ResizeObserver(() => {
|
|
37
|
+
setFirstVisible(0);
|
|
38
|
+
});
|
|
39
|
+
observer.observe(nav);
|
|
40
|
+
return () => observer.disconnect();
|
|
41
|
+
}, []);
|
|
42
|
+
// Close the overflow dropdown when the user clicks outside of it.
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
if (!overflowOpen)
|
|
45
|
+
return;
|
|
46
|
+
function handleClickOutside(event) {
|
|
47
|
+
if (overflowItemRef.current && !overflowItemRef.current.contains(event.target)) {
|
|
48
|
+
setOverflowOpen(false);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
52
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
53
|
+
}, [overflowOpen]);
|
|
54
|
+
let hiddenItems = items.slice(0, firstVisible);
|
|
55
|
+
let visibleItems = items.slice(firstVisible);
|
|
56
|
+
return (_jsx("nav", { className: "ob-breadcrumbs", "aria-label": "Breadcrumb", ref: navRef, children: _jsxs("ol", { className: "ob-breadcrumbs__list", ref: listRef, children: [firstVisible > 0 && (_jsxs("li", { className: "ob-breadcrumbs__item ob-breadcrumbs__overflow", ref: overflowItemRef, children: [_jsx("button", { type: "button", "aria-label": "Show hidden breadcrumbs", "aria-expanded": overflowOpen, "aria-haspopup": "true", onClick: () => setOverflowOpen((prev) => !prev), children: "\u2026" }), overflowOpen && (_jsx("ul", { className: "ob-breadcrumbs__overflow-menu", role: "menu", children: hiddenItems.map((item, index) => (_jsx("li", { role: "menuitem", children: item.href ? _jsx("a", { href: item.href, children: item.label }) : _jsx("span", { children: item.label }) }, index))) }))] })), visibleItems.map((item, index) => {
|
|
57
|
+
let actualIndex = firstVisible + index;
|
|
58
|
+
let isCurrent = actualIndex === items.length - 1;
|
|
59
|
+
return (_jsx("li", { className: "ob-breadcrumbs__item", children: isCurrent ? (_jsx("span", { "aria-current": "page", children: item.label })) : item.href ? (_jsx("a", { href: item.href, children: item.label })) : (_jsx("span", { children: item.label })) }, actualIndex));
|
|
60
|
+
})] }) }));
|
|
61
|
+
}
|
|
62
|
+
export function ToolbarBreadcrumbs({ items }) {
|
|
63
|
+
return (_jsx(ToolbarPortal, { slot: "breadcrumbs", children: _jsx(BreadcrumbsInner, { items: items }) }));
|
|
64
|
+
}
|
package/es/index.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ export { MergeProgressDialog, type MergeProgressDialogProps } from "./components
|
|
|
8
8
|
export { BannerImage as PageBannerImage, type BannerImageProps, PageBanner, type PageBannerProps, Tab as PageBannerTab, TabList as PageBannerTabList, type TabListProps as PageBannerTabListProps, type TabProps as PageBannerTabProps, Title as PageBannerTitle, type TitleProps as PageBannerTitleProps, } from "./components/PageBanner/index.js";
|
|
9
9
|
export * from "./components/PdfViewer/index.js";
|
|
10
10
|
export { Portal } from "./components/Portal/index.js";
|
|
11
|
+
export { ToolbarBreadcrumbs, ToolbarPortal, type BreadcrumbItem, type ToolbarBreadcrumbsProps, type ToolbarPortalProps, type ToolbarPortalSlot, } from "./components/Toolbar/index.js";
|
|
11
12
|
export { ProgressBar } from "./components/ProgressBar/index.js";
|
|
12
13
|
export { Sidebar, type SidebarProps } from "./components/Sidebar/index.js";
|
|
13
14
|
export { Spinner, type SpinnerProps } from "./components/Spinner/index.js";
|
package/es/index.js
CHANGED
|
@@ -8,6 +8,7 @@ export { MergeProgressDialog } from "./components/MergeProgressDialog/index.js";
|
|
|
8
8
|
export { BannerImage as PageBannerImage, PageBanner, Tab as PageBannerTab, TabList as PageBannerTabList, Title as PageBannerTitle, } from "./components/PageBanner/index.js";
|
|
9
9
|
export * from "./components/PdfViewer/index.js";
|
|
10
10
|
export { Portal } from "./components/Portal/index.js";
|
|
11
|
+
export { ToolbarBreadcrumbs, ToolbarPortal, } from "./components/Toolbar/index.js";
|
|
11
12
|
export { ProgressBar } from "./components/ProgressBar/index.js";
|
|
12
13
|
export { Sidebar } from "./components/Sidebar/index.js";
|
|
13
14
|
export { Spinner } from "./components/Spinner/index.js";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@olenbetong/synergi-react",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.5.0",
|
|
4
4
|
"description": "Standalone React component for SynergiWeb and Partner Portal",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"react-pdf": "^10.2.0",
|
|
44
44
|
"@olenbetong/appframe-core": "2.11.10",
|
|
45
45
|
"@olenbetong/appframe-react": "1.21.25",
|
|
46
|
-
"@olenbetong/appframe-mui": "6.1.
|
|
46
|
+
"@olenbetong/appframe-mui": "6.1.1"
|
|
47
47
|
},
|
|
48
48
|
"repository": {
|
|
49
49
|
"type": "git",
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
.ob-breadcrumbs {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
overflow: hidden;
|
|
5
|
+
width: 100%;
|
|
6
|
+
height: 100%;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.ob-breadcrumbs__list {
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
list-style: none;
|
|
13
|
+
margin: 0;
|
|
14
|
+
padding: 0;
|
|
15
|
+
gap: var(--ds-space-100, 0.25rem);
|
|
16
|
+
flex-wrap: nowrap;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.ob-breadcrumbs__item {
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
font-size: var(--ds-font-size-100, 0.875rem);
|
|
24
|
+
white-space: nowrap;
|
|
25
|
+
color: var(--ds-text-subtle, currentColor);
|
|
26
|
+
|
|
27
|
+
a {
|
|
28
|
+
color: var(--ds-link-default, var(--ds-text-subtle, currentColor));
|
|
29
|
+
text-decoration: none;
|
|
30
|
+
|
|
31
|
+
&:hover {
|
|
32
|
+
text-decoration: underline;
|
|
33
|
+
color: var(--ds-link-default-hovered, var(--ds-text, currentColor));
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&:focus-visible {
|
|
37
|
+
outline: 2px solid var(--ds-border-focused, currentColor);
|
|
38
|
+
outline-offset: 2px;
|
|
39
|
+
border-radius: var(--ds-border-radius-100, 2px);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&:not(:last-child)::after {
|
|
44
|
+
content: "/";
|
|
45
|
+
margin-inline-start: var(--ds-space-100, 0.25rem);
|
|
46
|
+
color: var(--ds-text-disabled, currentColor);
|
|
47
|
+
opacity: 0.5;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
span[aria-current="page"] {
|
|
51
|
+
color: var(--ds-text, currentColor);
|
|
52
|
+
font-weight: var(--ds-font-weight-semibold, 500);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.ob-breadcrumbs__overflow {
|
|
57
|
+
position: relative;
|
|
58
|
+
|
|
59
|
+
button {
|
|
60
|
+
background: none;
|
|
61
|
+
border: 1px solid transparent;
|
|
62
|
+
border-radius: var(--ds-border-radius-100, 2px);
|
|
63
|
+
color: var(--ds-text-subtle, currentColor);
|
|
64
|
+
cursor: pointer;
|
|
65
|
+
font-size: var(--ds-font-size-100, 0.875rem);
|
|
66
|
+
line-height: 1;
|
|
67
|
+
padding: var(--ds-space-050, 0.125rem) var(--ds-space-150, 0.375rem);
|
|
68
|
+
|
|
69
|
+
&:hover {
|
|
70
|
+
background: var(--ds-background-neutral-default, rgba(0, 0, 0, 0.06));
|
|
71
|
+
border-color: var(--ds-border-default, transparent);
|
|
72
|
+
color: var(--ds-text, currentColor);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&:focus-visible {
|
|
76
|
+
outline: 2px solid var(--ds-border-focused, currentColor);
|
|
77
|
+
outline-offset: 2px;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&::after {
|
|
82
|
+
content: "/";
|
|
83
|
+
margin-inline-start: var(--ds-space-100, 0.25rem);
|
|
84
|
+
color: var(--ds-text-disabled, currentColor);
|
|
85
|
+
opacity: 0.5;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.ob-breadcrumbs__overflow-menu {
|
|
90
|
+
background: var(--ds-surface-overlay, #fff);
|
|
91
|
+
border: 1px solid var(--ds-border-default, currentColor);
|
|
92
|
+
border-radius: var(--ds-border-radius-100, 4px);
|
|
93
|
+
box-shadow: var(--ds-shadow-overlay, 0 4px 8px rgba(0, 0, 0, 0.16));
|
|
94
|
+
left: 0;
|
|
95
|
+
list-style: none;
|
|
96
|
+
margin: var(--ds-space-050, 0.25rem) 0 0;
|
|
97
|
+
min-width: 10rem;
|
|
98
|
+
padding: var(--ds-space-100, 0.25rem) 0;
|
|
99
|
+
position: absolute;
|
|
100
|
+
top: 100%;
|
|
101
|
+
z-index: var(--ds-z-index-modal, 400);
|
|
102
|
+
|
|
103
|
+
li {
|
|
104
|
+
a,
|
|
105
|
+
span {
|
|
106
|
+
color: var(--ds-text, inherit);
|
|
107
|
+
display: block;
|
|
108
|
+
font-size: var(--ds-font-size-100, 0.875rem);
|
|
109
|
+
padding: var(--ds-space-100, 0.25rem) var(--ds-space-200, 0.5rem);
|
|
110
|
+
text-decoration: none;
|
|
111
|
+
white-space: nowrap;
|
|
112
|
+
|
|
113
|
+
&:hover {
|
|
114
|
+
background: var(--ds-background-neutral-default, rgba(0, 0, 0, 0.06));
|
|
115
|
+
color: var(--ds-text, inherit);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
a:focus-visible {
|
|
120
|
+
outline: 2px solid var(--ds-border-focused, currentColor);
|
|
121
|
+
outline-offset: -2px;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
import "./Toolbar.css";
|
|
2
|
+
|
|
3
|
+
import { useEffect, useLayoutEffect, useRef, useState } from "react";
|
|
4
|
+
import { createPortal } from "react-dom";
|
|
5
|
+
|
|
6
|
+
export type ToolbarPortalSlot = "breadcrumbs" | "search" | "actions";
|
|
7
|
+
|
|
8
|
+
export type ToolbarPortalProps = {
|
|
9
|
+
slot: ToolbarPortalSlot;
|
|
10
|
+
children: React.ReactNode;
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export function ToolbarPortal({ slot, children }: ToolbarPortalProps) {
|
|
14
|
+
// Target element IDs: ob-toolbar-breadcrumbs, ob-toolbar-search, ob-toolbar-actions
|
|
15
|
+
const target = document.getElementById(`ob-toolbar-${slot}`);
|
|
16
|
+
if (!target) return null;
|
|
17
|
+
return createPortal(children, target);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export type BreadcrumbItem = {
|
|
21
|
+
label: string;
|
|
22
|
+
href?: string;
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export type ToolbarBreadcrumbsProps = {
|
|
26
|
+
items: BreadcrumbItem[];
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
function BreadcrumbsInner({ items }: ToolbarBreadcrumbsProps) {
|
|
30
|
+
let [firstVisible, setFirstVisible] = useState(0);
|
|
31
|
+
let [overflowOpen, setOverflowOpen] = useState(false);
|
|
32
|
+
let navRef = useRef<HTMLElement>(null);
|
|
33
|
+
let listRef = useRef<HTMLOListElement>(null);
|
|
34
|
+
let overflowItemRef = useRef<HTMLLIElement>(null);
|
|
35
|
+
|
|
36
|
+
// Detect overflow: increment firstVisible until the list fits within the nav.
|
|
37
|
+
// Runs after every render so it keeps pushing items into overflow until the
|
|
38
|
+
// list stops overflowing or only the last item (current page) remains.
|
|
39
|
+
useLayoutEffect(() => {
|
|
40
|
+
let nav = navRef.current;
|
|
41
|
+
let list = listRef.current;
|
|
42
|
+
if (!nav || !list) return;
|
|
43
|
+
|
|
44
|
+
if (list.scrollWidth > nav.clientWidth && firstVisible < items.length - 1) {
|
|
45
|
+
setFirstVisible((prev) => prev + 1);
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
// ResizeObserver resets firstVisible to 0 on container resize so that the
|
|
50
|
+
// overflow calculation starts fresh at the new container width.
|
|
51
|
+
useEffect(() => {
|
|
52
|
+
let nav = navRef.current;
|
|
53
|
+
if (!nav) return;
|
|
54
|
+
|
|
55
|
+
let observer = new ResizeObserver(() => {
|
|
56
|
+
setFirstVisible(0);
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
observer.observe(nav);
|
|
60
|
+
return () => observer.disconnect();
|
|
61
|
+
}, []);
|
|
62
|
+
|
|
63
|
+
// Close the overflow dropdown when the user clicks outside of it.
|
|
64
|
+
useEffect(() => {
|
|
65
|
+
if (!overflowOpen) return;
|
|
66
|
+
|
|
67
|
+
function handleClickOutside(event: MouseEvent) {
|
|
68
|
+
if (overflowItemRef.current && !overflowItemRef.current.contains(event.target as Node)) {
|
|
69
|
+
setOverflowOpen(false);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
74
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
75
|
+
}, [overflowOpen]);
|
|
76
|
+
|
|
77
|
+
let hiddenItems = items.slice(0, firstVisible);
|
|
78
|
+
let visibleItems = items.slice(firstVisible);
|
|
79
|
+
|
|
80
|
+
return (
|
|
81
|
+
<nav className="ob-breadcrumbs" aria-label="Breadcrumb" ref={navRef}>
|
|
82
|
+
<ol className="ob-breadcrumbs__list" ref={listRef}>
|
|
83
|
+
{firstVisible > 0 && (
|
|
84
|
+
<li className="ob-breadcrumbs__item ob-breadcrumbs__overflow" ref={overflowItemRef}>
|
|
85
|
+
<button
|
|
86
|
+
type="button"
|
|
87
|
+
aria-label="Show hidden breadcrumbs"
|
|
88
|
+
aria-expanded={overflowOpen}
|
|
89
|
+
aria-haspopup="true"
|
|
90
|
+
onClick={() => setOverflowOpen((prev) => !prev)}
|
|
91
|
+
>
|
|
92
|
+
…
|
|
93
|
+
</button>
|
|
94
|
+
{overflowOpen && (
|
|
95
|
+
<ul className="ob-breadcrumbs__overflow-menu" role="menu">
|
|
96
|
+
{hiddenItems.map((item, index) => (
|
|
97
|
+
// biome-ignore lint/suspicious/noArrayIndexKey: stable list with no reordering
|
|
98
|
+
<li key={index} role="menuitem">
|
|
99
|
+
{item.href ? <a href={item.href}>{item.label}</a> : <span>{item.label}</span>}
|
|
100
|
+
</li>
|
|
101
|
+
))}
|
|
102
|
+
</ul>
|
|
103
|
+
)}
|
|
104
|
+
</li>
|
|
105
|
+
)}
|
|
106
|
+
{visibleItems.map((item, index) => {
|
|
107
|
+
let actualIndex = firstVisible + index;
|
|
108
|
+
let isCurrent = actualIndex === items.length - 1;
|
|
109
|
+
return (
|
|
110
|
+
<li key={actualIndex} className="ob-breadcrumbs__item">
|
|
111
|
+
{isCurrent ? (
|
|
112
|
+
<span aria-current="page">{item.label}</span>
|
|
113
|
+
) : item.href ? (
|
|
114
|
+
<a href={item.href}>{item.label}</a>
|
|
115
|
+
) : (
|
|
116
|
+
<span>{item.label}</span>
|
|
117
|
+
)}
|
|
118
|
+
</li>
|
|
119
|
+
);
|
|
120
|
+
})}
|
|
121
|
+
</ol>
|
|
122
|
+
</nav>
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
export function ToolbarBreadcrumbs({ items }: ToolbarBreadcrumbsProps) {
|
|
127
|
+
return (
|
|
128
|
+
<ToolbarPortal slot="breadcrumbs">
|
|
129
|
+
<BreadcrumbsInner items={items} />
|
|
130
|
+
</ToolbarPortal>
|
|
131
|
+
);
|
|
132
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -19,6 +19,14 @@ export {
|
|
|
19
19
|
} from "./components/PageBanner/index.js";
|
|
20
20
|
export * from "./components/PdfViewer/index.js";
|
|
21
21
|
export { Portal } from "./components/Portal/index.js";
|
|
22
|
+
export {
|
|
23
|
+
ToolbarBreadcrumbs,
|
|
24
|
+
ToolbarPortal,
|
|
25
|
+
type BreadcrumbItem,
|
|
26
|
+
type ToolbarBreadcrumbsProps,
|
|
27
|
+
type ToolbarPortalProps,
|
|
28
|
+
type ToolbarPortalSlot,
|
|
29
|
+
} from "./components/Toolbar/index.js";
|
|
22
30
|
export { ProgressBar } from "./components/ProgressBar/index.js";
|
|
23
31
|
export { Sidebar, type SidebarProps } from "./components/Sidebar/index.js";
|
|
24
32
|
export { Spinner, type SpinnerProps } from "./components/Spinner/index.js";
|