@pingux/astro 2.163.1-alpha.1 → 2.163.1-alpha.3

package/lib/cjs/components/ComboBoxField/ComboBoxField.js

@@ -39,7 +39,7 @@ var _ListBox = _interopRequireDefault(require("../ListBox"));
 var _PopoverContainer = _interopRequireDefault(require("../PopoverContainer"));
 var _ScrollBox = _interopRequireDefault(require("../ScrollBox"));
 var _react2 = require("@emotion/react");
-var _excluded = ["hasAutoFocus", "hasAddOption", "hasCustomValue", "hasNoEmptySelection", "selectedKey", "onSelectionChange", "defaultItems", "items", "loadingState", "onLoadMore", "inputValue", "isReadOnly", "menuTrigger", "isNotFlippable", "direction", "scrollBoxProps", "controlProps", "defaultFilter", "status", "helperText"],
+var _excluded = ["hasAutoFocus", "hasAddOption", "hasCustomValue", "hasNoEmptySelection", "selectedKey", "onSelectionChange", "defaultItems", "items", "loadingState", "onLoadMore", "inputValue", "isReadOnly", "menuTrigger", "isNotFlippable", "direction", "scrollBoxProps", "controlProps", "defaultFilter", "status", "helperText", "renderEmptyState", "allowsEmptyCollection"],
   _excluded2 = ["shouldFocusOnHover", "shouldSelectOnPressUp", "UNSTABLE_itemBehavior"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -66,6 +66,8 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     defaultFilter = props.defaultFilter,
     status = props.status,
     helperText = props.helperText,
+    renderEmptyState = props.renderEmptyState,
+    allowsEmptyCollection = props.allowsEmptyCollection,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
     nonAriaProps = _getAriaAttributeProp.nonAriaProps;
@@ -81,7 +83,8 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     menuTrigger: menuTrigger,
     shouldFlip: !isNotFlippable,
     direction: direction,
-    label: 'default'
+    label: 'default',
+    allowsEmptyCollection: allowsEmptyCollection
   }, nonAriaProps);
   var popoverRef = (0, _react.useRef)();
   var buttonRef = (0, _react.useRef)();
@@ -207,7 +210,8 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isLoading: loadingState === _loadingStates["default"].LOADING_MORE,
     onLoadMore: onLoadMore,
     isFocusedOnHover: shouldFocusOnHover,
-    isSelectedOnPressUp: shouldSelectOnPressUp
+    isSelectedOnPressUp: shouldSelectOnPressUp,
+    renderEmptyState: renderEmptyState
   }, otherListBoxProps))), (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: state.close
   })));

package/lib/cjs/components/ListBox/ListBox.js

@@ -165,6 +165,18 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     };
   }, [isLoading, onLoadPrev, items]);
   (0, _useLoadPrev["default"])(memoedLoadMoreProps, listBoxRef);
+  var EmptyState = function EmptyState() {
+    var emptyState = renderEmptyState ? renderEmptyState() : null;
+    if (emptyState == null) {
+      return null;
+    }
+    return (0, _react2.jsx)(_Box["default"], {
+      as: "li",
+      isRow: true,
+      role: "option",
+      variant: "listBox.option"
+    }, emptyState);
+  };
   return (0, _react2.jsx)(_ListBoxContext.ListBoxContext.Provider, {
     value: state
   }, (0, _react2.jsx)(_Box["default"], {
@@ -206,6 +218,9 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         "aria-label": "Loading more..."
       });
     }
+    if (type === collectionTypes.PLACEHOLDER) {
+      return (0, _react2.jsx)(EmptyState, null);
+    }
     return null;
   })));
 });

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

@@ -163,4 +163,17 @@ test('should have is-focused class when hover', /*#__PURE__*/(0, _asyncToGenerat
         return _context.stop();
     }
   }, _callee);
-})));
+})));
+test('should render empty state when no items', function () {
+  getComponent({
+    items: [],
+    renderEmptyState: function renderEmptyState() {
+      return (0, _react3.jsx)("div", {
+        "data-testid": "empty-state"
+      }, "No items");
+    }
+  });
+  var emptyState = _react2.screen.getByTestId('empty-state');
+  expect(emptyState).toBeInTheDocument();
+  expect(emptyState).toHaveTextContent('No items');
+});

package/lib/cjs/components/MenuItem/MenuItem.js

@@ -10,12 +10,14 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
+var _CheckIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckIcon"));
+var _focus = require("@react-aria/focus");
 var _interactions = require("@react-aria/interactions");
 var _uuid = require("uuid");
+var _ = require("../..");
 var _MenuContext = require("../../context/MenuContext");
 var _hooks = require("../../hooks");
 var _Box = _interopRequireDefault(require("../Box"));
@@ -31,7 +33,6 @@ var MenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _item$key;
   var item = props.item,
     isPropDisabled = props.isDisabled,
-    isFocusVisible = props.isFocusVisible,
     isNotFocusedOnHover = props.isNotFocusedOnHover,
     className = props.className,
     state = props.state;
@@ -59,10 +60,6 @@ var MenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       closeOnSelect: shouldCloseOnSelect
     }, state, menuItemRef),
     menuItemProps = _useMenuItem.menuItemProps;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    isFocused = _useState2[0],
-    setFocused = _useState2[1];
   var _usePress = (0, _interactions.usePress)({
       ref: menuItemRef,
       isDisabled: isDisabled,
@@ -70,34 +67,46 @@ var MenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }),
     pressProps = _usePress.pressProps,
     isPressed = _usePress.isPressed;
-  var _useFocus = (0, _interactions.useFocus)({
-      onFocusChange: setFocused
-    }),
-    focusProps = _useFocus.focusProps;
+  var _useFocusRing = (0, _focus.useFocusRing)(),
+    focusProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
   var _useHover = (0, _interactions.useHover)({
       isDisabled: isDisabled
     }),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-      isFocused: isFocused || isHovered && !isFocusVisible,
+      isFocused: isFocusVisible && !isNotFocusedOnHover,
       isDisabled: isDisabled,
       isSelected: isSelected,
-      isPressed: isPressed
+      isPressed: isPressed,
+      isHovered: isHovered
     }),
     classNames = _useStatusClasses.classNames;
   if (isNotFocusedOnHover) {
     delete menuItemProps.onPointerEnter;
     delete menuItemProps.onPointerLeave;
   }
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "li",
+    isRow: true,
+    alignItems: "center",
+    justifyContent: "space-between",
     className: classNames,
     ref: menuItemRef,
     variant: isSeparator ? 'menuItem.separator' : 'menuItem.item',
     "data-id": dataId,
     "aria-disabled": isDisabled
-  }, (0, _reactAria.mergeProps)(pressProps, hoverProps, focusProps, menuItemProps, others)), rendered);
+  }, (0, _reactAria.mergeProps)(pressProps, hoverProps, focusProps, menuItemProps, others)), rendered, isSelected && isOnyx && (0, _react2.jsx)(_.Icon, {
+    icon: _CheckIcon["default"],
+    title: {
+      name: 'Check Icon'
+    },
+    color: "success.bright",
+    size: "sm"
+  }));
 });
 MenuItem.displayName = 'MenuItem';
 MenuItem.defaultProps = {

package/lib/cjs/components/MenuItem/MenuItem.styles.d.ts

@@ -5,7 +5,7 @@ declare const _default: {
         outline: string;
         cursor: string;
         fontFamily: string;
-        '&.is-focused, &.is-selected, &.is-pressed': {
+        '&.is-focused, &.is-selected, &.is-pressed, &.is-hovered': {
             color: string;
             bg: string;
             '> *': {

package/lib/cjs/components/MenuItem/MenuItem.styles.js

@@ -11,7 +11,7 @@ var item = {
   outline: 'none',
   cursor: 'pointer',
   fontFamily: 'standard',
-  '&.is-focused, &.is-selected, &.is-pressed': {
+  '&.is-focused, &.is-selected, &.is-pressed, &.is-hovered': {
     color: 'white',
     bg: 'active',
     '> *': {