@pingux/astro 2.143.0-alpha.1 → 2.143.0

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

@@ -0,0 +1,91 @@
+"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.SearchFieldBase = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+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 _ = require("../..");
+var _hooks = require("../../hooks");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
+var _react2 = require("@emotion/react");
+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 SearchFieldBase = /*#__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",
+    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'
+    }
+  }))));
+});
+exports.SearchFieldBase = SearchFieldBase;

package/lib/cjs/types/listBox.d.ts

@@ -33,11 +33,13 @@ export interface ListBoxProps extends AriaListBoxOptions<object> {
     variant?: string;
     children?: CollectionChildren<object>;
     isCondensed?: boolean;
+    showSelectedOption?: boolean;
 }
 export interface OptionType {
     item: ListBoxItemType;
     hasVirtualFocus?: boolean;
     isCondensed?: boolean;
+    showSelectedOption?: boolean;
 }
 export interface OptionWithCheckboxType extends StyleProps {
     isSelected?: boolean;

package/lib/cjs/types/searchField.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
+import type { CollectionChildren } from '@react-types/shared';
 import { ThemeUICSSObject } from 'theme-ui';
 import { ControlProps } from '../hooks/useField/useField';
 import { StyleProps } from './shared';
 import { HelpHintProps, IconProps, IconTypeExtended, LabelProps } from '.';
-export interface SearchFieldProps extends StyleProps {
+export interface SearchFieldProps<T extends object> extends StyleProps {
     /**
        * @ignore
        * Identifies the currently active element when DOM focus is on a composite widget, textbox,
@@ -169,4 +170,13 @@ export interface SearchFieldProps extends StyleProps {
     labelProps?: LabelProps;
     size?: string;
     sx?: ThemeUICSSObject;
+    mode?: 'default' | 'autocomplete';
+    defaultItems?: Iterable<T>;
+    children?: CollectionChildren<T>;
+}
+export interface SearchItem extends StyleProps {
+    id: string;
+    text?: string;
+    name?: string;
+    [key: string]: unknown;
 }

package/lib/components/ListBox/ListBox.js

@@ -8,7 +8,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-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"];
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 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; }
@@ -82,6 +82,7 @@ var ListBox = /*#__PURE__*/forwardRef(function (props, ref) {
     ariaLabelledby = props['aria-labelledby'],
     ariaDescribedby = props['aria-describedby'],
     ariaDetails = props['aria-details'],
+    showSelectedOption = props.showSelectedOption,
     others = _objectWithoutProperties(props, _excluded);
 
   // Object matching React Aria API with all options
@@ -182,7 +183,8 @@ var ListBox = /*#__PURE__*/forwardRef(function (props, ref) {
         key: item.key,
         item: item,
         hasVirtualFocus: hasVirtualFocus,
-        isCondensed: isCondensed
+        isCondensed: isCondensed,
+        showSelectedOption: showSelectedOption
       });
     }
     if (type === collectionTypes.LOADER) {

package/lib/components/ListBox/Option.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-var _excluded = ["item", "hasVirtualFocus", "isCondensed"],
+var _excluded = ["item", "hasVirtualFocus", "isCondensed", "showSelectedOption"],
   _excluded2 = ["onPressStart", "onPressUp"];
 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; }
@@ -56,6 +56,7 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
   var item = props.item,
     hasVirtualFocus = props.hasVirtualFocus,
     isCondensed = props.isCondensed,
+    showSelectedOption = props.showSelectedOption,
     others = _objectWithoutProperties(props, _excluded);
   var key = item.key,
     itemProps = item.props,
@@ -94,7 +95,7 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useStatusClasses = useStatusClasses(null, {
       isDisabled: isDisabled || isSeparator,
       isFocused: focused,
-      isSelected: isSelected,
+      isSelected: showSelectedOption ? isSelected : false,
       isCondensed: isCondensed,
       isFocusVisible: isFocusVisible,
       isPressed: isPressed
@@ -131,12 +132,12 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
     mr: "xs",
     className: classNames,
     variant: "listBox.checkboxIcon"
-  }) : isSelected && !isOnyx && ___EmotionJSX(Icon, {
+  }) : isSelected && !isOnyx && showSelectedOption && ___EmotionJSX(Icon, {
     icon: CircleSmallIcon,
     title: {
       name: 'Circle Small Icon'
     }
-  }), rendered, isSelected && isOnyx && ___EmotionJSX(Icon, {
+  }), rendered, isSelected && isOnyx && showSelectedOption && ___EmotionJSX(Icon, {
     icon: CheckIcon,
     title: {
       name: 'Check Icon'
@@ -144,4 +145,7 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
     color: "green-500"
   }));
 });
+Option.defaultProps = {
+  showSelectedOption: true
+};
 export default Option;

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)))));
+});

package/lib/components/SearchField/SearchField.js

@@ -1,87 +1,27 @@
-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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-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 _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["hasNoClearButton", "mode", "icon"];
 import React, { forwardRef } from 'react';
-import { useSearchField } from 'react-aria';
-import { useSearchFieldState } from 'react-stately';
-import CloseIcon from '@pingux/mdi-react/CloseIcon';
 import SearchIcon from '@pingux/mdi-react/SearchIcon';
-import { Box, Icon, IconButton, Input, Label } from '../..';
-import { useField, useLocalOrForwardRef, usePropWarning } from '../../hooks';
-import { getPendoID } from '../../utils/devUtils/constants/pendoID';
+import { SearchAutoComplete } from './SearchAutoComplete';
+import { SearchFieldBase } from './SearchFieldBase';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var displayName = 'SearchField';
 var SearchField = /*#__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;
-  usePropWarning(props, 'disabled', 'isDisabled');
-  var searchRef = useLocalOrForwardRef(ref);
-  var state = useSearchFieldState(props);
-  var _useSearchField = useSearchField(_objectSpread({
-      autoComplete: autocomplete,
-      autoFocus: hasAutoFocus,
-      excludeFromTabOrder: isExcludedFromTabOrder
-    }, props), state, searchRef),
-    raLabelProps = _useSearchField.labelProps,
-    raInputProps = _useSearchField.inputProps,
-    clearButtonProps = _useSearchField.clearButtonProps;
-  var _useField = 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 ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
-    variant: "forms.search.wrapper"
-  }, fieldControlWrapperProps), ___EmotionJSX(Input, _extends({
-    variant: "forms.input.search",
-    ref: searchRef
-  }, fieldControlInputProps)), icon && ___EmotionJSX(Icon, _extends({
-    icon: icon,
-    variant: "forms.search.icon",
-    size: 20,
-    title: {
-      name: 'Search Icon'
-    }
-  }, iconProps)), !hasNoClearButton && state.value !== '' && ___EmotionJSX(IconButton, _extends({
-    tabIndex: 0,
-    onKeyDown: handleKeyDownEvent,
-    color: "text.secondary",
-    variant: "searchClearButton"
-  }, clearButtonProps), ___EmotionJSX(Icon, {
-    icon: CloseIcon,
-    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 : _props$icon,
+    rest = _objectWithoutProperties(props, _excluded);
+  var Component = mode === 'autocomplete' ? SearchAutoComplete : SearchFieldBase;
+  return ___EmotionJSX(Component, _extends({
+    hasNoClearButton: hasNoClearButton,
+    icon: icon
+  }, rest, {
+    ref: ref
+  }));
 });
-SearchField.defaultProps = {
-  hasNoClearButton: false,
-  icon: SearchIcon
-};
 SearchField.displayName = displayName;
 export default SearchField;

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

@@ -18,7 +18,7 @@ import FilterVariantIcon from '@pingux/mdi-react/FilterVariantIcon';
 import SearchIcon from '@pingux/mdi-react/SearchIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { useDebounce, useGetTheme } from '../../hooks';
-import { Box, Icon, IconButton, SearchField, Text } from '../../index';
+import { Box, Icon, IconButton, Item, SearchField, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { ariaAttributeBaseArgTypes, ariaAttributeBaseDocSettings } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
@@ -73,10 +73,9 @@ export var Default = function Default(args) {
     icon: SearchIcon,
     onSubmit: function onSubmit(text) {
       return alert(text);
-    } // eslint-disable-line no-alert
+    }
   }));
 };
-
 Default.parameters = {
   design: {
     type: 'figma',
@@ -166,4 +165,43 @@ export var WithFilter = function WithFilter() {
       name: 'Filter Icon'
     }
   })));
+};
+export var ControlledWithPopover = function ControlledWithPopover() {
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    value = _useState6[0],
+    setValue = _useState6[1];
+  var items = [{
+    id: 'apple',
+    name: 'Apple'
+  }, {
+    id: 'banana',
+    name: 'Banana'
+  }, {
+    id: 'blueberry',
+    name: 'Blueberry'
+  }];
+  return ___EmotionJSX(Box, null, ___EmotionJSX(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 ___EmotionJSX(Item, {
+      key: item.id,
+      textValue: item.name
+    }, item.name);
+  }), ___EmotionJSX(Text, {
+    mt: "xs"
+  }, "value: ".concat(value)));
 };