@salt-ds/lab 1.0.0-alpha.100 → 1.0.0-alpha.102
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 +34 -0
- package/css/salt-lab.css +10 -241
- package/dist-cjs/color-chooser/Swatch.css.js +1 -1
- package/dist-cjs/index.js +0 -12
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input-legacy/InputLegacy.js +8 -3
- package/dist-cjs/input-legacy/InputLegacy.js.map +1 -1
- package/dist-cjs/list/List.css.js +1 -1
- package/dist-cjs/list-deprecated/List.css.js +1 -1
- package/dist-cjs/list-next/ListNext.css.js +1 -1
- package/dist-cjs/query-input/QueryInput.css.js +1 -1
- package/dist-cjs/tabs/TabActivationIndicator.css.js +1 -1
- package/dist-cjs/toolbar/overflow-panel/OverflowPanel.css.js +1 -1
- package/dist-es/color-chooser/Swatch.css.js +1 -1
- package/dist-es/index.js +0 -6
- package/dist-es/index.js.map +1 -1
- package/dist-es/input-legacy/InputLegacy.js +8 -3
- package/dist-es/input-legacy/InputLegacy.js.map +1 -1
- package/dist-es/list/List.css.js +1 -1
- package/dist-es/list-deprecated/List.css.js +1 -1
- package/dist-es/list-next/ListNext.css.js +1 -1
- package/dist-es/query-input/QueryInput.css.js +1 -1
- package/dist-es/tabs/TabActivationIndicator.css.js +1 -1
- package/dist-es/toolbar/overflow-panel/OverflowPanel.css.js +1 -1
- package/dist-types/button-bar/internal/DescendantContext.d.ts +1 -1
- package/dist-types/combo-box-deprecated/internal/MultiSelectComboBox.d.ts +1 -1
- package/dist-types/combo-box-deprecated/internal/useComboBox.d.ts +1 -1
- package/dist-types/combo-box-deprecated/internal/useMultiSelectComboBox.d.ts +2 -2
- package/dist-types/common-hooks/collectionProvider.d.ts +1 -1
- package/dist-types/contact-details/MailLinkComponent.d.ts +1 -1
- package/dist-types/form-field-legacy/FormActivationIndicator.d.ts +1 -1
- package/dist-types/form-field-legacy/FormHelperText.d.ts +1 -1
- package/dist-types/form-field-legacy/FormLabel.d.ts +1 -1
- package/dist-types/form-field-legacy/NecessityIndicator.d.ts +1 -1
- package/dist-types/form-field-legacy/StatusIndicator.d.ts +1 -1
- package/dist-types/index.d.ts +0 -2
- package/dist-types/list-deprecated/internal/DescendantContext.d.ts +1 -1
- package/dist-types/list-deprecated/internal/Highlighter.d.ts +1 -1
- package/dist-types/query-input/internal/CategoryList.d.ts +1 -1
- package/dist-types/query-input/internal/SearchList.d.ts +1 -1
- package/dist-types/query-input/internal/ValueList.d.ts +1 -1
- package/dist-types/query-input/internal/ValueSelector.d.ts +1 -1
- package/dist-types/responsive/overflowUtils.d.ts +1 -1
- package/dist-types/tabs/TabActivationIndicator.d.ts +1 -1
- package/dist-types/tokenized-input/internal/InputPill.d.ts +1 -1
- package/dist-types/tokenized-input-next/internal/InputPill.d.ts +1 -1
- package/dist-types/toolbar/Tooltray.d.ts +1 -1
- package/package.json +4 -4
- package/dist-cjs/breadcrumbs/Breadcrumb.css.js +0 -6
- package/dist-cjs/breadcrumbs/Breadcrumb.css.js.map +0 -1
- package/dist-cjs/breadcrumbs/Breadcrumb.js +0 -90
- package/dist-cjs/breadcrumbs/Breadcrumb.js.map +0 -1
- package/dist-cjs/breadcrumbs/Breadcrumbs.css.js +0 -6
- package/dist-cjs/breadcrumbs/Breadcrumbs.css.js.map +0 -1
- package/dist-cjs/breadcrumbs/Breadcrumbs.js +0 -140
- package/dist-cjs/breadcrumbs/Breadcrumbs.js.map +0 -1
- package/dist-cjs/breadcrumbs/internal/BreadcrumbsCollapsed.js +0 -63
- package/dist-cjs/breadcrumbs/internal/BreadcrumbsCollapsed.js.map +0 -1
- package/dist-cjs/breadcrumbs/internal/BreadcrumbsContext.js +0 -20
- package/dist-cjs/breadcrumbs/internal/BreadcrumbsContext.js.map +0 -1
- package/dist-cjs/breadcrumbs/internal/BreadcrumbsSeparator.js +0 -9
- package/dist-cjs/breadcrumbs/internal/BreadcrumbsSeparator.js.map +0 -1
- package/dist-cjs/breadcrumbs/internal/useFocusMenuRemount.js +0 -22
- package/dist-cjs/breadcrumbs/internal/useFocusMenuRemount.js.map +0 -1
- package/dist-cjs/breadcrumbs-next/BreadcrumbNext.css.js +0 -6
- package/dist-cjs/breadcrumbs-next/BreadcrumbNext.css.js.map +0 -1
- package/dist-cjs/breadcrumbs-next/BreadcrumbNext.js +0 -99
- package/dist-cjs/breadcrumbs-next/BreadcrumbNext.js.map +0 -1
- package/dist-cjs/breadcrumbs-next/BreadcrumbNextLabel.js +0 -21
- package/dist-cjs/breadcrumbs-next/BreadcrumbNextLabel.js.map +0 -1
- package/dist-cjs/breadcrumbs-next/BreadcrumbNextTrigger.js +0 -48
- package/dist-cjs/breadcrumbs-next/BreadcrumbNextTrigger.js.map +0 -1
- package/dist-cjs/breadcrumbs-next/BreadcrumbsNext.css.js +0 -6
- package/dist-cjs/breadcrumbs-next/BreadcrumbsNext.css.js.map +0 -1
- package/dist-cjs/breadcrumbs-next/BreadcrumbsNext.js +0 -146
- package/dist-cjs/breadcrumbs-next/BreadcrumbsNext.js.map +0 -1
- package/dist-cjs/breadcrumbs-next/internal/BreadcrumbNextContext.js +0 -12
- package/dist-cjs/breadcrumbs-next/internal/BreadcrumbNextContext.js.map +0 -1
- package/dist-cjs/breadcrumbs-next/internal/BreadcrumbOverflowDisclosure.js +0 -236
- package/dist-cjs/breadcrumbs-next/internal/BreadcrumbOverflowDisclosure.js.map +0 -1
- package/dist-cjs/breadcrumbs-next/internal/breadcrumbItems.js +0 -21
- package/dist-cjs/breadcrumbs-next/internal/breadcrumbItems.js.map +0 -1
- package/dist-es/breadcrumbs/Breadcrumb.css.js +0 -4
- package/dist-es/breadcrumbs/Breadcrumb.css.js.map +0 -1
- package/dist-es/breadcrumbs/Breadcrumb.js +0 -88
- package/dist-es/breadcrumbs/Breadcrumb.js.map +0 -1
- package/dist-es/breadcrumbs/Breadcrumbs.css.js +0 -4
- package/dist-es/breadcrumbs/Breadcrumbs.css.js.map +0 -1
- package/dist-es/breadcrumbs/Breadcrumbs.js +0 -138
- package/dist-es/breadcrumbs/Breadcrumbs.js.map +0 -1
- package/dist-es/breadcrumbs/internal/BreadcrumbsCollapsed.js +0 -61
- package/dist-es/breadcrumbs/internal/BreadcrumbsCollapsed.js.map +0 -1
- package/dist-es/breadcrumbs/internal/BreadcrumbsContext.js +0 -17
- package/dist-es/breadcrumbs/internal/BreadcrumbsContext.js.map +0 -1
- package/dist-es/breadcrumbs/internal/BreadcrumbsSeparator.js +0 -7
- package/dist-es/breadcrumbs/internal/BreadcrumbsSeparator.js.map +0 -1
- package/dist-es/breadcrumbs/internal/useFocusMenuRemount.js +0 -20
- package/dist-es/breadcrumbs/internal/useFocusMenuRemount.js.map +0 -1
- package/dist-es/breadcrumbs-next/BreadcrumbNext.css.js +0 -4
- package/dist-es/breadcrumbs-next/BreadcrumbNext.css.js.map +0 -1
- package/dist-es/breadcrumbs-next/BreadcrumbNext.js +0 -97
- package/dist-es/breadcrumbs-next/BreadcrumbNext.js.map +0 -1
- package/dist-es/breadcrumbs-next/BreadcrumbNextLabel.js +0 -19
- package/dist-es/breadcrumbs-next/BreadcrumbNextLabel.js.map +0 -1
- package/dist-es/breadcrumbs-next/BreadcrumbNextTrigger.js +0 -46
- package/dist-es/breadcrumbs-next/BreadcrumbNextTrigger.js.map +0 -1
- package/dist-es/breadcrumbs-next/BreadcrumbsNext.css.js +0 -4
- package/dist-es/breadcrumbs-next/BreadcrumbsNext.css.js.map +0 -1
- package/dist-es/breadcrumbs-next/BreadcrumbsNext.js +0 -144
- package/dist-es/breadcrumbs-next/BreadcrumbsNext.js.map +0 -1
- package/dist-es/breadcrumbs-next/internal/BreadcrumbNextContext.js +0 -9
- package/dist-es/breadcrumbs-next/internal/BreadcrumbNextContext.js.map +0 -1
- package/dist-es/breadcrumbs-next/internal/BreadcrumbOverflowDisclosure.js +0 -234
- package/dist-es/breadcrumbs-next/internal/BreadcrumbOverflowDisclosure.js.map +0 -1
- package/dist-es/breadcrumbs-next/internal/breadcrumbItems.js +0 -19
- package/dist-es/breadcrumbs-next/internal/breadcrumbItems.js.map +0 -1
- package/dist-types/breadcrumbs/Breadcrumb.d.ts +0 -18
- package/dist-types/breadcrumbs/Breadcrumbs.d.ts +0 -17
- package/dist-types/breadcrumbs/index.d.ts +0 -2
- package/dist-types/breadcrumbs/internal/BreadcrumbsCollapsed.d.ts +0 -10
- package/dist-types/breadcrumbs/internal/BreadcrumbsContext.d.ts +0 -8
- package/dist-types/breadcrumbs/internal/BreadcrumbsSeparator.d.ts +0 -2
- package/dist-types/breadcrumbs/internal/useFocusMenuRemount.d.ts +0 -4
- package/dist-types/breadcrumbs-next/BreadcrumbNext.d.ts +0 -23
- package/dist-types/breadcrumbs-next/BreadcrumbNextLabel.d.ts +0 -4
- package/dist-types/breadcrumbs-next/BreadcrumbNextTrigger.d.ts +0 -8
- package/dist-types/breadcrumbs-next/BreadcrumbsNext.d.ts +0 -32
- package/dist-types/breadcrumbs-next/index.d.ts +0 -4
- package/dist-types/breadcrumbs-next/internal/BreadcrumbNextContext.d.ts +0 -14
- package/dist-types/breadcrumbs-next/internal/BreadcrumbOverflowDisclosure.d.ts +0 -9
- package/dist-types/breadcrumbs-next/internal/breadcrumbItems.d.ts +0 -9
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var styles = require('@salt-ds/styles');
|
|
6
|
-
var window = require('@salt-ds/window');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var react = require('react');
|
|
9
|
-
var BreadcrumbNext = require('./BreadcrumbNext.js');
|
|
10
|
-
var BreadcrumbsNext$1 = require('./BreadcrumbsNext.css.js');
|
|
11
|
-
var BreadcrumbNextContext = require('./internal/BreadcrumbNextContext.js');
|
|
12
|
-
var BreadcrumbOverflowDisclosure = require('./internal/BreadcrumbOverflowDisclosure.js');
|
|
13
|
-
var breadcrumbItems = require('./internal/breadcrumbItems.js');
|
|
14
|
-
|
|
15
|
-
const withBaseName = core.makePrefixer("saltBreadcrumbsNext");
|
|
16
|
-
const withItemBaseName = core.makePrefixer("saltBreadcrumbNext");
|
|
17
|
-
function isBreadcrumbNextElement(child) {
|
|
18
|
-
return react.isValidElement(child) && child.type === BreadcrumbNext.BreadcrumbNext;
|
|
19
|
-
}
|
|
20
|
-
function getCurrentIndex(items) {
|
|
21
|
-
const explicitCurrentIndex = items.findIndex(({ props }) => props.current);
|
|
22
|
-
return explicitCurrentIndex === -1 ? Math.max(items.length - 1, 0) : explicitCurrentIndex;
|
|
23
|
-
}
|
|
24
|
-
function getCollapseRange({
|
|
25
|
-
currentIndex,
|
|
26
|
-
items,
|
|
27
|
-
itemsAfterCollapse,
|
|
28
|
-
itemsBeforeCollapse
|
|
29
|
-
}) {
|
|
30
|
-
const itemCount = items.length;
|
|
31
|
-
const effectiveItemsAfterCollapse = Math.max(
|
|
32
|
-
itemsAfterCollapse,
|
|
33
|
-
itemCount - currentIndex
|
|
34
|
-
);
|
|
35
|
-
if (itemsBeforeCollapse + effectiveItemsAfterCollapse >= itemCount) {
|
|
36
|
-
return void 0;
|
|
37
|
-
}
|
|
38
|
-
const hiddenStart = itemsBeforeCollapse;
|
|
39
|
-
const hiddenEnd = itemCount - effectiveItemsAfterCollapse;
|
|
40
|
-
const hiddenItems = items.slice(hiddenStart, hiddenEnd);
|
|
41
|
-
return {
|
|
42
|
-
hiddenItems,
|
|
43
|
-
visibleAfter: items.slice(hiddenEnd),
|
|
44
|
-
visibleBefore: items.slice(0, hiddenStart)
|
|
45
|
-
};
|
|
46
|
-
}
|
|
47
|
-
function renderSeparator(SeparatorIcon) {
|
|
48
|
-
return /* @__PURE__ */ jsxRuntime.jsx(SeparatorIcon, { "aria-hidden": true, className: withItemBaseName("separator") });
|
|
49
|
-
}
|
|
50
|
-
const BreadcrumbsNext = react.forwardRef(
|
|
51
|
-
function BreadcrumbsNext2(props, ref) {
|
|
52
|
-
const {
|
|
53
|
-
children,
|
|
54
|
-
className,
|
|
55
|
-
itemsAfterCollapse = 1,
|
|
56
|
-
itemsBeforeCollapse = 1,
|
|
57
|
-
maxItems,
|
|
58
|
-
render,
|
|
59
|
-
wrap = false,
|
|
60
|
-
...rest
|
|
61
|
-
} = props;
|
|
62
|
-
const targetWindow = window.useWindow();
|
|
63
|
-
const { LevelSeparatorIcon } = core.useIcon();
|
|
64
|
-
styles.useComponentCssInjection({
|
|
65
|
-
testId: "salt-breadcrumbs-next",
|
|
66
|
-
css: BreadcrumbsNext$1,
|
|
67
|
-
window: targetWindow
|
|
68
|
-
});
|
|
69
|
-
const items = breadcrumbItems.flattenBreadcrumbItems(children).filter(isBreadcrumbNextElement).map((element, index) => ({
|
|
70
|
-
element,
|
|
71
|
-
index,
|
|
72
|
-
key: element.key ?? index,
|
|
73
|
-
props: element.props
|
|
74
|
-
}));
|
|
75
|
-
const currentIndex = getCurrentIndex(items);
|
|
76
|
-
const shouldCollapse = !wrap && maxItems !== void 0 && items.length > maxItems;
|
|
77
|
-
const collapseRange = shouldCollapse ? getCollapseRange({
|
|
78
|
-
currentIndex,
|
|
79
|
-
items,
|
|
80
|
-
itemsAfterCollapse,
|
|
81
|
-
itemsBeforeCollapse
|
|
82
|
-
}) : void 0;
|
|
83
|
-
const renderParts = collapseRange ? [
|
|
84
|
-
...collapseRange.visibleBefore.map(
|
|
85
|
-
(item) => ({ item, type: "breadcrumb" })
|
|
86
|
-
),
|
|
87
|
-
{
|
|
88
|
-
hiddenItems: collapseRange.hiddenItems,
|
|
89
|
-
type: "collapse"
|
|
90
|
-
},
|
|
91
|
-
...collapseRange.visibleAfter.map(
|
|
92
|
-
(item) => ({ item, type: "breadcrumb" })
|
|
93
|
-
)
|
|
94
|
-
] : items.map((item) => ({ item, type: "breadcrumb" }));
|
|
95
|
-
return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, className: clsx.clsx(withBaseName(), className), ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
96
|
-
"ol",
|
|
97
|
-
{
|
|
98
|
-
className: clsx.clsx(withBaseName("ol"), {
|
|
99
|
-
[withBaseName("ol-wrap")]: wrap
|
|
100
|
-
}),
|
|
101
|
-
children: renderParts.map((part, index) => {
|
|
102
|
-
const showSeparator = index < renderParts.length - 1;
|
|
103
|
-
if (part.type === "collapse") {
|
|
104
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
105
|
-
"li",
|
|
106
|
-
{
|
|
107
|
-
className: clsx.clsx(
|
|
108
|
-
withItemBaseName(),
|
|
109
|
-
withBaseName("collapseItem")
|
|
110
|
-
),
|
|
111
|
-
children: [
|
|
112
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
113
|
-
BreadcrumbOverflowDisclosure.BreadcrumbOverflowDisclosure,
|
|
114
|
-
{
|
|
115
|
-
currentIndex,
|
|
116
|
-
items: part.hiddenItems,
|
|
117
|
-
render
|
|
118
|
-
}
|
|
119
|
-
),
|
|
120
|
-
showSeparator ? renderSeparator(LevelSeparatorIcon) : null
|
|
121
|
-
]
|
|
122
|
-
},
|
|
123
|
-
"breadcrumbs-next-collapse"
|
|
124
|
-
);
|
|
125
|
-
}
|
|
126
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
127
|
-
BreadcrumbNextContext.BreadcrumbNextContext.Provider,
|
|
128
|
-
{
|
|
129
|
-
value: {
|
|
130
|
-
current: part.item.index === currentIndex,
|
|
131
|
-
placement: "trail",
|
|
132
|
-
render,
|
|
133
|
-
showSeparator
|
|
134
|
-
},
|
|
135
|
-
children: part.item.element
|
|
136
|
-
},
|
|
137
|
-
part.item.key
|
|
138
|
-
);
|
|
139
|
-
})
|
|
140
|
-
}
|
|
141
|
-
) });
|
|
142
|
-
}
|
|
143
|
-
);
|
|
144
|
-
|
|
145
|
-
exports.BreadcrumbsNext = BreadcrumbsNext;
|
|
146
|
-
//# sourceMappingURL=BreadcrumbsNext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbsNext.js","sources":["../src/breadcrumbs-next/BreadcrumbsNext.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 type ComponentPropsWithoutRef,\n type ElementType,\n forwardRef,\n isValidElement,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport { BreadcrumbNext, type BreadcrumbNextProps } from \"./BreadcrumbNext\";\nimport breadcrumbsNextCss from \"./BreadcrumbsNext.css\";\nimport { BreadcrumbNextContext } from \"./internal/BreadcrumbNextContext\";\nimport { BreadcrumbOverflowDisclosure } from \"./internal/BreadcrumbOverflowDisclosure\";\nimport {\n flattenBreadcrumbItems,\n type NormalizedBreadcrumb,\n} from \"./internal/breadcrumbItems\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumbsNext\");\nconst withItemBaseName = makePrefixer(\"saltBreadcrumbNext\");\n\ninterface CollapseRange {\n hiddenItems: NormalizedBreadcrumb[];\n visibleAfter: NormalizedBreadcrumb[];\n visibleBefore: NormalizedBreadcrumb[];\n}\n\ntype RenderPart =\n | {\n item: NormalizedBreadcrumb;\n type: \"breadcrumb\";\n }\n | {\n hiddenItems: NormalizedBreadcrumb[];\n type: \"collapse\";\n };\n\nexport interface BreadcrumbsNextProps\n extends Omit<ComponentPropsWithoutRef<\"nav\">, \"children\"> {\n /**\n * Breadcrumb items.\n */\n children?: ReactNode;\n /**\n * The number of items to keep after the collapse point.\n * Defaults to 1.\n */\n itemsAfterCollapse?: number;\n /**\n * The number of items to keep before the collapse point.\n * Defaults to 1.\n */\n itemsBeforeCollapse?: number;\n /**\n * The maximum number of breadcrumbs to render before collapsing.\n */\n maxItems?: number;\n /**\n * Render prop to enable customization of the underlying link elements.\n */\n render?: RenderPropsType[\"render\"];\n /**\n * If `true`, breadcrumbs can wrap onto multiple lines.\n * Defaults to `false`.\n */\n wrap?: boolean;\n}\n\nfunction isBreadcrumbNextElement(\n child: ReactNode,\n): child is ReactElement<BreadcrumbNextProps> {\n return (\n isValidElement<BreadcrumbNextProps>(child) && child.type === BreadcrumbNext\n );\n}\n\nfunction getCurrentIndex(items: NormalizedBreadcrumb[]) {\n const explicitCurrentIndex = items.findIndex(({ props }) => props.current);\n\n return explicitCurrentIndex === -1\n ? Math.max(items.length - 1, 0)\n : explicitCurrentIndex;\n}\n\nfunction getCollapseRange({\n currentIndex,\n items,\n itemsAfterCollapse,\n itemsBeforeCollapse,\n}: {\n currentIndex: number;\n items: NormalizedBreadcrumb[];\n itemsAfterCollapse: number;\n itemsBeforeCollapse: number;\n}): CollapseRange | undefined {\n const itemCount = items.length;\n const effectiveItemsAfterCollapse = Math.max(\n itemsAfterCollapse,\n itemCount - currentIndex,\n );\n\n if (itemsBeforeCollapse + effectiveItemsAfterCollapse >= itemCount) {\n return undefined;\n }\n\n const hiddenStart = itemsBeforeCollapse;\n const hiddenEnd = itemCount - effectiveItemsAfterCollapse;\n const hiddenItems = items.slice(hiddenStart, hiddenEnd);\n\n return {\n hiddenItems,\n visibleAfter: items.slice(hiddenEnd),\n visibleBefore: items.slice(0, hiddenStart),\n };\n}\n\nfunction renderSeparator(SeparatorIcon: ElementType) {\n return (\n <SeparatorIcon aria-hidden className={withItemBaseName(\"separator\")} />\n );\n}\n\nexport const BreadcrumbsNext = forwardRef<HTMLElement, BreadcrumbsNextProps>(\n function BreadcrumbsNext(props, ref) {\n const {\n children,\n className,\n itemsAfterCollapse = 1,\n itemsBeforeCollapse = 1,\n maxItems,\n render,\n wrap = false,\n ...rest\n } = props;\n const targetWindow = useWindow();\n const { LevelSeparatorIcon } = useIcon();\n\n useComponentCssInjection({\n testId: \"salt-breadcrumbs-next\",\n css: breadcrumbsNextCss,\n window: targetWindow,\n });\n\n const items = flattenBreadcrumbItems(children)\n .filter(isBreadcrumbNextElement)\n .map((element, index) => ({\n element,\n index,\n key: element.key ?? index,\n props: element.props,\n }));\n\n const currentIndex = getCurrentIndex(items);\n const shouldCollapse =\n !wrap && maxItems !== undefined && items.length > maxItems;\n\n const collapseRange = shouldCollapse\n ? getCollapseRange({\n currentIndex,\n items,\n itemsAfterCollapse,\n itemsBeforeCollapse,\n })\n : undefined;\n\n const renderParts: RenderPart[] = collapseRange\n ? [\n ...collapseRange.visibleBefore.map(\n (item): RenderPart => ({ item, type: \"breadcrumb\" }),\n ),\n {\n hiddenItems: collapseRange.hiddenItems,\n type: \"collapse\",\n },\n ...collapseRange.visibleAfter.map(\n (item): RenderPart => ({ item, type: \"breadcrumb\" }),\n ),\n ]\n : items.map((item): RenderPart => ({ item, type: \"breadcrumb\" }));\n\n return (\n <nav ref={ref} className={clsx(withBaseName(), className)} {...rest}>\n <ol\n className={clsx(withBaseName(\"ol\"), {\n [withBaseName(\"ol-wrap\")]: wrap,\n })}\n >\n {renderParts.map((part, index) => {\n const showSeparator = index < renderParts.length - 1;\n\n if (part.type === \"collapse\") {\n return (\n <li\n className={clsx(\n withItemBaseName(),\n withBaseName(\"collapseItem\"),\n )}\n key=\"breadcrumbs-next-collapse\"\n >\n <BreadcrumbOverflowDisclosure\n currentIndex={currentIndex}\n items={part.hiddenItems}\n render={render}\n />\n {showSeparator ? renderSeparator(LevelSeparatorIcon) : null}\n </li>\n );\n }\n\n return (\n <BreadcrumbNextContext.Provider\n key={part.item.key}\n value={{\n current: part.item.index === currentIndex,\n placement: \"trail\",\n render,\n showSeparator,\n }}\n >\n {part.item.element}\n </BreadcrumbNextContext.Provider>\n );\n })}\n </ol>\n </nav>\n );\n },\n);\n"],"names":["makePrefixer","isValidElement","BreadcrumbNext","forwardRef","BreadcrumbsNext","useWindow","useIcon","useComponentCssInjection","breadcrumbsNextCss","flattenBreadcrumbItems","jsx","clsx","jsxs","BreadcrumbOverflowDisclosure","BreadcrumbNextContext"],"mappings":"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"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var react = require('react');
|
|
4
|
-
|
|
5
|
-
const BreadcrumbNextContext = react.createContext(void 0);
|
|
6
|
-
function useBreadcrumbNextContext() {
|
|
7
|
-
return react.useContext(BreadcrumbNextContext);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
exports.BreadcrumbNextContext = BreadcrumbNextContext;
|
|
11
|
-
exports.useBreadcrumbNextContext = useBreadcrumbNextContext;
|
|
12
|
-
//# sourceMappingURL=BreadcrumbNextContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbNextContext.js","sources":["../src/breadcrumbs-next/internal/BreadcrumbNextContext.ts"],"sourcesContent":["import type { RenderPropsType } from \"@salt-ds/core\";\nimport { createContext, type Ref, useContext } from \"react\";\n\nexport type BreadcrumbNextPlacement = \"disclosure\" | \"trail\";\n\nexport interface BreadcrumbNextContextValue {\n current: boolean;\n href?: string;\n onNavigate?: () => void;\n placement: BreadcrumbNextPlacement;\n render?: RenderPropsType[\"render\"];\n showSeparator: boolean;\n triggerRef?: Ref<HTMLAnchorElement>;\n}\n\nexport const BreadcrumbNextContext = createContext<\n BreadcrumbNextContextValue | undefined\n>(undefined);\n\nexport function useBreadcrumbNextContext() {\n return useContext(BreadcrumbNextContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;AAeO,MAAM,qBAAA,GAAwBA,oBAEnC,MAAS;AAEJ,SAAS,wBAAA,GAA2B;AACzC,EAAA,OAAOC,iBAAW,qBAAqB,CAAA;AACzC;;;;;"}
|
|
@@ -1,236 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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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"}
|
|
@@ -1,21 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = ".saltBreadcrumb {\n --breadcrumbs-crumb-color: var(--saltBreadcrumbs-crumb-color, var(--salt-actionable-primary-foreground));\n --breadcrumbs-crumb-color-hover: var(--saltBreadcrumbs-crumb-color-hover, var(--salt-actionable-primary-foreground-hover));\n --breadcrumbs-crumb-color-active: var(--saltBreadcrumbs-crumb-color-active, var(--salt-actionable-primary-foreground-active));\n --breadcrumbs-crumb-icon-color: var(--saltBreadcrumbs-crumb-icon-color, var(--breadcrumbs-crumb-color));\n --breadcrumbs-crumb-marginLeft: 0px;\n}\n\n.saltBreadcrumb {\n padding: 0px;\n}\n\n.saltBreadcrumb-regular {\n display: flex;\n gap: calc(var(--salt-size-unit) / 2);\n align-items: center;\n color: var(--breadcrumbs-crumb-color);\n}\n\n.saltBreadcrumb-regular:visited {\n color: currentColor;\n}\n\n.saltBreadcrumb-regular:visited .saltBreadcrumb-icon {\n color: currentColor;\n}\n\n.saltBreadcrumb-regular:hover {\n color: var(--breadcrumbs-crumb-color-hover);\n}\n\n.saltBreadcrumb-regular:hover .saltBreadcrumb-icon {\n color: var(--breadcrumbs-crumb-color-hover);\n}\n\n.saltBreadcrumb-regular:active {\n color: var(--breadcrumbs-crumb-color-active);\n}\n\n.saltBreadcrumb-regular:active .saltBreadcrumb-icon {\n color: var(--breadcrumbs-crumb-color-active);\n}\n\n.saltBreadcrumb-currentLevel {\n color: var(--breadcrumbs-crumb-color);\n}\n\n.saltBreadcrumb-icon {\n color: var(--breadcrumbs-crumb-icon-color);\n margin-left: var(--saltBreadcrumbs-crumb-marginLeft, var(--breadcrumbs-crumb-marginLeft));\n}\n\n.saltBreadcrumb-justifyContentCenter {\n justify-content: center;\n}\n\n.saltBreadcrumb-text {\n text-decoration: underline;\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=Breadcrumb.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumb.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer, Text, Link } 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 './Breadcrumb.css.js';
|
|
8
|
-
import { useBreadcrumbsContext } from './internal/BreadcrumbsContext.js';
|
|
9
|
-
|
|
10
|
-
const withBaseName = makePrefixer("saltBreadcrumb");
|
|
11
|
-
const Breadcrumb = forwardRef(
|
|
12
|
-
function Breadcrumb2({
|
|
13
|
-
children,
|
|
14
|
-
ContainerProps = {},
|
|
15
|
-
tooltipText,
|
|
16
|
-
tooltipProps,
|
|
17
|
-
isCurrentLevel,
|
|
18
|
-
onItemClick,
|
|
19
|
-
overflowLabel,
|
|
20
|
-
maxWidth,
|
|
21
|
-
Icon,
|
|
22
|
-
minWidth,
|
|
23
|
-
className,
|
|
24
|
-
...props
|
|
25
|
-
}, ref) {
|
|
26
|
-
const targetWindow = useWindow();
|
|
27
|
-
useComponentCssInjection({
|
|
28
|
-
testId: "salt-breadcrumb",
|
|
29
|
-
css: css_248z,
|
|
30
|
-
window: targetWindow
|
|
31
|
-
});
|
|
32
|
-
const { itemsMaxWidth, itemsMinWidth, liClass } = useBreadcrumbsContext();
|
|
33
|
-
const hasChildren = Children.count(children) !== 0;
|
|
34
|
-
const hasOnlyIcon = Icon && !hasChildren;
|
|
35
|
-
const getDefaultBreadcrumb = () => isCurrentLevel ? /* @__PURE__ */ jsx(
|
|
36
|
-
Text,
|
|
37
|
-
{
|
|
38
|
-
maxRows: 1,
|
|
39
|
-
className: clsx(
|
|
40
|
-
withBaseName(),
|
|
41
|
-
className,
|
|
42
|
-
withBaseName("currentLevel")
|
|
43
|
-
),
|
|
44
|
-
styleAs: "label",
|
|
45
|
-
children
|
|
46
|
-
}
|
|
47
|
-
) : /* @__PURE__ */ jsxs(
|
|
48
|
-
"div",
|
|
49
|
-
{
|
|
50
|
-
className: clsx(
|
|
51
|
-
withBaseName(),
|
|
52
|
-
className,
|
|
53
|
-
{
|
|
54
|
-
[withBaseName("justifyContentCenter")]: hasOnlyIcon
|
|
55
|
-
},
|
|
56
|
-
withBaseName("regular")
|
|
57
|
-
),
|
|
58
|
-
children: [
|
|
59
|
-
Icon && /* @__PURE__ */ jsx(Icon, { className: withBaseName("icon") }),
|
|
60
|
-
hasChildren && /* @__PURE__ */ jsx(Link, { maxRows: 1, styleAs: "label", ...props, children })
|
|
61
|
-
]
|
|
62
|
-
}
|
|
63
|
-
);
|
|
64
|
-
const content = getDefaultBreadcrumb();
|
|
65
|
-
const {
|
|
66
|
-
style: containerStyle,
|
|
67
|
-
className: containerClassName,
|
|
68
|
-
...containerPropsRest
|
|
69
|
-
} = ContainerProps;
|
|
70
|
-
return /* @__PURE__ */ jsx(
|
|
71
|
-
"li",
|
|
72
|
-
{
|
|
73
|
-
ref,
|
|
74
|
-
style: {
|
|
75
|
-
...containerStyle,
|
|
76
|
-
minWidth: minWidth ?? itemsMinWidth,
|
|
77
|
-
maxWidth: maxWidth ?? itemsMaxWidth
|
|
78
|
-
},
|
|
79
|
-
className: clsx(liClass, containerClassName),
|
|
80
|
-
...containerPropsRest,
|
|
81
|
-
children: content
|
|
82
|
-
}
|
|
83
|
-
);
|
|
84
|
-
}
|
|
85
|
-
);
|
|
86
|
-
|
|
87
|
-
export { Breadcrumb };
|
|
88
|
-
//# sourceMappingURL=Breadcrumb.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { Link, makePrefixer, Text, type TooltipProps } from \"@salt-ds/core\";\nimport type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n type ComponentType,\n forwardRef,\n type HTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport type { CascadingMenuProps } from \"../cascading-menu/CascadingMenuProps\";\nimport breadcrumbCss from \"./Breadcrumb.css\";\nimport { useBreadcrumbsContext } from \"./internal/BreadcrumbsContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\n\nexport interface BreadcrumbProps\n extends Pick<CascadingMenuProps, \"onItemClick\"> {\n children?: ReactNode;\n ContainerProps?: HTMLAttributes<HTMLLIElement>;\n tooltipText?: string;\n tooltipProps?: TooltipProps;\n className?: string;\n href?: string;\n isCurrentLevel?: boolean;\n maxWidth?: number;\n minWidth?: number;\n overflowLabel?: string;\n Icon?: ComponentType<IconProps>;\n}\n\nexport const Breadcrumb = forwardRef<HTMLLIElement, BreadcrumbProps>(\n function Breadcrumb(\n {\n children,\n ContainerProps = {},\n tooltipText,\n tooltipProps,\n isCurrentLevel,\n onItemClick,\n overflowLabel,\n maxWidth,\n Icon,\n minWidth,\n className,\n ...props\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-breadcrumb\",\n css: breadcrumbCss,\n window: targetWindow,\n });\n\n const { itemsMaxWidth, itemsMinWidth, liClass } = useBreadcrumbsContext();\n\n const hasChildren = Children.count(children) !== 0;\n const hasOnlyIcon = Icon && !hasChildren;\n\n const getDefaultBreadcrumb = () =>\n isCurrentLevel ? (\n <Text\n maxRows={1}\n className={clsx(\n withBaseName(),\n className,\n withBaseName(\"currentLevel\"),\n )}\n styleAs=\"label\"\n >\n {children}\n </Text>\n ) : (\n <div\n className={clsx(\n withBaseName(),\n className,\n {\n [withBaseName(\"justifyContentCenter\")]: hasOnlyIcon,\n },\n withBaseName(\"regular\"),\n )}\n >\n {Icon && <Icon className={withBaseName(\"icon\")} />}\n {hasChildren && (\n <Link maxRows={1} styleAs=\"label\" {...props}>\n {children}\n </Link>\n )}\n </div>\n );\n\n const content = getDefaultBreadcrumb();\n\n const {\n style: containerStyle,\n className: containerClassName,\n ...containerPropsRest\n } = ContainerProps;\n\n return (\n <li\n ref={ref}\n style={{\n ...containerStyle,\n minWidth: minWidth ?? itemsMinWidth,\n maxWidth: maxWidth ?? itemsMaxWidth,\n }}\n className={clsx(liClass, containerClassName)}\n {...containerPropsRest}\n >\n {content}\n </li>\n );\n },\n);\n"],"names":["Breadcrumb","breadcrumbCss"],"mappings":";;;;;;;;;AAgBA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAiB3C,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,SAASA,WAAAA,CACP;AAAA,IACE,QAAA;AAAA,IACA,iBAAiB,EAAC;AAAA,IAClB,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,iBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,aAAA,EAAe,aAAA,EAAe,OAAA,KAAY,qBAAA,EAAsB;AAExE,IAAA,MAAM,WAAA,GAAc,QAAA,CAAS,KAAA,CAAM,QAAQ,CAAA,KAAM,CAAA;AACjD,IAAA,MAAM,WAAA,GAAc,QAAQ,CAAC,WAAA;AAE7B,IAAA,MAAM,oBAAA,GAAuB,MAC3B,cAAA,mBACE,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,CAAA;AAAA,QACT,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb,SAAA;AAAA,UACA,aAAa,cAAc;AAAA,SAC7B;AAAA,QACA,OAAA,EAAQ,OAAA;AAAA,QAEP;AAAA;AAAA,KACH,mBAEA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb,SAAA;AAAA,UACA;AAAA,YACE,CAAC,YAAA,CAAa,sBAAsB,CAAC,GAAG;AAAA,WAC1C;AAAA,UACA,aAAa,SAAS;AAAA,SACxB;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,IAAA,oBAAQ,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA;AAAA,UAC/C,WAAA,wBACE,IAAA,EAAA,EAAK,OAAA,EAAS,GAAG,OAAA,EAAQ,OAAA,EAAS,GAAG,KAAA,EACnC,QAAA,EACH;AAAA;AAAA;AAAA,KAEJ;AAGJ,IAAA,MAAM,UAAU,oBAAA,EAAqB;AAErC,IAAA,MAAM;AAAA,MACJ,KAAA,EAAO,cAAA;AAAA,MACP,SAAA,EAAW,kBAAA;AAAA,MACX,GAAG;AAAA,KACL,GAAI,cAAA;AAEJ,IAAA,uBACE,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,KAAA,EAAO;AAAA,UACL,GAAG,cAAA;AAAA,UACH,UAAU,QAAA,IAAY,aAAA;AAAA,UACtB,UAAU,QAAA,IAAY;AAAA,SACxB;AAAA,QACA,SAAA,EAAW,IAAA,CAAK,OAAA,EAAS,kBAAkB,CAAA;AAAA,QAC1C,GAAG,kBAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = ".saltBreadcrumbs-ol {\n --breadcrumbs-ol-gap: var(--salt-size-unit);\n\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0;\n margin: 0;\n gap: var(--breadcrumbs-ol-gap);\n}\n\n.saltBreadcrumbs-li {\n --breadcrumbs-li-marginRight: 0px;\n --breadcrumbs-li-padding: 0px;\n\n flex: 0 1 auto;\n list-style: none;\n margin-right: var(--breadcrumbs-li-marginRight);\n padding: var(--breadcrumbs-li-padding);\n}\n\n.saltBreadcrumbs-separator {\n --breadcrumbs-separator-marginRight: 0px;\n\n display: flex;\n margin-right: var(--breadcrumbs-separator-marginRight);\n user-select: none;\n}\n\n.saltBreadcrumbs-ol-wrap {\n flex-wrap: wrap;\n}\n\n.saltBreadcrumbs-ol-wrap .saltBreadcrumbs-li,\n.saltBreadcrumbs-ol-wrap .saltBreadcrumbs-separator {\n --breadcrumbs-ol-wrap-li-marginBottom: 0px;\n\n margin-bottom: var(--breadcrumbs-ol-wrap-li-marginBottom);\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=Breadcrumbs.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|