@pingux/astro 1.17.0-alpha.3 → 1.17.0-alpha.6

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -0,0 +1,362 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _i18n = require("@react-aria/i18n");
+
+var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
+
+var _HomeIcon = _interopRequireDefault(require("mdi-react/HomeIcon"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _overlays = require("@react-stately/overlays");
+
+var _overlays2 = require("@react-aria/overlays");
+
+var _ArrowDropUpIcon = _interopRequireDefault(require("mdi-react/ArrowDropUpIcon"));
+
+var _ArrowDropDownIcon = _interopRequireDefault(require("mdi-react/ArrowDropDownIcon"));
+
+var _focus = require("@react-aria/focus");
+
+var _list = require("@react-stately/list");
+
+var _ListBox = _interopRequireDefault(require("../ListBox"));
+
+var _isIterable = require("../../utils/devUtils/props/isIterable");
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["children", "disabledKeys", "emptySearchText", "items", "itemsFilter", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty2(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty2(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/** The Environment Picker with Search and Sections support */
+var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+      imperativeDisabledKeys = props.disabledKeys,
+      emptySearchText = props.emptySearchText,
+      items = props.items,
+      imperativeItemsFilter = props.itemsFilter,
+      onNamePress = props.onNamePress,
+      imperativeOnPopoverClose = props.onPopoverClose,
+      imperativeOnPopoverOpen = props.onPopoverOpen,
+      onSelectionChange = props.onSelectionChange,
+      name = props.name,
+      searchProps = props.searchProps,
+      selectedItem = props.selectedItem,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      searchValue = _useState2[0],
+      setSearchValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      selectedKeys = _useState4[0],
+      setSelectedKeys = _useState4[1];
+
+  var breadcrumbsRef = (0, _react.useRef)();
+
+  var overlayRef = _react["default"].useRef();
+
+  var triggerRef = _react["default"].useRef();
+
+  var scrollBoxRef = _react["default"].useRef();
+  /* istanbul ignore next */
+
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return breadcrumbsRef.current;
+  });
+
+  var _useFilter = (0, _i18n.useFilter)({
+    sensitivity: 'base'
+  }),
+      contains = _useFilter.contains;
+
+  var filterNodesWithChildren = function filterNodesWithChildren(iterableNode) {
+    var nodeArr = (0, _from["default"])(iterableNode); // with this function we are filtering child items if they have sections
+    // we can't filter items because if it would be a section - we can't change childNodes
+    // eslint-disable-next-line array-callback-return,consistent-return
+
+    var filteredSections = (0, _map["default"])(nodeArr).call(nodeArr, function f(nodeItem) {
+      if ((nodeItem === null || nodeItem === void 0 ? void 0 : nodeItem.type) === 'item') {
+        var _nodeItem$value;
+
+        return contains(nodeItem === null || nodeItem === void 0 ? void 0 : (_nodeItem$value = nodeItem.value) === null || _nodeItem$value === void 0 ? void 0 : _nodeItem$value.name, searchValue) ? nodeItem : null;
+      }
+
+      if ((nodeItem === null || nodeItem === void 0 ? void 0 : nodeItem.type) === 'section') {
+        var _context;
+
+        return _objectSpread(_objectSpread({}, nodeItem), {}, {
+          childNodes: (0, _filter["default"])(_context = (0, _from["default"])(nodeItem.childNodes)).call(_context, f)
+        });
+      }
+    }); // we are filtering null items here since we were not able to filter them in previous function
+
+    return (0, _filter["default"])(filteredSections).call(filteredSections, function (item) {
+      return item;
+    });
+  };
+
+  var popoverState = (0, _overlays.useOverlayTriggerState)({});
+  var handlePopoverClose = (0, _react.useCallback)(function () {
+    if (imperativeOnPopoverClose) {
+      imperativeOnPopoverClose();
+    }
+
+    setSearchValue('');
+    popoverState.close();
+  }, [imperativeOnPopoverClose, popoverState]);
+  var handleSelectionChange = (0, _react.useCallback)(function (selectedItemSet) {
+    var _selectedItemSet = (0, _slicedToArray2["default"])(selectedItemSet, 1),
+        selectedItemKey = _selectedItemSet[0];
+
+    setSelectedKeys(selectedItemSet);
+    onSelectionChange(selectedItemKey);
+    handlePopoverClose();
+  }, [handlePopoverClose, onSelectionChange]);
+  var listBoxProps = {
+    children: children,
+    disabledKeys: imperativeDisabledKeys,
+    items: items,
+    filter: imperativeItemsFilter || filterNodesWithChildren,
+    onSelectionChange: handleSelectionChange,
+    selectedKeys: selectedKeys,
+    selectionMode: 'single',
+    disallowEmptySelection: false
+  };
+  var listBoxState = (0, _list.useListState)(listBoxProps); // this function is recursively going through the children to see
+  // whether there are some items so that means that the array isn't empty
+
+  var checkIfListEmpty = (0, _react.useCallback)(function () {
+    // from the beginning we are assuming that the list is empty
+    // variable is not isListEmpty because checks below if(isListHasItems) is clearer
+    // to read than if(!isListEmpty) IMO
+    var isListHasItems = false; // eslint-disable-next-line consistent-return
+
+    (function f(listState) {
+      var _listState$collection;
+
+      // if the list has items - we don't need to go deeper into the recursion
+      if (isListHasItems) {
+        return;
+      } // here we are checking where are listItems array is stored
+
+
+      var listItemsArr = (listState === null || listState === void 0 ? void 0 : (_listState$collection = listState.collection) === null || _listState$collection === void 0 ? void 0 : _listState$collection.iterable) || (listState === null || listState === void 0 ? void 0 : listState.childNodes);
+
+      if ((listItemsArr === null || listItemsArr === void 0 ? void 0 : listItemsArr.length) > 0) {
+        // if there are a few listItems we are checking their types (can be sections) - if we have
+        // a few of 'items' type - we know that the list is not empty
+        if (listItemsArr[0].type === 'item') {
+          isListHasItems = true;
+        } else {
+          // this path will be taken if there are a few 'sections'
+          // - we need to go check them recursively
+          (0, _forEach["default"])(listItemsArr).call(listItemsArr, function (item) {
+            return f(item);
+          });
+        }
+      }
+    })(listBoxState);
+
+    return !isListHasItems;
+  }, [listBoxState]);
+
+  var _useOverlayTrigger = (0, _overlays2.useOverlayTrigger)({
+    type: 'listbox'
+  }, popoverState, triggerRef),
+      triggerProps = _useOverlayTrigger.triggerProps,
+      overlayProps = _useOverlayTrigger.overlayProps;
+
+  var handlePopoverOpen = function handlePopoverOpen() {
+    if (imperativeOnPopoverOpen) {
+      imperativeOnPopoverOpen();
+    }
+
+    popoverState.open();
+  };
+
+  var _useOverlayPosition = (0, _overlays2.useOverlayPosition)({
+    isOpen: popoverState.isOpen,
+    offset: 6,
+    onClose: handlePopoverClose,
+    overlayRef: overlayRef,
+    scrollRef: scrollBoxRef,
+    shouldUpdatePosition: true,
+    targetRef: triggerRef
+  }),
+      positionProps = _useOverlayPosition.overlayProps;
+
+  var EmptyListState = (0, _react2.jsx)(_index.Text, {
+    py: 10,
+    px: 15
+  }, emptySearchText);
+
+  var _selectedKeys = (0, _slicedToArray2["default"])(selectedKeys, 1),
+      selectedValue = _selectedKeys[0];
+
+  var ItemsSelect = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, triggerProps, {
+    onPress: handlePopoverOpen,
+    ref: triggerRef,
+    variant: "environmentBreadcrumb.current",
+    "aria-label": "".concat((typeof selectedItem === 'string' ? selectedItem : selectedValue) || 'Selected Item')
+  }), selectedItem, (0, _react2.jsx)(_index.Icon, {
+    icon: popoverState.isOpen ? _ArrowDropUpIcon["default"] : _ArrowDropDownIcon["default"]
+  })), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, {
+    ref: overlayRef,
+    isOpen: popoverState.isOpen,
+    scrollRef: scrollBoxRef,
+    onClose: handlePopoverClose,
+    hasNoArrow: true,
+    isDismissable: true,
+    p: 10
+  }), (0, _react2.jsx)(_focus.FocusScope, {
+    restoreFocus: true,
+    autoFocus: true,
+    contain: true
+  }, (0, _react2.jsx)(_index.ScrollBox, {
+    ref: scrollBoxRef
+  }, (0, _react2.jsx)(_index.SearchField, (0, _extends2["default"])({
+    placeholder: "Search",
+    "aria-label": "Items Search",
+    "data-testid": "Environment-Breadcrumb-Search",
+    containerProps: {
+      // this one is needed to cancel default scrollBox items behavior
+      sx: {
+        overflow: 'visible'
+      }
+    },
+    onChange: setSearchValue
+  }, searchProps)), checkIfListEmpty() ? EmptyListState : (0, _react2.jsx)(_ListBox["default"], {
+    state: listBoxState,
+    "aria-label": "Items List"
+  })))));
+  var handleOnAction = (0, _react.useCallback)(function (actionKey) {
+    if (actionKey === 'name' && onNamePress) {
+      onNamePress();
+    }
+  }, [onNamePress]);
+  return (0, _react2.jsx)(_index.Breadcrumbs, (0, _extends2["default"])({
+    icon: _ChevronRightIcon["default"],
+    ref: breadcrumbsRef,
+    onAction: handleOnAction,
+    iconProps: {
+      color: 'neutral.70',
+      mx: 5,
+      size: 16
+    }
+  }, others), (0, _react2.jsx)(_index.Item, {
+    key: "name",
+    variant: "environmentBreadcrumb.current",
+    "data-testid": "name",
+    "aria-label": name,
+    elementType: "Button"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _HomeIcon["default"],
+    mr: 7
+  }), name), selectedItem && (0, _react2.jsx)(_index.Item, {
+    key: "itemsSelect",
+    elementType: "Fragment"
+  }, ItemsSelect));
+});
+var _default = EnvironmentBreadcrumb;
+exports["default"] = _default;
+EnvironmentBreadcrumb.propTypes = {
+  /** Callback function that fires when the selected key changes. */
+  onSelectionChange: _propTypes["default"].func,
+
+  /** Current environment */
+  selectedItem: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
+
+  /** Displayed name */
+  name: _propTypes["default"].string,
+
+  /** Callback function that fires when name pressed */
+  onNamePress: _propTypes["default"].func,
+
+  /** The list of environments. */
+  items: _isIterable.isIterableProp,
+
+  /**
+   * Filter function to generate a filtered list of nodes.
+   *
+   * `(nodes: Iterable<Node>) => Iterable<Node>`
+   */
+  itemsFilter: _propTypes["default"].func,
+
+  /** Callback function that fires when the dropdown is opened. */
+  onPopoverOpen: _propTypes["default"].func,
+
+  /** Callback function that fires when the dropdown is closed. */
+  onPopoverClose: _propTypes["default"].func,
+
+  /** Props object that is spread directly into the SearchField element. */
+  searchProps: _propTypes["default"].shape({}),
+
+  /** Array of keys to disable within the options list. */
+  disabledKeys: _propTypes["default"].arrayOf(_propTypes["default"].string),
+
+  /** Text that will be shown if no search results found. */
+  emptySearchText: _propTypes["default"].string
+};
+EnvironmentBreadcrumb.defaultProps = {
+  emptySearchText: 'No Search Result'
+};

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -0,0 +1,301 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.WithSections = exports.OrgLevel = exports.Default = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _EnvironmentBreadcrumb = _interopRequireDefault(require("./EnvironmentBreadcrumb"));
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var _default = {
+  title: 'EnvironmentBreadcrumb',
+  component: _EnvironmentBreadcrumb["default"]
+};
+exports["default"] = _default;
+var defaultEnvironments = [{
+  name: 'Default'
+}, {
+  name: 'Kangaroo'
+}, {
+  name: 'Snake'
+}, {
+  name: 'Snail'
+}, {
+  name: 'Slug'
+}, {
+  name: 'Crow'
+}, {
+  name: 'Dog'
+}, {
+  name: 'Crab',
+  isSandbox: true
+}, {
+  name: 'Fish'
+}, {
+  name: 'Turtle'
+}, {
+  name: 'Mouse'
+}, {
+  name: 'Banana'
+}, {
+  name: 'Shark'
+}, {
+  name: 'Gorilla'
+}, {
+  name: 'Goat'
+}];
+var environmentsWithSections = [{
+  name: 'Recent',
+  options: [{
+    name: 'Default'
+  }, {
+    name: 'Consumer Banking Prod'
+  }, {
+    name: 'Custom 360 Test'
+  }]
+}, {
+  name: 'All',
+  options: [{
+    name: 'Consumer Banking Prod'
+  }, {
+    name: 'Custom 360 Test'
+  }, {
+    name: 'Default'
+  }, {
+    name: 'Great New One',
+    isSandbox: true
+  }, {
+    name: 'Jeff’s Workforce'
+  }, {
+    name: 'Lindemuller Prod'
+  }, {
+    name: 'Mine'
+  }]
+}];
+
+var Default = function Default(args) {
+  var _useState = (0, _react.useState)({
+    name: 'Snail',
+    isSandbox: true
+  }),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      selectedEnvironment = _useState2[0],
+      setSelectedEnvironment = _useState2[1];
+
+  var envNode = (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
+    label: "SANDBOX",
+    variant: "boxes.environmentChip",
+    bg: "neutral.40"
+  }) : null);
+
+  var findEnvObj = function findEnvObj(envName) {
+    return (0, _find["default"])(defaultEnvironments).call(defaultEnvironments, function (_ref) {
+      var name = _ref.name;
+      return name === envName;
+    });
+  };
+
+  var handleSelectionChange = function handleSelectionChange(newEnvName) {
+    var envObj = findEnvObj(newEnvName);
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+
+  return (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], (0, _extends2["default"])({}, args, {
+    items: defaultEnvironments,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleSelectionChange
+  }), function (_ref2) {
+    var name = _ref2.name,
+        isSandbox = _ref2.isSandbox;
+    return (0, _react2.jsx)(_index.Item, {
+      key: name,
+      textValue: name
+    }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
+      label: "SANDBOX",
+      variant: "boxes.environmentChip",
+      bg: "neutral.40"
+    }) : null);
+  });
+};
+
+exports.Default = Default;
+
+var WithSections = function WithSections() {
+  var _useState3 = (0, _react.useState)(environmentsWithSections),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      environments = _useState4[0],
+      setEnvironments = _useState4[1];
+
+  var _useState5 = (0, _react.useState)({
+    name: 'Consumer Banking Prod'
+  }),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      selectedEnvironment = _useState6[0],
+      setSelectedEnvironment = _useState6[1];
+
+  var recentEnvShown = 3;
+
+  var getUpdatedRecentEnvs = function getUpdatedRecentEnvs(envObj, prevEnvs) {
+    var _context3;
+
+    var envName = envObj.name;
+    var isDuplicate = (0, _filter["default"])(prevEnvs).call(prevEnvs, function (prevEnv) {
+      return prevEnv.name === envName;
+    }).length > 0;
+
+    if (isDuplicate) {
+      var _context;
+
+      return (0, _concat["default"])(_context = [_objectSpread({}, envObj)]).call(_context, (0, _filter["default"])(prevEnvs).call(prevEnvs, function (prevEnv) {
+        return prevEnv.name !== envName;
+      }));
+    }
+
+    if (prevEnvs.length >= recentEnvShown) {
+      var _context2;
+
+      return (0, _concat["default"])(_context2 = [_objectSpread({}, envObj)]).call(_context2, (0, _slice["default"])(prevEnvs).call(prevEnvs, 0, recentEnvShown - 1));
+    }
+
+    return (0, _concat["default"])(_context3 = [_objectSpread({}, envObj)]).call(_context3, prevEnvs);
+  };
+
+  var findEnvObj = function findEnvObj(envName) {
+    var _context4;
+
+    return (0, _find["default"])(_context4 = (0, _find["default"])(environments).call(environments, function (section) {
+      return section.name === 'All';
+    }).options).call(_context4, function (option) {
+      return option.name === envName;
+    });
+  };
+
+  var handleEnvPress = function handleEnvPress(newEnv) {
+    var sectionPrefixIndex = (0, _indexOf["default"])(newEnv).call(newEnv, '-');
+    var envKey = newEnv.substr(sectionPrefixIndex + 1);
+    var recentEnvironments = (0, _find["default"])(environments).call(environments, function (envSection) {
+      return envSection.name === 'Recent';
+    }).options;
+    var envObj = findEnvObj(envKey);
+    var updatedRecentEnvironments = getUpdatedRecentEnvs(envObj, recentEnvironments);
+    setEnvironments(function (prevEnvs) {
+      return (0, _map["default"])(prevEnvs).call(prevEnvs, function (section) {
+        return section.name === 'Recent' ? _objectSpread(_objectSpread({}, section), {}, {
+          options: updatedRecentEnvironments
+        }) : section;
+      });
+    });
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+
+  var envNode = (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
+    label: "SANDBOX",
+    variant: "boxes.environmentChip",
+    bg: "neutral.40"
+  }) : null);
+  return (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], {
+    items: environments,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleEnvPress
+  }, function (_ref3) {
+    var sectionName = _ref3.name,
+        sectionOptions = _ref3.options;
+    return (0, _react2.jsx)(_index.Section, {
+      key: sectionName,
+      title: sectionName,
+      items: sectionOptions
+    }, function (_ref4) {
+      var _context5;
+
+      var itemName = _ref4.name,
+          itemOptions = _ref4.options,
+          isSandbox = _ref4.isSandbox;
+      return (0, _react2.jsx)(_index.Item, {
+        key: (0, _concat["default"])(_context5 = "".concat(sectionName, "-")).call(_context5, itemName),
+        childItems: itemOptions,
+        textValue: itemName
+      }, (0, _react2.jsx)(_index.Box, {
+        isRow: true
+      }, itemName, isSandbox ? (0, _react2.jsx)(_index.Chip, {
+        label: "SANDBOX",
+        variant: "boxes.environmentChip",
+        bg: "neutral.40"
+      }) : null));
+    });
+  });
+};
+
+exports.WithSections = WithSections;
+
+var OrgLevel = function OrgLevel() {
+  return (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], {
+    name: "Globochem"
+  });
+};
+
+exports.OrgLevel = OrgLevel;