@pingux/astro 2.239.0-alpha.0 → 2.241.0-alpha.0

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

@@ -181,7 +181,7 @@ input.multivaluesWrapper = {
   flexDirection: 'row !important',
   flexWrap: 'wrap',
   pt: 6,
-  pr: 10,
+  pr: 12,
   pb: 5,
   pl: 12,
   borderRadius: '2px',

package/lib/cjs/components/LinkSelectField/LinkSelectField.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { LinkSelectFieldProps } from '../../types/linkSelectField';
+declare const LinkSelectField: React.ForwardRefExoticComponent<LinkSelectFieldProps & React.RefAttributes<HTMLDivElement>>;
+export default LinkSelectField;

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

@@ -8,14 +8,12 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
 var _SelectFieldBase = _interopRequireDefault(require("../SelectFieldBase"));
 var _react2 = require("@emotion/react");
@@ -75,7 +73,7 @@ const LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     variant: "selectLink",
     tabIndex: isDisabled ? -1 : 0
   }, (0, _pendoID.getPendoID)(displayName), triggerProps, raTriggerProps, ariaProps, {
-    "aria-describedby": helperText && helperTextId
+    "aria-describedby": helperText ? helperTextId : undefined
   }), (0, _react2.jsx)(_.Text, {
     variant: "linkSelectFieldLabel",
     className: "link-select-field-placeholder"
@@ -104,92 +102,11 @@ const LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     id: helperTextId
   }, helperText));
   return (0, _react2.jsx)(_SelectFieldBase.default, (0, _extends2.default)({}, props, selectFieldProps, {
+    label: props.label,
+    helperText: props.helperText,
     trigger: triggerProp || triggerNode
   }));
 });
-LinkSelectField.propTypes = {
-  /** Alignment of the popover menu relative to the trigger. */
-  align: _propTypes.default.oneOf(['start', 'end', 'middle']),
-  /** Where the popover menu opens relative to its trigger. */
-  direction: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
-  /** The initial selected key in the collection (uncontrolled). */
-  defaultSelectedKey: _propTypes.default.string,
-  /** Array of keys to disable within the options list. */
-  disabledKeys: _propTypes.default.arrayOf(_propTypes.default.string),
-  /** Whether the collection allows empty selection. */
-  hasNoEmptySelection: _propTypes.default.bool,
-  /** Whether the field has a status indicator. */
-  hasNoStatusIndicator: _propTypes.default.bool,
-  /** Text rendered below the input. */
-  helperText: _propTypes.default.node,
-  /** Props object that is spread directly into the helphint element. */
-  helpHintProps: _propTypes.default.shape({}),
-  /** If present this prop will cause a help hint to render in the label of the field. */
-  hintText: _propTypes.default.string,
-  /** Sets the default open state of the menu. */
-  isDefaultOpen: _propTypes.default.bool,
-  /** Whether the input is disabled. */
-  isDisabled: _propTypes.default.bool,
-  /** Whether the items are currently loading. */
-  isLoading: _propTypes.default.bool,
-  /** @ignore Whether the menu should automatically flip direction when space is limited. */
-  isNotFlippable: _propTypes.default.bool,
-  /** Sets the open state of the menu. */
-  isOpen: _propTypes.default.bool,
-  /** @ignore Whether the input can be selected but not changed by the user. */
-  isReadOnly: _propTypes.default.bool,
-  /** Whether user input is required on the input before form submission. */
-  isRequired: _propTypes.default.bool,
-  /**
-   * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
-   * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
-   */
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({})),
-  /** The label for the select element. */
-  label: _propTypes.default.node,
-  /** The name for the select element, used when submitting a form. */
-  name: _propTypes.default.string,
-  /** Temporary text that occupies the text input when it is empty. */
-  placeholder: _propTypes.default.string,
-  /** The currently selected key in the collection (controlled). */
-  selectedKey: _propTypes.default.string,
-  /**
-   * Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.
-   *
-   * () => any
-   */
-  onLoadMore: _propTypes.default.func,
-  /**
-   * Method that is called when the open state of the menu changes.
-   *
-   * (isOpen: boolean) => void
-   */
-  onOpenChange: _propTypes.default.func,
-  /**
-   * Handler that is called when the selection changes.
-   *
-   * (key: Key) => any
-   */
-  onSelectionChange: _propTypes.default.func,
-  /** Display an inline loader inside the select trigger while loading. */
-  hasInlineLoader: _propTypes.default.bool,
-  /**
-   * Props object that is spread directly into the Icon inside the default trigger button.
-   * Supports all IconProps (icon, title, size, color, sx, etc.).
-   * The sx prop is merged with the rotation style.
-   */
-  iconProps: _propTypes.default.shape({}),
-  /** Width of the popover menu. Accepts any valid CSS unit. */
-  popoverWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  /**
-   * A ReactNode that replaces the default Button trigger entirely.
-   * When provided, the local Button element is not rendered.
-   */
-  trigger: _propTypes.default.node,
-  ..._statusProp.statusPropTypes,
-  ..._fieldAttributes.inputFieldAttributesBasePropTypes,
-  ..._ariaAttributes.ariaAttributesBasePropTypes
-};
 LinkSelectField.defaultProps = {
   placeholder: 'Select',
   align: 'start',

package/lib/cjs/components/LinkSelectField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './LinkSelectField';

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

@@ -13,6 +13,7 @@ var _listbox = require("@react-aria/listbox");
 var _MultivaluesContext = require("../../context/MultivaluesContext");
 var _hooks = require("../../hooks");
 var _Box = _interopRequireDefault(require("../Box"));
+var _CheckboxIcons = require("../Checkbox/CheckboxIcons");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _ListBoxContext = require("./ListBoxContext");
 var _react2 = require("@emotion/react");
@@ -125,17 +126,30 @@ const Option = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     onPointerOver: setFocusOnHover
   }, theseOptionProps, others, {
     "aria-label": ariaLabel
-  }), isCondensed ? (0, _react2.jsx)(_Box.default, {
-    isRow: true,
-    alignItems: "center",
-    flex: "1"
-  }, (0, _react2.jsx)(_Icon.default, {
+  }), isCondensed && (isOnyx ? (0, _react2.jsx)(_CheckboxIcons.OnyxDefaultCheckboxIcon, {
+    isChecked: isSelected,
+    sx: {
+      mr: 'sm',
+      color: isSelected ? 'primary' : 'gray-500',
+      '&.is-disabled': {
+        color: 'gray-400'
+      },
+      '&.is-focused, &.is-focus-visible': {
+        outline: '2px solid',
+        outlineColor: 'focus'
+      }
+    }
+  }) : (0, _react2.jsx)(_Icon.default, {
     icon: isSelected ? CheckedIcon : UncheckedIcon,
     color: "active",
-    mr: "xs",
+    mr: "sm",
     className: classNames,
     variant: "listBox.checkboxIcon"
-  }), rendered) : (0, _react2.jsx)(_react.default.Fragment, null, isSelected && !isOnyx && shouldShowSelectedOption && (0, _react2.jsx)(_Icon.default, {
+  })), isCondensed && (0, _react2.jsx)(_Box.default, {
+    isRow: true,
+    alignItems: "center",
+    flex: "1"
+  }, rendered), !isCondensed && (0, _react2.jsx)(_react.default.Fragment, null, isSelected && !isOnyx && shouldShowSelectedOption && (0, _react2.jsx)(_Icon.default, {
     icon: _CircleSmallIcon.default,
     title: {
       name: 'Circle Small Icon'

package/lib/cjs/components/MultivaluesField/BadgeLabelTooltip.js

@@ -53,6 +53,7 @@ const BadgeLabelTooltip = ({
     variant: "badge.deleteButton",
     "aria-describedby": "selectedKeysState"
   }, item.buttonProps), (0, _react2.jsx)(_.Icon, {
+    color: "text.primary",
     icon: _CloseIcon.default,
     size: 14,
     title: {

package/lib/cjs/components/MultivaluesField/CondensedMultivaluesField.js

@@ -248,10 +248,12 @@ const CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)((props, re
     onPress: handleSelection,
     ref: buttonRef,
     variant: "listBoxLink",
-    mt: "sm",
-    ml: "14px",
     sx: {
-      fontWeight: '400'
+      fontWeight: '400',
+      width: '100%',
+      justifyContent: 'flex-start',
+      pl: 'lg',
+      pr: 'md'
     }
   }, selectionState), (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: close
@@ -337,7 +339,7 @@ const CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)((props, re
   }, (0, _react2.jsx)(_.Icon, (0, _extends2.default)({
     icon: isOpen ? MenuUp : MenuDown
   }, isOnyx && {
-    size: 'sm'
+    size: 'md'
   }, {
     title: {
       name: ''

package/lib/cjs/components/MultivaluesField/DefaultMultivaluesField.js

@@ -447,7 +447,11 @@ const DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         isRow: true,
         sx: {
           p: 0,
-          flexWrap: 'wrap'
+          flexWrap: 'wrap',
+          ...(isOnyx && {
+            columnGap: 'xs',
+            rowGap: 'xs'
+          })
         }
       }, selectedItems), isOnyx ? onyxReadOnlyInputEntry : readOnlyInputEntry, selectionManager.selectedKeys.size > 0 && visuallyHidden)
     },

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

@@ -118,6 +118,7 @@ export declare const colors: {
         headerColor: string;
     };
     critical: {
+        bright: string;
         dark: string;
     };
     common: {

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

@@ -182,6 +182,7 @@ const colors = exports.colors = {
   badge,
   codeEditor,
   critical: {
+    bright: _onyxTokens.astroTokensDark.color.red[300],
     dark: _onyxTokens.astroTokensDark.color.red[100]
   },
   common

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

@@ -141,22 +141,32 @@ declare const badges: {
         '& span': {
             color: string;
         };
+        '& svg': {
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
     };
     readOnlyBadge: {
         color: string;
         backgroundColor: string;
         borderColor: string;
         '& span': {
+            fontWeight: number;
             color: string;
+            fontSize: number;
+            lineHeight: string;
         };
     };
     readOnlyFieldBadge: {
-        color: string;
-        backgroundColor: string;
-        borderColor: string;
         '& span': {
+            fontWeight: number;
             color: string;
         };
+        color: string;
+        backgroundColor: string;
+        borderColor: string;
     };
     itemBadgeWithSlot: {
         '& svg': {

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

@@ -110,32 +110,42 @@ const countNeutral = {
   }
 };
 const readOnlyBadge = {
-  color: _onyxTokens.astroTokensDark.color.gray[100],
-  backgroundColor: '#23282E !important',
+  color: _onyxTokens.astroTokensDark.color.gray[600],
+  backgroundColor: 'white !important',
   borderColor: 'border.attachment',
   '& span': {
-    color: _onyxTokens.astroTokensDark.color.gray[100]
+    fontWeight: 0,
+    color: _onyxTokens.astroTokensDark.color.gray[600],
+    fontSize: _onyxTokens.astroTokensDark.default['font-size'].small,
+    lineHeight: '18px'
   }
 };
 const readOnlyFieldBadge = {
-  color: _onyxTokens.astroTokensDark.color.gray[100],
-  backgroundColor: '#23282E !important',
-  borderColor: 'border.attachment',
+  ...readOnlyBadge,
   '& span': {
-    color: _onyxTokens.astroTokensDark.color.gray[100]
+    fontWeight: 0,
+    color: _onyxTokens.astroTokensDark.color.gray[600]
   }
 };
+
+// Onyx dark selected-tag spec: neutral surface, not the light-theme blue (UXE-8463 QA)
 const selectedItemBadge = {
-  backgroundColor: '#155CBA !important',
+  backgroundColor: '#2C323A !important',
   '& span': {
-    color: _onyxTokens.astroTokensDark.color.gray[100]
+    color: _onyxTokens.astroTokensDark.color.gray[200]
+  },
+  '& svg': {
+    color: _onyxTokens.astroTokensDark.color.gray[200],
+    path: {
+      fill: _onyxTokens.astroTokensDark.color.gray[200]
+    }
   }
 };
 const itemBadgeWithSlot = {
   ...selectedItemBadge,
   '& svg': {
     path: {
-      fill: _onyxTokens.astroTokensDark.color.gray[100]
+      fill: _onyxTokens.astroTokensDark.color.gray[200]
     }
   }
 };

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

@@ -37,7 +37,7 @@ const checkbox = exports.checkbox = {
   '.is-focused &': {
     outline: '2px solid',
     outlineColor: _onyxTokens.astroTokensDark.color.blue[400],
-    outlineOffset: '2px'
+    outlineOffset: '0px'
   },
   'input:disabled ~ &': {
     opacity: 0.5

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

@@ -32,6 +32,7 @@ input.fieldControlWrapper = {
 };
 input.multivaluesWrapper = {
   backgroundColor: 'backgroundBase',
+  rowGap: 'xs',
   '&.is-read-only': {
     boxShadow: 'inset 0 0 0 100px #30373f',
     border: '1px solid',

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

@@ -40,7 +40,7 @@ const text = exports.text = {
   },
   placeholder: {
     color: _onyxTokens.astroTokensDark.color.gray[400],
-    fontWeight: 1
+    fontWeight: 400
   },
   messagesText: {
     '&.is-success, &.is-warning, &.is-error, &.is-default': {

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

@@ -464,6 +464,9 @@ declare const _default: {
         };
         option: {
             color: string;
+            '&.is-disabled': {
+                color: string;
+            };
             '&.is-focused': {
                 color: string;
                 bg: string;

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

@@ -27,6 +27,9 @@ const listBox = {
   },
   option: {
     color: _onyxTokens.astroTokensDark.color.common.menu.item.text,
+    '&.is-disabled': {
+      color: _onyxTokens.astroTokensDark.color.gray[400]
+    },
     '&.is-focused': {
       color: _onyxTokens.astroTokensDark.color.common.menu.item.hover.text,
       bg: '#2C323A'

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

@@ -31,7 +31,7 @@ const checkbox = exports.checkbox = {
   '.is-focused &': {
     outline: '2px solid',
     outlineColor: _colors.default.focus,
-    outlineOffset: '2px'
+    outlineOffset: '0px'
   },
   'input:disabled ~ &': {
     opacity: 0.5

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

@@ -3835,23 +3835,23 @@ declare const _default: {
         };
         selectedItemBadge: {
             backgroundColor: string;
-            paddingRight: string;
+            pt: string;
+            pb: string;
+            m: number;
+            mr: number;
+            my: number;
+            pr: string;
+            pl: string;
+            maxWidth: string;
             '& span': {
+                fontWeight: number;
                 color: string;
-                fontWeight: string;
+                fontSize: number;
+                lineHeight: string;
+                mr: number;
             };
             '& button': {
-                alignSelf: string;
-                p: string;
-                bg: string;
-                '&.is-hovered': {
-                    bg: string;
-                    '& svg': {
-                        path: {
-                            fill: string;
-                        };
-                    };
-                };
+                ml: string;
             };
             '& svg': {
                 color: string;
@@ -3910,9 +3910,10 @@ declare const _default: {
             borderColor: string;
             backgroundColor: string;
             '& span': {
+                fontWeight: number;
                 color: string;
+                fontSize: number;
                 lineHeight: string;
-                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -3945,9 +3946,10 @@ declare const _default: {
         };
         readOnlyFieldBadge: {
             '& span': {
+                fontWeight: number;
                 color: string;
+                fontSize: number;
                 lineHeight: string;
-                fontWeight: string;
             };
             border: string;
             borderColor: string;
@@ -4203,19 +4205,16 @@ declare const _default: {
                 fill: string;
             };
             backgroundColor: string;
-            paddingRight: string;
+            pt: string;
+            pb: string;
+            m: number;
+            mr: number;
+            my: number;
+            pr: string;
+            pl: string;
+            maxWidth: string;
             '& button': {
-                alignSelf: string;
-                p: string;
-                bg: string;
-                '&.is-hovered': {
-                    bg: string;
-                    '& svg': {
-                        path: {
-                            fill: string;
-                        };
-                    };
-                };
+                ml: string;
             };
             alignItems: string;
             justifyContent: string;
@@ -6172,12 +6171,15 @@ declare const _default: {
             };
             option: {
                 py: string;
-                pl: string;
+                pl: number;
                 pr: number;
                 justifyContent: string;
                 borderRadius: number;
                 lineHeight: string;
                 color: string;
+                '&.is-disabled': {
+                    color: string;
+                };
                 '&.is-focused': {
                     color: string;
                     bg: string;

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

@@ -422,23 +422,23 @@ export declare const badges: {
     };
     selectedItemBadge: {
         backgroundColor: string;
-        paddingRight: string;
+        pt: string;
+        pb: string;
+        m: number;
+        mr: number;
+        my: number;
+        pr: string;
+        pl: string;
+        maxWidth: string;
         '& span': {
+            fontWeight: number;
             color: string;
-            fontWeight: string;
+            fontSize: number;
+            lineHeight: string;
+            mr: number;
         };
         '& button': {
-            alignSelf: string;
-            p: string;
-            bg: string;
-            '&.is-hovered': {
-                bg: string;
-                '& svg': {
-                    path: {
-                        fill: string;
-                    };
-                };
-            };
+            ml: string;
         };
         '& svg': {
             color: string;
@@ -497,9 +497,10 @@ export declare const badges: {
         borderColor: string;
         backgroundColor: string;
         '& span': {
+            fontWeight: number;
             color: string;
+            fontSize: number;
             lineHeight: string;
-            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -532,9 +533,10 @@ export declare const badges: {
     };
     readOnlyFieldBadge: {
         '& span': {
+            fontWeight: number;
             color: string;
+            fontSize: number;
             lineHeight: string;
-            fontWeight: string;
         };
         border: string;
         borderColor: string;
@@ -790,19 +792,16 @@ export declare const badges: {
             fill: string;
         };
         backgroundColor: string;
-        paddingRight: string;
+        pt: string;
+        pb: string;
+        m: number;
+        mr: number;
+        my: number;
+        pr: string;
+        pl: string;
+        maxWidth: string;
         '& button': {
-            alignSelf: string;
-            p: string;
-            bg: string;
-            '&.is-hovered': {
-                bg: string;
-                '& svg': {
-                    path: {
-                        fill: string;
-                    };
-                };
-            };
+            ml: string;
         };
         alignItems: string;
         justifyContent: string;

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

@@ -107,10 +107,24 @@ const info = {
 const selectedItemBadge = {
   ...baseBadge,
   backgroundColor: '#eaf2fd !important',
-  paddingRight: '0px !important',
+  pt: 'xs',
+  pb: 'xs',
+  m: 0,
+  mr: 0,
+  my: 0,
+  pr: 'sm',
+  pl: 'sm',
+  maxWidth: 'none',
   '& span': {
     ...badgeFont,
-    color: 'text.primary'
+    fontWeight: 0,
+    color: 'text.primary',
+    fontSize: _onyxTokens.astroTokens.default['font-size'].small,
+    lineHeight: '18px',
+    mr: 0
+  },
+  '& button': {
+    ml: 'sm'
   }
 };
 const readOnlyBadge = {
@@ -119,17 +133,19 @@ const readOnlyBadge = {
   borderColor: 'border.hairline',
   backgroundColor: '#FFFFFF !important',
   '& span': {
-    ...badgeFont,
-    color: 'text.primary',
-    lineHeight: 'xs'
+    fontWeight: 0,
+    color: _onyxTokens.astroTokens.color.gray[600],
+    fontSize: _onyxTokens.astroTokens.default['font-size'].small,
+    lineHeight: '18px'
   }
 };
 const readOnlyFieldBadge = {
   ...readOnlyBadge,
   '& span': {
-    ...badgeFont,
-    color: 'text.primary',
-    lineHeight: 'xs'
+    fontWeight: 0,
+    color: _onyxTokens.astroTokens.color.gray[600],
+    fontSize: _onyxTokens.astroTokens.default['font-size'].small,
+    lineHeight: '18px'
   }
 };
 const itemBadgeWithSlot = {