@pingux/astro 1.27.0-alpha.24 → 1.27.0-alpha.26

package/lib/components/DataTable/DataTableChip.js

@@ -0,0 +1,33 @@
+/* eslint-disable no-nested-ternary */
+import React, { forwardRef } from 'react';
+import AlertIcon from 'mdi-react/AlertIcon';
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
+import CheckIcon from 'mdi-react/CheckIcon';
+import PropTypes from 'prop-types';
+import { Chip, Icon } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var DataTableChip = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var cell = _ref.cell;
+  var color = cell === 'Pending' ? 'line.light' : cell === 'Failed' ? 'warning.bright' : cell === 'Rejected' ? 'critical.bright' : 'success.dark';
+  return ___EmotionJSX(Chip, {
+    label: cell,
+    bg: "white",
+    ref: ref,
+    textColor: cell === 'Pending' || cell === 'Failed' ? 'text.primary' : color,
+    sx: {
+      border: '1px',
+      borderStyle: 'solid',
+      borderColor: color,
+      flexDirection: 'row-reverse !important'
+    }
+  }, cell !== 'Pending' && ___EmotionJSX(Icon, {
+    icon: cell === 'Approved' ? CheckIcon : cell === 'Rejected' ? AlertCircleIcon : cell === 'Failed' ? AlertIcon : null,
+    mr: "xs",
+    size: "14px",
+    color: color
+  }));
+});
+DataTableChip.propTypes = {
+  cell: PropTypes.string
+};
+export default DataTableChip;

package/lib/components/DataTable/DataTableChip.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DataTableChip } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(DataTableChip, props));
+};
+
+test('renders component with rejected label', function () {
+  var cell = 'Rejected';
+  getComponent({
+    cell: cell
+  });
+  expect(screen.queryByText('Rejected')).toBeInTheDocument();
+});
+test('renders component with pending label', function () {
+  var cell = 'Pending';
+  getComponent({
+    cell: cell
+  });
+  expect(screen.queryByText('Pending')).toBeInTheDocument();
+});
+test('renders component with failed label', function () {
+  var cell = 'Failed';
+  getComponent({
+    cell: cell
+  });
+  expect(screen.queryByText('Failed')).toBeInTheDocument();
+});

package/lib/components/DataTable/DataTableMenu.js

@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react';
+import DotsVerticalIcon from 'mdi-react/DotsVerticalIcon';
+import { Box, Icon, IconButton, Item, Menu, OverlayProvider, PopoverMenu, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var DataTableMenu = /*#__PURE__*/forwardRef(function (props, ref) {
+  return ___EmotionJSX(Box, {
+    ref: ref,
+    variant: "dataTable.tableMenu"
+  }, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(IconButton, {
+    "aria-label": "row menu"
+  }, ___EmotionJSX(Icon, {
+    icon: DotsVerticalIcon
+  })), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
+    key: "edit"
+  }, "Edit"), ___EmotionJSX(Item, {
+    key: "duplicate"
+  }, "Duplicate"), ___EmotionJSX(Item, {
+    key: "delete",
+    textValue: "delete"
+  }, ___EmotionJSX(Text, {
+    color: "critical.bright"
+  }, "Delete"))))));
+});
+export default DataTableMenu;

package/lib/components/DataTable/DataTableMenu.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DataTableMenu } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var getComponent = function getComponent() {
+  return render(___EmotionJSX(DataTableMenu, null));
+};
+
+test('renders component with menu', function () {
+  getComponent();
+  expect(screen.getByLabelText('row menu')).toBeInTheDocument();
+});

package/lib/components/DataTable/DataTableMultiLine.js

@@ -0,0 +1,46 @@
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { Box, Icon } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var DataTableMultiLine = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var cell = _ref.cell;
+  return ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(cell).call(cell, function (item) {
+    var _context;
+
+    return ___EmotionJSX(Box, {
+      key: _concatInstanceProperty(_context = "".concat(cell.key, "_")).call(_context, item.accountId),
+      ref: ref
+    }, ___EmotionJSX(Box, {
+      sx: {
+        flexDirection: 'row !important'
+      }
+    }, ___EmotionJSX(Box, {
+      sx: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        mx: '18px'
+      }
+    }, ___EmotionJSX(Icon, {
+      icon: item.icon,
+      color: "accent.40",
+      size: "18.75"
+    })), ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+      sx: {
+        fontWeight: 500,
+        fontSize: '15px'
+      }
+    }, item.name), ___EmotionJSX(Box, {
+      sx: {
+        color: 'neutral.40',
+        fontWeight: 400,
+        fontSize: '13px'
+      }
+    }, "Account ID: ", item.accountId))));
+  }));
+});
+DataTableMultiLine.propTypes = {
+  cell: PropTypes.arrayOf(PropTypes.shape({}))
+};
+export default DataTableMultiLine;

package/lib/components/DataTable/DataTableMultiLine.test.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ApplicationIcon from 'mdi-react/ApplicationIcon';
+import { DataTableMultiLine } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(DataTableMultiLine, props));
+};
+
+test('renders component with account name', function () {
+  var cell = [{
+    name: 'Acme',
+    icon: ApplicationIcon,
+    accountId: 123
+  }];
+  getComponent({
+    cell: cell
+  });
+  expect(screen.queryByText('Acme')).toBeInTheDocument();
+});

package/lib/components/DataTable/DataTableVirtualizer.js

@@ -0,0 +1,157 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["layout", "collection", "focusedKey", "renderView", "renderWrapper", "domRef", "bodyRef", "setTableWidth", "getColumnWidth", "onVisibleRectChange"];
+import PropTypes from 'prop-types';
+import React, { forwardRef, useCallback, useRef } from 'react';
+import { chain, mergeProps, useLayoutEffect } from '@react-aria/utils';
+import { ScrollView, setScrollLeft, useVirtualizer } from '@react-aria/virtualizer';
+import { useVirtualizerState } from '@react-stately/virtualizer';
+import { Box } from '../../index';
+/**
+ * Custom Virtualizer using react aria Spectrum TableView/TableVirtualizer
+ * Primarily utilizes [TableView](https://react-spectrum.adobe.com/react-spectrum/TableView.html)
+*/
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var DataTableVirtualizer = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _layout$getLayoutInfo;
+
+  var layout = _ref.layout,
+      collection = _ref.collection,
+      focusedKey = _ref.focusedKey,
+      renderView = _ref.renderView,
+      renderWrapper = _ref.renderWrapper,
+      domRef = _ref.domRef,
+      bodyRef = _ref.bodyRef,
+      setTableWidth = _ref.setTableWidth,
+      getColumnWidth = _ref.getColumnWidth,
+      onVisibleRectChangeProp = _ref.onVisibleRectChange,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
+  var direction = 'ltr'; // useLocale override
+
+  var headerRef = useRef(ref);
+  var loadingState = collection.body.props.loadingState;
+  var isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
+  var onLoadMore = collection.body.props.onLoadMore;
+  var state = useVirtualizerState({
+    layout: layout,
+    collection: collection,
+    renderView: renderView,
+    renderWrapper: renderWrapper,
+    onVisibleRectChange: function onVisibleRectChange(rect) {
+      // eslint-disable-next-line no-param-reassign
+      bodyRef.current.scrollTop = rect.y;
+      setScrollLeft(bodyRef.current, direction, rect.x);
+    },
+    transitionDuration: isLoading ? 160 : 220
+  });
+
+  var _useVirtualizer = useVirtualizer({
+    focusedKey: focusedKey,
+    scrollToItem: function scrollToItem(key) {
+      var item = collection.getItem(key);
+      state.virtualizer.scrollToItem(key, {
+        duration: 0,
+        // Prevent scrolling to the top when clicking on column headers.
+        shouldScrollY: (item === null || item === void 0 ? void 0 : item.type) !== 'column',
+        // Offset scroll position by width of selection cell
+        // (which is sticky and will overlap the cell we're scrolling to).
+        offsetX: 0
+      });
+    }
+  }, state, domRef),
+      virtualizerProps = _useVirtualizer.virtualizerProps; // If column widths change, need to relay out.
+
+
+  useLayoutEffect(function () {
+    state.virtualizer.relayoutNow({
+      sizeChanged: true
+    });
+  }, [state.virtualizer]);
+  var headerHeight = ((_layout$getLayoutInfo = layout.getLayoutInfo('header')) === null || _layout$getLayoutInfo === void 0 ? void 0 : _layout$getLayoutInfo.rect.height) || 0;
+  var visibleRect = state.virtualizer.visibleRect; // Sync the scroll position from the table body to the header container.
+
+  var onScroll = useCallback(function () {
+    headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
+  }, [bodyRef]);
+  var onVisibleRectChange = useCallback(function (rect) {
+    setTableWidth(rect.width);
+    state.setVisibleRect(rect);
+
+    if (!isLoading && onLoadMore) {
+      var scrollOffset = state.virtualizer.contentSize.height - rect.height * 2;
+
+      if (rect.y > scrollOffset) {
+        onLoadMore();
+      }
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [onLoadMore, isLoading, state.setVisibleRect, state.virtualizer]);
+  useLayoutEffect(function () {
+    if (!isLoading && onLoadMore && !state.isAnimating) {
+      if (state.contentSize.height <= state.virtualizer.visibleRect.height) {
+        onLoadMore();
+      }
+    }
+  }, [state.contentSize, state.virtualizer, state.isAnimating, onLoadMore, isLoading]);
+  return ___EmotionJSX(Box, _extends({}, mergeProps(otherProps, virtualizerProps), {
+    ref: domRef
+  }), ___EmotionJSX(Box, {
+    role: "presentation",
+    variant: "dataTable.tableHeadWrapper",
+    style: {
+      width: visibleRect.width,
+      height: headerHeight,
+      overflow: 'hidden',
+      position: 'relative',
+      willChange: state.isScrolling ? 'scroll-position' : '',
+      transition: state.isAnimating ? "none ".concat(state.virtualizer.transitionDuration, "ms") : undefined
+    },
+    ref: headerRef
+  }, state.visibleViews[0]), ___EmotionJSX(ScrollView, {
+    role: "presentation",
+    variant: "dataTable.tableBody",
+    style: {
+      flex: 1
+    },
+    innerStyle: {
+      overflow: 'visible',
+      transition: state.isAnimating ? "none ".concat(state.virtualizer.transitionDuration, "ms") : undefined
+    },
+    ref: bodyRef,
+    contentSize: state.contentSize,
+    onVisibleRectChange: chain(onVisibleRectChange, onVisibleRectChangeProp),
+    onScrollStart: state.startScrolling,
+    onScrollEnd: state.endScrolling,
+    onScroll: onScroll
+  }, state.visibleViews[1]));
+});
+DataTableVirtualizer.propTypes = {
+  bodyRef: PropTypes.shape({
+    current: PropTypes.shape({
+      scrollLeft: PropTypes.number,
+      scrollTop: PropTypes.number
+    })
+  }),
+  collection: PropTypes.shape({
+    body: PropTypes.shape({
+      props: PropTypes.shape({
+        loadingState: PropTypes.string,
+        onLoadMore: PropTypes.func
+      })
+    }),
+    getItem: PropTypes.func
+  }),
+  domRef: PropTypes.shape({}),
+  focusedKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  getColumnWidth: PropTypes.func,
+  layout: PropTypes.shape({
+    getLayoutInfo: PropTypes.func
+  }),
+  onVisibleRectChange: PropTypes.func,
+  renderView: PropTypes.func,
+  renderWrapper: PropTypes.func,
+  setTableWidth: PropTypes.func
+};
+export default DataTableVirtualizer;

package/lib/components/DataTable/index.js

@@ -0,0 +1,5 @@
+export { default } from './DataTable';
+export { default as DataTableChip } from './DataTableChip';
+export { default as DataTableMultiLine } from './DataTableMultiLine';
+export { default as DataTableVirtualize } from './DataTableVirtualizer';
+export { default as DataTableMenu } from './DataTableMenu';

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -0,0 +1,335 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem", "popoverProps"];
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(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 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { useFilter } from '@react-aria/i18n';
+import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
+import HomeIcon from 'mdi-react/HomeIcon';
+import PropTypes from 'prop-types';
+import { useOverlayTriggerState } from '@react-stately/overlays';
+import { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
+import { mergeProps } from '@react-aria/utils';
+import ArrowDropUpIcon from 'mdi-react/ArrowDropUpIcon';
+import ArrowDropDownIcon from 'mdi-react/ArrowDropDownIcon';
+import { FocusScope } from '@react-aria/focus';
+import { useListState } from '@react-stately/list';
+import ListBox from '../ListBox';
+import { isIterableProp } from '../../utils/devUtils/props/isIterable';
+import { Breadcrumbs, Button, Icon, Item, PopoverContainer, ScrollBox, SearchField, Text } from '../../index';
+/** The Environment Picker with Search and Sections support */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      imperativeDisabledKeys = props.disabledKeys,
+      emptySearchText = props.emptySearchText,
+      isDefaultOpen = props.isDefaultOpen,
+      isOpen = props.isOpen,
+      items = props.items,
+      imperativeItemsFilter = props.itemsFilter,
+      onOpenChange = props.onOpenChange,
+      onNamePress = props.onNamePress,
+      imperativeOnPopoverClose = props.onPopoverClose,
+      imperativeOnPopoverOpen = props.onPopoverOpen,
+      onSelectionChange = props.onSelectionChange,
+      name = props.name,
+      searchProps = props.searchProps,
+      selectedItem = props.selectedItem,
+      popoverProps = props.popoverProps,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      searchValue = _useState2[0],
+      setSearchValue = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectedKeys = _useState4[0],
+      setSelectedKeys = _useState4[1];
+
+  var breadcrumbsRef = useRef();
+  var overlayRef = React.useRef();
+  var triggerRef = React.useRef();
+  var scrollBoxRef = React.useRef();
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return breadcrumbsRef.current;
+  });
+
+  var _useFilter = useFilter({
+    sensitivity: 'base'
+  }),
+      contains = _useFilter.contains;
+
+  var filterNodesWithChildren = function filterNodesWithChildren(iterableNode) {
+    var nodeArr = _Array$from(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 = _mapInstanceProperty(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: _filterInstanceProperty(_context = _Array$from(nodeItem.childNodes)).call(_context, f)
+        });
+      }
+    }); // we are filtering null items here since we were not able to filter them in previous function
+
+
+    return _filterInstanceProperty(filteredSections).call(filteredSections, function (item) {
+      return item;
+    });
+  };
+
+  var popoverState = useOverlayTriggerState({
+    defaultOpen: isDefaultOpen,
+    isOpen: isOpen,
+    onOpenChange: onOpenChange
+  });
+  var handlePopoverClose = useCallback(function () {
+    if (imperativeOnPopoverClose) {
+      imperativeOnPopoverClose();
+    }
+
+    setSearchValue('');
+    popoverState.close();
+  }, [imperativeOnPopoverClose, popoverState]);
+  var handleSelectionChange = useCallback(function (selectedItemSet) {
+    var _selectedItemSet = _slicedToArray(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 = 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 = 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
+          _forEachInstanceProperty(listItemsArr).call(listItemsArr, function (item) {
+            return f(item);
+          });
+        }
+      }
+    })(listBoxState);
+
+    return !isListHasItems;
+  }, [listBoxState]);
+
+  var _useOverlayTrigger = useOverlayTrigger({
+    type: 'listbox'
+  }, popoverState, triggerRef),
+      triggerProps = _useOverlayTrigger.triggerProps,
+      overlayProps = _useOverlayTrigger.overlayProps;
+
+  var handlePopoverOpen = function handlePopoverOpen() {
+    if (imperativeOnPopoverOpen) {
+      imperativeOnPopoverOpen();
+    }
+
+    popoverState.open();
+  };
+
+  var _useOverlayPosition = useOverlayPosition({
+    isOpen: popoverState.isOpen,
+    offset: 6,
+    onClose: handlePopoverClose,
+    overlayRef: overlayRef,
+    scrollRef: scrollBoxRef,
+    shouldUpdatePosition: true,
+    targetRef: triggerRef
+  }),
+      positionProps = _useOverlayPosition.overlayProps;
+
+  var EmptyListState = ___EmotionJSX(Text, {
+    py: 10,
+    px: 15
+  }, emptySearchText);
+
+  var _selectedKeys = _slicedToArray(selectedKeys, 1),
+      selectedValue = _selectedKeys[0];
+
+  var ItemsSelect = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, _extends({}, triggerProps, {
+    onPress: handlePopoverOpen,
+    ref: triggerRef,
+    variant: "environmentBreadcrumb.current",
+    "aria-label": "".concat((typeof selectedItem === 'string' ? selectedItem : selectedValue) || 'Selected Item')
+  }), selectedItem, ___EmotionJSX(Icon, {
+    icon: popoverState.isOpen ? ArrowDropUpIcon : ArrowDropDownIcon
+  })), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, mergeProps(overlayProps, positionProps, popoverProps), {
+    ref: overlayRef,
+    isOpen: popoverState.isOpen,
+    scrollRef: scrollBoxRef,
+    onClose: handlePopoverClose,
+    hasNoArrow: true,
+    isDismissable: true,
+    p: 10
+  }), ___EmotionJSX(FocusScope, {
+    restoreFocus: true,
+    autoFocus: true,
+    contain: true
+  }, ___EmotionJSX(ScrollBox, {
+    ref: scrollBoxRef
+  }, ___EmotionJSX(SearchField, _extends({
+    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 : ___EmotionJSX(ListBox, {
+    state: listBoxState,
+    "aria-label": "Items List"
+  })))));
+
+  var handleOnAction = useCallback(function (actionKey) {
+    if (actionKey === 'name' && onNamePress) {
+      onNamePress();
+    }
+  }, [onNamePress]);
+  return ___EmotionJSX(Breadcrumbs, _extends({
+    icon: ChevronRightIcon,
+    ref: breadcrumbsRef,
+    onAction: handleOnAction,
+    iconProps: {
+      color: 'neutral.70',
+      mx: 5,
+      size: 16
+    }
+  }, others), ___EmotionJSX(Item, {
+    key: "name",
+    variant: "environmentBreadcrumb.current",
+    "data-testid": "name",
+    "aria-label": name,
+    elementType: "Button"
+  }, ___EmotionJSX(Icon, {
+    icon: HomeIcon,
+    mr: 7
+  }), name), selectedItem && ___EmotionJSX(Item, {
+    key: "itemsSelect",
+    elementType: "Fragment"
+  }, ItemsSelect));
+});
+export default EnvironmentBreadcrumb;
+EnvironmentBreadcrumb.propTypes = {
+  /** Callback function that fires when the selected key changes. */
+  onSelectionChange: PropTypes.func,
+
+  /** Current environment */
+  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
+  /** Displayed name */
+  name: PropTypes.string,
+
+  /** Callback function that fires when name pressed */
+  onNamePress: PropTypes.func,
+
+  /** The list of environments. */
+  items: isIterableProp,
+
+  /**
+   * Filter function to generate a filtered list of nodes.
+   *
+   * `(nodes: Iterable<Node>) => Iterable<Node>`
+   */
+  itemsFilter: PropTypes.func,
+
+  /** Callback function that fires when the dropdown is opened. */
+  onPopoverOpen: PropTypes.func,
+
+  /** Callback function that fires when the dropdown is closed. */
+  onPopoverClose: PropTypes.func,
+
+  /** Props object that is spread directly into the popover container component. */
+  popoverProps: PropTypes.shape({}),
+
+  /** Props object that is spread directly into the SearchField element. */
+  searchProps: PropTypes.shape({}),
+
+  /** Array of keys to disable within the options list. */
+  disabledKeys: PropTypes.arrayOf(PropTypes.string),
+
+  /** Text that will be shown if no search results found. */
+  emptySearchText: PropTypes.string,
+
+  /** Sets the default open state of the overlay. */
+  isDefaultOpen: PropTypes.bool,
+
+  /** Whether the overlay is currently open. */
+  isOpen: PropTypes.bool,
+
+  /**
+   * Method that is called when the open state of the menu changes.
+   *
+   * `(isOpen: boolean, overlayTrigger: OverlayTriggerAction) => void`
+   */
+  onOpenChange: PropTypes.func
+};
+EnvironmentBreadcrumb.defaultProps = {
+  emptySearchText: 'No Search Result'
+};