@hi-ui/cascader 5.0.0-experimental.1 → 5.0.0-experimental.2

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @hi-ui/cascader
 
+## 5.0.0-experimental.2
+
+### Minor Changes
+
+- 59cef699f: feat: 组件语义化样式改造，增加 styles 和 classNames 属性 (5.0)
+
+### Patch Changes
+
+- eb17c4697: style: 修复 UI/样式问题 (5.0)
+- Updated dependencies [7f204c892]
+- Updated dependencies [eb17c4697]
+- Updated dependencies [eb17c4697]
+- Updated dependencies [c407744fe]
+- Updated dependencies [59cef699f]
+  - @hi-ui/icons@5.0.0-experimental.1
+  - @hi-ui/core@5.0.0-experimental.1
+  - @hi-ui/highlighter@5.0.0-experimental.1
+  - @hi-ui/input@5.0.0-experimental.2
+  - @hi-ui/picker@5.0.0-experimental.2
+  - @hi-ui/popper@5.0.0-experimental.1
+  - @hi-ui/virtual-list@5.0.0-experimental.1
+  - @hi-ui/use-merge-semantic@5.0.0-experimental.0
+  - @hi-ui/spinner@5.0.0-experimental.1
+
 ## 5.0.0-experimental.1
 
 ### Patch Changes

package/lib/cjs/Cascader.js

@@ -31,6 +31,7 @@ var arrayUtils = require('@hi-ui/array-utils');
 var index = require('./hooks/use-cache/lib/esm/index.js');
 var core = require('@hi-ui/core');
 var funcUtils = require('@hi-ui/func-utils');
+var useMergeSemantic = require('@hi-ui/use-merge-semantic');
 var CascaderMenuList = require('./CascaderMenuList.js');
 var Highlighter = require('@hi-ui/highlighter');
 function _interopDefaultCompat(e) {
@@ -96,11 +97,30 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     showIndicator = _props$showIndicator === void 0 ? true : _props$showIndicator,
     renderExtraHeader = props.renderExtraHeader,
     changeOnSelect = props.changeOnSelect,
-    rest = tslib.__rest(props, ["prefixCls", "className", "placeholder", "disabled", "clearable", "type", "fieldNames", "expandTrigger", "displayRender", "onSelect", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "keyword", "onSearch", "clearSearchOnClosed", "render", "overlayClassName", "data", "flattedSearchResult", "visible", "size", "prefix", "suffix", "onOpen", "onClose", "onClear", "renderExtraFooter", "dropdownColumnRender", "closeOnSelect", "customRender", "label", "virtual", "onItemClick", "showIndicator", "renderExtraHeader", "changeOnSelect"]);
+    classNamesProp = props.classNames,
+    stylesProp = props.styles,
+    rest = tslib.__rest(props, ["prefixCls", "className", "placeholder", "disabled", "clearable", "type", "fieldNames", "expandTrigger", "displayRender", "onSelect", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "keyword", "onSearch", "clearSearchOnClosed", "render", "overlayClassName", "data", "flattedSearchResult", "visible", "size", "prefix", "suffix", "onOpen", "onClose", "onClear", "renderExtraFooter", "dropdownColumnRender", "closeOnSelect", "customRender", "label", "virtual", "onItemClick", "showIndicator", "renderExtraHeader", "changeOnSelect", "classNames", "styles"]);
   var _useGlobalContext = core.useGlobalContext(),
-    globalSize = _useGlobalContext.size;
+    globalSize = _useGlobalContext.size,
+    cascaderConfig = _useGlobalContext.cascader;
   var size = (_a = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _a !== void 0 ? _a : 'md';
   var i18n = core.useLocaleContext();
+  var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
+      classNamesList: [cascaderConfig === null || cascaderConfig === void 0 ? void 0 : cascaderConfig.classNames, classNamesProp],
+      stylesList: [cascaderConfig === null || cascaderConfig === void 0 ? void 0 : cascaderConfig.styles, stylesProp],
+      info: {
+        props: Object.assign(Object.assign({}, rest), {
+          disabled: disabled,
+          searchable: searchableProp,
+          visible: visible,
+          size: size,
+          appearance: appearance,
+          expandTrigger: expandTrigger
+        })
+      }
+    }),
+    classNames = _useMergeSemantic.classNames,
+    styles = _useMergeSemantic.styles;
   var pickerInnerRef = React.useRef(null);
   var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('cascader.placeholder') : placeholderProp;
   var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
@@ -254,6 +274,19 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       clear();
     }
   }, [value, clear]);
+  var pickerSemanticKeys = ['root', 'container', 'panel', 'header', 'search', 'body', 'footer', 'loading', 'empty', 'creator'];
+  var pickerClassNames = pickerSemanticKeys.reduce(function (acc, key) {
+    if ((classNames === null || classNames === void 0 ? void 0 : classNames[key]) !== undefined) {
+      acc[key] = classNames[key];
+    }
+    return acc;
+  }, {});
+  var pickerStyles = pickerSemanticKeys.reduce(function (acc, key) {
+    if (styles === null || styles === void 0 ? void 0 : styles[key]) {
+      acc[key] = styles[key];
+    }
+    return acc;
+  }, {});
   return /*#__PURE__*/React__default["default"].createElement(context.CascaderProvider, {
     value: Object.assign(Object.assign({}, context$1), {
       expandTrigger: expandTrigger,
@@ -261,13 +294,17 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       menuList: showData,
       dropdownColumnRender: dropdownColumnRender,
       virtual: virtual,
-      onItemClickProp: onItemClickProp
+      onItemClickProp: onItemClickProp,
+      classNames: classNames,
+      styles: styles
     })
   }, /*#__PURE__*/React__default["default"].createElement(picker.Picker, Object.assign({
     ref: ref,
     innerRef: pickerInnerRef,
     className: cls,
-    overlayClassName: classname.cx(prefixCls + "__popper", overlayClassName)
+    overlayClassName: classname.cx(prefixCls + "__popper", overlayClassName),
+    classNames: pickerClassNames,
+    styles: pickerStyles
   }, rootProps, {
     // 这种展现形式宽度是不固定的，关掉宽度匹配策略
     overlay: Object.assign({

package/lib/cjs/CascaderMenuList.js

@@ -39,11 +39,15 @@ var CascaderMenuList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _useCascaderContext = context.useCascaderContext(),
     flatted = _useCascaderContext.flatted,
     menuList = _useCascaderContext.menuList,
-    dropdownColumnRender = _useCascaderContext.dropdownColumnRender;
-  var cls = classname.cx(prefixCls, className, flatted && prefixCls + "--flatted");
+    dropdownColumnRender = _useCascaderContext.dropdownColumnRender,
+    classNames = _useCascaderContext.classNames,
+    styles = _useCascaderContext.styles;
+  var cls = classname.cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.menuList, flatted && prefixCls + "--flatted");
+  var rootStyle = styles === null || styles === void 0 ? void 0 : styles.menuList;
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     ref: ref,
-    className: cls
+    className: cls,
+    style: rootStyle
   }, rest), menuList.map(function (menu, menuIndex) {
     return typeAssertion.isArrayNonEmpty(menu) ? typeAssertion.isFunction(dropdownColumnRender) ? dropdownColumnRender( /*#__PURE__*/React__default["default"].createElement(CascaderMenu, {
       key: menuIndex,
@@ -67,8 +71,11 @@ var CascaderMenu = function CascaderMenu(_ref) {
     style = _ref.style,
     menu = _ref.data;
   var _useCascaderContext2 = context.useCascaderContext(),
-    virtual = _useCascaderContext2.virtual;
-  var cls = classname.cx(prefixCls, className);
+    virtual = _useCascaderContext2.virtual,
+    classNames = _useCascaderContext2.classNames,
+    styles = _useCascaderContext2.styles;
+  var cls = classname.cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.menu);
+  var menuStyle = Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.menu);
   var virtualListProps = {
     virtual: virtual,
     data: menu,
@@ -77,7 +84,7 @@ var CascaderMenu = function CascaderMenu(_ref) {
   };
   return /*#__PURE__*/React__default["default"].createElement("ul", {
     className: cls,
-    style: style,
+    style: menuStyle,
     role: role
   }, typeAssertion.isArrayNonEmpty(menu) ? virtual ? ( /*#__PURE__*/React__default["default"].createElement(VirtualList__default["default"], Object.assign({
     itemKey: 'id',
@@ -108,13 +115,15 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     onItemHover = _useCascaderContext3.onItemHover,
     titleRender = _useCascaderContext3.titleRender,
     onLoadChildren = _useCascaderContext3.onLoadChildren,
-    getItemRequiredProps = _useCascaderContext3.getItemRequiredProps;
+    getItemRequiredProps = _useCascaderContext3.getItemRequiredProps,
+    classNames = _useCascaderContext3.classNames,
+    styles = _useCascaderContext3.styles;
   var eventOption = index.getItemEventData(option, getItemRequiredProps(option));
   var selected = eventOption.selected,
     loading = eventOption.loading,
     active = eventOption.active;
   var disabled = disabledContext || option.disabled;
-  var optionCls = classname.cx(prefixCls + "-option", active && prefixCls + "-option--active", loading && prefixCls + "-option--loading", disabled && prefixCls + "-option--disabled", selected && prefixCls + "-option--selected");
+  var optionCls = classname.cx(prefixCls + "-option", active && prefixCls + "-option--active", loading && prefixCls + "-option--loading", disabled && prefixCls + "-option--disabled", selected && prefixCls + "-option--selected", classNames === null || classNames === void 0 ? void 0 : classNames.option);
   return /*#__PURE__*/React__default["default"].createElement("li", {
     ref: ref,
     key: option.id,
@@ -123,6 +132,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     title: typeof option.title === 'string' ? option.title : undefined
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: optionCls,
+    style: styles === null || styles === void 0 ? void 0 : styles.option,
     onClick: function onClick(evt) {
       if (disabled) return;
       onItemClick(eventOption);

package/lib/esm/Cascader.js

@@ -25,6 +25,7 @@ import { uniqBy } from '@hi-ui/array-utils';
 import { useCache } from './hooks/use-cache/lib/esm/index.js';
 import { useGlobalContext, useLocaleContext } from '@hi-ui/core';
 import { callAllFuncs } from '@hi-ui/func-utils';
+import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
 import { CascaderMenuList } from './CascaderMenuList.js';
 import Highlighter from '@hi-ui/highlighter';
 var _prefix = getPrefixCls('cascader');
@@ -83,11 +84,30 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
     showIndicator = _props$showIndicator === void 0 ? true : _props$showIndicator,
     renderExtraHeader = props.renderExtraHeader,
     changeOnSelect = props.changeOnSelect,
-    rest = __rest(props, ["prefixCls", "className", "placeholder", "disabled", "clearable", "type", "fieldNames", "expandTrigger", "displayRender", "onSelect", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "keyword", "onSearch", "clearSearchOnClosed", "render", "overlayClassName", "data", "flattedSearchResult", "visible", "size", "prefix", "suffix", "onOpen", "onClose", "onClear", "renderExtraFooter", "dropdownColumnRender", "closeOnSelect", "customRender", "label", "virtual", "onItemClick", "showIndicator", "renderExtraHeader", "changeOnSelect"]);
+    classNamesProp = props.classNames,
+    stylesProp = props.styles,
+    rest = __rest(props, ["prefixCls", "className", "placeholder", "disabled", "clearable", "type", "fieldNames", "expandTrigger", "displayRender", "onSelect", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "keyword", "onSearch", "clearSearchOnClosed", "render", "overlayClassName", "data", "flattedSearchResult", "visible", "size", "prefix", "suffix", "onOpen", "onClose", "onClear", "renderExtraFooter", "dropdownColumnRender", "closeOnSelect", "customRender", "label", "virtual", "onItemClick", "showIndicator", "renderExtraHeader", "changeOnSelect", "classNames", "styles"]);
   var _useGlobalContext = useGlobalContext(),
-    globalSize = _useGlobalContext.size;
+    globalSize = _useGlobalContext.size,
+    cascaderConfig = _useGlobalContext.cascader;
   var size = (_a = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _a !== void 0 ? _a : 'md';
   var i18n = useLocaleContext();
+  var _useMergeSemantic = useMergeSemantic({
+      classNamesList: [cascaderConfig === null || cascaderConfig === void 0 ? void 0 : cascaderConfig.classNames, classNamesProp],
+      stylesList: [cascaderConfig === null || cascaderConfig === void 0 ? void 0 : cascaderConfig.styles, stylesProp],
+      info: {
+        props: Object.assign(Object.assign({}, rest), {
+          disabled: disabled,
+          searchable: searchableProp,
+          visible: visible,
+          size: size,
+          appearance: appearance,
+          expandTrigger: expandTrigger
+        })
+      }
+    }),
+    classNames = _useMergeSemantic.classNames,
+    styles = _useMergeSemantic.styles;
   var pickerInnerRef = useRef(null);
   var placeholder = isUndef(placeholderProp) ? i18n.get('cascader.placeholder') : placeholderProp;
   var _useUncontrolledToggl = useUncontrolledToggle({
@@ -241,6 +261,19 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
       clear();
     }
   }, [value, clear]);
+  var pickerSemanticKeys = ['root', 'container', 'panel', 'header', 'search', 'body', 'footer', 'loading', 'empty', 'creator'];
+  var pickerClassNames = pickerSemanticKeys.reduce(function (acc, key) {
+    if ((classNames === null || classNames === void 0 ? void 0 : classNames[key]) !== undefined) {
+      acc[key] = classNames[key];
+    }
+    return acc;
+  }, {});
+  var pickerStyles = pickerSemanticKeys.reduce(function (acc, key) {
+    if (styles === null || styles === void 0 ? void 0 : styles[key]) {
+      acc[key] = styles[key];
+    }
+    return acc;
+  }, {});
   return /*#__PURE__*/React.createElement(CascaderProvider, {
     value: Object.assign(Object.assign({}, context), {
       expandTrigger: expandTrigger,
@@ -248,13 +281,17 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
       menuList: showData,
       dropdownColumnRender: dropdownColumnRender,
       virtual: virtual,
-      onItemClickProp: onItemClickProp
+      onItemClickProp: onItemClickProp,
+      classNames: classNames,
+      styles: styles
     })
   }, /*#__PURE__*/React.createElement(Picker, Object.assign({
     ref: ref,
     innerRef: pickerInnerRef,
     className: cls,
-    overlayClassName: cx(prefixCls + "__popper", overlayClassName)
+    overlayClassName: cx(prefixCls + "__popper", overlayClassName),
+    classNames: pickerClassNames,
+    styles: pickerStyles
   }, rootProps, {
     // 这种展现形式宽度是不固定的，关掉宽度匹配策略
     overlay: Object.assign({

package/lib/esm/CascaderMenuList.js

@@ -26,11 +26,15 @@ var CascaderMenuList = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _useCascaderContext = useCascaderContext(),
     flatted = _useCascaderContext.flatted,
     menuList = _useCascaderContext.menuList,
-    dropdownColumnRender = _useCascaderContext.dropdownColumnRender;
-  var cls = cx(prefixCls, className, flatted && prefixCls + "--flatted");
+    dropdownColumnRender = _useCascaderContext.dropdownColumnRender,
+    classNames = _useCascaderContext.classNames,
+    styles = _useCascaderContext.styles;
+  var cls = cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.menuList, flatted && prefixCls + "--flatted");
+  var rootStyle = styles === null || styles === void 0 ? void 0 : styles.menuList;
   return /*#__PURE__*/React.createElement("div", Object.assign({
     ref: ref,
-    className: cls
+    className: cls,
+    style: rootStyle
   }, rest), menuList.map(function (menu, menuIndex) {
     return isArrayNonEmpty(menu) ? isFunction(dropdownColumnRender) ? dropdownColumnRender( /*#__PURE__*/React.createElement(CascaderMenu, {
       key: menuIndex,
@@ -54,8 +58,11 @@ var CascaderMenu = function CascaderMenu(_ref) {
     style = _ref.style,
     menu = _ref.data;
   var _useCascaderContext2 = useCascaderContext(),
-    virtual = _useCascaderContext2.virtual;
-  var cls = cx(prefixCls, className);
+    virtual = _useCascaderContext2.virtual,
+    classNames = _useCascaderContext2.classNames,
+    styles = _useCascaderContext2.styles;
+  var cls = cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.menu);
+  var menuStyle = Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.menu);
   var virtualListProps = {
     virtual: virtual,
     data: menu,
@@ -64,7 +71,7 @@ var CascaderMenu = function CascaderMenu(_ref) {
   };
   return /*#__PURE__*/React.createElement("ul", {
     className: cls,
-    style: style,
+    style: menuStyle,
     role: role
   }, isArrayNonEmpty(menu) ? virtual ? ( /*#__PURE__*/React.createElement(VirtualList, Object.assign({
     itemKey: 'id',
@@ -95,13 +102,15 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     onItemHover = _useCascaderContext3.onItemHover,
     titleRender = _useCascaderContext3.titleRender,
     onLoadChildren = _useCascaderContext3.onLoadChildren,
-    getItemRequiredProps = _useCascaderContext3.getItemRequiredProps;
+    getItemRequiredProps = _useCascaderContext3.getItemRequiredProps,
+    classNames = _useCascaderContext3.classNames,
+    styles = _useCascaderContext3.styles;
   var eventOption = getItemEventData(option, getItemRequiredProps(option));
   var selected = eventOption.selected,
     loading = eventOption.loading,
     active = eventOption.active;
   var disabled = disabledContext || option.disabled;
-  var optionCls = cx(prefixCls + "-option", active && prefixCls + "-option--active", loading && prefixCls + "-option--loading", disabled && prefixCls + "-option--disabled", selected && prefixCls + "-option--selected");
+  var optionCls = cx(prefixCls + "-option", active && prefixCls + "-option--active", loading && prefixCls + "-option--loading", disabled && prefixCls + "-option--disabled", selected && prefixCls + "-option--selected", classNames === null || classNames === void 0 ? void 0 : classNames.option);
   return /*#__PURE__*/React.createElement("li", {
     ref: ref,
     key: option.id,
@@ -110,6 +119,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     title: typeof option.title === 'string' ? option.title : undefined
   }, /*#__PURE__*/React.createElement("div", {
     className: optionCls,
+    style: styles === null || styles === void 0 ? void 0 : styles.option,
     onClick: function onClick(evt) {
       if (disabled) return;
       onItemClick(eventOption);

package/lib/types/Cascader.d.ts

@@ -3,13 +3,18 @@ import type { HiBaseSizeEnum } from '@hi-ui/core';
 import { UseCascaderProps } from './use-cascader';
 import type { PopperOverlayProps } from '@hi-ui/popper';
 import { CascaderExpandTriggerEnum, CascaderItemEventData, CascaderAppearanceEnum } from './types';
-import { PickerProps } from '@hi-ui/picker';
+import { PickerProps, PickerSemanticName } from '@hi-ui/picker';
+import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
 /**
  * 级联选择器
  * Trigger + MenuList + Search
  */
 export declare const Cascader: React.ForwardRefExoticComponent<CascaderProps & React.RefAttributes<HTMLDivElement | null>>;
-export interface CascaderProps extends Omit<PickerProps, 'data' | 'onChange' | 'trigger' | 'scrollable' | 'header' | 'footer'>, UseCascaderProps {
+export type CascaderSemanticName = PickerSemanticName | 'menuList' | 'menu' | 'option';
+export type CascaderSemanticClassNames = SemanticClassNamesType<CascaderProps, CascaderSemanticName>;
+export type CascaderSemanticStyles = SemanticStylesType<CascaderProps, CascaderSemanticName>;
+export type CascaderSemantic = ComponentSemantic<CascaderSemanticClassNames, CascaderSemanticStyles>;
+export interface CascaderProps extends Omit<PickerProps, 'data' | 'onChange' | 'trigger' | 'scrollable' | 'header' | 'footer' | 'classNames' | 'styles'>, UseCascaderProps, CascaderSemantic {
     /**
      * 将 check 子项拍平展示。暂不对外暴露
      * @private

package/lib/types/context.d.ts

@@ -23,6 +23,8 @@ export declare const CascaderProvider: React.Provider<(Omit<{
     dropdownColumnRender?: (menu: React.ReactElement, level: number) => React.ReactNode;
     virtual?: boolean;
     onItemClickProp?: (event: React.MouseEvent<HTMLDivElement>, option: CascaderItemEventData) => void;
+    classNames?: Partial<Record<string, string>>;
+    styles?: Partial<Record<string, React.CSSProperties>>;
 }) | null>;
 export declare const useCascaderContext: () => Omit<{
     rootProps: {
@@ -47,4 +49,6 @@ export declare const useCascaderContext: () => Omit<{
     dropdownColumnRender?: (menu: React.ReactElement, level: number) => React.ReactNode;
     virtual?: boolean;
     onItemClickProp?: (event: React.MouseEvent<HTMLDivElement>, option: CascaderItemEventData) => void;
+    classNames?: Partial<Record<string, string>>;
+    styles?: Partial<Record<string, React.CSSProperties>>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/cascader",
-  "version": "5.0.0-experimental.1",
+  "version": "5.0.0-experimental.2",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -48,12 +48,12 @@
     "@hi-ui/classname": "^5.0.0-experimental.0",
     "@hi-ui/env": "^5.0.0-experimental.0",
     "@hi-ui/func-utils": "^5.0.0-experimental.0",
-    "@hi-ui/highlighter": "^5.0.0-experimental.0",
-    "@hi-ui/icons": "^5.0.0-experimental.0",
-    "@hi-ui/input": "^5.0.0-experimental.1",
-    "@hi-ui/picker": "^5.0.0-experimental.1",
-    "@hi-ui/popper": "^5.0.0-experimental.0",
-    "@hi-ui/spinner": "^5.0.0-experimental.0",
+    "@hi-ui/highlighter": "^5.0.0-experimental.1",
+    "@hi-ui/icons": "^5.0.0-experimental.1",
+    "@hi-ui/input": "^5.0.0-experimental.2",
+    "@hi-ui/picker": "^5.0.0-experimental.2",
+    "@hi-ui/popper": "^5.0.0-experimental.1",
+    "@hi-ui/spinner": "^5.0.0-experimental.1",
     "@hi-ui/tree-utils": "^5.0.0-experimental.0",
     "@hi-ui/type-assertion": "^5.0.0-experimental.0",
     "@hi-ui/use-check-state": "^5.0.0-experimental.0",
@@ -62,17 +62,18 @@
     "@hi-ui/use-search-mode": "^5.0.0-experimental.0",
     "@hi-ui/use-toggle": "^5.0.0-experimental.0",
     "@hi-ui/use-uncontrolled-state": "^5.0.0-experimental.0",
-    "@hi-ui/virtual-list": "^5.0.0-experimental.0",
-    "scroll-into-view-if-needed": "^3.1.0"
+    "@hi-ui/virtual-list": "^5.0.0-experimental.1",
+    "scroll-into-view-if-needed": "^3.1.0",
+    "@hi-ui/use-merge-semantic": "^5.0.0-experimental.0"
   },
   "peerDependencies": {
-    "@hi-ui/core": ">=5.0.0-experimental.0",
+    "@hi-ui/core": ">=5.0.0-experimental.1",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/core": "^5.0.0-experimental.0",
-    "@hi-ui/core-css": "^5.0.0-experimental.1",
+    "@hi-ui/core": "^5.0.0-experimental.1",
+    "@hi-ui/core-css": "^5.0.0-experimental.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   }