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

package/lib/cjs/components/LinkSelectField/LinkSelectField.js

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

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

@@ -20,7 +20,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithNoneOption = exports.NoOptionsAvailable = exports.LeftLabel = exports.HelperText = exports.DynamicItems = exports.DisabledOptions = exports.DisabledField = exports.Default = exports.Controlled = exports.AsyncLoading = void 0;
+exports["default"] = exports.WithPopoverWidth = exports.WithNoneOption = exports.NoOptionsAvailable = exports.LeftLabel = exports.HelperText = exports.DynamicItems = exports.DisabledOptions = exports.DisabledField = exports.Default = exports.Controlled = exports.AsyncLoading = void 0;
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
@@ -324,4 +324,23 @@ var AsyncLoading = exports.AsyncLoading = function AsyncLoading() {
       key: item.id
     }, item.name.given);
   }));
+};
+var WithPopoverWidth = exports.WithPopoverWidth = function WithPopoverWidth(args) {
+  return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_index.LinkSelectField, (0, _extends2["default"])({}, args, {
+    width: "100%",
+    popoverWidth: "20rem"
+  }), (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.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/cjs/hooks/useGetTheme/useGetTheme.d.ts

@@ -80,6 +80,7 @@ declare const useGetTheme: () => {
     defaultIconSize: import("../..").IconSize;
     calendarIconSize: import("../..").IconSize;
     buttonLoaderSize: import("../..").LoaderSize;
+    linkSelectFieldWidth: string;
     themeState: {
         isAstro: boolean;
         isOnyx: boolean;
@@ -170,6 +171,7 @@ declare const useGetTheme: () => {
     defaultIconSize: import("../..").IconSize;
     calendarIconSize: import("../..").IconSize;
     buttonLoaderSize: import("../..").LoaderSize;
+    linkSelectFieldWidth: string;
     themeState: {
         isOnyx: boolean;
         isOnyxDark: boolean;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.d.ts

@@ -81,4 +81,5 @@ export declare const nextGenDarkThemeValues: {
     defaultIconSize: import("../../../..").IconSize;
     calendarIconSize: import("../../../..").IconSize;
     buttonLoaderSize: import("../../../..").LoaderSize;
+    linkSelectFieldWidth: string;
 };

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/badges.d.ts

@@ -50,45 +50,50 @@ declare const badges: {
         backgroundColor: string;
         color: string;
     };
-    readOnlyFieldBadge: {
+    countBadge: {
         backgroundColor: string;
         '& span': {
             color: string;
         };
     };
-    selectedItemBadge: {
+    countNeutral: {
         backgroundColor: string;
-        paddingRight: string;
-        pl: string;
         '& span': {
-            fontSize: string;
             color: string;
-            fontWeight: number;
         };
     };
-    countBadge: {
+    selectedItemBadge: {
         backgroundColor: string;
         '& span': {
             color: string;
         };
     };
-    countNeutral: {
+    readOnlyBadge: {
+        color: string;
         backgroundColor: string;
+        borderColor: string;
         '& span': {
             color: string;
         };
     };
-    itemBadgeWithSlot: {
-        bg: string;
-        fontWeight: number;
+    readOnlyFieldBadge: {
+        color: string;
+        backgroundColor: string;
+        borderColor: string;
         '& span': {
             color: string;
         };
+    };
+    itemBadgeWithSlot: {
         '& svg': {
             path: {
                 fill: string;
             };
         };
+        backgroundColor: string;
+        '& span': {
+            color: string;
+        };
     };
     errorCalloutBadge: {
         backgroundColor: string;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/badges.js

@@ -64,18 +64,35 @@ var countNeutral = {
     color: 'white'
   }
 };
-var itemBadgeWithSlot = {
-  bg: '#455469 !important',
-  fontWeight: 2,
+var readOnlyBadge = {
+  color: 'gray-100',
+  backgroundColor: '#23282E !important',
+  borderColor: 'border.attachment',
   '& span': {
     color: 'gray-100'
-  },
+  }
+};
+var readOnlyFieldBadge = {
+  color: 'gray-100',
+  backgroundColor: '#23282E !important',
+  borderColor: 'border.attachment',
+  '& span': {
+    color: 'gray-100'
+  }
+};
+var selectedItemBadge = {
+  backgroundColor: '#155CBA !important',
+  '& span': {
+    color: 'gray-100'
+  }
+};
+var itemBadgeWithSlot = _objectSpread(_objectSpread({}, selectedItemBadge), {}, {
   '& svg': {
     path: {
       fill: 'gray-100'
     }
   }
-};
+});
 var badges = {
   baseBadge: baseBadge,
   primary: primary,
@@ -90,24 +107,11 @@ var badges = {
   criticalStatusBadge: criticalStatusBadge,
   healthyStatusBadge: healthyStatusBadge,
   secondaryStatusBadge: secondaryStatusBadge,
-  readOnlyFieldBadge: {
-    backgroundColor: '#F6F8FA !important',
-    '& span': {
-      color: 'black'
-    }
-  },
-  selectedItemBadge: {
-    backgroundColor: '#1a73e8 !important',
-    paddingRight: '0px !important',
-    pl: '10px',
-    '& span': {
-      fontSize: '14px',
-      color: 'gray-400',
-      fontWeight: 400
-    }
-  },
   countBadge: countBadge,
   countNeutral: countNeutral,
+  selectedItemBadge: selectedItemBadge,
+  readOnlyBadge: readOnlyBadge,
+  readOnlyFieldBadge: readOnlyFieldBadge,
   itemBadgeWithSlot: itemBadgeWithSlot,
   errorCalloutBadge: {
     backgroundColor: '#23282e !important',

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -423,6 +423,7 @@ declare const _default: {
             borderRadius: string;
         };
         option: {
+            color: string;
             '&.is-focused': {
                 color: string;
                 bg: string;
@@ -434,6 +435,12 @@ declare const _default: {
                     color: string;
                 };
             };
+            '&.is-condensed': {
+                color: string;
+                '&.is-focused': {
+                    color: string;
+                };
+            };
             '&.is-focus-visible': {
                 zIndex: number;
             };

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -26,15 +26,22 @@ var listBox = {
     borderRadius: '4px'
   },
   option: {
+    color: 'gray-400',
     '&.is-focused': {
-      color: 'text.primary',
-      bg: 'gray-800'
+      color: 'gray-200',
+      bg: '#2C323A'
     },
     '&.is-selected': {
-      color: 'text.primary',
-      bg: 'gray-800',
+      color: 'gray-200',
+      bg: '#2C323A',
       '&.is-focused': {
-        color: 'text.primary'
+        color: 'gray-200'
+      }
+    },
+    '&.is-condensed': {
+      color: 'gray-400',
+      '&.is-focused': {
+        color: 'gray-200'
       }
     },
     '&.is-focus-visible': {

package/lib/cjs/styles/themes/astro/customProperties/index.d.ts

@@ -74,4 +74,5 @@ export declare const astroThemeValues: {
     defaultIconSize: IconSize;
     calendarIconSize: IconSize;
     buttonLoaderSize: LoaderSize;
+    linkSelectFieldWidth: string;
 };

package/lib/cjs/styles/themes/astro/customProperties/index.js

@@ -28,6 +28,7 @@ var buttonLoaderSize = '0.5em';
 var iFrameContentDivBackgroundColor = '#F7F8FD';
 var defaultIconColor = 'currentColor';
 var defaultIconSize = 'sm';
+var linkSelectFieldWidth = '10em';
 var calendarIconSize = 25;
 var astroThemeValues = exports.astroThemeValues = {
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
@@ -49,5 +50,6 @@ var astroThemeValues = exports.astroThemeValues = {
   defaultIconColor: defaultIconColor,
   defaultIconSize: defaultIconSize,
   calendarIconSize: calendarIconSize,
-  buttonLoaderSize: buttonLoaderSize
+  buttonLoaderSize: buttonLoaderSize,
+  linkSelectFieldWidth: linkSelectFieldWidth
 };

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

@@ -274,6 +274,7 @@ declare const colors: {
         link: string;
         label: string;
         reverse: string;
+        hover: string;
     };
     active_hover: string;
     active_pressed: string;

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

@@ -84,4 +84,5 @@ export declare const nextGenThemeValues: {
     defaultIconSize: IconSize;
     calendarIconSize: IconSize;
     buttonLoaderSize: LoaderSize;
+    linkSelectFieldWidth: string;
 };

package/lib/cjs/styles/themes/next-gen/customProperties/index.js

@@ -31,6 +31,7 @@ var iFrameContentDivBackgroundColor = backgroundBaseColor;
 var defaultIconColor = 'gray-800';
 var defaultIconSize = 'md';
 var buttonLoaderSize = 'sm';
+var linkSelectFieldWidth = '12em';
 var calendarIconSize = 'sm';
 var nextGenThemeValues = exports.nextGenThemeValues = _objectSpread({
   activeColor: activeColor,
@@ -46,5 +47,6 @@ var nextGenThemeValues = exports.nextGenThemeValues = _objectSpread({
   rockerButtonGap: '0px',
   defaultIconSize: defaultIconSize,
   calendarIconSize: calendarIconSize,
-  buttonLoaderSize: buttonLoaderSize
+  buttonLoaderSize: buttonLoaderSize,
+  linkSelectFieldWidth: linkSelectFieldWidth
 }, _customSizes["default"]);

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

@@ -257,6 +257,7 @@ declare const _default: {
             link: string;
             label: string;
             reverse: string;
+            hover: string;
         };
         active_hover: string;
         active_pressed: string;
@@ -2246,7 +2247,7 @@ declare const _default: {
         baseBadge: {
             '& span': {
                 fontSize: string;
-                fontWeight: number;
+                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -2282,7 +2283,7 @@ declare const _default: {
         default: {
             '& span': {
                 fontSize: string;
-                fontWeight: number;
+                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -2320,7 +2321,7 @@ declare const _default: {
             color: string;
             '& span': {
                 fontSize: string;
-                fontWeight: number;
+                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -2357,7 +2358,7 @@ declare const _default: {
             '& span': {
                 color: string;
                 fontSize: string;
-                fontWeight: number;
+                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -2395,7 +2396,7 @@ declare const _default: {
             color: string;
             '& span': {
                 fontSize: string;
-                fontWeight: number;
+                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -2432,7 +2433,7 @@ declare const _default: {
             color: string;
             '& span': {
                 fontSize: string;
-                fontWeight: number;
+                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -2469,7 +2470,7 @@ declare const _default: {
             color: string;
             '& span': {
                 fontSize: string;
-                fontWeight: number;
+                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -2506,7 +2507,7 @@ declare const _default: {
             color: string;
             '& span': {
                 fontSize: string;
-                fontWeight: number;
+                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -2543,7 +2544,7 @@ declare const _default: {
             color: string;
             '& span': {
                 fontSize: string;
-                fontWeight: number;
+                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -2580,7 +2581,7 @@ declare const _default: {
             color: string;
             '& span': {
                 fontSize: string;
-                fontWeight: number;
+                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -2617,7 +2618,7 @@ declare const _default: {
             color: string;
             '& span': {
                 fontSize: string;
-                fontWeight: number;
+                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -2654,8 +2655,8 @@ declare const _default: {
             paddingRight: string;
             '& span': {
                 color: string;
-                fontWeight: number;
                 fontSize: string;
+                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -2690,10 +2691,13 @@ declare const _default: {
         };
         readOnlyBadge: {
             border: string;
+            borderColor: string;
+            backgroundColor: string;
             '& span': {
                 color: string;
-                fontWeight: number;
+                lineHeight: string;
                 fontSize: string;
+                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -2729,10 +2733,13 @@ declare const _default: {
         readOnlyFieldBadge: {
             '& span': {
                 color: string;
+                lineHeight: string;
                 fontSize: string;
-                fontWeight: number;
+                fontWeight: string;
             };
             border: string;
+            borderColor: string;
+            backgroundColor: string;
             '& button': {
                 alignSelf: string;
                 p: string;
@@ -2771,7 +2778,7 @@ declare const _default: {
             color: string;
             '& span': {
                 fontSize: string;
-                fontWeight: number;
+                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -2810,7 +2817,7 @@ declare const _default: {
             color: string;
             '& span': {
                 fontSize: string;
-                fontWeight: number;
+                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -2849,7 +2856,7 @@ declare const _default: {
             color: string;
             '& span': {
                 fontSize: string;
-                fontWeight: number;
+                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -2888,7 +2895,7 @@ declare const _default: {
             color: string;
             '& span': {
                 fontSize: string;
-                fontWeight: number;
+                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -2927,7 +2934,7 @@ declare const _default: {
             color: string;
             '& span': {
                 fontSize: string;
-                fontWeight: number;
+                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -2991,17 +2998,17 @@ declare const _default: {
             boxShadow: string;
         };
         itemBadgeWithSlot: {
-            bg: string;
-            fontWeight: number;
+            border: string;
             '& span': {
                 color: string;
                 fontSize: string;
-                fontWeight: number;
+                fontWeight: string;
             };
             '& svg': {
                 fill: string;
             };
-            border: string;
+            backgroundColor: string;
+            paddingRight: string;
             '& button': {
                 alignSelf: string;
                 p: string;
@@ -3034,7 +3041,7 @@ declare const _default: {
             color: string;
             '& span': {
                 fontSize: string;
-                fontWeight: number;
+                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -3071,7 +3078,7 @@ declare const _default: {
             color: string;
             '& span': {
                 fontSize: string;
-                fontWeight: number;
+                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -4435,6 +4442,9 @@ declare const _default: {
                 pl: string;
                 pr: string;
                 justifyContent: string;
+                borderRadius: string;
+                lineHeight: string;
+                color: string;
                 '&.is-focused': {
                     color: string;
                     bg: string;
@@ -4464,14 +4474,25 @@ declare const _default: {
                 '&.is-condensed': {
                     pl: string;
                     bg: string;
+                    color: string;
                     '&.is-selected': {
                         bg: string;
                     };
                     '&.is-focused': {
                         bg: string;
+                        color: string;
                     };
                 };
             };
+            sectionTitle: {
+                color: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                textTransform: string;
+                letterSpacing: string;
+                ml: string;
+            };
         };
         listView: {
             container: {

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

@@ -124,6 +124,7 @@ export declare const nextGenColors: {
         link: string;
         label: string;
         reverse: string;
+        hover: string;
     };
     active: string;
     active_hover: string;

package/lib/cjs/styles/themes/next-gen/tokens/colorTokens.js

@@ -130,7 +130,8 @@ var nextGenColors = exports.nextGenColors = {
     'light': '#5e6d82',
     'link': '#1a73e8',
     'label': '#5e6d82',
-    'reverse': '#ffffff'
+    'reverse': '#ffffff',
+    'hover': '#121518'
   },
   'active': '#1a73e8',
   'active_hover': '#1462C8',