@rc-component/cascader 1.1.1 → 1.3.0

package/es/Cascader.d.ts

@@ -55,7 +55,15 @@ export interface FieldNames<OptionType extends DefaultOptionType = DefaultOption
 export type ValueType<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType> = keyof OptionType extends ValueField ? unknown extends OptionType['value'] ? OptionType[ValueField] : OptionType['value'] : OptionType[ValueField];
 export type GetValueType<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean | React.ReactNode = false> = false extends Multiple ? ValueType<Required<OptionType>, ValueField>[] : ValueType<Required<OptionType>, ValueField>[][];
 export type GetOptionType<OptionType extends DefaultOptionType = DefaultOptionType, Multiple extends boolean | React.ReactNode = false> = false extends Multiple ? OptionType[] : OptionType[][];
+type SemanticName = 'input' | 'prefix' | 'suffix';
+type PopupSemantic = 'list' | 'listItem';
 export interface CascaderProps<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean | React.ReactNode = false> extends BaseCascaderProps<OptionType, ValueField> {
+    styles?: Partial<Record<SemanticName, React.CSSProperties>> & {
+        popup?: Partial<Record<PopupSemantic, React.CSSProperties>>;
+    };
+    classNames?: Partial<Record<SemanticName, string>> & {
+        popup?: Partial<Record<PopupSemantic, string>>;
+    };
     checkable?: Multiple;
     value?: GetValueType<OptionType, ValueField, Multiple>;
     defaultValue?: GetValueType<OptionType, ValueField, Multiple>;

package/es/Cascader.js

@@ -45,6 +45,8 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
     popupClassName,
     popupMenuColumnStyle,
     popupStyle: customPopupStyle,
+    classNames,
+    styles,
     placement,
     onPopupVisibleChange,
     // Icon
@@ -147,6 +149,8 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // ========================== Context ===========================
   const cascaderContext = React.useMemo(() => ({
+    classNames,
+    styles,
     options: mergedOptions,
     fieldNames: mergedFieldNames,
     values: checkedValues,
@@ -184,6 +188,16 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
     prefixCls: prefixCls,
     autoClearSearchValue: autoClearSearchValue,
     popupMatchSelectWidth: popupMatchSelectWidth,
+    classNames: {
+      prefix: classNames?.prefix,
+      suffix: classNames?.suffix,
+      input: classNames?.input
+    },
+    styles: {
+      prefix: styles?.prefix,
+      suffix: styles?.suffix,
+      input: styles?.input
+    },
     popupStyle: {
       ...popupStyle,
       ...customPopupStyle

package/es/OptionList/Column.js

@@ -1,5 +1,7 @@
-import classNames from 'classnames';
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import cls from 'classnames';
 import * as React from 'react';
+import pickAttrs from "rc-util/es/pickAttrs";
 import CascaderContext from "../context";
 import { SEARCH_MARK } from "../hooks/useSearchOptions";
 import { isLeaf, toPathKey } from "../utils/commonUtil";
@@ -30,7 +32,9 @@ export default function Column({
     expandIcon,
     loadingIcon,
     popupMenuColumnStyle,
-    optionRender
+    optionRender,
+    classNames,
+    styles
   } = React.useContext(CascaderContext);
   const hoverOpen = expandTrigger === 'hover';
   const isOptionDisabled = disabled => propsDisabled || disabled;
@@ -85,7 +89,8 @@ export default function Column({
 
   // ============================ Render ============================
   return /*#__PURE__*/React.createElement("ul", {
-    className: menuPrefixCls,
+    className: cls(menuPrefixCls, classNames?.popup?.list),
+    style: styles?.popup?.list,
     ref: menuRef,
     role: "menu"
   }, optionInfoList.map(({
@@ -101,6 +106,10 @@ export default function Column({
     fullPathKey,
     disableCheckbox
   }) => {
+    const ariaProps = pickAttrs(option, {
+      aria: true,
+      data: true
+    });
     // >>>>> Open
     const triggerOpenPath = () => {
       if (isOptionDisabled(disabled)) {
@@ -129,15 +138,19 @@ export default function Column({
     }
 
     // >>>>> Render
-    return /*#__PURE__*/React.createElement("li", {
-      key: fullPathKey,
-      className: classNames(menuItemPrefixCls, {
+    return /*#__PURE__*/React.createElement("li", _extends({
+      key: fullPathKey
+    }, ariaProps, {
+      className: cls(menuItemPrefixCls, classNames?.popup?.listItem, {
         [`${menuItemPrefixCls}-expand`]: !isMergedLeaf,
         [`${menuItemPrefixCls}-active`]: activeValue === value || activeValue === fullPathKey,
         [`${menuItemPrefixCls}-disabled`]: isOptionDisabled(disabled),
         [`${menuItemPrefixCls}-loading`]: isLoading
       }),
-      style: popupMenuColumnStyle,
+      style: {
+        ...popupMenuColumnStyle,
+        ...styles?.popup?.listItem
+      },
       role: "menuitemcheckbox",
       title: title,
       "aria-checked": checked,
@@ -165,7 +178,7 @@ export default function Column({
         // Prevent selector from blurring
         e.preventDefault();
       }
-    }, multiple && /*#__PURE__*/React.createElement(Checkbox, {
+    }), multiple && /*#__PURE__*/React.createElement(Checkbox, {
       prefixCls: `${prefixCls}-checkbox`,
       checked: checked,
       halfChecked: halfChecked,

package/es/context.d.ts

@@ -16,6 +16,8 @@ export interface CascaderContextProps {
     loadingIcon?: React.ReactNode;
     popupMenuColumnStyle?: React.CSSProperties;
     optionRender?: CascaderProps['optionRender'];
+    classNames?: CascaderProps['classNames'];
+    styles?: CascaderProps['styles'];
 }
 declare const CascaderContext: React.Context<CascaderContextProps>;
 export default CascaderContext;

package/lib/Cascader.d.ts

@@ -55,7 +55,15 @@ export interface FieldNames<OptionType extends DefaultOptionType = DefaultOption
 export type ValueType<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType> = keyof OptionType extends ValueField ? unknown extends OptionType['value'] ? OptionType[ValueField] : OptionType['value'] : OptionType[ValueField];
 export type GetValueType<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean | React.ReactNode = false> = false extends Multiple ? ValueType<Required<OptionType>, ValueField>[] : ValueType<Required<OptionType>, ValueField>[][];
 export type GetOptionType<OptionType extends DefaultOptionType = DefaultOptionType, Multiple extends boolean | React.ReactNode = false> = false extends Multiple ? OptionType[] : OptionType[][];
+type SemanticName = 'input' | 'prefix' | 'suffix';
+type PopupSemantic = 'list' | 'listItem';
 export interface CascaderProps<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean | React.ReactNode = false> extends BaseCascaderProps<OptionType, ValueField> {
+    styles?: Partial<Record<SemanticName, React.CSSProperties>> & {
+        popup?: Partial<Record<PopupSemantic, React.CSSProperties>>;
+    };
+    classNames?: Partial<Record<SemanticName, string>> & {
+        popup?: Partial<Record<PopupSemantic, string>>;
+    };
     checkable?: Multiple;
     value?: GetValueType<OptionType, ValueField, Multiple>;
     defaultValue?: GetValueType<OptionType, ValueField, Multiple>;

package/lib/Cascader.js

@@ -54,6 +54,8 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
     popupClassName,
     popupMenuColumnStyle,
     popupStyle: customPopupStyle,
+    classNames,
+    styles,
     placement,
     onPopupVisibleChange,
     // Icon
@@ -156,6 +158,8 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // ========================== Context ===========================
   const cascaderContext = React.useMemo(() => ({
+    classNames,
+    styles,
     options: mergedOptions,
     fieldNames: mergedFieldNames,
     values: checkedValues,
@@ -193,6 +197,16 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
     prefixCls: prefixCls,
     autoClearSearchValue: autoClearSearchValue,
     popupMatchSelectWidth: popupMatchSelectWidth,
+    classNames: {
+      prefix: classNames?.prefix,
+      suffix: classNames?.suffix,
+      input: classNames?.input
+    },
+    styles: {
+      prefix: styles?.prefix,
+      suffix: styles?.suffix,
+      input: styles?.input
+    },
     popupStyle: {
       ...popupStyle,
       ...customPopupStyle

package/lib/OptionList/Column.js

@@ -7,6 +7,7 @@ exports.FIX_LABEL = void 0;
 exports.default = Column;
 var _classnames = _interopRequireDefault(require("classnames"));
 var React = _interopRequireWildcard(require("react"));
+var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));
 var _context = _interopRequireDefault(require("../context"));
 var _useSearchOptions = require("../hooks/useSearchOptions");
 var _commonUtil = require("../utils/commonUtil");
@@ -14,6 +15,7 @@ var _Checkbox = _interopRequireDefault(require("./Checkbox"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const FIX_LABEL = exports.FIX_LABEL = '__cascader_fix_label__';
 function Column({
   prefixCls,
@@ -40,7 +42,9 @@ function Column({
     expandIcon,
     loadingIcon,
     popupMenuColumnStyle,
-    optionRender
+    optionRender,
+    classNames,
+    styles
   } = React.useContext(_context.default);
   const hoverOpen = expandTrigger === 'hover';
   const isOptionDisabled = disabled => propsDisabled || disabled;
@@ -95,7 +99,8 @@ function Column({
 
   // ============================ Render ============================
   return /*#__PURE__*/React.createElement("ul", {
-    className: menuPrefixCls,
+    className: (0, _classnames.default)(menuPrefixCls, classNames?.popup?.list),
+    style: styles?.popup?.list,
     ref: menuRef,
     role: "menu"
   }, optionInfoList.map(({
@@ -111,6 +116,10 @@ function Column({
     fullPathKey,
     disableCheckbox
   }) => {
+    const ariaProps = (0, _pickAttrs.default)(option, {
+      aria: true,
+      data: true
+    });
     // >>>>> Open
     const triggerOpenPath = () => {
       if (isOptionDisabled(disabled)) {
@@ -139,15 +148,19 @@ function Column({
     }
 
     // >>>>> Render
-    return /*#__PURE__*/React.createElement("li", {
-      key: fullPathKey,
-      className: (0, _classnames.default)(menuItemPrefixCls, {
+    return /*#__PURE__*/React.createElement("li", _extends({
+      key: fullPathKey
+    }, ariaProps, {
+      className: (0, _classnames.default)(menuItemPrefixCls, classNames?.popup?.listItem, {
         [`${menuItemPrefixCls}-expand`]: !isMergedLeaf,
         [`${menuItemPrefixCls}-active`]: activeValue === value || activeValue === fullPathKey,
         [`${menuItemPrefixCls}-disabled`]: isOptionDisabled(disabled),
         [`${menuItemPrefixCls}-loading`]: isLoading
       }),
-      style: popupMenuColumnStyle,
+      style: {
+        ...popupMenuColumnStyle,
+        ...styles?.popup?.listItem
+      },
       role: "menuitemcheckbox",
       title: title,
       "aria-checked": checked,
@@ -175,7 +188,7 @@ function Column({
         // Prevent selector from blurring
         e.preventDefault();
       }
-    }, multiple && /*#__PURE__*/React.createElement(_Checkbox.default, {
+    }), multiple && /*#__PURE__*/React.createElement(_Checkbox.default, {
       prefixCls: `${prefixCls}-checkbox`,
       checked: checked,
       halfChecked: halfChecked,

package/lib/context.d.ts

@@ -16,6 +16,8 @@ export interface CascaderContextProps {
     loadingIcon?: React.ReactNode;
     popupMenuColumnStyle?: React.CSSProperties;
     optionRender?: CascaderProps['optionRender'];
+    classNames?: CascaderProps['classNames'];
+    styles?: CascaderProps['styles'];
 }
 declare const CascaderContext: React.Context<CascaderContextProps>;
 export default CascaderContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/cascader",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "description": "cascade select ui component for react",
   "keywords": [
     "react",
@@ -70,7 +70,7 @@
     "enzyme-to-json": "^3.2.1",
     "eslint": "^8.54.0",
     "eslint-plugin-jest": "^28.8.3",
-    "eslint-plugin-unicorn": "^52.0.0",
+    "eslint-plugin-unicorn": "^56.0.1",
     "father": "^4.0.0",
     "gh-pages": "^6.1.1",
     "glob": "^7.1.6",