@pingux/astro 2.143.0-alpha.1 → 2.143.0

package/lib/cjs/components/ListBox/ListBox.js

@@ -36,7 +36,7 @@ var _index = require("./index");
 var _ListBoxContext = require("./ListBoxContext");
 var _ListBoxSection = _interopRequireDefault(require("./ListBoxSection"));
 var _react2 = require("@emotion/react");
-var _excluded = ["defaultSelectedKeys", "disabledKeys", "hasAutoFocus", "hasFocusWrap", "hasNoEmptySelection", "hasVirtualFocus", "id", "isCondensed", "isLoading", "isFocusedOnHover", "isSelectedOnPressUp", "isVirtualized", "items", "keyboardDelegate", "label", "loadingState", "onLoadMore", "onLoadPrev", "onScroll", "onSelectionChange", "renderEmptyState", "selectedKeys", "selectionMode", "state", "aria-label", "aria-labelledby", "aria-describedby", "aria-details"];
+var _excluded = ["defaultSelectedKeys", "disabledKeys", "hasAutoFocus", "hasFocusWrap", "hasNoEmptySelection", "hasVirtualFocus", "id", "isCondensed", "isLoading", "isFocusedOnHover", "isSelectedOnPressUp", "isVirtualized", "items", "keyboardDelegate", "label", "loadingState", "onLoadMore", "onLoadPrev", "onScroll", "onSelectionChange", "renderEmptyState", "selectedKeys", "selectionMode", "state", "aria-label", "aria-labelledby", "aria-describedby", "aria-details", "showSelectedOption"];
 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 = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -96,6 +96,7 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ariaLabelledby = props['aria-labelledby'],
     ariaDescribedby = props['aria-describedby'],
     ariaDetails = props['aria-details'],
+    showSelectedOption = props.showSelectedOption,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
   // Object matching React Aria API with all options
@@ -196,7 +197,8 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         key: item.key,
         item: item,
         hasVirtualFocus: hasVirtualFocus,
-        isCondensed: isCondensed
+        isCondensed: isCondensed,
+        showSelectedOption: showSelectedOption
       });
     }
     if (type === collectionTypes.LOADER) {

package/lib/cjs/components/ListBox/Option.js

@@ -28,7 +28,7 @@ var _Box = _interopRequireDefault(require("../Box"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _ListBoxContext = require("./ListBoxContext");
 var _react2 = require("@emotion/react");
-var _excluded = ["item", "hasVirtualFocus", "isCondensed"],
+var _excluded = ["item", "hasVirtualFocus", "isCondensed", "showSelectedOption"],
   _excluded2 = ["onPressStart", "onPressUp"];
 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; }
@@ -67,6 +67,7 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var item = props.item,
     hasVirtualFocus = props.hasVirtualFocus,
     isCondensed = props.isCondensed,
+    showSelectedOption = props.showSelectedOption,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var key = item.key,
     itemProps = item.props,
@@ -105,7 +106,7 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useStatusClasses = (0, _hooks.useStatusClasses)(null, {
       isDisabled: isDisabled || isSeparator,
       isFocused: focused,
-      isSelected: isSelected,
+      isSelected: showSelectedOption ? isSelected : false,
       isCondensed: isCondensed,
       isFocusVisible: isFocusVisible,
       isPressed: isPressed
@@ -142,12 +143,12 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     mr: "xs",
     className: classNames,
     variant: "listBox.checkboxIcon"
-  }) : isSelected && !isOnyx && (0, _react2.jsx)(_Icon["default"], {
+  }) : isSelected && !isOnyx && showSelectedOption && (0, _react2.jsx)(_Icon["default"], {
     icon: _CircleSmallIcon["default"],
     title: {
       name: 'Circle Small Icon'
     }
-  }), rendered, isSelected && isOnyx && (0, _react2.jsx)(_Icon["default"], {
+  }), rendered, isSelected && isOnyx && showSelectedOption && (0, _react2.jsx)(_Icon["default"], {
     icon: _CheckIcon["default"],
     title: {
       name: 'Check Icon'
@@ -155,5 +156,8 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     color: "green-500"
   }));
 });
+Option.defaultProps = {
+  showSelectedOption: true
+};
 var _default = Option;
 exports["default"] = _default;

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;

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

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _collections = require("@react-stately/collections");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
@@ -10,6 +11,7 @@ var _universalFormSubmitTest = require("../../utils/testUtils/universalFormSubmi
 var _ = _interopRequireDefault(require("."));
 var _react2 = require("@emotion/react");
 var testId = 'test-radio-group';
+var testValue = 'Option';
 var testLabel = 'Test Label';
 var defaultProps = {
   'data-testid': testId,
@@ -19,6 +21,16 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
 };
+var getAutocompleteComponent = function getAutocompleteComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
+    key: "1"
+  }, "Option 1"), (0, _react2.jsx)(_collections.Item, {
+    key: "2"
+  }, "Option 2"), (0, _react2.jsx)(_collections.Item, {
+    key: "3"
+  }, "Option 3")));
+};
 (0, _universalFormSubmitTest.universalFieldComponentTests)({
   renderComponent: function renderComponent(props) {
     return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props));
@@ -219,4 +231,124 @@ test('clear button should not be present is hasNoClearButton=true ', function ()
     hasNoClearButton: true
   });
   expect(_testWrapper.screen.queryByRole('button')).not.toBeInTheDocument();
+});
+describe('Autocomplete mode', function () {
+  beforeAll(function () {
+    jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
+      return 1000;
+    });
+    jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () {
+      return 1000;
+    });
+    window.HTMLElement.prototype.scrollIntoView = jest.fn();
+    jest.spyOn(window.screen, 'width', 'get').mockImplementation(function () {
+      return 1024;
+    });
+    jest.spyOn(window, 'requestAnimationFrame').mockImplementation(function (cb) {
+      cb(0);
+      return 0;
+    });
+    jest.useFakeTimers();
+  });
+  afterEach(function () {
+    jest.clearAllMocks();
+  });
+  test('default autocomplete search field', function () {
+    getAutocompleteComponent({
+      mode: 'autocomplete'
+    });
+    var search = _testWrapper.screen.getByLabelText(testLabel);
+    var label = _testWrapper.screen.getByText(testLabel);
+    expect(search).toBeInstanceOf(HTMLInputElement);
+    expect(label).toBeInstanceOf(HTMLLabelElement);
+    expect(search).toBeInTheDocument();
+    expect(label).toBeInTheDocument();
+  });
+  test('autocomplete options appear on user input', function () {
+    getAutocompleteComponent({
+      mode: 'autocomplete'
+    });
+    var control = _testWrapper.screen.getByLabelText(testLabel);
+    _userEvent["default"].type(control, testValue);
+    expect(control).toHaveValue(testValue);
+    expect(_testWrapper.screen.queryByText('Option 1')).toBeInTheDocument();
+    expect(_testWrapper.screen.queryByText('Option 2')).toBeInTheDocument();
+    expect(_testWrapper.screen.queryByText('Option 3')).toBeInTheDocument();
+    _testWrapper.fireEvent.change(control, {
+      target: {
+        value: '3'
+      }
+    });
+    expect(_testWrapper.screen.queryByText('Option 1')).not.toBeInTheDocument();
+    expect(_testWrapper.screen.queryByText('Option 2')).not.toBeInTheDocument();
+    expect(_testWrapper.screen.queryByText('Option 3')).toBeInTheDocument();
+  });
+  test('Allow custom values', function () {
+    var onSubmit = jest.fn();
+    getAutocompleteComponent({
+      mode: 'autocomplete',
+      onSubmit: onSubmit
+    });
+    var control = _testWrapper.screen.getByLabelText(testLabel);
+    _userEvent["default"].type(control, 'Custom Value{enter}');
+    expect(onSubmit).toHaveBeenCalledWith('Custom Value');
+  });
+  test('clear button works in autocomplete mode', function () {
+    getAutocompleteComponent({
+      mode: 'autocomplete'
+    });
+    var search = _testWrapper.screen.getByLabelText(testLabel);
+    _userEvent["default"].type(search, 'clear');
+    expect(search).toHaveValue('clear');
+    var clearButton = _testWrapper.screen.getByRole('button');
+    expect(clearButton).toHaveAttribute('tabindex', '0');
+    (0, _testWrapper.act)(function () {
+      clearButton.focus();
+    });
+    expect(clearButton).toHaveFocus();
+    _testWrapper.fireEvent.keyDown(clearButton, {
+      key: 'Enter'
+    });
+    _testWrapper.fireEvent.keyUp(clearButton, {
+      key: 'Enter'
+    });
+    expect(search).toHaveValue('');
+  });
+  test('Down arrow key open listbox popup', function () {
+    getAutocompleteComponent({
+      mode: 'autocomplete'
+    });
+    var search = _testWrapper.screen.getByLabelText(testLabel);
+    (0, _testWrapper.act)(function () {
+      search.focus();
+    });
+    expect(search).toHaveFocus();
+    expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+    _testWrapper.fireEvent.keyDown(search, {
+      key: 'ArrowDown'
+    });
+    (0, _testWrapper.act)(function () {
+      jest.runAllTimers();
+    });
+    expect(_testWrapper.screen.getByRole('listbox')).toBeInTheDocument();
+    expect(_testWrapper.screen.getByText('Option 1')).toBeInTheDocument();
+  });
+  test("No popup when there aren't any options", function () {
+    getAutocompleteComponent({
+      mode: 'autocomplete'
+    });
+    var search = _testWrapper.screen.getByLabelText(testLabel);
+    (0, _testWrapper.act)(function () {
+      search.focus();
+    });
+    expect(search).toHaveFocus();
+    expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+    _userEvent["default"].type(search, 'xyz');
+    (0, _testWrapper.act)(function () {
+      jest.runAllTimers();
+    });
+    expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+    expect(_testWrapper.screen.queryByText('Option 1')).not.toBeInTheDocument();
+    expect(search).toHaveValue('xyz');
+  });
 });

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

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