npm - @nutui/nutui-react - Versions diffs - 3.0.18 → 3.0.19 - Mend

@nutui/nutui-react 3.0.18 → 3.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (676) hide show

package/dist/cjs/packages/tag/style-jmapp/style.css CHANGED Viewed

@@ -30,7 +30,7 @@
   background: var(--nutui-tag-background-color, var(--nutui-color-title));
 }
 .nut-tag-primary {
-  background: #fa2c19;
+  background: var(--nutui-tag-primary-background-color, var(--nutui-color-primary));
 }
 .nut-tag-info {
   background: var(--nutui-tag-info-background-color, var(--nutui-color-info));
@@ -54,7 +54,12 @@
   cursor: pointer;
 }
 .nut-tag-custom-icon {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
   align-items: center;
   justify-content: center;
   font-size: var(--nutui-tag-font-size, var(--nutui-font-text-xs));

package/dist/cjs/packages/tag/style-jmapp/tag.scss CHANGED Viewed

@@ -30,7 +30,7 @@
   }
   &-primary {
-    background: #fa2c19;
+    background: $tag-primary-background-color;
   }
   &-info {
@@ -62,7 +62,12 @@
   }
   &-custom-icon {
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
     align-items: center;
     justify-content: center;
     font-size: $tag-font-size;

package/dist/cjs/packages/tag/style-jrkf/style.css CHANGED Viewed

@@ -30,7 +30,7 @@
   background: var(--nutui-tag-background-color, var(--nutui-color-title));
 }
 .nut-tag-primary {
-  background: #fa2c19;
+  background: var(--nutui-tag-primary-background-color, var(--nutui-color-primary, #ff6666));
 }
 .nut-tag-info {
   background: var(--nutui-tag-info-background-color, var(--nutui-color-info));
@@ -54,7 +54,12 @@
   cursor: pointer;
 }
 .nut-tag-custom-icon {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
   align-items: center;
   justify-content: center;
   font-size: var(--nutui-tag-font-size, var(--nutui-font-text-xs));

package/dist/cjs/packages/tag/style-jrkf/tag.scss CHANGED Viewed

@@ -30,7 +30,7 @@
   }
   &-primary {
-    background: #fa2c19;
+    background: $tag-primary-background-color;
   }
   &-info {
@@ -62,7 +62,12 @@
   }
   &-custom-icon {
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
     align-items: center;
     justify-content: center;
     font-size: $tag-font-size;

package/dist/cjs/packages/textarea/textarea.js CHANGED Viewed

@@ -33,7 +33,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
 });
 var TextArea = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
     var locale = (0, _configprovider.useConfig)().locale;
-    var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, value = _ref.value, defaultValue = _ref.defaultValue, showCount = _ref.showCount, maxLength = _ref.maxLength, rows = _ref.rows, placeholder = _ref.placeholder, readOnly = _ref.readOnly, disabled = _ref.disabled, autoSize = _ref.autoSize, style = _ref.style, plain = _ref.plain, status = _ref.status, onChange = _ref.onChange, onBlur = _ref.onBlur, onFocus = _ref.onFocus, rest = (0, _object_without_properties._)(_ref, [
+    var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, value = _ref.value, defaultValue = _ref.defaultValue, showCount = _ref.showCount, maxLength = _ref.maxLength, rows = _ref.rows, placeholder = _ref.placeholder, readOnly = _ref.readOnly, disabled = _ref.disabled, autoSize = _ref.autoSize, style = _ref.style, plain = _ref.plain, status = _ref.status, viewId = _ref.viewId, onChange = _ref.onChange, onBlur = _ref.onBlur, onFocus = _ref.onFocus, rest = (0, _object_without_properties._)(_ref, [
         "className",
         "value",
         "defaultValue",
@@ -47,6 +47,7 @@ var TextArea = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
         "style",
         "plain",
         "status",
+        "viewId",
         "onChange",
         "onBlur",
         "onFocus"
@@ -120,6 +121,7 @@ var TextArea = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
     });
     var _obj;
     return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("div", {
+        id: viewId,
         className: (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-disabled"), disabled), (0, _define_property._)(_obj, "".concat(classPrefix, "-readonly"), readOnly), (0, _define_property._)(_obj, "".concat(classPrefix, "-rtl"), rtl), (0, _define_property._)(_obj, "".concat(classPrefix, "-plain"), plain), (0, _define_property._)(_obj, "".concat(classPrefix, "-container"), !plain), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(status), status), _obj), className)
     }, /*#__PURE__*/ _react.default.createElement("textarea", (0, _object_spread_props._)((0, _object_spread._)({}, rest), {
         ref: textareaRef,

package/dist/cjs/packages/timeselect/style/style.css CHANGED Viewed

@@ -16,7 +16,9 @@
   width: var(--nutui-timeselect-date-width, 140px);
   min-width: var(--nutui-timeselect-date-width, 140px);
   height: 100%;
+  /* #ifndef dynamic*/
   overflow: auto;
+  /* #endif */
   background: var(--nutui-color-background-sunken, #f7f8fc);
 }

package/dist/cjs/packages/timeselect/style/timeselect.scss CHANGED Viewed

@@ -13,7 +13,9 @@
     width: $timeselect-date-width;
     min-width: $timeselect-date-width;
     height: 100%;
+    /* #ifndef dynamic*/
     overflow: auto;
+    /* #endif */
     background: $color-background-sunken;
   }
 }

package/dist/cjs/packages/timeselect/style-jmapp/style.css CHANGED Viewed

@@ -16,7 +16,9 @@
   width: var(--nutui-timeselect-date-width, 140px);
   min-width: var(--nutui-timeselect-date-width, 140px);
   height: 100%;
+  /* #ifndef dynamic*/
   overflow: auto;
+  /* #endif */
   background: var(--nutui-gray-2, #f8f8f8);
 }

package/dist/cjs/packages/timeselect/style-jmapp/timeselect.scss CHANGED Viewed

@@ -13,7 +13,9 @@
     width: $timeselect-date-width;
     min-width: $timeselect-date-width;
     height: 100%;
+    /* #ifndef dynamic*/
     overflow: auto;
+    /* #endif */
     background: $color-background-sunken;
   }
 }

package/dist/cjs/packages/timeselect/style-jrkf/style.css CHANGED Viewed

@@ -16,7 +16,9 @@
   width: var(--nutui-timeselect-date-width, 140px);
   min-width: var(--nutui-timeselect-date-width, 140px);
   height: 100%;
+  /* #ifndef dynamic*/
   overflow: auto;
+  /* #endif */
   background: var(--nutui-gray-2, #f0f0f0);
 }

package/dist/cjs/packages/timeselect/style-jrkf/timeselect.scss CHANGED Viewed

@@ -13,7 +13,9 @@
     width: $timeselect-date-width;
     min-width: $timeselect-date-width;
     height: 100%;
+    /* #ifndef dynamic*/
     overflow: auto;
+    /* #endif */
     background: $color-background-sunken;
   }
 }

package/dist/cjs/packages/toast/Notification.js CHANGED Viewed

@@ -143,7 +143,9 @@ var Notification = /*#__PURE__*/ function(_superClass) {
                     id: "toast-".concat(id)
                 }, /*#__PURE__*/ _react.createElement("div", {
                     className: (0, _classnames.default)("".concat(classPrefix, "-inner"), "".concat(classPrefix, "-").concat(position), contentClassName, "".concat(classPrefix, "-inner-").concat(size), "".concat(classPrefix, "-inner-").concat(wordBreak), (0, _define_property._)({}, "".concat(classPrefix, "-inner-descrption"), content)),
-                    style: (0, _object_spread._)({}, contentStyle)
+                    style: (0, _object_spread._)({}, contentStyle),
+                    role: "alert",
+                    "aria-label": (title !== null && title !== void 0 ? title : '') + (content !== null && content !== void 0 ? content : '')
                 }, this.renderIcon(), title && /*#__PURE__*/ _react.createElement("div", {
                     className: "".concat(classPrefix, "-title")
                 }, title), content && /*#__PURE__*/ _react.createElement("span", {

package/dist/cjs/packages/toast/style/style.css CHANGED Viewed

@@ -68,7 +68,7 @@
   font-size: var(--nutui-font-size-s, 12px);
 }
 .nut-toast-inner-large {
-  font-size: var(--nutui-font-size-l, 16px);
+  font-size: var(--nutui-font-size-l, 15px);
 }
 .nut-toast-center {
   top: var(--nutui-toast-inner-top, 48%);
@@ -82,14 +82,23 @@
 .nut-toast-text {
   color: #ffffff;
   text-align: var(--nutui-toast-inner-text-align, center);
+  /* #ifdef harmony dynamic*/
+  line-height: normal;
+  /* #endif */
   line-height: 20px;
+  height: auto;
 }
 .nut-toast-title {
   color: #ffffff;
   font-size: var(--nutui-toast-title-font-size, 16px);
   font-weight: 600;
   text-align: var(--nutui-toast-inner-text-align, center);
+  /* #ifdef harmony dynamic*/
+  line-height: normal;
+  /* #endif */
+  /* #ifndef harmony dynamic*/
   line-height: 22px;
+  /* #endif */
 }
 .nut-toast .nut-icon {
   width: 24px;

package/dist/cjs/packages/toast/style/toast.scss CHANGED Viewed

@@ -93,7 +93,11 @@
   &-text {
     color: #ffffff;
     text-align: $toast-inner-text-align;
+    /* #ifdef harmony dynamic*/
+    line-height: normal;
+    /* #endif */
     line-height: 20px;
+    height: auto;
   }
   &-title {
@@ -101,7 +105,12 @@
     font-size: $toast-title-font-size;
     font-weight: 600;
     text-align: $toast-inner-text-align;
+    /* #ifdef harmony dynamic*/
+    line-height: normal;
+    /* #endif */
+    /* #ifndef harmony dynamic*/
     line-height: 22px;
+    /* #endif */
   }
   .nut-icon {

package/dist/cjs/packages/toast/style-jmapp/style.css CHANGED Viewed

@@ -82,14 +82,23 @@
 .nut-toast-text {
   color: #ffffff;
   text-align: var(--nutui-toast-inner-text-align, center);
+  /* #ifdef harmony dynamic*/
+  line-height: normal;
+  /* #endif */
   line-height: 20px;
+  height: auto;
 }
 .nut-toast-title {
   color: #ffffff;
   font-size: var(--nutui-toast-title-font-size, 16px);
   font-weight: 600;
   text-align: var(--nutui-toast-inner-text-align, center);
+  /* #ifdef harmony dynamic*/
+  line-height: normal;
+  /* #endif */
+  /* #ifndef harmony dynamic*/
   line-height: 22px;
+  /* #endif */
 }
 .nut-toast .nut-icon {
   width: 24px;

package/dist/cjs/packages/toast/style-jmapp/toast.scss CHANGED Viewed

@@ -93,7 +93,11 @@
   &-text {
     color: #ffffff;
     text-align: $toast-inner-text-align;
+    /* #ifdef harmony dynamic*/
+    line-height: normal;
+    /* #endif */
     line-height: 20px;
+    height: auto;
   }
   &-title {
@@ -101,7 +105,12 @@
     font-size: $toast-title-font-size;
     font-weight: 600;
     text-align: $toast-inner-text-align;
+    /* #ifdef harmony dynamic*/
+    line-height: normal;
+    /* #endif */
+    /* #ifndef harmony dynamic*/
     line-height: 22px;
+    /* #endif */
   }
   .nut-icon {

package/dist/cjs/packages/toast/style-jrkf/style.css CHANGED Viewed

@@ -82,14 +82,23 @@
 .nut-toast-text {
   color: #ffffff;
   text-align: var(--nutui-toast-inner-text-align, center);
+  /* #ifdef harmony dynamic*/
+  line-height: normal;
+  /* #endif */
   line-height: 20px;
+  height: auto;
 }
 .nut-toast-title {
   color: #ffffff;
   font-size: var(--nutui-toast-title-font-size, 16px);
   font-weight: 600;
   text-align: var(--nutui-toast-inner-text-align, center);
+  /* #ifdef harmony dynamic*/
+  line-height: normal;
+  /* #endif */
+  /* #ifndef harmony dynamic*/
   line-height: 22px;
+  /* #endif */
 }
 .nut-toast .nut-icon {
   width: 24px;

package/dist/cjs/packages/toast/style-jrkf/toast.scss CHANGED Viewed

@@ -93,7 +93,11 @@
   &-text {
     color: #ffffff;
     text-align: $toast-inner-text-align;
+    /* #ifdef harmony dynamic*/
+    line-height: normal;
+    /* #endif */
     line-height: 20px;
+    height: auto;
   }
   &-title {
@@ -101,7 +105,12 @@
     font-size: $toast-title-font-size;
     font-weight: 600;
     text-align: $toast-inner-text-align;
+    /* #ifdef harmony dynamic*/
+    line-height: normal;
+    /* #endif */
+    /* #ifndef harmony dynamic*/
     line-height: 22px;
+    /* #endif */
   }
   .nut-icon {

package/dist/cjs/packages/tour/style/style.css CHANGED Viewed

@@ -18,7 +18,9 @@
   display: block;
   padding: var(--nutui-tour-content-padding, 10px 12px);
   min-width: var(--nutui-tour-content-min-width, 200px);
+  /* #ifndef dynamic*/
   box-sizing: content-box;
+  /* #endif */
 }
 .nut-tour-content-top {
   display: block;

package/dist/cjs/packages/tour/style/tour.scss CHANGED Viewed

@@ -18,7 +18,9 @@
     display: block;
     padding: $tour-content-padding;
     min-width: $tour-content-min-width;
+    /* #ifndef dynamic*/
     box-sizing: content-box;
+    /* #endif */
     &-top {
       display: block;

package/dist/cjs/packages/tour/style-jmapp/style.css CHANGED Viewed

@@ -18,7 +18,9 @@
   display: block;
   padding: var(--nutui-tour-content-padding, 10px 12px);
   min-width: var(--nutui-tour-content-min-width, 200px);
+  /* #ifndef dynamic*/
   box-sizing: content-box;
+  /* #endif */
 }
 .nut-tour-content-top {
   display: block;

package/dist/cjs/packages/tour/style-jmapp/tour.scss CHANGED Viewed

@@ -18,7 +18,9 @@
     display: block;
     padding: $tour-content-padding;
     min-width: $tour-content-min-width;
+    /* #ifndef dynamic*/
     box-sizing: content-box;
+    /* #endif */
     &-top {
       display: block;

package/dist/cjs/packages/tour/style-jrkf/style.css CHANGED Viewed

@@ -18,7 +18,9 @@
   display: block;
   padding: var(--nutui-tour-content-padding, 10px 12px);
   min-width: var(--nutui-tour-content-min-width, 200px);
+  /* #ifndef dynamic*/
   box-sizing: content-box;
+  /* #endif */
 }
 .nut-tour-content-top {
   display: block;

package/dist/cjs/packages/tour/style-jrkf/tour.scss CHANGED Viewed

@@ -18,7 +18,9 @@
     display: block;
     padding: $tour-content-padding;
     min-width: $tour-content-min-width;
+    /* #ifndef dynamic*/
     box-sizing: content-box;
+    /* #endif */
     &-top {
       display: block;

package/dist/cjs/packages/uploader/style/style.css CHANGED Viewed

@@ -164,7 +164,9 @@
   justify-content: center;
   align-items: center;
   height: 100%;
+  /* #ifndef dynamic*/
   position: initial;
+  /* #endif */
   border-radius: var(--nutui-uploader-image-border-radius, 4px);
 }
 .nut-uploader-preview-img-file {

package/dist/cjs/packages/uploader/style/uploader.scss CHANGED Viewed

@@ -179,7 +179,9 @@
         justify-content: center;
         align-items: center;
         height: 100%;
+        /* #ifndef dynamic*/
         position: initial;
+        /* #endif */
         border-radius: $uploader-image-border-radius;
       }

package/dist/cjs/packages/uploader/style-jmapp/style.css CHANGED Viewed

@@ -164,7 +164,9 @@
   justify-content: center;
   align-items: center;
   height: 100%;
+  /* #ifndef dynamic*/
   position: initial;
+  /* #endif */
   border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
 }
 .nut-uploader-preview-img-file {

package/dist/cjs/packages/uploader/style-jmapp/uploader.scss CHANGED Viewed

@@ -179,7 +179,9 @@
         justify-content: center;
         align-items: center;
         height: 100%;
+        /* #ifndef dynamic*/
         position: initial;
+        /* #endif */
         border-radius: $uploader-image-border-radius;
       }

package/dist/cjs/packages/uploader/style-jrkf/style.css CHANGED Viewed

@@ -164,7 +164,9 @@
   justify-content: center;
   align-items: center;
   height: 100%;
+  /* #ifndef dynamic*/
   position: initial;
+  /* #endif */
   border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
 }
 .nut-uploader-preview-img-file {

package/dist/cjs/packages/uploader/style-jrkf/uploader.scss CHANGED Viewed

@@ -179,7 +179,9 @@
         justify-content: center;
         align-items: center;
         height: 100%;
+        /* #ifndef dynamic*/
         position: initial;
+        /* #endif */
         border-radius: $uploader-image-border-radius;
       }

package/dist/cjs/packages/uploader/uploader.js CHANGED Viewed

@@ -222,7 +222,6 @@ var InternalUploader = function InternalUploader(props, ref) {
                     case 3:
                         _files = filterFiles(_files);
                         tasks = _files.map(function(file) {
-                            var _file_type;
                             var info = {
                                 uid: idCountRef.current++,
                                 status: autoUpload ? 'uploading' : 'ready',
@@ -231,7 +230,7 @@ var InternalUploader = function InternalUploader(props, ref) {
                                 name: file.name,
                                 type: file.type
                             };
-                            if (preview && ((_file_type = file.type) === null || _file_type === void 0 ? void 0 : _file_type.includes('image'))) {
+                            if (preview) {
                                 var reader = new FileReader();
                                 reader.onload = function(event) {
                                     fileListRef.current = (0, _to_consumable_array._)(fileListRef.current).concat([

package/dist/cjs/packages/virtuallist/style/style.css CHANGED Viewed

@@ -35,7 +35,9 @@
 }
 .nut-virtualList-box {
+  /* #ifndef dynamic*/
   overflow: auto;
+  /* #endif */
 }
 .nut-virtuallist {

package/dist/cjs/packages/virtuallist/style/virtuallist.scss CHANGED Viewed

@@ -35,7 +35,9 @@
 }
 .nut-virtualList-box {
+  /* #ifndef dynamic*/
   overflow: auto;
+  /* #endif */
 }
 .nut-virtuallist {

package/dist/cjs/packages/virtuallist/style-jmapp/style.css CHANGED Viewed

@@ -35,7 +35,9 @@
 }
 .nut-virtualList-box {
+  /* #ifndef dynamic*/
   overflow: auto;
+  /* #endif */
 }
 .nut-virtuallist {

package/dist/cjs/packages/virtuallist/style-jmapp/virtuallist.scss CHANGED Viewed

@@ -35,7 +35,9 @@
 }
 .nut-virtualList-box {
+  /* #ifndef dynamic*/
   overflow: auto;
+  /* #endif */
 }
 .nut-virtuallist {

package/dist/cjs/packages/virtuallist/style-jrkf/style.css CHANGED Viewed

@@ -35,7 +35,9 @@
 }
 .nut-virtualList-box {
+  /* #ifndef dynamic*/
   overflow: auto;
+  /* #endif */
 }
 .nut-virtuallist {

package/dist/cjs/packages/virtuallist/style-jrkf/virtuallist.scss CHANGED Viewed

@@ -35,7 +35,9 @@
 }
 .nut-virtualList-box {
+  /* #ifndef dynamic*/
   overflow: auto;
+  /* #endif */
 }
 .nut-virtuallist {

package/dist/cjs/types/spec/avatar/taro.d.ts CHANGED Viewed

@@ -1,7 +1,13 @@
-import { ITouchEvent } from '@tarojs/components';
+import { ITouchEvent, ImageProps } from '@tarojs/components';
 import { BaseAvatar, BaseAvatarGroup } from './base';
 export interface TaroAvatarProps extends Omit<BaseAvatar, 'onClick'> {
     avatarIndex: number;
+    /** 图片裁剪、缩放的模式，同 Taro Image 的 mode 属性 */
+    mode: keyof ImageProps.Mode;
+    /**
+     * @deprecated 请使用 mode 属性代替
+     */
+    fit: BaseAvatar['fit'];
     onClick: (e: ITouchEvent) => void;
 }
 export interface TaroAvatarGroupProps extends BaseAvatarGroup {

package/dist/cjs/types/spec/dialog/base.d.ts CHANGED Viewed

@@ -29,6 +29,8 @@ export interface BaseDialog extends DialogWrapProps {
     content: ReactNode;
     confirmText: ReactNode;
     cancelText: ReactNode;
+    confirmBadge: ReactNode;
+    cancelBadge: ReactNode;
     hideConfirmButton: boolean;
     hideCancelButton: boolean;
     disableConfirmButton: boolean;

package/dist/cjs/types/spec/input/base.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { Align } from '../../base/atoms';
 import { BaseProps } from '../../base/props';
 export type InputFormatTrigger = 'onChange' | 'onBlur';
@@ -19,6 +19,7 @@ export interface BaseInput<INPUT_TYPE, CONFIRM_TYPE = InputConfirmType> extends
     autoFocus: boolean;
     confirmType: CONFIRM_TYPE;
     plain: boolean;
+    inputStyle?: CSSProperties;
     formatter?: (value: string) => string;
     onChange?: (value: string) => void;
     onBlur?: (value: string) => void;

package/dist/cjs/types/spec/popup/base.d.ts CHANGED Viewed

@@ -12,12 +12,19 @@ export interface BasePopup extends BaseProps, BaseOverlay {
     closeIcon: ReactNode;
     left?: ReactNode;
     title?: ReactNode;
+    top?: ReactNode;
     description?: ReactNode;
     destroyOnClose: boolean;
     overlay: boolean;
     round: boolean;
+    resizable: boolean;
+    minHeight: string;
     onOpen: () => void;
     onClose: () => void;
     onOverlayClick: (e: any) => boolean | void;
     onCloseIconClick: (e: any) => boolean | void;
+    onTouchMove: (height: number, e: any, direction: 'up' | 'down') => void;
+    onTouchStart: (height: number, e: any) => void;
+    onTouchEnd: (height: number, e: any) => void;
+    closeAriaLabel?: string;
 }

package/dist/cjs/types/spec/radio/base.d.ts CHANGED Viewed

@@ -19,6 +19,7 @@ export interface BaseRadio extends BaseProps {
     activeIcon: ReactNode;
     value: SimpleValue;
     onChange: (checked: boolean) => void;
+    ariaLabel?: string;
 }
 export interface BaseRadioGroup extends BaseProps {
     value?: SimpleValue;

package/dist/cjs/types/spec/searchbar/h5.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { ChangeEvent, FocusEvent, MouseEvent } from 'react';
+import type { ChangeEvent, FocusEvent, MouseEvent, InputHTMLAttributes } from 'react';
 import { BaseSearchBar } from './base';
 export interface WebSearchBarProps extends Omit<BaseSearchBar, 'onChange' | 'onFocus' | 'onBlur' | 'onClear' | 'onInputClick'> {
     onChange?: (value: string, event?: ChangeEvent<HTMLInputElement>) => void;
@@ -6,4 +6,5 @@ export interface WebSearchBarProps extends Omit<BaseSearchBar, 'onChange' | 'onF
     onBlur?: (value: string, event: FocusEvent<HTMLInputElement>) => void;
     onClear?: (event: MouseEvent<HTMLDivElement>) => void;
     onInputClick?: (event: MouseEvent<HTMLInputElement>) => void;
+    inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;
 }