@pingux/astro 2.134.1-alpha.0 → 2.135.0-alpha.1

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

@@ -142,6 +142,11 @@ input.fieldControlWrapper = (_input$fieldControlWr = {
       opacity: 0.5
     }
   },
+  '&.is-invalid': {
+    '&:after': {
+      bg: 'critical.bright'
+    }
+  },
   '&.is-read-only': {
     '> input': {
       backgroundColor: 'accent.95',

package/lib/cjs/components/TimeField/TimeField.js

@@ -59,19 +59,21 @@ var TimeField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var state = (0, _datepicker2.useTimeFieldState)(_objectSpread(_objectSpread(_objectSpread({}, props), parsedTimes), {}, {
     locale: locale
   }));
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-      isDisabled: isDisabled,
-      isReadOnly: isReadOnly,
-      is24Hour: props.hourCycle === 24
-    }),
-    classNames = _useStatusClasses.classNames;
   var _useTimeField = (0, _datepicker.useTimeField)(_objectSpread(_objectSpread({}, props), parsedTimes), state, fieldRef),
-    fieldProps = _useTimeField.fieldProps;
+    fieldProps = _useTimeField.fieldProps,
+    isInvalid = _useTimeField.isInvalid;
   var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread({}, others), {}, {
       value: (state === null || state === void 0 || (_state$value = state.value) === null || _state$value === void 0 ? void 0 : _state$value.toString()) || ''
     })),
     fieldContainerProps = _useField.fieldContainerProps,
     fieldLabelProps = _useField.fieldLabelProps;
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      isInvalid: isInvalid,
+      is24Hour: props.hourCycle === 24
+    }),
+    classNames = _useStatusClasses.classNames;
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "forms.input.fieldContainer"
   }, fieldContainerProps, {

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

@@ -9,3 +9,4 @@ export declare const Disabled: StoryFn<TimeFieldProps>;
 export declare const ReadOnly: StoryFn<TimeFieldProps>;
 export declare const Required: StoryFn<TimeFieldProps>;
 export declare const WithLabel: StoryFn<TimeFieldProps>;
+export declare const Invalid: StoryFn<TimeFieldProps>;

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

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithLabel = exports.Required = exports.ReadOnly = exports.Disabled = exports.DefaultValue = exports.Default = exports.Controlled = void 0;
+exports["default"] = exports.WithLabel = exports.Required = exports.ReadOnly = exports.Invalid = exports.Disabled = exports.DefaultValue = exports.Default = exports.Controlled = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
@@ -98,4 +98,20 @@ var WithLabel = function WithLabel(args) {
     "aria-label": "timefield-default"
   }));
 };
-exports.WithLabel = WithLabel;
+exports.WithLabel = WithLabel;
+var Invalid = function Invalid() {
+  var _useState3 = (0, _react.useState)('02:30'),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    time = _useState4[0],
+    setTime = _useState4[1];
+  var onChangeHandler = function onChangeHandler(value) {
+    return setTime(value.toString());
+  };
+  return (0, _react2.jsx)(_index.TimeField, {
+    "aria-label": "timefield-default",
+    value: time,
+    onChange: onChangeHandler,
+    isInvalid: true
+  });
+};
+exports.Invalid = Invalid;

package/lib/cjs/components/TimeField/TimeField.styles.d.ts

@@ -19,6 +19,9 @@ declare const _default: {
         '&.is-24-hour': {
             minWidth: string;
         };
+        '&.is-invalid': {
+            borderColor: string;
+        };
         grid?: import("theme-ui").StylePropertyValue<import("csstype").Property.Grid | undefined>;
         accentColor?: import("theme-ui").StylePropertyValue<import("csstype").Property.AccentColor | undefined>;
         alignContent?: import("theme-ui").StylePropertyValue<import("csstype").Property.AlignContent | undefined>;

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

@@ -31,6 +31,9 @@ var inputField = _objectSpread(_objectSpread({}, _Input.input), {}, {
   },
   '&.is-24-hour': {
     minWidth: '0px'
+  },
+  '&.is-invalid': {
+    borderColor: 'critical.bright'
   }
 });
 var segment = {

package/lib/cjs/components/TimeField/TimeField.test.js

@@ -93,6 +93,15 @@ test('renders TimeField component with isReadOnly', function () {
     expect(segment).toHaveAttribute('aria-readonly', 'true');
   });
 });
+test('renders TimeField component with isInvalid', function () {
+  getComponent({
+    isInvalid: true
+  });
+  var timeSegments = _testWrapper.screen.getAllByRole('spinbutton');
+  (0, _forEach["default"])(timeSegments).call(timeSegments, function (segment) {
+    expect(segment).toHaveAttribute('aria-invalid', 'true');
+  });
+});
 test('should handle autofocus when deleting segments from left to right', function () {
   var defaultValue = new _date.Time(12, 30);
   getComponent({

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

@@ -10,6 +10,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
@@ -17,6 +18,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
 var _interactions = require("@react-aria/interactions");
+var _utils = require("@react-aria/utils");
 var _index = require("../../context/TooltipContext/index");
 var _hooks = require("../../hooks");
 var _PopoverContainer = _interopRequireDefault(require("../PopoverContainer"));
@@ -76,7 +78,17 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }),
     positionProps = _useOverlayPosition.overlayProps,
     arrowProps = _useOverlayPosition.arrowProps,
-    placement = _useOverlayPosition.placement;
+    placement = _useOverlayPosition.placement,
+    updatePosition = _useOverlayPosition.updatePosition;
+  (0, _utils.useLayoutEffect)(function () {
+    if (isOpen) {
+      requestAnimationFrame(function () {
+        (0, _setTimeout2["default"])(function () {
+          updatePosition();
+        }, 200);
+      });
+    }
+  }, [isOpen, updatePosition]);
   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"])({

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

@@ -134,6 +134,11 @@ input.fieldControlWrapper = (_input$fieldControlWr = {
       opacity: 0.5
     }
   },
+  '&.is-invalid': {
+    '&:after': {
+      bg: 'critical.bright'
+    }
+  },
   '&.is-read-only': {
     '> input': {
       backgroundColor: 'accent.95',

package/lib/components/TimeField/TimeField.js

@@ -47,19 +47,21 @@ var TimeField = /*#__PURE__*/forwardRef(function (props, ref) {
   var state = useTimeFieldState(_objectSpread(_objectSpread(_objectSpread({}, props), parsedTimes), {}, {
     locale: locale
   }));
-  var _useStatusClasses = useStatusClasses(className, {
-      isDisabled: isDisabled,
-      isReadOnly: isReadOnly,
-      is24Hour: props.hourCycle === 24
-    }),
-    classNames = _useStatusClasses.classNames;
   var _useTimeField = useTimeField(_objectSpread(_objectSpread({}, props), parsedTimes), state, fieldRef),
-    fieldProps = _useTimeField.fieldProps;
+    fieldProps = _useTimeField.fieldProps,
+    isInvalid = _useTimeField.isInvalid;
   var _useField = useField(_objectSpread(_objectSpread({}, others), {}, {
       value: (state === null || state === void 0 || (_state$value = state.value) === null || _state$value === void 0 ? void 0 : _state$value.toString()) || ''
     })),
     fieldContainerProps = _useField.fieldContainerProps,
     fieldLabelProps = _useField.fieldLabelProps;
+  var _useStatusClasses = useStatusClasses(className, {
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      isInvalid: isInvalid,
+      is24Hour: props.hourCycle === 24
+    }),
+    classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(Box, _extends({
     variant: "forms.input.fieldContainer"
   }, fieldContainerProps, {

package/lib/components/TimeField/TimeField.stories.js

@@ -77,4 +77,19 @@ export var WithLabel = function WithLabel(args) {
     label: "Lorem Ipsum",
     "aria-label": "timefield-default"
   }));
+};
+export var Invalid = function Invalid() {
+  var _useState3 = useState('02:30'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    time = _useState4[0],
+    setTime = _useState4[1];
+  var onChangeHandler = function onChangeHandler(value) {
+    return setTime(value.toString());
+  };
+  return ___EmotionJSX(TimeField, {
+    "aria-label": "timefield-default",
+    value: time,
+    onChange: onChangeHandler,
+    isInvalid: true
+  });
 };

package/lib/components/TimeField/TimeField.styles.js

@@ -24,6 +24,9 @@ var inputField = _objectSpread(_objectSpread({}, input), {}, {
   },
   '&.is-24-hour': {
     minWidth: '0px'
+  },
+  '&.is-invalid': {
+    borderColor: 'critical.bright'
   }
 });
 var segment = {

package/lib/components/TimeField/TimeField.test.js

@@ -90,6 +90,15 @@ test('renders TimeField component with isReadOnly', function () {
     expect(segment).toHaveAttribute('aria-readonly', 'true');
   });
 });
+test('renders TimeField component with isInvalid', function () {
+  getComponent({
+    isInvalid: true
+  });
+  var timeSegments = screen.getAllByRole('spinbutton');
+  _forEachInstanceProperty(timeSegments).call(timeSegments, function (segment) {
+    expect(segment).toHaveAttribute('aria-invalid', 'true');
+  });
+});
 test('should handle autofocus when deleting segments from left to right', function () {
   var defaultValue = new Time(12, 30);
   getComponent({

package/lib/components/TooltipTrigger/TooltipTrigger.js

@@ -2,10 +2,12 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useOverlayPosition, useTooltipTrigger } from 'react-aria';
 import { useTooltipTriggerState } from 'react-stately';
 import { PressResponder } from '@react-aria/interactions';
+import { useLayoutEffect } from '@react-aria/utils';
 import { TooltipContext } from '../../context/TooltipContext/index';
 import { useGetTheme, useMountTransition, usePropWarning, useStatusClasses } from '../../hooks';
 import PopoverContainer from '../PopoverContainer';
@@ -63,7 +65,17 @@ var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
     }),
     positionProps = _useOverlayPosition.overlayProps,
     arrowProps = _useOverlayPosition.arrowProps,
-    placement = _useOverlayPosition.placement;
+    placement = _useOverlayPosition.placement,
+    updatePosition = _useOverlayPosition.updatePosition;
+  useLayoutEffect(function () {
+    if (isOpen) {
+      requestAnimationFrame(function () {
+        _setTimeout(function () {
+          updatePosition();
+        }, 200);
+      });
+    }
+  }, [isOpen, updatePosition]);
   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({

package/package.json

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