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

package/lib/cjs/components/PanelHeader/PanelHeader.js

@@ -21,10 +21,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _listViewItemAttributes = require("../ListViewItem/listViewItemAttributes");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "data", "slots"];
+var _excluded = ["avatarProps", "children", "className", "data", "headerProps", "headerWrapperProps", "slots", "subtextProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -33,15 +34,23 @@ var PANEL_HEADER_ICON = '-panel-header-icon';
 exports.PANEL_HEADER_ICON = PANEL_HEADER_ICON;
 var PanelHeader = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var icon = data.icon,
     image = data.image,
     subtext = data.subtext,
-    text = data.text;
+    text = data.text,
+    avatarDefualtText = data.avatarDefualtText;
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   var renderIcon = (0, _react2.jsx)(_index.Box, {
     width: "25px",
     mx: "md"
@@ -53,23 +62,47 @@ var PanelHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       name: (0, _concat["default"])(_context = "".concat(text)).call(_context, PANEL_HEADER_ICON)
     }
   }));
+  var renderAvatar = (0, _react2.jsx)(_index.Avatar, (0, _extends2["default"])({
+    src: image === null || image === void 0 ? void 0 : image.src,
+    size: "avatar.lg",
+    defaultText: avatarDefualtText,
+    mr: "md"
+  }, avatarProps));
   var renderImage = !icon && image && (0, _react2.jsx)(_index.Box, {
-    width: "35px",
-    mx: "sm"
+    variant: "panelHeader.iconWrapper"
   }, (0, _react2.jsx)(_index.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 = (0, _react2.jsx)(_index.Box, {
     isRow: true,
     variant: text || subtext ? 'panelHeader.data' : 'panelHeader.emptyData'
-  }, slots !== null && slots !== void 0 && slots.leftOfData || icon ? renderIcon : renderImage, (0, _react2.jsx)(_index.Box, {
-    variant: "panelHeader.wrapper",
-    py: "sm"
-  }, text && (0, _react2.jsx)(_index.Text, {
+  }, renderLeftContent(), (0, _react2.jsx)(_index.Box, headerWrapperPropsSpread, text && (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({}, headerPropsSpread, {
     variant: "panelHeaderText"
-  }, text), subtext && (0, _react2.jsx)(_index.Text, {
+  }), text), subtext && (0, _react2.jsx)(_index.Text, {
     variant: "panelHeaderSubtext"
   }, subtext)));
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({

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

@@ -36,7 +36,8 @@ var Default = function Default(_ref) {
   return (0, _react2.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, args, {
     data: {
       icon: _AccountIcon["default"],
-      text: 'Fons Vernall'
+      text: 'Fons Vernall',
+      avatarDefualtText: 'FV'
     }
   }));
 };
@@ -53,7 +54,8 @@ var WithSubtext = function WithSubtext(_ref2) {
     data: {
       icon: _AccountIcon["default"],
       subtext: 'rad_developer@pingidentity.com',
-      text: 'Fons Vernall'
+      text: 'Fons Vernall',
+      avatarDefualtText: 'FV'
     }
   }));
 };
@@ -70,7 +72,8 @@ var WithControls = function WithControls(_ref3) {
     data: {
       icon: _AccountIcon["default"],
       text: 'Fons Vernall',
-      subtext: 'rad_developer@pingidentity.com'
+      subtext: 'rad_developer@pingidentity.com',
+      avatarDefualtText: 'FV'
     }
   }), (0, _react2.jsx)(_index.PanelHeaderSwitchField, null), (0, _react2.jsx)(_index.PanelHeaderMenu, null, (0, _react2.jsx)(_index.Item, {
     key: "enable"
@@ -93,7 +96,8 @@ var WithImage = function WithImage(args) {
       image: {
         src: _images.pingImg,
         alt: 'Ping Identity Logo',
-        'aria-label': 'Ping Identity Logo'
+        'aria-label': 'Ping Identity Logo',
+        avatarDefualtText: 'FV'
       },
       text: 'Fons Vernall'
     }
@@ -154,6 +158,7 @@ var WithExtraLongText = function WithExtraLongText(_ref4) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref4), _ref4));
   return (0, _react2.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, args, {
     data: {
+      avatarDefualtText: 'FV',
       icon: _AccountIcon["default"],
       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/cjs/components/PanelHeader/PanelHeader.styles.js

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

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

@@ -39,6 +39,12 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react3.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, defaultProps, props)));
 };
+var getComponentOnyx = function getComponentOnyx() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react3.jsx)(_index.AstroProvider, {
+    themeOverrides: [_index.OnyxTheme]
+  }, (0, _react3.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, defaultProps, props))));
+};
 var fallbackImageObj = null;
 jest.mock('../../hooks/useFallbackImage', function () {
   return function (props) {
@@ -100,4 +106,20 @@ test('renders rightOfData slot', function () {
     }
   });
   _testWrapper.screen.getByText(TEST_TEXT);
+});
+test('renders leftOfData slot', function () {
+  var TEST_TEXT = 'test text';
+  getComponent({
+    slots: {
+      leftOfData: (0, _react3.jsx)("div", null, TEST_TEXT)
+    }
+  });
+  _testWrapper.screen.getByText(TEST_TEXT);
+});
+test('renders onyx components', function () {
+  getComponentOnyx();
+  var image = _testWrapper.screen.getByRole('img');
+  expect(image.tagName.toLowerCase()).toBe('img');
+  expect(image).toHaveAttribute('src', _images.pingImg);
+  expect(image).toHaveAttribute('alt', 'Avatar');
 });

package/lib/cjs/components/RequirementsList/RequirementsList.js

@@ -13,11 +13,8 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _AlertCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertCircleIcon"));
-var _AlertOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertOutlineIcon"));
-var _CheckboxBlankCircleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckboxBlankCircleOutlineIcon"));
-var _CheckCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckCircleIcon"));
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
+var _hooks = require("../../hooks");
 var _Box = _interopRequireDefault(require("../Box"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Text = _interopRequireDefault(require("../Text"));
@@ -28,6 +25,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var requirements = props.requirements,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useGetTheme = (0, _hooks.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':
@@ -36,7 +39,7 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
             id: key,
             name: 'Success Status Icon'
           },
-          icon: _CheckCircleIcon["default"],
+          icon: SuccessCircle,
           color: "success.bright",
           mr: "sm",
           size: "sm",
@@ -48,7 +51,7 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
             id: key,
             name: 'Warning Status Icon'
           },
-          icon: _AlertOutlineIcon["default"],
+          icon: WarningIcon,
           color: "warning.bright",
           mr: "sm",
           size: "sm",
@@ -60,7 +63,7 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
             id: key,
             name: 'Error Status Icon'
           },
-          icon: _AlertCircleIcon["default"],
+          icon: ErrorCircle,
           color: "critical.bright",
           mr: "sm",
           size: "sm",
@@ -72,7 +75,7 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
             id: key,
             name: 'Empty Status Icon'
           },
-          icon: _CheckboxBlankCircleOutlineIcon["default"],
+          icon: DefaultCircle,
           color: "neutral.40",
           mr: "sm",
           size: "sm",

package/lib/cjs/components/SearchField/SearchAutoComplete.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SearchFieldProps, SearchItem } from '../../types';
+export declare const SearchAutoComplete: React.ForwardRefExoticComponent<SearchFieldProps<SearchItem> & React.RefAttributes<HTMLInputElement>>;

package/lib/cjs/components/SearchField/SearchAutoComplete.js

@@ -0,0 +1,168 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchAutoComplete = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactAria = require("react-aria");
+var _reactStately = require("react-stately");
+var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
+var _utils = require("@react-aria/utils");
+var _ = require("../..");
+var _hooks = require("../../hooks");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
+var _ListBox = _interopRequireDefault(require("../ListBox/ListBox"));
+var _Popover = _interopRequireDefault(require("../Popover/Popover"));
+var _react2 = require("@emotion/react");
+var _excluded = ["shouldFocusOnHover", "shouldSelectOnPressUp"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { (0, _defineProperty2["default"])(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; }
+var displayName = 'SearchField';
+var SearchAutoComplete = /*#__PURE__*/(0, _react.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;
+  (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
+  var _useFilter = (0, _reactAria.useFilter)({
+      sensitivity: 'base'
+    }),
+    contains = _useFilter.contains;
+  var comboBoxState = (0, _reactStately.useComboBoxState)(_objectSpread(_objectSpread({}, props), {}, {
+    inputValue: value,
+    defaultInputValue: props.defaultValue,
+    onInputChange: onChange,
+    defaultFilter: contains,
+    allowsCustomValue: true
+  }));
+  var inputRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  var outerRef = (0, _react.useRef)(null);
+  var listBoxRef = (0, _react.useRef)(null);
+  var popoverRef = (0, _react.useRef)(null);
+  var clearButtonRef = (0, _react.useRef)(null);
+  var _useComboBox = (0, _reactAria.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 = (0, _objectWithoutProperties2["default"])(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 = (0, _reactStately.useSearchFieldState)(searchProps);
+  var _useSearchField = (0, _reactAria.useSearchField)(_objectSpread({
+      autoComplete: autocomplete,
+      autoFocus: hasAutoFocus,
+      excludeFromTabOrder: isExcludedFromTabOrder
+    }, searchProps), searchState, inputRef),
+    raLabelProps = _useSearchField.labelProps,
+    raInputProps = _useSearchField.inputProps,
+    clearButtonProps = _useSearchField.clearButtonProps;
+  var _useField = (0, _hooks.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 = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    popoverWidth = _useState2[0],
+    setPopoverWidth = _useState2[1];
+  var onResize = (0, _react.useCallback)(function () {
+    /* istanbul ignore next */
+    if (outerRef.current) {
+      setPopoverWidth(outerRef.current.offsetWidth);
+    }
+  }, [outerRef, setPopoverWidth]);
+  (0, _utils.useResizeObserver)({
+    ref: outerRef,
+    onResize: onResize
+  });
+  (0, _react.useLayoutEffect)(onResize, [onResize]);
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)(displayName), fieldContainerProps), label && (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    variant: "forms.search.wrapper",
+    ref: outerRef
+  }, fieldControlWrapperProps), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
+    variant: "forms.input.search",
+    ref: inputRef
+  }, (0, _utils.mergeProps)(fieldControlInputProps, inputProps))), icon && (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
+    icon: icon,
+    variant: "forms.search.icon",
+    title: {
+      name: 'Search Icon'
+    }
+  }, iconProps)), !hasNoClearButton && searchState.value !== '' && (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
+    ref: clearButtonRef
+  }, clearButtonProps, {
+    tabIndex: 0,
+    onKeyDown: handleKeyDownEvent,
+    color: "text.secondary",
+    variant: "searchClearButton"
+  }), (0, _react2.jsx)(_.Icon, {
+    icon: _CloseIcon["default"],
+    title: {
+      name: 'Close Icon'
+    }
+  }))), comboBoxState.isOpen && (0, _react2.jsx)(_Popover["default"], {
+    popoverRef: popoverRef,
+    triggerRef: outerRef,
+    state: comboBoxState,
+    isNonModal: true,
+    width: popoverWidth
+  }, (0, _react2.jsx)(_.ScrollBox, null, (0, _react2.jsx)(_ListBox["default"], (0, _extends2["default"])({
+    ref: listBoxRef,
+    state: comboBoxState,
+    isFocusedOnHover: shouldFocusOnHover,
+    isSelectedOnPressUp: shouldSelectOnPressUp,
+    showSelectedOption: false
+  }, otherListBoxProps)))));
+});
+exports.SearchAutoComplete = SearchAutoComplete;

package/lib/cjs/components/SearchField/SearchField.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { SearchFieldProps } from '../../types';
-declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLInputElement>>;
+import { SearchFieldProps, SearchItem } from '../../types';
+declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps<SearchItem> & React.RefAttributes<HTMLInputElement>>;
 export default SearchField;

package/lib/cjs/components/SearchField/SearchField.js

@@ -1,99 +1,41 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactAria = require("react-aria");
-var _reactStately = require("react-stately");
-var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
 var _SearchIcon = _interopRequireDefault(require("@pingux/mdi-react/SearchIcon"));
-var _ = require("../..");
-var _hooks = require("../../hooks");
-var _pendoID = require("../../utils/devUtils/constants/pendoID");
+var _SearchAutoComplete = require("./SearchAutoComplete");
+var _SearchFieldBase = require("./SearchFieldBase");
 var _react2 = require("@emotion/react");
+var _excluded = ["hasNoClearButton", "mode", "icon"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-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) { (0, _defineProperty2["default"])(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; }
 var displayName = 'SearchField';
 var SearchField = /*#__PURE__*/(0, _react.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;
-  (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
-  var searchRef = (0, _hooks.useLocalOrForwardRef)(ref);
-  var state = (0, _reactStately.useSearchFieldState)(props);
-  var _useSearchField = (0, _reactAria.useSearchField)(_objectSpread({
-      autoComplete: autocomplete,
-      autoFocus: hasAutoFocus,
-      excludeFromTabOrder: isExcludedFromTabOrder
-    }, props), state, searchRef),
-    raLabelProps = _useSearchField.labelProps,
-    raInputProps = _useSearchField.inputProps,
-    clearButtonProps = _useSearchField.clearButtonProps;
-  var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread({}, props), {}, {
-      labelProps: _objectSpread(_objectSpread({}, labelProps), raLabelProps),
-      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 === ' ') {
-      state.setValue('');
-    }
-  };
-  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)(displayName), fieldContainerProps), label && (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    variant: "forms.search.wrapper"
-  }, fieldControlWrapperProps), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
-    variant: "forms.input.search",
-    ref: searchRef
-  }, fieldControlInputProps)), icon && (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
-    icon: icon,
-    variant: "forms.search.icon",
-    size: 20,
-    title: {
-      name: 'Search Icon'
-    }
-  }, iconProps)), !hasNoClearButton && state.value !== '' && (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
-    tabIndex: 0,
-    onKeyDown: handleKeyDownEvent,
-    color: "text.secondary",
-    variant: "searchClearButton"
-  }, clearButtonProps), (0, _react2.jsx)(_.Icon, {
-    icon: _CloseIcon["default"],
-    title: {
-      name: 'Close Icon'
-    }
-  }))));
+  var _props$hasNoClearButt = props.hasNoClearButton,
+    hasNoClearButton = _props$hasNoClearButt === void 0 ? false : _props$hasNoClearButt,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'default' : _props$mode,
+    _props$icon = props.icon,
+    icon = _props$icon === void 0 ? _SearchIcon["default"] : _props$icon,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var Component = mode === 'autocomplete' ? _SearchAutoComplete.SearchAutoComplete : _SearchFieldBase.SearchFieldBase;
+  return (0, _react2.jsx)(Component, (0, _extends2["default"])({
+    hasNoClearButton: hasNoClearButton,
+    icon: icon
+  }, rest, {
+    ref: ref
+  }));
 });
-SearchField.defaultProps = {
-  hasNoClearButton: false,
-  icon: _SearchIcon["default"]
-};
 SearchField.displayName = displayName;
 var _default = SearchField;
 exports["default"] = _default;

package/lib/cjs/components/SearchField/SearchField.stories.d.ts

@@ -1,10 +1,11 @@
 import { StoryFn } from '@storybook/react';
-import { SearchFieldProps } from '../../types';
+import { SearchFieldProps, SearchItem } from '../../types';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const Default: StoryFn<SearchFieldProps>;
-export declare const Controlled: StoryFn<SearchFieldProps>;
-export declare const CustomIcon: StoryFn<SearchFieldProps>;
-export declare const NoClearButton: StoryFn<SearchFieldProps>;
-export declare const ControlledWithDebouncedInput: StoryFn<SearchFieldProps>;
-export declare const WithFilter: StoryFn<SearchFieldProps>;
+export declare const Default: StoryFn<SearchFieldProps<SearchItem>>;
+export declare const Controlled: StoryFn<SearchFieldProps<SearchItem>>;
+export declare const CustomIcon: StoryFn<SearchFieldProps<SearchItem>>;
+export declare const NoClearButton: StoryFn<SearchFieldProps<SearchItem>>;
+export declare const ControlledWithDebouncedInput: StoryFn<SearchFieldProps<SearchItem>>;
+export declare const WithFilter: StoryFn<SearchFieldProps<SearchItem>>;
+export declare const ControlledWithPopover: StoryFn<SearchFieldProps<SearchItem>>;

package/lib/cjs/components/SearchField/SearchField.stories.js

@@ -14,7 +14,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithFilter = exports.NoClearButton = exports.Default = exports.CustomIcon = exports.ControlledWithDebouncedInput = exports.Controlled = void 0;
+exports["default"] = exports.WithFilter = exports.NoClearButton = exports.Default = exports.CustomIcon = exports.ControlledWithPopover = exports.ControlledWithDebouncedInput = exports.Controlled = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
@@ -85,7 +85,7 @@ var Default = function Default(args) {
     icon: _SearchIcon["default"],
     onSubmit: function onSubmit(text) {
       return alert(text);
-    } // eslint-disable-line no-alert
+    }
   }));
 };
 exports.Default = Default;
@@ -180,4 +180,44 @@ var WithFilter = function WithFilter() {
     }
   })));
 };
-exports.WithFilter = WithFilter;
+exports.WithFilter = WithFilter;
+var ControlledWithPopover = function ControlledWithPopover() {
+  var _useState5 = (0, _react.useState)(''),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    value = _useState6[0],
+    setValue = _useState6[1];
+  var items = [{
+    id: 'apple',
+    name: 'Apple'
+  }, {
+    id: 'banana',
+    name: 'Banana'
+  }, {
+    id: 'blueberry',
+    name: 'Blueberry'
+  }];
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.SearchField, {
+    mode: "autocomplete",
+    defaultItems: items,
+    value: value,
+    onChange: function onChange(val) {
+      setValue(val);
+    },
+    "aria-label": "Search Groups",
+    placeholder: "Search",
+    onSubmit: function onSubmit(text) {
+      return alert(text);
+    },
+    onClear: function onClear() {
+      setValue('');
+    }
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.id,
+      textValue: item.name
+    }, item.name);
+  }), (0, _react2.jsx)(_index.Text, {
+    mt: "xs"
+  }, "value: ".concat(value)));
+};
+exports.ControlledWithPopover = ControlledWithPopover;