@pingux/astro 2.143.0-alpha.0 → 2.143.0-alpha.2

package/lib/components/Loader/Loader.stories.js

@@ -69,4 +69,17 @@ export var CustomSize = function CustomSize(args) {
   return ___EmotionJSX(Loader, _extends({}, args, {
     size: 32
   }));
+};
+export var Circular = function Circular(args) {
+  return ___EmotionJSX(Loader, _extends({}, args, {
+    size: 120,
+    isCircle: true
+  }));
+};
+export var CustomCircular = function CustomCircular(args) {
+  return ___EmotionJSX(Loader, _extends({}, args, {
+    size: "lg",
+    isCircle: true,
+    strokeColor: "magenta"
+  }));
 };

package/lib/components/Loader/Loader.styles.js

@@ -8,7 +8,7 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _context, _context2, _context3, _context4, _context5;
+var _templateObject, _templateObject2, _context, _context2, _context3, _context4, _context5, _templateObject3;
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 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 _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -56,7 +56,17 @@ var dotCenter = _objectSpread(_objectSpread({}, dot), {}, {
 var dotRight = _objectSpread(_objectSpread({}, dot), {}, {
   animation: _concatInstanceProperty(_context4 = _concatInstanceProperty(_context5 = "".concat(wait, " 0.4s, ")).call(_context5, pulse, " ")).call(_context4, animationSettings, " 0.4s")
 });
+var spin = keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
+var circleContainer = {
+  justifyContent: 'center',
+  alignItems: 'center'
+};
+var circleSpinner = {
+  animation: "".concat(spin, " .75s linear infinite")
+};
 export default {
+  circleContainer: circleContainer,
+  circleSpinner: circleSpinner,
   dotLeft: dotLeft,
   dotCenter: dotCenter,
   dotRight: dotRight,

package/lib/components/MultivaluesField/CondensedMultivaluesField.js

@@ -20,8 +20,6 @@ import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _flatMapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/flat-map";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { DismissButton, FocusScope, mergeProps, useOverlayPosition } from 'react-aria';
-import MenuDown from '@pingux/mdi-react/MenuDownIcon';
-import MenuUp from '@pingux/mdi-react/MenuUpIcon';
 import { useFilter } from '@react-aria/i18n';
 import { useFocusWithin } from '@react-aria/interactions';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
@@ -30,7 +28,7 @@ import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
 import { Box, Button, Icon, Loader, PopoverContainer, ScrollBox, Text, TextField } from '../..';
 import { MultivaluesContext } from '../../context/MultivaluesContext';
-import { useInputLoader, usePropWarning } from '../../hooks';
+import { useGetTheme, useInputLoader, usePropWarning } from '../../hooks';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
@@ -100,6 +98,10 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   var inputWrapperRef = useRef();
   var inputRef = useRef();
   var buttonRef = useRef();
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
+  var MenuDown = icons.MenuDown,
+    MenuUp = icons.MenuUp;
   var _useFocusWithin = useFocusWithin({
       onFocusWithinChange: setFocusWithin
     }),
@@ -302,7 +304,7 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   var listbox = ___EmotionJSX(FocusScope, null, filterString === '' && !hasNoSelectAll && ___EmotionJSX(Button, {
     onPress: handleSelection,
     ref: buttonRef,
-    variant: "link",
+    variant: "listBoxLink",
     mt: "sm",
     ml: "14px",
     sx: {

package/lib/components/MultivaluesField/DefaultMultivaluesField.js

@@ -32,7 +32,7 @@ import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
 import { Badge, Box, Icon, IconButton, Loader, PopoverContainer, ScrollBox, Text, TextField } from '../..';
 import { MultivaluesContext } from '../../context/MultivaluesContext';
-import { useInputLoader, usePropWarning } from '../../hooks';
+import { useGetTheme, useInputLoader, usePropWarning } from '../../hooks';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
@@ -100,6 +100,9 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     activeDescendant = _useState10[0],
     setActiveDescendant = _useState10[1];
+  var _useGetTheme = useGetTheme(),
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   useEffect(function () {
     if (mode !== 'non-restrictive') {
       setItems(initialItems);
@@ -334,6 +337,15 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       inputRef.current.focus();
     }
   };
+  var readOnlyFieldBadge = function readOnlyFieldBadge(key, name) {
+    return ___EmotionJSX(Badge, {
+      key: key,
+      label: name,
+      variant: "readOnlyFieldBadge",
+      bg: "gray-700",
+      tabIndex: 0
+    });
+  };
   var readOnlyTextItem = function readOnlyTextItem(key, name) {
     return ___EmotionJSX(Text, {
       key: key,
@@ -362,6 +374,12 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   }) : _mapInstanceProperty(initialItems).call(initialItems, function (item) {
     return readOnlyTextItem(item.key, item.name);
   }));
+  var onyxReadOnlyInputEntry = isReadOnly && ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "xs"
+  }, _mapInstanceProperty(initialItems).call(initialItems, function (item) {
+    return readOnlyFieldBadge(item.key, item.name);
+  }));
   var readOnlyItems = !isReadOnly && _mapInstanceProperty(readOnlyKeys).call(readOnlyKeys, function (key) {
     var item = _findInstanceProperty(initialItems).call(initialItems, function (el) {
       return el.key === key;
@@ -371,13 +389,6 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
         key: item.key,
         label: item.name,
         variant: "readOnlyBadge",
-        bg: "white",
-        textProps: {
-          sx: {
-            color: 'text.primary',
-            tabIndex: '-1'
-          }
-        },
         as: "li",
         tabIndex: 0
       });
@@ -409,7 +420,6 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       "aria-describedby": "selectedKeysState"
     }, item.buttonProps), ___EmotionJSX(Icon, {
       icon: Clear,
-      color: "white",
       size: 14,
       title: {
         name: 'Clear Icon'
@@ -468,6 +478,9 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     if (!hasCustomValue) setFilterString('');
   };
   var inputProps = _objectSpread(_objectSpread({}, customInputProps), {}, {
+    containerProps: _objectSpread(_objectSpread({}, containerProps), {}, {
+      variant: 'forms.input.multivaluesFieldContainer'
+    }),
     controlProps: {
       'aria-activedescendant': activeDescendant,
       'aria-controls': (_listBoxRef$current2 = listBoxRef.current) === null || _listBoxRef$current2 === void 0 ? void 0 : _listBoxRef$current2.id,
@@ -484,11 +497,7 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     placeholder: placeholder,
     wrapperProps: {
       ref: inputWrapperRef,
-      variant: 'forms.input.multivaluesWrapper',
-      sx: isReadOnly && {
-        boxShadow: 'inset 0 0 0 100px #e5e9f8',
-        border: 'none'
-      }
+      variant: 'forms.input.multivaluesWrapper'
     },
     status: status
   });
@@ -502,7 +511,9 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   }));
   return ___EmotionJSX(MultivaluesContext.Provider, {
     value: setActiveDescendant
-  }, ___EmotionJSX(Box, containerProps, ___EmotionJSX(TextField, _extends({
+  }, ___EmotionJSX(Box, _extends({}, containerProps, {
+    id: "cont"
+  }), ___EmotionJSX(TextField, _extends({
     onBlur: handleBlur,
     onChange: function onChange(e) {
       if (!isOpen) setIsOpen(true);
@@ -536,7 +547,7 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
           p: 0,
           flexWrap: 'wrap'
         }
-      }, selectedItems), readOnlyInputEntry, selectionManager.selectedKeys.size > 0 && visuallyHidden)
+      }, selectedItems), isOnyx ? onyxReadOnlyInputEntry : readOnlyInputEntry, selectionManager.selectedKeys.size > 0 && visuallyHidden)
     } // eslint-disable-line
     ,
     value: filterString,

package/lib/components/PageHeader/PageHeader.js

@@ -4,6 +4,7 @@ var _excluded = ["buttonProps", "children", "title"];
 import React, { forwardRef } from 'react';
 import PlusIcon from '@pingux/mdi-react/PlusIcon';
 import PropTypes from 'prop-types';
+import { useGetTheme } from '../../hooks';
 import { Box, Icon, IconButton, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var PageHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -16,6 +17,8 @@ var PageHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
       fontSize: 'sm'
     }
   };
+  var _useGetTheme = useGetTheme(),
+    pageHeaderTitleMargin = _useGetTheme.pageHeaderTitleMargin;
   var renderButton = buttonProps && ___EmotionJSX(IconButton, _extends({
     "aria-label": "icon button",
     ml: "sm",
@@ -28,12 +31,12 @@ var PageHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref
   }, other), ___EmotionJSX(Box, {
     isRow: true,
-    mb: "xs"
+    mb: pageHeaderTitleMargin
   }, ___EmotionJSX(Text, {
     as: "h1",
     variant: "H1"
   }, title), renderButton), ___EmotionJSX(Text, {
-    variant: "bodyWeak",
+    variant: "pageHeaderBody",
     sx: linkStyles
   }, children));
 });

package/lib/components/PanelHeader/PanelHeader.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "data", "slots"];
+var _excluded = ["avatarProps", "children", "className", "data", "headerProps", "headerWrapperProps", "slots", "subtextProps"];
 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 _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
@@ -15,21 +15,30 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { Box, Icon, Image, Text } from '../../index';
+import { useGetTheme } from '../../hooks';
+import { Avatar, Box, Icon, Image, Text } from '../../index';
 import { SharedItemPropTypes } from '../ListViewItem/listViewItemAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var PANEL_HEADER_ICON = '-panel-header-icon';
 var PanelHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _context;
-  var children = _ref.children,
+  var avatarProps = _ref.avatarProps,
+    children = _ref.children,
     className = _ref.className,
     data = _ref.data,
+    headerProps = _ref.headerProps,
+    headerWrapperProps = _ref.headerWrapperProps,
     slots = _ref.slots,
+    subtextProps = _ref.subtextProps,
     others = _objectWithoutProperties(_ref, _excluded);
   var icon = data.icon,
     image = data.image,
     subtext = data.subtext,
-    text = data.text;
+    text = data.text,
+    avatarDefualtText = data.avatarDefualtText;
+  var _useGetTheme = useGetTheme(),
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   var renderIcon = ___EmotionJSX(Box, {
     width: "25px",
     mx: "md"
@@ -41,23 +50,47 @@ var PanelHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
       name: _concatInstanceProperty(_context = "".concat(text)).call(_context, PANEL_HEADER_ICON)
     }
   }));
+  var renderAvatar = ___EmotionJSX(Avatar, _extends({
+    src: image === null || image === void 0 ? void 0 : image.src,
+    size: "avatar.lg",
+    defaultText: avatarDefualtText,
+    mr: "md"
+  }, avatarProps));
   var renderImage = !icon && image && ___EmotionJSX(Box, {
-    width: "35px",
-    mx: "sm"
+    variant: "panelHeader.iconWrapper"
   }, ___EmotionJSX(Image, {
     src: image.src,
     alt: image.alt,
     "aria-label": image['aria-label']
   }));
+  var renderLeftContent = function renderLeftContent() {
+    if (slots !== null && slots !== void 0 && slots.leftOfData) {
+      return slots.leftOfData;
+    }
+    if (isOnyx) {
+      return renderAvatar;
+    }
+    if (icon) {
+      return renderIcon;
+    }
+    return renderImage;
+  };
+  var headerPropsSpread = _objectSpread(_objectSpread({}, headerProps), isOnyx && {
+    variant: 'H4',
+    as: 'h4'
+  });
+  var headerWrapperPropsSpread = _objectSpread(_objectSpread({}, headerWrapperProps), {}, {
+    variant: 'panelHeader.wrapper',
+    py: 'sm'
+  }, isOnyx && {
+    gap: 'xs'
+  });
   var renderData = ___EmotionJSX(Box, {
     isRow: true,
     variant: text || subtext ? 'panelHeader.data' : 'panelHeader.emptyData'
-  }, slots !== null && slots !== void 0 && slots.leftOfData || icon ? renderIcon : renderImage, ___EmotionJSX(Box, {
-    variant: "panelHeader.wrapper",
-    py: "sm"
-  }, text && ___EmotionJSX(Text, {
+  }, renderLeftContent(), ___EmotionJSX(Box, headerWrapperPropsSpread, text && ___EmotionJSX(Text, _extends({}, headerPropsSpread, {
     variant: "panelHeaderText"
-  }, text), subtext && ___EmotionJSX(Text, {
+  }), text), subtext && ___EmotionJSX(Text, {
     variant: "panelHeaderSubtext"
   }, subtext)));
   return ___EmotionJSX(Box, _extends({

package/lib/components/PanelHeader/PanelHeader.stories.js

@@ -27,7 +27,8 @@ export var Default = function Default(_ref) {
   return ___EmotionJSX(PanelHeader, _extends({}, args, {
     data: {
       icon: AccountIcon,
-      text: 'Fons Vernall'
+      text: 'Fons Vernall',
+      avatarDefualtText: 'FV'
     }
   }));
 };
@@ -43,7 +44,8 @@ export var WithSubtext = function WithSubtext(_ref2) {
     data: {
       icon: AccountIcon,
       subtext: 'rad_developer@pingidentity.com',
-      text: 'Fons Vernall'
+      text: 'Fons Vernall',
+      avatarDefualtText: 'FV'
     }
   }));
 };
@@ -59,7 +61,8 @@ export var WithControls = function WithControls(_ref3) {
     data: {
       icon: AccountIcon,
       text: 'Fons Vernall',
-      subtext: 'rad_developer@pingidentity.com'
+      subtext: 'rad_developer@pingidentity.com',
+      avatarDefualtText: 'FV'
     }
   }), ___EmotionJSX(PanelHeaderSwitchField, null), ___EmotionJSX(PanelHeaderMenu, null, ___EmotionJSX(Item, {
     key: "enable"
@@ -81,7 +84,8 @@ export var WithImage = function WithImage(args) {
       image: {
         src: pingImg,
         alt: 'Ping Identity Logo',
-        'aria-label': 'Ping Identity Logo'
+        'aria-label': 'Ping Identity Logo',
+        avatarDefualtText: 'FV'
       },
       text: 'Fons Vernall'
     }
@@ -139,6 +143,7 @@ export var WithExtraLongText = function WithExtraLongText(_ref4) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
   return ___EmotionJSX(PanelHeader, _extends({}, args, {
     data: {
+      avatarDefualtText: 'FV',
       icon: AccountIcon,
       text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
       subtext: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum'

package/lib/components/PanelHeader/PanelHeader.styles.js

@@ -40,11 +40,16 @@ var wrapper = {
 var rightOfData = {
   alignSelf: 'center'
 };
+var iconWrapper = {
+  width: '25px',
+  mx: 'md'
+};
 export default {
   container: container,
   controls: controls,
   data: data,
   emptyData: emptyData,
+  iconWrapper: iconWrapper,
   rightOfData: rightOfData,
   wrapper: wrapper
 };

package/lib/components/PanelHeader/PanelHeader.test.js

@@ -14,7 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import { act } from '@testing-library/react';
-import { PanelHeader, PanelHeaderSwitchField } from '../../index';
+import { AstroProvider, OnyxTheme, PanelHeader, PanelHeaderSwitchField } from '../../index';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
@@ -36,6 +36,12 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(PanelHeader, _extends({}, defaultProps, props)));
 };
+var getComponentOnyx = function getComponentOnyx() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(AstroProvider, {
+    themeOverrides: [OnyxTheme]
+  }, ___EmotionJSX(PanelHeader, _extends({}, defaultProps, props))));
+};
 var fallbackImageObj = null;
 jest.mock('../../hooks/useFallbackImage', function () {
   return function (props) {
@@ -97,4 +103,20 @@ test('renders rightOfData slot', function () {
     }
   });
   screen.getByText(TEST_TEXT);
+});
+test('renders leftOfData slot', function () {
+  var TEST_TEXT = 'test text';
+  getComponent({
+    slots: {
+      leftOfData: ___EmotionJSX("div", null, TEST_TEXT)
+    }
+  });
+  screen.getByText(TEST_TEXT);
+});
+test('renders onyx components', function () {
+  getComponentOnyx();
+  var image = screen.getByRole('img');
+  expect(image.tagName.toLowerCase()).toBe('img');
+  expect(image).toHaveAttribute('src', pingImg);
+  expect(image).toHaveAttribute('alt', 'Avatar');
 });

package/lib/components/RequirementsList/RequirementsList.js

@@ -3,11 +3,8 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["requirements"];
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { forwardRef } from 'react';
-import ErrorCircle from '@pingux/mdi-react/AlertCircleIcon';
-import WarningIcon from '@pingux/mdi-react/AlertOutlineIcon';
-import DefaultCircle from '@pingux/mdi-react/CheckboxBlankCircleOutlineIcon';
-import SuccessCircle from '@pingux/mdi-react/CheckCircleIcon';
 import kebabCase from 'lodash/kebabCase';
+import { useGetTheme } from '../../hooks';
 import Box from '../Box';
 import Icon from '../Icon';
 import Text from '../Text';
@@ -15,6 +12,12 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var RequirementsList = /*#__PURE__*/forwardRef(function (props, ref) {
   var requirements = props.requirements,
     others = _objectWithoutProperties(props, _excluded);
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
+  var SuccessCircle = icons.SuccessCircle,
+    ErrorCircle = icons.ErrorCircle,
+    WarningIcon = icons.WarningIcon,
+    DefaultCircle = icons.DefaultCircle;
   var statusIconRender = function statusIconRender(status, key) {
     switch (status) {
       case 'success':

package/lib/components/SearchField/SearchAutoComplete.js

@@ -0,0 +1,156 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+var _excluded = ["shouldFocusOnHover", "shouldSelectOnPressUp"];
+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, useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useComboBox, useFilter, useSearchField } from 'react-aria';
+import { useComboBoxState, useSearchFieldState } from 'react-stately';
+import CloseIcon from '@pingux/mdi-react/CloseIcon';
+import { mergeProps, useResizeObserver } from '@react-aria/utils';
+import { Box, Icon, IconButton, Input, Label, ScrollBox } from '../..';
+import { useField, useLocalOrForwardRef, usePropWarning } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
+import ListBox from '../ListBox/ListBox';
+import Popover from '../Popover/Popover';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'SearchField';
+export var SearchAutoComplete = /*#__PURE__*/forwardRef(function (props, ref) {
+  var autocomplete = props.autocomplete,
+    hasAutoFocus = props.hasAutoFocus,
+    hasNoClearButton = props.hasNoClearButton,
+    icon = props.icon,
+    isExcludedFromTabOrder = props.isExcludedFromTabOrder,
+    label = props.label,
+    controlProps = props.controlProps,
+    iconProps = props.iconProps,
+    labelProps = props.labelProps,
+    value = props.value,
+    onChange = props.onChange;
+  usePropWarning(props, 'disabled', 'isDisabled');
+  var _useFilter = useFilter({
+      sensitivity: 'base'
+    }),
+    contains = _useFilter.contains;
+  var comboBoxState = useComboBoxState(_objectSpread(_objectSpread({}, props), {}, {
+    inputValue: value,
+    defaultInputValue: props.defaultValue,
+    onInputChange: onChange,
+    defaultFilter: contains,
+    allowsCustomValue: true
+  }));
+  var inputRef = useLocalOrForwardRef(ref);
+  var outerRef = useRef(null);
+  var listBoxRef = useRef(null);
+  var popoverRef = useRef(null);
+  var clearButtonRef = useRef(null);
+  var _useComboBox = useComboBox(_objectSpread(_objectSpread({}, props), {}, {
+      inputRef: inputRef,
+      listBoxRef: listBoxRef,
+      popoverRef: popoverRef
+    }), comboBoxState),
+    inputProps = _useComboBox.inputProps,
+    listBoxProps = _useComboBox.listBoxProps,
+    rsLabelProps = _useComboBox.labelProps;
+  delete inputProps['data-testid'];
+  var shouldFocusOnHover = listBoxProps.shouldFocusOnHover,
+    shouldSelectOnPressUp = listBoxProps.shouldSelectOnPressUp,
+    otherListBoxProps = _objectWithoutProperties(listBoxProps, _excluded);
+  var searchProps = {
+    label: props.label,
+    value: comboBoxState.inputValue,
+    'aria-label': props['aria-label'],
+    onChange: function onChange(v) {
+      return comboBoxState.setInputValue(v);
+    },
+    onClear: props.onClear,
+    onSubmit: props.onSubmit
+  };
+  var searchState = useSearchFieldState(searchProps);
+  var _useSearchField = useSearchField(_objectSpread({
+      autoComplete: autocomplete,
+      autoFocus: hasAutoFocus,
+      excludeFromTabOrder: isExcludedFromTabOrder
+    }, searchProps), searchState, inputRef),
+    raLabelProps = _useSearchField.labelProps,
+    raInputProps = _useSearchField.inputProps,
+    clearButtonProps = _useSearchField.clearButtonProps;
+  var _useField = useField(_objectSpread(_objectSpread({}, props), {}, {
+      labelProps: _objectSpread(_objectSpread(_objectSpread({}, labelProps), raLabelProps), rsLabelProps),
+      controlProps: _objectSpread(_objectSpread({}, controlProps), raInputProps)
+    })),
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+    fieldLabelProps = _useField.fieldLabelProps;
+  var handleKeyDownEvent = function handleKeyDownEvent(e) {
+    var key = e.key;
+    if (key === 'Enter' || key === ' ') {
+      comboBoxState.setInputValue('');
+    }
+  };
+
+  // Popover width matches the input width
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    popoverWidth = _useState2[0],
+    setPopoverWidth = _useState2[1];
+  var onResize = useCallback(function () {
+    /* istanbul ignore next */
+    if (outerRef.current) {
+      setPopoverWidth(outerRef.current.offsetWidth);
+    }
+  }, [outerRef, setPopoverWidth]);
+  useResizeObserver({
+    ref: outerRef,
+    onResize: onResize
+  });
+  useLayoutEffect(onResize, [onResize]);
+  return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
+    variant: "forms.search.wrapper",
+    ref: outerRef
+  }, fieldControlWrapperProps), ___EmotionJSX(Input, _extends({
+    variant: "forms.input.search",
+    ref: inputRef
+  }, mergeProps(fieldControlInputProps, inputProps))), icon && ___EmotionJSX(Icon, _extends({
+    icon: icon,
+    variant: "forms.search.icon",
+    title: {
+      name: 'Search Icon'
+    }
+  }, iconProps)), !hasNoClearButton && searchState.value !== '' && ___EmotionJSX(IconButton, _extends({
+    ref: clearButtonRef
+  }, clearButtonProps, {
+    tabIndex: 0,
+    onKeyDown: handleKeyDownEvent,
+    color: "text.secondary",
+    variant: "searchClearButton"
+  }), ___EmotionJSX(Icon, {
+    icon: CloseIcon,
+    title: {
+      name: 'Close Icon'
+    }
+  }))), comboBoxState.isOpen && ___EmotionJSX(Popover, {
+    popoverRef: popoverRef,
+    triggerRef: outerRef,
+    state: comboBoxState,
+    isNonModal: true,
+    width: popoverWidth
+  }, ___EmotionJSX(ScrollBox, null, ___EmotionJSX(ListBox, _extends({
+    ref: listBoxRef,
+    state: comboBoxState,
+    isFocusedOnHover: shouldFocusOnHover,
+    isSelectedOnPressUp: shouldSelectOnPressUp,
+    showSelectedOption: false
+  }, otherListBoxProps)))));
+});