@pingux/astro 2.4.0-alpha.2 → 2.4.1-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@2.3.0...@pingux/astro@2.4.0) (2023-05-18)
+
+
+### Features
+
+* [UIP-6266] Environment breadcrumb screenreader sections ([aff5aad](https://gitlab.corp.pingidentity.com/ux/pingux/commit/aff5aad8549406e4e2702d67af2fed0a70a3f795))
+
+
+
+
+
 # [2.3.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@2.2.0...@pingux/astro@2.3.0) (2023-05-17)
 
 

package/lib/cjs/components/DatePicker/DateField.js

@@ -39,7 +39,7 @@ var _index = require("../../index");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _DateSegment = _interopRequireDefault(require("./DateSegment"));
 var _react2 = require("@emotion/react");
-var _excluded = ["buttonProps", "fieldProps", "groupProps", "groupRef", "hasFormatHelpText", "helperText", "isDisabled", "isOpen", "isReadOnly", "isRequired", "status", "datePickerState", "minValue", "maxValue", "unavailableRanges"],
+var _excluded = ["buttonProps", "className", "fieldProps", "groupProps", "groupRef", "hasFormatHelpText", "helperText", "isDisabled", "isOpen", "isReadOnly", "isRequired", "status", "datePickerState", "minValue", "maxValue", "unavailableRanges"],
   _excluded2 = ["defaultValue"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -57,6 +57,7 @@ var ARIA_LABELS_CALENDAR_BUTTON_EXPANSION = {
 var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _labelRef$current, _context3;
   var buttonProps = props.buttonProps,
+    className = props.className,
     fieldProps = props.fieldProps,
     groupProps = props.groupProps,
     groupRef = props.groupRef,
@@ -90,6 +91,11 @@ var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     locale: locale,
     createCalendar: _date.createCalendar
   }));
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])({
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly
+    }, "is-".concat(status), true)),
+    classNames = _useStatusClasses.classNames;
   var segments = state.segments;
   var setValue = datePickerState.setValue;
   var _useDateField = (0, _datepicker.useDateField)(_objectSpread({}, fieldProps), state, fieldRef),
@@ -214,7 +220,8 @@ var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isRow: true,
     variant: "forms.datePicker.inSlotContainer"
   }, groupProps, {
-    ref: groupRef
+    ref: groupRef,
+    className: classNames
   }), (0, _react2.jsx)(_index.Box, fieldControlWrapperProps, (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, (0, _react2.jsx)(_index.Input, (0, _extends2["default"])({
     ref: inputRef,
     tabIndex: -1,
@@ -226,7 +233,8 @@ var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isRow: true,
     variant: "forms.datePicker.inputField"
   }, dateFieldProps, {
-    ref: fieldRef
+    ref: fieldRef,
+    className: classNames
   }), (0, _react2.jsx)(_reactAria.FocusScope, null, (0, _map["default"])(_context3 = locale === 'en-US' ? enUSSegments : segments).call(_context3, function (segment, index) {
     return (0, _react2.jsx)(_DateSegment["default"], (0, _extends2["default"])({
       key: getKey(segment, index),

package/lib/components/DatePicker/DateField.js

@@ -9,7 +9,7 @@ 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 _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["buttonProps", "fieldProps", "groupProps", "groupRef", "hasFormatHelpText", "helperText", "isDisabled", "isOpen", "isReadOnly", "isRequired", "status", "datePickerState", "minValue", "maxValue", "unavailableRanges"],
+var _excluded = ["buttonProps", "className", "fieldProps", "groupProps", "groupRef", "hasFormatHelpText", "helperText", "isDisabled", "isOpen", "isReadOnly", "isRequired", "status", "datePickerState", "minValue", "maxValue", "unavailableRanges"],
   _excluded2 = ["defaultValue"];
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
@@ -28,7 +28,7 @@ import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { useDateFieldState } from '@react-stately/datepicker';
 import CalendarIcon from 'mdi-react/CalendarIcon';
 import PropTypes from 'prop-types';
-import { useField } from '../../hooks';
+import { useField, useStatusClasses } from '../../hooks';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label, Messages } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import DateSegment from './DateSegment';
@@ -45,6 +45,7 @@ var ARIA_LABELS_CALENDAR_BUTTON_EXPANSION = {
 var DateField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _labelRef$current, _context3;
   var buttonProps = props.buttonProps,
+    className = props.className,
     fieldProps = props.fieldProps,
     groupProps = props.groupProps,
     groupRef = props.groupRef,
@@ -78,6 +79,11 @@ var DateField = /*#__PURE__*/forwardRef(function (props, ref) {
     locale: locale,
     createCalendar: createCalendar
   }));
+  var _useStatusClasses = useStatusClasses(className, _defineProperty({
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly
+    }, "is-".concat(status), true)),
+    classNames = _useStatusClasses.classNames;
   var segments = state.segments;
   var setValue = datePickerState.setValue;
   var _useDateField = useDateField(_objectSpread({}, fieldProps), state, fieldRef),
@@ -202,7 +208,8 @@ var DateField = /*#__PURE__*/forwardRef(function (props, ref) {
     isRow: true,
     variant: "forms.datePicker.inSlotContainer"
   }, groupProps, {
-    ref: groupRef
+    ref: groupRef,
+    className: classNames
   }), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX(Input, _extends({
     ref: inputRef,
     tabIndex: -1,
@@ -214,7 +221,8 @@ var DateField = /*#__PURE__*/forwardRef(function (props, ref) {
     isRow: true,
     variant: "forms.datePicker.inputField"
   }, dateFieldProps, {
-    ref: fieldRef
+    ref: fieldRef,
+    className: classNames
   }), ___EmotionJSX(FocusScope, null, _mapInstanceProperty(_context3 = locale === 'en-US' ? enUSSegments : segments).call(_context3, function (segment, index) {
     return ___EmotionJSX(DateSegment, _extends({
       key: getKey(segment, index),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.4.0-alpha.2",
+  "version": "2.4.1-alpha.0",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",