@pingux/astro 1.2.0-alpha.0 → 1.2.0-alpha.1

package/lib/cjs/components/Breadcrumbs/BreadcrumbItem.js

@@ -85,6 +85,9 @@ var BreadcrumbItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       case 'Text':
         return _index.Text;
 
+      case 'Fragment':
+        return _react.Fragment;
+
       default:
         return elementType;
     }

package/lib/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -12,9 +12,13 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = void 0;
 
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 
@@ -45,7 +49,11 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       icon = props.icon,
       iconProps = props.iconProps,
       onAction = props.onAction,
-      others = (0, _objectWithoutProperties2["default"])(props, ["children", "icon", "iconProps", "onAction"]);
+      others = (0, _objectWithoutProperties2["default"])(props, ["children", "icon", "iconProps", "onAction"]); // the following filters undefined values passed as a child
+
+  var filteredChildren = (0, _isArray["default"])(children) ? (0, _filter["default"])(children).call(children, function (child) {
+    return child;
+  }) : children;
 
   var _useBreadcrumbs = (0, _breadcrumbs.useBreadcrumbs)(props),
       wrapperProps = _useBreadcrumbs.navProps;
@@ -57,26 +65,28 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return breadcrumbsRef.current;
   });
-  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    ref: breadcrumbsRef,
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    sx: {
-      overflow: 'auto'
-    }
-  }, (0, _utils.mergeProps)(wrapperProps, others)), (0, _map["default"])(children).call(children, function (child, idx) {
+  var createBreadcrumb = (0, _react.useCallback)(function (child, idx) {
+    var isCurrentItem = (0, _isArray["default"])(filteredChildren) && filteredChildren.length > 1 ? idx === children.length - 1 : true;
     return (0, _react2.jsx)(_react.Fragment, {
       key: "fragment-".concat(child.key)
     }, (0, _react2.jsx)(_BreadcrumbItem["default"], (0, _extends2["default"])({
       "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 && (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
+    }, child.props), child.props.children), icon && !isCurrentItem && (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
       icon: icon
     }, iconProps)));
-  }));
+  }, [children.length, filteredChildren, icon, iconProps, onAction]);
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    ref: breadcrumbsRef,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    sx: {
+      overflow: 'auto'
+    }
+  }, (0, _utils.mergeProps)(wrapperProps, others)), (0, _isArray["default"])(filteredChildren) ? (0, _map["default"])(filteredChildren).call(filteredChildren, createBreadcrumb) : createBreadcrumb(children));
 });
 Breadcrumbs.propTypes = {
   /** The icon to render in between each node. */

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

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

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

@@ -0,0 +1,338 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+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 _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+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 _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 _defineProperty3 = _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");
+
+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 _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context3; (0, _forEach["default"])(_context3 = ownKeys(Object(source))).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(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, ["children", "disabledKeys", "emptySearchText", "items", "itemsFilter", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem"]);
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      searchValue = _useState2[0],
+      setSearchValue = _useState2[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];
+
+    onSelectionChange(selectedItemKey);
+    handlePopoverClose();
+  }, [handlePopoverClose, onSelectionChange]);
+  var listBoxProps = {
+    children: children,
+    disabledKeys: imperativeDisabledKeys,
+    items: items,
+    filter: imperativeItemsFilter || filterNodesWithChildren,
+    onSelectionChange: handleSelectionChange,
+    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 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 : '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: 10
+    }
+  }, others), (0, _react2.jsx)(_index.Item, {
+    key: "name",
+    variant: "environmentBreadcrumb.current",
+    "data-testid": "name",
+    "aria-label": name
+  }, (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'
+};