@pingux/astro 2.54.0-alpha.3 → 2.54.0-alpha.4

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';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
 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: statuses.SUCCESS
+  status: 'success'
 }, {
   key: 'message3',
   text: loremText,
-  status: statuses.WARNING
+  status: 'warning'
 }, {
   key: 'message4',
   text: loremText,
-  status: statuses.ERROR
+  status: '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: statuses.SUCCESS
+    status: "success"
   }, loremText));
 };
 Default.parameters = {
@@ -87,25 +87,17 @@ Default.parameters = {
   }
 };
 export var DefaultDynamic = function DefaultDynamic(args) {
-  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
-      }]
-    }
-  }
+  return (
+    // messages = [{...}]
+    ___EmotionJSX(Messages, _extends({}, args, {
+      items: messages
+    }), function (item) {
+      return ___EmotionJSX(Item, item, item.text);
+    })
+  );
 };
 export var Controlled = function Controlled(args) {
+  // messages = [{...}]
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     items = _useState2[0],
@@ -132,18 +124,6 @@ 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),
@@ -178,18 +158,6 @@ 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",
@@ -197,18 +165,6 @@ 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;
@@ -223,7 +179,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];
@@ -251,18 +207,6 @@ 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': [],
@@ -314,18 +258,6 @@ 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',
@@ -348,16 +280,4 @@ 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,7 +6,6 @@ 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';
@@ -28,7 +27,7 @@ var items = [{
 }, {
   key: 'message2',
   text: 'Form saved successfully',
-  status: statuses.SUCCESS
+  status: 'success'
 }];
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -39,7 +38,7 @@ var getComponent = function getComponent() {
   }, "Here is a very neutral thing"), ___EmotionJSX(Item, {
     key: "message2",
     "data-id": "message2",
-    status: statuses.SUCCESS
+    status: "success"
   }, "Form saved successfully")));
 };
 var getWithDynamicList = function getWithDynamicList() {
@@ -99,15 +98,16 @@ test('`onClose` get as first arg key of message', function () {
   expect(onClose).toHaveBeenCalledWith('message1');
 });
 test('click on close button removes message after delay', function () {
-  jest.useFakeTimers();
+  act(function () {
+    global.setTimeout = jest.fn(function (cb) {
+      return cb();
+    });
+  });
   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('Some');
+  messagesReducerStory.actions.showSuccessMessage();
   expect(screen.getByTestId(testId)).toBeInTheDocument();
 });
 test('should render messages with multiMessagesReducerStory', function () {
   getComponent();
-  multiMessagesReducerStory.actions.showSuccessMessage('some', 'container-one');
+  multiMessagesReducerStory.actions.showSuccessMessage();
   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 './utils';
+export { messagesReducer as messagesReducerStory, multiMessagesReducer as multiMessagesReducerStory } from './Messages.reducer';
 export * from './utils';

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

@@ -13,7 +13,6 @@ 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.
@@ -22,14 +21,9 @@ export var messagesActions = {
   ADD_MESSAGE: 'ADD_MESSAGE',
   HIDE_MESSAGE: 'HIDE_MESSAGE',
   REMOVE_MESSAGE: 'REMOVE_MESSAGE',
-  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'
+  CLEAR_MESSAGES: 'CLEAR_MESSAGES'
 };
+
 /**
  * Create an action to add a message
  * The message object to be added
@@ -90,25 +84,20 @@ 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(state, action) {
+var messagesReducer = function messagesReducer() {
   var _context;
-  switch (action.type) {
+  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) {
     case messagesActions.ADD_MESSAGE:
-      return _concatInstanceProperty(_context = []).call(_context, state, [_objectSpread({}, action.message)]);
+      return _concatInstanceProperty(_context = []).call(_context, state, [_objectSpread({}, message)]);
     case messagesActions.HIDE_MESSAGE:
       return _mapInstanceProperty(state).call(state, function (search) {
-        if (search.key === action.key) {
+        if (search.key === key) {
           return _objectSpread(_objectSpread({}, search), {}, {
             isHidden: true
           });
@@ -117,7 +106,7 @@ var messagesReducer = function messagesReducer(state, action) {
       });
     case messagesActions.REMOVE_MESSAGE:
       return _filterInstanceProperty(state).call(state, function (search) {
-        return action.key !== search.key;
+        return key !== search.key;
       });
     case messagesActions.CLEAR_MESSAGES:
       return [];
@@ -130,9 +119,6 @@ messagesReducer.actions = {
   hideMessage: hideMessage,
   removeMessage: removeMessage,
   showMessage: showMessage,
-  clearMessages: clearMessages,
-  showSuccessMessage: makeShowMessage(statuses.SUCCESS, 3000),
-  showErrorMessage: makeShowMessage(statuses.ERROR, -1),
-  showWarningMessage: makeShowMessage(statuses.WARNING, -1)
+  clearMessages: clearMessages
 };
 export default messagesReducer;

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

@@ -13,8 +13,7 @@ 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 statuses from '../../../utils/devUtils/constants/statuses';
-import messagesReducer from './messagesReducer';
+import messagesReducer, { addMessage as addMessageSingle, clearMessages as clearMessagesSingle, hideMessage as hideMessageSingle, removeMessage as removeMessageSingle } from './messagesReducer';
 export var withContainer = function withContainer(container, action) {
   return _objectSpread({
     container: container
@@ -32,22 +31,22 @@ export var createMultiple = function createMultiple(actionCreator) {
 /**
  * Create an action to add a message
  */
-export var addMessage = createMultiple(messagesReducer.actions.addMessage);
+export var addMessage = createMultiple(addMessageSingle);
 
 /**
  * Create an action to hide a message by key
  */
-export var hideMessage = createMultiple(messagesReducer.actions.hideMessage);
+export var hideMessage = createMultiple(hideMessageSingle);
 
 /**
  * Create an action to remove a message
  */
-export var removeMessage = createMultiple(messagesReducer.actions.removeMessage);
+export var removeMessage = createMultiple(removeMessageSingle);
 
 /**
  * Create an action to clear all messages
  */
-export var clearMessages = createMultiple(messagesReducer.actions.clearMessages);
+export var clearMessages = createMultiple(clearMessagesSingle);
 
 /**
  * Create an action to add a message and then remove it if there's a timeout
@@ -70,16 +69,10 @@ export var showMessage = function showMessage(container, messageArg) {
     return message;
   };
 };
-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,
+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,
     action = _objectWithoutProperties(_ref, _excluded);
   return container ? _objectSpread(_objectSpread({}, state), {}, _defineProperty({}, container, messagesReducer(state[container], action))) : state;
 };
@@ -88,9 +81,6 @@ multiMessagesReducer.actions = {
   addMessage: addMessage,
   hideMessage: hideMessage,
   clearMessages: clearMessages,
-  showMessage: showMessage,
-  showSuccessMessage: makeMultiShowMessage(statuses.SUCCESS, 3000),
-  showCriticalMessage: makeMultiShowMessage(statuses.ERROR, -1),
-  showWarningMessage: makeMultiShowMessage(statuses.WARNING, -1)
+  showMessage: showMessage
 };
 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,12 +67,11 @@ 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 = screen.queryByTestId(testId)) === null || _screen$queryByTestId === void 0 ? void 0 : _screen$queryByTestId.children.length).toBe(1);
+  expect(screen.queryByTestId(testId).children.length).toBe(1);
   act(function () {
     jest.runAllTimers();
   });
-  expect((_screen$queryByTestId2 = screen.queryByTestId(testId)) === null || _screen$queryByTestId2 === void 0 ? void 0 : _screen$queryByTestId2.children.length).toBe(0);
+  expect(screen.queryByTestId(testId).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 multiMessagesReducer, { addMessage, clearMessages, hideMessage, removeMessage, showMessage } from '../multiMessagesReducer';
+import messagesReducer, { 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(multiMessagesReducer, {
+  var _useReducer = useReducer(messagesReducer, {
       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 = multiMessagesReducer({
+  var state = messagesReducer({
     'container-one': messages
   }, addMessage('container-one', {
     key: 4,
@@ -55,31 +55,30 @@ test('should add a new message', function () {
   expect(state['container-one'].length).toBe(4);
 });
 test('should hide a message by key', function () {
-  var state = multiMessagesReducer({
+  var state = messagesReducer({
     '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 = multiMessagesReducer({
+  var state = messagesReducer({
     'container-one': messages
   }, removeMessage('container-one', 2));
   expect(state['container-one'].length).toBe(2);
 });
 test('should clear all messages', function () {
-  var state = multiMessagesReducer({
+  var state = messagesReducer({
     '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 = screen.queryByTestId(testId)) === null || _screen$queryByTestId === void 0 ? void 0 : _screen$queryByTestId.children.length).toBe(1);
+  expect(screen.queryByTestId(testId).children.length).toBe(1);
   act(function () {
     jest.runAllTimers();
   });
-  expect((_screen$queryByTestId2 = screen.queryByTestId(testId)) === null || _screen$queryByTestId2 === void 0 ? void 0 : _screen$queryByTestId2.children.length).toBe(0);
+  expect(screen.queryByTestId(testId).children.length).toBe(0);
 });

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -32,9 +32,8 @@ 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 } from '../../utils/docUtils/ariaAttributes';
+import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
 import ListBox from '../ListBox';
@@ -71,6 +70,8 @@ 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([]),
@@ -486,7 +487,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     value: filterString,
     helperText: helperText,
     "aria-invalid": status === 'error' && true
-  }, getPendoID('MultivaluesField'), others, inputProps)), ___EmotionJSX(PopoverContainer, {
+  }, ariaProps, inputProps)), ___EmotionJSX(PopoverContainer, {
     hasNoArrow: true,
     isNonModal: true,
     isOpen: !state.collection.size ? false : isOpen,

package/lib/components/NumberField/NumberField.js

@@ -21,7 +21,6 @@ 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';
@@ -100,7 +99,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, _extends({}, getPendoID('NumberField'), fieldContainerProps), ___EmotionJSX(Label, updatedLabelProps), ___EmotionJSX(Box, _extends({
+  return ___EmotionJSX(Box, 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,13 +26,11 @@ 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'
@@ -155,7 +153,7 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
   };
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, _extends({
     variant: "forms.input.fieldContainer"
-  }, getPendoID(displayName), fieldContainerProps), ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
+  }, fieldContainerProps), ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
     variant: "forms.input.fieldControlWrapper",
     isRow: true
   }, fieldControlWrapperProps, {
@@ -284,5 +282,5 @@ PasswordField.defaultProps = _objectSpread({
   requirements: [],
   type: 'password'
 }, statusDefaultProp);
-PasswordField.displayName = displayName;
+PasswordField.displayName = 'PasswordField';
 export default PasswordField;

package/lib/components/RadioGroupField/RadioGroupField.js

@@ -18,13 +18,11 @@ 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,
@@ -53,7 +51,7 @@ var RadioGroupField = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     className: classNames
-  }, getPendoID(displayName), unhandledAriaProps, radioGroupProps), ___EmotionJSX(Label, _extends({
+  }, unhandledAriaProps, radioGroupProps), ___EmotionJSX(Label, _extends({
     isDisabled: isDisabled,
     hintText: hintText,
     isRequired: isRequired,
@@ -104,5 +102,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 = displayName;
+RadioGroupField.displayName = 'RadioGroupField';
 export default RadioGroupField;

package/lib/components/SearchField/SearchField.js

@@ -18,11 +18,9 @@ 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,
@@ -62,7 +60,7 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
       state.setValue('');
     }
   };
-  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
+  return ___EmotionJSX(Box, fieldContainerProps, label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
     variant: "forms.search.wrapper"
   }, fieldControlWrapperProps), ___EmotionJSX(Input, _extends({
     variant: "forms.input.search",
@@ -259,5 +257,5 @@ SearchField.defaultProps = {
   hasNoClearButton: false,
   icon: SearchIcon
 };
-SearchField.displayName = displayName;
+SearchField.displayName = 'SearchField';
 export default SearchField;

package/lib/components/SelectFieldBase/SelectFieldBase.js

@@ -19,7 +19,6 @@ 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';
@@ -97,7 +96,7 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     variant: "forms.input.fieldContainer"
-  }, getPendoID('SelectField'), fieldContainerProps, {
+  }, 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,