@salt-ds/lab 1.0.0-alpha.98 → 1.0.0-alpha.99
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/css/salt-lab.css +147 -1
- package/dist-cjs/breadcrumbs-next/BreadcrumbNext.css.js +6 -0
- package/dist-cjs/breadcrumbs-next/BreadcrumbNext.css.js.map +1 -0
- package/dist-cjs/breadcrumbs-next/BreadcrumbNext.js +99 -0
- package/dist-cjs/breadcrumbs-next/BreadcrumbNext.js.map +1 -0
- package/dist-cjs/breadcrumbs-next/BreadcrumbNextLabel.js +21 -0
- package/dist-cjs/breadcrumbs-next/BreadcrumbNextLabel.js.map +1 -0
- package/dist-cjs/breadcrumbs-next/BreadcrumbNextTrigger.js +55 -0
- package/dist-cjs/breadcrumbs-next/BreadcrumbNextTrigger.js.map +1 -0
- package/dist-cjs/breadcrumbs-next/BreadcrumbsNext.css.js +6 -0
- package/dist-cjs/breadcrumbs-next/BreadcrumbsNext.css.js.map +1 -0
- package/dist-cjs/breadcrumbs-next/BreadcrumbsNext.js +146 -0
- package/dist-cjs/breadcrumbs-next/BreadcrumbsNext.js.map +1 -0
- package/dist-cjs/breadcrumbs-next/internal/BreadcrumbNextContext.js +12 -0
- package/dist-cjs/breadcrumbs-next/internal/BreadcrumbNextContext.js.map +1 -0
- package/dist-cjs/breadcrumbs-next/internal/BreadcrumbOverflowDisclosure.js +236 -0
- package/dist-cjs/breadcrumbs-next/internal/BreadcrumbOverflowDisclosure.js.map +1 -0
- package/dist-cjs/breadcrumbs-next/internal/breadcrumbItems.js +21 -0
- package/dist-cjs/breadcrumbs-next/internal/breadcrumbItems.js.map +1 -0
- package/dist-cjs/index.js +8 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-es/breadcrumbs-next/BreadcrumbNext.css.js +4 -0
- package/dist-es/breadcrumbs-next/BreadcrumbNext.css.js.map +1 -0
- package/dist-es/breadcrumbs-next/BreadcrumbNext.js +97 -0
- package/dist-es/breadcrumbs-next/BreadcrumbNext.js.map +1 -0
- package/dist-es/breadcrumbs-next/BreadcrumbNextLabel.js +19 -0
- package/dist-es/breadcrumbs-next/BreadcrumbNextLabel.js.map +1 -0
- package/dist-es/breadcrumbs-next/BreadcrumbNextTrigger.js +53 -0
- package/dist-es/breadcrumbs-next/BreadcrumbNextTrigger.js.map +1 -0
- package/dist-es/breadcrumbs-next/BreadcrumbsNext.css.js +4 -0
- package/dist-es/breadcrumbs-next/BreadcrumbsNext.css.js.map +1 -0
- package/dist-es/breadcrumbs-next/BreadcrumbsNext.js +144 -0
- package/dist-es/breadcrumbs-next/BreadcrumbsNext.js.map +1 -0
- package/dist-es/breadcrumbs-next/internal/BreadcrumbNextContext.js +9 -0
- package/dist-es/breadcrumbs-next/internal/BreadcrumbNextContext.js.map +1 -0
- package/dist-es/breadcrumbs-next/internal/BreadcrumbOverflowDisclosure.js +234 -0
- package/dist-es/breadcrumbs-next/internal/BreadcrumbOverflowDisclosure.js.map +1 -0
- package/dist-es/breadcrumbs-next/internal/breadcrumbItems.js +19 -0
- package/dist-es/breadcrumbs-next/internal/breadcrumbItems.js.map +1 -0
- package/dist-es/index.js +4 -0
- package/dist-es/index.js.map +1 -1
- package/dist-types/breadcrumbs-next/BreadcrumbNext.d.ts +23 -0
- package/dist-types/breadcrumbs-next/BreadcrumbNextLabel.d.ts +4 -0
- package/dist-types/breadcrumbs-next/BreadcrumbNextTrigger.d.ts +8 -0
- package/dist-types/breadcrumbs-next/BreadcrumbsNext.d.ts +32 -0
- package/dist-types/breadcrumbs-next/index.d.ts +4 -0
- package/dist-types/breadcrumbs-next/internal/BreadcrumbNextContext.d.ts +14 -0
- package/dist-types/breadcrumbs-next/internal/BreadcrumbOverflowDisclosure.d.ts +9 -0
- package/dist-types/breadcrumbs-next/internal/breadcrumbItems.d.ts +9 -0
- package/dist-types/index.d.ts +1 -0
- package/package.json +3 -3
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react$1 = require('@floating-ui/react');
|
|
5
|
+
var core = require('@salt-ds/core');
|
|
6
|
+
var icons = require('@salt-ds/icons');
|
|
7
|
+
var window = require('@salt-ds/window');
|
|
8
|
+
var react = require('react');
|
|
9
|
+
var BreadcrumbNextContext = require('./BreadcrumbNextContext.js');
|
|
10
|
+
|
|
11
|
+
const withBaseName = core.makePrefixer("saltBreadcrumbsNext");
|
|
12
|
+
function BreadcrumbOverflowDisclosure({
|
|
13
|
+
currentIndex,
|
|
14
|
+
items,
|
|
15
|
+
render
|
|
16
|
+
}) {
|
|
17
|
+
var _a, _b;
|
|
18
|
+
const [open, setOpen] = react.useState(false);
|
|
19
|
+
const targetWindow = window.useWindow();
|
|
20
|
+
const itemElements = react.useRef(/* @__PURE__ */ new Map());
|
|
21
|
+
const triggerRef = react.useRef(null);
|
|
22
|
+
const disclosureId = core.useId();
|
|
23
|
+
const { Component: FloatingComponent } = core.useFloatingComponent();
|
|
24
|
+
const focusTrigger = react.useCallback(() => {
|
|
25
|
+
targetWindow == null ? void 0 : targetWindow.requestAnimationFrame(() => {
|
|
26
|
+
var _a2;
|
|
27
|
+
(_a2 = triggerRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
|
|
28
|
+
});
|
|
29
|
+
}, [targetWindow]);
|
|
30
|
+
const getFocusableItems = react.useCallback(
|
|
31
|
+
() => items.map((_, index) => itemElements.current.get(index)).filter((item) => item !== void 0),
|
|
32
|
+
[items]
|
|
33
|
+
);
|
|
34
|
+
const focusItem = react.useCallback(
|
|
35
|
+
(position) => {
|
|
36
|
+
const focusableItems = getFocusableItems();
|
|
37
|
+
const item = position === "first" ? focusableItems[0] : focusableItems[focusableItems.length - 1];
|
|
38
|
+
item == null ? void 0 : item.focus({ preventScroll: true });
|
|
39
|
+
return item !== void 0;
|
|
40
|
+
},
|
|
41
|
+
[getFocusableItems]
|
|
42
|
+
);
|
|
43
|
+
const focusItemByOffset = react.useCallback(
|
|
44
|
+
(offset2) => {
|
|
45
|
+
var _a2;
|
|
46
|
+
const focusableItems = getFocusableItems();
|
|
47
|
+
const activeIndex = focusableItems.indexOf(
|
|
48
|
+
targetWindow == null ? void 0 : targetWindow.document.activeElement
|
|
49
|
+
);
|
|
50
|
+
if (activeIndex === -1) {
|
|
51
|
+
return focusItem(offset2 > 0 ? "first" : "last");
|
|
52
|
+
}
|
|
53
|
+
const nextIndex = Math.min(
|
|
54
|
+
Math.max(activeIndex + offset2, 0),
|
|
55
|
+
focusableItems.length - 1
|
|
56
|
+
);
|
|
57
|
+
(_a2 = focusableItems[nextIndex]) == null ? void 0 : _a2.focus({ preventScroll: true });
|
|
58
|
+
return focusableItems[nextIndex] !== void 0;
|
|
59
|
+
},
|
|
60
|
+
[focusItem, getFocusableItems, targetWindow]
|
|
61
|
+
);
|
|
62
|
+
const { context, elements, refs, strategy, x, y } = core.useFloatingUI({
|
|
63
|
+
open,
|
|
64
|
+
onOpenChange(nextOpen, _event, reason) {
|
|
65
|
+
setOpen(nextOpen);
|
|
66
|
+
if (!nextOpen && reason === "escape-key") {
|
|
67
|
+
focusTrigger();
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
placement: "bottom-start",
|
|
71
|
+
middleware: [
|
|
72
|
+
react$1.offset(1),
|
|
73
|
+
react$1.size({
|
|
74
|
+
apply({ availableHeight, elements: elements2 }) {
|
|
75
|
+
Object.assign(elements2.floating.style, {
|
|
76
|
+
maxHeight: `${availableHeight}px`
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
}),
|
|
80
|
+
react$1.flip(),
|
|
81
|
+
react$1.shift({
|
|
82
|
+
padding: 8
|
|
83
|
+
})
|
|
84
|
+
]
|
|
85
|
+
});
|
|
86
|
+
const { getFloatingProps, getReferenceProps } = react$1.useInteractions([
|
|
87
|
+
react$1.useClick(context),
|
|
88
|
+
react$1.useDismiss(context)
|
|
89
|
+
]);
|
|
90
|
+
const handleTriggerRef = core.useForkRef(
|
|
91
|
+
triggerRef,
|
|
92
|
+
refs.setReference
|
|
93
|
+
);
|
|
94
|
+
const handleTriggerKeyDown = (event) => {
|
|
95
|
+
if (open && (event.key === "ArrowDown" || event.key === "ArrowRight")) {
|
|
96
|
+
event.preventDefault();
|
|
97
|
+
focusItem("first");
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
if (open && (event.key === "ArrowUp" || event.key === "ArrowLeft")) {
|
|
101
|
+
event.preventDefault();
|
|
102
|
+
focusItem("last");
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
if (event.key === "Tab" && open && !event.shiftKey) {
|
|
106
|
+
if (focusItem("first")) {
|
|
107
|
+
event.preventDefault();
|
|
108
|
+
}
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
const handleTriggerBlur = (event) => {
|
|
113
|
+
var _a2;
|
|
114
|
+
const nextFocusedElement = event.relatedTarget;
|
|
115
|
+
if (nextFocusedElement && ((_a2 = elements.floating) == null ? void 0 : _a2.contains(nextFocusedElement))) {
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
setOpen(false);
|
|
119
|
+
};
|
|
120
|
+
const handleDisclosureKeyDown = (event) => {
|
|
121
|
+
if (event.key === "Tab") {
|
|
122
|
+
const focusableItems = getFocusableItems();
|
|
123
|
+
const activeIndex = focusableItems.indexOf(
|
|
124
|
+
targetWindow == null ? void 0 : targetWindow.document.activeElement
|
|
125
|
+
);
|
|
126
|
+
const shouldReturnToTrigger = event.shiftKey ? activeIndex === 0 : activeIndex === focusableItems.length - 1;
|
|
127
|
+
if (shouldReturnToTrigger) {
|
|
128
|
+
event.preventDefault();
|
|
129
|
+
setOpen(false);
|
|
130
|
+
focusTrigger();
|
|
131
|
+
}
|
|
132
|
+
return;
|
|
133
|
+
}
|
|
134
|
+
if (event.key === "ArrowDown" || event.key === "ArrowRight") {
|
|
135
|
+
event.preventDefault();
|
|
136
|
+
focusItemByOffset(1);
|
|
137
|
+
return;
|
|
138
|
+
}
|
|
139
|
+
if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
|
|
140
|
+
event.preventDefault();
|
|
141
|
+
focusItemByOffset(-1);
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
if (event.key === "Home") {
|
|
145
|
+
event.preventDefault();
|
|
146
|
+
focusItem("first");
|
|
147
|
+
return;
|
|
148
|
+
}
|
|
149
|
+
if (event.key === "End") {
|
|
150
|
+
event.preventDefault();
|
|
151
|
+
focusItem("last");
|
|
152
|
+
}
|
|
153
|
+
};
|
|
154
|
+
const handleDisclosureBlur = (event) => {
|
|
155
|
+
var _a2;
|
|
156
|
+
const nextFocusedElement = event.relatedTarget;
|
|
157
|
+
if (nextFocusedElement && (event.currentTarget.contains(nextFocusedElement) || ((_a2 = triggerRef.current) == null ? void 0 : _a2.contains(nextFocusedElement)))) {
|
|
158
|
+
return;
|
|
159
|
+
}
|
|
160
|
+
setOpen(false);
|
|
161
|
+
};
|
|
162
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
163
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
164
|
+
core.Button,
|
|
165
|
+
{
|
|
166
|
+
"aria-controls": disclosureId,
|
|
167
|
+
"aria-expanded": open,
|
|
168
|
+
"aria-label": "Additional breadcrumbs",
|
|
169
|
+
appearance: "transparent",
|
|
170
|
+
className: withBaseName("collapseButton"),
|
|
171
|
+
ref: handleTriggerRef,
|
|
172
|
+
...getReferenceProps({
|
|
173
|
+
onBlur: handleTriggerBlur,
|
|
174
|
+
onKeyDown: handleTriggerKeyDown
|
|
175
|
+
}),
|
|
176
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(icons.OverflowMenuIcon, { "aria-hidden": true })
|
|
177
|
+
}
|
|
178
|
+
),
|
|
179
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
180
|
+
FloatingComponent,
|
|
181
|
+
{
|
|
182
|
+
className: withBaseName("disclosure"),
|
|
183
|
+
focusManagerProps: context ? {
|
|
184
|
+
closeOnFocusOut: true,
|
|
185
|
+
context,
|
|
186
|
+
initialFocus: -1,
|
|
187
|
+
modal: false,
|
|
188
|
+
returnFocus: false
|
|
189
|
+
} : void 0,
|
|
190
|
+
height: (_a = elements.floating) == null ? void 0 : _a.offsetHeight,
|
|
191
|
+
left: x ?? 0,
|
|
192
|
+
open,
|
|
193
|
+
position: strategy,
|
|
194
|
+
ref: refs.setFloating,
|
|
195
|
+
top: y ?? 0,
|
|
196
|
+
width: (_b = elements.floating) == null ? void 0 : _b.offsetWidth,
|
|
197
|
+
...getFloatingProps({
|
|
198
|
+
id: disclosureId,
|
|
199
|
+
onBlur: handleDisclosureBlur,
|
|
200
|
+
onKeyDown: handleDisclosureKeyDown
|
|
201
|
+
}),
|
|
202
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
203
|
+
"ol",
|
|
204
|
+
{
|
|
205
|
+
"aria-label": "Hidden breadcrumb levels",
|
|
206
|
+
className: withBaseName("disclosureList"),
|
|
207
|
+
children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
208
|
+
BreadcrumbNextContext.BreadcrumbNextContext.Provider,
|
|
209
|
+
{
|
|
210
|
+
value: {
|
|
211
|
+
current: item.index === currentIndex,
|
|
212
|
+
onNavigate: () => setOpen(false),
|
|
213
|
+
placement: "disclosure",
|
|
214
|
+
render,
|
|
215
|
+
showSeparator: false,
|
|
216
|
+
triggerRef: (element) => {
|
|
217
|
+
if ((element == null ? void 0 : element.tagName) === "A" && element.hasAttribute("href")) {
|
|
218
|
+
itemElements.current.set(index, element);
|
|
219
|
+
} else {
|
|
220
|
+
itemElements.current.delete(index);
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
},
|
|
224
|
+
children: item.element
|
|
225
|
+
},
|
|
226
|
+
item.key
|
|
227
|
+
))
|
|
228
|
+
}
|
|
229
|
+
)
|
|
230
|
+
}
|
|
231
|
+
)
|
|
232
|
+
] });
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
exports.BreadcrumbOverflowDisclosure = BreadcrumbOverflowDisclosure;
|
|
236
|
+
//# sourceMappingURL=BreadcrumbOverflowDisclosure.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BreadcrumbOverflowDisclosure.js","sources":["../src/breadcrumbs-next/internal/BreadcrumbOverflowDisclosure.tsx"],"sourcesContent":["import {\n flip,\n offset,\n shift,\n size,\n useClick,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport {\n Button,\n makePrefixer,\n type RenderPropsType,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n useId,\n} from \"@salt-ds/core\";\nimport { OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n type FocusEvent,\n type KeyboardEvent,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { BreadcrumbNextContext } from \"./BreadcrumbNextContext\";\nimport type { NormalizedBreadcrumb } from \"./breadcrumbItems\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumbsNext\");\n\ninterface BreadcrumbOverflowDisclosureProps {\n currentIndex: number;\n items: NormalizedBreadcrumb[];\n render?: RenderPropsType[\"render\"];\n}\n\nexport function BreadcrumbOverflowDisclosure({\n currentIndex,\n items,\n render,\n}: BreadcrumbOverflowDisclosureProps) {\n const [open, setOpen] = useState(false);\n const targetWindow = useWindow();\n const itemElements = useRef(new Map<number, HTMLAnchorElement>());\n const triggerRef = useRef<HTMLButtonElement>(null);\n const disclosureId = useId();\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const focusTrigger = useCallback(() => {\n targetWindow?.requestAnimationFrame(() => {\n triggerRef.current?.focus({ preventScroll: true });\n });\n }, [targetWindow]);\n\n const getFocusableItems = useCallback(\n () =>\n items\n .map((_, index) => itemElements.current.get(index))\n .filter((item): item is HTMLAnchorElement => item !== undefined),\n [items],\n );\n\n const focusItem = useCallback(\n (position: \"first\" | \"last\") => {\n const focusableItems = getFocusableItems();\n const item =\n position === \"first\"\n ? focusableItems[0]\n : focusableItems[focusableItems.length - 1];\n\n item?.focus({ preventScroll: true });\n return item !== undefined;\n },\n [getFocusableItems],\n );\n\n const focusItemByOffset = useCallback(\n (offset: number) => {\n const focusableItems = getFocusableItems();\n const activeIndex = focusableItems.indexOf(\n targetWindow?.document.activeElement as HTMLAnchorElement,\n );\n\n if (activeIndex === -1) {\n return focusItem(offset > 0 ? \"first\" : \"last\");\n }\n\n const nextIndex = Math.min(\n Math.max(activeIndex + offset, 0),\n focusableItems.length - 1,\n );\n\n focusableItems[nextIndex]?.focus({ preventScroll: true });\n return focusableItems[nextIndex] !== undefined;\n },\n [focusItem, getFocusableItems, targetWindow],\n );\n\n const { context, elements, refs, strategy, x, y } = useFloatingUI({\n open,\n onOpenChange(nextOpen, _event, reason) {\n setOpen(nextOpen);\n\n if (!nextOpen && reason === \"escape-key\") {\n focusTrigger();\n }\n },\n placement: \"bottom-start\",\n middleware: [\n offset(1),\n size({\n apply({ availableHeight, elements }) {\n Object.assign(elements.floating.style, {\n maxHeight: `${availableHeight}px`,\n });\n },\n }),\n flip(),\n shift({\n padding: 8,\n }),\n ],\n });\n\n const { getFloatingProps, getReferenceProps } = useInteractions([\n useClick(context),\n useDismiss(context),\n ]);\n const handleTriggerRef = useForkRef<HTMLButtonElement>(\n triggerRef,\n refs.setReference,\n );\n\n const handleTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (open && (event.key === \"ArrowDown\" || event.key === \"ArrowRight\")) {\n event.preventDefault();\n focusItem(\"first\");\n return;\n }\n\n if (open && (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\")) {\n event.preventDefault();\n focusItem(\"last\");\n return;\n }\n\n if (event.key === \"Tab\" && open && !event.shiftKey) {\n if (focusItem(\"first\")) {\n event.preventDefault();\n }\n return;\n }\n };\n\n const handleTriggerBlur = (event: FocusEvent<HTMLButtonElement>) => {\n const nextFocusedElement = event.relatedTarget as Node | null;\n\n if (nextFocusedElement && elements.floating?.contains(nextFocusedElement)) {\n return;\n }\n\n setOpen(false);\n };\n\n const handleDisclosureKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n if (event.key === \"Tab\") {\n const focusableItems = getFocusableItems();\n const activeIndex = focusableItems.indexOf(\n targetWindow?.document.activeElement as HTMLAnchorElement,\n );\n const shouldReturnToTrigger = event.shiftKey\n ? activeIndex === 0\n : activeIndex === focusableItems.length - 1;\n\n if (shouldReturnToTrigger) {\n event.preventDefault();\n setOpen(false);\n focusTrigger();\n }\n\n return;\n }\n\n if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n event.preventDefault();\n focusItemByOffset(1);\n return;\n }\n\n if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n event.preventDefault();\n focusItemByOffset(-1);\n return;\n }\n\n if (event.key === \"Home\") {\n event.preventDefault();\n focusItem(\"first\");\n return;\n }\n\n if (event.key === \"End\") {\n event.preventDefault();\n focusItem(\"last\");\n }\n };\n\n const handleDisclosureBlur = (event: FocusEvent<HTMLDivElement>) => {\n const nextFocusedElement = event.relatedTarget as Node | null;\n\n if (\n nextFocusedElement &&\n (event.currentTarget.contains(nextFocusedElement) ||\n triggerRef.current?.contains(nextFocusedElement))\n ) {\n return;\n }\n\n setOpen(false);\n };\n\n return (\n <>\n <Button\n aria-controls={disclosureId}\n aria-expanded={open}\n aria-label=\"Additional breadcrumbs\"\n appearance=\"transparent\"\n className={withBaseName(\"collapseButton\")}\n ref={handleTriggerRef}\n {...getReferenceProps({\n onBlur: handleTriggerBlur,\n onKeyDown: handleTriggerKeyDown,\n })}\n >\n <OverflowMenuIcon aria-hidden />\n </Button>\n <FloatingComponent\n className={withBaseName(\"disclosure\")}\n focusManagerProps={\n context\n ? {\n closeOnFocusOut: true,\n context,\n initialFocus: -1,\n modal: false,\n returnFocus: false,\n }\n : undefined\n }\n height={elements.floating?.offsetHeight}\n left={x ?? 0}\n open={open}\n position={strategy}\n ref={refs.setFloating}\n top={y ?? 0}\n width={elements.floating?.offsetWidth}\n {...getFloatingProps({\n id: disclosureId,\n onBlur: handleDisclosureBlur,\n onKeyDown: handleDisclosureKeyDown,\n })}\n >\n <ol\n aria-label=\"Hidden breadcrumb levels\"\n className={withBaseName(\"disclosureList\")}\n >\n {items.map((item, index) => (\n <BreadcrumbNextContext.Provider\n key={item.key}\n value={{\n current: item.index === currentIndex,\n onNavigate: () => setOpen(false),\n placement: \"disclosure\",\n render,\n showSeparator: false,\n triggerRef: (element) => {\n // Placeholder anchors (no href) are not focusable, so only\n // navigable items take part in disclosure focus movement.\n if (\n element?.tagName === \"A\" &&\n element.hasAttribute(\"href\")\n ) {\n itemElements.current.set(index, element);\n } else {\n itemElements.current.delete(index);\n }\n },\n }}\n >\n {item.element}\n </BreadcrumbNextContext.Provider>\n ))}\n </ol>\n </FloatingComponent>\n </>\n );\n}\n"],"names":["makePrefixer","useState","useWindow","useRef","useId","useFloatingComponent","useCallback","_a","offset","useFloatingUI","size","elements","flip","shift","useInteractions","useClick","useDismiss","useForkRef","jsxs","Fragment","jsx","Button","OverflowMenuIcon","BreadcrumbNextContext"],"mappings":"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"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var react = require('react');
|
|
4
|
+
|
|
5
|
+
function isFragmentElement(child) {
|
|
6
|
+
return react.isValidElement(child) && child.type === react.Fragment;
|
|
7
|
+
}
|
|
8
|
+
function flattenBreadcrumbItems(children) {
|
|
9
|
+
const flattenedChildren = [];
|
|
10
|
+
react.Children.forEach(children, (child) => {
|
|
11
|
+
if (isFragmentElement(child)) {
|
|
12
|
+
flattenedChildren.push(...flattenBreadcrumbItems(child.props.children));
|
|
13
|
+
} else if (child !== null && child !== void 0 && typeof child !== "boolean") {
|
|
14
|
+
flattenedChildren.push(child);
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
return flattenedChildren;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
exports.flattenBreadcrumbItems = flattenBreadcrumbItems;
|
|
21
|
+
//# sourceMappingURL=breadcrumbItems.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"breadcrumbItems.js","sources":["../src/breadcrumbs-next/internal/breadcrumbItems.ts"],"sourcesContent":["import {\n Children,\n Fragment,\n isValidElement,\n type Key,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport type { BreadcrumbNextProps } from \"../BreadcrumbNext\";\n\nexport interface NormalizedBreadcrumb {\n element: ReactElement<BreadcrumbNextProps>;\n index: number;\n key: Key;\n props: BreadcrumbNextProps;\n}\n\nfunction isFragmentElement(\n child: ReactNode,\n): child is ReactElement<{ children?: ReactNode }> {\n return (\n isValidElement<{ children?: ReactNode }>(child) && child.type === Fragment\n );\n}\n\nexport function flattenBreadcrumbItems(children: ReactNode): ReactNode[] {\n const flattenedChildren: ReactNode[] = [];\n\n Children.forEach(children, (child) => {\n if (isFragmentElement(child)) {\n flattenedChildren.push(...flattenBreadcrumbItems(child.props.children));\n } else if (\n child !== null &&\n child !== undefined &&\n typeof child !== \"boolean\"\n ) {\n flattenedChildren.push(child);\n }\n });\n\n return flattenedChildren;\n}\n"],"names":["isValidElement","Fragment","Children"],"mappings":";;;;AAiBA,SAAS,kBACP,KAAA,EACiD;AACjD,EAAA,OACEA,oBAAA,CAAyC,KAAK,CAAA,IAAK,KAAA,CAAM,IAAA,KAASC,cAAA;AAEtE;AAEO,SAAS,uBAAuB,QAAA,EAAkC;AACvE,EAAA,MAAM,oBAAiC,EAAC;AAExC,EAAAC,cAAA,CAAS,OAAA,CAAQ,QAAA,EAAU,CAAC,KAAA,KAAU;AACpC,IAAA,IAAI,iBAAA,CAAkB,KAAK,CAAA,EAAG;AAC5B,MAAA,iBAAA,CAAkB,KAAK,GAAG,sBAAA,CAAuB,KAAA,CAAM,KAAA,CAAM,QAAQ,CAAC,CAAA;AAAA,IACxE,WACE,KAAA,KAAU,IAAA,IACV,UAAU,MAAA,IACV,OAAO,UAAU,SAAA,EACjB;AACA,MAAA,iBAAA,CAAkB,KAAK,KAAK,CAAA;AAAA,IAC9B;AAAA,EACF,CAAC,CAAA;AAED,EAAA,OAAO,iBAAA;AACT;;;;"}
|
package/dist-cjs/index.js
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
var AppHeader = require('./app-header/AppHeader.js');
|
|
4
4
|
var Breadcrumb = require('./breadcrumbs/Breadcrumb.js');
|
|
5
5
|
var Breadcrumbs = require('./breadcrumbs/Breadcrumbs.js');
|
|
6
|
+
var BreadcrumbNext = require('./breadcrumbs-next/BreadcrumbNext.js');
|
|
7
|
+
var BreadcrumbNextLabel = require('./breadcrumbs-next/BreadcrumbNextLabel.js');
|
|
8
|
+
var BreadcrumbNextTrigger = require('./breadcrumbs-next/BreadcrumbNextTrigger.js');
|
|
9
|
+
var BreadcrumbsNext = require('./breadcrumbs-next/BreadcrumbsNext.js');
|
|
6
10
|
var ButtonBar = require('./button-bar/ButtonBar.js');
|
|
7
11
|
var OrderedButton = require('./button-bar/OrderedButton.js');
|
|
8
12
|
var CascadingMenu = require('./cascading-menu/CascadingMenu.js');
|
|
@@ -125,6 +129,10 @@ var WindowContext = require('./window/WindowContext.js');
|
|
|
125
129
|
exports.AppHeader = AppHeader.AppHeader;
|
|
126
130
|
exports.Breadcrumb = Breadcrumb.Breadcrumb;
|
|
127
131
|
exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
|
|
132
|
+
exports.BreadcrumbNext = BreadcrumbNext.BreadcrumbNext;
|
|
133
|
+
exports.BreadcrumbNextLabel = BreadcrumbNextLabel.BreadcrumbNextLabel;
|
|
134
|
+
exports.BreadcrumbNextTrigger = BreadcrumbNextTrigger.BreadcrumbNextTrigger;
|
|
135
|
+
exports.BreadcrumbsNext = BreadcrumbsNext.BreadcrumbsNext;
|
|
128
136
|
exports.ButtonBar = ButtonBar.ButtonBar;
|
|
129
137
|
exports.DefaultButtonsOrderByVariant = ButtonBar.DefaultButtonsOrderByVariant;
|
|
130
138
|
exports.OrderedButton = OrderedButton.OrderedButton;
|
package/dist-cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var css_248z = ".saltBreadcrumbNext {\n align-items: center;\n display: inline-flex;\n flex: 0 1 auto;\n gap: var(--salt-spacing-100);\n list-style: none;\n min-width: 0;\n}\n\n.saltBreadcrumbNext-current,\n.saltBreadcrumbNext-label,\n.saltBreadcrumbNext-link,\n.saltBreadcrumbNext-trigger {\n min-width: 0;\n}\n\n.saltBreadcrumbNext-trigger {\n align-items: center;\n display: inline-flex;\n gap: var(--salt-spacing-50);\n max-width: 100%;\n}\n\n.saltBreadcrumbNext-link.saltLink {\n --link-color-visited: var(--link-color);\n --link-textDecoration-visited: var(--link-textDecoration);\n}\n\n.saltBreadcrumbNext-current.saltLink {\n cursor: var(--salt-cursor-text);\n}\n\n.saltBreadcrumbNext-separator {\n --saltIcon-color: var(--salt-content-secondary-foreground);\n --saltIcon-size: var(--salt-size-icon);\n\n flex: 0 0 auto;\n}\n";
|
|
2
|
+
|
|
3
|
+
export { css_248z as default };
|
|
4
|
+
//# sourceMappingURL=BreadcrumbNext.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BreadcrumbNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { makePrefixer, useIcon } from '@salt-ds/core';
|
|
3
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
+
import { useWindow } from '@salt-ds/window';
|
|
5
|
+
import { clsx } from 'clsx';
|
|
6
|
+
import { forwardRef, Children } from 'react';
|
|
7
|
+
import css_248z from './BreadcrumbNext.css.js';
|
|
8
|
+
import { BreadcrumbNextLabel } from './BreadcrumbNextLabel.js';
|
|
9
|
+
import { BreadcrumbNextTrigger } from './BreadcrumbNextTrigger.js';
|
|
10
|
+
import { useBreadcrumbNextContext, BreadcrumbNextContext } from './internal/BreadcrumbNextContext.js';
|
|
11
|
+
|
|
12
|
+
const withBaseName = makePrefixer("saltBreadcrumbNext");
|
|
13
|
+
const withBreadcrumbsBaseName = makePrefixer("saltBreadcrumbsNext");
|
|
14
|
+
function isPrimitiveBreadcrumbLabel(children) {
|
|
15
|
+
return typeof children === "string" && children.trim() !== "" || typeof children === "number";
|
|
16
|
+
}
|
|
17
|
+
function isMissingBreadcrumbContent(children) {
|
|
18
|
+
const childArray = Children.toArray(children);
|
|
19
|
+
return childArray.length === 0 || childArray.every(
|
|
20
|
+
(child) => typeof child === "string" && child.trim() === ""
|
|
21
|
+
);
|
|
22
|
+
}
|
|
23
|
+
let missingBreadcrumbContentWarningShown = false;
|
|
24
|
+
function warnIfMissingBreadcrumbContent() {
|
|
25
|
+
if (process.env.NODE_ENV === "production" || missingBreadcrumbContentWarningShown) {
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
missingBreadcrumbContentWarningShown = true;
|
|
29
|
+
console.warn(
|
|
30
|
+
"BreadcrumbNext requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbNextTrigger with BreadcrumbNextLabel for composed items."
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
const BreadcrumbNext = forwardRef(
|
|
34
|
+
function BreadcrumbNext2(props, ref) {
|
|
35
|
+
const {
|
|
36
|
+
children,
|
|
37
|
+
className,
|
|
38
|
+
current: currentProp,
|
|
39
|
+
href,
|
|
40
|
+
render,
|
|
41
|
+
...rest
|
|
42
|
+
} = props;
|
|
43
|
+
const targetWindow = useWindow();
|
|
44
|
+
useComponentCssInjection({
|
|
45
|
+
testId: "salt-breadcrumb-next",
|
|
46
|
+
css: css_248z,
|
|
47
|
+
window: targetWindow
|
|
48
|
+
});
|
|
49
|
+
const parentContext = useBreadcrumbNextContext();
|
|
50
|
+
const current = (parentContext == null ? void 0 : parentContext.current) ?? Boolean(currentProp);
|
|
51
|
+
const onNavigate = parentContext == null ? void 0 : parentContext.onNavigate;
|
|
52
|
+
const placement = (parentContext == null ? void 0 : parentContext.placement) ?? "trail";
|
|
53
|
+
const showSeparator = (parentContext == null ? void 0 : parentContext.showSeparator) ?? false;
|
|
54
|
+
const triggerRef = parentContext == null ? void 0 : parentContext.triggerRef;
|
|
55
|
+
const resolvedRender = render ?? (parentContext == null ? void 0 : parentContext.render);
|
|
56
|
+
const { LevelSeparatorIcon } = useIcon();
|
|
57
|
+
const missingContent = isMissingBreadcrumbContent(children);
|
|
58
|
+
if (missingContent) {
|
|
59
|
+
warnIfMissingBreadcrumbContent();
|
|
60
|
+
}
|
|
61
|
+
const primitiveChildren = isPrimitiveBreadcrumbLabel(children) ? children : void 0;
|
|
62
|
+
const content = missingContent ? null : primitiveChildren !== void 0 ? /* @__PURE__ */ jsx(BreadcrumbNextTrigger, { children: /* @__PURE__ */ jsx(BreadcrumbNextLabel, { children: primitiveChildren }) }) : children;
|
|
63
|
+
const context = {
|
|
64
|
+
current,
|
|
65
|
+
href,
|
|
66
|
+
onNavigate,
|
|
67
|
+
placement,
|
|
68
|
+
render: resolvedRender,
|
|
69
|
+
showSeparator,
|
|
70
|
+
triggerRef
|
|
71
|
+
};
|
|
72
|
+
return /* @__PURE__ */ jsx(
|
|
73
|
+
"li",
|
|
74
|
+
{
|
|
75
|
+
ref,
|
|
76
|
+
className: clsx(
|
|
77
|
+
placement === "disclosure" ? withBreadcrumbsBaseName("disclosureListItem") : withBaseName(),
|
|
78
|
+
className
|
|
79
|
+
),
|
|
80
|
+
...rest,
|
|
81
|
+
children: /* @__PURE__ */ jsxs(BreadcrumbNextContext.Provider, { value: context, children: [
|
|
82
|
+
content,
|
|
83
|
+
placement === "trail" && showSeparator ? /* @__PURE__ */ jsx(
|
|
84
|
+
LevelSeparatorIcon,
|
|
85
|
+
{
|
|
86
|
+
"aria-hidden": true,
|
|
87
|
+
className: withBaseName("separator")
|
|
88
|
+
}
|
|
89
|
+
) : null
|
|
90
|
+
] })
|
|
91
|
+
}
|
|
92
|
+
);
|
|
93
|
+
}
|
|
94
|
+
);
|
|
95
|
+
|
|
96
|
+
export { BreadcrumbNext };
|
|
97
|
+
//# sourceMappingURL=BreadcrumbNext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BreadcrumbNext.js","sources":["../src/breadcrumbs-next/BreadcrumbNext.tsx"],"sourcesContent":["import { makePrefixer, type RenderPropsType, useIcon } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport breadcrumbNextCss from \"./BreadcrumbNext.css\";\nimport { BreadcrumbNextLabel } from \"./BreadcrumbNextLabel\";\nimport { BreadcrumbNextTrigger } from \"./BreadcrumbNextTrigger\";\nimport {\n BreadcrumbNextContext,\n useBreadcrumbNextContext,\n} from \"./internal/BreadcrumbNextContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumbNext\");\nconst withBreadcrumbsBaseName = makePrefixer(\"saltBreadcrumbsNext\");\n\nfunction isPrimitiveBreadcrumbLabel(children: ReactNode) {\n return (\n (typeof children === \"string\" && children.trim() !== \"\") ||\n typeof children === \"number\"\n );\n}\n\nfunction isMissingBreadcrumbContent(children: ReactNode) {\n const childArray = Children.toArray(children);\n\n return (\n childArray.length === 0 ||\n childArray.every(\n (child) => typeof child === \"string\" && child.trim() === \"\",\n )\n );\n}\n\nlet missingBreadcrumbContentWarningShown = false;\n\nfunction warnIfMissingBreadcrumbContent() {\n if (\n process.env.NODE_ENV === \"production\" ||\n missingBreadcrumbContentWarningShown\n ) {\n return;\n }\n\n missingBreadcrumbContentWarningShown = true;\n console.warn(\n \"BreadcrumbNext requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbNextTrigger with BreadcrumbNextLabel for composed items.\",\n );\n}\n\nexport interface BreadcrumbNextProps\n extends Omit<ComponentPropsWithoutRef<\"li\">, \"children\"> {\n /**\n * Custom breadcrumb content. Use this for advanced composition with\n * `BreadcrumbNextTrigger` and `BreadcrumbNextLabel`.\n */\n children?: ReactNode;\n /**\n * If `true`, the breadcrumb represents the current page.\n */\n current?: boolean;\n /**\n * The URL for the breadcrumb. Provide this for the current breadcrumb so it\n * renders as a focusable link with `aria-current=\"page\"`.\n */\n href?: string;\n /**\n * Render prop to enable customization of the underlying link element.\n */\n render?: RenderPropsType[\"render\"];\n}\n\nexport const BreadcrumbNext = forwardRef<HTMLLIElement, BreadcrumbNextProps>(\n function BreadcrumbNext(props, ref) {\n const {\n children,\n className,\n current: currentProp,\n href,\n render,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-breadcrumb-next\",\n css: breadcrumbNextCss,\n window: targetWindow,\n });\n\n const parentContext = useBreadcrumbNextContext();\n const current = parentContext?.current ?? Boolean(currentProp);\n const onNavigate = parentContext?.onNavigate;\n const placement = parentContext?.placement ?? \"trail\";\n const showSeparator = parentContext?.showSeparator ?? false;\n const triggerRef = parentContext?.triggerRef;\n const resolvedRender = render ?? parentContext?.render;\n const { LevelSeparatorIcon } = useIcon();\n const missingContent = isMissingBreadcrumbContent(children);\n\n if (missingContent) {\n warnIfMissingBreadcrumbContent();\n }\n\n const primitiveChildren = isPrimitiveBreadcrumbLabel(children)\n ? children\n : undefined;\n const content = missingContent ? null : primitiveChildren !== undefined ? (\n <BreadcrumbNextTrigger>\n <BreadcrumbNextLabel>{primitiveChildren}</BreadcrumbNextLabel>\n </BreadcrumbNextTrigger>\n ) : (\n children\n );\n const context = {\n current,\n href,\n onNavigate,\n placement,\n render: resolvedRender,\n showSeparator,\n triggerRef,\n };\n\n return (\n <li\n ref={ref}\n className={clsx(\n placement === \"disclosure\"\n ? withBreadcrumbsBaseName(\"disclosureListItem\")\n : withBaseName(),\n className,\n )}\n {...rest}\n >\n <BreadcrumbNextContext.Provider value={context}>\n {content}\n {placement === \"trail\" && showSeparator ? (\n <LevelSeparatorIcon\n aria-hidden\n className={withBaseName(\"separator\")}\n />\n ) : null}\n </BreadcrumbNextContext.Provider>\n </li>\n );\n },\n);\n"],"names":["BreadcrumbNext","breadcrumbNextCss"],"mappings":"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"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { makePrefixer } from '@salt-ds/core';
|
|
3
|
+
import { clsx } from 'clsx';
|
|
4
|
+
import { forwardRef } from 'react';
|
|
5
|
+
|
|
6
|
+
const withBaseName = makePrefixer("saltBreadcrumbNext");
|
|
7
|
+
const BreadcrumbNextLabel = forwardRef(function BreadcrumbNextLabel2({ className, ...rest }, ref) {
|
|
8
|
+
return /* @__PURE__ */ jsx(
|
|
9
|
+
"span",
|
|
10
|
+
{
|
|
11
|
+
ref,
|
|
12
|
+
className: clsx(withBaseName("label"), className),
|
|
13
|
+
...rest
|
|
14
|
+
}
|
|
15
|
+
);
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
export { BreadcrumbNextLabel };
|
|
19
|
+
//# sourceMappingURL=BreadcrumbNextLabel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BreadcrumbNextLabel.js","sources":["../src/breadcrumbs-next/BreadcrumbNextLabel.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumbNext\");\n\nexport interface BreadcrumbNextLabelProps\n extends ComponentPropsWithoutRef<\"span\"> {}\n\nexport const BreadcrumbNextLabel = forwardRef<\n HTMLSpanElement,\n BreadcrumbNextLabelProps\n>(function BreadcrumbNextLabel({ className, ...rest }, ref) {\n return (\n <span\n ref={ref}\n className={clsx(withBaseName(\"label\"), className)}\n {...rest}\n />\n );\n});\n"],"names":["BreadcrumbNextLabel"],"mappings":";;;;;AAIA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAK/C,MAAM,mBAAA,GAAsB,WAGjC,SAASA,oBAAAA,CAAoB,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AAC1D,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,YAAA,CAAa,OAAO,GAAG,SAAS,CAAA;AAAA,MAC/C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { makePrefixer, useForkRef, Link } from '@salt-ds/core';
|
|
3
|
+
import { clsx } from 'clsx';
|
|
4
|
+
import { forwardRef } from 'react';
|
|
5
|
+
import { useBreadcrumbNextContext } from './internal/BreadcrumbNextContext.js';
|
|
6
|
+
|
|
7
|
+
const withBaseName = makePrefixer("saltBreadcrumbNext");
|
|
8
|
+
const withBreadcrumbsBaseName = makePrefixer("saltBreadcrumbsNext");
|
|
9
|
+
const BreadcrumbNextTrigger = forwardRef(function BreadcrumbNextTrigger2(props, ref) {
|
|
10
|
+
const { children, className, onClick, ...rest } = props;
|
|
11
|
+
const context = useBreadcrumbNextContext();
|
|
12
|
+
if (!context) {
|
|
13
|
+
throw new Error(
|
|
14
|
+
"BreadcrumbNextTrigger must be rendered inside BreadcrumbNext"
|
|
15
|
+
);
|
|
16
|
+
}
|
|
17
|
+
const { current, href, onNavigate, placement, render, triggerRef } = context;
|
|
18
|
+
const handleRef = useForkRef(ref, triggerRef);
|
|
19
|
+
const isDisclosure = placement === "disclosure";
|
|
20
|
+
const triggerClassName = clsx(
|
|
21
|
+
isDisclosure ? withBreadcrumbsBaseName("disclosureItem") : withBaseName("trigger"),
|
|
22
|
+
className
|
|
23
|
+
);
|
|
24
|
+
const isNavigable = href !== void 0;
|
|
25
|
+
const handleClick = (event) => {
|
|
26
|
+
onClick == null ? void 0 : onClick(event);
|
|
27
|
+
if (isDisclosure || !event.defaultPrevented) {
|
|
28
|
+
onNavigate == null ? void 0 : onNavigate();
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
return /* @__PURE__ */ jsx(
|
|
32
|
+
Link,
|
|
33
|
+
{
|
|
34
|
+
"aria-current": current ? "page" : void 0,
|
|
35
|
+
className: clsx(triggerClassName, {
|
|
36
|
+
[withBaseName("link")]: isNavigable,
|
|
37
|
+
[withBaseName("current")]: current
|
|
38
|
+
}),
|
|
39
|
+
color: isDisclosure ? "inherit" : void 0,
|
|
40
|
+
href,
|
|
41
|
+
onClick: isNavigable ? handleClick : onClick,
|
|
42
|
+
ref: handleRef,
|
|
43
|
+
render: isNavigable ? render : void 0,
|
|
44
|
+
styleAs: "label",
|
|
45
|
+
underline: current || !isNavigable || isDisclosure ? "never" : void 0,
|
|
46
|
+
...rest,
|
|
47
|
+
children
|
|
48
|
+
}
|
|
49
|
+
);
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
export { BreadcrumbNextTrigger };
|
|
53
|
+
//# sourceMappingURL=BreadcrumbNextTrigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BreadcrumbNextTrigger.js","sources":["../src/breadcrumbs-next/BreadcrumbNextTrigger.tsx"],"sourcesContent":["import { Link, makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEventHandler,\n type ReactNode,\n} from \"react\";\nimport { useBreadcrumbNextContext } from \"./internal/BreadcrumbNextContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumbNext\");\nconst withBreadcrumbsBaseName = makePrefixer(\"saltBreadcrumbsNext\");\n\nexport interface BreadcrumbNextTriggerProps\n extends Omit<ComponentPropsWithoutRef<\"a\">, \"children\" | \"color\" | \"href\"> {\n /**\n * Breadcrumb trigger content.\n */\n children?: ReactNode;\n}\n\nexport const BreadcrumbNextTrigger = forwardRef<\n HTMLAnchorElement,\n BreadcrumbNextTriggerProps\n>(function BreadcrumbNextTrigger(props, ref) {\n const { children, className, onClick, ...rest } = props;\n const context = useBreadcrumbNextContext();\n\n if (!context) {\n throw new Error(\n \"BreadcrumbNextTrigger must be rendered inside BreadcrumbNext\",\n );\n }\n\n const { current, href, onNavigate, placement, render, triggerRef } = context;\n const handleRef = useForkRef(ref, triggerRef);\n const isDisclosure = placement === \"disclosure\";\n const triggerClassName = clsx(\n isDisclosure\n ? withBreadcrumbsBaseName(\"disclosureItem\")\n : withBaseName(\"trigger\"),\n className,\n );\n const isNavigable = href !== undefined;\n const handleClick: MouseEventHandler<HTMLAnchorElement> = (event) => {\n onClick?.(event);\n\n if (isDisclosure || !event.defaultPrevented) {\n onNavigate?.();\n }\n };\n\n return (\n <Link\n aria-current={current ? \"page\" : undefined}\n className={clsx(triggerClassName, {\n [withBaseName(\"link\")]: isNavigable,\n [withBaseName(\"current\")]: current,\n })}\n color={isDisclosure ? \"inherit\" : undefined}\n href={href}\n onClick={isNavigable ? handleClick : onClick}\n ref={handleRef}\n render={isNavigable ? render : undefined}\n styleAs=\"label\"\n underline={current || !isNavigable || isDisclosure ? \"never\" : undefined}\n {...rest}\n >\n {children}\n </Link>\n );\n});\n"],"names":["BreadcrumbNextTrigger"],"mappings":";;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AACtD,MAAM,uBAAA,GAA0B,aAAa,qBAAqB,CAAA;AAU3D,MAAM,qBAAA,GAAwB,UAAA,CAGnC,SAASA,sBAAAA,CAAsB,OAAO,GAAA,EAAK;AAC3C,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,OAAA,EAAS,GAAG,MAAK,GAAI,KAAA;AAClD,EAAA,MAAM,UAAU,wBAAA,EAAyB;AAEzC,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA,EACF;AAEA,EAAA,MAAM,EAAE,OAAA,EAAS,IAAA,EAAM,YAAY,SAAA,EAAW,MAAA,EAAQ,YAAW,GAAI,OAAA;AACrE,EAAA,MAAM,SAAA,GAAY,UAAA,CAAW,GAAA,EAAK,UAAU,CAAA;AAC5C,EAAA,MAAM,eAAe,SAAA,KAAc,YAAA;AACnC,EAAA,MAAM,gBAAA,GAAmB,IAAA;AAAA,IACvB,YAAA,GACI,uBAAA,CAAwB,gBAAgB,CAAA,GACxC,aAAa,SAAS,CAAA;AAAA,IAC1B;AAAA,GACF;AACA,EAAA,MAAM,cAAc,IAAA,KAAS,MAAA;AAC7B,EAAA,MAAM,WAAA,GAAoD,CAAC,KAAA,KAAU;AACnE,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAEV,IAAA,IAAI,YAAA,IAAgB,CAAC,KAAA,CAAM,gBAAA,EAAkB;AAC3C,MAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,EAAA;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAc,UAAU,MAAA,GAAS,MAAA;AAAA,MACjC,SAAA,EAAW,KAAK,gBAAA,EAAkB;AAAA,QAChC,CAAC,YAAA,CAAa,MAAM,CAAC,GAAG,WAAA;AAAA,QACxB,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,OAC5B,CAAA;AAAA,MACD,KAAA,EAAO,eAAe,SAAA,GAAY,MAAA;AAAA,MAClC,IAAA;AAAA,MACA,OAAA,EAAS,cAAc,WAAA,GAAc,OAAA;AAAA,MACrC,GAAA,EAAK,SAAA;AAAA,MACL,MAAA,EAAQ,cAAc,MAAA,GAAS,MAAA;AAAA,MAC/B,OAAA,EAAQ,OAAA;AAAA,MACR,SAAA,EAAW,OAAA,IAAW,CAAC,WAAA,IAAe,eAAe,OAAA,GAAU,MAAA;AAAA,MAC9D,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var css_248z = ".saltBreadcrumbsNext {\n display: block;\n margin-block: var(--salt-spacing-25);\n}\n\n.saltBreadcrumbsNext-ol {\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--salt-spacing-100);\n justify-content: flex-start;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.saltBreadcrumbsNext-ol-wrap {\n flex-wrap: wrap;\n}\n\n.saltBreadcrumbsNext-collapseItem {\n align-items: center;\n display: inline-flex;\n flex: 0 1 auto;\n gap: var(--salt-spacing-100);\n list-style: none;\n min-width: 0;\n}\n\n.saltBreadcrumbsNext-collapseButton[aria-expanded=\"true\"] {\n background: var(--saltButton-background-active, var(--button-background-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n cursor: var(--salt-cursor-active);\n}\n\n.saltBreadcrumbsNext-disclosure {\n background: var(--salt-container-primary-background);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n overflow: hidden;\n overflow-y: auto;\n min-width: 10em;\n position: relative;\n z-index: var(--salt-zIndex-flyover);\n box-shadow: var(--salt-overlayable-shadow-popout);\n box-sizing: border-box;\n border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltBreadcrumbsNext-disclosureList {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.saltBreadcrumbsNext-disclosureListItem {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.saltBreadcrumbsNext-disclosureItem {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-cursor-hover);\n box-sizing: border-box;\n flex-shrink: 0;\n text-decoration: none;\n width: 100%;\n}\n\n.saltBreadcrumbsNext-disclosureItem.saltLink {\n --link-color: var(--salt-content-primary-foreground);\n --link-color-hover: var(--salt-content-primary-foreground);\n --link-color-active: var(--salt-content-primary-foreground);\n --link-color-focus: var(--salt-content-primary-foreground);\n --link-color-visited: var(--salt-content-primary-foreground);\n --link-textDecoration: var(--salt-typography-textDecoration-none);\n --link-textDecoration-hover: var(--salt-typography-textDecoration-none);\n --link-textDecoration-active: var(--salt-typography-textDecoration-none);\n --link-textDecoration-focus: var(--salt-typography-textDecoration-none);\n --link-textDecoration-visited: var(--salt-typography-textDecoration-none);\n}\n\n.saltBreadcrumbsNext-disclosureItem.saltLink:focus:not(:focus-visible) {\n outline: none;\n}\n\n.saltBreadcrumbsNext-disclosureItem:focus-visible,\n.saltBreadcrumbsNext-disclosureItem.saltLink:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltBreadcrumbsNext-disclosureItem:hover {\n outline: none;\n}\n\n.saltBreadcrumbsNext-disclosureItem:hover,\n.saltBreadcrumbsNext-disclosureItem:focus-visible {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltBreadcrumbsNext-disclosureItem:active {\n background: var(--salt-selectable-background-selected);\n box-shadow:\n 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected),\n 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltBreadcrumbsNext-disclosureItem[aria-disabled=\"true\"],\n.saltBreadcrumbsNext-disclosureItem[aria-disabled=\"true\"]:active {\n background: var(--salt-selectable-background-disabled);\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-cursor-disabled);\n box-shadow: none;\n}\n";
|
|
2
|
+
|
|
3
|
+
export { css_248z as default };
|
|
4
|
+
//# sourceMappingURL=BreadcrumbsNext.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BreadcrumbsNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|