@trackunit/react-components 0.1.312 → 0.1.314
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/index.cjs.js
CHANGED
|
@@ -1390,14 +1390,6 @@ const BreadcrumbForLargeScreen = ({ dataTestId, breadcrumbItems }) => {
|
|
|
1390
1390
|
return (jsxRuntime.jsx("div", { className: cvaBreadcrumbForLargeScreen(), "data-testid": dataTestId, children: breadcrumbItems.map((item, index) => (jsxRuntime.jsx(BreadcrumbItem, { dataTestId: `BreadcrumbItem-${dataTestId}`, item: item }, `breadcrumbItem-${index}`))) }));
|
|
1391
1391
|
};
|
|
1392
1392
|
|
|
1393
|
-
/**
|
|
1394
|
-
* BreadcrumbForSmallScreen is a helper component that renders the breadcrumb items for small screens.
|
|
1395
|
-
*/
|
|
1396
|
-
const BreadcrumbForSmallScreen = ({ dataTestId, breadcrumbItems }) => {
|
|
1397
|
-
const lastBreadcrumbItem = breadcrumbItems.slice(-1);
|
|
1398
|
-
return (jsxRuntime.jsx("div", { "data-testid": dataTestId, children: lastBreadcrumbItem.map((item, index) => (jsxRuntime.jsx(BreadcrumbItem, { dataTestId: `breadcrumbItem-${dataTestId}`, item: item }, `breadcrumbItem-${index}`))) }));
|
|
1399
|
-
};
|
|
1400
|
-
|
|
1401
1393
|
/**
|
|
1402
1394
|
* BreadcrumbForMediumScreen is a helper component that renders the breadcrumb items for medium screens.
|
|
1403
1395
|
*/
|
|
@@ -1417,6 +1409,14 @@ const BreadcrumbForMediumScreen = ({ dataTestId, breadcrumbItems }) => {
|
|
|
1417
1409
|
return (jsxRuntime.jsx("div", { className: cvaBreadcrumbForMediumScreen({ expanded }), "data-testid": dataTestId, children: (!expanded && reducedArray.length !== 0 ? reducedArray : breadcrumbItems).map(item => (jsxRuntime.jsx(BreadcrumbItem, { dataTestId: `breadcrumbItem-${dataTestId}`, item: item }, `${item.props.label}-${uuid.v4()}`))) }));
|
|
1418
1410
|
};
|
|
1419
1411
|
|
|
1412
|
+
/**
|
|
1413
|
+
* BreadcrumbForSmallScreen is a helper component that renders the breadcrumb items for small screens.
|
|
1414
|
+
*/
|
|
1415
|
+
const BreadcrumbForSmallScreen = ({ dataTestId, breadcrumbItems }) => {
|
|
1416
|
+
const lastBreadcrumbItem = breadcrumbItems.slice(-1);
|
|
1417
|
+
return (jsxRuntime.jsx("div", { "data-testid": dataTestId, children: lastBreadcrumbItem.map((item, index) => (jsxRuntime.jsx(BreadcrumbItem, { dataTestId: `breadcrumbItem-${dataTestId}`, item: item }, `breadcrumbItem-${index}`))) }));
|
|
1418
|
+
};
|
|
1419
|
+
|
|
1420
1420
|
/**
|
|
1421
1421
|
* useBreadcrumbItemsToRender is a custom hook that takes an array of BreadcrumbItemProps and returns an array of React.ReactElement
|
|
1422
1422
|
*/
|
|
@@ -1424,7 +1424,7 @@ const useBreadcrumbItemsToRender = (breadcrumbItems) => {
|
|
|
1424
1424
|
const breadCrumbItemsToJSX = breadcrumbItems.map((item, index, array) => {
|
|
1425
1425
|
const isLast = index === array.length - 1;
|
|
1426
1426
|
if (!isLast) {
|
|
1427
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button, { asChild: true, size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx(reactRouter.Link, { to: item.to, children: item.label }) }), jsxRuntime.jsx(Icon, {
|
|
1427
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button, { asChild: true, size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx(reactRouter.Link, { to: item.to, children: item.label }) }), jsxRuntime.jsx(Icon, { className: "text-secondary-300", name: "Slash", size: "small" })] }));
|
|
1428
1428
|
}
|
|
1429
1429
|
else {
|
|
1430
1430
|
return (jsxRuntime.jsx(Text, { className: "text-nowrap", size: "small", children: item.label }));
|
package/index.esm.js
CHANGED
|
@@ -1358,14 +1358,6 @@ const BreadcrumbForLargeScreen = ({ dataTestId, breadcrumbItems }) => {
|
|
|
1358
1358
|
return (jsx("div", { className: cvaBreadcrumbForLargeScreen(), "data-testid": dataTestId, children: breadcrumbItems.map((item, index) => (jsx(BreadcrumbItem, { dataTestId: `BreadcrumbItem-${dataTestId}`, item: item }, `breadcrumbItem-${index}`))) }));
|
|
1359
1359
|
};
|
|
1360
1360
|
|
|
1361
|
-
/**
|
|
1362
|
-
* BreadcrumbForSmallScreen is a helper component that renders the breadcrumb items for small screens.
|
|
1363
|
-
*/
|
|
1364
|
-
const BreadcrumbForSmallScreen = ({ dataTestId, breadcrumbItems }) => {
|
|
1365
|
-
const lastBreadcrumbItem = breadcrumbItems.slice(-1);
|
|
1366
|
-
return (jsx("div", { "data-testid": dataTestId, children: lastBreadcrumbItem.map((item, index) => (jsx(BreadcrumbItem, { dataTestId: `breadcrumbItem-${dataTestId}`, item: item }, `breadcrumbItem-${index}`))) }));
|
|
1367
|
-
};
|
|
1368
|
-
|
|
1369
1361
|
/**
|
|
1370
1362
|
* BreadcrumbForMediumScreen is a helper component that renders the breadcrumb items for medium screens.
|
|
1371
1363
|
*/
|
|
@@ -1385,6 +1377,14 @@ const BreadcrumbForMediumScreen = ({ dataTestId, breadcrumbItems }) => {
|
|
|
1385
1377
|
return (jsx("div", { className: cvaBreadcrumbForMediumScreen({ expanded }), "data-testid": dataTestId, children: (!expanded && reducedArray.length !== 0 ? reducedArray : breadcrumbItems).map(item => (jsx(BreadcrumbItem, { dataTestId: `breadcrumbItem-${dataTestId}`, item: item }, `${item.props.label}-${v4()}`))) }));
|
|
1386
1378
|
};
|
|
1387
1379
|
|
|
1380
|
+
/**
|
|
1381
|
+
* BreadcrumbForSmallScreen is a helper component that renders the breadcrumb items for small screens.
|
|
1382
|
+
*/
|
|
1383
|
+
const BreadcrumbForSmallScreen = ({ dataTestId, breadcrumbItems }) => {
|
|
1384
|
+
const lastBreadcrumbItem = breadcrumbItems.slice(-1);
|
|
1385
|
+
return (jsx("div", { "data-testid": dataTestId, children: lastBreadcrumbItem.map((item, index) => (jsx(BreadcrumbItem, { dataTestId: `breadcrumbItem-${dataTestId}`, item: item }, `breadcrumbItem-${index}`))) }));
|
|
1386
|
+
};
|
|
1387
|
+
|
|
1388
1388
|
/**
|
|
1389
1389
|
* useBreadcrumbItemsToRender is a custom hook that takes an array of BreadcrumbItemProps and returns an array of React.ReactElement
|
|
1390
1390
|
*/
|
|
@@ -1392,7 +1392,7 @@ const useBreadcrumbItemsToRender = (breadcrumbItems) => {
|
|
|
1392
1392
|
const breadCrumbItemsToJSX = breadcrumbItems.map((item, index, array) => {
|
|
1393
1393
|
const isLast = index === array.length - 1;
|
|
1394
1394
|
if (!isLast) {
|
|
1395
|
-
return (jsxs(Fragment, { children: [jsx(Button, { asChild: true, size: "small", variant: "ghost-neutral", children: jsx(Link, { to: item.to, children: item.label }) }), jsx(Icon, {
|
|
1395
|
+
return (jsxs(Fragment, { children: [jsx(Button, { asChild: true, size: "small", variant: "ghost-neutral", children: jsx(Link, { to: item.to, children: item.label }) }), jsx(Icon, { className: "text-secondary-300", name: "Slash", size: "small" })] }));
|
|
1396
1396
|
}
|
|
1397
1397
|
else {
|
|
1398
1398
|
return (jsx(Text, { className: "text-nowrap", size: "small", children: item.label }));
|
package/package.json
CHANGED
/package/src/components/Breadcrumb/{BreadcumbForMediumScreen.d.ts → BreadcrumbForMediumScreen.d.ts}
RENAMED
|
File without changes
|