rsuite 5.56.0 → 5.58.0

package/TagPicker/styles/index.less

@@ -3,6 +3,7 @@
 @import '../../Checkbox/styles/index.less';
 @import '../../internals/Picker/styles/mixin.less';
 @import '../../InputPicker/styles/index.less';
+@import './mixin.less';
 
 .rs-picker-tag {
   .rs-picker-toggle {
@@ -34,11 +35,6 @@
     padding-left: @tag-picker-content-padding-horizontal;
   }
 
-  .rs-tag,
-  .rs-tag + .rs-tag {
-    margin-left: @tag-picker-content-padding-horizontal;
-  }
-
   .rs-picker-search {
     &,
     &-input,
@@ -68,3 +64,59 @@
 .rs-plaintext .rs-tag {
   margin: 0;
 }
+
+// Tag Picker Size
+// --------------------------------------------------
+.rs-picker-tag-lg {
+  .rs-tag-picker-size(@padding-y-lg - 1; @padding-x-lg; @font-size-large; @line-height-large);
+  .rs-picker-textbox {
+    min-height: 40px;
+  }
+  .rs-picker-tag-list .rs-tag-lg {
+    margin-top: 6px;
+    margin-left: 6px;
+  }
+}
+
+// Default size
+.rs-picker-tag,
+.rs-picker-tag-md {
+  .rs-tag-picker-size(@padding-y; @padding-x; @font-size-base; @line-height-base);
+  .rs-picker-tag-list .rs-tag-md {
+    margin-top: 5px;
+    margin-left: 5px;
+  }
+}
+
+.rs-picker-tag-sm {
+  .rs-tag-picker-size(@padding-y-sm; @padding-x-sm; @font-size-base; @line-height-base);
+  .rs-picker-textbox {
+    min-height: 28px;
+  }
+  .rs-picker-tag-list .rs-tag-sm {
+    margin-top: 4px;
+    margin-left: 4px;
+  }
+}
+
+.rs-picker-tag-xs {
+  .rs-tag-picker-size(@padding-y-xs; @padding-x-xs; @font-size-extra-small; @line-height-extra-small);
+
+  .rs-picker-textbox {
+    min-height: 22px;
+    padding-bottom: @padding-y-xs - 1px;
+
+    // Adjust search-input size the same with button
+    .rs-picker-search-input {
+      .padding-vertical(1px);
+    }
+  }
+
+  .rs-picker-tag-list {
+    // Tag does not have `xs` size, and the size needs to be determined through the superior element.
+    .rs-tag-sm {
+      margin-top: 1px;
+      margin-left: 2px;
+    }
+  }
+}

package/TagPicker/styles/mixin.less

@@ -0,0 +1,21 @@
+.rs-tag-picker-size(@padding-vertical; @padding-horizontal; @font-size; @line-height;) {
+  .rs-picker-textbox {
+    padding-bottom: @padding-vertical - 3px;
+
+    .rs-picker-search-input {
+      padding-left: @padding-horizontal;
+      margin-top: @padding-vertical - 3px;
+      font-size: @font-size;
+    }
+
+    input {
+      height: @line-height * @font-size - 2px;
+    }
+  }
+
+  .rs-picker-toggle {
+    padding-top: @padding-vertical - 1px;
+    padding-bottom: @padding-vertical - 1px;
+    box-shadow: none;
+  }
+}

package/Text/package.json

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

package/Text/styles/index.css

@@ -0,0 +1,192 @@
+:root,
+.rs-theme-light {
+  --rs-gray-50: #f7f7fa;
+  --rs-gray-200: #e5e5ea;
+  --rs-gray-600: #8e8e93;
+  --rs-gray-800: #575757;
+  --rs-gray-900: #272c36;
+  --rs-red-500: #f44336;
+  --rs-orange-500: #fa8900;
+  --rs-yellow-500: #ffb300;
+  --rs-green-500: #4caf50;
+  --rs-cyan-500: #00bcd4;
+  --rs-blue-500: #2196f3;
+  --rs-violet-500: #673ab7;
+  --rs-text-primary: var(--rs-gray-800);
+  --rs-text-secondary: var(--rs-gray-600);
+  --rs-text-weight-thin: 100;
+  --rs-text-weight-light: 300;
+  --rs-text-weight-medium: 500;
+  --rs-text-weight-semibold: 600;
+  --rs-text-weight-bold: 700;
+  --rs-text-weight-extrabold: 800;
+  --rs-bg-well: var(--rs-gray-50);
+}
+.rs-theme-dark {
+  --rs-gray-50: #e9ebf0;
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-800: #1a1d24;
+  --rs-gray-900: #0f131a;
+  --rs-red-500: #f04f43;
+  --rs-orange-500: #ff9800;
+  --rs-yellow-500: #ffc757;
+  --rs-green-500: #58b15b;
+  --rs-cyan-500: #00bcd4;
+  --rs-blue-500: #1499ef;
+  --rs-violet-500: #673ab7;
+  --rs-text-primary: var(--rs-gray-50);
+  --rs-text-secondary: var(--rs-gray-200);
+  --rs-bg-well: var(--rs-gray-900);
+}
+.rs-theme-high-contrast {
+  --rs-gray-50: #e9ebf0;
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-800: #1a1d24;
+  --rs-gray-900: #0f131a;
+  --rs-red-500: #bd1732;
+  --rs-orange-500: #ff9800;
+  --rs-yellow-500: #ffc757;
+  --rs-green-500: #0d822c;
+  --rs-cyan-500: #00bcd4;
+  --rs-blue-500: #1499ef;
+  --rs-violet-500: #673ab7;
+  --rs-text-primary: var(--rs-gray-50);
+  --rs-text-secondary: var(--rs-gray-200);
+  --rs-bg-well: var(--rs-gray-900);
+}
+/* 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;
+}
+.rs-text {
+  font-family: Apple-System, Arial, Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', STXihei, sans-serif;
+  line-height: 1.42857143;
+  color: #575757;
+  color: var(--rs-text-primary);
+  margin: 0;
+}
+blockquote.rs-text {
+  font-style: italic;
+  padding-left: 1.5rem;
+  border-left: 2px solid #e5e5ea;
+  border-left: 2px solid var(--rs-gray-200);
+}
+kbd.rs-text {
+  background-color: #f7f7fa;
+  background-color: var(--rs-bg-well);
+  border: solid #c8c8c8;
+  -o-border-image: initial;
+     border-image: initial;
+  border-radius: 0.25em;
+  border-width: 1px 1px 2px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  font-size: 0.875em;
+  padding: 0.2em 0.3em;
+}
+.rs-text.rs-text-muted {
+  color: #8e8e93;
+  color: var(--rs-text-secondary);
+}
+.rs-text-left {
+  text-align: left;
+}
+.rs-text-center {
+  text-align: center;
+}
+.rs-text-right {
+  text-align: right;
+}
+.rs-text-justify {
+  text-align: justify;
+}
+.rs-text-uppercase {
+  text-transform: uppercase;
+}
+.rs-text-lowercase {
+  text-transform: lowercase;
+}
+.rs-text-capitalize {
+  text-transform: capitalize;
+}
+.rs-text-thin {
+  font-weight: 100;
+  font-weight: var(--rs-text-weight-thin);
+}
+.rs-text-light {
+  font-weight: 300;
+  font-weight: var(--rs-text-weight-light);
+}
+.rs-text-medium {
+  font-weight: 500;
+  font-weight: var(--rs-text-weight-medium);
+}
+.rs-text-semibold {
+  font-weight: 600;
+  font-weight: var(--rs-text-weight-semibold);
+}
+.rs-text-bold {
+  font-weight: 700;
+  font-weight: var(--rs-text-weight-bold);
+}
+.rs-text-extrabold {
+  font-weight: 800;
+  font-weight: var(--rs-text-weight-extrabold);
+}
+.rs-text-pre-line {
+  white-space: pre-line;
+}
+.rs-text-ellipsis {
+  overflow: hidden;
+}
+@supports (-webkit-line-clamp: 1) {
+  .rs-text-ellipsis {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+  }
+}
+@supports not (-webkit-line-clamp: 1) {
+  .rs-text-ellipsis {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-wrap: break-word;
+  }
+}
+.rs-text-red {
+  color: #f44336;
+  color: var(--rs-red-500);
+}
+.rs-text-orange {
+  color: #fa8900;
+  color: var(--rs-orange-500);
+}
+.rs-text-yellow {
+  color: #ffb300;
+  color: var(--rs-yellow-500);
+}
+.rs-text-green {
+  color: #4caf50;
+  color: var(--rs-green-500);
+}
+.rs-text-cyan {
+  color: #00bcd4;
+  color: var(--rs-cyan-500);
+}
+.rs-text-blue {
+  color: #2196f3;
+  color: var(--rs-blue-500);
+}
+.rs-text-violet {
+  color: #673ab7;
+  color: var(--rs-violet-500);
+}
+
+/*# sourceMappingURL=index.css.map */

package/Text/styles/index.less

@@ -0,0 +1,117 @@
+@import '../../styles/common';
+
+// Heading
+// -------------------------
+
+.rs-text {
+  font-family: @font-family-base;
+  line-height: @line-height-base;
+  color: var(--rs-text-primary);
+  margin: 0;
+
+  blockquote& {
+    font-style: italic;
+    padding-left: 1.5rem;
+    border-left: 2px solid var(--rs-gray-200);
+  }
+
+  kbd& {
+    background-color: var(--rs-bg-well);
+    border: solid #c8c8c8;
+    border-image: initial;
+    border-radius: 0.25em;
+    border-width: 1px 1px 2px;
+    box-sizing: border-box;
+    font-size: 0.875em;
+    padding: 0.2em 0.3em;
+  }
+
+  &.rs-text-muted {
+    color: var(--rs-text-secondary);
+  }
+
+  // Text Align: left | center | right | justify
+  &-left {
+    text-align: left;
+  }
+
+  &-center {
+    text-align: center;
+  }
+
+  &-right {
+    text-align: right;
+  }
+
+  &-justify {
+    text-align: justify;
+  }
+
+  // Text Transform: none | uppercase | lowercase | capitalize
+  &-uppercase {
+    text-transform: uppercase;
+  }
+
+  &-lowercase {
+    text-transform: lowercase;
+  }
+
+  &-capitalize {
+    text-transform: capitalize;
+  }
+
+  // Text Weight: thin | light | regular | medium | semibold | bold | extrabold
+  &-thin {
+    font-weight: var(--rs-text-weight-thin);
+  }
+
+  &-light {
+    font-weight: var(--rs-text-weight-light);
+  }
+
+  &-medium {
+    font-weight: var(--rs-text-weight-medium);
+  }
+
+  &-semibold {
+    font-weight: var(--rs-text-weight-semibold);
+  }
+
+  &-bold {
+    font-weight: var(--rs-text-weight-bold);
+  }
+
+  &-extrabold {
+    font-weight: var(--rs-text-weight-extrabold);
+  }
+
+  &-pre-line {
+    white-space: pre-line;
+  }
+
+  &-ellipsis {
+    overflow: hidden;
+
+    @supports (-webkit-line-clamp: 1) {
+      & {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    @supports not (-webkit-line-clamp: 1) {
+      & {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        word-wrap: break-word;
+      }
+    }
+  }
+}
+
+// Colorful tags
+each(@spectrum, .(@color) {
+  .rs-text-@{color} {
+    color: var(~'--rs-@{color}-500');
+  }
+});

package/cjs/@types/common.d.ts

@@ -35,10 +35,10 @@ export interface AnimationEventProps {
     onExited?: (node: HTMLElement) => void;
 }
 export declare type PickerAppearance = 'default' | 'subtle';
-export interface PickerBaseProps<LocaleType = any> extends WithAsProps, AnimationEventProps {
+export interface PickerBaseProps<L = any> extends WithAsProps, AnimationEventProps {
     id?: string;
     /** Custom locale */
-    locale?: Partial<LocaleType>;
+    locale?: Partial<L>;
     /** A picker can have different appearances. */
     appearance?: PickerAppearance;
     /** Format picker to appear inside a content block */
@@ -108,24 +108,22 @@ export interface FormControlBaseProps<ValueType = React.InputHTMLAttributes<HTML
     /** Make the control readonly */
     readOnly?: boolean;
 }
-declare type ToArray<V> = V extends any[] ? V : V[];
-export interface FormControlPickerProps<ValueType = any, LocaleType = any, DataType = Record<string, any>> extends PickerBaseProps<LocaleType>, FormControlBaseProps<ValueType> {
+export declare type ToArray<V> = V extends any[] ? V : V[];
+export interface DataProps<TData> {
     /** The data of component */
-    data: DataType[];
+    data: TData[];
     /** Set option value 'key' in 'data' */
     valueKey?: string;
     /** Set options to display the 'key' in 'data' */
     labelKey?: string;
     /** Set children key in data */
     childrenKey?: string;
-    /** Disabled items */
-    disabledItemValues?: ToArray<NonNullable<ValueType>>;
-    /** Initial value */
-    defaultValue?: ValueType;
-    /** Current value of the component. Creates a controlled component */
-    value?: ValueType;
-    /** Called after the value has been changed */
-    onChange?: (value: ValueType, event: React.SyntheticEvent) => void;
+}
+export interface FormControlPickerProps<T = any, L = any, D = Record<string, any>, I = T> extends PickerBaseProps<L>, FormControlBaseProps<T>, DataProps<D> {
+    /**
+     * Disabled items
+     */
+    disabledItemValues?: ToArray<NonNullable<I>>;
 }
 export declare namespace TypeAttributes {
     type Size = 'lg' | 'md' | 'sm' | 'xs';
@@ -150,6 +148,7 @@ export interface ItemDataType<T = number | string> extends Record<string, any> {
     children?: ItemDataType<T>[];
     loading?: boolean;
 }
+export declare type DataItemValue = number | string | null;
 export interface Offset {
     top: number;
     left: number;
@@ -163,4 +162,3 @@ export declare type CursorPosition = {
     clientTop: number;
     clientLeft: number;
 };
-export {};

package/cjs/CascadeTree/CascadeTree.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CascadeTreeProps } from './types';
+export interface CascadeTreeComponent {
+    <T>(props: CascadeTreeProps<T> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }): JSX.Element | null;
+    displayName?: string;
+    propTypes?: React.WeakValidationMap<CascadeTreeProps<any>>;
+}
+/**
+ * CascadeTree is a component that displays tree-structured data in columns.
+ *
+ * @see https://rsuitejs.com/components/cascade-tree
+ */
+declare const CascadeTree: CascadeTreeComponent;
+export default CascadeTree;

package/cjs/CascadeTree/CascadeTree.js

@@ -0,0 +1,174 @@
+'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 _treeUtils = require("../utils/treeUtils");
+var _utils = require("../utils");
+var _useMap = require("../utils/useMap");
+var _TreeView = _interopRequireDefault(require("./TreeView"));
+var _SearchView = _interopRequireDefault(require("./SearchView"));
+var _hooks = require("./hooks");
+/**
+ * CascadeTree is a component that displays tree-structured data in columns.
+ *
+ * @see https://rsuitejs.com/components/cascade-tree
+ */
+var CascadeTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    defaultValue = props.defaultValue,
+    className = props.className,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'cascade-tree' : _props$classPrefix,
+    _props$childrenKey = props.childrenKey,
+    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
+    _props$valueKey = props.valueKey,
+    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
+    _props$labelKey = props.labelKey,
+    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+    valueProp = props.value,
+    _props$disabledItemVa = props.disabledItemValues,
+    disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,
+    columnWidth = props.columnWidth,
+    columnHeight = props.columnHeight,
+    searchable = props.searchable,
+    renderTreeNode = props.renderTreeNode,
+    renderColumn = props.renderColumn,
+    onSelect = props.onSelect,
+    onSearch = props.onSearch,
+    onChange = props.onChange,
+    getChildren = props.getChildren,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "defaultValue", "className", "classPrefix", "childrenKey", "valueKey", "labelKey", "value", "disabledItemValues", "columnWidth", "columnHeight", "searchable", "renderTreeNode", "renderColumn", "onSelect", "onSearch", "onChange", "getChildren"]);
+  var _ref = (0, _utils.useControlled)(valueProp, defaultValue),
+    value = _ref[0],
+    setValue = _ref[1]; // Store the children of each node
+  var childrenMap = (0, _useMap.useMap)();
+
+  // Store the parent of each node
+  var parentMap = (0, _react.useMemo)(function () {
+    return (0, _treeUtils.getParentMap)(data, function (item) {
+      var _childrenMap$get;
+      return (_childrenMap$get = childrenMap.get(item)) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : item[childrenKey];
+    });
+  }, [childrenMap, childrenKey, data]);
+
+  // Flatten the tree data
+  var flattenedData = (0, _react.useMemo)(function () {
+    return (0, _treeUtils.flattenTree)(data, function (item) {
+      var _childrenMap$get2;
+      return (_childrenMap$get2 = childrenMap.get(item)) !== null && _childrenMap$get2 !== void 0 ? _childrenMap$get2 : item[childrenKey];
+    });
+  }, [childrenMap, childrenKey, data]);
+
+  // The selected item
+  var selectedItem = flattenedData.find(function (item) {
+    return item[valueKey] === value;
+  });
+
+  // Callback function after selecting the node
+  var onSelectCallback = function onSelectCallback(node, event) {
+    var isLeafNode = node.isLeafNode,
+      cascadePaths = node.cascadePaths,
+      itemData = node.itemData;
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(itemData, cascadePaths, event);
+    if (isLeafNode) {
+      var nextValue = itemData[valueKey];
+      setValue(nextValue);
+    }
+  };
+  var _useSelect = (0, _hooks.useSelect)({
+      value: value,
+      valueKey: valueKey,
+      childrenKey: childrenKey,
+      childrenMap: childrenMap,
+      selectedItem: selectedItem,
+      getChildren: getChildren,
+      onChange: onChange,
+      onSelect: onSelectCallback
+    }),
+    activeItem = _useSelect.activeItem,
+    loadingItemsSet = _useSelect.loadingItemsSet,
+    handleSelect = _useSelect.handleSelect;
+  var _usePaths = (0, _hooks.usePaths)({
+      data: data,
+      activeItem: activeItem,
+      selectedItem: selectedItem,
+      getParent: function getParent(item) {
+        return parentMap.get(item);
+      },
+      getChildren: function getChildren(item) {
+        var _childrenMap$get3;
+        return (_childrenMap$get3 = childrenMap.get(item)) !== null && _childrenMap$get3 !== void 0 ? _childrenMap$get3 : item[childrenKey];
+      }
+    }),
+    columns = _usePaths.columns,
+    pathTowardsActiveItem = _usePaths.pathTowardsActiveItem;
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge;
+  var classes = merge(className, withClassPrefix());
+  var onSearchCallback = (0, _react.useCallback)(function (value, _items, event) {
+    return onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);
+  }, [onSearch]);
+  var _useSearch = (0, _hooks.useSearch)({
+      labelKey: labelKey,
+      childrenKey: childrenKey,
+      parentMap: parentMap,
+      flattenedData: flattenedData,
+      onSearch: onSearchCallback
+    }),
+    items = _useSearch.items,
+    searchKeyword = _useSearch.searchKeyword,
+    setSearchKeyword = _useSearch.setSearchKeyword,
+    handleSearch = _useSearch.handleSearch;
+  var handleSearchRowSelect = (0, _utils.useEventCallback)(function (item, items, event) {
+    var _item$childrenKey;
+    var node = {
+      itemData: item,
+      cascadePaths: items,
+      isLeafNode: !((_item$childrenKey = item[childrenKey]) !== null && _item$childrenKey !== void 0 && _item$childrenKey.length)
+    };
+    handleSelect(node, event);
+    setSearchKeyword('');
+  });
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    className: classes
+  }, rest, {
+    ref: ref
+  }), searchable && /*#__PURE__*/_react.default.createElement(_SearchView.default, {
+    data: items,
+    searchKeyword: searchKeyword,
+    valueKey: valueKey,
+    labelKey: labelKey,
+    parentMap: parentMap,
+    disabledItemValues: disabledItemValues,
+    onSelect: handleSearchRowSelect,
+    onSearch: handleSearch
+  }), !searchKeyword && /*#__PURE__*/_react.default.createElement(_TreeView.default, {
+    columnWidth: columnWidth,
+    columnHeight: columnHeight,
+    disabledItemValues: disabledItemValues,
+    loadingItemsSet: loadingItemsSet,
+    valueKey: valueKey,
+    labelKey: labelKey,
+    childrenKey: childrenKey,
+    classPrefix: classPrefix,
+    data: columns,
+    cascadePaths: pathTowardsActiveItem,
+    activeItemValue: value,
+    onSelect: handleSelect,
+    renderColumn: renderColumn,
+    renderTreeNode: renderTreeNode
+  }));
+});
+CascadeTree.displayName = 'CascadeTree';
+var _default = CascadeTree;
+exports.default = _default;

package/cjs/CascadeTree/SearchView.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ItemDataType, WithAsProps } from '../@types/common';
+interface SearchViewProps<T> extends WithAsProps {
+    searchKeyword: string;
+    labelKey: string;
+    valueKey: string;
+    parentMap: WeakMap<ItemDataType<T>, ItemDataType<T>>;
+    data: ItemDataType<T>[];
+    focusItemValue?: T | null;
+    disabledItemValues: any[];
+    renderSearchItem?: (label: React.ReactNode, items: ItemDataType<T>[]) => React.ReactNode;
+    onSelect: (item: ItemDataType<T>, items: ItemDataType<T>[], event: React.MouseEvent) => void;
+    onSearch: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    inputRef?: React.RefObject<HTMLInputElement>;
+}
+declare function SearchView<T>(props: SearchViewProps<T>): JSX.Element;
+export default SearchView;