@pingux/astro 2.92.1 → 2.93.0-alpha.1

package/lib/components/SelectFieldBase/SelectFieldBase.js

@@ -10,18 +10,15 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["columnStyleProps", "defaultText", "fieldContainerProps", "fieldControlInputProps", "fieldControlWrapperProps", "fieldLabelProps", "helperText", "isLoadingInitial", "label", "labelMode", "name", "overlay", "placeholder", "slots", "state", "status", "trigger", "triggerProps", "triggerRef", "valueProps"];
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 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; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useMemo } from 'react';
 import { HiddenSelect } from 'react-aria';
-import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import useGetTheme from '../../hooks/useGetTheme';
 import { modes } from '../../utils/devUtils/constants/labelModes';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
-import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
+import { getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
 import Box from '../Box';
 import Button from '../Button';
 import FieldHelperText from '../FieldHelperText';
@@ -38,33 +35,34 @@ import Text from '../Text';
  * React Stately.
  */
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var SelectFieldBase = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var columnStyleProps = _ref.columnStyleProps,
-    defaultText = _ref.defaultText,
-    fieldContainerProps = _ref.fieldContainerProps,
-    fieldControlInputProps = _ref.fieldControlInputProps,
-    fieldControlWrapperProps = _ref.fieldControlWrapperProps,
-    fieldLabelProps = _ref.fieldLabelProps,
-    helperText = _ref.helperText,
-    isLoadingInitial = _ref.isLoadingInitial,
-    label = _ref.label,
-    labelMode = _ref.labelMode,
-    name = _ref.name,
-    overlay = _ref.overlay,
-    placeholder = _ref.placeholder,
-    slots = _ref.slots,
-    state = _ref.state,
-    status = _ref.status,
-    trigger = _ref.trigger,
-    triggerProps = _ref.triggerProps,
-    triggerRef = _ref.triggerRef,
-    valueProps = _ref.valueProps,
-    others = _objectWithoutProperties(_ref, _excluded);
+var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
+  var columnStyleProps = props.columnStyleProps,
+    defaultText = props.defaultText,
+    fieldContainerProps = props.fieldContainerProps,
+    fieldControlInputProps = props.fieldControlInputProps,
+    fieldControlWrapperProps = props.fieldControlWrapperProps,
+    fieldLabelProps = props.fieldLabelProps,
+    helperText = props.helperText,
+    isLoadingInitial = props.isLoadingInitial,
+    label = props.label,
+    labelMode = props.labelMode,
+    name = props.name,
+    overlay = props.overlay,
+    placeholder = props.placeholder,
+    slots = props.slots,
+    state = props.state,
+    status = props.status,
+    trigger = props.trigger,
+    triggerProps = props.triggerProps,
+    triggerRef = props.triggerRef,
+    valueProps = props.valueProps,
+    others = _objectWithoutProperties(props, _excluded);
   var _getAriaAttributeProp = getAriaAttributeProps(others),
     ariaProps = _getAriaAttributeProp.ariaProps;
   var _useGetTheme = useGetTheme(),
     icons = _useGetTheme.icons;
-  var MenuDown = icons.MenuDown;
+  var MenuDown = icons.MenuDown,
+    MenuUp = icons.MenuUp;
   var helperTextId = useMemo(function () {
     return uuid();
   }, []);
@@ -88,14 +86,11 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "aria-hidden": "true",
     variant: "forms.select.arrow"
   }, ___EmotionJSX(Icon, {
-    icon: MenuDown,
+    icon: state.isOpen ? MenuUp : MenuDown,
     title: {
       name: 'Menu down'
     },
-    size: "md",
-    sx: state.isOpen ? {
-      transform: 'rotate(180deg)'
-    } : null
+    size: "md"
   }))), slots === null || slots === void 0 ? void 0 : slots.inContainer);
   return ___EmotionJSX(Box, _extends({
     ref: ref,
@@ -113,56 +108,4 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (_ref, ref) {
     id: helperTextId
   }, helperText));
 });
-SelectFieldBase.propTypes = _objectSpread(_objectSpread({
-  /** Default text rendered if no option is selected. Deprecated. */
-  defaultText: PropTypes.string,
-  /** Text rendered below the input. */
-  helperText: PropTypes.node,
-  /** The label for the select element. */
-  label: PropTypes.node,
-  /** Determines the textarea status indicator and helper text styling. Eg. float. */
-  labelMode: PropTypes.oneOf(_Object$values(modes)),
-  /** The name for the select element, used when submitting a form. */
-  name: PropTypes.string,
-  /** Temporary text that occupies the text input when it is empty. */
-  placeholder: PropTypes.string,
-  /** Determines whether to use column styles. */
-  columnStyleProps: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({})]),
-  /** Determines props that applied to root container. */
-  fieldContainerProps: PropTypes.shape({
-    sx: PropTypes.shape({})
-  }),
-  /** Determines props that applied to control field. */
-  fieldControlInputProps: PropTypes.shape({
-    className: PropTypes.string
-  }),
-  /** Determines props that applied to label of field. */
-  fieldLabelProps: PropTypes.shape({}),
-  /** Determines whether elements are loading and whether they haven't already appeared in list. */
-  isLoadingInitial: PropTypes.bool,
-  /** Container for list with options */
-  overlay: PropTypes.node,
-  /** State returned by useSelectState */
-  state: PropTypes.shape({
-    isOpen: PropTypes.bool,
-    selectedItem: PropTypes.shape({
-      rendered: PropTypes.node
-    })
-  }),
-  /** Provides a way to insert markup in specified places. */
-  slots: PropTypes.shape({
-    /** The given node will be inserted before the text in field container. */
-    leftOfData: PropTypes.node,
-    /** The given node will be inserted into the field container. */
-    inContainer: PropTypes.node
-  }),
-  /** Control for interaction with SelectField */
-  trigger: PropTypes.node,
-  /** Props for the popup trigger element. */
-  triggerProps: PropTypes.shape({}),
-  /** Determines ref that applied to control */
-  triggerRef: PropTypes.shape({}),
-  /** Props for the element representing the selected value. */
-  valueProps: PropTypes.shape({})
-}, statusPropTypes), ariaAttributesBasePropTypes);
 export default SelectFieldBase;

package/lib/components/SelectFieldBase/SelectFieldBase.test.js

@@ -74,7 +74,8 @@ beforeAll(function () {
     return 1024;
   });
   jest.spyOn(window, 'requestAnimationFrame').mockImplementation(function (cb) {
-    return cb();
+    cb(0);
+    return 0;
   });
   jest.useFakeTimers();
 });
@@ -158,7 +159,9 @@ test('clicking on the visible button opens the popuplist', function () {
   var button = screen.getByRole('button');
   expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(screen.queryByRole('option')).not.toBeInTheDocument();
-  userEvent.click(button);
+  if (button) {
+    userEvent.click(button);
+  }
   expect(screen.queryByRole('listbox')).toBeInTheDocument();
   expect(screen.queryAllByRole('option')).toHaveLength(3);
 });
@@ -174,7 +177,7 @@ test('clicking on an option then renders its text in the button', function () {
   userEvent.click(button);
   var options = screen.queryAllByRole('option');
   userEvent.click(options[0]);
-  expect(button).toHaveTextContent(options[0].textContent);
+  expect(button).toHaveTextContent(items[0].name);
 });
 test('hovering an option applies correct styles', function () {
   getComponent();
@@ -299,7 +302,10 @@ test('two listbox can not be open at the same time', function () {
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();
   var button = screen.queryByRole('button');
-  userEvent.click(button);
+  expect(button).toBeInTheDocument();
+  if (button) {
+    userEvent.click(button);
+  }
   var options = screen.queryAllByRole('option');
   expect(options).toHaveLength(items.length);
   expect(options[0]).toHaveAttribute('data-id', items[0].name);

package/lib/components/TextAreaField/TextAreaField.test.js

@@ -15,6 +15,7 @@ var defaultProps = {
   'data-testid': testId,
   label: 'testLabel'
 };
+var label = defaultProps.label;
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(TextAreaField, _extends({}, defaultProps, props)));
@@ -31,12 +32,12 @@ test('disabled prop disables input', function () {
   getComponent({
     isDisabled: true
   });
-  var textArea = screen.getByLabelText(defaultProps.label);
+  var textArea = screen.getByLabelText(label);
   expect(textArea).toBeDisabled();
 });
 test('text area field has focus', function () {
   getComponent();
-  var textArea = screen.getByLabelText(defaultProps.label);
+  var textArea = screen.getByLabelText(label);
   userEvent.tab();
   expect(textArea).toHaveFocus();
   expect(textArea).toHaveClass('is-focused');
@@ -45,8 +46,8 @@ test('disabled prop disables text field label', function () {
   getComponent({
     isDisabled: true
   });
-  var label = screen.getByText(defaultProps.label);
-  expect(label).toHaveClass('is-disabled');
+  var labelDom = screen.getByText(label);
+  expect(labelDom).toHaveClass('is-disabled');
 });
 test('text area field with helper text', function () {
   var helperText = 'helper text';
@@ -63,8 +64,8 @@ test('float label prop adds float label class', function () {
     helperText: helperText,
     labelMode: labelMode
   });
-  var label = screen.getByText(defaultProps.label);
-  expect(label).toHaveClass('is-float-label');
+  var labelDom = screen.getByText(label);
+  expect(labelDom).toHaveClass('is-float-label');
 });
 test('mousemove calls resize event', function () {
   var labelMode = 'float';
@@ -74,7 +75,7 @@ test('mousemove calls resize event', function () {
     labelMode: labelMode,
     resizeCallback: mockfunction
   });
-  var textArea = screen.getByLabelText(defaultProps.label);
+  var textArea = screen.getByLabelText(label);
   fireEvent.mouseMove(textArea);
   fireEvent.mouseMove(textArea);
   expect(mockfunction).toHaveBeenCalledTimes(2);
@@ -89,7 +90,7 @@ test('label will receive gridRow attribute if it will be higher than textarea',
     }
   });
   getComponent();
-  expect(screen.getByText(defaultProps.label)).toHaveStyle('grid-row: 1/5');
+  expect(screen.getByText(label)).toHaveStyle('grid-row: 1/5');
   _Object$defineProperty(HTMLElement.prototype, 'offsetHeight', originalOffsetHeight);
 });
 test('form wrapper will have default max label column width when no custom width set', function () {
@@ -105,7 +106,7 @@ test('passing read only prop applys the is-read-only class to the textarea', fun
   getComponent({
     isReadOnly: isReadOnly
   });
-  var textArea = screen.getByLabelText(defaultProps.label);
+  var textArea = screen.getByLabelText(label);
   expect(textArea).toHaveClass('is-read-only');
 });
 test('form wrapper will have a max label column width when custom width set', function () {

package/lib/types/selectField.js

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

package/lib/types/shared/fieldProps.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.92.1",
+  "version": "2.93.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -17,7 +17,6 @@
     "lib"
   ],
   "scripts": {
-    "install-react-version": "cd ../../ && yarn run install-react-18 && yarn && cd packages/astro && yarn",
     "build": "rm -rf lib && yarn run build:types && yarn run build:cjs && yarn run build:esm && cp README.md ./lib && cp MIGRATION.md ./lib",
     "build-ci": "yarn build",
     "append-version": "node ../../append_current_version.js",