@pingux/astro 2.203.0-alpha.0 → 2.205.0-alpha.0

package/lib/components/LinkSelectField/LinkSelectField.stories.js

@@ -36,9 +36,10 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useCallback, useEffect, useState } from 'react';
 import { OverlayProvider } from 'react-aria';
+import EarthIcon from '@pingux/mdi-react/EarthIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { getAllUsers } from '../../api/users';
-import { Box, Item, LinkSelectField, Section } from '../../index';
+import { Box, Button, Item, LinkSelectField, Section } from '../../index';
 import { LIMIT } from '../../mocks/constants';
 import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
@@ -85,6 +86,14 @@ export default {
     isRequired: {},
     selectedKey: {
       control: false
+    },
+    iconProps: {
+      control: false,
+      description: 'Props object spread into the Icon inside the default trigger button. Supports icon, title, size, color, sx, and other IconProps. The sx prop is merged with the rotation style.'
+    },
+    trigger: {
+      control: false,
+      description: 'A ReactNode that replaces the default Button trigger entirely. When provided, the local Button element is not rendered.'
     }
   }, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes),
   args: {
@@ -343,4 +352,49 @@ WithPopoverWidth.parameters = {
       story: 'The `popoverWidth` prop can be used to set a custom width for the dropdown/popover.'
     }
   }
+};
+export var WithIconProps = function WithIconProps() {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(LinkSelectField, {
+    label: "What's your favorite color?",
+    iconProps: {
+      icon: EarthIcon,
+      sx: {
+        color: 'accent.40'
+      }
+    }
+  }, ___EmotionJSX(Item, {
+    key: "red"
+  }, "Red"), ___EmotionJSX(Item, {
+    key: "blue"
+  }, "Blue"), ___EmotionJSX(Item, {
+    key: "yellow"
+  }, "Yellow")));
+};
+WithIconProps.parameters = {
+  docs: {
+    description: {
+      story: 'Use the `iconProps` prop to customize the icon inside the default trigger button. Here a different icon and custom `sx` color are passed via `iconProps`.'
+    }
+  }
+};
+export var WithCustomTrigger = function WithCustomTrigger() {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(LinkSelectField, {
+    label: "What's your favorite color?",
+    trigger: ___EmotionJSX(Button, {
+      variant: "primary"
+    }, "Open menu")
+  }, ___EmotionJSX(Item, {
+    key: "red"
+  }, "Red"), ___EmotionJSX(Item, {
+    key: "blue"
+  }, "Blue"), ___EmotionJSX(Item, {
+    key: "yellow"
+  }, "Yellow")));
+};
+WithCustomTrigger.parameters = {
+  docs: {
+    description: {
+      story: 'Use the `trigger` prop to supply a fully custom ReactNode trigger, replacing the default `Button` element entirely.'
+    }
+  }
 };

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

@@ -21,6 +21,7 @@ function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present,
 function _regeneratorDefine2(e, r, n, t) { var i = _Object$defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function _OverloadYield(e, d) { this.v = e, this.k = d; }
 import React from 'react';
+import EarthIcon from '@pingux/mdi-react/EarthIcon';
 import userEvent from '@testing-library/user-event';
 import { Item, LinkSelectField } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
@@ -228,23 +229,47 @@ 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';
+test('iconProps data-testid is applied to the inner Icon element', function () {
   getComponent({
     iconProps: {
-      'data-testid': iconTestId
+      'data-testid': 'custom-icon',
+      sx: {
+        color: 'red'
+      }
     }
   });
-  expect(screen.getByTestId(iconTestId)).toBeInTheDocument();
+  var icon = screen.getByTestId('custom-icon');
+  expect(icon).toBeInTheDocument();
+  expect(icon).toBeInstanceOf(SVGSVGElement);
 });
-test('triggerProps are spread to the trigger button', function () {
+test('iconProps with a custom icon renders the substitute icon without throwing', function () {
   getComponent({
-    triggerProps: {
-      'data-custom': 'custom-trigger'
+    iconProps: {
+      icon: EarthIcon
     }
   });
+  // The default trigger button is still present when only iconProps is provided
+  var button = screen.getByRole('button');
+  expect(button).toBeInTheDocument();
+});
+test('trigger prop replaces the default Button trigger', function () {
+  getComponent({
+    trigger: ___EmotionJSX("button", {
+      type: "button",
+      "data-testid": "custom-trigger"
+    }, "Custom")
+  });
+  expect(screen.getByTestId('custom-trigger')).toBeInTheDocument();
+  // The default Button trigger (identified by its pendo data attribute) should not be rendered
+  expect(document.querySelector('[data-pendo-id="LinkSelectField"]')).not.toBeInTheDocument();
+});
+test('default render is unchanged when neither iconProps nor trigger is provided', function () {
+  getComponent();
+  // The default trigger button is present via getByRole
   var button = screen.getByRole('button');
-  expect(button).toHaveAttribute('data-custom', 'custom-trigger');
+  expect(button).toBeInTheDocument();
+  // The default button has the pendo ID set by the component
+  expect(document.querySelector('[data-pendo-id="LinkSelectField"]')).toBeInTheDocument();
 });
 
 // Needs to be added to each components test file

package/lib/components/Stepper/Line.js

@@ -1,7 +1,5 @@
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 /* istanbul ignore file */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useStatusClasses } from '../../hooks';
 import Box from '../Box';
 import { stepStatuses } from './Stepper.constants';
@@ -20,7 +18,4 @@ var Line = function Line(_ref) {
     className: classNames
   });
 };
-Line.propTypes = {
-  status: PropTypes.oneOf(_Object$values(stepStatuses))
-};
 export default Line;

package/lib/components/Stepper/Step.js

@@ -1,9 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { forwardRef } from 'react';
 import CheckBoldIcon from '@pingux/mdi-react/CheckBoldIcon';
 import { useHover } from '@react-aria/interactions';
-import PropTypes from 'prop-types';
 import { Box, Icon } from '../../index';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import { stepStatuses } from './Stepper.constants';
@@ -11,11 +9,13 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var COMPLETED = stepStatuses.COMPLETED,
   INACTIVE = stepStatuses.INACTIVE;
 var Step = /*#__PURE__*/forwardRef(function (props, ref) {
-  var status = props.status,
-    value = props.value,
+  var _props$status = props.status,
+    status = _props$status === void 0 ? INACTIVE : _props$status,
+    _props$value = props.value,
+    value = _props$value === void 0 ? 0 : _props$value,
     className = props.className,
     orientation = props.orientation;
-  var _useHover = useHover(props),
+  var _useHover = useHover({}),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
   var stepValue = orientation !== ORIENTATION.VERTICAL && value;
@@ -33,13 +33,5 @@ var Step = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }) : stepValue);
 });
-Step.propTypes = {
-  status: PropTypes.oneOf(_Object$values(stepStatuses)),
-  value: PropTypes.number,
-  orientation: PropTypes.oneOf([ORIENTATION.VERTICAL, ORIENTATION.HORIZONTAL])
-};
-Step.defaultProps = {
-  status: INACTIVE,
-  value: 0
-};
+Step.displayName = 'Step';
 export default Step;

package/lib/components/Stepper/Stepper.js

@@ -18,11 +18,11 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 /* istanbul ignore file */
 import React, { forwardRef } from 'react';
 import { useSingleSelectListState } from '@react-stately/list';
-import PropTypes from 'prop-types';
-import { Box, Step, Tab, Tabs, Text } from '../..';
-import { useStatusClasses } from '../../hooks';
+import { Box, Step, Tabs, Text } from '../..';
+import { useLocalOrForwardRef, useStatusClasses } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
+import Tab from '../Tab';
 import Line from './Line';
 import { stepStatuses } from './Stepper.constants';
 import { verticalLine } from './Stepper.styles';
@@ -39,6 +39,15 @@ var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
     orientation = props.orientation,
     className = props.className,
     others = _objectWithoutProperties(props, _excluded);
+  var stepperRef = useLocalOrForwardRef(ref);
+  if (process.env.NODE_ENV !== 'production' && props.activeStep !== undefined) {
+    var validationError = isValidPositiveInt({
+      activeStep: props.activeStep
+    }, 'activeStep', 'Stepper');
+    if (validationError) {
+      console.error(validationError.message);
+    }
+  }
   var state = useSingleSelectListState(props);
   var getStatus = function getStatus(i) {
     if (i === activeStep) {
@@ -51,7 +60,7 @@ var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
   };
   var onStepChangeHandler = function onStepChangeHandler(key) {
     if (onStepChange) {
-      onStepChange(+key);
+      onStepChange(Number(key));
     }
   };
   var _useStatusClasses = useStatusClasses(className, {
@@ -97,7 +106,8 @@ var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
 
     /* istanbul ignore next */
     var textValue = item && item.value && item.value.label || item.textValue || stepIndex.toString();
-    var container = ___EmotionJSX(Tab, {
+    var TabItem = Tab;
+    var container = ___EmotionJSX(TabItem, {
       key: stepIndex,
       variant: "stepper.tab",
       tabLineProps: {
@@ -112,13 +122,13 @@ var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
       content: item.rendered,
       separator: !isFirst && orientation === ORIENTATION.HORIZONTAL && !isFirst && line,
       tooltipTriggerProps: tooltipProps,
-      sx: i !== steps.length - 1 && orientation === ORIENTATION.VERTICAL && verticalLine
+      sx: i !== steps.length - 1 && orientation === ORIENTATION.VERTICAL ? verticalLine : undefined
     });
     isFirst = isFirst && !container;
     return container;
   });
   return ___EmotionJSX(Tabs, _extends({
-    ref: ref,
+    ref: stepperRef,
     variant: "stepper.wrapper",
     tabListProps: _objectSpread({
       variant: 'stepper.tabs',
@@ -130,30 +140,6 @@ var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
     orientation: orientation
   }, others), render);
 });
-Stepper.propTypes = {
-  /**
-   * *For performance reasons,
-  use this prop instead of Array.map when iteratively rendering Items*.
-   * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
-  */
-  items: PropTypes.arrayOf(PropTypes.shape({
-    /** The primary option for the tooltip label. */
-    label: PropTypes.string,
-    children: PropTypes.node,
-    name: PropTypes.string
-  })),
-  /** The number of the current step (using one-based indexing) */
-  activeStep: isValidPositiveInt,
-  /**
-  * Handler that is called when the current step changes
-  * `(index: number) => void`
-  */
-  onStepChange: PropTypes.func,
-  /** A props object that is subsequently spread into the rendered tablist. */
-  tabListProps: PropTypes.shape({}),
-  tooltipProps: PropTypes.shape({}),
-  orientation: PropTypes.oneOf(['vertical', 'horizontal'])
-};
 Stepper.displayName = 'Stepper';
 Stepper.defaultProps = {
   orientation: 'horizontal'

package/lib/components/Stepper/Stepper.stories.js

@@ -5,7 +5,7 @@ import CreationOutlineIcon from '@pingux/mdi-react/CreationOutlineIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { useOverlayPanelState } from '../../hooks';
 import { Box, Button, Item, OverlayPanel, OverlayProvider, PanelHeader, PanelHeaderCloseButton, Stepper, Text } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import StepperReadme from './Stepper.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -236,7 +236,7 @@ export var Panel = function Panel() {
   var _useOverlayPanelState = useOverlayPanelState(),
     state = _useOverlayPanelState.state,
     onClose = _useOverlayPanelState.onClose;
-  var triggerRef = useRef < HTMLButtonElement > null;
+  var triggerRef = useRef(null);
   var onCloseHandler = function onCloseHandler() {
     return onClose(state, triggerRef);
   };

package/lib/components/Stepper/Stepper.test.js

@@ -61,34 +61,31 @@ var defaultProps = {
   activeStep: 1,
   items: steps
 };
+
+// StepperProps.children is ReactNode (from BoxProps), but Stepper also accepts a render-prop
+// function via react-stately's collection mechanism. We cast to silence the assignability error.
+var stepperChildren = function stepperChildren(_ref) {
+  var name = _ref.name,
+    children = _ref.children;
+  return ___EmotionJSX(Item, {
+    key: name || children,
+    textValue: name || children
+  }, ___EmotionJSX(Text, null, children));
+};
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$renderFn = _ref.renderFn,
-    renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref2$renderFn = _ref2.renderFn,
+    renderFn = _ref2$renderFn === void 0 ? render : _ref2$renderFn;
   return renderFn(___EmotionJSX(CacheProvider, {
     value: emotionCache
-  }, ___EmotionJSX(Stepper, _extends({}, defaultProps, props), function (_ref2) {
-    var name = _ref2.name,
-      children = _ref2.children;
-    return ___EmotionJSX(Item, {
-      key: name || children,
-      textValue: name || children
-    }, ___EmotionJSX(Text, null, children));
-  })));
+  }, ___EmotionJSX(Stepper, _extends({}, defaultProps, props), stepperChildren)));
 };
 
 // Needs to be added to each components test file
 universalComponentTests({
   renderComponent: function renderComponent(props) {
-    return ___EmotionJSX(Stepper, _extends({}, defaultProps, props), function (_ref3) {
-      var name = _ref3.name,
-        children = _ref3.children;
-      return ___EmotionJSX(Item, {
-        key: name || children,
-        textValue: name || children
-      }, ___EmotionJSX(Text, null, children));
-    });
+    return ___EmotionJSX(Stepper, _extends({}, defaultProps, props), stepperChildren);
   }
 });
 test('renders Stepper component in the default state', function () {
@@ -162,8 +159,9 @@ test('tooltip renders expected content based on props', /*#__PURE__*/_asyncToGen
         fireEvent.mouseMove(tab0);
         fireEvent.mouseEnter(tab0);
         _setTimeout(function () {
+          var _steps$0$label;
           expect(screen.queryByRole('tooltip')).toBeInTheDocument();
-          expect(screen.queryByRole('tooltip')).toHaveTextContent(steps[0].label);
+          expect(screen.queryByRole('tooltip')).toHaveTextContent((_steps$0$label = steps[0].label) !== null && _steps$0$label !== void 0 ? _steps$0$label : '');
         }, 0);
 
         // Should render textValue

package/lib/styles/themeOverrides/onyxDarkUiLibraryOverride.js

@@ -111,7 +111,9 @@ var forms = {
       '& input[type=search]': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
         borderColor: astroTokensDark.color.gray[500],
         fontSize: '15px',
-        bg: 'white',
+        bg: astroTokensDark.color.gray[900],
+        height: '50px',
+        borderRadius: '4px',
         '::placeholder': _objectSpread(_objectSpread({}, theme.text.placeholder), {}, {
           fontStyle: 'unset',
           fontSize: '15px'

package/lib/types/Stepper.js

@@ -0,0 +1 @@
+export {};

package/lib/types/index.js

@@ -52,6 +52,7 @@ export * from './separator';
 export * from './ServerErrorBoundary';
 export * from './shared';
 export * from './skeleton';
+export * from './Stepper';
 export * from './switchField';
 export * from './tab';
 export * from './table';

package/lib/utils/devUtils/props/isValidPositiveInt.js

@@ -12,7 +12,8 @@ var validatePositiveInteger = function validatePositiveInteger() {
     var isPositiveInteger = isWithinRange(1, Infinity);
     if (props[propName] && !isPositiveInteger(props[propName])) {
       var _context, _context2;
-      return new Error(_concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "Expected a positive integer for ".concat(propName, " in ")).call(_context2, componentName, ", but instead received `")).call(_context, props[propName], "`."));
+      var received = props[propName];
+      return new Error(_concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "Expected a positive integer for ".concat(propName, " in ")).call(_context2, componentName, ", but instead received `")).call(_context, received, "`."));
     }
     // Everything is fine
     return null;

package/package.json

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