rsuite 5.50.0 → 5.52.0

package/styles/color-modes/high-contrast.less

@@ -382,4 +382,39 @@
 
   // Popover
   --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+
+  // CSS relative color syntax is not supported
+  // https://developer.chrome.com/blog/css-relative-color-syntax/
+  @supports not (color: rgb(from white r g b)) {
+    // Misc
+    --rs-bg-backdrop: fade(@B900-high-contrast, 80%);
+    --rs-state-focus-outline: 3px solid fade(@H500-high-contrast, 25%);
+
+    // Loader
+    --rs-loader-ring: fade(@B050-high-contrast, 30);
+    --rs-loader-backdrop: fade(@B900-high-contrast, 83%);
+    --rs-loader-ring-inverse: fade(@B050-high-contrast, 80);
+    --rs-loader-backdrop-inverse: fade(@B000-high-contrast, 90);
+
+    // Dropdown
+    --rs-dropdown-item-bg-active: fade(@H900-high-contrast, 20);
+
+    // Slider
+    --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500-high-contrast, 25);
+
+    // Uploader
+    --rs-uploader-overlay-bg: fade(@B600-high-contrast, 80);
+
+    // Carousel
+    --rs-carousel-indicator: fade(@B000-high-contrast, 40);
+
+    // List
+    --rs-list-placeholder-bg: fade(@H900-high-contrast, 20%);
+
+    // Calendar
+    --rs-calendar-range-bg: fade(@H900-high-contrast, 50%);
+
+    // Placeholder
+    --rs-placeholder-active: lighten(@B600-high-contrast, 5%);
+  }
 }

package/styles/color-modes/light.less

@@ -376,4 +376,50 @@
 
   // Popover
   --rs-popover-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
+
+  // CSS relative color syntax is not supported
+  // https://developer.chrome.com/blog/css-relative-color-syntax/
+  @supports not (color: rgb(from white r g b)) {
+    // Misc
+    --rs-bg-backdrop: fade(@B900, 30%);
+    --rs-color-focus-ring: fade(@H500, 25%);
+    --rs-state-focus-shadow: 0 0 0 3px fade(@H500, 25%);
+    --rs-state-focus-outline: 3px solid fade(@H500, 25%);
+
+    // Loader
+    --rs-loader-ring: fade(@B050, 80);
+    --rs-loader-backdrop: fade(@B000, 90%);
+    --rs-loader-ring-inverse: fade(@B050, 30%);
+    --rs-loader-backdrop-inverse: fade(@B900, 83%);
+
+    // Dropdown
+    --rs-dropdown-item-bg-hover: fade(@H100, 50%);
+
+    // ARIA menu
+    --rs-menuitem-active-bg: fade(@H100, 50);
+
+    // ARIA Listboxes
+    --rs-listbox-option-hover-bg: fade(@H100, 50%);
+
+    // Toggle
+    --rs-toggle-loader-ring: fade(@B050, 30%);
+
+    // Slider
+    --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500, 25%);
+
+    // Uploader
+    --rs-uploader-overlay-bg: fade(#fff, 80);
+
+    // Carousel
+    --rs-carousel-indicator: fade(@B000, 40);
+
+    // List
+    --rs-list-placeholder-bg: fade(@H050, 50%);
+
+    // Table
+    --rs-table-scrollbar-vertical-track: fade(@B200, 40%);
+
+    // Calendar
+    --rs-calendar-range-bg: fade(@H100, 50%);
+  }
 }

package/styles/index.less

@@ -32,6 +32,8 @@
 @import '../FormGroup/styles/index';
 @import '../FormErrorMessage/styles/index';
 @import '../Grid/styles/index';
+@import '../Row/styles/index';
+@import '../Col/styles/index';
 @import '../Header/styles/index';
 @import '../FormHelpText/styles/index';
 @import '../IconButton/styles/index';
@@ -50,15 +52,12 @@
 @import '../Pagination/styles/index';
 @import '../Panel/styles/index';
 @import '../PanelGroup/styles/index';
-@import '../Picker/styles/index';
 @import '../Placeholder/styles/index';
 @import '../Popover/styles/index';
 @import '../Progress/styles/index';
 @import '../Radio/styles/index';
 @import '../RadioGroup/styles/index';
 @import '../RadioTile/styles/index';
-@import '../Ripple/styles/index';
-@import '../Row/styles/index';
 @import '../SelectPicker/styles/index';
 @import '../Sidebar/styles/index';
 @import '../Sidenav/styles/index';
@@ -66,6 +65,7 @@
 @import '../Steps/styles/index';
 @import '../Table/styles/index';
 @import '../Tag/styles/index';
+@import '../TagGroup/styles/index';
 @import '../TagPicker/styles/index';
 @import '../TagInput/styles/index';
 @import '../Timeline/styles/index';
@@ -75,5 +75,11 @@
 @import '../Uploader/styles/index';
 @import '../Rate/styles/index';
 @import '../toaster/styles/index';
-@import '../CloseButton/styles/index';
 @import '../Stack/styles/index';
+@import '../VisuallyHidden/styles/index';
+
+// Internal Components
+@import '../internals/Ripple/styles/index';
+@import '../internals/CloseButton/styles/index';
+@import '../internals/Picker/styles/index';
+@import '../internals/SearchBox/styles/index';

package/styles/variables.less

@@ -713,7 +713,6 @@
 
 // Picker content width
 @picker-content-min-width:            200px;
-@picker-search-bar-icon-width:        @font-size-base;
 @picker-default-toggle-border-width:  1px;
 @picker-toggle-clean-width:           12px;
 @picker-toggle-clean-right:           30px;
@@ -849,12 +848,10 @@
 @zindex-date-range-picker-calendar-dropdown:  1;
 @zindex-date-range-picker-table-cell-content: 1;
 @zindex-badge-content:                        1;
-@zindex-input:                                2;
-@zindex-input-group-icon:                     4;
 @zindex-dropdown:                             5;
 @zindex-picker-toggle:                        5; // The same with zindex-dropdown
 @zindex-picker-input:                         (@zindex-picker-toggle + 1); // Greater than picker toggle
-@zindex-picker-menu:                          (@zindex-picker-toggle + 2); // Greater than picker toggle and input
+@zindex-picker-popup:                          (@zindex-picker-toggle + 2); // Greater than picker toggle and input
 @zindex-dropdown-a:                           10;
 @zindex-list-helper:                          99;
 @zindex-navbar:                               1000;

package/toaster/styles/index.css

@@ -0,0 +1,239 @@
+:root,
+.rs-theme-light {
+  --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+}
+.rs-theme-dark {
+  --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+}
+.rs-theme-high-contrast {
+  --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+}
+/* stylelint-disable */
+*[class*='rs-'] {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+*[class*='rs-']::before,
+*[class*='rs-']::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+@-webkit-keyframes notificationMoveIn {
+  0% {
+    opacity: 0;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+  }
+}
+@keyframes notificationMoveIn {
+  0% {
+    opacity: 0;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+  }
+}
+@-webkit-keyframes notificationMoveInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+@keyframes notificationMoveInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+@-webkit-keyframes notificationMoveInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+            transform: translate3d(100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+@keyframes notificationMoveInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+            transform: translate3d(100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+@-webkit-keyframes notificationMoveOut {
+  0% {
+    opacity: 1;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+    max-height: 100px;
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+    max-height: 0;
+    overflow: hidden;
+  }
+}
+@keyframes notificationMoveOut {
+  0% {
+    opacity: 1;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+    max-height: 100px;
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+    max-height: 0;
+    overflow: hidden;
+  }
+}
+.rs-toast {
+  pointer-events: auto;
+}
+.rs-toast-container {
+  position: fixed;
+  z-index: 1080;
+  pointer-events: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.rs-toast-container .rs-toast:not(.rs-notification) {
+  -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+  -webkit-box-shadow: var(--rs-shadow-overlay);
+          box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+          box-shadow: var(--rs-shadow-overlay);
+}
+.rs-toast-container .rs-toast-fade-entered,
+.rs-toast-container .rs-toast-fade-exiting {
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+.rs-toast-container .rs-toast-fade-entered {
+  -webkit-animation-duration: 0.4s;
+          animation-duration: 0.4s;
+  -webkit-animation-timing-function: cubic-bezier(0.99, 0.44, 0.44, 1.35);
+          animation-timing-function: cubic-bezier(0.99, 0.44, 0.44, 1.35);
+}
+.rs-toast-container .rs-toast-fade-exited,
+.rs-toast-container .rs-toast-fade-entering {
+  opacity: 0;
+}
+.rs-toast-container .rs-toast-fade-exited {
+  -webkit-transform-origin: 0 0;
+          transform-origin: 0 0;
+  -webkit-transform: scaleY(0.8);
+          transform: scaleY(0.8);
+  max-height: 0;
+  overflow: hidden;
+}
+.rs-toast-container-top-center,
+.rs-toast-container-bottom-center {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 100%;
+}
+.rs-toast-container-top-center .rs-toast-fade-entered,
+.rs-toast-container-bottom-center .rs-toast-fade-entered {
+  -webkit-animation-name: notificationMoveIn;
+          animation-name: notificationMoveIn;
+}
+.rs-toast-container-bottom-start,
+.rs-toast-container-top-start {
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  left: 24px;
+}
+.rs-toast-container-bottom-start .rs-toast-fade-entered,
+.rs-toast-container-top-start .rs-toast-fade-entered {
+  -webkit-animation-name: notificationMoveInLeft;
+          animation-name: notificationMoveInLeft;
+}
+.rs-toast-container-bottom-end,
+.rs-toast-container-top-end {
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+  right: 24px;
+}
+.rs-toast-container-bottom-end .rs-toast-fade-entered,
+.rs-toast-container-top-end .rs-toast-fade-entered {
+  margin-left: auto;
+  -webkit-animation-name: notificationMoveInRight;
+          animation-name: notificationMoveInRight;
+}
+.rs-toast-container-top-center,
+.rs-toast-container-top-start,
+.rs-toast-container-top-end {
+  top: 24px;
+}
+.rs-toast-container-bottom-center,
+.rs-toast-container-bottom-start,
+.rs-toast-container-bottom-end {
+  bottom: 24px;
+}
+.rs-toast-container .rs-toast-fade-exiting {
+  -webkit-animation-duration: 0.3s;
+          animation-duration: 0.3s;
+  -webkit-animation-timing-function: cubic-bezier(0.64, 0.65, 0.57, 1.13);
+          animation-timing-function: cubic-bezier(0.64, 0.65, 0.57, 1.13);
+  -webkit-animation-name: notificationMoveOut;
+          animation-name: notificationMoveOut;
+}
+
+/*# sourceMappingURL=index.css.map */

package/CloseButton/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "rsuite/CloseButton",
-  "private": true,
-  "main": "../cjs/CloseButton/index.js",
-  "module": "../esm/CloseButton/index.js",
-  "types": "../esm/CloseButton/index.d.ts"
-}

package/Disclosure/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "rsuite/Disclosure",
-  "private": true,
-  "main": "../cjs/Disclosure/index.js",
-  "module": "../esm/Disclosure/index.js",
-  "types": "../esm/Disclosure/index.d.ts"
-}

package/Menu/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "rsuite/Menu",
-  "private": true,
-  "main": "../cjs/Menu/index.js",
-  "module": "../esm/Menu/index.js",
-  "types": "../esm/Menu/index.d.ts"
-}

package/Overlay/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "rsuite/Overlay",
-  "private": true,
-  "main": "../cjs/Overlay/index.js",
-  "module": "../esm/Overlay/index.js",
-  "types": "../esm/Overlay/index.d.ts"
-}

package/Picker/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "rsuite/Picker",
-  "private": true,
-  "main": "../cjs/Picker/index.js",
-  "module": "../esm/Picker/index.js",
-  "types": "../esm/Picker/index.d.ts"
-}

package/Plaintext/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "rsuite/Plaintext",
-  "private": true,
-  "main": "../cjs/Plaintext/index.js",
-  "module": "../esm/Plaintext/index.js",
-  "types": "../esm/Plaintext/index.d.ts"
-}

package/Ripple/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "rsuite/Ripple",
-  "private": true,
-  "main": "../cjs/Ripple/index.js",
-  "module": "../esm/Ripple/index.js",
-  "types": "../esm/Ripple/index.d.ts"
-}

package/Windowing/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "rsuite/Windowing",
-  "private": true,
-  "main": "../cjs/Windowing/index.js",
-  "module": "../esm/Windowing/index.js",
-  "types": "../esm/Windowing/index.d.ts"
-}

package/cjs/Picker/DropdownMenu.d.ts

@@ -1,59 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ListProps, ListHandle } from '../Windowing';
-import { StandardProps, ItemDataType } from '../@types/common';
-export interface DropdownMenuProps<Multiple = false> extends StandardProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
-    classPrefix: string;
-    data?: ItemDataType[];
-    group?: boolean;
-    groupBy?: string;
-    disabledItemValues?: any[];
-    activeItemValues?: any[];
-    focusItemValue?: any;
-    maxHeight?: number;
-    valueKey?: string;
-    labelKey?: string;
-    className?: string;
-    style?: React.CSSProperties;
-    dropdownMenuItemAs: React.ElementType | string;
-    dropdownMenuItemClassPrefix?: string;
-    dropdownMenuItemProps?: any;
-    rowHeight?: number;
-    rowGroupHeight?: number;
-    virtualized?: boolean;
-    listProps?: Partial<ListProps>;
-    listRef?: React.Ref<ListHandle>;
-    /** Custom selected option */
-    renderMenuItem?: (itemLabel: React.ReactNode, item: any) => React.ReactNode;
-    renderMenuGroup?: (title: React.ReactNode, item: any) => React.ReactNode;
-    onSelect?: Multiple extends true ? (value: any, item: any, event: React.MouseEvent, checked: boolean) => void : Multiple extends false ? (value: any, item: any, event: React.MouseEvent) => void : any;
-    onGroupTitleClick?: (event: React.MouseEvent) => void;
-}
-export declare type DropdownMenuComponent = React.ForwardRefExoticComponent<DropdownMenuProps> & {
-    <Multiple = false>(props: DropdownMenuProps<Multiple>): React.ReactElement | null;
-};
-declare const DropdownMenu: DropdownMenuComponent;
-export declare const dropdownMenuPropTypes: {
-    classPrefix: PropTypes.Validator<string>;
-    className: PropTypes.Requireable<string>;
-    dropdownMenuItemAs: PropTypes.Validator<PropTypes.ReactComponentLike>;
-    dropdownMenuItemClassPrefix: PropTypes.Requireable<string>;
-    data: PropTypes.Requireable<any[]>;
-    group: PropTypes.Requireable<boolean>;
-    disabledItemValues: PropTypes.Requireable<any[]>;
-    activeItemValues: PropTypes.Requireable<any[]>;
-    focusItemValue: PropTypes.Requireable<any>;
-    maxHeight: PropTypes.Requireable<number>;
-    valueKey: PropTypes.Requireable<string>;
-    labelKey: PropTypes.Requireable<string>;
-    style: PropTypes.Requireable<object>;
-    renderMenuItem: PropTypes.Requireable<(...args: any[]) => any>;
-    renderMenuGroup: PropTypes.Requireable<(...args: any[]) => any>;
-    onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-    onGroupTitleClick: PropTypes.Requireable<(...args: any[]) => any>;
-    virtualized: PropTypes.Requireable<boolean>;
-    listProps: PropTypes.Requireable<any>;
-    rowHeight: PropTypes.Requireable<number>;
-    rowGroupHeight: PropTypes.Requireable<number>;
-};
-export default DropdownMenu;

package/cjs/Picker/DropdownMenuGroup.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { WithAsProps } from '../@types/common';
-export interface DropdownMenuGroupProps extends WithAsProps, React.HTMLAttributes<HTMLDivElement> {
-}
-declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
-export default DropdownMenuGroup;

package/cjs/Picker/DropdownMenuItem.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
-export interface DropdownMenuItemProps extends WithAsProps {
-    active?: boolean;
-    disabled?: boolean;
-    value?: any;
-    focus?: boolean;
-    title?: string;
-    onSelect?: (value: any, event: React.MouseEvent) => void;
-    onKeyDown?: (event: React.KeyboardEvent) => void;
-    renderItem?: (value: any) => React.ReactNode;
-}
-declare const DropdownMenuItem: RsRefForwardingComponent<'div', DropdownMenuItemProps>;
-export default DropdownMenuItem;

package/cjs/Picker/PickerOverlay.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
-import { OverlayTriggerHandle } from '../Picker';
-export interface PickerOverlayProps extends WithAsProps {
-    placement?: string;
-    autoWidth?: boolean;
-    children?: React.ReactNode;
-    target?: React.RefObject<OverlayTriggerHandle>;
-    onKeyDown?: (event: React.KeyboardEvent) => void;
-}
-declare const PickerOverlay: RsRefForwardingComponent<'div', PickerOverlayProps>;
-export default PickerOverlay;

package/cjs/Picker/SearchBar.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
-export interface SearchBarProps extends WithAsProps {
-    value?: string;
-    placeholder?: string;
-    className?: string;
-    inputRef?: React.Ref<HTMLInputElement>;
-    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-declare const SearchBar: RsRefForwardingComponent<'div', SearchBarProps>;
-export default SearchBar;

package/cjs/Picker/SearchBar.js

@@ -1,61 +0,0 @@
-'use client';
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-exports.__esModule = true;
-exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _react = _interopRequireWildcard(require("react"));
-var _get = _interopRequireDefault(require("lodash/get"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Search = _interopRequireDefault(require("@rsuite/icons/legacy/Search"));
-var _utils = require("../utils");
-var SearchBar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _props$as = props.as,
-    Component = _props$as === void 0 ? 'div' : _props$as,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'picker-search-bar' : _props$classPrefix,
-    value = props.value,
-    children = props.children,
-    className = props.className,
-    placeholder = props.placeholder,
-    inputRef = props.inputRef,
-    onChange = props.onChange,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "value", "children", "className", "placeholder", "inputRef", "onChange"]);
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    merge = _useClassNames.merge,
-    prefix = _useClassNames.prefix;
-  var classes = merge(className, withClassPrefix());
-  var handleChange = (0, _react.useCallback)(function (event) {
-    onChange === null || onChange === void 0 ? void 0 : onChange((0, _get.default)(event, 'target.value'), event);
-  }, [onChange]);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    role: "searchbox"
-  }, rest, {
-    ref: ref,
-    className: classes
-  }), /*#__PURE__*/_react.default.createElement("input", {
-    className: prefix('input'),
-    value: value,
-    onChange: handleChange,
-    placeholder: placeholder,
-    ref: inputRef
-  }), /*#__PURE__*/_react.default.createElement(_Search.default, {
-    className: prefix('search-icon')
-  }), children);
-});
-SearchBar.displayName = 'SearchBar';
-SearchBar.propTypes = {
-  as: _propTypes.default.elementType,
-  classPrefix: _propTypes.default.string,
-  value: _propTypes.default.string,
-  placeholder: _propTypes.default.string,
-  className: _propTypes.default.string,
-  children: _propTypes.default.node,
-  onChange: _propTypes.default.func
-};
-var _default = SearchBar;
-exports.default = _default;