@pingux/astro 2.54.0-alpha.4 → 2.55.0-alpha.0

package/lib/components/Messages/Messages.stories.js

@@ -21,7 +21,7 @@ import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Button, Messages } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { messagesReducerStory as messagesReducer, multiMessagesReducerStory as multiMessagesReducer } from './index';
 import MessagesReadme from './Messages.mdx';
@@ -60,15 +60,15 @@ var messages = [{
 }, {
   key: 'message2',
   text: loremText,
-  status: 'success'
+  status: statuses.SUCCESS
 }, {
   key: 'message3',
   text: loremText,
-  status: 'warning'
+  status: statuses.WARNING
 }, {
   key: 'message4',
   text: loremText,
-  status: 'error'
+  status: statuses.ERROR
 }];
 export var Default = function Default(args) {
   return ___EmotionJSX(Messages, args, ___EmotionJSX(Item, {
@@ -77,7 +77,7 @@ export var Default = function Default(args) {
   }, loremText), ___EmotionJSX(Item, {
     key: "message2",
     "data-id": "message2",
-    status: "success"
+    status: statuses.SUCCESS
   }, loremText));
 };
 Default.parameters = {
@@ -87,17 +87,25 @@ Default.parameters = {
   }
 };
 export var DefaultDynamic = function DefaultDynamic(args) {
-  return (
-    // messages = [{...}]
-    ___EmotionJSX(Messages, _extends({}, args, {
-      items: messages
-    }), function (item) {
-      return ___EmotionJSX(Item, item, item.text);
-    })
-  );
+  return ___EmotionJSX(Messages, _extends({}, args, {
+    items: messages
+  }), function (item) {
+    return ___EmotionJSX(Item, item, item.text);
+  });
+};
+
+// Added to bypass color contrast in safari
+DefaultDynamic.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
 };
 export var Controlled = function Controlled(args) {
-  // messages = [{...}]
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     items = _useState2[0],
@@ -124,6 +132,18 @@ export var Controlled = function Controlled(args) {
     return ___EmotionJSX(Item, item, item.text);
   });
 };
+
+// Added to bypass color contrast in safari
+Controlled.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 export var ControlledWithButton = function ControlledWithButton(args) {
   var _useState3 = useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
@@ -158,6 +178,18 @@ export var ControlledWithButton = function ControlledWithButton(args) {
     return ___EmotionJSX(Item, item, item.text);
   }));
 };
+
+// Added to bypass color contrast in safari
+ControlledWithButton.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 export var WithCustomColorsAndIcons = function WithCustomColorsAndIcons(args) {
   return ___EmotionJSX(Messages, args, ___EmotionJSX(Item, {
     bg: "accent.99",
@@ -165,6 +197,18 @@ export var WithCustomColorsAndIcons = function WithCustomColorsAndIcons(args) {
     icon: AccountIcon
   }, loremText));
 };
+
+// Added to bypass color contrast in safari
+WithCustomColorsAndIcons.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 export var UseReducer = function UseReducer() {
   // import { messagesReducer as messagesReducerCore } from '@pingux/astro';
   // const messagesReducer = messagesReducerCore;
@@ -179,7 +223,7 @@ export var UseReducer = function UseReducer() {
   //   showWarningMessage: makeShowMessage('warning', -1),
   // };
 
-  var _useReducer = useReducer(messagesReducer),
+  var _useReducer = useReducer(messagesReducer, []),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     items = _useReducer2[0],
     dispatch = _useReducer2[1];
@@ -207,6 +251,18 @@ export var UseReducer = function UseReducer() {
     return ___EmotionJSX(Item, item, item.text);
   }));
 };
+
+// Added to bypass color contrast in safari
+UseReducer.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 export var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers() {
   var _useReducer3 = useReducer(multiMessagesReducer, {
       'container-one': [],
@@ -258,6 +314,18 @@ export var UseReducerWithMultipleContainers = function UseReducerWithMultipleCon
     return ___EmotionJSX(Item, item, item.text);
   }));
 };
+
+// Added to bypass color contrast in safari
+UseReducerWithMultipleContainers.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 export var WithTextStyling = function WithTextStyling(args) {
   var items = [{
     key: 'message1',
@@ -280,4 +348,16 @@ export var WithTextStyling = function WithTextStyling(args) {
   }), function (item) {
     return ___EmotionJSX(Item, item, item.node || item.text);
   });
+};
+
+// Added to bypass color contrast in safari
+WithTextStyling.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
 };

package/lib/components/Messages/Messages.test.js

@@ -6,6 +6,7 @@ import { act } from 'react-dom/test-utils';
 import { Item } from 'react-stately';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import userEvent from '@testing-library/user-event';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { ARIA_STATUSES } from './Message';
@@ -27,7 +28,7 @@ var items = [{
 }, {
   key: 'message2',
   text: 'Form saved successfully',
-  status: 'success'
+  status: statuses.SUCCESS
 }];
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -38,7 +39,7 @@ var getComponent = function getComponent() {
   }, "Here is a very neutral thing"), ___EmotionJSX(Item, {
     key: "message2",
     "data-id": "message2",
-    status: "success"
+    status: statuses.SUCCESS
   }, "Form saved successfully")));
 };
 var getWithDynamicList = function getWithDynamicList() {
@@ -98,16 +99,15 @@ test('`onClose` get as first arg key of message', function () {
   expect(onClose).toHaveBeenCalledWith('message1');
 });
 test('click on close button removes message after delay', function () {
-  act(function () {
-    global.setTimeout = jest.fn(function (cb) {
-      return cb();
-    });
-  });
+  jest.useFakeTimers();
   getComponent();
   var messages = screen.getByTestId(testId);
   expect(messages.childElementCount).toBe(2);
   var buttons = screen.getAllByRole('button');
   userEvent.click(buttons[0]);
+  act(function () {
+    jest.runAllTimers();
+  });
   expect(messages.childElementCount).toBe(1);
 });
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
@@ -138,12 +138,12 @@ test('messages without a status do not have an aria-label announcing the status'
 });
 test('should render messages with messagesReducerStory', function () {
   getComponent();
-  messagesReducerStory.actions.showSuccessMessage();
+  messagesReducerStory.actions.showSuccessMessage('Some');
   expect(screen.getByTestId(testId)).toBeInTheDocument();
 });
 test('should render messages with multiMessagesReducerStory', function () {
   getComponent();
-  multiMessagesReducerStory.actions.showSuccessMessage();
+  multiMessagesReducerStory.actions.showSuccessMessage('some', 'container-one');
   expect(screen.getByTestId(testId)).toBeInTheDocument();
 });
 test('should render a custom icon', function () {

package/lib/components/Messages/index.js

@@ -1,3 +1,3 @@
 export { default } from './Messages';
-export { messagesReducer as messagesReducerStory, multiMessagesReducer as multiMessagesReducerStory } from './Messages.reducer';
+export { messagesReducer as messagesReducerStory, multiMessagesReducer as multiMessagesReducerStory } from './utils';
 export * from './utils';

package/lib/components/Messages/utils/messagesReducer.js

@@ -13,6 +13,7 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { v4 as uuid } from 'uuid';
+import statuses from '../../../utils/devUtils/constants/statuses';
 
 /**
 * A set of message util functions.
@@ -21,9 +22,14 @@ export var messagesActions = {
   ADD_MESSAGE: 'ADD_MESSAGE',
   HIDE_MESSAGE: 'HIDE_MESSAGE',
   REMOVE_MESSAGE: 'REMOVE_MESSAGE',
-  CLEAR_MESSAGES: 'CLEAR_MESSAGES'
+  CLEAR_MESSAGES: 'CLEAR_MESSAGES',
+  SHOW_SUCCESS_MESSAGE: 'SHOW_SUCCESS_MESSAGE',
+  SHOW_ERROR_MESSAGE: 'SHOW_ERROR_MESSAGE',
+  SHOW_WARNING_MESSAGE: 'SHOW_WARNING_MESSAGE',
+  MULTI_SHOW_SUCCESS_MESSAGE: 'MULTI_SHOW_SUCCESS_MESSAGE',
+  MULTI_SHOW_CRITICAL_MESSAGE: 'MULTI_SHOW_CRITICAL_MESSAGE',
+  MULTI_SHOW_WARNING_MESSAGE: 'MULTI_SHOW_WARNING_MESSAGE'
 };
-
 /**
  * Create an action to add a message
  * The message object to be added
@@ -84,20 +90,25 @@ export var clearMessages = function clearMessages() {
   };
 };
 
+// eslint-disable-next-line max-len
+var makeShowMessage = function makeShowMessage(status, timeout) {
+  return function (text) {
+    return messagesReducer.actions.showMessage({
+      text: text,
+      status: status
+    }, timeout);
+  };
+};
+
 /** Reducer to store a list of messages */
-var messagesReducer = function messagesReducer() {
+var messagesReducer = function messagesReducer(state, action) {
   var _context;
-  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    type = _ref.type,
-    message = _ref.message,
-    key = _ref.key;
-  switch (type) {
+  switch (action.type) {
     case messagesActions.ADD_MESSAGE:
-      return _concatInstanceProperty(_context = []).call(_context, state, [_objectSpread({}, message)]);
+      return _concatInstanceProperty(_context = []).call(_context, state, [_objectSpread({}, action.message)]);
     case messagesActions.HIDE_MESSAGE:
       return _mapInstanceProperty(state).call(state, function (search) {
-        if (search.key === key) {
+        if (search.key === action.key) {
           return _objectSpread(_objectSpread({}, search), {}, {
             isHidden: true
           });
@@ -106,7 +117,7 @@ var messagesReducer = function messagesReducer() {
       });
     case messagesActions.REMOVE_MESSAGE:
       return _filterInstanceProperty(state).call(state, function (search) {
-        return key !== search.key;
+        return action.key !== search.key;
       });
     case messagesActions.CLEAR_MESSAGES:
       return [];
@@ -119,6 +130,9 @@ messagesReducer.actions = {
   hideMessage: hideMessage,
   removeMessage: removeMessage,
   showMessage: showMessage,
-  clearMessages: clearMessages
+  clearMessages: clearMessages,
+  showSuccessMessage: makeShowMessage(statuses.SUCCESS, 3000),
+  showErrorMessage: makeShowMessage(statuses.ERROR, -1),
+  showWarningMessage: makeShowMessage(statuses.WARNING, -1)
 };
 export default messagesReducer;

package/lib/components/Messages/utils/multiMessagesReducer.js

@@ -13,7 +13,8 @@ import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 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 { v4 as uuid } from 'uuid';
-import messagesReducer, { addMessage as addMessageSingle, clearMessages as clearMessagesSingle, hideMessage as hideMessageSingle, removeMessage as removeMessageSingle } from './messagesReducer';
+import statuses from '../../../utils/devUtils/constants/statuses';
+import messagesReducer from './messagesReducer';
 export var withContainer = function withContainer(container, action) {
   return _objectSpread({
     container: container
@@ -31,22 +32,22 @@ export var createMultiple = function createMultiple(actionCreator) {
 /**
  * Create an action to add a message
  */
-export var addMessage = createMultiple(addMessageSingle);
+export var addMessage = createMultiple(messagesReducer.actions.addMessage);
 
 /**
  * Create an action to hide a message by key
  */
-export var hideMessage = createMultiple(hideMessageSingle);
+export var hideMessage = createMultiple(messagesReducer.actions.hideMessage);
 
 /**
  * Create an action to remove a message
  */
-export var removeMessage = createMultiple(removeMessageSingle);
+export var removeMessage = createMultiple(messagesReducer.actions.removeMessage);
 
 /**
  * Create an action to clear all messages
  */
-export var clearMessages = createMultiple(clearMessagesSingle);
+export var clearMessages = createMultiple(messagesReducer.actions.clearMessages);
 
 /**
  * Create an action to add a message and then remove it if there's a timeout
@@ -69,10 +70,16 @@ export var showMessage = function showMessage(container, messageArg) {
     return message;
   };
 };
-var multiMessagesReducer = function multiMessagesReducer() {
-  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    container = _ref.container,
+var makeMultiShowMessage = function makeMultiShowMessage(status, timeout) {
+  return function (container, text) {
+    return multiMessagesReducer.actions.showMessage(container, {
+      text: text,
+      status: status
+    }, timeout);
+  };
+};
+var multiMessagesReducer = function multiMessagesReducer(state, _ref) {
+  var container = _ref.container,
     action = _objectWithoutProperties(_ref, _excluded);
   return container ? _objectSpread(_objectSpread({}, state), {}, _defineProperty({}, container, messagesReducer(state[container], action))) : state;
 };
@@ -81,6 +88,9 @@ multiMessagesReducer.actions = {
   addMessage: addMessage,
   hideMessage: hideMessage,
   clearMessages: clearMessages,
-  showMessage: showMessage
+  showMessage: showMessage,
+  showSuccessMessage: makeMultiShowMessage(statuses.SUCCESS, 3000),
+  showCriticalMessage: makeMultiShowMessage(statuses.ERROR, -1),
+  showWarningMessage: makeMultiShowMessage(statuses.WARNING, -1)
 };
 export default multiMessagesReducer;

package/lib/components/Messages/utils/tests/messagesReducer.test.js

@@ -43,7 +43,7 @@ var getComponent = function getComponent() {
   return renderFn(___EmotionJSX(TestComponent, props));
 };
 test('should create an empty state', function () {
-  var state = messagesReducer();
+  var state = messagesReducer([], {});
   expect(state.length).toBe(0);
 });
 test('should add a new message', function () {
@@ -67,11 +67,12 @@ test('should clear all messages', function () {
   expect(state.length).toBe(0);
 });
 test('should show and hide a message', function () {
+  var _screen$queryByTestId, _screen$queryByTestId2;
   jest.useFakeTimers();
   getComponent();
-  expect(screen.queryByTestId(testId).children.length).toBe(1);
+  expect((_screen$queryByTestId = screen.queryByTestId(testId)) === null || _screen$queryByTestId === void 0 ? void 0 : _screen$queryByTestId.children.length).toBe(1);
   act(function () {
     jest.runAllTimers();
   });
-  expect(screen.queryByTestId(testId).children.length).toBe(0);
+  expect((_screen$queryByTestId2 = screen.queryByTestId(testId)) === null || _screen$queryByTestId2 === void 0 ? void 0 : _screen$queryByTestId2.children.length).toBe(0);
 });

package/lib/components/Messages/utils/tests/multiMessagesReducer.test.js

@@ -3,7 +3,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import React, { useEffect, useReducer } from 'react';
 import { act } from 'react-dom/test-utils';
 import { render, screen } from '../../../../utils/testUtils/testWrapper';
-import messagesReducer, { addMessage, clearMessages, hideMessage, removeMessage, showMessage } from '../multiMessagesReducer';
+import multiMessagesReducer, { addMessage, clearMessages, hideMessage, removeMessage, showMessage } from '../multiMessagesReducer';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-messages';
 var messages = [{
@@ -18,7 +18,7 @@ var messages = [{
 }];
 var TestComponent = function TestComponent() {
   var _context;
-  var _useReducer = useReducer(messagesReducer, {
+  var _useReducer = useReducer(multiMessagesReducer, {
       container: []
     }),
     _useReducer2 = _slicedToArray(_useReducer, 2),
@@ -46,7 +46,7 @@ var getComponent = function getComponent() {
   return renderFn(___EmotionJSX(TestComponent, props));
 };
 test('should add a new message', function () {
-  var state = messagesReducer({
+  var state = multiMessagesReducer({
     'container-one': messages
   }, addMessage('container-one', {
     key: 4,
@@ -55,30 +55,31 @@ test('should add a new message', function () {
   expect(state['container-one'].length).toBe(4);
 });
 test('should hide a message by key', function () {
-  var state = messagesReducer({
+  var state = multiMessagesReducer({
     'container-one': messages
   }, hideMessage('container-one', 2));
   expect(state['container-one'].length).toBe(3);
   expect(state['container-one'][1].isHidden).toBe(true);
 });
 test('should remove a message by key', function () {
-  var state = messagesReducer({
+  var state = multiMessagesReducer({
     'container-one': messages
   }, removeMessage('container-one', 2));
   expect(state['container-one'].length).toBe(2);
 });
 test('should clear all messages', function () {
-  var state = messagesReducer({
+  var state = multiMessagesReducer({
     'container-one': messages
   }, clearMessages('container-one'));
   expect(state['container-one'].length).toBe(0);
 });
 test('should show and hide a message', function () {
+  var _screen$queryByTestId, _screen$queryByTestId2;
   jest.useFakeTimers();
   getComponent();
-  expect(screen.queryByTestId(testId).children.length).toBe(1);
+  expect((_screen$queryByTestId = screen.queryByTestId(testId)) === null || _screen$queryByTestId === void 0 ? void 0 : _screen$queryByTestId.children.length).toBe(1);
   act(function () {
     jest.runAllTimers();
   });
-  expect(screen.queryByTestId(testId).children.length).toBe(0);
+  expect((_screen$queryByTestId2 = screen.queryByTestId(testId)) === null || _screen$queryByTestId2 === void 0 ? void 0 : _screen$queryByTestId2.children.length).toBe(0);
 });

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,