@pingux/astro 2.196.0 → 2.197.0-alpha.0

package/lib/cjs/components/LinkSelectField/LinkSelectField.js

@@ -41,8 +41,10 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     isDisabled = props.isDisabled,
     status = props.status,
     helperText = props.helperText,
+    iconProps = props.iconProps,
     hasInlineLoader = props.hasInlineLoader,
-    popoverWidth = props.popoverWidth;
+    popoverWidth = props.popoverWidth,
+    triggerProps = props.triggerProps;
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(props),
     ariaProps = _getAriaAttributeProp.ariaProps;
   var _useGetTheme = (0, _hooks.useGetTheme)(),
@@ -63,14 +65,14 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var fieldControlInputProps = selectFieldProps.fieldControlInputProps,
     isLoadingInitial = selectFieldProps.isLoadingInitial,
     state = selectFieldProps.state,
-    triggerProps = selectFieldProps.triggerProps,
+    raTriggerProps = selectFieldProps.triggerProps,
     triggerRef = selectFieldProps.triggerRef;
   var trigger = (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
     className: fieldControlInputProps.className,
     ref: triggerRef,
     variant: "link",
     tabIndex: isDisabled ? -1 : 0
-  }, (0, _pendoID.getPendoID)(displayName), triggerProps, ariaProps, {
+  }, (0, _pendoID.getPendoID)(displayName), triggerProps, raTriggerProps, ariaProps, {
     "aria-describedby": helperText && helperTextId
   }), (0, _react2.jsx)(_.Text, {
     variant: "label",
@@ -83,15 +85,16 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     as: "span",
     "aria-hidden": "true",
     variant: "forms.select.arrow"
-  }, (0, _react2.jsx)(_.Icon, {
+  }, (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
     icon: _MenuDownIcon["default"],
     title: {
       name: 'Menu Down Icon'
-    },
+    }
+  }, iconProps, {
     sx: state.isOpen ? {
       transform: 'rotate(180deg)'
     } : null
-  }))), (0, _react2.jsx)(_reactAria.VisuallyHidden, {
+  })))), (0, _react2.jsx)(_reactAria.VisuallyHidden, {
     "aria-live": "polite",
     id: helperTextId
   }, helperText));

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

@@ -231,6 +231,24 @@ test('passing helper text should display it and correct aria attributes on input
   var helperTextID = helper.getAttribute('id');
   expect(_testWrapper.screen.getByRole('button')).toHaveAttribute('aria-describedby', helperTextID);
 });
+test('iconProps are spread to the icon element', function () {
+  var iconTestId = 'custom-icon';
+  getComponent({
+    iconProps: {
+      'data-testid': iconTestId
+    }
+  });
+  expect(_testWrapper.screen.getByTestId(iconTestId)).toBeInTheDocument();
+});
+test('triggerProps are spread to the trigger button', function () {
+  getComponent({
+    triggerProps: {
+      'data-custom': 'custom-trigger'
+    }
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  expect(button).toHaveAttribute('data-custom', 'custom-trigger');
+});
 
 // Needs to be added to each components test file
 (0, _universalComponentTest.universalComponentTests)({

package/lib/cjs/styles/themeOverrides/onyxDarkUiLibraryOverride.js

@@ -94,11 +94,13 @@ var forms = {
       borderColor: '#caced3 !important'
     },
     '&[type=password]:focus': {
+      outline: '1px solid',
+      outlineColor: 'accent.60',
+      outlineOffset: '0px',
       borderColor: "".concat(_onyxTokens.astroTokens.color.blue[500], " !important")
     },
     numberField: _objectSpread(_objectSpread(_objectSpread({}, _nextGenDarkMode["default"].input), _nextGenDarkMode["default"].numberFieldStyles), {}, {
       '&[type=text]': _objectSpread(_objectSpread({}, _nextGenDarkMode["default"].text.inputValue), {}, {
-        backgroundColor: 'white',
         borderColor: _onyxTokens.astroTokensDark.color.gray[500]
       }),
       '&[type=text]:focus': {

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -31,8 +31,10 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     isDisabled = props.isDisabled,
     status = props.status,
     helperText = props.helperText,
+    iconProps = props.iconProps,
     hasInlineLoader = props.hasInlineLoader,
-    popoverWidth = props.popoverWidth;
+    popoverWidth = props.popoverWidth,
+    triggerProps = props.triggerProps;
   var _getAriaAttributeProp = getAriaAttributeProps(props),
     ariaProps = _getAriaAttributeProp.ariaProps;
   var _useGetTheme = useGetTheme(),
@@ -53,14 +55,14 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   var fieldControlInputProps = selectFieldProps.fieldControlInputProps,
     isLoadingInitial = selectFieldProps.isLoadingInitial,
     state = selectFieldProps.state,
-    triggerProps = selectFieldProps.triggerProps,
+    raTriggerProps = selectFieldProps.triggerProps,
     triggerRef = selectFieldProps.triggerRef;
   var trigger = ___EmotionJSX(Button, _extends({
     className: fieldControlInputProps.className,
     ref: triggerRef,
     variant: "link",
     tabIndex: isDisabled ? -1 : 0
-  }, getPendoID(displayName), triggerProps, ariaProps, {
+  }, getPendoID(displayName), triggerProps, raTriggerProps, ariaProps, {
     "aria-describedby": helperText && helperTextId
   }), ___EmotionJSX(Text, {
     variant: "label",
@@ -73,15 +75,16 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     as: "span",
     "aria-hidden": "true",
     variant: "forms.select.arrow"
-  }, ___EmotionJSX(Icon, {
+  }, ___EmotionJSX(Icon, _extends({
     icon: MenuDown,
     title: {
       name: 'Menu Down Icon'
-    },
+    }
+  }, iconProps, {
     sx: state.isOpen ? {
       transform: 'rotate(180deg)'
     } : null
-  }))), ___EmotionJSX(VisuallyHidden, {
+  })))), ___EmotionJSX(VisuallyHidden, {
     "aria-live": "polite",
     id: helperTextId
   }, helperText));

package/lib/components/LinkSelectField/LinkSelectField.test.js

@@ -228,6 +228,24 @@ test('passing helper text should display it and correct aria attributes on input
   var helperTextID = helper.getAttribute('id');
   expect(screen.getByRole('button')).toHaveAttribute('aria-describedby', helperTextID);
 });
+test('iconProps are spread to the icon element', function () {
+  var iconTestId = 'custom-icon';
+  getComponent({
+    iconProps: {
+      'data-testid': iconTestId
+    }
+  });
+  expect(screen.getByTestId(iconTestId)).toBeInTheDocument();
+});
+test('triggerProps are spread to the trigger button', function () {
+  getComponent({
+    triggerProps: {
+      'data-custom': 'custom-trigger'
+    }
+  });
+  var button = screen.getByRole('button');
+  expect(button).toHaveAttribute('data-custom', 'custom-trigger');
+});
 
 // Needs to be added to each components test file
 universalComponentTests({

package/lib/styles/themeOverrides/onyxDarkUiLibraryOverride.js

@@ -87,11 +87,13 @@ var forms = {
       borderColor: '#caced3 !important'
     },
     '&[type=password]:focus': {
+      outline: '1px solid',
+      outlineColor: 'accent.60',
+      outlineOffset: '0px',
       borderColor: "".concat(astroTokens.color.blue[500], " !important")
     },
     numberField: _objectSpread(_objectSpread(_objectSpread({}, theme.input), theme.numberFieldStyles), {}, {
       '&[type=text]': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
-        backgroundColor: 'white',
         borderColor: astroTokensDark.color.gray[500]
       }),
       '&[type=text]:focus': {

package/package.json

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