@pingux/astro 2.163.1-alpha.2 → 2.163.1-alpha.4

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

@@ -2162,6 +2162,7 @@ declare const _default: {
         daVinci: import("@pingux/mdi-react").MdiReactIconComponentType;
         DefaultCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
         Descending: import("@pingux/mdi-react").MdiReactIconComponentType;
+        popoverMenuIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
         ErrorCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
         integrationsIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
         listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;
@@ -4631,23 +4632,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;
         };
@@ -4964,6 +4995,7 @@ declare const _default: {
         };
         popoverMenu: {
             container: {
+                minWidth: string;
                 transition: string;
                 '&.animate': {
                     opacity: number;

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

@@ -3,23 +3,53 @@ export declare const menu: {
     border: string;
     borderColor: string;
 };
+export declare const menuSection: {
+    sectionTitle: {
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        textTransform: string;
+        letterSpacing: string;
+        height: string;
+        py: string;
+        px: string;
+        color: string;
+        ml: number;
+    };
+};
 export declare const menuItem: {
     item: {
         bg: string;
         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: {

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/components/LinkSelectField/LinkSelectField.js

@@ -31,17 +31,19 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     isDisabled = props.isDisabled,
     status = props.status,
     helperText = props.helperText,
-    hasInlineLoader = props.hasInlineLoader;
+    hasInlineLoader = props.hasInlineLoader,
+    popoverWidth = props.popoverWidth;
   var _getAriaAttributeProp = getAriaAttributeProps(props),
     ariaProps = _getAriaAttributeProp.ariaProps;
   var _useGetTheme = useGetTheme(),
+    linkSelectFieldWidth = _useGetTheme.linkSelectFieldWidth,
     themeState = _useGetTheme.themeState;
   var isOnyx = themeState.isOnyx;
   var helperTextId = uuid();
   usePropWarning(props, 'disabled', 'isDisabled');
   var _useSelectField = useSelectField(_objectSpread(_objectSpread({
       listboxStyle: {
-        width: '10em'
+        width: popoverWidth || linkSelectFieldWidth
       }
     }, props), {}, {
       // Need this for not applying is-default class
@@ -152,7 +154,9 @@ LinkSelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
    */
   onSelectionChange: PropTypes.func,
   /** Display an inline loader inside the select trigger while loading. */
-  hasInlineLoader: PropTypes.bool
+  hasInlineLoader: PropTypes.bool,
+  /** Width of the popover menu. Accepts any valid CSS unit. */
+  popoverWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 }, statusPropTypes), inputFieldAttributesBasePropTypes), ariaAttributesBasePropTypes);
 LinkSelectField.defaultProps = _objectSpread({
   placeholder: 'Select',

package/lib/components/LinkSelectField/LinkSelectField.stories.js

@@ -315,4 +315,23 @@ export var AsyncLoading = function AsyncLoading() {
       key: item.id
     }, item.name.given);
   }));
+};
+export var WithPopoverWidth = function WithPopoverWidth(args) {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(LinkSelectField, _extends({}, args, {
+    width: "100%",
+    popoverWidth: "20rem"
+  }), ___EmotionJSX(Item, {
+    key: "red"
+  }, "Red"), ___EmotionJSX(Item, {
+    key: "blue"
+  }, "Blue"), ___EmotionJSX(Item, {
+    key: "yellow"
+  }, "Extra long goes here")));
+};
+WithPopoverWidth.parameters = {
+  docs: {
+    description: {
+      story: 'The `popoverWidth` prop can be used to set a custom width for the dropdown/popover.'
+    }
+  }
 };

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