@pingux/astro 1.1.1-alpha.3 → 1.2.0-alpha.1

package/lib/cjs/index.js

@@ -34,6 +34,7 @@ var _exportNames = {
   ComboBoxField: true,
   CopyText: true,
   ColorField: true,
+  EnvironmentBreadcrumb: true,
   FieldHelperText: true,
   FileInputField: true,
   HelpHint: true,
@@ -214,6 +215,13 @@ _Object$defineProperty(exports, "ColorField", {
   }
 });
 
+_Object$defineProperty(exports, "EnvironmentBreadcrumb", {
+  enumerable: true,
+  get: function get() {
+    return _EnvironmentBreadcrumb["default"];
+  }
+});
+
 _Object$defineProperty(exports, "FieldHelperText", {
   enumerable: true,
   get: function get() {
@@ -817,6 +825,8 @@ var _CopyText = _interopRequireDefault(require("./components/CopyText"));
 
 var _ColorField = _interopRequireDefault(require("./components/ColorField"));
 
+var _EnvironmentBreadcrumb = _interopRequireDefault(require("./components/EnvironmentBreadcrumb"));
+
 var _FieldHelperText = _interopRequireWildcard(require("./components/FieldHelperText"));
 
 _forEachInstanceProperty(_context14 = _Object$keys(_FieldHelperText)).call(_context14, function (key) {

package/lib/cjs/styles/theme.js

@@ -75,6 +75,7 @@ var _default = {
   images: _variants.images,
   buttons: _variants.buttons,
   textColors: _text.textColors,
+  links: _variants.links,
   variants: _variants.variants
 };
 exports["default"] = _default;

package/lib/cjs/styles/variants/boxes.js

@@ -274,6 +274,18 @@ var datePicker = {
     }
   }
 };
+
+var environmentChip = _objectSpread(_objectSpread({}, chip), {}, {
+  alignSelf: 'center',
+  height: '17px',
+  minWidth: 'fit-content',
+  ml: 8,
+  '& span': {
+    fontSize: 'xs',
+    lineHeight: 1
+  }
+});
+
 var fileInputFieldWrapper = {
   display: 'flex',
   border: '1px dashed',
@@ -302,6 +314,7 @@ var _default = {
   chip: chip,
   copy: copy,
   datePicker: datePicker,
+  environmentChip: environmentChip,
   expandableRow: expandableRow,
   inputInContainerSlot: inputInContainerSlot,
   fileInputFieldWrapper: fileInputFieldWrapper,

package/lib/cjs/styles/variants/buttons.js

@@ -485,6 +485,28 @@ var expandableRow = {
     }
   }
 };
+var environmentBreadcrumb = {
+  current: _objectSpread(_objectSpread({}, text), {}, {
+    color: 'neutral.30',
+    fontSize: 'md',
+    fontWeight: 1,
+    '&.is-hovered, &.is-focused': {
+      color: 'active',
+      textDecoration: 'none',
+      boxShadow: 'none'
+    },
+    '&.is-pressed': {
+      color: 'accent.20',
+      textDecoration: 'none'
+    }
+  }),
+  selectItem: _objectSpread(_objectSpread({}, text), {}, {
+    color: 'neutral.10',
+    fontSize: 'md',
+    fontWeight: 0,
+    justifyContent: 'start'
+  })
+};
 var fileInputField = {
   background: 'none',
   cursor: 'pointer',
@@ -551,6 +573,7 @@ var _default = {
     '&.is-pressed': _objectSpread({}, defaultActive),
     '&.is-focused': _objectSpread({}, defaultFocus)
   }),
+  environmentBreadcrumb: environmentBreadcrumb,
   expandableRow: expandableRow,
   fileInputField: fileInputField,
   iconButton: iconButton,

package/lib/cjs/styles/variants/index.js

@@ -17,7 +17,8 @@ _Object$defineProperty(exports, "__esModule", {
 var _exportNames = {
   variants: true,
   buttons: true,
-  images: true
+  images: true,
+  links: true
 };
 
 _Object$defineProperty(exports, "variants", {
@@ -41,12 +42,21 @@ _Object$defineProperty(exports, "images", {
   }
 });
 
+_Object$defineProperty(exports, "links", {
+  enumerable: true,
+  get: function get() {
+    return _links["default"];
+  }
+});
+
 var _variants = _interopRequireDefault(require("./variants"));
 
 var _buttons = _interopRequireDefault(require("./buttons"));
 
 var _images = _interopRequireDefault(require("./images"));
 
+var _links = _interopRequireDefault(require("./links"));
+
 var _text = require("./text");
 
 _forEachInstanceProperty(_context = _Object$keys(_text)).call(_context, function (key) {

package/lib/cjs/styles/variants/links.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var app = {
+  color: 'active',
+  fontFamily: 'standard',
+  fontSize: 'md',
+  textDecoration: 'none',
+  outline: 'none',
+  '&.is-hovered': {
+    textDecoration: 'underline'
+  },
+  '&.is-focused': {
+    textDecoration: 'underline'
+  },
+  '&.is-pressed': {
+    color: 'accent.40',
+    textDecoration: 'underline'
+  },
+  '&.is-disabled': {
+    pointerEvents: 'none'
+  }
+};
+
+var web = _objectSpread(_objectSpread({}, app), {}, {
+  textDecoration: 'underline',
+  '&:visited': {
+    color: 'decorative.7'
+  }
+});
+
+var _default = {
+  app: app,
+  web: web
+};
+exports["default"] = _default;

package/lib/cjs/styles/variants/text.js

@@ -139,6 +139,14 @@ var expandableRow = {
     }
   }
 };
+
+var environmentBreadcrumb = _objectSpread(_objectSpread({}, base), {}, {
+  fontSize: 'sm',
+  fontWeight: 3,
+  color: 'secondary',
+  textTransform: 'capitalize'
+});
+
 var navBarSubtitle = {
   fontWeight: 3,
   fontSize: '11px',
@@ -175,6 +183,7 @@ var text = {
     textTransform: 'uppercase',
     fontFamily: 'standard'
   }),
+  environmentBreadcrumb: environmentBreadcrumb,
   fieldHelperText: fieldHelperText,
   inputValue: {
     fontWeight: 1,

package/lib/cjs/styles/variants/variants.js

@@ -40,7 +40,7 @@ var _images = _interopRequireDefault(require("./images"));
 
 var _imageUpload = _interopRequireDefault(require("./imageUpload"));
 
-var _link = _interopRequireDefault(require("./link"));
+var _links = _interopRequireDefault(require("./links"));
 
 var _listBox = _interopRequireDefault(require("./listBox"));
 
@@ -83,7 +83,7 @@ var _default = _objectSpread(_objectSpread({
   images: _images["default"],
   imageUpload: _imageUpload["default"],
   loader: _loader["default"],
-  link: _link["default"],
+  links: _links["default"],
   listBox: _listBox["default"],
   menu: _menu["default"],
   menuItem: _menuItem["default"],

package/lib/cjs/utils/devUtils/constants/animals.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+var _default = ['Aardvark', 'Albatross', 'Alligator', 'Alpaca', 'Ant', 'Anteater', 'Antelope', 'Ape', 'Armadillo', 'Donkey', 'Baboon', 'Badger', 'Barracuda', 'Bat', 'Bear', 'Beaver', 'Bee', 'Bison', 'Boar', 'Buffalo', 'Butterfly', 'Camel', 'Capybara', 'Caribou', 'Cassowary', 'Cat', 'Caterpillar', 'Cattle', 'Chamois', 'Cheetah', 'Chicken', 'Chimpanzee', 'Chinchilla', 'Chough', 'Clam', 'Cobra', 'Cockroach', 'Cod', 'Cormorant', 'Coyote', 'Crab', 'Crane', 'Crocodile', 'Crow', 'Curlew', 'Deer', 'Dinosaur', 'Dog', 'Dogfish', 'Dolphin', 'Dotterel', 'Dove', 'Dragonfly', 'Duck', 'Dugong', 'Dunlin', 'Eagle', 'Echidna', 'Eel', 'Eland', 'Elephant', 'Elk', 'Emu', 'Falcon', 'Ferret', 'Finch', 'Fish', 'Flamingo', 'Fly', 'Fox', 'Frog', 'Gaur', 'Gazelle', 'Gerbil', 'Giraffe', 'Gnat', 'Gnu', 'Goat', 'Goldfinch', 'Goldfish', 'Goose', 'Gorilla', 'Goshawk', 'Grasshopper', 'Grouse', 'Guanaco', 'Gull', 'Hamster', 'Hare', 'Hawk', 'Hedgehog', 'Heron', 'Herring', 'Hippopotamus', 'Hornet', 'Horse', 'Human', 'Hummingbird', 'Hyena', 'Ibex', 'Ibis', 'Jackal', 'Jaguar', 'Jay', 'Jellyfish', 'Kangaroo', 'Kingfisher', 'Koala', 'Kookabura', 'Kouprey', 'Kudu', 'Lapwing', 'Lark', 'Lemur', 'Leopard', 'Lion', 'Llama', 'Lobster', 'Locust', 'Loris', 'Louse', 'Lyrebird', 'Magpie', 'Mallard', 'Manatee', 'Mandrill', 'Mantis', 'Marten', 'Meerkat', 'Mink', 'Mole', 'Mongoose', 'Monkey', 'Moose', 'Mosquito', 'Mouse', 'Mule', 'Narwhal', 'Newt', 'Nightingale', 'Octopus', 'Okapi', 'Opossum', 'Oryx', 'Ostrich', 'Otter', 'Owl', 'Oyster', 'Panther', 'Parrot', 'Partridge', 'Peafowl', 'Pelican', 'Penguin', 'Pheasant', 'Pig', 'Pigeon', 'Pony', 'Porcupine', 'Porpoise', 'Quail', 'Quelea', 'Quetzal', 'Rabbit', 'Raccoon', 'Rail', 'Ram', 'Rat', 'Raven', 'Red deer', 'Red panda', 'Reindeer', 'Rhinoceros', 'Rook', 'Salamander', 'Salmon', 'Sand Dollar', 'Sandpiper', 'Sardine', 'Scorpion', 'Seahorse', 'Seal', 'Shark', 'Sheep', 'Shrew', 'Skunk', 'Snail', 'Snake', 'Sparrow', 'Spider', 'Spoonbill', 'Squid', 'Squirrel', 'Starling', 'Stingray', 'Stinkbug', 'Stork', 'Swallow', 'Swan', 'Tapir', 'Tarsier', 'Termite', 'Tiger', 'Toad', 'Trout', 'Turkey', 'Turtle', 'Viper', 'Vulture', 'Wallaby', 'Walrus', 'Wasp', 'Weasel', 'Whale', 'Wildcat', 'Wolf', 'Wolverine', 'Wombat', 'Woodcock', 'Woodpecker', 'Worm', 'Wren', 'Yak', 'Zebra'];
+exports["default"] = _default;

package/lib/cjs/utils/devUtils/constants/firstNames.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+var _default = ['Michael', 'Christopher', 'Jessica', 'Matthew', 'Ashley', 'Jennifer', 'Joshua', 'Amanda', 'Daniel', 'David', 'James', 'Robert', 'John', 'Joseph', 'Andrew', 'Ryan', 'Brandon', 'Jason', 'Justin', 'Sarah', 'William', 'Jonathan', 'Stephanie', 'Brian', 'Nicole', 'Nicholas', 'Anthony', 'Heather', 'Eric', 'Elizabeth', 'Adam', 'Megan', 'Melissa', 'Kevin', 'Steven', 'Thomas', 'Timothy', 'Christina', 'Kyle', 'Rachel', 'Laura', 'Lauren', 'Amber', 'Brittany', 'Danielle', 'Richard', 'Kimberly', 'Jeffrey', 'Amy', 'Crystal', 'Michelle', 'Tiffany', 'Jeremy', 'Benjamin', 'Mark', 'Emily', 'Aaron', 'Charles', 'Rebecca', 'Jacob', 'Stephen', 'Patrick', 'Sean', 'Erin', 'Zachary', 'Jamie', 'Kelly', 'Samantha', 'Nathan', 'Sara', 'Dustin', 'Paul', 'Angela', 'Tyler', 'Scott', 'Katherine', 'Andrea', 'Gregory', 'Erica', 'Mary', 'Travis', 'Lisa', 'Kenneth', 'Bryan', 'Lindsey', 'Kristen', 'Jose', 'Alexander', 'Jesse', 'Katie', 'Lindsay', 'Shannon', 'Vanessa', 'Courtney', 'Christine', 'Alicia', 'Cody', 'Allison', 'Bradley', 'Samuel'];
+exports["default"] = _default;

package/lib/cjs/utils/devUtils/createMockData.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
+
+var _uuid = require("uuid");
+
+var _animals = _interopRequireDefault(require("./constants/animals"));
+
+var _firstNames = _interopRequireDefault(require("./constants/firstNames"));
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; (0, _forEach["default"])(_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context4; (0, _forEach["default"])(_context4 = ownKeys(Object(source))).call(_context4, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+function createMockData(length, objectScheme) {
+  var mockDataBase = {
+    animal: _animals["default"],
+    firstName: _firstNames["default"]
+  };
+  var itemsNumber = {
+    animal: 0,
+    firstName: 0
+  };
+
+  var getPropValue = function getPropValue(valueType) {
+    if (valueType === 'id') {
+      return (0, _uuid.v4)();
+    }
+
+    var valueNumber = itemsNumber[valueType];
+    var propValue = mockDataBase[valueType][valueNumber];
+    itemsNumber[valueType] += 1;
+    return propValue;
+  };
+
+  var generateObject = function generateObject() {
+    var entries = (0, _entries["default"])(objectScheme);
+
+    var reducer = function reducer(previousValue, currentValue) {
+      var fieldName = currentValue[0];
+      var fieldValue = getPropValue(currentValue[1]);
+      return _objectSpread(_objectSpread({}, previousValue), {}, (0, _defineProperty3["default"])({}, fieldName, fieldValue));
+    };
+
+    return (0, _reduce["default"])(entries).call(entries, reducer, {});
+  };
+
+  var generateDataArr = function generateDataArr() {
+    var _context, _context2;
+
+    return (0, _map["default"])(_context = (0, _fill["default"])(_context2 = Array(length)).call(_context2, undefined)).call(_context, function () {
+      return generateObject();
+    });
+  };
+
+  return generateDataArr();
+}
+
+var _default = createMockData; // usage(delete this comment as soon as we used this function in a few stories so we have examples):
+// const mockData = createMockData(100, { name: 'animal', id: 'id' });
+
+exports["default"] = _default;

package/lib/components/Breadcrumbs/BreadcrumbItem.js

@@ -14,7 +14,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { forwardRef, Fragment, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
 import { useBreadcrumbItem } from '@react-aria/breadcrumbs';
 import PropTypes from 'prop-types';
 import { mergeProps } from '@react-aria/utils';
@@ -54,6 +54,9 @@ var BreadcrumbItem = /*#__PURE__*/forwardRef(function (props, ref) {
       case 'Text':
         return Text;
 
+      case 'Fragment':
+        return Fragment;
+
       default:
         return elementType;
     }

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -1,7 +1,9 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-import React, { forwardRef, useRef, useImperativeHandle, Fragment } from 'react';
+import React, { forwardRef, useRef, useImperativeHandle, Fragment, useCallback } from 'react';
 import { useBreadcrumbs } from '@react-aria/breadcrumbs';
 import PropTypes from 'prop-types';
 import { mergeProps } from '@react-aria/utils';
@@ -21,7 +23,12 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
       icon = props.icon,
       iconProps = props.iconProps,
       onAction = props.onAction,
-      others = _objectWithoutProperties(props, ["children", "icon", "iconProps", "onAction"]);
+      others = _objectWithoutProperties(props, ["children", "icon", "iconProps", "onAction"]); // the following filters undefined values passed as a child
+
+
+  var filteredChildren = _Array$isArray(children) ? _filterInstanceProperty(children).call(children, function (child) {
+    return child;
+  }) : children;
 
   var _useBreadcrumbs = useBreadcrumbs(props),
       wrapperProps = _useBreadcrumbs.navProps;
@@ -33,26 +40,28 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return breadcrumbsRef.current;
   });
-  return ___EmotionJSX(Box, _extends({
-    ref: breadcrumbsRef,
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    sx: {
-      overflow: 'auto'
-    }
-  }, mergeProps(wrapperProps, others)), _mapInstanceProperty(children).call(children, function (child, idx) {
+  var createBreadcrumb = useCallback(function (child, idx) {
+    var isCurrentItem = _Array$isArray(filteredChildren) && filteredChildren.length > 1 ? idx === children.length - 1 : true;
     return ___EmotionJSX(Fragment, {
       key: "fragment-".concat(child.key)
     }, ___EmotionJSX(BreadcrumbItem, _extends({
       "data-id": child['data-id'],
-      isCurrent: idx === children.length - 1,
+      isCurrent: isCurrentItem,
       onAction: onAction,
       actionKey: child.key
-    }, child.props), child.props.children), icon && idx !== children.length - 1 && ___EmotionJSX(Icon, _extends({
+    }, child.props), child.props.children), icon && !isCurrentItem && ___EmotionJSX(Icon, _extends({
       icon: icon
     }, iconProps)));
-  }));
+  }, [children.length, filteredChildren, icon, iconProps, onAction]);
+  return ___EmotionJSX(Box, _extends({
+    ref: breadcrumbsRef,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    sx: {
+      overflow: 'auto'
+    }
+  }, mergeProps(wrapperProps, others)), _Array$isArray(filteredChildren) ? _mapInstanceProperty(filteredChildren).call(filteredChildren, createBreadcrumb) : createBreadcrumb(children));
 });
 Breadcrumbs.propTypes = {
   /** The icon to render in between each node. */

package/lib/components/Breadcrumbs/Breadcrumbs.test.js

@@ -89,4 +89,13 @@ test('Item accepts a data-id and the data-id can be found in the DOM', function
   var item = screen.getByText(testItemsArr[0]);
   expect(item).toBeInTheDocument();
   expect(item).toHaveAttribute('data-id', testItemsArr[0]);
+});
+test('will render correctly with single child item', function () {
+  render(___EmotionJSX(Breadcrumbs, mergeProps(defaultProps), ___EmotionJSX(Item, {
+    key: testItemsArr[0],
+    "data-id": testItemsArr[0],
+    isCurrent: true
+  }, testItemsArr[0])));
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
+  expect(screen.getByText(testItemsArr[0])).toBeInTheDocument();
 });