@rc-component/select - npm Package Compare versions

Comparing version 1.8.2 to 1.9.0

es/BaseSelect/index.d.ts

@@ -96,2 +96,3 @@ import type { AlignType, BuildInPlacements } from '@rc-component/trigger';
         clearIcon?: React.ReactNode;
+        label?: string;
     };
@@ -98,0 +99,0 @@ prefix?: React.ReactNode;

es/BaseSelect/index.js

@@ -436,3 +436,4 @@ 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); }
     allowClear: mergedAllowClear,
-    clearIcon: clearNode
+    clearIcon: clearNode,
+    label: clearLabel
   } = useAllowClear(prefixCls, displayValues, allowClear, clearIcon, disabled, mergedSearchValue, mode);
@@ -474,3 +475,4 @@
     suffix: mergedSuffixIcon,
-    clearIcon: clearNode
+    clearIcon: clearNode,
+    clearLabel: clearLabel
     // Type or mode
@@ -477,0 +479,0 @@ ,

es/hooks/useAllowClear.d.ts

@@ -6,5 +6,7 @@ import type { DisplayValueType, Mode } from '../interface';
     clearIcon: React.ReactNode;
+    label: string;
 }
 export declare const useAllowClear: (prefixCls: string, displayValues: DisplayValueType[], allowClear?: boolean | {
     clearIcon?: React.ReactNode;
+    label?: string;
 }, clearIcon?: React.ReactNode, disabled?: boolean, mergedSearchValue?: string, mode?: Mode) => AllowClearConfig;

es/hooks/useAllowClear.js

@@ -21,5 +21,6 @@ import { useMemo } from 'react';
       allowClear: mergedAllowClear,
-      clearIcon: mergedAllowClear ? allowClearConfig.clearIcon || clearIcon || '×' : null
+      clearIcon: mergedAllowClear ? allowClearConfig.clearIcon || clearIcon || '×' : null,
+      label: mergedAllowClear ? allowClearConfig.label ?? 'Clear' : ''
     };
   }, [allowClearConfig, clearIcon, disabled, displayValues.length, mergedSearchValue, mode]);
 };

es/Select.d.ts

@@ -128,3 +128,3 @@ /**
 }
-declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
+declare const TypedSelect: (<ValueType = any, OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
     Option: typeof Option;
@@ -131,0 +131,0 @@ OptGroup: typeof OptGroup;

es/SelectInput/index.d.ts

@@ -14,2 +14,3 @@ import * as React from 'react';
     clearIcon?: React.ReactNode;
+    clearLabel?: string;
     removeIcon?: RenderNode;
@@ -16,0 +17,0 @@ multiple?: boolean;

es/SelectInput/index.js

@@ -21,2 +21,3 @@ 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); }
     clearIcon,
+    clearLabel,
     children,
@@ -205,11 +206,20 @@ // Data
     style: styles?.suffix
-  }, suffix), clearIcon && /*#__PURE__*/React.createElement(Affix, {
+  }, suffix), clearIcon && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-label": clearLabel,
     className: clsx(`${prefixCls}-clear`, classNames?.clear),
     style: styles?.clear,
     onMouseDown: e => {
-      // Mark to tell not trigger open or focus
+      // Keep focus on the input and mark the native event so the root
+      // `onInternalMouseDown` handler does not open the dropdown.
+      // This must run on mousedown because the root handler fires
+      // before the button's onClick.
+      e.preventDefault();
       e.nativeEvent._select_lazy = true;
-      onClearMouseDown?.(e);
     }
+    // Clearing happens on click so it works for both pointer and
+    // keyboard (Enter/Space) activation.
+    ,
+    onClick: onClearMouseDown
   }, clearIcon), children));
 });

lib/BaseSelect/index.d.ts

@@ -96,2 +96,3 @@ import type { AlignType, BuildInPlacements } from '@rc-component/trigger';
         clearIcon?: React.ReactNode;
+        label?: string;
     };
@@ -98,0 +99,0 @@ prefix?: React.ReactNode;

lib/BaseSelect/index.js

@@ -445,3 +445,4 @@ "use strict";
     allowClear: mergedAllowClear,
-    clearIcon: clearNode
+    clearIcon: clearNode,
+    label: clearLabel
   } = (0, _useAllowClear.useAllowClear)(prefixCls, displayValues, allowClear, clearIcon, disabled, mergedSearchValue, mode);
@@ -483,3 +484,4 @@
     suffix: mergedSuffixIcon,
-    clearIcon: clearNode
+    clearIcon: clearNode,
+    clearLabel: clearLabel
     // Type or mode
@@ -486,0 +488,0 @@ ,

lib/hooks/useAllowClear.d.ts

@@ -6,5 +6,7 @@ import type { DisplayValueType, Mode } from '../interface';
     clearIcon: React.ReactNode;
+    label: string;
 }
 export declare const useAllowClear: (prefixCls: string, displayValues: DisplayValueType[], allowClear?: boolean | {
     clearIcon?: React.ReactNode;
+    label?: string;
 }, clearIcon?: React.ReactNode, disabled?: boolean, mergedSearchValue?: string, mode?: Mode) => AllowClearConfig;

lib/hooks/useAllowClear.js

@@ -27,3 +27,4 @@ "use strict";
       allowClear: mergedAllowClear,
-      clearIcon: mergedAllowClear ? allowClearConfig.clearIcon || clearIcon || '×' : null
+      clearIcon: mergedAllowClear ? allowClearConfig.clearIcon || clearIcon || '×' : null,
+      label: mergedAllowClear ? allowClearConfig.label ?? 'Clear' : ''
     };
@@ -30,0 +31,0 @@ }, [allowClearConfig, clearIcon, disabled, displayValues.length, mergedSearchValue, mode]);

lib/Select.d.ts

@@ -128,3 +128,3 @@ /**
 }
-declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
+declare const TypedSelect: (<ValueType = any, OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
     Option: typeof Option;
@@ -131,0 +131,0 @@ OptGroup: typeof OptGroup;

lib/SelectInput/index.d.ts

@@ -14,2 +14,3 @@ import * as React from 'react';
     clearIcon?: React.ReactNode;
+    clearLabel?: string;
     removeIcon?: RenderNode;
@@ -16,0 +17,0 @@ multiple?: boolean;

lib/SelectInput/index.js

@@ -30,2 +30,3 @@ "use strict";
     clearIcon,
+    clearLabel,
     children,
@@ -214,11 +215,20 @@ // Data
     style: styles?.suffix
-  }, suffix), clearIcon && /*#__PURE__*/React.createElement(_Affix.default, {
+  }, suffix), clearIcon && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-label": clearLabel,
     className: (0, _clsx.clsx)(`${prefixCls}-clear`, classNames?.clear),
     style: styles?.clear,
     onMouseDown: e => {
-      // Mark to tell not trigger open or focus
+      // Keep focus on the input and mark the native event so the root
+      // `onInternalMouseDown` handler does not open the dropdown.
+      // This must run on mousedown because the root handler fires
+      // before the button's onClick.
+      e.preventDefault();
       e.nativeEvent._select_lazy = true;
-      onClearMouseDown?.(e);
     }
+    // Clearing happens on click so it works for both pointer and
+    // keyboard (Enter/Space) activation.
+    ,
+    onClick: onClearMouseDown
   }, clearIcon), children));
 });

package.json

 {
   "name": "@rc-component/select",
-  "version": "1.8.2",
+  "version": "1.9.0",
   "description": "React Select",
@@ -5,0 +5,0 @@ "engines": {

No alert changes

Improved metrics

Total package byte prevSize

331067

0.37%

Lines of code

8017

0.43%

No dependency changes