@pingux/astro 2.53.1 → 2.54.0-alpha.0

package/lib/components/ListViewItem/ListViewItem.js

@@ -6,9 +6,11 @@ import React, { forwardRef } from 'react';
 import { useHover } from '@react-aria/interactions';
 import { Box, Icon, Image, Text } from '../..';
 import { useStatusClasses } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { listViewItemPropTypes } from './listViewItemAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var LIST_ITEM_ICON = '-list-item-icon';
+var displayName = 'ListViewItem';
 var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _context;
   var children = _ref.children,
@@ -75,7 +77,7 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: classNames,
     ref: ref,
     variant: "listViewItem.styledContainer"
-  }, hoverProps, others), ___EmotionJSX(Box, {
+  }, hoverProps, getPendoID(displayName), others), ___EmotionJSX(Box, {
     isRow: true,
     variant: getWrapperVariant()
   }, renderData, (slots === null || slots === void 0 ? void 0 : slots.rightOfData) && ___EmotionJSX(Box, {
@@ -88,5 +90,5 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, children)));
 });
 ListViewItem.propTypes = listViewItemPropTypes;
-ListViewItem.displayName = 'ListViewItem';
+ListViewItem.displayName = displayName;
 export default ListViewItem;

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -32,8 +32,9 @@ import PropTypes from 'prop-types';
 import { Badge, Box, Icon, IconButton, PopoverContainer, ScrollBox, Text, TextField } from '../..';
 import { MultivaluesContext } from '../../context/MultivaluesContext';
 import { usePropWarning } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
-import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
+import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
 import ListBox from '../ListBox';
@@ -70,8 +71,6 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     scrollBoxProps = props.scrollBoxProps,
     status = props.status,
     others = _objectWithoutProperties(props, _excluded);
-  var _getAriaAttributeProp = getAriaAttributeProps(others),
-    ariaProps = _getAriaAttributeProp.ariaProps;
   var hasCustomValue = mode === 'non-restrictive';
   usePropWarning(props, 'disabled', 'isDisabled');
   var _useState = useState([]),
@@ -487,7 +486,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     value: filterString,
     helperText: helperText,
     "aria-invalid": status === 'error' && true
-  }, ariaProps, inputProps)), ___EmotionJSX(PopoverContainer, {
+  }, getPendoID('MultivaluesField'), others, inputProps)), ___EmotionJSX(PopoverContainer, {
     hasNoArrow: true,
     isNonModal: true,
     isOpen: !state.collection.size ? false : isOpen,

package/lib/components/NumberField/NumberField.js

@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../..';
 import { useField, usePropWarning } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusPropTypes } from '../../utils/docUtils/statusProp';
@@ -99,7 +100,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   // 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({
+  return ___EmotionJSX(Box, _extends({}, getPendoID('NumberField'), fieldContainerProps), ___EmotionJSX(Label, updatedLabelProps), ___EmotionJSX(Box, _extends({
     variant: "forms.numberField.noDefaultArrows"
   }, groupProps), ___EmotionJSX(Box, _extends({
     variant: "forms.numberField.arrowsWrapper"

package/lib/components/PasswordField/PasswordField.js

@@ -26,11 +26,13 @@ import { VisuallyHidden } from '@react-aria/visually-hidden';
 import PropTypes from 'prop-types';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label, PopoverContainer, RequirementsList } from '../..';
 import { useDebounce, useField, useProgressiveState, usePropWarning, useStatusClasses } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'PasswordField';
 var ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE = {
   HIDE: 'hide password',
   SHOW: 'show password'
@@ -153,7 +155,7 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
   };
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, _extends({
     variant: "forms.input.fieldContainer"
-  }, fieldContainerProps), ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
+  }, getPendoID(displayName), fieldContainerProps), ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
     variant: "forms.input.fieldControlWrapper",
     isRow: true
   }, fieldControlWrapperProps, {
@@ -282,5 +284,5 @@ PasswordField.defaultProps = _objectSpread({
   requirements: [],
   type: 'password'
 }, statusDefaultProp);
-PasswordField.displayName = 'PasswordField';
+PasswordField.displayName = displayName;
 export default PasswordField;

package/lib/components/RadioGroupField/RadioGroupField.js

@@ -18,11 +18,13 @@ import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Label } from '../..';
 import { usePropWarning, useStatusClasses } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import { RadioContext } from '../RadioField';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'RadioGroupField';
 var RadioGroupField = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     className = props.className,
@@ -51,7 +53,7 @@ var RadioGroupField = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     className: classNames
-  }, unhandledAriaProps, radioGroupProps), ___EmotionJSX(Label, _extends({
+  }, getPendoID(displayName), unhandledAriaProps, radioGroupProps), ___EmotionJSX(Label, _extends({
     isDisabled: isDisabled,
     hintText: hintText,
     isRequired: isRequired,
@@ -102,5 +104,5 @@ RadioGroupField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string
 }, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
-RadioGroupField.displayName = 'RadioGroupField';
+RadioGroupField.displayName = displayName;
 export default RadioGroupField;

package/lib/components/SearchField/SearchField.js

@@ -18,9 +18,11 @@ import SearchIcon from '@pingux/mdi-react/SearchIcon';
 import PropTypes from 'prop-types';
 import { Box, Icon, IconButton, Input, Label } from '../..';
 import { useField, usePropWarning } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'SearchField';
 var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
   var autocomplete = props.autocomplete,
     hasAutoFocus = props.hasAutoFocus,
@@ -60,7 +62,7 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
       state.setValue('');
     }
   };
-  return ___EmotionJSX(Box, fieldContainerProps, label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
+  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
     variant: "forms.search.wrapper"
   }, fieldControlWrapperProps), ___EmotionJSX(Input, _extends({
     variant: "forms.input.search",
@@ -257,5 +259,5 @@ SearchField.defaultProps = {
   hasNoClearButton: false,
   icon: SearchIcon
 };
-SearchField.displayName = 'SearchField';
+SearchField.displayName = displayName;
 export default SearchField;

package/lib/components/SelectFieldBase/SelectFieldBase.js

@@ -19,6 +19,7 @@ import MenuDown from '@pingux/mdi-react/MenuDownIcon';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 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 Box from '../Box';
@@ -96,7 +97,7 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     variant: "forms.input.fieldContainer"
-  }, fieldContainerProps, {
+  }, getPendoID('SelectField'), fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx)
   }), ___EmotionJSX(Label, fieldLabelProps, label), ___EmotionJSX(HiddenSelect, {
     state: state,

package/lib/components/SwitchField/SwitchField.js

@@ -20,9 +20,11 @@ import { usePress } from '@react-aria/interactions';
 import omit from 'lodash/omit';
 import { Box, FieldHelperText, Label, Switch } from '../..';
 import { useField, usePropWarning } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { statusDefaultProp } from '../../utils/docUtils/statusProp';
 import { switchFieldPropTypes } from './switchFieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'SwitchField';
 var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
   var label = props.label,
     helperText = props.helperText,
@@ -84,16 +86,16 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
     'aria-controls': others['aria-controls'],
     'aria-errormessage': others['aria-errormessage']
   };
-  return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, _extends({
+  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), ___EmotionJSX(Label, _extends({
     variant: "forms.switch.label"
   }, fieldLabelProps), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(Switch, _extends({
     ref: switchRef,
     inputProps: fieldControlInputProps
-  }, unhandledAriaProps, others))), label), helperText && ___EmotionJSX(FieldHelperText, {
+  }, unhandledAriaProps, omit(others, 'data-pendo-id')))), label), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText));
 });
 SwitchField.propTypes = switchFieldPropTypes;
 SwitchField.defaultProps = _objectSpread({}, statusDefaultProp);
-SwitchField.displayName = 'SwitchField';
+SwitchField.displayName = displayName;
 export default SwitchField;

package/lib/components/Tab/Tab.js

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import { Box, Text, Tooltip, TooltipTrigger } from '../..';
 import { usePropWarning, useStatusClasses } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import TabPicker from '../TabPicker';
 import { TabsContext } from '../Tabs';
 
@@ -71,7 +72,7 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
   }, slots === null || slots === void 0 ? void 0 : slots.beforeTab, ___EmotionJSX(Box, _extends({
     className: classNames,
     variant: "tab"
-  }, mergeProps(focusProps, hoverProps, tabProps), otherItemProps, {
+  }, mergeProps(focusProps, hoverProps, tabProps), getPendoID('Tab'), otherItemProps, {
     ref: tabRef,
     title: titleAttr || undefined
   }), icon, ___EmotionJSX(Text, _extends({

package/lib/components/TextAreaField/TextAreaField.js

@@ -16,10 +16,12 @@ import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Label, TextArea } from '../..';
 import { useColumnStyles, useField, useLabelHeight, usePropWarning } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'TextAreaField';
 var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
     isUnresizable = props.isUnresizable,
@@ -101,7 +103,7 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, labelNode);
   return ___EmotionJSX(Box, _extends({
     variant: "forms.input.fieldContainer"
-  }, fieldContainerProps, {
+  }, getPendoID(displayName), fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx),
     ref: containerRef,
     maxWidth: "100%"
@@ -203,5 +205,5 @@ TextAreaField.defaultProps = _objectSpread({
   isUnresizable: false,
   rows: 4
 }, statusDefaultProp);
-TextAreaField.displayName = 'TextAreaField';
+TextAreaField.displayName = displayName;
 export default TextAreaField;

package/lib/components/TextField/TextField.js

@@ -16,10 +16,12 @@ import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Input, Label } from '../..';
 import { useField, useLabelHeight, usePropWarning } from '../../hooks';
 import useColumnStyles from '../../hooks/useColumnStyles';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'TextField';
 var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
     helpHintProps = props.helpHintProps,
@@ -48,7 +50,7 @@ var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperTextId = uuid();
   return ___EmotionJSX(Box, _extends({
     variant: "forms.input.fieldContainer"
-  }, fieldContainerProps, {
+  }, getPendoID(displayName), fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx)
   }), ___EmotionJSX(Label, _extends({}, fieldLabelProps, {
     ref: labelRef,
@@ -140,5 +142,5 @@ TextField.defaultProps = _objectSpread({
   isReadOnly: false,
   isRequired: false
 }, statusDefaultProp);
-TextField.displayName = 'TextField';
+TextField.displayName = displayName;
 export default TextField;

package/lib/components/TimeZonePicker/TimeZonePicker.js

@@ -23,6 +23,7 @@ import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instanc
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Box, ComboBoxField, Item, Text } from '../../index';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import defaultTimezones, { usCities } from './timezones.js';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var createSearchTags = function createSearchTags(_ref) {
@@ -184,7 +185,7 @@ var TimeZonePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       }]
     }, otherProps);
   }, [emptySearchText, filteredTimezones, otherProps]);
-  return ___EmotionJSX(ComboBoxField, _extends({}, comboBoxFieldProps, {
+  return ___EmotionJSX(ComboBoxField, _extends({}, getPendoID('TimeZonePicker'), comboBoxFieldProps, {
     disabledKeys: [emptySearchText],
     menuTrigger: "input"
   }), items);

package/lib/types/calendar.js

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

package/lib/types/index.js

@@ -4,6 +4,7 @@ export * from './bracket';
 export * from './breadCrumbs';
 export * from './button';
 export * from './buttonBar';
+export * from './calendar';
 export * from './card';
 export * from './copyText';
 export * from './fieldHelperText';

package/lib/utils/devUtils/constants/pendoID.js

@@ -0,0 +1,5 @@
+export var getPendoID = function getPendoID(componentName) {
+  return {
+    'data-pendo-id': componentName
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.53.1",
+  "version": "2.54.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "@emotion/react": "^11.1.1",
     "@emotion/styled": "^11.1.1",
     "@faker-js/faker": "~7.5.0",
-    "@internationalized/date": "3.0.1",
+    "@internationalized/date": "3.5.0",
     "@mdx-js/react": "^1.6.22",
     "@pingux/mdi-react": "^1.2.0",
     "@react-aria/accordion": "~3.0.0-alpha.11",