@pingux/astro 2.53.1 → 2.54.0-alpha.0

package/lib/components/ArrayField/ArrayField.js

@@ -21,6 +21,7 @@ import { mergeProps, useLabel } from 'react-aria';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, Button, FieldHelperText, Label, Text } from '../..';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import statuses from '../../utils/devUtils/constants/statuses';
 import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
@@ -119,7 +120,7 @@ var ArrayField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _getAriaAttributeProp = getAriaAttributeProps(others),
     ariaProps = _getAriaAttributeProp.ariaProps,
     nonAriaProps = _getAriaAttributeProp.nonAriaProps;
-  return ___EmotionJSX(Box, _extends({}, nonAriaProps, {
+  return ___EmotionJSX(Box, _extends({}, getPendoID('ArrayField'), nonAriaProps, {
     ref: ref
   }), ___EmotionJSX(Label, _extends({}, raLabelProps, mergeProps(labelProps, raLabelProps, {
     children: label

package/lib/components/Button/Button.js

@@ -17,8 +17,10 @@ import { mergeProps, useButton, useFocusRing } from 'react-aria';
 import { Pressable, useHover, usePress } from '@react-aria/interactions';
 import { Button as ThemeUIButton } from 'theme-ui';
 import { useAriaLabelWarning, useLocalOrForwardRef, usePropWarning, useStatusClasses } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import Loader from '../Loader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'Button';
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     className = props.className,
@@ -91,7 +93,7 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       alignItems: 'center'
     } : {},
     variant: variant
-  }, others, mergeProps(_objectSpread(_objectSpread({}, buttonProps), {}, {
+  }, getPendoID(displayName), others, mergeProps(_objectSpread(_objectSpread({}, buttonProps), {}, {
     tabIndex: tabIndex
   }), hoverProps, focusProps)), isLoading ? ___EmotionJSX("span", {
     style: {
@@ -108,5 +110,5 @@ Button.defaultProps = {
   isDisabled: false,
   variant: 'default'
 };
-Button.displayName = 'Button';
+Button.displayName = displayName;
 export default Button;

package/lib/components/Calendar/Calendar.js

@@ -11,7 +11,7 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { createCalendar, parseDate } from '@internationalized/date';
 import ChevronDoubleLeftIcon from '@pingux/mdi-react/ChevronDoubleLeftIcon';
 import ChevronDoubleRightIcon from '@pingux/mdi-react/ChevronDoubleRightIcon';
@@ -21,7 +21,7 @@ import { useCalendar } from '@react-aria/calendar';
 import { useLocale } from '@react-aria/i18n';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { useCalendarState } from '@react-stately/calendar';
-import PropTypes from 'prop-types';
+import { useLocalOrForwardRef } from '../../hooks';
 import { Box, Button, Icon, IconButton, Text } from '../../index';
 import CalendarGrid from './CalendarGrid';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -34,12 +34,7 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
     value = props.value;
   var _useLocale = useLocale(),
     locale = _useLocale.locale;
-  var calenderRef = useRef();
-
-  // istanbul ignore next
-  useImperativeHandle(ref, function () {
-    return calenderRef.current;
-  });
+  var calenderRef = useLocalOrForwardRef(ref);
   var parsedDates = {
     value: typeof value === 'string' && parseDate(value) || value,
     defaultValue: typeof defaultValue === 'string' && parseDate(defaultValue) || defaultValue,
@@ -53,11 +48,11 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
     locale: locale,
     createCalendar: createCalendar
   }));
-  var _useCalendar = useCalendar(_objectSpread(_objectSpread({}, props), parsedDates), state, calenderRef),
-    calendarProps = _useCalendar.calendarProps,
-    prevButtonProps = _useCalendar.prevButtonProps,
-    nextButtonProps = _useCalendar.nextButtonProps,
-    title = _useCalendar.title;
+  var _ref = useCalendar(_objectSpread(_objectSpread({}, props), parsedDates), state),
+    calendarProps = _ref.calendarProps,
+    prevButtonProps = _ref.prevButtonProps,
+    nextButtonProps = _ref.nextButtonProps,
+    title = _ref.title;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     yearChangeDirection = _useState2[0],
@@ -72,10 +67,12 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
   // after updating visible year, reapplies focus to corresponding year buttons
   useEffect(function () {
     if (yearChangeDirection === nav.NEXT) {
-      nextYearRef.current.focus();
+      var _nextYearRef$current;
+      (_nextYearRef$current = nextYearRef.current) === null || _nextYearRef$current === void 0 ? void 0 : _nextYearRef$current.focus();
     }
     if (yearChangeDirection === nav.PREVIOUS) {
-      previousYearRef.current.focus();
+      var _previousYearRef$curr;
+      (_previousYearRef$curr = previousYearRef.current) === null || _previousYearRef$curr === void 0 ? void 0 : _previousYearRef$curr.focus();
     }
     setYearChangeDirection(null);
   }, [nav.NEXT, nav.PREVIOUS, yearChangeDirection]);
@@ -99,12 +96,13 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
   var renderTitle = ___EmotionJSX(Text, {
     variant: "itemTitle",
     role: "heading",
-    "aria-level": "3",
+    "aria-level": 3,
     fontWeight: 3
   }, title);
   return ___EmotionJSX(Box, _extends({}, calendarProps, {
     ref: calenderRef,
-    variant: "calendar.calendarContainer"
+    variant: "calendar.calendarContainer",
+    role: "group"
   }), ___EmotionJSX(VisuallyHidden, {
     "aria-live": "assertive"
   }, ___EmotionJSX(Text, null, title)), ___EmotionJSX(Box, {
@@ -167,47 +165,4 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
     tabIndex: -1
   })));
 });
-Calendar.propTypes = {
-  /** Prop to provide a custom default date (uncontrolled) */
-  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /** Prop to provide a custom default focused date (uncontrolled) */
-  defaultFocusedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /** Prop to provide a default date (controlled) */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /** custom week days for other calendars */
-  customWeekDays: PropTypes.arrayOf(PropTypes.string),
-  /** Whether the element should receive focus on render. */
-  hasAutoFocus: PropTypes.bool,
-  /** The element's unique identifier. */
-  id: PropTypes.string,
-  /**
-   * Callback that is called for each date of the calendar.
-   * If it returns true, then the date is unavailable.
-   *
-   * (date: DateValue) => boolean
-   */
-  isDateUnavailable: PropTypes.func,
-  /** Whether the calendar is disabled. */
-  isDisabled: PropTypes.bool,
-  /** Whether the calendar dates are only focusable. */
-  isReadOnly: PropTypes.bool,
-  /** Whether user input is required on the input before form submission. */
-  isRequired: PropTypes.bool,
-  /** The maximum allowed date that a user may select. */
-  maxValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /** The minimum allowed date that a user may select. */
-  minValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /** Handler that is called when the element loses focus. */
-  onBlur: PropTypes.func,
-  /** Handler that is called when the element's selection state changes. */
-  onChange: PropTypes.func,
-  /** Handler that is called when the element receives focus. */
-  onFocus: PropTypes.func,
-  /** Handler that is called when the element's focus status changes. */
-  onFocusChange: PropTypes.func,
-  /** Handler that is called when a key is pressed. */
-  onKeyDown: PropTypes.func,
-  /** Handler that is called when a key is released. */
-  onKeyUp: PropTypes.func
-};
 export default Calendar;

package/lib/components/Calendar/Calendar.stories.js

@@ -16,10 +16,10 @@ import React, { useState } from 'react';
 import { parseDate } from '@internationalized/date';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
-import Calendar from './Calendar';
 import CalendarReadme from './Calendar.mdx';
+import Calendar from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Calendar',

package/lib/components/Calendar/Calendar.test.js

@@ -274,7 +274,7 @@ test('unavailable dates cannot be picked', function () {
     return cell.getAttribute('aria-disabled') === 'true';
   });
   expect(cells.length).toBe(9);
-  var disabledDate = screen.queryByText(16);
+  var disabledDate = screen.getByText(16);
   userEvent.click(disabledDate);
   expect(disabledDate).toHaveAttribute('aria-disabled', 'true');
   expect(disabledDate).not.toHaveClass('is-selected');
@@ -290,6 +290,6 @@ test('should autofocus on current day with hasAutoFocus', function () {
   var focusedDay = _filterInstanceProperty(_context7 = screen.queryAllByText(day)).call(_context7, function (cell) {
     return cell.getAttribute('aria-disabled') !== 'true';
   });
-  expect(focusedDay[0]).toHaveTextContent(day);
+  expect(focusedDay[0]).toHaveTextContent(day.toString());
   expect(focusedDay[0]).toHaveFocus();
 });

package/lib/components/Calendar/CalendarCell.js

@@ -1,31 +1,26 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["state", "date", "className"];
-import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useCallback } from 'react';
 import { useCalendarCell } from '@react-aria/calendar';
 import { useFocusRing } from '@react-aria/focus';
 import { useHover, usePress } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
-import PropTypes from 'prop-types';
-import { useStatusClasses } from '../../hooks';
+import { useLocalOrForwardRef, useStatusClasses } from '../../hooks';
 import { Box, TableCell } from '../../index';
-
+import { jsx as ___EmotionJSX } from "@emotion/react";
 /**
 * Grid cell button element with the formatted day number.
 * Utilizes the useCalendarCell hook to return  props for an individual cell,
 * along with states and information.
 */
-import { jsx as ___EmotionJSX } from "@emotion/react";
+
 var CalendarCell = /*#__PURE__*/forwardRef(function (props, ref) {
   var state = props.state,
     date = props.date,
     className = props.className,
     others = _objectWithoutProperties(props, _excluded);
-  var cellRef = useRef();
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return cellRef.current;
-  });
+  var cellRef = useLocalOrForwardRef(ref);
   var _useCalendarCell = useCalendarCell({
       date: date
     }, state, cellRef),
@@ -47,11 +42,11 @@ var CalendarCell = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var handleDisableClick = useCallback(function () {
     var _cellRef$current, _cellRef$current2;
-    if ((_cellRef$current = cellRef.current) !== null && _cellRef$current !== void 0 && _cellRef$current.hidden && !state.isDisabled && formattedDate > 20) {
-      setFocused(undefined);
+    if ((_cellRef$current = cellRef.current) !== null && _cellRef$current !== void 0 && _cellRef$current.hidden && !state.isDisabled && Number(formattedDate) > 20) {
+      setFocused(false);
       focusPreviousPage();
-    } else if ((_cellRef$current2 = cellRef.current) !== null && _cellRef$current2 !== void 0 && _cellRef$current2.hidden && !state.isDisabled && formattedDate < 15) {
-      setFocused(undefined);
+    } else if ((_cellRef$current2 = cellRef.current) !== null && _cellRef$current2 !== void 0 && _cellRef$current2.hidden && !state.isDisabled && Number(formattedDate) < 15) {
+      setFocused(false);
       focusNextPage();
     }
   }, [date, focusNextPage, focusPreviousPage, formattedDate, state, setFocused]);
@@ -86,27 +81,12 @@ var CalendarCell = /*#__PURE__*/forwardRef(function (props, ref) {
   }), ___EmotionJSX(Box, _extends({
     variant: "calendar.calendarButton",
     ref: cellRef,
-    hidden: isOutsideVisibleRange,
+    hidden: isOutsideVisibleRange
+  }, mergeProps(buttonProps, others), {
     isSelected: isSelected,
     isDisabled: isDisabled,
     isUnavailable: isUnavailable,
     className: classNames
-  }, mergeProps(buttonProps, others)), formattedDate));
+  }), formattedDate));
 });
-CalendarCell.propTypes = {
-  isSelected: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isOutsideVisibleRange: PropTypes.bool,
-  isUnavailable: PropTypes.bool,
-  formattedDate: PropTypes.string,
-  state: PropTypes.shape({
-    focusPreviousPage: PropTypes.func,
-    setValue: PropTypes.func,
-    focusNextPage: PropTypes.func,
-    setFocused: PropTypes.func,
-    setFocusedDate: PropTypes.func,
-    isDisabled: PropTypes.bool
-  }),
-  date: PropTypes.shape({})
-};
 export default CalendarCell;

package/lib/components/Calendar/CalendarGrid.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
@@ -6,7 +7,6 @@ import React from 'react';
 import { getWeeksInMonth } from '@internationalized/date';
 import { useCalendarGrid } from '@react-aria/calendar';
 import { useLocale } from '@react-aria/i18n';
-import PropTypes from 'prop-types';
 import { Table, TableBody, TableCell, TableHead, TableRow } from '../../index';
 import CalendarCell from './CalendarCell';
 
@@ -33,7 +33,9 @@ var CalendarGrid = function CalendarGrid(props) {
     var _context;
     return _concatInstanceProperty(_context = "".concat(day, "-")).call(_context, index);
   };
-  return ___EmotionJSX(Table, gridProps, ___EmotionJSX(TableHead, headerProps, ___EmotionJSX(TableRow, null, _mapInstanceProperty(_context2 = customWeekDays || weekDays).call(_context2, function (day, index) {
+  return ___EmotionJSX(Table, _extends({}, gridProps, {
+    role: "grid"
+  }), ___EmotionJSX(TableHead, headerProps, ___EmotionJSX(TableRow, null, _mapInstanceProperty(_context2 = customWeekDays || weekDays).call(_context2, function (day, index) {
     return ___EmotionJSX(TableCell, {
       variant: "calendar.columnHeader",
       key: getKey(day, index),
@@ -46,23 +48,12 @@ var CalendarGrid = function CalendarGrid(props) {
     return ___EmotionJSX(TableRow, {
       key: weekIndex
     }, _mapInstanceProperty(_context5 = getDatesInWeek(weekIndex)).call(_context5, function (date) {
-      return date.day && ___EmotionJSX(CalendarCell, {
-        key: date,
+      return (date === null || date === void 0 ? void 0 : date.day) && ___EmotionJSX(CalendarCell, {
+        key: date.toString(),
         state: state,
         date: date
       });
     }));
   })));
 };
-CalendarGrid.propTypes = {
-  /** State object that is passed in from the  useCalendar hook */
-  state: PropTypes.shape({
-    visibleRange: PropTypes.shape({
-      start: PropTypes.shape({})
-    }),
-    getDatesInWeek: PropTypes.func
-  }),
-  /** Custom week days for other international calendars */
-  customWeekDays: PropTypes.arrayOf(PropTypes.string)
-};
 export default CalendarGrid;

package/lib/components/CheckboxField/CheckboxField.js

@@ -18,10 +18,12 @@ import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, Checkbox, FieldHelperText, 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';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'CheckboxField';
 var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
   var label = props.label,
     _props$controlProps = props.controlProps,
@@ -68,7 +70,7 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperTextId = useMemo(function () {
     return uuid();
   }, []);
-  return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, _extends({
+  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), ___EmotionJSX(Label, _extends({
     variant: "forms.label.checkbox"
   }, fieldLabelProps), ___EmotionJSX(Checkbox, _extends({
     ref: checkboxRef,
@@ -124,5 +126,5 @@ CheckboxField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** Handler that is called when a key is released. */
   onKeyUp: PropTypes.func
 }, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
-CheckboxField.displayName = 'CheckboxField';
+CheckboxField.displayName = displayName;
 export default CheckboxField;

package/lib/components/ColorField/ColorField.js

@@ -20,11 +20,13 @@ import { useColorFieldState } from '@react-stately/color';
 import PropTypes from 'prop-types';
 import { Box, Button, FieldHelperText, Input, Label } from '../..';
 import useField from '../../hooks/useField';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import PopoverContainer from '../PopoverContainer';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'ColorField';
 var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
   var align = props.align,
@@ -91,7 +93,7 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     var colorValue = _ref.colorValue;
     return _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "rgba(".concat(colorValue === null || colorValue === void 0 ? void 0 : colorValue.red, ", ")).call(_context4, colorValue === null || colorValue === void 0 ? void 0 : colorValue.green, ", ")).call(_context3, colorValue === null || colorValue === void 0 ? void 0 : colorValue.blue, ", ")).call(_context2, colorValue === null || colorValue === void 0 ? void 0 : colorValue.alpha, ")");
   }, []);
-  return ___EmotionJSX(Box, fieldContainerProps, label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Button, _extends({
+  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Button, _extends({
     "aria-label": "Select color",
     bg: getRgbaFromState(state),
     onPress: handleButtonPress,
@@ -144,5 +146,5 @@ ColorField.defaultProps = {
   align: 'middle',
   direction: 'bottom'
 };
-ColorField.displayName = 'ColorField';
+ColorField.displayName = displayName;
 export default ColorField;

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -25,6 +25,7 @@ import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
 import PropTypes from 'prop-types';
 import { usePropWarning } from '../../hooks';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
 import { statusPropTypes } from '../../utils/docUtils/statusProp';
@@ -33,6 +34,7 @@ import ListBox from '../ListBox';
 import PopoverContainer from '../PopoverContainer';
 import ScrollBox from '../ScrollBox';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'ComboBoxField';
 var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
   var hasAutoFocus = props.hasAutoFocus,
     hasAddOption = props.hasAddOption,
@@ -198,7 +200,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, otherListBoxProps))), ___EmotionJSX(DismissButton, {
     onDismiss: state.close
   })));
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ComboBoxInput, _extends({}, props, {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ComboBoxInput, _extends({}, getPendoID(displayName), props, {
     isOpen: state.isOpen,
     inputProps: inputProps,
     labelProps: labelProps,
@@ -337,5 +339,5 @@ ComboBoxField.defaultProps = {
   },
   defaultItems: []
 };
-ComboBoxField.displayName = 'ComboBoxField';
+ComboBoxField.displayName = displayName;
 export default ComboBoxField;

package/lib/components/DatePicker/DatePicker.js

@@ -18,8 +18,10 @@ import { FocusScope } from '@react-aria/focus';
 import { useOverlayPosition } from '@react-aria/overlays';
 import { mergeProps } from '@react-aria/utils';
 import { useDatePickerState } from '@react-stately/datepicker';
+import { omit } from 'lodash/object';
 import PropTypes from 'prop-types';
 import { Calendar, FieldHelperText, PopoverContainer } from '../../index';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { isDateWithinRanges } from '../../utils/devUtils/props/isDateWithinRanges';
 import DateField from './DateField';
@@ -96,11 +98,11 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     contain: true,
     restoreFocus: true
   }, ___EmotionJSX(Calendar, calendarProps)));
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(DateField, _extends({}, props, {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(DateField, _extends({}, getPendoID('DatePicker'), props, {
     ref: ref,
     buttonProps: buttonProps,
     fieldProps: fieldProps,
-    groupProps: groupProps,
+    groupProps: omit(groupProps, 'data-pendo-id'),
     groupRef: groupRef,
     helperText: helperText,
     labelProps: labelProps,

package/lib/components/FileInputField/FileInputField.js

@@ -27,6 +27,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { Box, FieldHelperText, Input, Label, Loader } from '../..';
 import useField from '../../hooks/useField';
 import useStatusClasses from '../../hooks/useStatusClasses';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
@@ -34,6 +35,7 @@ import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusP
 import FileItem from './FileItem';
 import FileSelect from './FileSelect';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'FileInputField';
 var FILE_CHANGE_STATUS = {
   ADDED: 'added',
   DELETED: 'deleted'
@@ -194,7 +196,7 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
     fieldContainerProps: fieldContainerProps
   }, ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
     variant: "forms.fileInputField.wrapper"
-  }, mergeProps(fieldControlWrapperProps, nonAriaProps), {
+  }, getPendoID(displayName), mergeProps(fieldControlWrapperProps, nonAriaProps), {
     className: classNames
   }, getRootProps(), {
     // to pass accessibility test, this removes focusable dependents
@@ -227,7 +229,7 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
     role: "status"
   }, ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX("h1", null, fileChangeMessage))));
 });
-FileInputField.displayName = 'FileInputField';
+FileInputField.displayName = displayName;
 FileInputField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,

package/lib/components/IconButton/IconButton.js

@@ -18,8 +18,10 @@ import { Pressable, useHover, usePress } from '@react-aria/interactions';
 import { IconButton as ThemeUIIconButton } from 'theme-ui';
 import { BadgeContext } from '../../context/BadgeContext';
 import { useAriaLabelWarning, useStatusClasses } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'IconButton';
 var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     className = props.className,
@@ -86,7 +88,7 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
   useAriaLabelWarning('IconButton', ariaLabel);
   var button = ___EmotionJSX(Pressable, _extends({
     ref: buttonRef
-  }, mergeProps(buttonProps, others, hoverProps, focusProps)), ___EmotionJSX(ThemeUIIconButton, {
+  }, getPendoID(displayName), mergeProps(buttonProps, others, hoverProps, focusProps)), ___EmotionJSX(ThemeUIIconButton, {
     tabIndex: 0,
     className: classNames,
     "aria-label": ariaLabel,
@@ -109,5 +111,5 @@ IconButton.defaultProps = {
   variant: 'base',
   isDisabled: false
 };
-IconButton.displayName = 'IconButton';
+IconButton.displayName = displayName;
 export default IconButton;

package/lib/components/ImageUploadField/ImageUploadField.js

@@ -16,12 +16,14 @@ import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Item, Menu } from '../..';
 import { useImageUploadState } from '../../hooks/useImageUploadState';
+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 ImagePreviewButton from './ImagePreviewButton';
 import ImageUploadFieldBase from './ImageUploadFieldBase';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'ImageUploadField';
 var ImageUploadField = /*#__PURE__*/forwardRef(function (props, ref) {
   var isLoading = props.isLoading,
     loaderSize = props.loaderSize,
@@ -62,7 +64,7 @@ var ImageUploadField = /*#__PURE__*/forwardRef(function (props, ref) {
     isMenuOpen: state.isMenuOpen,
     ref: inputRef,
     widthHeightSx: state.widthHeightSx
-  }, props), ___EmotionJSX(ImagePreviewButton, {
+  }, getPendoID(displayName), props), ___EmotionJSX(ImagePreviewButton, {
     defaultPreviewImage: state.defaultPreviewImage,
     defaultPreviewNode: state.defaultPreviewNode,
     isImageType: state.isImageType,
@@ -135,5 +137,5 @@ ImageUploadField.defaultProps = {
   uploadItemText: 'Upload New Image',
   removeItemText: 'Remove Image'
 };
-ImageUploadField.displayName = 'ImageUploadField';
+ImageUploadField.displayName = displayName;
 export default ImageUploadField;

package/lib/components/Input/Input.js

@@ -5,7 +5,7 @@ var _excluded = ["name", "placeholder", "maxLength"];
 import React, { forwardRef } from 'react';
 import { flexbox, layout, typography } from 'styled-system';
 import { Input as ThemeUIInput } from 'theme-ui';
-import { jsx as ___EmotionJSX } from "@emotion/react";
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 /**
  * Base input component.
  *
@@ -16,13 +16,14 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
  * We instead encourage developers to utilize our Field components wherever possible.
  * If this component is used, accessibility is left to the developer.
  */
-
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'Input';
 var ExtendedInput = /*#__PURE__*/_styled(ThemeUIInput, process.env.NODE_ENV === "production" ? {
   target: "e1lpwkt50"
 } : {
   target: "e1lpwkt50",
   label: "ExtendedInput"
-})(layout, flexbox, typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0lucHV0L0lucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQnNCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0lucHV0L0lucHV0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZmxleGJveCwgbGF5b3V0LCB0eXBvZ3JhcGh5IH0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQgeyBJbnB1dCBhcyBUaGVtZVVJSW5wdXQgfSBmcm9tICd0aGVtZS11aSc7XG5cbmltcG9ydCB7IElucHV0UHJvcHMgfSBmcm9tICcuLi8uLi90eXBlcyc7XG4vKipcbiAqIEJhc2UgaW5wdXQgY29tcG9uZW50LlxuICpcbiAqIEFjY2VwdHMgcmVsZXZhbnQgc3R5bGluZyBwcm9wcyBmcm9tIFtzdHlsZWQtc3lzdGVtXShodHRwczovL3N0eWxlZC1zeXN0ZW0uY29tL3RhYmxlKS5cbiAqIEJ1aWx0IG9uIHRvcCBvZiBbSW5wdXQgZnJvbSBUaGVtZS1VSV0oaHR0cHM6Ly90aGVtZS11aS5jb20vY29tcG9uZW50cy9pbnB1dC8pLlxuICpcbiAqICoqTm90ZSoqOiBUaGlzIGNvbXBvbmVudCBkb2VzIG5vdCBzdXBwbHkgYWxsIG9mIHRoZSBhY2Nlc3NpYmlsaXR5IGFzc2lzdGFuY2Ugb24gaXRzIG93bi5cbiAqIFdlIGluc3RlYWQgZW5jb3VyYWdlIGRldmVsb3BlcnMgdG8gdXRpbGl6ZSBvdXIgRmllbGQgY29tcG9uZW50cyB3aGVyZXZlciBwb3NzaWJsZS5cbiAqIElmIHRoaXMgY29tcG9uZW50IGlzIHVzZWQsIGFjY2Vzc2liaWxpdHkgaXMgbGVmdCB0byB0aGUgZGV2ZWxvcGVyLlxuICovXG5cbmNvbnN0IEV4dGVuZGVkSW5wdXQgPSBzdHlsZWQoVGhlbWVVSUlucHV0KShcbiAgbGF5b3V0LFxuICBmbGV4Ym94LFxuICB0eXBvZ3JhcGh5LFxuKTtcblxuY29uc3QgSW5wdXQgPSBmb3J3YXJkUmVmPEhUTUxJbnB1dEVsZW1lbnQsIElucHV0UHJvcHM+KChwcm9wcywgcmVmKSA9PiB7XG4gIGNvbnN0IHsgbmFtZSwgcGxhY2Vob2xkZXIsIG1heExlbmd0aCwgLi4ub3RoZXJzIH0gPSBwcm9wcztcblxuICByZXR1cm4gKFxuICAgIDxFeHRlbmRlZElucHV0XG4gICAgICByZWY9e3JlZn1cbiAgICAgIG5hbWU9e25hbWV9XG4gICAgICBwbGFjZWhvbGRlcj17cGxhY2Vob2xkZXJ9XG4gICAgICBtYXhMZW5ndGg9e21heExlbmd0aCAmJiBtYXhMZW5ndGh9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgIC8+XG4gICk7XG59KTtcblxuSW5wdXQuZGlzcGxheU5hbWUgPSAnSW5wdXQnO1xuXG5leHBvcnQgZGVmYXVsdCBJbnB1dDtcbiJdfQ== */");
+})(layout, flexbox, typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0lucHV0L0lucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQnNCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0lucHV0L0lucHV0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZmxleGJveCwgbGF5b3V0LCB0eXBvZ3JhcGh5IH0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQgeyBJbnB1dCBhcyBUaGVtZVVJSW5wdXQgfSBmcm9tICd0aGVtZS11aSc7XG5cbmltcG9ydCB7IElucHV0UHJvcHMgfSBmcm9tICcuLi8uLi90eXBlcyc7XG5pbXBvcnQgeyBnZXRQZW5kb0lEIH0gZnJvbSAnLi4vLi4vdXRpbHMvZGV2VXRpbHMvY29uc3RhbnRzL3BlbmRvSUQnO1xuLyoqXG4gKiBCYXNlIGlucHV0IGNvbXBvbmVudC5cbiAqXG4gKiBBY2NlcHRzIHJlbGV2YW50IHN0eWxpbmcgcHJvcHMgZnJvbSBbc3R5bGVkLXN5c3RlbV0oaHR0cHM6Ly9zdHlsZWQtc3lzdGVtLmNvbS90YWJsZSkuXG4gKiBCdWlsdCBvbiB0b3Agb2YgW0lucHV0IGZyb20gVGhlbWUtVUldKGh0dHBzOi8vdGhlbWUtdWkuY29tL2NvbXBvbmVudHMvaW5wdXQvKS5cbiAqXG4gKiAqKk5vdGUqKjogVGhpcyBjb21wb25lbnQgZG9lcyBub3Qgc3VwcGx5IGFsbCBvZiB0aGUgYWNjZXNzaWJpbGl0eSBhc3Npc3RhbmNlIG9uIGl0cyBvd24uXG4gKiBXZSBpbnN0ZWFkIGVuY291cmFnZSBkZXZlbG9wZXJzIHRvIHV0aWxpemUgb3VyIEZpZWxkIGNvbXBvbmVudHMgd2hlcmV2ZXIgcG9zc2libGUuXG4gKiBJZiB0aGlzIGNvbXBvbmVudCBpcyB1c2VkLCBhY2Nlc3NpYmlsaXR5IGlzIGxlZnQgdG8gdGhlIGRldmVsb3Blci5cbiAqL1xuXG5jb25zdCBkaXNwbGF5TmFtZSA9ICdJbnB1dCc7XG5cbmNvbnN0IEV4dGVuZGVkSW5wdXQgPSBzdHlsZWQoVGhlbWVVSUlucHV0KShcbiAgbGF5b3V0LFxuICBmbGV4Ym94LFxuICB0eXBvZ3JhcGh5LFxuKTtcblxuY29uc3QgSW5wdXQgPSBmb3J3YXJkUmVmPEhUTUxJbnB1dEVsZW1lbnQsIElucHV0UHJvcHM+KChwcm9wcywgcmVmKSA9PiB7XG4gIGNvbnN0IHsgbmFtZSwgcGxhY2Vob2xkZXIsIG1heExlbmd0aCwgLi4ub3RoZXJzIH0gPSBwcm9wcztcblxuICByZXR1cm4gKFxuICAgIDxFeHRlbmRlZElucHV0XG4gICAgICByZWY9e3JlZn1cbiAgICAgIG5hbWU9e25hbWV9XG4gICAgICBwbGFjZWhvbGRlcj17cGxhY2Vob2xkZXJ9XG4gICAgICBtYXhMZW5ndGg9e21heExlbmd0aCAmJiBtYXhMZW5ndGh9XG4gICAgICB7Li4uZ2V0UGVuZG9JRChkaXNwbGF5TmFtZSl9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgIC8+XG4gICk7XG59KTtcblxuSW5wdXQuZGlzcGxheU5hbWUgPSBkaXNwbGF5TmFtZTtcblxuZXhwb3J0IGRlZmF1bHQgSW5wdXQ7XG4iXX0= */");
 var Input = /*#__PURE__*/forwardRef(function (props, ref) {
   var name = props.name,
     placeholder = props.placeholder,
@@ -33,7 +34,7 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
     name: name,
     placeholder: placeholder,
     maxLength: maxLength && maxLength
-  }, others));
+  }, getPendoID(displayName), others));
 });
-Input.displayName = 'Input';
+Input.displayName = displayName;
 export default Input;

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -18,12 +18,14 @@ import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, Button, Icon, Loader, Text } from '../..';
 import { usePropWarning, useSelectField } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
 import SelectFieldBase from '../SelectFieldBase';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'LinkSelectField';
 var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   var placeholder = props.placeholder,
     isDisabled = props.isDisabled,
@@ -52,7 +54,7 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: triggerRef,
     variant: "link",
     tabIndex: isDisabled ? -1 : 0
-  }, triggerProps, ariaProps, {
+  }, getPendoID(displayName), triggerProps, ariaProps, {
     "aria-describedby": helperText && helperTextId
   }), ___EmotionJSX(Text, {
     variant: "label",
@@ -149,5 +151,5 @@ LinkSelectField.defaultProps = _objectSpread({
   align: 'start',
   direction: 'bottom'
 }, statusDefaultProp);
-LinkSelectField.displayName = 'LinkSelectField';
+LinkSelectField.displayName = displayName;
 export default LinkSelectField;