Socket
Socket
Sign inDemoInstall

rc-select

Package Overview
Dependencies
Maintainers
9
Versions
465
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-select - npm Package Compare versions

Comparing version 14.6.0 to 14.7.0

es/hooks/useAllowClear.d.ts
es/hooks/useAllowClear.js
lib/hooks/useAllowClear.d.ts
lib/hooks/useAllowClear.js

28

es/BaseSelect.d.ts
import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/interface';
import type { ScrollConfig, ScrollTo } from 'rc-virtual-list/lib/List';
import * as React from 'react';
export declare type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
export declare type RenderDOMFunc = (props: any) => HTMLElement;
export declare type Mode = 'multiple' | 'tags' | 'combobox';
export declare type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
export declare type RawValueType = string | number;
export declare type DisplayInfoType = 'add' | 'remove' | 'clear';
import type { DisplayInfoType, DisplayValueType, Mode, Placement, RenderDOMFunc, RenderNode, RawValueType } from './interface';
export type { DisplayInfoType, DisplayValueType, Mode, Placement, RenderDOMFunc, RenderNode, RawValueType };
export interface RefOptionListProps {

@@ -15,3 +11,3 @@ onKeyDown: React.KeyboardEventHandler;

}
export declare type CustomTagProps = {
export type CustomTagProps = {
label: React.ReactNode;

@@ -23,9 +19,2 @@ value: any;

};
export interface DisplayValueType {
key?: React.Key;
value?: RawValueType;
label?: React.ReactNode;
title?: string | number;
disabled?: boolean;
}
export interface BaseSelectRef {

@@ -62,3 +51,3 @@ focus: () => void;

}
export declare type BaseSelectPropsWithoutPrivate = Omit<BaseSelectProps, keyof BaseSelectPrivateProps>;
export type BaseSelectPropsWithoutPrivate = Omit<BaseSelectProps, keyof BaseSelectPrivateProps>;
export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttributes {

@@ -92,5 +81,10 @@ className?: string;

tokenSeparators?: string[];
allowClear?: boolean;
allowClear?: boolean | {
clearIcon?: RenderNode;
};
suffixIcon?: RenderNode;
/** Clear all icon */
/**
* Clear all icon
* @deprecated Please use `allowClear` instead
**/
clearIcon?: RenderNode;

@@ -97,0 +91,0 @@ /** Selector remove icon */

18

es/BaseSelect.js

@@ -24,2 +24,4 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";

import { getSeparatedContent } from "./utils/valueUtil";
import { useAllowClear } from "./hooks/useAllowClear";
import { warning } from 'rc-util';
var DEFAULT_OMIT_PROPS = ['value', 'onChange', 'removeIcon', 'placeholder', 'autoFocus', 'maxTagCount', 'maxTagTextLength', 'maxTagPlaceholder', 'choiceTransitionName', 'onInputKeyDown', 'onPopupScroll', 'tabIndex'];

@@ -479,3 +481,5 @@ export function isMultiple(mode) {

// ============================= Clear ==============================
var clearNode;
if (process.env.NODE_ENV !== 'production') {
warning(!props.clearIcon, '`clearIcon` will be removed in future. Please use `allowClear` instead.');
}
var onClearMouseDown = function onClearMouseDown() {

@@ -491,9 +495,5 @@ var _selectorRef$current4;

};
if (!disabled && allowClear && (displayValues.length || mergedSearchValue) && !(mode === 'combobox' && mergedSearchValue === '')) {
clearNode = /*#__PURE__*/React.createElement(TransBtn, {
className: "".concat(prefixCls, "-clear"),
onMouseDown: onClearMouseDown,
customizeIcon: clearIcon
}, "\xD7");
}
var _useAllowClear = useAllowClear(prefixCls, onClearMouseDown, displayValues, allowClear, clearIcon, disabled, mergedSearchValue, mode),
mergedAllowClear = _useAllowClear.allowClear,
clearNode = _useAllowClear.clearIcon;

@@ -586,3 +586,3 @@ // =========================== OptionList ===========================

return ['number', 'string'].includes(_typeof(label)) ? label : value;
}).join(', '))), selectorNode, arrowNode, clearNode);
}).join(', '))), selectorNode, arrowNode, mergedAllowClear && clearNode);
}

@@ -589,0 +589,0 @@ return /*#__PURE__*/React.createElement(BaseSelectContext.Provider, {

14

es/interface.d.ts
import type * as React from 'react';
import type { RawValueType } from './BaseSelect';
export type RawValueType = string | number;
export interface FlattenOptionData<OptionType> {

@@ -11,1 +11,13 @@ label?: React.ReactNode;

}
export interface DisplayValueType {
key?: React.Key;
value?: RawValueType;
label?: React.ReactNode;
title?: string | number;
disabled?: boolean;
}
export type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
export type RenderDOMFunc = (props: any) => HTMLElement;
export type Mode = 'multiple' | 'tags' | 'combobox';
export type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
export type DisplayInfoType = 'add' | 'remove' | 'clear';

2

es/OptionList.d.ts
import type { ScrollConfig } from 'rc-virtual-list/lib/List';
import * as React from 'react';
export declare type OptionListProps = Record<string, never>;
export type OptionListProps = Record<string, never>;
export interface RefOptionListProps {

@@ -5,0 +5,0 @@ onKeyDown: React.KeyboardEventHandler;

14

es/Select.d.ts

@@ -35,9 +35,9 @@ /**

import Option from './Option';
export declare type OnActiveValue = (active: RawValueType, index: number, info?: {
export type OnActiveValue = (active: RawValueType, index: number, info?: {
source?: 'keyboard' | 'mouse';
}) => void;
export declare type OnInternalSelect = (value: RawValueType, info: {
export type OnInternalSelect = (value: RawValueType, info: {
selected: boolean;
}) => void;
export declare type RawValueType = string | number;
export type RawValueType = string | number;
export interface LabelInValueType {

@@ -49,4 +49,4 @@ label: React.ReactNode;

}
export declare type DraftValueType = RawValueType | LabelInValueType | DisplayValueType | (RawValueType | LabelInValueType | DisplayValueType)[];
export declare type FilterFunc<OptionType> = (inputValue: string, option?: OptionType) => boolean;
export type DraftValueType = RawValueType | LabelInValueType | DisplayValueType | (RawValueType | LabelInValueType | DisplayValueType)[];
export type FilterFunc<OptionType> = (inputValue: string, option?: OptionType) => boolean;
export interface FieldNames {

@@ -67,4 +67,4 @@ value?: string;

}
export declare type SelectHandler<ValueType, OptionType extends BaseOptionType = DefaultOptionType> = (value: ValueType, option: OptionType) => void;
declare type ArrayElementType<T> = T extends (infer E)[] ? E : T;
export type SelectHandler<ValueType, OptionType extends BaseOptionType = DefaultOptionType> = (value: ValueType, option: OptionType) => void;
type ArrayElementType<T> = T extends (infer E)[] ? E : T;
export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> extends BaseSelectPropsWithoutPrivate {

@@ -71,0 +71,0 @@ prefixCls?: string;

2

es/Selector/Input.d.ts
import * as React from 'react';
declare type InputRef = HTMLInputElement | HTMLTextAreaElement;
type InputRef = HTMLInputElement | HTMLTextAreaElement;
interface InputProps {

@@ -4,0 +4,0 @@ prefixCls: string;

28

lib/BaseSelect.d.ts
import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/interface';
import type { ScrollConfig, ScrollTo } from 'rc-virtual-list/lib/List';
import * as React from 'react';
export declare type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
export declare type RenderDOMFunc = (props: any) => HTMLElement;
export declare type Mode = 'multiple' | 'tags' | 'combobox';
export declare type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
export declare type RawValueType = string | number;
export declare type DisplayInfoType = 'add' | 'remove' | 'clear';
import type { DisplayInfoType, DisplayValueType, Mode, Placement, RenderDOMFunc, RenderNode, RawValueType } from './interface';
export type { DisplayInfoType, DisplayValueType, Mode, Placement, RenderDOMFunc, RenderNode, RawValueType };
export interface RefOptionListProps {

@@ -15,3 +11,3 @@ onKeyDown: React.KeyboardEventHandler;

}
export declare type CustomTagProps = {
export type CustomTagProps = {
label: React.ReactNode;

@@ -23,9 +19,2 @@ value: any;

};
export interface DisplayValueType {
key?: React.Key;
value?: RawValueType;
label?: React.ReactNode;
title?: string | number;
disabled?: boolean;
}
export interface BaseSelectRef {

@@ -62,3 +51,3 @@ focus: () => void;

}
export declare type BaseSelectPropsWithoutPrivate = Omit<BaseSelectProps, keyof BaseSelectPrivateProps>;
export type BaseSelectPropsWithoutPrivate = Omit<BaseSelectProps, keyof BaseSelectPrivateProps>;
export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttributes {

@@ -92,5 +81,10 @@ className?: string;

tokenSeparators?: string[];
allowClear?: boolean;
allowClear?: boolean | {
clearIcon?: RenderNode;
};
suffixIcon?: RenderNode;
/** Clear all icon */
/**
* Clear all icon
* @deprecated Please use `allowClear` instead
**/
clearIcon?: RenderNode;

@@ -97,0 +91,0 @@ /** Selector remove icon */

18

lib/BaseSelect.js

@@ -32,2 +32,4 @@ "use strict";

var _valueUtil = require("./utils/valueUtil");
var _useAllowClear2 = require("./hooks/useAllowClear");
var _rcUtil = require("rc-util");
var _excluded = ["id", "prefixCls", "className", "showSearch", "tagRender", "direction", "omitDomProps", "displayValues", "onDisplayValuesChange", "emptyOptions", "notFoundContent", "onClear", "mode", "disabled", "loading", "getInputElement", "getRawInputElement", "open", "defaultOpen", "onDropdownVisibleChange", "activeValue", "onActiveValueChange", "activeDescendantId", "searchValue", "autoClearSearchValue", "onSearch", "onSearchSplit", "tokenSeparators", "allowClear", "suffixIcon", "clearIcon", "OptionList", "animation", "transitionName", "dropdownStyle", "dropdownClassName", "dropdownMatchSelectWidth", "dropdownRender", "dropdownAlign", "placement", "builtinPlacements", "getPopupContainer", "showAction", "onFocus", "onBlur", "onKeyUp", "onKeyDown", "onMouseDown"];

@@ -490,3 +492,5 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

// ============================= Clear ==============================
var clearNode;
if (process.env.NODE_ENV !== 'production') {
(0, _rcUtil.warning)(!props.clearIcon, '`clearIcon` will be removed in future. Please use `allowClear` instead.');
}
var onClearMouseDown = function onClearMouseDown() {

@@ -502,9 +506,5 @@ var _selectorRef$current4;

};
if (!disabled && allowClear && (displayValues.length || mergedSearchValue) && !(mode === 'combobox' && mergedSearchValue === '')) {
clearNode = /*#__PURE__*/React.createElement(_TransBtn.default, {
className: "".concat(prefixCls, "-clear"),
onMouseDown: onClearMouseDown,
customizeIcon: clearIcon
}, "\xD7");
}
var _useAllowClear = (0, _useAllowClear2.useAllowClear)(prefixCls, onClearMouseDown, displayValues, allowClear, clearIcon, disabled, mergedSearchValue, mode),
mergedAllowClear = _useAllowClear.allowClear,
clearNode = _useAllowClear.clearIcon;

@@ -597,3 +597,3 @@ // =========================== OptionList ===========================

return ['number', 'string'].includes((0, _typeof2.default)(label)) ? label : value;
}).join(', '))), selectorNode, arrowNode, clearNode);
}).join(', '))), selectorNode, arrowNode, mergedAllowClear && clearNode);
}

@@ -600,0 +600,0 @@ return /*#__PURE__*/React.createElement(_useBaseProps.BaseSelectContext.Provider, {

14

lib/interface.d.ts
import type * as React from 'react';
import type { RawValueType } from './BaseSelect';
export type RawValueType = string | number;
export interface FlattenOptionData<OptionType> {

@@ -11,1 +11,13 @@ label?: React.ReactNode;

}
export interface DisplayValueType {
key?: React.Key;
value?: RawValueType;
label?: React.ReactNode;
title?: string | number;
disabled?: boolean;
}
export type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
export type RenderDOMFunc = (props: any) => HTMLElement;
export type Mode = 'multiple' | 'tags' | 'combobox';
export type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
export type DisplayInfoType = 'add' | 'remove' | 'clear';

2

lib/OptionList.d.ts
import type { ScrollConfig } from 'rc-virtual-list/lib/List';
import * as React from 'react';
export declare type OptionListProps = Record<string, never>;
export type OptionListProps = Record<string, never>;
export interface RefOptionListProps {

@@ -5,0 +5,0 @@ onKeyDown: React.KeyboardEventHandler;

14

lib/Select.d.ts

@@ -35,9 +35,9 @@ /**

import Option from './Option';
export declare type OnActiveValue = (active: RawValueType, index: number, info?: {
export type OnActiveValue = (active: RawValueType, index: number, info?: {
source?: 'keyboard' | 'mouse';
}) => void;
export declare type OnInternalSelect = (value: RawValueType, info: {
export type OnInternalSelect = (value: RawValueType, info: {
selected: boolean;
}) => void;
export declare type RawValueType = string | number;
export type RawValueType = string | number;
export interface LabelInValueType {

@@ -49,4 +49,4 @@ label: React.ReactNode;

}
export declare type DraftValueType = RawValueType | LabelInValueType | DisplayValueType | (RawValueType | LabelInValueType | DisplayValueType)[];
export declare type FilterFunc<OptionType> = (inputValue: string, option?: OptionType) => boolean;
export type DraftValueType = RawValueType | LabelInValueType | DisplayValueType | (RawValueType | LabelInValueType | DisplayValueType)[];
export type FilterFunc<OptionType> = (inputValue: string, option?: OptionType) => boolean;
export interface FieldNames {

@@ -67,4 +67,4 @@ value?: string;

}
export declare type SelectHandler<ValueType, OptionType extends BaseOptionType = DefaultOptionType> = (value: ValueType, option: OptionType) => void;
declare type ArrayElementType<T> = T extends (infer E)[] ? E : T;
export type SelectHandler<ValueType, OptionType extends BaseOptionType = DefaultOptionType> = (value: ValueType, option: OptionType) => void;
type ArrayElementType<T> = T extends (infer E)[] ? E : T;
export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> extends BaseSelectPropsWithoutPrivate {

@@ -71,0 +71,0 @@ prefixCls?: string;

2

lib/Selector/Input.d.ts
import * as React from 'react';
declare type InputRef = HTMLInputElement | HTMLTextAreaElement;
type InputRef = HTMLInputElement | HTMLTextAreaElement;
interface InputProps {

@@ -4,0 +4,0 @@ prefixCls: string;

3

package.json
{
"name": "rc-select",
"version": "14.6.0",
"version": "14.7.0",
"description": "React Select",

@@ -62,2 +62,3 @@ "engines": {

"@types/react-dom": "^17.0.3",
"babel-jest": "^29.6.1",
"cross-env": "^7.0.0",

@@ -64,0 +65,0 @@ "dumi": "^1.1.32",

34

README.md

@@ -79,3 +79,3 @@ # rc-select

| choiceTransitionName | css animation name for selected items at multiple mode | String | '' |
| dropdownMatchSelectWidth | whether dropdown's width is same with select | bool | true |
| dropdownMatchSelectWidth | whether dropdown's width is same with select | boolean | true |
| dropdownClassName | additional className applied to dropdown | String | - |

@@ -87,8 +87,8 @@ | dropdownStyle | additional style applied to dropdown | React.CSSProperties | {} |

| tokenSeparators | separator used to tokenize on tag/multiple mode | string[]? | |
| open | control select open | bool | |
| defaultOpen | control select default open | bool | |
| open | control select open | boolean | |
| defaultOpen | control select default open | boolean | |
| placeholder | select placeholder | React Node | |
| showSearch | whether show search input in single mode | bool | true |
| allowClear | whether allowClear | bool | false |
| tags | when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | bool | false |
| showSearch | whether show search input in single mode | boolean | true |
| allowClear | whether allowClear | boolean | { clearIcon?: ReactNode } | false |
| tags | when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | boolean | false |
| tagRender | render custom tags. | (props: CustomTagProps) => ReactNode | - |

@@ -98,6 +98,6 @@ | maxTagTextLength | max tag text length to show | number | - |

| maxTagPlaceholder | placeholder for omitted values | ReactNode/function(omittedValues) | - |
| combobox | enable combobox mode(can not set multiple at the same time) | bool | false |
| multiple | whether multiple select | bool | false |
| disabled | whether disabled select | bool | false |
| filterOption | whether filter options by input value. default filter by option's optionFilterProp prop's value | bool | true/Function(inputValue:string, option:Option) |
| combobox | enable combobox mode(can not set multiple at the same time) | boolean | false |
| multiple | whether multiple select | boolean | false |
| disabled | whether disabled select | boolean | false |
| filterOption | whether filter options by input value. default filter by option's optionFilterProp prop's value | boolean | true/Function(inputValue:string, option:Option) |
| optionFilterProp | which prop value of option will be used for filter if filterOption is true | String | 'value' |

@@ -108,4 +108,4 @@ | filterSort | Sort function for search options sorting, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. | Function(optionA:Option, optionB: Option) | - |

| value | current selected option(s) | String \| String[] \| {key:String, label:React.Node} \| {key:String, label:React.Node}[] | - |
| labelInValue | whether to embed label in value, see above value type. Not support `combobox` mode | Bool | false |
| backfill | whether backfill select option to search input (Only works in single and combobox mode) | Bool | false |
| labelInValue | whether to embed label in value, see above value type. Not support `combobox` mode | boolean | false |
| backfill | whether backfill select option to search input (Only works in single and combobox mode) | boolean | false |
| onChange | called when select an option or input value change(combobox) | function(value, option:Option \| Option[]) | - |

@@ -119,7 +119,7 @@ | onSearch | called when input changed | function | - |

| onInputKeyDown | called when key down on input | Function(event) | - |
| defaultActiveFirstOption | whether active first option by default | bool | true |
| defaultActiveFirstOption | whether active first option by default | boolean | true |
| getPopupContainer | container which popup select menu rendered into | function(trigger:Node):Node | function(){return document.body;} |
| getInputElement | customize input element | function(): Element | - |
| showAction | actions trigger the dropdown to show | String[]? | - |
| autoFocus | focus select after mount | Bool | - |
| autoFocus | focus select after mount | boolean | - |
| autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true |

@@ -131,4 +131,4 @@ | suffixIcon | specify the select arrow icon | ReactNode | - |

| dropdownRender | render custom dropdown menu | (menu: React.Node, props: MenuProps) => ReactNode | - |
| loading | show loading icon in arrow | Boolean | false |
| virtual | Disable virtual scroll | Boolean | true |
| loading | show loading icon in arrow | boolean | false |
| virtual | Disable virtual scroll | boolean | true |
| direction | direction of dropdown | 'ltr' \| 'rtl' | 'ltr' |

@@ -148,3 +148,3 @@

| className | additional class to option | String | '' |
| disabled | no effect for click or keydown for this item | bool | false |
| disabled | no effect for click or keydown for this item | boolean | false |
| key | if react want you to set key, then key is same as value, you can omit value | String/number | - |

@@ -151,0 +151,0 @@ | value | default filter by this attribute. if react want you to set key, then key is same as value, you can omit value | String/number | - |

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc