musae 1.3.1-beta.2 → 1.3.1-beta.21

package/dist/components/search/search.cjs

@@ -4,20 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _typeof = require('@babel/runtime/helpers/typeof');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var button = require('../button/button.cjs');
-var input = require('../input/input.cjs');
 var React = require('react');
-var search = require('../icon/icons/action/search.cjs');
 var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
-var tokens_stylex = require('../theme/tokens.stylex.cjs');
-var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var relax = require('@aiszlab/relax');
 var className = require('@aiszlab/relax/class-name');
+var bar = require('./bar.cjs');
+var view = require('./view.cjs');
 var styles = require('./styles.cjs');
 var context = require('./context.cjs');
-var close = require('../icon/icons/navigation/close.cjs');
+var hooks = require('./hooks.cjs');
+var resultList = require('./result-list.cjs');
 
 /**
  * @zh Search 搜索组件，基于 Material 3 设计规范
@@ -36,27 +35,98 @@ var Search = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     clearable = _ref$clearable === void 0 ? true : _ref$clearable,
     searchButton = _ref.searchButton,
     onSearch = _ref.onSearch,
-    onClear = _ref.onClear;
-  var inputRef = React.useRef(null);
+    onClear = _ref.onClear,
+    leading = _ref.leading,
+    trailing = _ref.trailing,
+    _ref$view = _ref.view,
+    view$1 = _ref$view === void 0 ? "auto" : _ref$view,
+    open = _ref.open,
+    defaultOpen = _ref.defaultOpen,
+    onOpenChange = _ref.onOpenChange,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    renderItem = _ref.renderItem,
+    onSelect = _ref.onSelect,
+    _ref$closeOnSelect = _ref.closeOnSelect,
+    closeOnSelect = _ref$closeOnSelect === void 0 ? true : _ref$closeOnSelect;
+  var barInputRef = React.useRef(null);
+  var viewInputRef = React.useRef(null);
+  var wasOpenRef = React.useRef(false);
+  var isRestoringBarFocusRef = React.useRef(false);
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
-  var themeColorVars = useThemeColorVars.useThemeColorVars(["primary", "outline", "surface-container-high", "on-surface-variant", ["on-surface-variant", tokens_stylex.OPACITY.thin], ["on-surface", tokens_stylex.OPACITY.thickest], ["on-surface", tokens_stylex.OPACITY.thin]]);
+  var listId = "search-result-list-".concat(React.useId().replace(/[^a-zA-Z0-9_-]/g, ""));
+  var _useState = React.useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeKey = _useState2[0],
+    setActiveKey = _useState2[1];
   var _useControlledState = relax.useControlledState(valueInProps, {
       defaultState: defaultValue !== null && defaultValue !== void 0 ? defaultValue : ""
     }),
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
     _value = _useControlledState2[0],
     _setValue = _useControlledState2[1];
+  var _useControlledState3 = relax.useControlledState(open, {
+      defaultState: defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false
+    }),
+    _useControlledState4 = _slicedToArray(_useControlledState3, 2),
+    isOpen = _useControlledState4[0],
+    setOpen = _useControlledState4[1];
+  var resolvedView = hooks.useResolvedSearchView(view$1);
+  var requestOpen = relax.useEvent(function (nextOpen) {
+    if (disabled && nextOpen) return;
+    if (nextOpen === isOpen) return;
+    setOpen(nextOpen);
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(nextOpen);
+  });
+  React.useEffect(function () {
+    if (isOpen) {
+      var _viewInputRef$current;
+      (_viewInputRef$current = viewInputRef.current) === null || _viewInputRef$current === void 0 || _viewInputRef$current.focus();
+    } else if (wasOpenRef.current) {
+      var _barInputRef$current;
+      isRestoringBarFocusRef.current = true;
+      (_barInputRef$current = barInputRef.current) === null || _barInputRef$current === void 0 || _barInputRef$current.focus();
+      isRestoringBarFocusRef.current = false;
+    }
+    wasOpenRef.current = isOpen;
+  }, [isOpen]);
+  React.useEffect(function () {
+    if (disabled && relax.isUndefined(open) && isOpen) {
+      requestOpen(false);
+    }
+  }, [disabled, isOpen, open, requestOpen]);
+  React.useEffect(function () {
+    if (!isOpen) {
+      setActiveKey(undefined);
+    }
+  }, [isOpen]);
+  React.useEffect(function () {
+    setActiveKey(undefined);
+  }, [valueInProps]);
+  React.useEffect(function () {
+    if (disabled) {
+      setActiveKey(undefined);
+    }
+  }, [disabled]);
+  React.useEffect(function () {
+    if (!relax.isUndefined(activeKey) && !items.some(function (item) {
+      return item.key === activeKey && !item.disabled;
+    })) {
+      setActiveKey(undefined);
+    }
+  }, [activeKey, items]);
   React.useImperativeHandle(ref, function () {
     return {
       focus: function focus() {
-        var _inputRef$current, _inputRef$current$foc;
-        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || (_inputRef$current$foc = _inputRef$current.focus) === null || _inputRef$current$foc === void 0 || _inputRef$current$foc.call(_inputRef$current);
+        var _current;
+        (_current = (isOpen ? viewInputRef : barInputRef).current) === null || _current === void 0 || _current.focus();
       },
       blur: function blur() {
-        var _inputRef$current2, _inputRef$current2$bl;
-        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || (_inputRef$current2$bl = _inputRef$current2.blur) === null || _inputRef$current2$bl === void 0 || _inputRef$current2$bl.call(_inputRef$current2);
+        var _current2;
+        (_current2 = (isOpen ? viewInputRef : barInputRef).current) === null || _current2 === void 0 || _current2.blur();
       },
       clear: function clear() {
+        setActiveKey(undefined);
         _setValue("");
         onChange === null || onChange === void 0 || onChange("");
       },
@@ -66,6 +136,7 @@ var Search = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
   });
   var handleChange = relax.useEvent(function (value) {
+    setActiveKey(undefined);
     _setValue(value);
     onChange === null || onChange === void 0 || onChange(value);
   });
@@ -73,10 +144,26 @@ var Search = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onSearch === null || onSearch === void 0 || onSearch(_value);
   });
   var handleClear = relax.useEvent(function () {
+    setActiveKey(undefined);
     _setValue("");
     onChange === null || onChange === void 0 || onChange("");
     onClear === null || onClear === void 0 || onClear();
   });
+  var getOptionId = relax.useEvent(function (key) {
+    var serializedKey = Array.from(String(key), function (character) {
+      return character.codePointAt(0).toString(16);
+    }).join("-");
+    return "".concat(listId, "-option-").concat(_typeof(key), "-").concat(serializedKey);
+  });
+  var selectItem = relax.useEvent(function (item) {
+    if (item.disabled) return;
+    _setValue(item.value);
+    onChange === null || onChange === void 0 || onChange(item.value);
+    onSelect === null || onSelect === void 0 || onSelect(item);
+    if (closeOnSelect) {
+      requestOpen(false);
+    }
+  });
   var handleKeyDown = React.useCallback(function (e) {
     if (e.key === "Enter") {
       e.preventDefault();
@@ -86,45 +173,78 @@ var Search = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       handleClear();
     }
   }, [handleSearch, handleClear]);
-  var hasValue = _value.length > 0;
+  var handleViewKeyDown = relax.useEvent(function (event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      requestOpen(false);
+    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      setActiveKey(hooks.getAdjacentEnabledKey(items, activeKey, event.key === "ArrowDown" ? 1 : -1));
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      var activeItem = items.find(function (item) {
+        return !relax.isUndefined(activeKey) && item.key === activeKey && !item.disabled;
+      });
+      if (activeItem) {
+        selectItem(activeItem);
+      } else {
+        handleSearch();
+      }
+    }
+  });
+  var activeDescendant = relax.isUndefined(activeKey) ? undefined : items.some(function (item) {
+    return item.key === activeKey && !item.disabled;
+  }) ? getOptionId(activeKey) : undefined;
   var _styled = {
-    container: stylex.props(styles.default.container["default"], disabled && styles.default.container.disabled, !!searchButton && styles.default.container.withSearchButton),
-    leading: stylex.props(styles.default.leading["default"]),
-    input: stylex.props(styles.default.input["default"]),
-    clear: stylex.props(styles.default.clear["default"]),
-    searchButton: stylex.props(styles.default.searchButton["default"])
+    container: stylex.props(styles.default.container.base)
   };
   return /*#__PURE__*/React.createElement("span", {
     className: className.stringify(classNames.search, _defineProperty({}, classNames.disabled, disabled), _styled.container.className, className$1),
-    style: _objectSpread(_objectSpread(_objectSpread({}, _styled.container.style), style), themeColorVars)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: className.stringify(classNames.searchLeading, _styled.leading.className),
-    style: _styled.leading.style
-  }, /*#__PURE__*/React.createElement(search.default, {
-    size: 24
-  })), /*#__PURE__*/React.createElement(input.default, {
-    className: className.stringify(classNames.searchInput, _styled.input.className),
-    style: _styled.input.style,
-    ref: inputRef,
+    style: _objectSpread(_objectSpread({}, _styled.container.style), style)
+  }, /*#__PURE__*/React.createElement(bar.default, {
+    inputRef: barInputRef,
     value: _value,
     onChange: handleChange,
     placeholder: placeholder,
     disabled: disabled,
-    onKeyDown: handleKeyDown
-  }), hasValue && clearable && !disabled && (/*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: className.stringify(classNames.searchClear, _styled.clear.className),
-    style: _styled.clear.style,
-    onClick: handleClear,
-    "aria-label": "Clear search"
-  }, /*#__PURE__*/React.createElement(close.default, {
-    size: 24
-  }))), searchButton && (/*#__PURE__*/React.createElement(button.Button, {
-    className: className.stringify(classNames.searchButton, _styled.searchButton.className),
-    style: _styled.searchButton.style,
-    onClick: handleSearch,
-    disabled: disabled
-  }, searchButton)));
+    clearable: clearable,
+    leading: leading,
+    trailing: trailing,
+    searchButton: searchButton,
+    onClear: handleClear,
+    onFocus: function onFocus() {
+      if (!isRestoringBarFocusRef.current) {
+        requestOpen(true);
+      }
+    },
+    onKeyDown: handleKeyDown,
+    onSearch: handleSearch
+  }), /*#__PURE__*/React.createElement(view.default, {
+    inputRef: viewInputRef,
+    mode: resolvedView,
+    open: isOpen,
+    value: _value,
+    listId: listId,
+    placeholder: placeholder,
+    disabled: disabled,
+    clearable: clearable,
+    onChange: handleChange,
+    onClear: handleClear,
+    onClose: function onClose() {
+      return requestOpen(false);
+    },
+    onKeyDown: handleViewKeyDown,
+    activeDescendant: activeDescendant
+  }, /*#__PURE__*/React.createElement(resultList.default, {
+    id: listId,
+    items: items,
+    renderItem: renderItem,
+    activeKey: activeKey,
+    getOptionId: getOptionId,
+    onActiveKeyChange: setActiveKey,
+    onSelect: selectItem
+  })));
 });
 Search.displayName = "Search";
 

package/dist/components/search/search.d.ts

@@ -1,10 +1,20 @@
 import React from "react";
-import type { SearchRef } from "../../types/search";
+import type { SearchItem, SearchRef } from "../../types/search";
 /**
  * @zh Search 搜索组件，基于 Material 3 设计规范
  * @en Search component based on Material 3 design specifications
  */
 declare const Search: React.ForwardRefExoticComponent<import("../../types/element").ComponentProps & {
+    view?: import(".").SearchView;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    items?: SearchItem[];
+    renderItem?: (item: SearchItem) => React.ReactNode;
+    onSelect?: (item: SearchItem) => void;
+    closeOnSelect?: boolean;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode | React.ReactNode[];
     value?: string;
     defaultValue?: string;
     onChange?: (value: string) => void;

package/dist/components/search/search.mjs

@@ -1,19 +1,18 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _typeof from '@babel/runtime/helpers/typeof';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { Button } from '../button/button.mjs';
-import Input from '../input/input.mjs';
-import React, { forwardRef, useRef, useImperativeHandle, useCallback } from 'react';
-import IconSearch from '../icon/icons/action/search.mjs';
+import React, { forwardRef, useRef, useId, useState, useEffect, useImperativeHandle, useCallback } from 'react';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
-import { OPACITY } from '../theme/tokens.stylex.mjs';
-import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
-import { useControlledState, useEvent } from '@aiszlab/relax';
+import { useControlledState, useEvent, isUndefined } from '@aiszlab/relax';
 import { stringify } from '@aiszlab/relax/class-name';
+import SearchBar from './bar.mjs';
+import SearchView from './view.mjs';
 import styles from './styles.mjs';
 import { CLASS_NAMES } from './context.mjs';
-import IconClose from '../icon/icons/navigation/close.mjs';
+import { useResolvedSearchView, getAdjacentEnabledKey } from './hooks.mjs';
+import SearchResultList from './result-list.mjs';
 
 /**
  * @zh Search 搜索组件，基于 Material 3 设计规范
@@ -32,27 +31,98 @@ var Search = /*#__PURE__*/forwardRef(function (_ref, ref) {
     clearable = _ref$clearable === void 0 ? true : _ref$clearable,
     searchButton = _ref.searchButton,
     onSearch = _ref.onSearch,
-    onClear = _ref.onClear;
-  var inputRef = useRef(null);
+    onClear = _ref.onClear,
+    leading = _ref.leading,
+    trailing = _ref.trailing,
+    _ref$view = _ref.view,
+    view = _ref$view === void 0 ? "auto" : _ref$view,
+    open = _ref.open,
+    defaultOpen = _ref.defaultOpen,
+    onOpenChange = _ref.onOpenChange,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    renderItem = _ref.renderItem,
+    onSelect = _ref.onSelect,
+    _ref$closeOnSelect = _ref.closeOnSelect,
+    closeOnSelect = _ref$closeOnSelect === void 0 ? true : _ref$closeOnSelect;
+  var barInputRef = useRef(null);
+  var viewInputRef = useRef(null);
+  var wasOpenRef = useRef(false);
+  var isRestoringBarFocusRef = useRef(false);
   var classNames = useClassNames(CLASS_NAMES);
-  var themeColorVars = useThemeColorVars(["primary", "outline", "surface-container-high", "on-surface-variant", ["on-surface-variant", OPACITY.thin], ["on-surface", OPACITY.thickest], ["on-surface", OPACITY.thin]]);
+  var listId = "search-result-list-".concat(useId().replace(/[^a-zA-Z0-9_-]/g, ""));
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeKey = _useState2[0],
+    setActiveKey = _useState2[1];
   var _useControlledState = useControlledState(valueInProps, {
       defaultState: defaultValue !== null && defaultValue !== void 0 ? defaultValue : ""
     }),
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
     _value = _useControlledState2[0],
     _setValue = _useControlledState2[1];
+  var _useControlledState3 = useControlledState(open, {
+      defaultState: defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false
+    }),
+    _useControlledState4 = _slicedToArray(_useControlledState3, 2),
+    isOpen = _useControlledState4[0],
+    setOpen = _useControlledState4[1];
+  var resolvedView = useResolvedSearchView(view);
+  var requestOpen = useEvent(function (nextOpen) {
+    if (disabled && nextOpen) return;
+    if (nextOpen === isOpen) return;
+    setOpen(nextOpen);
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(nextOpen);
+  });
+  useEffect(function () {
+    if (isOpen) {
+      var _viewInputRef$current;
+      (_viewInputRef$current = viewInputRef.current) === null || _viewInputRef$current === void 0 || _viewInputRef$current.focus();
+    } else if (wasOpenRef.current) {
+      var _barInputRef$current;
+      isRestoringBarFocusRef.current = true;
+      (_barInputRef$current = barInputRef.current) === null || _barInputRef$current === void 0 || _barInputRef$current.focus();
+      isRestoringBarFocusRef.current = false;
+    }
+    wasOpenRef.current = isOpen;
+  }, [isOpen]);
+  useEffect(function () {
+    if (disabled && isUndefined(open) && isOpen) {
+      requestOpen(false);
+    }
+  }, [disabled, isOpen, open, requestOpen]);
+  useEffect(function () {
+    if (!isOpen) {
+      setActiveKey(undefined);
+    }
+  }, [isOpen]);
+  useEffect(function () {
+    setActiveKey(undefined);
+  }, [valueInProps]);
+  useEffect(function () {
+    if (disabled) {
+      setActiveKey(undefined);
+    }
+  }, [disabled]);
+  useEffect(function () {
+    if (!isUndefined(activeKey) && !items.some(function (item) {
+      return item.key === activeKey && !item.disabled;
+    })) {
+      setActiveKey(undefined);
+    }
+  }, [activeKey, items]);
   useImperativeHandle(ref, function () {
     return {
       focus: function focus() {
-        var _inputRef$current, _inputRef$current$foc;
-        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || (_inputRef$current$foc = _inputRef$current.focus) === null || _inputRef$current$foc === void 0 || _inputRef$current$foc.call(_inputRef$current);
+        var _current;
+        (_current = (isOpen ? viewInputRef : barInputRef).current) === null || _current === void 0 || _current.focus();
       },
       blur: function blur() {
-        var _inputRef$current2, _inputRef$current2$bl;
-        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || (_inputRef$current2$bl = _inputRef$current2.blur) === null || _inputRef$current2$bl === void 0 || _inputRef$current2$bl.call(_inputRef$current2);
+        var _current2;
+        (_current2 = (isOpen ? viewInputRef : barInputRef).current) === null || _current2 === void 0 || _current2.blur();
       },
       clear: function clear() {
+        setActiveKey(undefined);
         _setValue("");
         onChange === null || onChange === void 0 || onChange("");
       },
@@ -62,6 +132,7 @@ var Search = /*#__PURE__*/forwardRef(function (_ref, ref) {
     };
   });
   var handleChange = useEvent(function (value) {
+    setActiveKey(undefined);
     _setValue(value);
     onChange === null || onChange === void 0 || onChange(value);
   });
@@ -69,10 +140,26 @@ var Search = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onSearch === null || onSearch === void 0 || onSearch(_value);
   });
   var handleClear = useEvent(function () {
+    setActiveKey(undefined);
     _setValue("");
     onChange === null || onChange === void 0 || onChange("");
     onClear === null || onClear === void 0 || onClear();
   });
+  var getOptionId = useEvent(function (key) {
+    var serializedKey = Array.from(String(key), function (character) {
+      return character.codePointAt(0).toString(16);
+    }).join("-");
+    return "".concat(listId, "-option-").concat(_typeof(key), "-").concat(serializedKey);
+  });
+  var selectItem = useEvent(function (item) {
+    if (item.disabled) return;
+    _setValue(item.value);
+    onChange === null || onChange === void 0 || onChange(item.value);
+    onSelect === null || onSelect === void 0 || onSelect(item);
+    if (closeOnSelect) {
+      requestOpen(false);
+    }
+  });
   var handleKeyDown = useCallback(function (e) {
     if (e.key === "Enter") {
       e.preventDefault();
@@ -82,45 +169,78 @@ var Search = /*#__PURE__*/forwardRef(function (_ref, ref) {
       handleClear();
     }
   }, [handleSearch, handleClear]);
-  var hasValue = _value.length > 0;
+  var handleViewKeyDown = useEvent(function (event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      requestOpen(false);
+    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      setActiveKey(getAdjacentEnabledKey(items, activeKey, event.key === "ArrowDown" ? 1 : -1));
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      var activeItem = items.find(function (item) {
+        return !isUndefined(activeKey) && item.key === activeKey && !item.disabled;
+      });
+      if (activeItem) {
+        selectItem(activeItem);
+      } else {
+        handleSearch();
+      }
+    }
+  });
+  var activeDescendant = isUndefined(activeKey) ? undefined : items.some(function (item) {
+    return item.key === activeKey && !item.disabled;
+  }) ? getOptionId(activeKey) : undefined;
   var _styled = {
-    container: props(styles.container["default"], disabled && styles.container.disabled, !!searchButton && styles.container.withSearchButton),
-    leading: props(styles.leading["default"]),
-    input: props(styles.input["default"]),
-    clear: props(styles.clear["default"]),
-    searchButton: props(styles.searchButton["default"])
+    container: props(styles.container.base)
   };
   return /*#__PURE__*/React.createElement("span", {
     className: stringify(classNames.search, _defineProperty({}, classNames.disabled, disabled), _styled.container.className, className),
-    style: _objectSpread(_objectSpread(_objectSpread({}, _styled.container.style), style), themeColorVars)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: stringify(classNames.searchLeading, _styled.leading.className),
-    style: _styled.leading.style
-  }, /*#__PURE__*/React.createElement(IconSearch, {
-    size: 24
-  })), /*#__PURE__*/React.createElement(Input, {
-    className: stringify(classNames.searchInput, _styled.input.className),
-    style: _styled.input.style,
-    ref: inputRef,
+    style: _objectSpread(_objectSpread({}, _styled.container.style), style)
+  }, /*#__PURE__*/React.createElement(SearchBar, {
+    inputRef: barInputRef,
     value: _value,
     onChange: handleChange,
     placeholder: placeholder,
     disabled: disabled,
-    onKeyDown: handleKeyDown
-  }), hasValue && clearable && !disabled && (/*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: stringify(classNames.searchClear, _styled.clear.className),
-    style: _styled.clear.style,
-    onClick: handleClear,
-    "aria-label": "Clear search"
-  }, /*#__PURE__*/React.createElement(IconClose, {
-    size: 24
-  }))), searchButton && (/*#__PURE__*/React.createElement(Button, {
-    className: stringify(classNames.searchButton, _styled.searchButton.className),
-    style: _styled.searchButton.style,
-    onClick: handleSearch,
-    disabled: disabled
-  }, searchButton)));
+    clearable: clearable,
+    leading: leading,
+    trailing: trailing,
+    searchButton: searchButton,
+    onClear: handleClear,
+    onFocus: function onFocus() {
+      if (!isRestoringBarFocusRef.current) {
+        requestOpen(true);
+      }
+    },
+    onKeyDown: handleKeyDown,
+    onSearch: handleSearch
+  }), /*#__PURE__*/React.createElement(SearchView, {
+    inputRef: viewInputRef,
+    mode: resolvedView,
+    open: isOpen,
+    value: _value,
+    listId: listId,
+    placeholder: placeholder,
+    disabled: disabled,
+    clearable: clearable,
+    onChange: handleChange,
+    onClear: handleClear,
+    onClose: function onClose() {
+      return requestOpen(false);
+    },
+    onKeyDown: handleViewKeyDown,
+    activeDescendant: activeDescendant
+  }, /*#__PURE__*/React.createElement(SearchResultList, {
+    id: listId,
+    items: items,
+    renderItem: renderItem,
+    activeKey: activeKey,
+    getOptionId: getOptionId,
+    onActiveKeyChange: setActiveKey,
+    onSelect: selectItem
+  })));
 });
 Search.displayName = "Search";