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

package/lib/cjs/styles/themes/next-gen/variants/menu.js

@@ -4,29 +4,59 @@ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/obje
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.menuItem = exports.menu = void 0;
+exports.menuSection = exports.menuItem = exports.menu = void 0;
 var menu = exports.menu = {
   p: 'sm',
   border: '1px solid',
   borderColor: 'border.base'
 };
+var menuSection = exports.menuSection = {
+  sectionTitle: {
+    fontWeight: '1',
+    fontSize: 'tiny',
+    lineHeight: 'md',
+    textTransform: 'uppercase',
+    letterSpacing: '1px',
+    height: 'unset',
+    py: 'sm',
+    px: '12px',
+    color: 'font.light',
+    ml: 0
+  }
+};
 var menuItem = exports.menuItem = {
   item: {
     bg: 'transparent',
-    padding: '10px 10px',
+    padding: '12px 12px',
     outline: 'none',
-    color: 'text.primary',
+    color: 'gray-700',
+    fontSize: 'md',
+    lineHeight: 'body',
     cursor: 'pointer',
-    '&.is-focused, &.is-selected, &.is-pressed': {
+    borderRadius: '4px',
+    '&.is-hovered': {
+      bg: 'gray-100',
+      color: '#121518',
+      '> *': {
+        color: '#121518'
+      }
+    },
+    '&.is-focused': {
       bg: 'gray-100',
-      color: 'text.primary',
+      color: '#121518',
+      outline: '1px solid',
+      outlineOffset: '1px',
+      outlineColor: 'primary',
       '> *': {
-        color: 'text.primary'
+        color: '#121518'
       }
     },
-    '&.is-pressed': {
-      color: 'text.primary',
-      bg: 'lightblue'
+    '&.is-pressed, &.is-selected': {
+      bg: 'lightblue',
+      color: '#121518',
+      '> *': {
+        color: '#121518'
+      }
     }
   },
   separator: {

package/lib/cjs/styles/themes/next-gen/variants/popoverMenu.d.ts

@@ -1,5 +1,6 @@
 declare const _default: {
     container: {
+        minWidth: string;
         transition: string;
         '&.animate': {
             opacity: number;

package/lib/cjs/styles/themes/next-gen/variants/popoverMenu.js

@@ -6,6 +6,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var container = {
+  minWidth: '150px',
   transition: 'opacity 200ms ease',
   '&.animate': {
     opacity: 0

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -963,23 +963,53 @@ declare const _default: {
             padding: string;
             outline: string;
             color: string;
+            fontSize: string;
+            lineHeight: string;
             cursor: string;
-            '&.is-focused, &.is-selected, &.is-pressed': {
+            borderRadius: string;
+            '&.is-hovered': {
                 bg: string;
                 color: string;
                 '> *': {
                     color: string;
                 };
             };
-            '&.is-pressed': {
+            '&.is-focused': {
+                bg: string;
                 color: string;
+                outline: string;
+                outlineOffset: string;
+                outlineColor: string;
+                '> *': {
+                    color: string;
+                };
+            };
+            '&.is-pressed, &.is-selected': {
                 bg: string;
+                color: string;
+                '> *': {
+                    color: string;
+                };
             };
         };
         separator: {
             my: string;
         };
     };
+    menuSection: {
+        sectionTitle: {
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            textTransform: string;
+            letterSpacing: string;
+            height: string;
+            py: string;
+            px: string;
+            color: string;
+            ml: number;
+        };
+    };
     menuTab: {
         ml: string;
     };
@@ -1296,6 +1326,7 @@ declare const _default: {
     };
     popoverMenu: {
         container: {
+            minWidth: string;
             transition: string;
             '&.animate': {
                 opacity: number;

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -429,6 +429,7 @@ var _default = exports["default"] = {
   loader: loader,
   menu: _menu.menu,
   menuItem: _menu.menuItem,
+  menuSection: _menu.menuSection,
   menuTab: _tabs.menuTab,
   message: _messages.message,
   modal: modal,

package/lib/cjs/types/listBox.d.ts

@@ -30,7 +30,7 @@ export interface ListBoxProps extends AriaListBoxOptions<object> {
     onLoadPrev?: () => void;
     onScroll?: () => void;
     state: ListBoxStateType | SelectState<object, 'single'> | ComboBoxState<object>;
-    renderEmptyState?: React.ReactNode;
+    renderEmptyState?: () => ReactNode;
     variant?: string;
     children?: CollectionChildren<object>;
     isCondensed?: boolean;

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -10,7 +10,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-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"];
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
@@ -56,6 +56,8 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     defaultFilter = props.defaultFilter,
     status = props.status,
     helperText = props.helperText,
+    renderEmptyState = props.renderEmptyState,
+    allowsEmptyCollection = props.allowsEmptyCollection,
     others = _objectWithoutProperties(props, _excluded);
   var _getAriaAttributeProp = getAriaAttributeProps(others),
     nonAriaProps = _getAriaAttributeProp.nonAriaProps;
@@ -71,7 +73,8 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     menuTrigger: menuTrigger,
     shouldFlip: !isNotFlippable,
     direction: direction,
-    label: 'default'
+    label: 'default',
+    allowsEmptyCollection: allowsEmptyCollection
   }, nonAriaProps);
   var popoverRef = useRef();
   var buttonRef = useRef();
@@ -197,7 +200,8 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     isLoading: loadingState === loadingStates.LOADING_MORE,
     onLoadMore: onLoadMore,
     isFocusedOnHover: shouldFocusOnHover,
-    isSelectedOnPressUp: shouldSelectOnPressUp
+    isSelectedOnPressUp: shouldSelectOnPressUp,
+    renderEmptyState: renderEmptyState
   }, otherListBoxProps))), ___EmotionJSX(DismissButton, {
     onDismiss: state.close
   })));

package/lib/components/ListBox/ListBox.js

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

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

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

package/lib/components/MenuItem/MenuItem.js

@@ -1,13 +1,15 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["isSeparator", "isPressed", "data-id"];
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef } from 'react';
 import { mergeProps, useMenuItem } from 'react-aria';
-import { useFocus, useHover, usePress } from '@react-aria/interactions';
+import CheckIcon from '@pingux/mdi-react/CheckIcon';
+import { useFocusRing } from '@react-aria/focus';
+import { useHover, usePress } from '@react-aria/interactions';
 import { v4 as uuid } from 'uuid';
+import { Icon } from '../..';
 import { useMenuContext } from '../../context/MenuContext';
-import { useLocalOrForwardRef, usePropWarning, useStatusClasses } from '../../hooks';
+import { useGetTheme, useLocalOrForwardRef, usePropWarning, useStatusClasses } from '../../hooks';
 import Box from '../Box';
 
 /**
@@ -20,7 +22,6 @@ var MenuItem = /*#__PURE__*/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;
@@ -48,10 +49,6 @@ var MenuItem = /*#__PURE__*/forwardRef(function (props, ref) {
       closeOnSelect: shouldCloseOnSelect
     }, state, menuItemRef),
     menuItemProps = _useMenuItem.menuItemProps;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isFocused = _useState2[0],
-    setFocused = _useState2[1];
   var _usePress = usePress({
       ref: menuItemRef,
       isDisabled: isDisabled,
@@ -59,34 +56,46 @@ var MenuItem = /*#__PURE__*/forwardRef(function (props, ref) {
     }),
     pressProps = _usePress.pressProps,
     isPressed = _usePress.isPressed;
-  var _useFocus = useFocus({
-      onFocusChange: setFocused
-    }),
-    focusProps = _useFocus.focusProps;
+  var _useFocusRing = useFocusRing(),
+    focusProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
   var _useHover = useHover({
       isDisabled: isDisabled
     }),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
   var _useStatusClasses = 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 = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   return ___EmotionJSX(Box, _extends({
     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
-  }, mergeProps(pressProps, hoverProps, focusProps, menuItemProps, others)), rendered);
+  }, mergeProps(pressProps, hoverProps, focusProps, menuItemProps, others)), rendered, isSelected && isOnyx && ___EmotionJSX(Icon, {
+    icon: CheckIcon,
+    title: {
+      name: 'Check Icon'
+    },
+    color: "success.bright",
+    size: "sm"
+  }));
 });
 MenuItem.displayName = 'MenuItem';
 MenuItem.defaultProps = {

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

@@ -4,7 +4,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',
     '> *': {