@box/blueprint-web 12.93.6 → 12.94.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { type BreadcrumbProps } from './types';
|
|
2
|
-
export declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<
|
|
2
|
+
export declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;
|
|
@@ -1,38 +1,77 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
|
-
import { FolderTree } from '@box/blueprint-web-assets/icons/Fill';
|
|
3
|
+
import { FolderTree, PointerRight } from '@box/blueprint-web-assets/icons/Fill';
|
|
4
4
|
import { Home } from '@box/blueprint-web-assets/icons/MediumFilled';
|
|
5
|
+
import { Link } from '../primitives/link/link.js';
|
|
6
|
+
import { Text } from '../text/text.js';
|
|
5
7
|
import styles from './breadcrumb.module.js';
|
|
6
8
|
|
|
7
9
|
const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
8
10
|
const {
|
|
11
|
+
crumbs,
|
|
9
12
|
rootIconAriaLabel,
|
|
10
13
|
rootIconVariant,
|
|
11
14
|
isInteractive = true,
|
|
12
15
|
size = 'medium',
|
|
13
16
|
truncationMethod = 'ellipsis',
|
|
17
|
+
onBreadcrumbClick,
|
|
14
18
|
...rest
|
|
15
19
|
} = props;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
children: "
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
20
|
+
const handleCrumbClick = id => () => {
|
|
21
|
+
if (onBreadcrumbClick) {
|
|
22
|
+
onBreadcrumbClick(id);
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
return (
|
|
26
|
+
// Add aria-label: breadcrumb https://jira.inside-box.net/browse/UXF-427
|
|
27
|
+
jsx("nav", {
|
|
28
|
+
ref: forwardedRef,
|
|
29
|
+
className: styles.breadcrumb,
|
|
30
|
+
...rest,
|
|
31
|
+
children: jsxs("ol", {
|
|
32
|
+
children: [rootIconVariant && jsxs("li", {
|
|
33
|
+
children: [rootIconVariant === 'home' ? jsx(Home, {
|
|
34
|
+
"aria-label": rootIconAriaLabel
|
|
35
|
+
}) : jsx(FolderTree, {
|
|
36
|
+
"aria-label": rootIconAriaLabel
|
|
37
|
+
}), rootIconVariant && jsx(PointerRight, {
|
|
38
|
+
className: styles.separator,
|
|
39
|
+
role: "presentation"
|
|
40
|
+
})]
|
|
41
|
+
}), crumbs?.map((crumb, index) => index < crumbs.length - 1 ?
|
|
42
|
+
// Crumb IDs are meant to be folder IDs, which are globally unique. Folder IDs can have collisions with File IDs.
|
|
43
|
+
jsxs("li", {
|
|
44
|
+
children: [isInteractive ?
|
|
45
|
+
// Add hover behavior https://jira.inside-box.net/browse/UXF-428
|
|
46
|
+
jsx(Link, {
|
|
47
|
+
className: styles.crumbInteractive,
|
|
48
|
+
inheritFont: true,
|
|
49
|
+
onClick: handleCrumbClick(crumb.id),
|
|
50
|
+
variant: "standalone",
|
|
51
|
+
children: crumb.name
|
|
52
|
+
}) : jsx(Text, {
|
|
53
|
+
as: "span",
|
|
54
|
+
children: crumb.name
|
|
55
|
+
}), jsx(PointerRight, {
|
|
56
|
+
className: styles.separator,
|
|
57
|
+
role: "presentation"
|
|
58
|
+
})]
|
|
59
|
+
}, crumb.id) : jsx("li", {
|
|
60
|
+
children: jsx(Link, {
|
|
61
|
+
"aria-current": "page",
|
|
62
|
+
className: styles.lastCrumb,
|
|
63
|
+
inheritFont: true,
|
|
64
|
+
variant: "standalone",
|
|
65
|
+
children: crumb.name
|
|
66
|
+
})
|
|
67
|
+
}, crumb.id)), jsx("li", {
|
|
68
|
+
children: jsxs("span", {
|
|
69
|
+
children: [size, " size breadcrumb with ", truncationMethod, " truncation"]
|
|
70
|
+
})
|
|
71
|
+
})]
|
|
72
|
+
})
|
|
73
|
+
})
|
|
74
|
+
);
|
|
36
75
|
});
|
|
37
76
|
Breadcrumb.displayName = 'Breadcrumb';
|
|
38
77
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"breadcrumb":"bp_breadcrumb_module_breadcrumb--
|
|
2
|
+
var styles = {"breadcrumb":"bp_breadcrumb_module_breadcrumb--f04e8","crumbInteractive":"bp_breadcrumb_module_crumbInteractive--f04e8","lastCrumb":"bp_breadcrumb_module_lastCrumb--f04e8","separator":"bp_breadcrumb_module_separator--f04e8"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,9 +1,19 @@
|
|
|
1
1
|
import { type RequireAllOrNone } from 'type-fest';
|
|
2
|
+
export type Crumb = {
|
|
3
|
+
/** Folder ID associated with the crumb. Passed to onBreadcrumbClick when the crumb is clicked. */
|
|
4
|
+
id: string;
|
|
5
|
+
/** Display text for the crumb, corresponds to the folder name */
|
|
6
|
+
name: string;
|
|
7
|
+
};
|
|
2
8
|
export type BreadcrumbProps = {
|
|
9
|
+
/** Array of breadcrumb items to display. */
|
|
10
|
+
crumbs: Crumb[];
|
|
3
11
|
/** Controls whether individual crumbs (items) and icons are interactive, or clickable. */
|
|
4
12
|
isInteractive?: boolean;
|
|
5
13
|
/** Controls the height and width of icons and crumbs. */
|
|
6
14
|
size?: 'xsmall' | 'small' | 'medium' | 'large';
|
|
15
|
+
/** Callback for breadcrumb click. Used to trigger navigation to the clicked folder. */
|
|
16
|
+
onBreadcrumbClick?: (id: string) => void;
|
|
7
17
|
/** Controls behavior when there are too many crumbs to display.
|
|
8
18
|
* Ellipsis shows the crumbs at the beginning and end, with an ellipsis icon in between.
|
|
9
19
|
* Folder shows only the last crumb, preceded by a folder tree icon.
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -1824,11 +1824,95 @@
|
|
|
1824
1824
|
.bp_base_badge_module_numericBadgeMoreDigits--c8c81{
|
|
1825
1825
|
padding:1px 3px;
|
|
1826
1826
|
}
|
|
1827
|
-
.
|
|
1827
|
+
.bp_link_module_link--3786a{
|
|
1828
|
+
color:var(--text-cta-link);
|
|
1829
|
+
}
|
|
1830
|
+
.bp_link_module_link--3786a:hover{
|
|
1831
|
+
color:var(--text-cta-link-hover);
|
|
1832
|
+
}
|
|
1833
|
+
.bp_link_module_link--3786a:active{
|
|
1834
|
+
color:var(--text-cta-link-pressed);
|
|
1835
|
+
}
|
|
1836
|
+
.bp_link_module_link--3786a:focus-visible{
|
|
1837
|
+
border-radius:var(--radius-05);
|
|
1838
|
+
color:var(--text-cta-link-hover);
|
|
1839
|
+
}
|
|
1840
|
+
.bp_link_module_link--3786a:focus-visible:focus-visible{
|
|
1841
|
+
box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
|
|
1842
|
+
outline:none;
|
|
1843
|
+
overflow:visible;
|
|
1844
|
+
}
|
|
1845
|
+
.bp_link_module_link--3786a:focus-visible:active{
|
|
1846
|
+
color:var(--text-cta-link-pressed);
|
|
1847
|
+
}
|
|
1848
|
+
.bp_link_module_link--3786a.bp_link_module_inheritFont--3786a{
|
|
1849
|
+
font:inherit;
|
|
1850
|
+
}
|
|
1851
|
+
.bp_link_module_link--3786a.bp_link_module_standalone--3786a{
|
|
1852
|
+
text-decoration:none;
|
|
1853
|
+
}
|
|
1854
|
+
.bp_link_module_link--3786a.bp_link_module_hasIcon--3786a{
|
|
1828
1855
|
align-items:center;
|
|
1856
|
+
display:inline-flex;
|
|
1857
|
+
gap:var(--space-1);
|
|
1858
|
+
}
|
|
1859
|
+
.bp_link_module_link--3786a .bp_link_module_icon--3786a{
|
|
1860
|
+
flex-shrink:0;
|
|
1861
|
+
}
|
|
1862
|
+
.bp_link_module_link--3786a .bp_link_module_icon--3786a *{
|
|
1863
|
+
fill:currentColor;
|
|
1864
|
+
}
|
|
1865
|
+
|
|
1866
|
+
.bp_link_module_link--3786a:where([data-modern=false]){
|
|
1867
|
+
font-family:var(--link-default-font-family);
|
|
1868
|
+
font-size:var(--link-default-font-size);
|
|
1869
|
+
font-weight:var(--link-default-font-weight);
|
|
1870
|
+
letter-spacing:var(--link-default-letter-spacing);
|
|
1871
|
+
line-height:var(--link-default-line-height);
|
|
1872
|
+
-webkit-text-decoration:var(--link-default-text-decoration);
|
|
1873
|
+
text-decoration:var(--link-default-text-decoration);
|
|
1874
|
+
text-transform:var(--link-default-text-case);
|
|
1875
|
+
}
|
|
1876
|
+
|
|
1877
|
+
.bp_link_module_link--3786a:where([data-modern=true]){
|
|
1878
|
+
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
1879
|
+
font-size:var(--bp-font-size-05);
|
|
1880
|
+
font-style:normal;
|
|
1881
|
+
font-weight:var(--bp-font-weight-regular);
|
|
1882
|
+
letter-spacing:var(--bp-font-letter-spacing-01);
|
|
1883
|
+
line-height:var(--bp-font-line-height-04);
|
|
1884
|
+
text-decoration-line:underline;
|
|
1885
|
+
-webkit-text-decoration-skip-ink:none;
|
|
1886
|
+
text-decoration-skip-ink:none;
|
|
1887
|
+
text-decoration-style:solid;
|
|
1888
|
+
text-decoration-thickness:auto;
|
|
1889
|
+
text-underline-offset:auto;
|
|
1890
|
+
}
|
|
1891
|
+
nav.bp_breadcrumb_module_breadcrumb--f04e8{
|
|
1892
|
+
align-items:center;
|
|
1893
|
+
color:var(--bp-text-text-on-light-tertiary);
|
|
1829
1894
|
display:flex;
|
|
1895
|
+
font-size:var(--bp-font-size-06);
|
|
1830
1896
|
gap:var(--bp-size-010);
|
|
1831
|
-
height:
|
|
1897
|
+
line-height:var(--bp-size-060);
|
|
1898
|
+
}
|
|
1899
|
+
nav.bp_breadcrumb_module_breadcrumb--f04e8 ol{
|
|
1900
|
+
list-style:none;
|
|
1901
|
+
}
|
|
1902
|
+
nav.bp_breadcrumb_module_breadcrumb--f04e8 li{
|
|
1903
|
+
display:inline;
|
|
1904
|
+
}
|
|
1905
|
+
nav.bp_breadcrumb_module_breadcrumb--f04e8 li .bp_breadcrumb_module_crumbInteractive--f04e8{
|
|
1906
|
+
color:inherit;
|
|
1907
|
+
}
|
|
1908
|
+
nav.bp_breadcrumb_module_breadcrumb--f04e8 li .bp_breadcrumb_module_lastCrumb--f04e8{
|
|
1909
|
+
color:var(--bp-text-text-on-light);
|
|
1910
|
+
}
|
|
1911
|
+
nav.bp_breadcrumb_module_breadcrumb--f04e8 li .bp_breadcrumb_module_separator--f04e8{
|
|
1912
|
+
height:var(--bp-size-030);
|
|
1913
|
+
margin-left:var(--bp-size-010);
|
|
1914
|
+
margin-right:var(--bp-size-010);
|
|
1915
|
+
width:var(--bp-size-030);
|
|
1832
1916
|
}
|
|
1833
1917
|
.bp_button_wrapper_module_buttonWrapper--b0897{
|
|
1834
1918
|
all:unset;
|
|
@@ -5563,70 +5647,6 @@
|
|
|
5563
5647
|
.bp_empty_state_module_emptyState--e2700.bp_empty_state_module_small--e2700 .bp_empty_state_module_body--e2700:not(:last-child){
|
|
5564
5648
|
margin-block-end:var(--space-4);
|
|
5565
5649
|
}
|
|
5566
|
-
.bp_link_module_link--3786a{
|
|
5567
|
-
color:var(--text-cta-link);
|
|
5568
|
-
}
|
|
5569
|
-
.bp_link_module_link--3786a:hover{
|
|
5570
|
-
color:var(--text-cta-link-hover);
|
|
5571
|
-
}
|
|
5572
|
-
.bp_link_module_link--3786a:active{
|
|
5573
|
-
color:var(--text-cta-link-pressed);
|
|
5574
|
-
}
|
|
5575
|
-
.bp_link_module_link--3786a:focus-visible{
|
|
5576
|
-
border-radius:var(--radius-05);
|
|
5577
|
-
color:var(--text-cta-link-hover);
|
|
5578
|
-
}
|
|
5579
|
-
.bp_link_module_link--3786a:focus-visible:focus-visible{
|
|
5580
|
-
box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
|
|
5581
|
-
outline:none;
|
|
5582
|
-
overflow:visible;
|
|
5583
|
-
}
|
|
5584
|
-
.bp_link_module_link--3786a:focus-visible:active{
|
|
5585
|
-
color:var(--text-cta-link-pressed);
|
|
5586
|
-
}
|
|
5587
|
-
.bp_link_module_link--3786a.bp_link_module_inheritFont--3786a{
|
|
5588
|
-
font:inherit;
|
|
5589
|
-
}
|
|
5590
|
-
.bp_link_module_link--3786a.bp_link_module_standalone--3786a{
|
|
5591
|
-
text-decoration:none;
|
|
5592
|
-
}
|
|
5593
|
-
.bp_link_module_link--3786a.bp_link_module_hasIcon--3786a{
|
|
5594
|
-
align-items:center;
|
|
5595
|
-
display:inline-flex;
|
|
5596
|
-
gap:var(--space-1);
|
|
5597
|
-
}
|
|
5598
|
-
.bp_link_module_link--3786a .bp_link_module_icon--3786a{
|
|
5599
|
-
flex-shrink:0;
|
|
5600
|
-
}
|
|
5601
|
-
.bp_link_module_link--3786a .bp_link_module_icon--3786a *{
|
|
5602
|
-
fill:currentColor;
|
|
5603
|
-
}
|
|
5604
|
-
|
|
5605
|
-
.bp_link_module_link--3786a:where([data-modern=false]){
|
|
5606
|
-
font-family:var(--link-default-font-family);
|
|
5607
|
-
font-size:var(--link-default-font-size);
|
|
5608
|
-
font-weight:var(--link-default-font-weight);
|
|
5609
|
-
letter-spacing:var(--link-default-letter-spacing);
|
|
5610
|
-
line-height:var(--link-default-line-height);
|
|
5611
|
-
-webkit-text-decoration:var(--link-default-text-decoration);
|
|
5612
|
-
text-decoration:var(--link-default-text-decoration);
|
|
5613
|
-
text-transform:var(--link-default-text-case);
|
|
5614
|
-
}
|
|
5615
|
-
|
|
5616
|
-
.bp_link_module_link--3786a:where([data-modern=true]){
|
|
5617
|
-
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
5618
|
-
font-size:var(--bp-font-size-05);
|
|
5619
|
-
font-style:normal;
|
|
5620
|
-
font-weight:var(--bp-font-weight-regular);
|
|
5621
|
-
letter-spacing:var(--bp-font-letter-spacing-01);
|
|
5622
|
-
line-height:var(--bp-font-line-height-04);
|
|
5623
|
-
text-decoration-line:underline;
|
|
5624
|
-
-webkit-text-decoration-skip-ink:none;
|
|
5625
|
-
text-decoration-skip-ink:none;
|
|
5626
|
-
text-decoration-style:solid;
|
|
5627
|
-
text-decoration-thickness:auto;
|
|
5628
|
-
text-underline-offset:auto;
|
|
5629
|
-
}
|
|
5630
5650
|
.bp_base_grid_list_item_module_smallList--51f74[data-modern=false]{
|
|
5631
5651
|
--small-list-gap:var(--space-2);
|
|
5632
5652
|
--small-list-padding:var(--space-1);
|