@dt-dds/react-breadcrumb 1.0.0-beta.69 → 1.0.0-beta.70
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 +8 -0
- package/dist/index.js +26 -237
- package/dist/index.mjs +15 -226
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
package/dist/index.js
CHANGED
|
@@ -52,7 +52,8 @@ __export(index_exports, {
|
|
|
52
52
|
module.exports = __toCommonJS(index_exports);
|
|
53
53
|
|
|
54
54
|
// src/Breadcrumb.tsx
|
|
55
|
-
var
|
|
55
|
+
var import_react3 = require("react");
|
|
56
|
+
var import_react_icon2 = require("@dt-dds/react-icon");
|
|
56
57
|
var import_react_tooltip = require("@dt-dds/react-tooltip");
|
|
57
58
|
|
|
58
59
|
// src/Breadcrumb.styled.ts
|
|
@@ -124,245 +125,33 @@ var ItemContainerStyled = import_styled.default.div`
|
|
|
124
125
|
`;
|
|
125
126
|
|
|
126
127
|
// src/hooks/useCollapsedBreadcrumb.tsx
|
|
127
|
-
var
|
|
128
|
-
var
|
|
128
|
+
var import_react = require("react");
|
|
129
|
+
var import_react2 = require("@emotion/react");
|
|
129
130
|
var import_react_core = require("@dt-dds/react-core");
|
|
130
|
-
|
|
131
|
-
// ../../dt-dds-react/core/assets/svgs/AllOut.tsx
|
|
131
|
+
var import_react_icon = require("@dt-dds/react-icon");
|
|
132
132
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
133
|
-
|
|
134
|
-
// ../../dt-dds-react/core/assets/svgs/Apis.tsx
|
|
135
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
136
|
-
|
|
137
|
-
// ../../dt-dds-react/core/assets/svgs/Apps.tsx
|
|
138
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
139
|
-
|
|
140
|
-
// ../../dt-dds-react/core/assets/svgs/ArrowDropDown.tsx
|
|
141
|
-
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
142
|
-
|
|
143
|
-
// ../../dt-dds-react/core/assets/svgs/ArrowDropUp.tsx
|
|
144
|
-
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
145
|
-
|
|
146
|
-
// ../../dt-dds-react/core/assets/svgs/ArrowLeft.tsx
|
|
147
|
-
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
148
|
-
|
|
149
|
-
// ../../dt-dds-react/core/assets/svgs/ArrowRight.tsx
|
|
150
|
-
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
151
|
-
var ArrowRight = (props) => {
|
|
152
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
153
|
-
"svg",
|
|
154
|
-
__spreadProps(__spreadValues({
|
|
155
|
-
fill: "none",
|
|
156
|
-
height: "12",
|
|
157
|
-
viewBox: "0 0 8 12",
|
|
158
|
-
width: "8",
|
|
159
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
160
|
-
}, props), {
|
|
161
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
162
|
-
"path",
|
|
163
|
-
{
|
|
164
|
-
clipRule: "evenodd",
|
|
165
|
-
d: "M6.99468 4.99507C7.18215 5.1826 7.28747 5.4369 7.28747 5.70207C7.28747 5.96723 7.18215 6.22154 6.99468 6.40907L2.40168 11.0021C2.21539 11.1846 1.96458 11.2863 1.70375 11.285C1.44292 11.2837 1.19315 11.1795 1.00871 10.995C0.824278 10.8106 0.72008 10.5608 0.718763 10.3C0.717445 10.0392 0.819115 9.78836 1.00168 9.60207L4.90168 5.70207L1.00168 1.80207C0.819115 1.61578 0.717445 1.36497 0.718763 1.10414C0.72008 0.843312 0.824278 0.593541 1.00871 0.409105C1.19315 0.224668 1.44292 0.120471 1.70375 0.119153C1.96458 0.117836 2.21539 0.219506 2.40168 0.402069L6.99468 4.99507Z",
|
|
166
|
-
fill: "currentColor",
|
|
167
|
-
fillRule: "evenodd"
|
|
168
|
-
}
|
|
169
|
-
)
|
|
170
|
-
})
|
|
171
|
-
);
|
|
172
|
-
};
|
|
173
|
-
var ArrowRight_default = ArrowRight;
|
|
174
|
-
|
|
175
|
-
// ../../dt-dds-react/core/assets/svgs/AvatarThumbnail.tsx
|
|
176
|
-
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
177
|
-
|
|
178
|
-
// ../../dt-dds-react/core/assets/svgs/Bolt.tsx
|
|
179
|
-
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
180
|
-
|
|
181
|
-
// ../../dt-dds-react/core/assets/svgs/CalendarMonth.tsx
|
|
182
|
-
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
183
|
-
|
|
184
|
-
// ../../dt-dds-react/core/assets/svgs/Cancel.tsx
|
|
185
|
-
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
186
|
-
|
|
187
|
-
// ../../dt-dds-react/core/assets/svgs/Check.tsx
|
|
188
|
-
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
189
|
-
|
|
190
|
-
// ../../dt-dds-react/core/assets/svgs/CheckCircle.tsx
|
|
191
|
-
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
192
|
-
|
|
193
|
-
// ../../dt-dds-react/core/assets/svgs/CheckCircleOutline.tsx
|
|
194
|
-
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
195
|
-
|
|
196
|
-
// ../../dt-dds-react/core/assets/svgs/Close.tsx
|
|
197
|
-
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
198
|
-
|
|
199
|
-
// ../../dt-dds-react/core/assets/svgs/Copy.tsx
|
|
200
|
-
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
201
|
-
|
|
202
|
-
// ../../dt-dds-react/core/assets/svgs/Delete.tsx
|
|
203
|
-
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
204
|
-
|
|
205
|
-
// ../../dt-dds-react/core/assets/svgs/Edit.tsx
|
|
206
|
-
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
207
|
-
|
|
208
|
-
// ../../dt-dds-react/core/assets/svgs/Email.tsx
|
|
209
|
-
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
210
|
-
|
|
211
|
-
// ../../dt-dds-react/core/assets/svgs/EmailSend.tsx
|
|
212
|
-
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
213
|
-
|
|
214
|
-
// ../../dt-dds-react/core/assets/svgs/Error.tsx
|
|
215
|
-
var import_react = require("@emotion/react");
|
|
216
|
-
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
217
|
-
|
|
218
|
-
// ../../dt-dds-react/core/assets/svgs/ErrorOutline.tsx
|
|
219
|
-
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
220
|
-
|
|
221
|
-
// ../../dt-dds-react/core/assets/svgs/EVStation.tsx
|
|
222
|
-
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
223
|
-
|
|
224
|
-
// ../../dt-dds-react/core/assets/svgs/Info.tsx
|
|
225
|
-
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
226
|
-
|
|
227
|
-
// ../../dt-dds-react/core/assets/svgs/InfoOutline.tsx
|
|
228
|
-
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
229
|
-
|
|
230
|
-
// ../../dt-dds-react/core/assets/svgs/Input.tsx
|
|
231
|
-
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
232
|
-
|
|
233
|
-
// ../../dt-dds-react/core/assets/svgs/Language.tsx
|
|
234
|
-
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
235
|
-
|
|
236
|
-
// ../../dt-dds-react/core/assets/svgs/LocationOn.tsx
|
|
237
|
-
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
238
|
-
|
|
239
|
-
// ../../dt-dds-react/core/assets/svgs/LocationSearching.tsx
|
|
240
|
-
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
241
|
-
|
|
242
|
-
// ../../dt-dds-react/core/assets/svgs/MenuCompact.tsx
|
|
243
|
-
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
244
|
-
|
|
245
|
-
// ../../dt-dds-react/core/assets/svgs/MenuExpand.tsx
|
|
246
|
-
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
247
|
-
|
|
248
|
-
// ../../dt-dds-react/core/assets/svgs/Menu.tsx
|
|
249
|
-
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
250
|
-
|
|
251
|
-
// ../../dt-dds-react/core/assets/svgs/MoreHorizontal.tsx
|
|
252
|
-
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
253
|
-
var MoreHorizontal = (props) => {
|
|
254
|
-
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
255
|
-
"svg",
|
|
256
|
-
__spreadProps(__spreadValues({
|
|
257
|
-
fill: "currentColor",
|
|
258
|
-
height: "24",
|
|
259
|
-
viewBox: "0 0 24 24",
|
|
260
|
-
width: "24",
|
|
261
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
262
|
-
}, props), {
|
|
263
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: "M6 10C4.9 10 4 10.9 4 12C4 13.1 4.9 14 6 14C7.1 14 8 13.1 8 12C8 10.9 7.1 10 6 10ZM18 10C16.9 10 16 10.9 16 12C16 13.1 16.9 14 18 14C19.1 14 20 13.1 20 12C20 10.9 19.1 10 18 10ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z" })
|
|
264
|
-
})
|
|
265
|
-
);
|
|
266
|
-
};
|
|
267
|
-
var MoreHorizontal_default = MoreHorizontal;
|
|
268
|
-
|
|
269
|
-
// ../../dt-dds-react/core/assets/svgs/MoreVertical.tsx
|
|
270
|
-
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
271
|
-
|
|
272
|
-
// ../../dt-dds-react/core/assets/svgs/NoData.tsx
|
|
273
|
-
var import_react2 = require("@emotion/react");
|
|
274
|
-
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
275
|
-
|
|
276
|
-
// ../../dt-dds-react/core/assets/svgs/NotFound.tsx
|
|
277
|
-
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
278
|
-
|
|
279
|
-
// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropDown.tsx
|
|
280
|
-
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
281
|
-
|
|
282
|
-
// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropUp.tsx
|
|
283
|
-
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
284
|
-
|
|
285
|
-
// ../../dt-dds-react/core/assets/svgs/PhoneOutlined.tsx
|
|
286
|
-
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
287
|
-
|
|
288
|
-
// ../../dt-dds-react/core/assets/svgs/Payments.tsx
|
|
289
|
-
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
290
|
-
|
|
291
|
-
// ../../dt-dds-react/core/assets/svgs/Products.tsx
|
|
292
|
-
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
293
|
-
|
|
294
|
-
// ../../dt-dds-react/core/assets/svgs/RemoveCircleOutline.tsx
|
|
295
|
-
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
296
|
-
|
|
297
|
-
// ../../dt-dds-react/core/assets/svgs/Share.tsx
|
|
298
|
-
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
299
|
-
|
|
300
|
-
// ../../dt-dds-react/core/assets/svgs/Signout.tsx
|
|
301
|
-
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
302
|
-
|
|
303
|
-
// ../../dt-dds-react/core/assets/svgs/Teams.tsx
|
|
304
|
-
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
305
|
-
|
|
306
|
-
// ../../dt-dds-react/core/assets/svgs/Timeline.tsx
|
|
307
|
-
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
308
|
-
|
|
309
|
-
// ../../dt-dds-react/core/assets/svgs/Topic.tsx
|
|
310
|
-
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
311
|
-
|
|
312
|
-
// ../../dt-dds-react/core/assets/svgs/UnfoldLess.tsx
|
|
313
|
-
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
314
|
-
|
|
315
|
-
// ../../dt-dds-react/core/assets/svgs/UnfoldMore.tsx
|
|
316
|
-
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
317
|
-
|
|
318
|
-
// ../../dt-dds-react/core/assets/svgs/Username.tsx
|
|
319
|
-
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
320
|
-
|
|
321
|
-
// ../../dt-dds-react/core/assets/svgs/ViewAgenda.tsx
|
|
322
|
-
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
323
|
-
|
|
324
|
-
// ../../dt-dds-react/core/assets/svgs/Visibility.tsx
|
|
325
|
-
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
326
|
-
|
|
327
|
-
// ../../dt-dds-react/core/assets/svgs/VisibilityOff.tsx
|
|
328
|
-
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
329
|
-
|
|
330
|
-
// ../../dt-dds-react/core/assets/svgs/WarningOutline.tsx
|
|
331
|
-
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
332
|
-
|
|
333
|
-
// ../../dt-dds-react/core/assets/svgs/Warning.tsx
|
|
334
|
-
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
335
|
-
|
|
336
|
-
// ../../dt-dds-react/core/assets/svgs/Wifi.tsx
|
|
337
|
-
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
338
|
-
|
|
339
|
-
// ../../dt-dds-react/core/assets/svgs/Settings.tsx
|
|
340
|
-
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
341
|
-
|
|
342
|
-
// src/hooks/useCollapsedBreadcrumb.tsx
|
|
343
|
-
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
344
133
|
var isBreadcrumbRefValid = (breadcrumbRef, breadcrumbListRef) => {
|
|
345
134
|
return !!breadcrumbRef.current && !!breadcrumbListRef.current;
|
|
346
135
|
};
|
|
347
136
|
var useCollapsedBreadcrumb = (children) => {
|
|
348
|
-
const breadcrumbRef = (0,
|
|
349
|
-
const breadcrumbListRef = (0,
|
|
350
|
-
const theme = (0,
|
|
137
|
+
const breadcrumbRef = (0, import_react.useRef)(null);
|
|
138
|
+
const breadcrumbListRef = (0, import_react.useRef)(null);
|
|
139
|
+
const theme = (0, import_react2.useTheme)();
|
|
351
140
|
const isDesktop = (0, import_react_core.useMedia)(`(min-width: ${theme.breakpoints.mq3}px)`);
|
|
352
|
-
const [visibleChildren, setVisibleChildren] = (0,
|
|
353
|
-
const breadcrumbResize = (0,
|
|
141
|
+
const [visibleChildren, setVisibleChildren] = (0, import_react.useState)(children);
|
|
142
|
+
const breadcrumbResize = (0, import_react.useCallback)(() => {
|
|
354
143
|
if (isDesktop || !isBreadcrumbRefValid(breadcrumbRef, breadcrumbListRef)) {
|
|
355
144
|
setVisibleChildren(children);
|
|
356
145
|
return;
|
|
357
146
|
}
|
|
358
|
-
const childrenArray =
|
|
147
|
+
const childrenArray = import_react.Children.toArray(children);
|
|
359
148
|
const isBreadcrumbsTooLarge = breadcrumbListRef.current.scrollWidth > breadcrumbRef.current.clientWidth;
|
|
360
149
|
if (isBreadcrumbsTooLarge) {
|
|
361
150
|
const lastChild = childrenArray[childrenArray.length - 1];
|
|
362
151
|
const modifiedChildren = [
|
|
363
152
|
childrenArray[0],
|
|
364
|
-
/* @__PURE__ */ (0,
|
|
365
|
-
(0,
|
|
153
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Breadcrumb.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icon.Icon, { code: "more_horiz" }) }, "more-icon"),
|
|
154
|
+
(0, import_react.isValidElement)(lastChild) ? (0, import_react.cloneElement)(lastChild, __spreadProps(__spreadValues({}, lastChild.props), {
|
|
366
155
|
style: { overflow: "hidden" }
|
|
367
156
|
})) : lastChild
|
|
368
157
|
];
|
|
@@ -374,28 +163,28 @@ var useCollapsedBreadcrumb = (children) => {
|
|
|
374
163
|
};
|
|
375
164
|
|
|
376
165
|
// src/Breadcrumb.tsx
|
|
377
|
-
var
|
|
166
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
378
167
|
var BREADCRUMB_CHARACTER_LIMIT = 30;
|
|
379
168
|
var Breadcrumb = ({
|
|
380
169
|
children,
|
|
381
170
|
separator = "slash"
|
|
382
171
|
}) => {
|
|
383
172
|
const { visibleChildren, breadcrumbRef, breadcrumbListRef } = useCollapsedBreadcrumb(children);
|
|
384
|
-
return /* @__PURE__ */ (0,
|
|
173
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
385
174
|
BreadcrumbStyled,
|
|
386
175
|
{
|
|
387
176
|
"aria-label": "Breadcrumb",
|
|
388
177
|
"data-testid": "breadcrumb",
|
|
389
178
|
ref: breadcrumbRef,
|
|
390
|
-
children: /* @__PURE__ */ (0,
|
|
179
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ListStyled, { ref: breadcrumbListRef, children: withSeparator(visibleChildren, separator) })
|
|
391
180
|
}
|
|
392
181
|
);
|
|
393
182
|
};
|
|
394
183
|
var BreadcrumbItem = ({ children, style }) => {
|
|
395
184
|
const { truncatedChildren, tooltip } = mapTruncateChildren(children);
|
|
396
|
-
return /* @__PURE__ */ (0,
|
|
397
|
-
/* @__PURE__ */ (0,
|
|
398
|
-
/* @__PURE__ */ (0,
|
|
185
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ItemStyled, { style, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_tooltip.Tooltip, { style: { overflow: "hidden" }, children: [
|
|
186
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ItemContainerStyled, { children: truncatedChildren }),
|
|
187
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_tooltip.Tooltip.Content, { children: tooltip })
|
|
399
188
|
] }) });
|
|
400
189
|
};
|
|
401
190
|
var truncateText = (text) => {
|
|
@@ -407,15 +196,15 @@ var truncateText = (text) => {
|
|
|
407
196
|
var mapTruncateChildren = (children) => {
|
|
408
197
|
let tooltip = "";
|
|
409
198
|
return {
|
|
410
|
-
truncatedChildren:
|
|
199
|
+
truncatedChildren: import_react3.Children.map(children, (child) => {
|
|
411
200
|
if (typeof child === "string") {
|
|
412
201
|
const truncatedText = truncateText(child);
|
|
413
202
|
tooltip = truncatedText !== child ? child : "";
|
|
414
203
|
return truncatedText;
|
|
415
|
-
} else if ((0,
|
|
204
|
+
} else if ((0, import_react3.isValidElement)(child)) {
|
|
416
205
|
const { truncatedChildren, tooltip: childTooltip } = mapTruncateChildren(child.props.children);
|
|
417
206
|
tooltip = childTooltip;
|
|
418
|
-
return (0,
|
|
207
|
+
return (0, import_react3.cloneElement)(child, __spreadProps(__spreadValues({}, child.props), {
|
|
419
208
|
children: truncatedChildren
|
|
420
209
|
}));
|
|
421
210
|
} else {
|
|
@@ -427,11 +216,11 @@ var mapTruncateChildren = (children) => {
|
|
|
427
216
|
};
|
|
428
217
|
var withSeparator = (children, separator) => {
|
|
429
218
|
const addSeparator = () => ({
|
|
430
|
-
slash: /* @__PURE__ */ (0,
|
|
431
|
-
arrow: /* @__PURE__ */ (0,
|
|
219
|
+
slash: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "/" }),
|
|
220
|
+
arrow: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_icon2.Icon, { code: "arrow_forward_ios", size: "extra-small" })
|
|
432
221
|
})[separator];
|
|
433
|
-
const isLastBreadcrumb = (index) =>
|
|
434
|
-
return
|
|
222
|
+
const isLastBreadcrumb = (index) => import_react3.Children.count(children) - 1 === index;
|
|
223
|
+
return import_react3.Children.map(children, (child, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
435
224
|
child,
|
|
436
225
|
!isLastBreadcrumb(index) && addSeparator()
|
|
437
226
|
] }));
|
package/dist/index.mjs
CHANGED
|
@@ -20,6 +20,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
20
20
|
|
|
21
21
|
// src/Breadcrumb.tsx
|
|
22
22
|
import { Children as Children2, cloneElement as cloneElement2, isValidElement as isValidElement2 } from "react";
|
|
23
|
+
import { Icon as Icon2 } from "@dt-dds/react-icon";
|
|
23
24
|
import { Tooltip } from "@dt-dds/react-tooltip";
|
|
24
25
|
|
|
25
26
|
// src/Breadcrumb.styled.ts
|
|
@@ -99,229 +100,17 @@ import {
|
|
|
99
100
|
useRef,
|
|
100
101
|
useState
|
|
101
102
|
} from "react";
|
|
102
|
-
import { useTheme as useTheme3 } from "@emotion/react";
|
|
103
|
-
import { useDebounceResize, useMedia } from "@dt-dds/react-core";
|
|
104
|
-
|
|
105
|
-
// ../../dt-dds-react/core/assets/svgs/AllOut.tsx
|
|
106
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
107
|
-
|
|
108
|
-
// ../../dt-dds-react/core/assets/svgs/Apis.tsx
|
|
109
|
-
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
110
|
-
|
|
111
|
-
// ../../dt-dds-react/core/assets/svgs/Apps.tsx
|
|
112
|
-
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
113
|
-
|
|
114
|
-
// ../../dt-dds-react/core/assets/svgs/ArrowDropDown.tsx
|
|
115
|
-
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
116
|
-
|
|
117
|
-
// ../../dt-dds-react/core/assets/svgs/ArrowDropUp.tsx
|
|
118
|
-
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
119
|
-
|
|
120
|
-
// ../../dt-dds-react/core/assets/svgs/ArrowLeft.tsx
|
|
121
|
-
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
122
|
-
|
|
123
|
-
// ../../dt-dds-react/core/assets/svgs/ArrowRight.tsx
|
|
124
|
-
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
125
|
-
var ArrowRight = (props) => {
|
|
126
|
-
return /* @__PURE__ */ jsx7(
|
|
127
|
-
"svg",
|
|
128
|
-
__spreadProps(__spreadValues({
|
|
129
|
-
fill: "none",
|
|
130
|
-
height: "12",
|
|
131
|
-
viewBox: "0 0 8 12",
|
|
132
|
-
width: "8",
|
|
133
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
134
|
-
}, props), {
|
|
135
|
-
children: /* @__PURE__ */ jsx7(
|
|
136
|
-
"path",
|
|
137
|
-
{
|
|
138
|
-
clipRule: "evenodd",
|
|
139
|
-
d: "M6.99468 4.99507C7.18215 5.1826 7.28747 5.4369 7.28747 5.70207C7.28747 5.96723 7.18215 6.22154 6.99468 6.40907L2.40168 11.0021C2.21539 11.1846 1.96458 11.2863 1.70375 11.285C1.44292 11.2837 1.19315 11.1795 1.00871 10.995C0.824278 10.8106 0.72008 10.5608 0.718763 10.3C0.717445 10.0392 0.819115 9.78836 1.00168 9.60207L4.90168 5.70207L1.00168 1.80207C0.819115 1.61578 0.717445 1.36497 0.718763 1.10414C0.72008 0.843312 0.824278 0.593541 1.00871 0.409105C1.19315 0.224668 1.44292 0.120471 1.70375 0.119153C1.96458 0.117836 2.21539 0.219506 2.40168 0.402069L6.99468 4.99507Z",
|
|
140
|
-
fill: "currentColor",
|
|
141
|
-
fillRule: "evenodd"
|
|
142
|
-
}
|
|
143
|
-
)
|
|
144
|
-
})
|
|
145
|
-
);
|
|
146
|
-
};
|
|
147
|
-
var ArrowRight_default = ArrowRight;
|
|
148
|
-
|
|
149
|
-
// ../../dt-dds-react/core/assets/svgs/AvatarThumbnail.tsx
|
|
150
|
-
import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
151
|
-
|
|
152
|
-
// ../../dt-dds-react/core/assets/svgs/Bolt.tsx
|
|
153
|
-
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
154
|
-
|
|
155
|
-
// ../../dt-dds-react/core/assets/svgs/CalendarMonth.tsx
|
|
156
|
-
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
157
|
-
|
|
158
|
-
// ../../dt-dds-react/core/assets/svgs/Cancel.tsx
|
|
159
|
-
import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
160
|
-
|
|
161
|
-
// ../../dt-dds-react/core/assets/svgs/Check.tsx
|
|
162
|
-
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
163
|
-
|
|
164
|
-
// ../../dt-dds-react/core/assets/svgs/CheckCircle.tsx
|
|
165
|
-
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
166
|
-
|
|
167
|
-
// ../../dt-dds-react/core/assets/svgs/CheckCircleOutline.tsx
|
|
168
|
-
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
169
|
-
|
|
170
|
-
// ../../dt-dds-react/core/assets/svgs/Close.tsx
|
|
171
|
-
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
172
|
-
|
|
173
|
-
// ../../dt-dds-react/core/assets/svgs/Copy.tsx
|
|
174
|
-
import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
175
|
-
|
|
176
|
-
// ../../dt-dds-react/core/assets/svgs/Delete.tsx
|
|
177
|
-
import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
178
|
-
|
|
179
|
-
// ../../dt-dds-react/core/assets/svgs/Edit.tsx
|
|
180
|
-
import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
181
|
-
|
|
182
|
-
// ../../dt-dds-react/core/assets/svgs/Email.tsx
|
|
183
|
-
import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
184
|
-
|
|
185
|
-
// ../../dt-dds-react/core/assets/svgs/EmailSend.tsx
|
|
186
|
-
import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
187
|
-
|
|
188
|
-
// ../../dt-dds-react/core/assets/svgs/Error.tsx
|
|
189
103
|
import { useTheme } from "@emotion/react";
|
|
190
|
-
import {
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
194
|
-
|
|
195
|
-
// ../../dt-dds-react/core/assets/svgs/EVStation.tsx
|
|
196
|
-
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
197
|
-
|
|
198
|
-
// ../../dt-dds-react/core/assets/svgs/Info.tsx
|
|
199
|
-
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
200
|
-
|
|
201
|
-
// ../../dt-dds-react/core/assets/svgs/InfoOutline.tsx
|
|
202
|
-
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
203
|
-
|
|
204
|
-
// ../../dt-dds-react/core/assets/svgs/Input.tsx
|
|
205
|
-
import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
206
|
-
|
|
207
|
-
// ../../dt-dds-react/core/assets/svgs/Language.tsx
|
|
208
|
-
import { jsx as jsx27 } from "react/jsx-runtime";
|
|
209
|
-
|
|
210
|
-
// ../../dt-dds-react/core/assets/svgs/LocationOn.tsx
|
|
211
|
-
import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
212
|
-
|
|
213
|
-
// ../../dt-dds-react/core/assets/svgs/LocationSearching.tsx
|
|
214
|
-
import { jsx as jsx29 } from "react/jsx-runtime";
|
|
215
|
-
|
|
216
|
-
// ../../dt-dds-react/core/assets/svgs/MenuCompact.tsx
|
|
217
|
-
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
218
|
-
|
|
219
|
-
// ../../dt-dds-react/core/assets/svgs/MenuExpand.tsx
|
|
220
|
-
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
221
|
-
|
|
222
|
-
// ../../dt-dds-react/core/assets/svgs/Menu.tsx
|
|
223
|
-
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
224
|
-
|
|
225
|
-
// ../../dt-dds-react/core/assets/svgs/MoreHorizontal.tsx
|
|
226
|
-
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
227
|
-
var MoreHorizontal = (props) => {
|
|
228
|
-
return /* @__PURE__ */ jsx33(
|
|
229
|
-
"svg",
|
|
230
|
-
__spreadProps(__spreadValues({
|
|
231
|
-
fill: "currentColor",
|
|
232
|
-
height: "24",
|
|
233
|
-
viewBox: "0 0 24 24",
|
|
234
|
-
width: "24",
|
|
235
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
236
|
-
}, props), {
|
|
237
|
-
children: /* @__PURE__ */ jsx33("path", { d: "M6 10C4.9 10 4 10.9 4 12C4 13.1 4.9 14 6 14C7.1 14 8 13.1 8 12C8 10.9 7.1 10 6 10ZM18 10C16.9 10 16 10.9 16 12C16 13.1 16.9 14 18 14C19.1 14 20 13.1 20 12C20 10.9 19.1 10 18 10ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z" })
|
|
238
|
-
})
|
|
239
|
-
);
|
|
240
|
-
};
|
|
241
|
-
var MoreHorizontal_default = MoreHorizontal;
|
|
242
|
-
|
|
243
|
-
// ../../dt-dds-react/core/assets/svgs/MoreVertical.tsx
|
|
244
|
-
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
245
|
-
|
|
246
|
-
// ../../dt-dds-react/core/assets/svgs/NoData.tsx
|
|
247
|
-
import { useTheme as useTheme2 } from "@emotion/react";
|
|
248
|
-
import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
249
|
-
|
|
250
|
-
// ../../dt-dds-react/core/assets/svgs/NotFound.tsx
|
|
251
|
-
import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
252
|
-
|
|
253
|
-
// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropDown.tsx
|
|
254
|
-
import { jsx as jsx37 } from "react/jsx-runtime";
|
|
255
|
-
|
|
256
|
-
// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropUp.tsx
|
|
257
|
-
import { jsx as jsx38 } from "react/jsx-runtime";
|
|
258
|
-
|
|
259
|
-
// ../../dt-dds-react/core/assets/svgs/PhoneOutlined.tsx
|
|
260
|
-
import { jsx as jsx39 } from "react/jsx-runtime";
|
|
261
|
-
|
|
262
|
-
// ../../dt-dds-react/core/assets/svgs/Payments.tsx
|
|
263
|
-
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
264
|
-
|
|
265
|
-
// ../../dt-dds-react/core/assets/svgs/Products.tsx
|
|
266
|
-
import { jsx as jsx41, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
267
|
-
|
|
268
|
-
// ../../dt-dds-react/core/assets/svgs/RemoveCircleOutline.tsx
|
|
269
|
-
import { jsx as jsx42 } from "react/jsx-runtime";
|
|
270
|
-
|
|
271
|
-
// ../../dt-dds-react/core/assets/svgs/Share.tsx
|
|
272
|
-
import { jsx as jsx43, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
273
|
-
|
|
274
|
-
// ../../dt-dds-react/core/assets/svgs/Signout.tsx
|
|
275
|
-
import { jsx as jsx44 } from "react/jsx-runtime";
|
|
276
|
-
|
|
277
|
-
// ../../dt-dds-react/core/assets/svgs/Teams.tsx
|
|
278
|
-
import { jsx as jsx45, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
279
|
-
|
|
280
|
-
// ../../dt-dds-react/core/assets/svgs/Timeline.tsx
|
|
281
|
-
import { jsx as jsx46, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
282
|
-
|
|
283
|
-
// ../../dt-dds-react/core/assets/svgs/Topic.tsx
|
|
284
|
-
import { jsx as jsx47, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
285
|
-
|
|
286
|
-
// ../../dt-dds-react/core/assets/svgs/UnfoldLess.tsx
|
|
287
|
-
import { jsx as jsx48 } from "react/jsx-runtime";
|
|
288
|
-
|
|
289
|
-
// ../../dt-dds-react/core/assets/svgs/UnfoldMore.tsx
|
|
290
|
-
import { jsx as jsx49 } from "react/jsx-runtime";
|
|
291
|
-
|
|
292
|
-
// ../../dt-dds-react/core/assets/svgs/Username.tsx
|
|
293
|
-
import { jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
294
|
-
|
|
295
|
-
// ../../dt-dds-react/core/assets/svgs/ViewAgenda.tsx
|
|
296
|
-
import { jsx as jsx51, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
297
|
-
|
|
298
|
-
// ../../dt-dds-react/core/assets/svgs/Visibility.tsx
|
|
299
|
-
import { jsx as jsx52, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
300
|
-
|
|
301
|
-
// ../../dt-dds-react/core/assets/svgs/VisibilityOff.tsx
|
|
302
|
-
import { jsx as jsx53, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
303
|
-
|
|
304
|
-
// ../../dt-dds-react/core/assets/svgs/WarningOutline.tsx
|
|
305
|
-
import { jsx as jsx54 } from "react/jsx-runtime";
|
|
306
|
-
|
|
307
|
-
// ../../dt-dds-react/core/assets/svgs/Warning.tsx
|
|
308
|
-
import { jsx as jsx55 } from "react/jsx-runtime";
|
|
309
|
-
|
|
310
|
-
// ../../dt-dds-react/core/assets/svgs/Wifi.tsx
|
|
311
|
-
import { jsx as jsx56 } from "react/jsx-runtime";
|
|
312
|
-
|
|
313
|
-
// ../../dt-dds-react/core/assets/svgs/Settings.tsx
|
|
314
|
-
import { jsx as jsx57 } from "react/jsx-runtime";
|
|
315
|
-
|
|
316
|
-
// src/hooks/useCollapsedBreadcrumb.tsx
|
|
317
|
-
import { jsx as jsx58 } from "react/jsx-runtime";
|
|
104
|
+
import { useDebounceResize, useMedia } from "@dt-dds/react-core";
|
|
105
|
+
import { Icon } from "@dt-dds/react-icon";
|
|
106
|
+
import { jsx } from "react/jsx-runtime";
|
|
318
107
|
var isBreadcrumbRefValid = (breadcrumbRef, breadcrumbListRef) => {
|
|
319
108
|
return !!breadcrumbRef.current && !!breadcrumbListRef.current;
|
|
320
109
|
};
|
|
321
110
|
var useCollapsedBreadcrumb = (children) => {
|
|
322
111
|
const breadcrumbRef = useRef(null);
|
|
323
112
|
const breadcrumbListRef = useRef(null);
|
|
324
|
-
const theme =
|
|
113
|
+
const theme = useTheme();
|
|
325
114
|
const isDesktop = useMedia(`(min-width: ${theme.breakpoints.mq3}px)`);
|
|
326
115
|
const [visibleChildren, setVisibleChildren] = useState(children);
|
|
327
116
|
const breadcrumbResize = useCallback(() => {
|
|
@@ -335,7 +124,7 @@ var useCollapsedBreadcrumb = (children) => {
|
|
|
335
124
|
const lastChild = childrenArray[childrenArray.length - 1];
|
|
336
125
|
const modifiedChildren = [
|
|
337
126
|
childrenArray[0],
|
|
338
|
-
/* @__PURE__ */
|
|
127
|
+
/* @__PURE__ */ jsx(Breadcrumb.Item, { children: /* @__PURE__ */ jsx(Icon, { code: "more_horiz" }) }, "more-icon"),
|
|
339
128
|
isValidElement(lastChild) ? cloneElement(lastChild, __spreadProps(__spreadValues({}, lastChild.props), {
|
|
340
129
|
style: { overflow: "hidden" }
|
|
341
130
|
})) : lastChild
|
|
@@ -348,28 +137,28 @@ var useCollapsedBreadcrumb = (children) => {
|
|
|
348
137
|
};
|
|
349
138
|
|
|
350
139
|
// src/Breadcrumb.tsx
|
|
351
|
-
import { Fragment, jsx as
|
|
140
|
+
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
352
141
|
var BREADCRUMB_CHARACTER_LIMIT = 30;
|
|
353
142
|
var Breadcrumb = ({
|
|
354
143
|
children,
|
|
355
144
|
separator = "slash"
|
|
356
145
|
}) => {
|
|
357
146
|
const { visibleChildren, breadcrumbRef, breadcrumbListRef } = useCollapsedBreadcrumb(children);
|
|
358
|
-
return /* @__PURE__ */
|
|
147
|
+
return /* @__PURE__ */ jsx2(
|
|
359
148
|
BreadcrumbStyled,
|
|
360
149
|
{
|
|
361
150
|
"aria-label": "Breadcrumb",
|
|
362
151
|
"data-testid": "breadcrumb",
|
|
363
152
|
ref: breadcrumbRef,
|
|
364
|
-
children: /* @__PURE__ */
|
|
153
|
+
children: /* @__PURE__ */ jsx2(ListStyled, { ref: breadcrumbListRef, children: withSeparator(visibleChildren, separator) })
|
|
365
154
|
}
|
|
366
155
|
);
|
|
367
156
|
};
|
|
368
157
|
var BreadcrumbItem = ({ children, style }) => {
|
|
369
158
|
const { truncatedChildren, tooltip } = mapTruncateChildren(children);
|
|
370
|
-
return /* @__PURE__ */
|
|
371
|
-
/* @__PURE__ */
|
|
372
|
-
/* @__PURE__ */
|
|
159
|
+
return /* @__PURE__ */ jsx2(ItemStyled, { style, children: /* @__PURE__ */ jsxs(Tooltip, { style: { overflow: "hidden" }, children: [
|
|
160
|
+
/* @__PURE__ */ jsx2(ItemContainerStyled, { children: truncatedChildren }),
|
|
161
|
+
/* @__PURE__ */ jsx2(Tooltip.Content, { children: tooltip })
|
|
373
162
|
] }) });
|
|
374
163
|
};
|
|
375
164
|
var truncateText = (text) => {
|
|
@@ -401,11 +190,11 @@ var mapTruncateChildren = (children) => {
|
|
|
401
190
|
};
|
|
402
191
|
var withSeparator = (children, separator) => {
|
|
403
192
|
const addSeparator = () => ({
|
|
404
|
-
slash: /* @__PURE__ */
|
|
405
|
-
arrow: /* @__PURE__ */
|
|
193
|
+
slash: /* @__PURE__ */ jsx2("span", { children: "/" }),
|
|
194
|
+
arrow: /* @__PURE__ */ jsx2(Icon2, { code: "arrow_forward_ios", size: "extra-small" })
|
|
406
195
|
})[separator];
|
|
407
196
|
const isLastBreadcrumb = (index) => Children2.count(children) - 1 === index;
|
|
408
|
-
return Children2.map(children, (child, index) => /* @__PURE__ */
|
|
197
|
+
return Children2.map(children, (child, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
409
198
|
child,
|
|
410
199
|
!isLastBreadcrumb(index) && addSeparator()
|
|
411
200
|
] }));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dt-dds/react-breadcrumb",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.70",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": "./dist/index.js"
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@dt-dds/react-core": "1.0.0-beta.57",
|
|
24
|
-
"@dt-dds/react-tooltip": "1.0.0-beta.
|
|
24
|
+
"@dt-dds/react-tooltip": "1.0.0-beta.67",
|
|
25
25
|
"@dt-dds/react-icon": "1.0.0-beta.60",
|
|
26
26
|
"@dt-dds/themes": "1.0.0-beta.12"
|
|
27
27
|
},
|