@pingux/astro 2.37.1-alpha.2 → 2.37.1-alpha.4

package/lib/cjs/components/Checkbox/CheckboxBase.js

@@ -12,6 +12,7 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _visuallyHidden = require("@react-aria/visually-hidden");
+var _lodash = require("lodash");
 var _themeUi = require("theme-ui");
 var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
@@ -37,7 +38,7 @@ var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-labelledby": "checkbox-icon-title"
-  }, props), (0, _react2.jsx)("title", {
+  }, (0, _lodash.omit)(props, 'id', 'aria-checked')), (0, _react2.jsx)("title", {
     id: "checkbox-icon-title"
   }, "Indeterminate Checkbox Icon"), (0, _react2.jsx)("rect", {
     x: "3.5",

package/lib/cjs/components/NumberField/NumberField.js

@@ -106,6 +106,10 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var helperTextId = (0, _uuid.v4)();
   var updatedLabelProps = _objectSpread({}, (0, _reactAria.mergeProps)(fieldLabelProps, labelProps));
   var inputPropsValue = inputProps.value || 0;
+
+  // extract numeric value in case input value use units like '4 inches' or 'USD 45.00'
+  // aria-valuenow accept only number value type
+  var inputPropsNumericValue = typeof inputPropsValue === 'string' ? inputPropsValue.match(/[-]{0,1}[\d]*[.]{0,1}[\d]+/g)[0] : inputPropsValue;
   return (0, _react2.jsx)(_.Box, fieldContainerProps, (0, _react2.jsx)(_.Label, updatedLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     variant: "forms.numberField.noDefaultArrows"
   }, groupProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
@@ -113,7 +117,7 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, fieldControlWrapperProps, {
     role: "spinbutton",
     "aria-valuetext": inputPropsValue,
-    "aria-valuenow": inputPropsValue,
+    "aria-valuenow": inputPropsNumericValue,
     "aria-labelledby": updatedLabelProps.id
   }), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
     variant: "forms.input.numberField",

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

@@ -151,4 +151,29 @@ test('passing helper text should display it and correct aria attributes on input
   expect(helper).toHaveClass("is-".concat(_statuses["default"].ERROR));
   var helperTextID = helper.getAttribute('id');
   expect(_testWrapper.screen.getByRole('textbox')).toHaveAttribute('aria-describedby', helperTextID);
+});
+test('should extract numeric value from unit format and pass it to aria-valuenow', function () {
+  var numericValue = 45;
+  getComponent({
+    defaultValue: numericValue,
+    formatOptions: {
+      style: 'unit',
+      unit: 'kilogram',
+      unitDisplay: 'long'
+    }
+  });
+  expect(_testWrapper.screen.getByRole('spinbutton')).toHaveAttribute('aria-valuenow', String(numericValue));
+});
+test('should extract numeric value from currency format and pass it to aria-valuenow', function () {
+  var numericValue = 45;
+  getComponent({
+    defaultValue: numericValue,
+    formatOptions: {
+      style: 'currency',
+      currency: 'EUR',
+      currencyDisplay: 'code',
+      currencySign: 'accounting'
+    }
+  });
+  expect(_testWrapper.screen.getByRole('spinbutton')).toHaveAttribute('aria-valuenow', String(numericValue.toFixed(2)));
 });

package/lib/components/Checkbox/CheckboxBase.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { forwardRef } from 'react';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { omit } from 'lodash';
 import { Checkbox as ThemeUICheckbox } from 'theme-ui';
 import Box from '../Box';
 
@@ -26,7 +27,7 @@ var IndeterminateCheckboxIcon = function IndeterminateCheckboxIcon(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-labelledby": "checkbox-icon-title"
-  }, props), ___EmotionJSX("title", {
+  }, omit(props, 'id', 'aria-checked')), ___EmotionJSX("title", {
     id: "checkbox-icon-title"
   }, "Indeterminate Checkbox Icon"), ___EmotionJSX("rect", {
     x: "3.5",

package/lib/components/NumberField/NumberField.js

@@ -95,6 +95,10 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperTextId = uuid();
   var updatedLabelProps = _objectSpread({}, mergeProps(fieldLabelProps, labelProps));
   var inputPropsValue = inputProps.value || 0;
+
+  // extract numeric value in case input value use units like '4 inches' or 'USD 45.00'
+  // aria-valuenow accept only number value type
+  var inputPropsNumericValue = typeof inputPropsValue === 'string' ? inputPropsValue.match(/[-]{0,1}[\d]*[.]{0,1}[\d]+/g)[0] : inputPropsValue;
   return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, updatedLabelProps), ___EmotionJSX(Box, _extends({
     variant: "forms.numberField.noDefaultArrows"
   }, groupProps), ___EmotionJSX(Box, _extends({
@@ -102,7 +106,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, fieldControlWrapperProps, {
     role: "spinbutton",
     "aria-valuetext": inputPropsValue,
-    "aria-valuenow": inputPropsValue,
+    "aria-valuenow": inputPropsNumericValue,
     "aria-labelledby": updatedLabelProps.id
   }), ___EmotionJSX(Input, _extends({
     variant: "forms.input.numberField",

package/lib/components/NumberField/NumberField.test.js

@@ -148,4 +148,29 @@ test('passing helper text should display it and correct aria attributes on input
   expect(helper).toHaveClass("is-".concat(statuses.ERROR));
   var helperTextID = helper.getAttribute('id');
   expect(screen.getByRole('textbox')).toHaveAttribute('aria-describedby', helperTextID);
+});
+test('should extract numeric value from unit format and pass it to aria-valuenow', function () {
+  var numericValue = 45;
+  getComponent({
+    defaultValue: numericValue,
+    formatOptions: {
+      style: 'unit',
+      unit: 'kilogram',
+      unitDisplay: 'long'
+    }
+  });
+  expect(screen.getByRole('spinbutton')).toHaveAttribute('aria-valuenow', String(numericValue));
+});
+test('should extract numeric value from currency format and pass it to aria-valuenow', function () {
+  var numericValue = 45;
+  getComponent({
+    defaultValue: numericValue,
+    formatOptions: {
+      style: 'currency',
+      currency: 'EUR',
+      currencyDisplay: 'code',
+      currencySign: 'accounting'
+    }
+  });
+  expect(screen.getByRole('spinbutton')).toHaveAttribute('aria-valuenow', String(numericValue.toFixed(2)));
 });

package/package.json

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