@pingux/astro 1.43.0 → 1.44.0-alpha.0

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

@@ -121,14 +121,14 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "numberField.arrows"
   }, (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({}, incrementButtonProps, {
     ref: decRef,
-    tabIndex: "-1",
+    tabIndex: "0",
     p: 0
   }), (0, _react2.jsx)(_.Icon, {
     icon: _MenuUpIcon["default"],
     size: 18
   })), (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({}, decrementButtonProps, {
     ref: incrRef,
-    tabIndex: "-1",
+    tabIndex: "0",
     p: 0
   }), (0, _react2.jsx)(_.Icon, {
     icon: _MenuDownIcon["default"],

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

@@ -155,7 +155,7 @@ test('should show hintText text if prop is passed', function () {
 
   expect(_testWrapper.screen.getByText(hintText)).toBeInTheDocument();
 });
-test('increment and decrement buttons shouldn\'t be able to be focused via keyboard', function () {
+test('increment and decrement buttons should be able to be focused via keyboard', function () {
   getComponent();
 
   _userEvent["default"].tab();
@@ -164,11 +164,11 @@ test('increment and decrement buttons shouldn\'t be able to be focused via keybo
 
   _userEvent["default"].tab();
 
-  expect(_testWrapper.screen.getByLabelText('arrow-up')).not.toHaveFocus();
+  expect(_testWrapper.screen.getByLabelText('arrow-up')).toHaveFocus();
 
   _userEvent["default"].tab();
 
-  expect(_testWrapper.screen.getByLabelText('arrow-down')).not.toHaveFocus();
+  expect(_testWrapper.screen.getByLabelText('arrow-down')).toHaveFocus();
 });
 test('number field input receiving name attribute', function () {
   var testName = 'testName';

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

@@ -16,6 +16,8 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = exports.InnerPanel = exports.Expandable = exports.Default = exports.CustomWidth = void 0;
 
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
@@ -339,6 +341,21 @@ var Expandable = function Expandable() {
     return onClose(state, triggerRef);
   };
 
+  var _useState5 = (0, _react.useState)('#EACE91'),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      color = _useState6[0],
+      setColor = _useState6[1];
+
+  var handleColorChange = (0, _react.useCallback)(function (_ref3) {
+    var _context, _context2, _context3;
+
+    var rgb = _ref3.rgb;
+    var r = rgb.r,
+        b = rgb.b,
+        g = rgb.g,
+        a = rgb.a;
+    setColor((0, _concat["default"])(_context = (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
+  }, []);
   var header = (0, _react2.jsx)(_index.Box, {
     sx: sx.header
   }, (0, _react2.jsx)(_index.Box, {
@@ -398,11 +415,12 @@ var Expandable = function Expandable() {
     label: "Node Description",
     defaultValue: "The Value of the Text Input"
   }), (0, _react2.jsx)(_index.ColorField, {
-    value: "#EACE91",
+    value: color,
     label: "Node Background Color",
     buttonProps: {
       sx: sx.colorField
-    }
+    },
+    onChange: handleColorChange
   }), (0, _react2.jsx)(_index.SwitchField, {
     hintText: "Example Hint",
     labelProps: {

package/lib/cjs/components/PasswordField/PasswordField.js

@@ -66,7 +66,7 @@ var hooks = _interopRequireWildcard(require("../../hooks"));
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["helperText", "isVisible", "onVisibleChange", "requirements", "slots", "status", "viewHiddenIconTestId", "viewIconTestId"];
+var _excluded = ["helperText", "isVisible", "onVisibleChange", "requirements", "requirementsListProps", "slots", "status", "viewHiddenIconTestId", "viewIconTestId"];
 
 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); }
 
@@ -89,6 +89,7 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isVisibleProp = props.isVisible,
       onVisibleChangeProp = props.onVisibleChange,
       requirements = props.requirements,
+      requirementsListProps = props.requirementsListProps,
       slots = props.slots,
       status = props.status,
       viewHiddenIconTestId = props.viewHiddenIconTestId,
@@ -219,9 +220,9 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     placement: placement,
     ref: popoverRef,
     style: style
-  }, (0, _react2.jsx)(_.RequirementsList, {
+  }, (0, _react2.jsx)(_.RequirementsList, (0, _extends2["default"])({
     requirements: requirements
-  })));
+  }, requirementsListProps))));
 });
 PasswordField.propTypes = _objectSpread({
   /** The rendered label for the field. */
@@ -324,7 +325,10 @@ PasswordField.propTypes = _objectSpread({
   requirements: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     name: _propTypes["default"].string.isRequired,
     status: _propTypes["default"].oneOf(['default', 'success', 'warning', 'error'])
-  }))
+  })),
+
+  /** Props object that is spread to the requirements list. */
+  requirementsListProps: _propTypes["default"].shape({})
 }, _ariaAttributes.ariaAttributesBasePropTypes);
 PasswordField.defaultProps = {
   hasAutoFocus: false,

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

@@ -224,6 +224,20 @@ test('if all requirements are successful, do not render popover', function () {
 
   expect(_react2.screen.queryByRole('presentation')).not.toBeInTheDocument();
 });
+test('passing in props to the requirements list works', function () {
+  var requirementsListProps = {
+    'data-testid': 'my-custom-id'
+  };
+  getComponent({
+    requirements: defaultRequirements,
+    requirementsListProps: requirementsListProps
+  });
+  expect(_react2.screen.queryByTestId(requirementsListProps['data-testid'])).not.toBeInTheDocument();
+
+  _userEvent["default"].click(_react2.screen.getByRole('textbox'));
+
+  expect(_react2.screen.queryByTestId(requirementsListProps['data-testid'])).toBeInTheDocument();
+});
 test('password field with helper text', function () {
   var helperText = 'helper text';
   getComponent({

package/lib/components/NumberField/NumberField.js

@@ -76,14 +76,14 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "numberField.arrows"
   }, ___EmotionJSX(IconButton, _extends({}, incrementButtonProps, {
     ref: decRef,
-    tabIndex: "-1",
+    tabIndex: "0",
     p: 0
   }), ___EmotionJSX(Icon, {
     icon: MenuUp,
     size: 18
   })), ___EmotionJSX(IconButton, _extends({}, decrementButtonProps, {
     ref: incrRef,
-    tabIndex: "-1",
+    tabIndex: "0",
     p: 0
   }), ___EmotionJSX(Icon, {
     icon: MenuDown,

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

@@ -120,14 +120,14 @@ test('should show hintText text if prop is passed', function () {
   fireEvent.mouseEnter(helpHintButton);
   expect(screen.getByText(hintText)).toBeInTheDocument();
 });
-test('increment and decrement buttons shouldn\'t be able to be focused via keyboard', function () {
+test('increment and decrement buttons should be able to be focused via keyboard', function () {
   getComponent();
   userEvent.tab();
   expect(screen.getByLabelText(testLabel)).toHaveFocus();
   userEvent.tab();
-  expect(screen.getByLabelText('arrow-up')).not.toHaveFocus();
+  expect(screen.getByLabelText('arrow-up')).toHaveFocus();
   userEvent.tab();
-  expect(screen.getByLabelText('arrow-down')).not.toHaveFocus();
+  expect(screen.getByLabelText('arrow-down')).toHaveFocus();
 });
 test('number field input receiving name attribute', function () {
   var testName = 'testName';

package/lib/components/OverlayPanel/OverlayPanel.stories.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React, { useState, useRef } from 'react';
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React, { useCallback, useState, useRef } from 'react';
 import { Item } from '@react-stately/collections';
 import ArrowTopRightBottomLeft from 'mdi-react/ArrowTopRightBottomLeftIcon';
 import ArrowCollapse from 'mdi-react/ArrowCollapseIcon';
@@ -293,6 +294,22 @@ export var Expandable = function Expandable() {
     return onClose(state, triggerRef);
   };
 
+  var _useState5 = useState('#EACE91'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      color = _useState6[0],
+      setColor = _useState6[1];
+
+  var handleColorChange = useCallback(function (_ref3) {
+    var _context, _context2, _context3;
+
+    var rgb = _ref3.rgb;
+    var r = rgb.r,
+        b = rgb.b,
+        g = rgb.g,
+        a = rgb.a;
+    setColor(_concatInstanceProperty(_context = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
+  }, []);
+
   var header = ___EmotionJSX(Box, {
     sx: sx.header
   }, ___EmotionJSX(Box, {
@@ -353,11 +370,12 @@ export var Expandable = function Expandable() {
     label: "Node Description",
     defaultValue: "The Value of the Text Input"
   }), ___EmotionJSX(ColorField, {
-    value: "#EACE91",
+    value: color,
     label: "Node Background Color",
     buttonProps: {
       sx: sx.colorField
-    }
+    },
+    onChange: handleColorChange
   }), ___EmotionJSX(SwitchField, {
     hintText: "Example Hint",
     labelProps: {

package/lib/components/PasswordField/PasswordField.js

@@ -9,7 +9,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["helperText", "isVisible", "onVisibleChange", "requirements", "slots", "status", "viewHiddenIconTestId", "viewIconTestId"];
+var _excluded = ["helperText", "isVisible", "onVisibleChange", "requirements", "requirementsListProps", "slots", "status", "viewHiddenIconTestId", "viewIconTestId"];
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -43,6 +43,7 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
       isVisibleProp = props.isVisible,
       onVisibleChangeProp = props.onVisibleChange,
       requirements = props.requirements,
+      requirementsListProps = props.requirementsListProps,
       slots = props.slots,
       status = props.status,
       viewHiddenIconTestId = props.viewHiddenIconTestId,
@@ -173,9 +174,9 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
     placement: placement,
     ref: popoverRef,
     style: style
-  }, ___EmotionJSX(RequirementsList, {
+  }, ___EmotionJSX(RequirementsList, _extends({
     requirements: requirements
-  })));
+  }, requirementsListProps))));
 });
 PasswordField.propTypes = _objectSpread({
   /** The rendered label for the field. */
@@ -278,7 +279,10 @@ PasswordField.propTypes = _objectSpread({
   requirements: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string.isRequired,
     status: PropTypes.oneOf(['default', 'success', 'warning', 'error'])
-  }))
+  })),
+
+  /** Props object that is spread to the requirements list. */
+  requirementsListProps: PropTypes.shape({})
 }, ariaAttributesBasePropTypes);
 PasswordField.defaultProps = {
   hasAutoFocus: false,

package/lib/components/PasswordField/PasswordField.test.js

@@ -188,6 +188,18 @@ test('if all requirements are successful, do not render popover', function () {
   userEvent.click(input);
   expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
 });
+test('passing in props to the requirements list works', function () {
+  var requirementsListProps = {
+    'data-testid': 'my-custom-id'
+  };
+  getComponent({
+    requirements: defaultRequirements,
+    requirementsListProps: requirementsListProps
+  });
+  expect(screen.queryByTestId(requirementsListProps['data-testid'])).not.toBeInTheDocument();
+  userEvent.click(screen.getByRole('textbox'));
+  expect(screen.queryByTestId(requirementsListProps['data-testid'])).toBeInTheDocument();
+});
 test('password field with helper text', function () {
   var helperText = 'helper text';
   getComponent({

package/package.json

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