@ag.ds-next/breadcrumbs - npm Package Compare versions

Comparing version 13.0.0 to 14.0.0

CHANGELOG.md

 # @ag.ds-next/breadcrumbs
 
+## 14.0.0
+
+### Minor Changes
+
+- 7a61751d6: Added mobile variant which shows a link to the immediate parent.
+
+### Patch Changes
+
+- Updated dependencies [aad2cb62d]
+- Updated dependencies [aad2cb62d]
+- Updated dependencies [5495984f4]
+- Updated dependencies [931a7e7a2]
+  - @ag.ds-next/box@7.0.0
+  - @ag.ds-next/core@4.0.0
+  - @ag.ds-next/icon@11.0.0
+  - @ag.ds-next/text-link@6.0.0
+  - @ag.ds-next/text@10.0.0
+
 ## 13.0.0
@@ -4,0 +22,0 @@

dist/ag.ds-next-breadcrumbs.cjs.dev.js

@@ -7,11 +7,42 @@ 'use strict';
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var react = require('react');
 var a11y = require('@ag.ds-next/a11y');
-var icon = require('@ag.ds-next/icon');
+var react = require('@emotion/react');
+var box = require('@ag.ds-next/box');
+var core = require('@ag.ds-next/core');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-require('@emotion/react');
-var box = require('@ag.ds-next/box');
 var text = require('@ag.ds-next/text');
 var textLink = require('@ag.ds-next/text-link');
+var icon = require('@ag.ds-next/icon');
 
+var BreadcrumbsContainer = function BreadcrumbsContainer(_ref) {
+  var _css2;
+
+  var children = _ref.children,
+      ariaLabel = _ref['aria-label'];
+  return jsxRuntime.jsx("nav", {
+    "aria-label": ariaLabel,
+    children: jsxRuntime.jsx(box.Flex, {
+      as: "ol",
+      gap: 0.5,
+      alignItems: "center",
+      flexWrap: "wrap",
+      css: /*#__PURE__*/react.css((_css2 = {}, _defineProperty(_css2, core.tokens.mediaQuery.min.sm, {
+        'li:first-of-type > svg': {
+          display: 'none'
+        }
+      }), _defineProperty(_css2, core.tokens.mediaQuery.max.xs, {
+        // In mobile, hide all items except the second last item
+        'li:not(:nth-last-of-type(2))': {
+          display: 'none'
+        },
+        // In mobile, rotate the `BreadcrumbsDivider` icon
+        'li > svg': {
+          transform: 'rotate(180deg)'
+        }
+      }), _css2), process.env.NODE_ENV === "production" ? "" : ";label:BreadcrumbsContainer;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJyZWFkY3J1bWJzQ29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQkciLCJmaWxlIjoiQnJlYWRjcnVtYnNDb250YWluZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBQcm9wc1dpdGhDaGlsZHJlbiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IEZsZXggfSBmcm9tICdAYWcuZHMtbmV4dC9ib3gnO1xuaW1wb3J0IHsgdG9rZW5zIH0gZnJvbSAnQGFnLmRzLW5leHQvY29yZSc7XG5cbmV4cG9ydCB0eXBlIEJyZWFkY3J1bWJzQ29udGFpbmVyUHJvcHMgPSBQcm9wc1dpdGhDaGlsZHJlbjx7XG5cdCdhcmlhLWxhYmVsJzogc3RyaW5nO1xufT47XG5cbmV4cG9ydCBjb25zdCBCcmVhZGNydW1ic0NvbnRhaW5lciA9ICh7XG5cdGNoaWxkcmVuLFxuXHQnYXJpYS1sYWJlbCc6IGFyaWFMYWJlbCxcbn06IEJyZWFkY3J1bWJzQ29udGFpbmVyUHJvcHMpID0+IChcblx0PG5hdiBhcmlhLWxhYmVsPXthcmlhTGFiZWx9PlxuXHRcdDxGbGV4XG5cdFx0XHRhcz1cIm9sXCJcblx0XHRcdGdhcD17MC41fVxuXHRcdFx0YWxpZ25JdGVtcz1cImNlbnRlclwiXG5cdFx0XHRmbGV4V3JhcD1cIndyYXBcIlxuXHRcdFx0Y3NzPXt7XG5cdFx0XHRcdC8vIEluIGRlc2t0b3AsIGhpZGUgdGhlIGBCcmVhZGNydW1ic0RpdmlkZXJgIGZyb20gdGhlIGZpcnN0IGl0ZW1cblx0XHRcdFx0W3Rva2Vucy5tZWRpYVF1ZXJ5Lm1pbi5zbV06IHtcblx0XHRcdFx0XHQnbGk6Zmlyc3Qtb2YtdHlwZSA+IHN2Zyc6IHtcblx0XHRcdFx0XHRcdGRpc3BsYXk6ICdub25lJyxcblx0XHRcdFx0XHR9LFxuXHRcdFx0XHR9LFxuXHRcdFx0XHRbdG9rZW5zLm1lZGlhUXVlcnkubWF4LnhzXToge1xuXHRcdFx0XHRcdC8vIEluIG1vYmlsZSwgaGlkZSBhbGwgaXRlbXMgZXhjZXB0IHRoZSBzZWNvbmQgbGFzdCBpdGVtXG5cdFx0XHRcdFx0J2xpOm5vdCg6bnRoLWxhc3Qtb2YtdHlwZSgyKSknOiB7XG5cdFx0XHRcdFx0XHRkaXNwbGF5OiAnbm9uZScsXG5cdFx0XHRcdFx0fSxcblx0XHRcdFx0XHQvLyBJbiBtb2JpbGUsIHJvdGF0ZSB0aGUgYEJyZWFkY3J1bWJzRGl2aWRlcmAgaWNvblxuXHRcdFx0XHRcdCdsaSA+IHN2Zyc6IHtcblx0XHRcdFx0XHRcdHRyYW5zZm9ybTogJ3JvdGF0ZSgxODBkZWcpJyxcblx0XHRcdFx0XHR9LFxuXHRcdFx0XHR9LFxuXHRcdFx0fX1cblx0XHQ+XG5cdFx0XHR7Y2hpbGRyZW59XG5cdFx0PC9GbGV4PlxuXHQ8L25hdj5cbik7XG4iXX0= */"),
+      children: children
+    })
+  });
+};
+
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
@@ -37,17 +68,2 @@
 
-var BreadcrumbsContainer = function BreadcrumbsContainer(_ref) {
-  var children = _ref.children,
-      ariaLabel = _ref['aria-label'];
-  return jsxRuntime.jsx("nav", {
-    "aria-label": ariaLabel,
-    children: jsxRuntime.jsx(box.Flex, {
-      as: "ol",
-      gap: 0.5,
-      alignItems: "center",
-      flexWrap: "wrap",
-      children: children
-    })
-  });
-};
-
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -59,7 +75,9 @@
       href = props.href;
-  return jsxRuntime.jsx(box.Box, {
+  return jsxRuntime.jsxs(box.Flex, {
     as: "li",
-    children: href ? jsxRuntime.jsx(textLink.TextLink, _objectSpread$1({}, props)) : jsxRuntime.jsx(text.Text, {
+    alignItems: "center",
+    gap: 0.5,
+    children: [jsxRuntime.jsx(BreadcrumbsDivider, {}), href ? jsxRuntime.jsx(textLink.TextLink, _objectSpread$1({}, props)) : jsxRuntime.jsx(text.Text, {
       children: children
-    })
+    })]
   });
@@ -83,9 +101,7 @@ };
 
-      return jsxRuntime.jsxs(react.Fragment, {
-        children: [index == 0 ? null : jsxRuntime.jsx(BreadcrumbsDivider, {}), jsxRuntime.jsxs(BreadcrumbsItem, _objectSpread(_objectSpread({}, props), {}, {
-          children: [label, index === links.length - 1 ? jsxRuntime.jsx(a11y.VisuallyHidden, {
-            children: " (current page)"
-          }) : null]
-        }))]
-      }, index);
+      return jsxRuntime.jsxs(BreadcrumbsItem, _objectSpread(_objectSpread({}, props), {}, {
+        children: [label, index === links.length - 1 ? jsxRuntime.jsx(a11y.VisuallyHidden, {
+          children: " (current page)"
+        }) : null]
+      }), index);
     })
@@ -92,0 +108,0 @@ });

dist/ag.ds-next-breadcrumbs.cjs.prod.js

@@ -7,25 +7,14 @@ 'use strict';
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var react = require('react');
 var a11y = require('@ag.ds-next/a11y');
-var icon = require('@ag.ds-next/icon');
+var react = require('@emotion/react');
+var box = require('@ag.ds-next/box');
+var core = require('@ag.ds-next/core');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-require('@emotion/react');
-var box = require('@ag.ds-next/box');
 var text = require('@ag.ds-next/text');
 var textLink = require('@ag.ds-next/text-link');
+var icon = require('@ag.ds-next/icon');
 
-var _ref = {
-  name: "1jfkd3a",
-  styles: "flex-shrink:0;width:10px;height:10px;position:relative;top:1px"
-} ;
+var BreadcrumbsContainer = function BreadcrumbsContainer(_ref) {
+  var _css2;
 
-var BreadcrumbsDivider = function BreadcrumbsDivider() {
-  return jsxRuntime.jsx(icon.ChevronRightIcon, {
-    color: "border",
-    weight: "bold",
-    css: _ref
-  });
-};
-
-var BreadcrumbsContainer = function BreadcrumbsContainer(_ref) {
   var children = _ref.children,
@@ -40,2 +29,16 @@ ariaLabel = _ref['aria-label'];
       flexWrap: "wrap",
+      css: /*#__PURE__*/react.css((_css2 = {}, _defineProperty(_css2, core.tokens.mediaQuery.min.sm, {
+        'li:first-of-type > svg': {
+          display: 'none'
+        }
+      }), _defineProperty(_css2, core.tokens.mediaQuery.max.xs, {
+        // In mobile, hide all items except the second last item
+        'li:not(:nth-last-of-type(2))': {
+          display: 'none'
+        },
+        // In mobile, rotate the `BreadcrumbsDivider` icon
+        'li > svg': {
+          transform: 'rotate(180deg)'
+        }
+      }), _css2), "" , "" ),
       children: children
@@ -46,2 +49,15 @@ })
 
+var _ref = {
+  name: "1jfkd3a",
+  styles: "flex-shrink:0;width:10px;height:10px;position:relative;top:1px"
+} ;
+
+var BreadcrumbsDivider = function BreadcrumbsDivider() {
+  return jsxRuntime.jsx(icon.ChevronRightIcon, {
+    color: "border",
+    weight: "bold",
+    css: _ref
+  });
+};
+
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -53,7 +69,9 @@
       href = props.href;
-  return jsxRuntime.jsx(box.Box, {
+  return jsxRuntime.jsxs(box.Flex, {
     as: "li",
-    children: href ? jsxRuntime.jsx(textLink.TextLink, _objectSpread$1({}, props)) : jsxRuntime.jsx(text.Text, {
+    alignItems: "center",
+    gap: 0.5,
+    children: [jsxRuntime.jsx(BreadcrumbsDivider, {}), href ? jsxRuntime.jsx(textLink.TextLink, _objectSpread$1({}, props)) : jsxRuntime.jsx(text.Text, {
       children: children
-    })
+    })]
   });
@@ -77,9 +95,7 @@ };
 
-      return jsxRuntime.jsxs(react.Fragment, {
-        children: [index == 0 ? null : jsxRuntime.jsx(BreadcrumbsDivider, {}), jsxRuntime.jsxs(BreadcrumbsItem, _objectSpread(_objectSpread({}, props), {}, {
-          children: [label, index === links.length - 1 ? jsxRuntime.jsx(a11y.VisuallyHidden, {
-            children: " (current page)"
-          }) : null]
-        }))]
-      }, index);
+      return jsxRuntime.jsxs(BreadcrumbsItem, _objectSpread(_objectSpread({}, props), {}, {
+        children: [label, index === links.length - 1 ? jsxRuntime.jsx(a11y.VisuallyHidden, {
+          children: " (current page)"
+        }) : null]
+      }), index);
     })
@@ -86,0 +102,0 @@ });

dist/ag.ds-next-breadcrumbs.esm.js

 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import { Fragment } from 'react';
 import { VisuallyHidden } from '@ag.ds-next/a11y';
-import { ChevronRightIcon } from '@ag.ds-next/icon';
+import { css } from '@emotion/react';
+import { Flex } from '@ag.ds-next/box';
+import { tokens } from '@ag.ds-next/core';
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import '@emotion/react';
-import { Flex, Box } from '@ag.ds-next/box';
 import { Text } from '@ag.ds-next/text';
 import { TextLink } from '@ag.ds-next/text-link';
+import { ChevronRightIcon } from '@ag.ds-next/icon';
 
+var BreadcrumbsContainer = function BreadcrumbsContainer(_ref) {
+  var _css2;
+
+  var children = _ref.children,
+      ariaLabel = _ref['aria-label'];
+  return jsx("nav", {
+    "aria-label": ariaLabel,
+    children: jsx(Flex, {
+      as: "ol",
+      gap: 0.5,
+      alignItems: "center",
+      flexWrap: "wrap",
+      css: /*#__PURE__*/css((_css2 = {}, _defineProperty(_css2, tokens.mediaQuery.min.sm, {
+        'li:first-of-type > svg': {
+          display: 'none'
+        }
+      }), _defineProperty(_css2, tokens.mediaQuery.max.xs, {
+        // In mobile, hide all items except the second last item
+        'li:not(:nth-last-of-type(2))': {
+          display: 'none'
+        },
+        // In mobile, rotate the `BreadcrumbsDivider` icon
+        'li > svg': {
+          transform: 'rotate(180deg)'
+        }
+      }), _css2), process.env.NODE_ENV === "production" ? "" : ";label:BreadcrumbsContainer;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJyZWFkY3J1bWJzQ29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQkciLCJmaWxlIjoiQnJlYWRjcnVtYnNDb250YWluZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBQcm9wc1dpdGhDaGlsZHJlbiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IEZsZXggfSBmcm9tICdAYWcuZHMtbmV4dC9ib3gnO1xuaW1wb3J0IHsgdG9rZW5zIH0gZnJvbSAnQGFnLmRzLW5leHQvY29yZSc7XG5cbmV4cG9ydCB0eXBlIEJyZWFkY3J1bWJzQ29udGFpbmVyUHJvcHMgPSBQcm9wc1dpdGhDaGlsZHJlbjx7XG5cdCdhcmlhLWxhYmVsJzogc3RyaW5nO1xufT47XG5cbmV4cG9ydCBjb25zdCBCcmVhZGNydW1ic0NvbnRhaW5lciA9ICh7XG5cdGNoaWxkcmVuLFxuXHQnYXJpYS1sYWJlbCc6IGFyaWFMYWJlbCxcbn06IEJyZWFkY3J1bWJzQ29udGFpbmVyUHJvcHMpID0+IChcblx0PG5hdiBhcmlhLWxhYmVsPXthcmlhTGFiZWx9PlxuXHRcdDxGbGV4XG5cdFx0XHRhcz1cIm9sXCJcblx0XHRcdGdhcD17MC41fVxuXHRcdFx0YWxpZ25JdGVtcz1cImNlbnRlclwiXG5cdFx0XHRmbGV4V3JhcD1cIndyYXBcIlxuXHRcdFx0Y3NzPXt7XG5cdFx0XHRcdC8vIEluIGRlc2t0b3AsIGhpZGUgdGhlIGBCcmVhZGNydW1ic0RpdmlkZXJgIGZyb20gdGhlIGZpcnN0IGl0ZW1cblx0XHRcdFx0W3Rva2Vucy5tZWRpYVF1ZXJ5Lm1pbi5zbV06IHtcblx0XHRcdFx0XHQnbGk6Zmlyc3Qtb2YtdHlwZSA+IHN2Zyc6IHtcblx0XHRcdFx0XHRcdGRpc3BsYXk6ICdub25lJyxcblx0XHRcdFx0XHR9LFxuXHRcdFx0XHR9LFxuXHRcdFx0XHRbdG9rZW5zLm1lZGlhUXVlcnkubWF4LnhzXToge1xuXHRcdFx0XHRcdC8vIEluIG1vYmlsZSwgaGlkZSBhbGwgaXRlbXMgZXhjZXB0IHRoZSBzZWNvbmQgbGFzdCBpdGVtXG5cdFx0XHRcdFx0J2xpOm5vdCg6bnRoLWxhc3Qtb2YtdHlwZSgyKSknOiB7XG5cdFx0XHRcdFx0XHRkaXNwbGF5OiAnbm9uZScsXG5cdFx0XHRcdFx0fSxcblx0XHRcdFx0XHQvLyBJbiBtb2JpbGUsIHJvdGF0ZSB0aGUgYEJyZWFkY3J1bWJzRGl2aWRlcmAgaWNvblxuXHRcdFx0XHRcdCdsaSA+IHN2Zyc6IHtcblx0XHRcdFx0XHRcdHRyYW5zZm9ybTogJ3JvdGF0ZSgxODBkZWcpJyxcblx0XHRcdFx0XHR9LFxuXHRcdFx0XHR9LFxuXHRcdFx0fX1cblx0XHQ+XG5cdFx0XHR7Y2hpbGRyZW59XG5cdFx0PC9GbGV4PlxuXHQ8L25hdj5cbik7XG4iXX0= */"),
+      children: children
+    })
+  });
+};
+
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
@@ -32,17 +63,2 @@
 
-var BreadcrumbsContainer = function BreadcrumbsContainer(_ref) {
-  var children = _ref.children,
-      ariaLabel = _ref['aria-label'];
-  return jsx("nav", {
-    "aria-label": ariaLabel,
-    children: jsx(Flex, {
-      as: "ol",
-      gap: 0.5,
-      alignItems: "center",
-      flexWrap: "wrap",
-      children: children
-    })
-  });
-};
-
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -54,7 +70,9 @@
       href = props.href;
-  return jsx(Box, {
+  return jsxs(Flex, {
     as: "li",
-    children: href ? jsx(TextLink, _objectSpread$1({}, props)) : jsx(Text, {
+    alignItems: "center",
+    gap: 0.5,
+    children: [jsx(BreadcrumbsDivider, {}), href ? jsx(TextLink, _objectSpread$1({}, props)) : jsx(Text, {
       children: children
-    })
+    })]
   });
@@ -78,9 +96,7 @@ };
 
-      return jsxs(Fragment, {
-        children: [index == 0 ? null : jsx(BreadcrumbsDivider, {}), jsxs(BreadcrumbsItem, _objectSpread(_objectSpread({}, props), {}, {
-          children: [label, index === links.length - 1 ? jsx(VisuallyHidden, {
-            children: " (current page)"
-          }) : null]
-        }))]
-      }, index);
+      return jsxs(BreadcrumbsItem, _objectSpread(_objectSpread({}, props), {}, {
+        children: [label, index === links.length - 1 ? jsx(VisuallyHidden, {
+          children: " (current page)"
+        }) : null]
+      }), index);
     })
@@ -87,0 +103,0 @@ });

package.json

 {
 	"name": "@ag.ds-next/breadcrumbs",
-	"version": "13.0.0",
+	"version": "14.0.0",
 	"main": "dist/ag.ds-next-breadcrumbs.cjs.js",
@@ -12,7 +12,7 @@ "module": "dist/ag.ds-next-breadcrumbs.esm.js",
 		"@ag.ds-next/a11y": "1.2.1",
-		"@ag.ds-next/box": "6.1.0",
-		"@ag.ds-next/core": "3.0.1",
-		"@ag.ds-next/icon": "10.0.0",
-		"@ag.ds-next/text": "9.0.0",
-		"@ag.ds-next/text-link": "5.0.0",
+		"@ag.ds-next/box": "7.0.0",
+		"@ag.ds-next/core": "4.0.0",
+		"@ag.ds-next/icon": "11.0.0",
+		"@ag.ds-next/text": "10.0.0",
+		"@ag.ds-next/text-link": "6.0.0",
 		"@emotion/react": "^11.7.0",
@@ -19,0 +19,0 @@ "react": "^16.14.0 || ^17.0.0 || ^18.0.0"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34060

increased by22.11%

Lines of code

469

increased by21.5%

Worsened metrics

Number of low supply chain risk alerts

10

increased by150%

No dependency changes