@hi-ui/check-select 5.0.0-experimental.1 → 5.0.0-experimental.2

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @hi-ui/check-select
 
+## 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/checkbox@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/tag-input@5.0.0-experimental.2
+  - @hi-ui/virtual-list@5.0.0-experimental.1
+  - @hi-ui/use-merge-semantic@5.0.0-experimental.0
+
 ## 5.0.0-experimental.1
 
 ### Minor Changes

package/lib/cjs/CheckSelect.js

@@ -26,6 +26,7 @@ var tagInput = require('@hi-ui/tag-input');
 var typeAssertion = require('@hi-ui/type-assertion');
 var VirtualList = require('@hi-ui/virtual-list');
 var picker = require('@hi-ui/picker');
+var useMergeSemantic = require('@hi-ui/use-merge-semantic');
 var domUtils = require('@hi-ui/dom-utils');
 var arrayUtils = require('@hi-ui/array-utils');
 var highlighter = require('@hi-ui/highlighter');
@@ -104,10 +105,28 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     _a$showIndicator = _a.showIndicator,
     showIndicator = _a$showIndicator === void 0 ? true : _a$showIndicator,
     renderExtraHeader = _a.renderExtraHeader,
-    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "visible", "onOpen", "onClose", "onClear", "appearance", "invalid", "dataSource", "searchOnInit", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "onItemCreate", "creatableInSearch", "fieldNames", "checkedOnEntered", "customRender", "tagInputProps", "size", "prefix", "suffix", "onKeyDown", "keyword", "clearSearchOnClosed", "label", "showIndicator", "renderExtraHeader"]);
+    classNamesProp = _a.classNames,
+    stylesProp = _a.styles,
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "visible", "onOpen", "onClose", "onClear", "appearance", "invalid", "dataSource", "searchOnInit", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "onItemCreate", "creatableInSearch", "fieldNames", "checkedOnEntered", "customRender", "tagInputProps", "size", "prefix", "suffix", "onKeyDown", "keyword", "clearSearchOnClosed", "label", "showIndicator", "renderExtraHeader", "classNames", "styles"]);
   var _useGlobalContext = core.useGlobalContext(),
-    globalSize = _useGlobalContext.size;
+    globalSize = _useGlobalContext.size,
+    checkSelectConfig = _useGlobalContext.checkSelect;
   var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
+  var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
+      classNamesList: [checkSelectConfig === null || checkSelectConfig === void 0 ? void 0 : checkSelectConfig.classNames, classNamesProp],
+      stylesList: [checkSelectConfig === null || checkSelectConfig === void 0 ? void 0 : checkSelectConfig.styles, stylesProp],
+      info: {
+        props: Object.assign(Object.assign({}, rest), {
+          disabled: disabled,
+          searchable: searchableProp,
+          visible: visible,
+          size: size,
+          appearance: appearance
+        })
+      }
+    }),
+    classNames = _useMergeSemantic.classNames,
+    styles = _useMergeSemantic.styles;
   // ************************** 国际化 ************************* //
   var i18n = core.useLocaleContext();
   var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('checkSelect.placeholder') : placeholderProp;
@@ -348,12 +367,30 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       }
     }
   }, [menuVisible, showData]);
+  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.CheckSelectProvider, {
-    value: context$1
+    value: Object.assign(Object.assign({}, context$1), {
+      classNames: classNames,
+      styles: styles
+    })
   }, /*#__PURE__*/React__default["default"].createElement(picker.Picker, Object.assign({
     ref: ref,
     innerRef: pickerInnerRef,
-    className: cls
+    className: cls,
+    classNames: pickerClassNames,
+    styles: pickerStyles
   }, rootProps, {
     visible: menuVisible,
     disabled: disabled,
@@ -471,7 +508,9 @@ var CheckSelectOption = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     rest = tslib.__rest(_a, ["prefixCls", "className", "children", "option", "onClick", "titleRender", "depth", "focused"]);
   var _useCheckSelectContex = context.useCheckSelectContext(),
     isCheckedId = _useCheckSelectContex.isCheckedId,
-    onSelect = _useCheckSelectContex.onSelect;
+    onSelect = _useCheckSelectContex.onSelect,
+    classNames = _useCheckSelectContex.classNames,
+    styles = _useCheckSelectContex.styles;
   var id = option.id,
     _option$disabled = option.disabled,
     disabled = _option$disabled === void 0 ? false : _option$disabled;
@@ -480,7 +519,7 @@ var CheckSelectOption = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     disabled: disabled,
     checked: checked
   }));
-  var cls = classname.cx(prefixCls, className, checked && prefixCls + "--checked", disabled && prefixCls + "--disabled", focused && prefixCls + "--focused");
+  var cls = classname.cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.option, checked && prefixCls + "--checked", disabled && prefixCls + "--disabled", focused && prefixCls + "--focused");
   var handleOptionCheck = React.useCallback(function (evt) {
     onSelect(option, !checked);
     onClick === null || onClick === void 0 ? void 0 : onClick(evt);
@@ -497,7 +536,8 @@ var CheckSelectOption = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, [prefixCls]);
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     ref: ref,
-    className: cls
+    className: cls,
+    style: styles === null || styles === void 0 ? void 0 : styles.option
   }, rest, {
     onClick: handleOptionCheck
   }), renderTitle(eventNodeRef.current, titleRender));
@@ -514,12 +554,17 @@ var CheckSelectOptionGroup = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     className = _a.className,
     label = _a.label,
     rest = tslib.__rest(_a, ["prefixCls", "className", "label", "depth"]);
-  var cls = classname.cx(prefixCls, className);
+  var _useCheckSelectContex2 = context.useCheckSelectContext(),
+    classNames = _useCheckSelectContex2.classNames,
+    styles = _useCheckSelectContex2.styles;
+  var cls = classname.cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.optionGroup);
+  var groupStyle = styles === null || styles === void 0 ? void 0 : styles.optionGroup;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: prefixCls + "__divider"
   }), /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     ref: ref,
-    className: cls
+    className: cls,
+    style: groupStyle
   }, rest), /*#__PURE__*/React__default["default"].createElement("span", null, label)));
 });
 // @ts-ignore

package/lib/esm/CheckSelect.js

@@ -20,6 +20,7 @@ import { TagInputMock } from '@hi-ui/tag-input';
 import { isUndef, isFunction, isArrayNonEmpty } from '@hi-ui/type-assertion';
 import VirtualList, { useCheckInVirtual } from '@hi-ui/virtual-list';
 import { Picker } from '@hi-ui/picker';
+import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
 import { mockDefaultHandlers } from '@hi-ui/dom-utils';
 import { uniqBy } from '@hi-ui/array-utils';
 import { Highlighter } from '@hi-ui/highlighter';
@@ -90,10 +91,28 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     _a$showIndicator = _a.showIndicator,
     showIndicator = _a$showIndicator === void 0 ? true : _a$showIndicator,
     renderExtraHeader = _a.renderExtraHeader,
-    rest = __rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "visible", "onOpen", "onClose", "onClear", "appearance", "invalid", "dataSource", "searchOnInit", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "onItemCreate", "creatableInSearch", "fieldNames", "checkedOnEntered", "customRender", "tagInputProps", "size", "prefix", "suffix", "onKeyDown", "keyword", "clearSearchOnClosed", "label", "showIndicator", "renderExtraHeader"]);
+    classNamesProp = _a.classNames,
+    stylesProp = _a.styles,
+    rest = __rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "visible", "onOpen", "onClose", "onClear", "appearance", "invalid", "dataSource", "searchOnInit", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "onItemCreate", "creatableInSearch", "fieldNames", "checkedOnEntered", "customRender", "tagInputProps", "size", "prefix", "suffix", "onKeyDown", "keyword", "clearSearchOnClosed", "label", "showIndicator", "renderExtraHeader", "classNames", "styles"]);
   var _useGlobalContext = useGlobalContext(),
-    globalSize = _useGlobalContext.size;
+    globalSize = _useGlobalContext.size,
+    checkSelectConfig = _useGlobalContext.checkSelect;
   var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
+  var _useMergeSemantic = useMergeSemantic({
+      classNamesList: [checkSelectConfig === null || checkSelectConfig === void 0 ? void 0 : checkSelectConfig.classNames, classNamesProp],
+      stylesList: [checkSelectConfig === null || checkSelectConfig === void 0 ? void 0 : checkSelectConfig.styles, stylesProp],
+      info: {
+        props: Object.assign(Object.assign({}, rest), {
+          disabled: disabled,
+          searchable: searchableProp,
+          visible: visible,
+          size: size,
+          appearance: appearance
+        })
+      }
+    }),
+    classNames = _useMergeSemantic.classNames,
+    styles = _useMergeSemantic.styles;
   // ************************** 国际化 ************************* //
   var i18n = useLocaleContext();
   var placeholder = isUndef(placeholderProp) ? i18n.get('checkSelect.placeholder') : placeholderProp;
@@ -334,12 +353,30 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       }
     }
   }, [menuVisible, showData]);
+  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(CheckSelectProvider, {
-    value: context
+    value: Object.assign(Object.assign({}, context), {
+      classNames: classNames,
+      styles: styles
+    })
   }, /*#__PURE__*/React.createElement(Picker, Object.assign({
     ref: ref,
     innerRef: pickerInnerRef,
-    className: cls
+    className: cls,
+    classNames: pickerClassNames,
+    styles: pickerStyles
   }, rootProps, {
     visible: menuVisible,
     disabled: disabled,
@@ -457,7 +494,9 @@ var CheckSelectOption = /*#__PURE__*/forwardRef(function (_a, ref) {
     rest = __rest(_a, ["prefixCls", "className", "children", "option", "onClick", "titleRender", "depth", "focused"]);
   var _useCheckSelectContex = useCheckSelectContext(),
     isCheckedId = _useCheckSelectContex.isCheckedId,
-    onSelect = _useCheckSelectContex.onSelect;
+    onSelect = _useCheckSelectContex.onSelect,
+    classNames = _useCheckSelectContex.classNames,
+    styles = _useCheckSelectContex.styles;
   var id = option.id,
     _option$disabled = option.disabled,
     disabled = _option$disabled === void 0 ? false : _option$disabled;
@@ -466,7 +505,7 @@ var CheckSelectOption = /*#__PURE__*/forwardRef(function (_a, ref) {
     disabled: disabled,
     checked: checked
   }));
-  var cls = cx(prefixCls, className, checked && prefixCls + "--checked", disabled && prefixCls + "--disabled", focused && prefixCls + "--focused");
+  var cls = cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.option, checked && prefixCls + "--checked", disabled && prefixCls + "--disabled", focused && prefixCls + "--focused");
   var handleOptionCheck = useCallback(function (evt) {
     onSelect(option, !checked);
     onClick === null || onClick === void 0 ? void 0 : onClick(evt);
@@ -483,7 +522,8 @@ var CheckSelectOption = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, [prefixCls]);
   return /*#__PURE__*/React.createElement("div", Object.assign({
     ref: ref,
-    className: cls
+    className: cls,
+    style: styles === null || styles === void 0 ? void 0 : styles.option
   }, rest, {
     onClick: handleOptionCheck
   }), renderTitle(eventNodeRef.current, titleRender));
@@ -500,12 +540,17 @@ var CheckSelectOptionGroup = /*#__PURE__*/forwardRef(function (_a, ref) {
     className = _a.className,
     label = _a.label,
     rest = __rest(_a, ["prefixCls", "className", "label", "depth"]);
-  var cls = cx(prefixCls, className);
+  var _useCheckSelectContex2 = useCheckSelectContext(),
+    classNames = _useCheckSelectContex2.classNames,
+    styles = _useCheckSelectContex2.styles;
+  var cls = cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.optionGroup);
+  var groupStyle = styles === null || styles === void 0 ? void 0 : styles.optionGroup;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: prefixCls + "__divider"
   }), /*#__PURE__*/React.createElement("div", Object.assign({
     ref: ref,
-    className: cls
+    className: cls,
+    style: groupStyle
   }, rest), /*#__PURE__*/React.createElement("span", null, label)));
 });
 // @ts-ignore

package/lib/types/CheckSelect.d.ts

@@ -3,13 +3,18 @@ import { UseCheckSelectProps } from './use-check-select';
 import type { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core';
 import { CheckSelectAppearanceEnum, CheckSelectDataItem, CheckSelectItemEventData, CheckSelectMergedItem } from './types';
 import { TagInputMockProps } from '@hi-ui/tag-input';
-import { PickerProps } from '@hi-ui/picker';
+import { PickerProps, PickerSemanticName } from '@hi-ui/picker';
+import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
 import { UseDataSource } from '@hi-ui/use-data-source';
 /**
  * 多项选择器
  */
 export declare const CheckSelect: React.ForwardRefExoticComponent<CheckSelectProps & React.RefAttributes<HTMLDivElement | null>>;
-export interface CheckSelectProps extends Omit<PickerProps, 'trigger' | 'scrollable' | 'header' | 'footer'>, UseCheckSelectProps {
+export type CheckSelectSemanticName = PickerSemanticName | 'option' | 'optionGroup';
+export type CheckSelectSemanticClassNames = SemanticClassNamesType<CheckSelectProps, CheckSelectSemanticName>;
+export type CheckSelectSemanticStyles = SemanticStylesType<CheckSelectProps, CheckSelectSemanticName>;
+export type CheckSelectSemantic = ComponentSemantic<CheckSelectSemanticClassNames, CheckSelectSemanticStyles>;
+export interface CheckSelectProps extends Omit<PickerProps, 'trigger' | 'scrollable' | 'header' | 'footer' | 'classNames' | 'styles'>, UseCheckSelectProps, CheckSelectSemantic {
     /**
      * 设置虚拟滚动容器的可视高度。暂不对外暴露
      * @private

package/lib/types/context.d.ts

@@ -1,20 +1,27 @@
-export declare const CheckSelectProvider: import("react").Provider<Omit<{
+import React from 'react';
+export declare const CheckSelectProvider: React.Provider<(Omit<{
     rootProps: {};
     data: any[];
     flattedData: import("packages/utils/tree-utils/lib/types/types").BaseFlattedTreeNodeData<any, any>[];
-    value: import("react").ReactText[];
+    value: React.ReactText[];
     tryChangeValue: (value: React.ReactText[], item: import("./types").CheckSelectItemEventData | import("./types").CheckSelectItemEventData[], shouldChecked: boolean) => void;
     onSelect: (targetItem: import("packages/hooks/use-check/lib/types").UseCheckItem, shouldChecked: boolean) => void;
     isCheckedId: (id: React.ReactText) => boolean;
     checkedItems: import("./types").CheckSelectItemEventData[];
-}, "rootProps"> | null>;
+}, "rootProps"> & {
+    classNames?: Partial<Record<string, string>>;
+    styles?: Partial<Record<string, React.CSSProperties>>;
+}) | null>;
 export declare const useCheckSelectContext: () => Omit<{
     rootProps: {};
     data: any[];
     flattedData: import("packages/utils/tree-utils/lib/types/types").BaseFlattedTreeNodeData<any, any>[];
-    value: import("react").ReactText[];
+    value: React.ReactText[];
     tryChangeValue: (value: React.ReactText[], item: import("./types").CheckSelectItemEventData | import("./types").CheckSelectItemEventData[], shouldChecked: boolean) => void;
     onSelect: (targetItem: import("packages/hooks/use-check/lib/types").UseCheckItem, shouldChecked: boolean) => void;
     isCheckedId: (id: React.ReactText) => boolean;
     checkedItems: import("./types").CheckSelectItemEventData[];
-}, "rootProps">;
+}, "rootProps"> & {
+    classNames?: Partial<Record<string, string>>;
+    styles?: Partial<Record<string, React.CSSProperties>>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/check-select",
-  "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>",
@@ -45,17 +45,17 @@
   },
   "dependencies": {
     "@hi-ui/array-utils": "^5.0.0-experimental.0",
-    "@hi-ui/checkbox": "^5.0.0-experimental.0",
+    "@hi-ui/checkbox": "^5.0.0-experimental.1",
     "@hi-ui/classname": "^5.0.0-experimental.0",
     "@hi-ui/dom-utils": "^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/tag-input": "^5.0.0-experimental.1",
+    "@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/tag-input": "^5.0.0-experimental.2",
     "@hi-ui/times": "^5.0.0-experimental.0",
     "@hi-ui/tree-utils": "^5.0.0-experimental.0",
     "@hi-ui/type-assertion": "^5.0.0-experimental.0",
@@ -67,16 +67,17 @@
     "@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"
+    "@hi-ui/virtual-list": "^5.0.0-experimental.1",
+    "@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"
   }