@nutui/nutui-react-taro 3.0.5 → 3.0.6

package/dist/es/packages/tabbar/style/style.harmony.css

@@ -5,38 +5,44 @@
 .nut-tabbar {
   border: 0px;
   box-shadow: none;
-  border-bottom: 1px solid #eee;
-  border-top: 1px solid #eee;
+  border-bottom: 0;
+  border-top: 0;
   width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
   background: #ffffff;
 }
 .nut-tabbar-wrap {
-  width: 100%;
-  height: 50px;
+  height: 46px;
   display: flex;
+}
+.nut-tabbar-wrap-3 {
+  padding: 0 16px;
+}
+.nut-tabbar-wrap-2 {
+  padding: 0 32px;
+}
+.nut-tabbar-wrap-horizontal {
+  align-items: center;
+}
+.nut-tabbar-wrap-horizontal .nut-tabbar-item {
   flex-direction: row;
   justify-content: center;
-  align-items: center;
 }
-.nut-tabbar:last-child {
-  border-right: 0;
+.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-icon {
+  width: 20px;
+  height: 20px;
+}
+.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-tabbar-item-text {
+  margin: 0 4px 0 6px;
+  font-size: 14px;
+}
+.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-badge-sup::after {
+  border: 0;
 }
 .nut-tabbar-fixed {
   position: fixed;
   bottom: 0px;
   left: 0px;
 }
-.nut-tabbar-safe-area {
-  display: block;
-  width: 100%;
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
-}
 
 [dir=rtl] .nut-tabbar:last-child,
 .nut-rtl .nut-tabbar:last-child {

package/dist/es/packages/tabbar/style/tabbar.scss

@@ -4,24 +4,40 @@
   border-bottom: $tabbar-border-bottom;
   border-top: $tabbar-border-top;
   width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
   background: $color-background-overlay;
 
   &-wrap {
-    width: 100%;
     height: $tabbar-height;
     display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-  }
 
-  &:last-child {
-    border-right: 0;
+    &-3 {
+      padding: 0 16px;
+    }
+
+    &-2 {
+      padding: 0 32px;
+    }
+
+    &-horizontal {
+      align-items: center;
+      .nut-tabbar-item {
+        flex-direction: row;
+        justify-content: center;
+        .nut-icon {
+          width: 20px;
+          height: 20px;
+        }
+        .nut-tabbar-item-text {
+          margin: 0 4px 0 6px;
+          font-size: 14px;
+        }
+        .nut-badge-sup {
+          &::after {
+            border: 0;
+          }
+        }
+      }
+    }
   }
 
   &-fixed {
@@ -29,13 +45,6 @@
     bottom: 0px;
     left: 0px;
   }
-
-  &-safe-area {
-    display: block;
-    width: 100%;
-    padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
-  }
 }
 
 [dir='rtl'] .nut-tabbar,

package/dist/es/packages/tabbar/tabbar.js

@@ -2,23 +2,25 @@ import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
-import React from "react";
+import React, { useMemo } from "react";
 import classNames from "classnames";
 import { View } from "@tarojs/components";
 import { ComponentDefaults } from "../../utils/typings";
 import { usePropsValue } from "../../hooks/use-props-value";
 import TabbarItem from "../tabbaritem/index";
 import TabbarContext from "./context";
+import SafeArea from "../safearea/index";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     defaultValue: 0,
     fixed: false,
     inactiveColor: '',
     activeColor: '',
+    direction: 'vertical',
     safeArea: false,
-    onSwitch: function(value) {}
+    onSwitch: function() {}
 });
 export var Tabbar = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, defaultValue = _$_object_spread.defaultValue, value = _$_object_spread.value, fixed = _$_object_spread.fixed, activeColor = _$_object_spread.activeColor, inactiveColor = _$_object_spread.inactiveColor, safeArea = _$_object_spread.safeArea, className = _$_object_spread.className, style = _$_object_spread.style, onSwitch = _$_object_spread.onSwitch;
+    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, defaultValue = _$_object_spread.defaultValue, value = _$_object_spread.value, fixed = _$_object_spread.fixed, activeColor = _$_object_spread.activeColor, inactiveColor = _$_object_spread.inactiveColor, direction = _$_object_spread.direction, safeArea = _$_object_spread.safeArea, className = _$_object_spread.className, style = _$_object_spread.style, onSwitch = _$_object_spread.onSwitch;
     var classPrefix = 'nut-tabbar';
     var _usePropsValue = _sliced_to_array(usePropsValue({
         value: value,
@@ -26,11 +28,26 @@ export var Tabbar = function(props) {
         finalValue: 0,
         onChange: onSwitch
     }), 2), selectIndex = _usePropsValue[0], setSelectIndex = _usePropsValue[1];
+    var sizeCls = useMemo(function() {
+        var size = React.Children.count(children);
+        var _obj;
+        return size > 3 ? '' : classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-wrap-3"), size === 3), _define_property(_obj, "".concat(classPrefix, "-wrap-2"), size === 2), _define_property(_obj, "".concat(classPrefix, "-wrap-").concat(direction), size === 2 && direction !== 'vertical'), _obj));
+    }, [
+        children,
+        direction
+    ]);
+    var itemDirection = useMemo(function() {
+        var size = React.Children.count(children);
+        return size === 2 && direction !== 'vertical' && direction;
+    }, [
+        direction,
+        children
+    ]);
     return /*#__PURE__*/ React.createElement(View, {
         className: classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-fixed"), fixed), className),
         style: style
     }, /*#__PURE__*/ React.createElement(View, {
-        className: "".concat(classPrefix, "-wrap")
+        className: "".concat(classPrefix, "-wrap ").concat(sizeCls)
     }, /*#__PURE__*/ React.createElement(TabbarContext.Provider, {
         value: {
             selectIndex: selectIndex,
@@ -39,12 +56,12 @@ export var Tabbar = function(props) {
             handleClick: setSelectIndex
         }
     }, React.Children.map(children, function(child, index) {
-        if (!/*#__PURE__*/ React.isValidElement(child)) return null;
-        return /*#__PURE__*/ React.cloneElement(child, _object_spread_props(_object_spread({}, child.props), {
-            index: index
-        }));
-    }))), (fixed || safeArea) && /*#__PURE__*/ React.createElement(View, {
-        className: "".concat(classPrefix, "-safe-area")
+        return /*#__PURE__*/ React.isValidElement(child) ? /*#__PURE__*/ React.cloneElement(child, _object_spread_props(_object_spread({}, child.props), {
+            index: index,
+            direction: itemDirection
+        })) : null;
+    }))), (fixed || safeArea) && /*#__PURE__*/ React.createElement(SafeArea, {
+        position: "bottom"
     }));
 };
 Tabbar.displayName = 'NutTabbar';

package/dist/es/packages/tabbaritem/style/style.css

@@ -52,6 +52,9 @@
   background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
   z-index: 1;
 }
+.nut-badge-disabled {
+  background: var(--nutui-badge-background-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
 .nut-badge-number {
   font-family: "JD";
 }
@@ -77,14 +80,14 @@
   height: var(--nutui-badge-dot-width, 6px);
 }
 .nut-badge-dot-small {
-  min-width: var(--nutui-badge-dot-width, 4px);
-  width: var(--nutui-badge-dot-width, 4px);
-  height: var(--nutui-badge-dot-width, 4px);
+  min-width: var(--nutui-badge-dot-small-width, 4px);
+  width: var(--nutui-badge-dot-small-width, 4px);
+  height: var(--nutui-badge-dot-small-width, 4px);
 }
 .nut-badge-dot-large {
-  min-width: var(--nutui-badge-dot-width, 8px);
-  width: var(--nutui-badge-dot-width, 8px);
-  height: var(--nutui-badge-dot-width, 8px);
+  min-width: var(--nutui-badge-dot-large-width, 8px);
+  width: var(--nutui-badge-dot-large-width, 8px);
+  height: var(--nutui-badge-dot-large-width, 8px);
 }
 .nut-badge-outline {
   background: #ffffff;
@@ -97,25 +100,16 @@
 .nut-tabbar-item {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   flex: 1;
-  text-align: center;
-  text-decoration: none;
+  padding: 6px 0 2px;
   color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
   height: 100%;
 }
-.nut-tabbar-item-icon-box {
-  padding: 0px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-}
-.nut-tabbar-item-icon-box .nut-icon {
-  width: 22px;
-  height: 22px;
-  font-size: 22px;
+.nut-tabbar-item .nut-icon {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
   /* #ifdef harmony*/
   color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
   /* #endif*/
@@ -123,23 +117,32 @@
   color: inherit;
   /* #endif*/
 }
-.nut-tabbar-item-icon-box-nav {
+.nut-tabbar-item-text {
   display: block;
   color: var(--nutui-color-text, #505259);
-  font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xs, 11px));
-  line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xs, 11px));
-  margin-top: var(--nutui-tabbar-text-margin-top, 3px);
+  font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10px));
+  line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10px));
+  margin-top: var(--nutui-tabbar-text-margin-top, 4px);
+}
+.nut-tabbar-item .nut-image-default {
+  width: 38px;
+  height: 38px;
+  border-radius: 38px;
+}
+.nut-tabbar-item-large {
+  justify-content: center;
+  padding: 0;
 }
-.nut-tabbar-item-icon-box-large {
+.nut-tabbar-item-large .nut-tabbar-item-text {
   font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 16px));
   margin-top: 0;
-  line-height: var(--nutui-tabbar-text-line-height, 20px);
+  line-height: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 16px));
   font-weight: var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400));
 }
 .nut-tabbar-item-active {
   color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
 }
-.nut-tabbar-item-active .nut-tabbar-item-icon-box,
+.nut-tabbar-item-active .nut-tabbar-item-text,
 .nut-tabbar-item-active .nut-icon {
   /* #ifdef harmony*/
   color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));

package/dist/es/packages/tabbaritem/style/style.harmony.css

@@ -5,25 +5,16 @@
 .nut-tabbar-item {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   flex: 1;
-  text-align: center;
-  text-decoration: none;
+  padding: 6px 0 2px;
   color: #1a1a1a;
   height: 100%;
 }
-.nut-tabbar-item-icon-box {
-  padding: 0px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-}
-.nut-tabbar-item-icon-box .nut-icon {
-  width: 22px;
-  height: 22px;
-  font-size: 22px;
+.nut-tabbar-item .nut-icon {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
   /* #ifdef harmony*/
   color: #1a1a1a;
   /* #endif*/
@@ -31,23 +22,32 @@
   color: inherit;
   /* #endif*/
 }
-.nut-tabbar-item-icon-box-nav {
+.nut-tabbar-item-text {
   display: block;
   color: #505259;
-  font-size: 11px;
-  line-height: 11px;
-  margin-top: 3px;
+  font-size: 10px;
+  line-height: 10px;
+  margin-top: 4px;
+}
+.nut-tabbar-item .nut-image-default {
+  width: 38px;
+  height: 38px;
+  border-radius: 38px;
+}
+.nut-tabbar-item-large {
+  justify-content: center;
+  padding: 0;
 }
-.nut-tabbar-item-icon-box-large {
+.nut-tabbar-item-large .nut-tabbar-item-text {
   font-size: 16px;
   margin-top: 0;
-  line-height: 20px;
+  line-height: 16px;
   font-weight: 400;
 }
 .nut-tabbar-item-active {
   color: #ff0f23;
 }
-.nut-tabbar-item-active .nut-tabbar-item-icon-box {
+.nut-tabbar-item-active .nut-tabbar-item-text {
   /* #ifdef harmony*/
   color: #ff0f23;
   /* #endif*/

package/dist/es/packages/tabbaritem/style/tabbaritem.scss

@@ -1,45 +1,48 @@
 .nut-tabbar-item {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   flex: 1;
-  text-align: center;
-  text-decoration: none;
+  padding: 6px 0 2px;
   color: $tabbar-inactive-color;
   height: 100%;
 
-  &-icon-box {
-    padding: 0px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
+  .nut-icon {
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+    /* #ifdef harmony*/
+    color: $tabbar-inactive-color;
+    /* #endif*/
+    /* #ifndef harmony*/
+    color: inherit;
+    /* #endif*/
+  }
 
-    .nut-icon {
-      width: 22px;
-      height: 22px;
-      font-size: 22px;
-      /* #ifdef harmony*/
-      color: $tabbar-inactive-color;
-      /* #endif*/
-      /* #ifndef harmony*/
-      color: inherit;
-      /* #endif*/
-    }
+  &-text {
+    display: block;
+    color: $color-text;
+    font-size: $tabbar-text-font-size;
+    line-height: $tabbar-text-font-size;
+    margin-top: $tabbar-text-margin-top;
+  }
 
-    &-nav {
-      display: block;
-      color: $color-text;
-      font-size: $tabbar-text-font-size;
-      line-height: $tabbar-text-font-size;
-      margin-top: $tabbar-text-margin-top;
+  .nut-image {
+    &-default {
+      width: 38px;
+      height: 38px;
+      border-radius: 38px;
     }
+  }
+
+  &-large {
+    justify-content: center;
+    padding: 0;
 
-    &-large {
+    .nut-tabbar-item-text {
       font-size: $tabbar-text-large-font-size;
       margin-top: 0;
-      line-height: $tabbar-text-line-height;
+      line-height: $tabbar-text-large-font-size;
       font-weight: $tabbar-text-large-font-weight;
     }
   }
@@ -47,7 +50,7 @@
   &-active {
     color: $tabbar-active-color;
 
-    .nut-tabbar-item-icon-box,
+    .nut-tabbar-item-text,
     .nut-icon {
       /* #ifdef harmony*/
       color: $tabbar-active-color;

package/dist/es/packages/tabbaritem/tabbaritem.js

@@ -8,7 +8,6 @@ import { View } from "@tarojs/components";
 import { ComponentDefaults } from "../../utils/typings";
 import Badge from "../badge/index";
 import TabbarContext from "../tabbar/context";
-import addColorForHarmony from "../../utils/add-color-for-harmony";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     title: '',
     icon: null,
@@ -16,12 +15,13 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     dot: false,
     max: 99,
     top: '0',
-    right: '0'
+    right: '0',
+    direction: 'vertical'
 });
 export var TabbarItem = function(props) {
     var ctx = useContext(TabbarContext);
     var _ref = _object_spread({}, defaultProps, props), className = _ref.className, style = _ref.style, title = _ref.title, icon = _ref.icon, value = _ref.value, dot = _ref.dot, max = _ref.max, top = _ref.top, right = _ref.right, // @ts-ignore
-    index = _ref.index, rest = _object_without_properties(_ref, [
+    index = _ref.index, direction = _ref.direction, onActiveClick = _ref.onActiveClick, rest = _object_without_properties(_ref, [
         "className",
         "style",
         "title",
@@ -31,15 +31,19 @@ export var TabbarItem = function(props) {
         "max",
         "top",
         "right",
-        "index"
+        "index",
+        "direction",
+        "onActiveClick"
     ]);
     var active = index === (ctx === null || ctx === void 0 ? void 0 : ctx.selectIndex);
     var classPrefix = 'nut-tabbar-item';
-    var tabbarItemClass = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-active"), active), className);
-    var boxPrefix = "".concat(classPrefix, "-icon-box");
-    var titleClass = classNames(boxPrefix, "".concat(boxPrefix, "-nav"), _define_property({}, "".concat(boxPrefix, "-large"), !icon));
+    var _obj;
+    var tabbarItemClass = classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-active"), active), _define_property(_obj, "".concat(classPrefix, "-large"), !icon || !title), _obj), className);
+    var renderNodeWithActive = function(node) {
+        return node && typeof node === 'function' ? node(active) : node;
+    };
     var badgeProps = {
-        value: value,
+        value: renderNodeWithActive(value),
         dot: dot,
         max: max,
         top: top,
@@ -48,11 +52,33 @@ export var TabbarItem = function(props) {
     };
     var renderTitleText = function() {
         return title && /*#__PURE__*/ React.createElement(View, {
-            className: titleClass,
+            className: "".concat(classPrefix, "-text"),
             style: {
                 color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
             }
-        }, title);
+        }, renderNodeWithActive(title));
+    };
+    var renderTitle = function() {
+        return /*#__PURE__*/ React.createElement(Badge, _object_spread({
+            size: "normal"
+        }, badgeProps), renderTitleText());
+    };
+    var renderIcon = function() {
+        var distIcon = renderNodeWithActive(icon);
+        // 鸿蒙差异处理，需要手动给icon一个color
+        return /*#__PURE__*/ React.isValidElement(distIcon) ? /*#__PURE__*/ React.cloneElement(distIcon, _object_spread_props(_object_spread({}, distIcon.props), {
+            color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
+        })) : null;
+    };
+    var renderIconAndTitle = function() {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Badge, _object_spread_props(_object_spread({
+            size: "normal"
+        }, badgeProps), {
+            top: 3
+        }), renderIcon()), renderTitleText());
+    };
+    var renderDualItem = function() {
+        return dot ? null : /*#__PURE__*/ React.createElement(React.Fragment, null, renderIcon(), renderTitleText(), /*#__PURE__*/ React.createElement(Badge, badgeProps));
     };
     return /*#__PURE__*/ React.createElement(View, _object_spread({
         className: tabbarItemClass,
@@ -60,9 +86,7 @@ export var TabbarItem = function(props) {
             color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
         }, style),
         onClick: function() {
-            return ctx === null || ctx === void 0 ? void 0 : ctx.handleClick(index);
+            return active ? onActiveClick === null || onActiveClick === void 0 ? void 0 : onActiveClick() : ctx === null || ctx === void 0 ? void 0 : ctx.handleClick(index);
         }
-    }, rest), icon ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Badge, badgeProps, /*#__PURE__*/ React.createElement(View, {
-        className: boxPrefix
-    }, addColorForHarmony(icon, active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor))), renderTitleText()) : /*#__PURE__*/ React.createElement(Badge, badgeProps, renderTitleText()));
+    }, rest), direction === 'horizontal' && !dot ? renderDualItem() : /*#__PURE__*/ React.createElement(React.Fragment, null, icon && renderIconAndTitle(), !icon && renderTitle()));
 };

package/dist/es/types/spec/badge/base.d.ts

@@ -32,4 +32,8 @@ export interface BaseBadge extends BaseProps {
     * dot 尺寸，当 dot 等于 true 时生效
     */
     size: BadgeDotSize
+    /**
+    * 是否禁用
+    */
+    disabled: boolean
 }

package/dist/es/types/spec/indicator/base.d.ts

@@ -1,6 +1,6 @@
 import { BaseProps } from '../../base/props';
 import { UIType } from '../../base/atoms';
-export type IndicatorType = 'anchor' | 'slide';
+export type IndicatorType = 'anchor' | 'slide' | 'dualScreen';
 export type IndicatorColor = Extract<UIType, 'primary' | 'default'>;
 export interface BaseIndicator extends BaseProps {
     /**

package/dist/es/types/spec/notify/base.d.ts

@@ -1,18 +1,35 @@
+import { PositionY } from "../../base/atoms";
 import { BaseProps } from '../../base/props';
 export interface BaseNotify extends BaseProps {
     id: string;
     /**
-    * 展示时长(ms)，值为 0 时，notify 不会消失
+    * 距离顶部/底部距离
     */
-    duration: number
+    distance: number
+    /**
+    * 顶部导航高度
+    */
+    navHeight: number
+    /**
+    * 是否启用关闭模式
+    */
+    closeable: boolean
     /**
-    * 提示的信息类型（primary，success ，danger，warning）
+    * 左边的 icon
     */
-    type: string
+    leftIcon: React.ReactNode
+    /**
+    * 右边的 icon，在 closeable 模式下默认为 <Close />
+    */
+    rightIcon: React.ReactNode
     /**
     * 自定义位置 (top, bottom)
     */
-    position: string
+    position: PositionY
+    /**
+    * 展示时长(ms)，值为 0 时，notify 不会消失
+    */
+    duration: number
     /**
     * 点击事件回调
     */

package/dist/es/types/spec/searchbar/taro.d.ts

@@ -1,10 +1,13 @@
-import type { ChangeEvent, FocusEvent, MouseEvent } from 'react';
-import { ITouchEvent } from '@tarojs/components';
+import { BaseEventOrig, ITouchEvent, InputProps } from '@tarojs/components';
 import { BaseSearchBar } from './base';
+type inputEventDetail = InputProps.inputEventDetail;
+type inputForceEventDetail = InputProps.inputForceEventDetail;
+type inputValueEventDetail = InputProps.inputValueEventDetail;
 export interface TaroSearchBarProps extends Omit<BaseSearchBar, 'onChange' | 'onFocus' | 'onBlur' | 'onClear' | 'onInputClick'> {
-    onChange?: (value: string, event?: ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: (value: string, event: FocusEvent<HTMLInputElement>) => void;
-    onBlur?: (value: string, event: FocusEvent<HTMLInputElement>) => void;
-    onClear?: (event: React.MouseEvent<Element, MouseEvent> | ITouchEvent) => void;
-    onInputClick?: (event: MouseEvent<HTMLInputElement>) => void;
+    onChange?: (value: string, event?: BaseEventOrig<inputEventDetail>) => void;
+    onFocus?: (value: string, event: BaseEventOrig<inputForceEventDetail>) => void;
+    onBlur?: (value: string, event: BaseEventOrig<inputValueEventDetail>) => void;
+    onClear?: (event: ITouchEvent) => void;
+    onInputClick?: (event: ITouchEvent) => void;
 }
+export {};