@pingux/astro 2.128.0-alpha.4 → 2.128.1-alpha.0

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

@@ -267,7 +267,7 @@ var AsyncLoading = function AsyncLoading() {
               // Otherwise, the cursor is the next URL to load,
               // as returned from the previous page.
               _context.next = 4;
-              return fetch(cursor || "https://swapi.dev/api/people/?search=".concat(filterText), {
+              return fetch(cursor || "https://swapi.py4e.com/api/people/?search=".concat(filterText), {
                 signal: signal
               });
             case 4:

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

@@ -57,7 +57,8 @@ exports.hintButton = hintButton;
 var popoverContainer = _objectSpread(_objectSpread({}, _TooltipStyles.container), {}, {
   p: '10px',
   fontSize: 'sm',
-  fontWeight: 1
+  fontWeight: 1,
+  fontFamily: 'standard'
 });
 var _default = {
   hintButton: hintButton,

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

@@ -40,7 +40,7 @@ var input = _objectSpread(_objectSpread({}, _Text.text.inputValue), {}, {
   height: '40px',
   textOverflow: 'ellipsis',
   paddingRight: '100px',
-  bg: 'white',
+  bg: 'background.base',
   borderWidth: 1,
   borderStyle: 'solid',
   borderColor: 'neutral.80',

package/lib/cjs/components/SelectField/Select.styles.js

@@ -77,6 +77,7 @@ select.transparent = {
 };
 select.arrow = {
   ml: 'auto',
+  pointerEvents: 'none',
   '.is-float-label &': {
     mt: -10
   },

package/lib/cjs/components/SelectField/SelectField.stories.d.ts

@@ -30,14 +30,38 @@ export default _default;
 export declare const Default: (args: any) => React.JSX.Element;
 export declare const WithSections: (args: any) => React.JSX.Element;
 export declare const WithCustomHeight: (args: any) => React.JSX.Element;
-export declare const FloatLabel: () => React.JSX.Element;
+export declare const FloatLabel: {
+    (): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
 export declare const Controlled: () => React.JSX.Element;
 export declare const WithNoneOption: () => React.JSX.Element;
 export declare const WithSlots: () => React.JSX.Element;
 export declare const DisabledField: () => React.JSX.Element;
 export declare const DisabledOptions: () => React.JSX.Element;
 export declare const NoOptionsAvailable: () => React.JSX.Element;
-export declare const HelperText: () => React.JSX.Element;
+export declare const HelperText: {
+    (): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
 export declare const DynamicItems: {
     (): React.JSX.Element;
     parameters: {

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

@@ -244,6 +244,16 @@ var FloatLabel = function FloatLabel() {
   }, "Yellow"));
 };
 exports.FloatLabel = FloatLabel;
+FloatLabel.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 var Controlled = function Controlled() {
   var _useState = (0, _react.useState)('yellow'),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -355,6 +365,16 @@ var HelperText = function HelperText() {
   }, "Yellow"));
 };
 exports.HelperText = HelperText;
+HelperText.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 var options = (0, _map["default"])(_context = (0, _fill["default"])(_context2 = new Array(400)).call(_context2, {
   key: 'string',
   name: 'string'

package/lib/cjs/components/TooltipTrigger/TooltipTrigger.js

@@ -38,7 +38,9 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isDarkMode = props.isDarkMode,
     hasNoArrow = props.hasNoArrow,
     targetRef = props.targetRef,
-    width = props.width;
+    width = props.width,
+    _props$shouldAnimate = props.shouldAnimate,
+    shouldAnimate = _props$shouldAnimate === void 0 ? true : _props$shouldAnimate;
   var _React$Children$toArr = _react["default"].Children.toArray(children),
     _React$Children$toArr2 = (0, _slicedToArray2["default"])(_React$Children$toArr, 2),
     trigger = _React$Children$toArr2[0],
@@ -61,7 +63,7 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useGetTheme = (0, _hooks.useGetTheme)(),
     themeState = _useGetTheme.themeState;
   var isTransitioning = (0, _hooks.useMountTransition)(state.isOpen, 200);
-  var isOpen = state.isOpen || themeState.isOnyx && isTransitioning;
+  var isOpen = state.isOpen || themeState.isOnyx && shouldAnimate && isTransitioning;
   var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
       placement: (0, _concat["default"])(_context = "".concat(direction, " ")).call(_context, align),
       targetRef: tooltipRef,
@@ -75,7 +77,7 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     positionProps = _useOverlayPosition.overlayProps,
     arrowProps = _useOverlayPosition.arrowProps,
     placement = _useOverlayPosition.placement;
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (_useStatusClasses2 = {}, (0, _defineProperty2["default"])(_useStatusClasses2, "is-".concat(direction), direction), (0, _defineProperty2["default"])(_useStatusClasses2, "isDarkMode", isDarkMode), (0, _defineProperty2["default"])(_useStatusClasses2, "isTransitioning", isTransitioning), (0, _defineProperty2["default"])(_useStatusClasses2, "isMounted", state.isOpen), _useStatusClasses2)),
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (_useStatusClasses2 = {}, (0, _defineProperty2["default"])(_useStatusClasses2, "is-".concat(direction), direction), (0, _defineProperty2["default"])(_useStatusClasses2, "isDarkMode", isDarkMode), (0, _defineProperty2["default"])(_useStatusClasses2, "animate", shouldAnimate), (0, _defineProperty2["default"])(_useStatusClasses2, "isTransitioning", isTransitioning), (0, _defineProperty2["default"])(_useStatusClasses2, "isMounted", state.isOpen), _useStatusClasses2)),
     classNames = _useStatusClasses.classNames;
   var overlay = (0, _react2.jsx)(_PopoverContainer["default"], (0, _extends2["default"])({
     isOpen: isOpen,

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

@@ -5,4 +5,12 @@ export declare const fieldControlWrapper: {
         borderColor: string;
         backgroundColor: string;
     };
+    '&.is-read-only': {
+        '> input': {
+            backgroundColor: string;
+        };
+        '> textarea': {
+            backgroundColor: string;
+        };
+    };
 };

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

@@ -27,6 +27,14 @@ var fieldControlWrapper = {
   '> textarea': {
     borderColor: 'border.input',
     backgroundColor: 'background.base'
+  },
+  '&.is-read-only': {
+    '> input': {
+      backgroundColor: 'background.base'
+    },
+    '> textarea': {
+      backgroundColor: 'background.base'
+    }
   }
 };
 exports.fieldControlWrapper = fieldControlWrapper;

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

@@ -119,7 +119,7 @@ var badge = {
   textColor: _colorTokens.nextGenColors['gray-900'],
   background: _colorTokens.nextGenColors['gray-100']
 };
-var tooltip = 'black';
+var tooltip = _colorTokens.nextGenColors['gray-900'];
 var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColors), _colorTokens.nextGenColors), overrides), {}, {
   badge: badge,
   card: card,

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

@@ -1376,6 +1376,12 @@ declare const _default: {
                     outlineOffset: string;
                 };
             };
+            hintButton: {
+                bg: string;
+                '&.is-hovered': {
+                    bg: string;
+                };
+            };
         };
         modalCloseButton: {
             position: string;
@@ -3308,8 +3314,10 @@ declare const _default: {
         popoverMenu: {
             container: {
                 transition: string;
-                opacity: number;
-                '&.is-mounted.is-transitioning': {
+                '&.animate': {
+                    opacity: number;
+                };
+                '&.animate.is-mounted.is-transitioning': {
                     opacity: string;
                 };
             };
@@ -3667,6 +3675,7 @@ declare const _default: {
                 backgroundColor: string;
                 borderRadius: string;
                 fontSize: string;
+                fontFamily: string;
             };
         };
         footer: {

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

@@ -1125,6 +1125,12 @@ declare const buttons: {
                 outlineOffset: string;
             };
         };
+        hintButton: {
+            bg: string;
+            '&.is-hovered': {
+                bg: string;
+            };
+        };
     };
     modalCloseButton: {
         position: string;

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

@@ -513,7 +513,13 @@ var iconButtons = {
         fill: 'dark'
       }
     }
-  })
+  }),
+  hintButton: {
+    bg: 'gray-100',
+    '&.is-hovered': {
+      bg: 'gray-900'
+    }
+  }
 };
 var buttons = {
   neutral: neutral,

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

@@ -1,8 +1,10 @@
 declare const _default: {
     container: {
         transition: string;
-        opacity: number;
-        '&.is-mounted.is-transitioning': {
+        '&.animate': {
+            opacity: number;
+        };
+        '&.animate.is-mounted.is-transitioning': {
             opacity: string;
         };
     };

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

@@ -7,8 +7,10 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var container = {
   transition: 'opacity 200ms ease',
-  opacity: 0,
-  '&.is-mounted.is-transitioning': {
+  '&.animate': {
+    opacity: 0
+  },
+  '&.animate.is-mounted.is-transitioning': {
     opacity: '100%'
   }
 };

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

@@ -3,6 +3,7 @@ declare const _default: {
         backgroundColor: string;
         borderRadius: string;
         fontSize: string;
+        fontFamily: string;
     };
 };
 export default _default;

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

@@ -6,9 +6,10 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var container = {
-  backgroundColor: '#000000',
+  backgroundColor: 'tooltip',
   borderRadius: '4px',
-  fontSize: 'xs'
+  fontSize: 'xs',
+  fontFamily: 'standard'
 };
 var _default = {
   container: container

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

@@ -928,8 +928,10 @@ declare const _default: {
     popoverMenu: {
         container: {
             transition: string;
-            opacity: number;
-            '&.is-mounted.is-transitioning': {
+            '&.animate': {
+                opacity: number;
+            };
+            '&.animate.is-mounted.is-transitioning': {
                 opacity: string;
             };
         };
@@ -1287,6 +1289,7 @@ declare const _default: {
             backgroundColor: string;
             borderRadius: string;
             fontSize: string;
+            fontFamily: string;
         };
     };
     footer: {

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

@@ -36,4 +36,5 @@ export interface TooltipTriggerProps extends DOMAttributes, ReactAriaTooltipTrig
     /** Width applied to the wrapper of the tooltip component. */
     width?: string;
     targetRef?: RefObject<FocusableElement | HTMLElement>;
+    shouldAnimate?: boolean;
 }

package/lib/components/ComboBoxField/ComboBoxField.stories.js

@@ -252,7 +252,7 @@ export var AsyncLoading = function AsyncLoading() {
               // Otherwise, the cursor is the next URL to load,
               // as returned from the previous page.
               _context.next = 4;
-              return fetch(cursor || "https://swapi.dev/api/people/?search=".concat(filterText), {
+              return fetch(cursor || "https://swapi.py4e.com/api/people/?search=".concat(filterText), {
                 signal: signal
               });
             case 4:

package/lib/components/HelpHint/HelpHint.styles.js

@@ -49,7 +49,8 @@ export var hintButton = {
 var popoverContainer = _objectSpread(_objectSpread({}, container), {}, {
   p: '10px',
   fontSize: 'sm',
-  fontWeight: 1
+  fontWeight: 1,
+  fontFamily: 'standard'
 });
 export default {
   hintButton: hintButton,

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

@@ -33,7 +33,7 @@ export var input = _objectSpread(_objectSpread({}, text.inputValue), {}, {
   height: '40px',
   textOverflow: 'ellipsis',
   paddingRight: '100px',
-  bg: 'white',
+  bg: 'background.base',
   borderWidth: 1,
   borderStyle: 'solid',
   borderColor: 'neutral.80',

package/lib/components/SelectField/Select.styles.js

@@ -71,6 +71,7 @@ select.transparent = {
 };
 select.arrow = {
   ml: 'auto',
+  pointerEvents: 'none',
   '.is-float-label &': {
     mt: -10
   },

package/lib/components/SelectField/SelectField.stories.js

@@ -228,6 +228,16 @@ export var FloatLabel = function FloatLabel() {
     key: "yellow"
   }, "Yellow"));
 };
+FloatLabel.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 export var Controlled = function Controlled() {
   var _useState = useState('yellow'),
     _useState2 = _slicedToArray(_useState, 2),
@@ -332,6 +342,16 @@ export var HelperText = function HelperText() {
     key: "yellow"
   }, "Yellow"));
 };
+HelperText.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 var options = _mapInstanceProperty(_context = _fillInstanceProperty(_context2 = new Array(400)).call(_context2, {
   key: 'string',
   name: 'string'

package/lib/components/TooltipTrigger/TooltipTrigger.js

@@ -25,7 +25,9 @@ var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
     isDarkMode = props.isDarkMode,
     hasNoArrow = props.hasNoArrow,
     targetRef = props.targetRef,
-    width = props.width;
+    width = props.width,
+    _props$shouldAnimate = props.shouldAnimate,
+    shouldAnimate = _props$shouldAnimate === void 0 ? true : _props$shouldAnimate;
   var _React$Children$toArr = React.Children.toArray(children),
     _React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
     trigger = _React$Children$toArr2[0],
@@ -48,7 +50,7 @@ var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useGetTheme = useGetTheme(),
     themeState = _useGetTheme.themeState;
   var isTransitioning = useMountTransition(state.isOpen, 200);
-  var isOpen = state.isOpen || themeState.isOnyx && isTransitioning;
+  var isOpen = state.isOpen || themeState.isOnyx && shouldAnimate && isTransitioning;
   var _useOverlayPosition = useOverlayPosition({
       placement: _concatInstanceProperty(_context = "".concat(direction, " ")).call(_context, align),
       targetRef: tooltipRef,
@@ -62,7 +64,7 @@ var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
     positionProps = _useOverlayPosition.overlayProps,
     arrowProps = _useOverlayPosition.arrowProps,
     placement = _useOverlayPosition.placement;
-  var _useStatusClasses = useStatusClasses(className, (_useStatusClasses2 = {}, _defineProperty(_useStatusClasses2, "is-".concat(direction), direction), _defineProperty(_useStatusClasses2, "isDarkMode", isDarkMode), _defineProperty(_useStatusClasses2, "isTransitioning", isTransitioning), _defineProperty(_useStatusClasses2, "isMounted", state.isOpen), _useStatusClasses2)),
+  var _useStatusClasses = useStatusClasses(className, (_useStatusClasses2 = {}, _defineProperty(_useStatusClasses2, "is-".concat(direction), direction), _defineProperty(_useStatusClasses2, "isDarkMode", isDarkMode), _defineProperty(_useStatusClasses2, "animate", shouldAnimate), _defineProperty(_useStatusClasses2, "isTransitioning", isTransitioning), _defineProperty(_useStatusClasses2, "isMounted", state.isOpen), _useStatusClasses2)),
     classNames = _useStatusClasses.classNames;
   var overlay = ___EmotionJSX(PopoverContainer, _extends({
     isOpen: isOpen,

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

@@ -19,6 +19,14 @@ export var fieldControlWrapper = {
   '> textarea': {
     borderColor: 'border.input',
     backgroundColor: 'background.base'
+  },
+  '&.is-read-only': {
+    '> input': {
+      backgroundColor: 'background.base'
+    },
+    '> textarea': {
+      backgroundColor: 'background.base'
+    }
   }
 };
 input.fieldControlWrapper = _objectSpread({}, fieldControlWrapper);

package/lib/styles/themes/next-gen/colors/colors.js

@@ -109,7 +109,7 @@ var badge = {
   textColor: nextGenColors['gray-900'],
   background: nextGenColors['gray-100']
 };
-var tooltip = 'black';
+var tooltip = nextGenColors['gray-900'];
 var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColors), nextGenColors), overrides), {}, {
   badge: badge,
   card: card,

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

@@ -505,7 +505,13 @@ var iconButtons = {
         fill: 'dark'
       }
     }
-  })
+  }),
+  hintButton: {
+    bg: 'gray-100',
+    '&.is-hovered': {
+      bg: 'gray-900'
+    }
+  }
 };
 var buttons = {
   neutral: neutral,

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

@@ -1,7 +1,9 @@
 var container = {
   transition: 'opacity 200ms ease',
-  opacity: 0,
-  '&.is-mounted.is-transitioning': {
+  '&.animate': {
+    opacity: 0
+  },
+  '&.animate.is-mounted.is-transitioning': {
     opacity: '100%'
   }
 };

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

@@ -1,7 +1,8 @@
 var container = {
-  backgroundColor: '#000000',
+  backgroundColor: 'tooltip',
   borderRadius: '4px',
-  fontSize: 'xs'
+  fontSize: 'xs',
+  fontFamily: 'standard'
 };
 export default {
   container: container

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.128.0-alpha.4",
+  "version": "2.128.1-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",