Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Socket
Sign inDemoInstall

react-select

Package Overview
Dependencies
Maintainers
3
Versions
180
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-select - npm Package Compare versions

Comparing version 2.4.4 to 3.0.0

animated/dist/react-select.cjs.js
animated/dist/react-select.cjs.js.flow
animated/package.json
async-creatable/dist/react-select.cjs.js
async-creatable/dist/react-select.cjs.js.flow
async-creatable/package.json
async/dist/react-select.cjs.js
async/dist/react-select.cjs.js.flow
async/package.json
base/dist/react-select.cjs.js
base/dist/react-select.cjs.js.flow
base/package.json
CHANGELOG.md
creatable/dist/react-select.cjs.js
creatable/dist/react-select.cjs.js.flow
creatable/package.json
dist/react-select.cjs.js
dist/react-select.cjs.js.flow
src/NonceProvider.js

122

package.json
{
"name": "react-select",
"version": "2.4.4",
"version": "3.0.0",
"description": "A Select control built with and for ReactJS",
"main": "lib/index.js",
"main": "dist/react-select.cjs.js",
"module": "dist/react-select.esm.js",

@@ -15,4 +15,7 @@ "sideEffects": false,

"dependencies": {
"@babel/runtime": "^7.4.4",
"@emotion/cache": "^10.0.9",
"@emotion/core": "^10.0.9",
"@emotion/css": "^10.0.9",
"classnames": "^2.2.5",
"emotion": "^9.1.2",
"memoize-one": "^5.0.0",

@@ -25,89 +28,21 @@ "prop-types": "^15.6.0",

"devDependencies": {
"@atlaskit/button": "^7.0.2",
"@atlaskit/icon": "^11.0.1",
"@atlaskit/modal-dialog": "^4.0.3",
"@atlaskit/spinner": "^5.0.0",
"@atlaskit/tooltip": "^9.1.4",
"@babel/cli": "^7.0.0",
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^9.0.0",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.0",
"babel-plugin-emotion": "9.2.10",
"bundlesize": "^0.17.0",
"chroma-js": "^1.3.6",
"chrono-node": "^1.3.5",
"codesandboxer": "^0.1.1",
"concurrently": "^3.5.1",
"copy-webpack-plugin": "^4.3.1",
"coveralls": "^2.11.12",
"cross-env": "^5.1.3",
"css-loader": "^0.28.7",
"cypress": "^1.4.1",
"dotenv": "^5.0.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme": "^3.8.0",
"enzyme-to-json": "^3.3.0",
"eslint": "^4.6.1",
"eslint-plugin-react": "^7.3.0",
"extract-react-types-loader": "^0.3.0",
"flow-bin": "^0.91.0",
"gh-pages": "^1.1.0",
"html-webpack-plugin": "^2.30.1",
"husky": "^0.14.3",
"jest": "^23.6.0",
"jest-in-case": "^1.0.2",
"lint-staged": "^7.0.5",
"moment": "^2.20.1",
"nps": "^5.7.1",
"nps-utils": "^1.3.0",
"pretty-proptypes": "^0.5.0",
"raf-schd": "^2.1.0",
"raw-loader": "^0.5.1",
"react": "^16.2.0",
"react-codesandboxer": "^2.0.1",
"react-dom": "^16.2.0",
"react-helmet": "^5.2.0",
"react-markings": "^1.3.0",
"react-router-dom": "^4.2.2",
"react-syntax-highlighter": "^7.0.1",
"rollup": "1.1.2",
"rollup-plugin-babel": "^4.3.2",
"rollup-plugin-commonjs": "^9.2.0",
"rollup-plugin-node-resolve": "^4.0.0",
"rollup-plugin-terser": "^4.0.2",
"style-loader": "^0.19.1",
"unfetch": "^3.0.0",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
"react-dom": "^16.2.0"
},
"peerDependencies": {
"react": "^15.3.0 || ^16.0.0",
"react-dom": "^15.3.0 || ^16.0.0"
"react": "^16.8.0",
"react-dom": "^16.8.0"
},
"scripts": {
"build": "nps build && bundlesize",
"watch": "nps build.watch",
"coveralls": "cat coverage/lcov.info | coveralls",
"lint": "eslint .",
"deploy": "cross-env NODE_ENV=production nps publish",
"start": "cross-env FORCE_EXTRACT_REACT_TYPES=true webpack-dev-server --progress",
"fresh": "rm -rf node_modules && yarn install",
"test": "npm run test:jest && npm run test:cypress",
"test:jest": "jest --coverage",
"e2e": "concurrently --kill-others --success=first --names 'SERVER,E2E' 'yarn start --progress=false --no-info' 'yarn test:cypress'",
"test:cypress": "cypress run --spec ./cypress/integration/select_spec.js",
"test:cypress-watch": "node ./node_modules/.bin/cypress open",
"precommit": "flow check && lint-staged"
},
"files": [
"dist",
"lib",
"src"
"src",
"base",
"animated",
"async",
"creatable",
"async-creatable"
],

@@ -124,19 +59,16 @@ "keywords": [

],
"bundlesize": [
{
"path": "./dist/react-select.js"
}
],
"jest": {
"modulePathIgnorePatterns": [
"./node_modules"
],
"testRegex": "src/*(/(__tests?__/)([^_].*/)*?[^_][^/]*?\\.(test|spec)?\\.(js?))$",
"setupFiles": [
"./enzymeAdapter.setup.js"
"preconstruct": {
"entrypoints": [
".",
"base",
"animated",
"async",
"creatable",
"async-creatable"
]
},
"lint-staged": {
"*.js": "eslint"
"browser": {
"./dist/react-select.cjs.js": "./dist/react-select.browser.cjs.js",
"./dist/react-select.esm.js": "./dist/react-select.browser.esm.js"
}
}

42

src/components/containers.js
// @flow
import React, { Component, type Node } from 'react';
import { css } from 'emotion';
/** @jsx jsx */
import { Component, type Node } from 'react';
import { jsx } from '@emotion/core';
import type { CommonProps, KeyboardEventHandler } from '../types';

@@ -31,10 +32,18 @@

export const SelectContainer = (props: ContainerProps) => {
const { children, className, cx, getStyles, innerProps, isDisabled, isRtl } = props;
const {
children,
className,
cx,
getStyles,
innerProps,
isDisabled,
isRtl,
} = props;
return (
<div
css={getStyles('container', props)}
className={cx(
css(getStyles('container', props)),
{
'--is-disabled': isDisabled,
'--is-rtl': isRtl
'--is-rtl': isRtl,
},

@@ -62,3 +71,5 @@ className

};
export const valueContainerCSS = ({ theme: { spacing } }: ValueContainerProps) => ({
export const valueContainerCSS = ({
theme: { spacing },
}: ValueContainerProps) => ({
alignItems: 'center',

@@ -75,8 +86,15 @@ display: 'flex',

render() {
const { children, className, cx, isMulti, getStyles, hasValue } = this.props;
const {
children,
className,
cx,
isMulti,
getStyles,
hasValue,
} = this.props;
return (
<div
css={getStyles('valueContainer', this.props)}
className={cx(
css(getStyles('valueContainer', this.props)),
{

@@ -86,3 +104,5 @@ 'value-container': true,

'value-container--has-value': hasValue,
}, className)}
},
className
)}
>

@@ -121,6 +141,6 @@ {children}

<div
css={getStyles('indicatorsContainer', props)}
className={cx(
css(getStyles('indicatorsContainer', props)),
{
'indicators': true,
indicators: true,
},

@@ -127,0 +147,0 @@ className

38

src/components/Control.js
// @flow
import React, { type Node, type ElementRef } from 'react';
import { css as emotionCSS } from 'emotion';
/** @jsx jsx */
import { type Node, type ElementRef } from 'react';
import { jsx } from '@emotion/core';
import type { CommonProps, PropsWithStyles } from '../types';

@@ -37,3 +39,5 @@

? colors.neutral10
: isFocused ? colors.primary : colors.neutral20,
: isFocused
? colors.primary
: colors.neutral20,
borderRadius: borderRadius,

@@ -58,12 +62,26 @@ borderStyle: 'solid',

const Control = (props: ControlProps) => {
const { children, cx, getStyles, className, isDisabled, isFocused, innerRef, innerProps, menuIsOpen } = props;
const {
children,
cx,
getStyles,
className,
isDisabled,
isFocused,
innerRef,
innerProps,
menuIsOpen,
} = props;
return (
<div
ref={innerRef}
className={cx(emotionCSS(getStyles('control', props)), {
'control': true,
'control--is-disabled': isDisabled,
'control--is-focused': isFocused,
'control--menu-is-open': menuIsOpen
}, className)}
css={getStyles('control', props)}
className={cx(
{
control: true,
'control--is-disabled': isDisabled,
'control--is-focused': isFocused,
'control--menu-is-open': menuIsOpen,
},
className
)}
{...innerProps}

@@ -70,0 +88,0 @@ >

20

src/components/Group.js
// @flow
import React, { type Node, type ComponentType } from 'react';
import { css } from 'emotion';
/** @jsx jsx */
import { type Node, type ComponentType } from 'react';
import { jsx } from '@emotion/core';
import type { CommonProps } from '../types';

@@ -37,7 +39,4 @@

<div
className={cx(
css(getStyles('group', props)),
{ 'group': true },
className,
)}
css={getStyles('group', props)}
className={cx({ group: true }, className)}
>

@@ -75,7 +74,4 @@ <Heading

<div
className={cx(
css(getStyles('groupHeading', { theme, ...cleanProps })),
{ 'group-heading': true },
className
)}
css={getStyles('groupHeading', { theme, ...cleanProps })}
className={cx({ 'group-heading': true }, className)}
{...cleanProps}

@@ -82,0 +78,0 @@ />

104

src/components/indicators.js
// @flow
import React, { type Node } from 'react';
import { css, injectGlobal } from 'emotion';
/** @jsx jsx */
import { type Node } from 'react';
import { jsx, keyframes } from '@emotion/core';

@@ -18,3 +19,3 @@ import type { CommonProps, Theme } from '../types';

focusable="false"
className={css({
css={{
display: 'inline-block',

@@ -25,3 +26,3 @@ fill: 'currentColor',

strokeWidth: 0,
})}
}}
{...props}

@@ -31,3 +32,2 @@ />

export const CrossIcon = (props: any) => (

@@ -61,3 +61,6 @@ <Svg size={20} {...props}>

isFocused,
theme: { spacing: { baseUnit }, colors },
theme: {
spacing: { baseUnit },
colors,
},
}: IndicatorProps) => ({

@@ -81,9 +84,9 @@ label: 'indicatorContainer',

{...innerProps}
css={getStyles('dropdownIndicator', props)}
className={cx(
css(getStyles('dropdownIndicator', props)),
{
'indicator': true,
indicator: true,
'dropdown-indicator': true,
},
className,
className
)}

@@ -102,9 +105,10 @@ >

{...innerProps}
css={getStyles('clearIndicator', props)}
className={cx(
css(getStyles('clearIndicator', props)),
{
'indicator': true,
indicator: true,
'clear-indicator': true,
},
className)}
className
)}
>

@@ -124,4 +128,7 @@ {children || <CrossIcon />}

isDisabled,
theme: { spacing: { baseUnit }, colors },
}: (CommonProps & SeparatorState)) => ({
theme: {
spacing: { baseUnit },
colors,
},
}: CommonProps & SeparatorState) => ({
label: 'indicatorSeparator',

@@ -140,7 +147,4 @@ alignSelf: 'stretch',

{...innerProps}
className={cx(
css(getStyles('indicatorSeparator', props)),
{ 'indicator-separator': true },
className
)}
css={getStyles('indicatorSeparator', props)}
className={cx({ 'indicator-separator': true }, className)}
/>

@@ -154,4 +158,6 @@ );

const keyframesName = 'react-select-loading-indicator';
let keyframesInjected = false;
const loadingDotAnimations = keyframes`
0%, 80%, 100% { opacity: 0; }
40% { opacity: 1; }
`;

@@ -161,3 +167,6 @@ export const loadingIndicatorCSS = ({

size,
theme: { colors, spacing: { baseUnit } },
theme: {
colors,
spacing: { baseUnit },
},
}: {

@@ -184,16 +193,12 @@ isFocused: boolean,

<span
className={css({
animationDuration: '1s',
animationDelay: `${delay}ms`,
animationIterationCount: 'infinite',
animationName: keyframesName,
animationTimingFunction: 'ease-in-out',
css={{
animation: `${loadingDotAnimations} 1s ease-in-out ${delay}ms infinite;`,
backgroundColor: color,
borderRadius: '1em',
display: 'inline-block',
marginLeft: offset ? '1em' : null,
height: '1em',
verticalAlign: 'top',
width: '1em',
})}
borderRadius: '1em;',
display: 'inline-block;',
marginLeft: offset ? '1em;' : null,
height: '1em;',
verticalAlign: 'top;',
width: '1em;',
}}
/>

@@ -210,25 +215,24 @@ );

} & CommonProps & {
/** Set size of the container. */
size: number,
};
/** Set size of the container. */
size: number,
};
export const LoadingIndicator = (props: LoadingIconProps) => {
const { className, cx, getStyles, innerProps, isFocused, isRtl, theme: { colors } } = props;
const {
className,
cx,
getStyles,
innerProps,
isFocused,
isRtl,
theme: { colors },
} = props;
const color = isFocused ? colors.neutral80 : colors.neutral20;
if(!keyframesInjected) {
// eslint-disable-next-line no-unused-expressions
injectGlobal`@keyframes ${keyframesName} {
0%, 80%, 100% { opacity: 0; }
40% { opacity: 1; }
};`;
keyframesInjected = true;
}
return (
<div
{...innerProps}
css={getStyles('loadingIndicator', props)}
className={cx(
css(getStyles('loadingIndicator', props)),
{
'indicator': true,
indicator: true,
'loading-indicator': true,

@@ -235,0 +239,0 @@ },

16

src/components/Input.js
// @flow
import React, { type ElementRef } from 'react';
import { css } from 'emotion';
/** @jsx jsx */
import { type ElementRef } from 'react';
import { jsx } from '@emotion/core';
import AutosizeInput from 'react-input-autosize';

@@ -9,3 +10,3 @@

export type InputProps = PropsWithStyles & {
cx: (?string | null, ?ClassNamesState, ?string) => string | void,
cx: (?ClassNamesState, ?string) => string | void,
/** Reference to the internal element */

@@ -20,3 +21,6 @@ innerRef: (ElementRef<*>) => void,

export const inputCSS = ({ isDisabled, theme: { spacing, colors } }: InputProps) => ({
export const inputCSS = ({
isDisabled,
theme: { spacing, colors },
}: InputProps) => ({
margin: spacing.baseUnit / 2,

@@ -50,5 +54,5 @@ paddingBottom: spacing.baseUnit / 2,

}: InputProps) => (
<div className={css(getStyles('input', { theme, ...props }))}>
<div css={getStyles('input', { theme, ...props })}>
<AutosizeInput
className={cx(null, { 'input': true }, className)}
className={cx({ input: true }, className)}
inputRef={innerRef}

@@ -55,0 +59,0 @@ inputStyle={inputStyle(isHidden)}

29

src/components/Menu.js
// @flow
import React, {
/** @jsx jsx */
import {
Component,

@@ -8,3 +9,3 @@ type Element as ReactElement,

} from 'react';
import { css } from 'emotion';
import { jsx } from '@emotion/core';
import { createPortal } from 'react-dom';

@@ -23,5 +24,5 @@ import PropTypes from 'prop-types';

InnerRef,
MenuPlacement,
MenuPosition,
CommonProps,
MenuPlacement,
MenuPosition,
CommonProps,
} from '../types';

@@ -235,3 +236,3 @@ import type { Theme } from '../types';

/** The children to be rendered. */
children: ({ }) => Node,
children: ({}) => Node,
};

@@ -321,6 +322,10 @@

const { children, className, cx, getStyles, innerRef, innerProps } = props;
const cn = cx(css(getStyles('menu', props)), { menu: true }, className);
return (
<div className={cn} {...innerProps} ref={innerRef}>
<div
css={getStyles('menu', props)}
className={cx({ menu: true }, className)}
{...innerProps}
ref={innerRef}
>
{children}

@@ -370,4 +375,4 @@ </div>

<div
css={getStyles('menuList', props)}
className={cx(
css(getStyles('menuList', props)),
{

@@ -414,4 +419,4 @@ 'menu-list': true,

<div
css={getStyles('noOptionsMessage', props)}
className={cx(
css(getStyles('noOptionsMessage', props)),
{

@@ -437,4 +442,4 @@ 'menu-notice': true,

<div
css={getStyles('loadingMessage', props)}
className={cx(
css(getStyles('loadingMessage', props)),
{

@@ -528,3 +533,3 @@ 'menu-notice': true,

const menuWrapper = (
<div className={css(getStyles('menuPortal', state))}>{children}</div>
<div css={getStyles('menuPortal', state)}>{children}</div>
);

@@ -531,0 +536,0 @@

116

src/components/MultiValue.js
// @flow
import React, { Component, type Node } from 'react';
import { css } from 'emotion';
/** @jsx jsx */
import { Component, type Node } from 'react';
import { jsx, ClassNames } from '@emotion/core';
import { CrossIcon } from './indicators';

@@ -33,3 +34,6 @@ import type { CommonProps } from '../types';

export const multiValueLabelCSS = ({ theme: { borderRadius, colors }, cropWithEllipsis }: MultiValueProps) => ({
export const multiValueLabelCSS = ({
theme: { borderRadius, colors },
cropWithEllipsis,
}: MultiValueProps) => ({
borderRadius: borderRadius / 2,

@@ -112,54 +116,58 @@ color: colors.neutral80,

const containerInnerProps = {
className: cx(
css(getStyles('multiValue', this.props)),
{
'multi-value': true,
'multi-value--is-disabled': isDisabled,
},
className
),
...innerProps,
};
const labelInnerProps = {
className: cx(
css(getStyles('multiValueLabel', this.props)),
{
'multi-value__label': true,
},
className
),
};
const removeInnerProps = {
className: cx(
css(getStyles('multiValueRemove', this.props)),
{
'multi-value__remove': true,
},
className
),
...removeProps,
};
return (
<Container
data={data}
innerProps={containerInnerProps}
selectProps={selectProps}
>
<Label
data={data}
innerProps={labelInnerProps}
selectProps={selectProps}
>
{children}
</Label>
<Remove
data={data}
innerProps={removeInnerProps}
selectProps={selectProps}
/>
</Container>
<ClassNames>
{({ css, cx: emotionCx }) => (
<Container
data={data}
innerProps={{
...innerProps,
className: emotionCx(
css(getStyles('multiValue', this.props)),
cx(
{
'multi-value': true,
'multi-value--is-disabled': isDisabled,
},
className
)
),
}}
selectProps={selectProps}
>
<Label
data={data}
innerProps={{
className: emotionCx(
css(getStyles('multiValueLabel', this.props)),
cx(
{
'multi-value__label': true,
},
className
)
),
}}
selectProps={selectProps}
>
{children}
</Label>
<Remove
data={data}
innerProps={{
className: emotionCx(
css(getStyles('multiValueRemove', this.props)),
cx(
{
'multi-value__remove': true,
},
className
)
),
...removeProps,
}}
selectProps={selectProps}
/>
</Container>
)}
</ClassNames>
);

@@ -166,0 +174,0 @@ }

35

src/components/Option.js
// @flow
import React, { type Node } from 'react';
import { css } from 'emotion';
/** @jsx jsx */
import { type Node } from 'react';
import { jsx } from '@emotion/core';
import type { CommonProps, PropsWithStyles, InnerRef } from '../types';

@@ -48,6 +50,10 @@

? colors.primary
: isFocused ? colors.primary25 : 'transparent',
: isFocused
? colors.primary25
: 'transparent',
color: isDisabled
? colors.neutral20
: isSelected ? colors.neutral0 : 'inherit',
: isSelected
? colors.neutral0
: 'inherit',
cursor: 'default',

@@ -63,3 +69,4 @@ display: 'block',

':active': {
backgroundColor: !isDisabled && (isSelected ? colors.primary : colors.primary50),
backgroundColor:
!isDisabled && (isSelected ? colors.primary : colors.primary50),
},

@@ -69,10 +76,19 @@ });

const Option = (props: OptionProps) => {
const { children, className, cx, getStyles, isDisabled, isFocused, isSelected, innerRef, innerProps } = props;
const {
children,
className,
cx,
getStyles,
isDisabled,
isFocused,
isSelected,
innerRef,
innerProps,
} = props;
return (
<div
ref={innerRef}
css={getStyles('option', props)}
className={cx(
css(getStyles('option', props)),
{
'option': true,
option: true,
'option--is-disabled': isDisabled,

@@ -84,2 +100,3 @@ 'option--is-focused': isFocused,

)}
ref={innerRef}
{...innerProps}

@@ -86,0 +103,0 @@ >

13

src/components/Placeholder.js
// @flow
import React, { type Node } from 'react';
import { css } from 'emotion';
/** @jsx jsx */
import { type Node } from 'react';
import { jsx } from '@emotion/core';
import type { CommonProps } from '../types';

@@ -13,3 +14,5 @@

export const placeholderCSS = ({ theme: { spacing, colors } }: PlaceholderProps) => ({
export const placeholderCSS = ({
theme: { spacing, colors },
}: PlaceholderProps) => ({
label: 'placeholder',

@@ -28,6 +31,6 @@ color: colors.neutral50,

<div
css={getStyles('placeholder', props)}
className={cx(
css(getStyles('placeholder', props)),
{
'placeholder': true,
placeholder: true,
},

@@ -34,0 +37,0 @@ className

13

src/components/SingleValue.js
// @flow
import React from 'react';
import { css as emotionCSS } from 'emotion';
/** @jsx jsx */
import type { CommonProps } from '../types';
import { jsx } from '@emotion/core';

@@ -20,3 +20,6 @@ type State = {

export const css = ({ isDisabled, theme: { spacing, colors } }: SingleValueProps) => ({
export const css = ({
isDisabled,
theme: { spacing, colors },
}: SingleValueProps) => ({
label: 'singleValue',

@@ -39,7 +42,7 @@ color: isDisabled ? colors.neutral40 : colors.neutral80,

<div
css={getStyles('singleValue', props)}
className={cx(
emotionCSS(getStyles('singleValue', props)),
{
'single-value': true,
'single-value--is-disabled': isDisabled
'single-value--is-disabled': isDisabled,
},

@@ -46,0 +49,0 @@ className

10

src/index.js

@@ -9,10 +9,6 @@ // @flow

export { SelectBase };
export { default as Async, makeAsyncSelect } from './Async';
export { default as AsyncCreatable } from './AsyncCreatable';
export { default as Creatable, makeCreatableSelect } from './Creatable';
export { createFilter } from './filters';
export { default as makeAnimated } from './animated/index';
export { components } from './components/index';
export { default as NonceProvider } from './NonceProvider';
export { mergeStyles } from './styles';
export { defaultTheme } from './theme';
export { createFilter } from './filters';
export { components } from './components';

37

src/internal/A11yText.js
// @flow
import React, { type ElementConfig } from 'react';
import { css } from 'emotion';
/** @jsx jsx */
import { type ElementConfig } from 'react';
import { jsx } from '@emotion/core';
// Assistive text to describe visual elements. Hidden for sighted users.
const A11yText = (props: ElementConfig<'span'>) => (
<span
className={css({
label: 'a11yText',
zIndex: 9999,
border: 0,
clip: 'rect(1px, 1px, 1px, 1px)',
height: 1,
width: 1,
position: 'absolute',
overflow: 'hidden',
padding: 0,
whiteSpace: 'nowrap',
backgroundColor: 'red',
color: 'blue',
})}
{...props}
/>
<span
css={{
label: 'a11yText',
zIndex: 9999,
border: 0,
clip: 'rect(1px, 1px, 1px, 1px)',
height: 1,
width: 1,
position: 'absolute',
overflow: 'hidden',
padding: 0,
whiteSpace: 'nowrap',
}}
{...props}
/>
);
export default A11yText;

11

src/internal/DummyInput.js
// @flow
/** @jsx jsx */
import { Component } from 'react';
import { jsx } from '@emotion/core';
import React, { Component } from 'react';
import { css } from 'emotion';
export default class DummyInput extends Component<any> {

@@ -13,3 +13,3 @@ render () {

{...props}
className={css({
css={{
label: 'dummyInput',

@@ -22,3 +22,2 @@ // get rid of any default styles

padding: 0,
// important! without `width` browsers won't allow focus

@@ -35,3 +34,3 @@ width: 1,

transform: 'scale(0)',
})}
}}
/>

@@ -38,0 +37,0 @@ );

8

src/internal/ScrollBlock.js
// @flow
import React, { PureComponent, type Element } from 'react';
import { css } from 'emotion';
/** @jsx jsx */
import { PureComponent, type Element } from 'react';
import { jsx } from '@emotion/core';
import NodeResolver from './NodeResolver';

@@ -62,3 +62,3 @@ import ScrollLock from './ScrollLock/index';

onClick={this.blurSelectInput}
className={css({ position: 'fixed', left: 0, bottom: 0, right: 0, top: 0 })}
css={{ position: 'fixed', left: 0, bottom: 0, right: 0, top: 0 }}
/>

@@ -65,0 +65,0 @@ <NodeResolver innerRef={this.getScrollTarget}>{children}</NodeResolver>

9

src/Select.js
// @flow
import React, { Component, type ElementRef, type Node } from 'react';
import memoizeOne from 'memoize-one';

@@ -309,2 +308,3 @@ import { MenuPlacer } from './components/Menu';

export default class Select extends Component<Props, State> {

@@ -666,4 +666,5 @@ static defaultProps = defaultProps;

const candidate = this.getOptionValue(removedValue);
const newValue = selectValue.filter(i => this.getOptionValue(i) !== candidate);
this.onChange(
selectValue.filter(i => this.getOptionValue(i) !== candidate),
newValue.length ? newValue : null,
{

@@ -689,2 +690,3 @@ action: 'remove-value',

const lastSelectedValue = selectValue[selectValue.length - 1];
const newValue = selectValue.slice(0, selectValue.length - 1);
this.announceAriaLiveSelection({

@@ -696,3 +698,3 @@ event: 'pop-value',

});
this.onChange(selectValue.slice(0, selectValue.length - 1), {
this.onChange(newValue.length ? newValue : null, {
action: 'pop-value',

@@ -1805,3 +1807,2 @@ removedValue: lastSelectedValue,

const { isFocused } = this.state;
const commonProps = (this.commonProps = this.getCommonProps());

@@ -1808,0 +1809,0 @@

5

src/types.js

@@ -57,3 +57,6 @@ // @flow

className?: string,
cx: (?string | null, ClassNamesState | void, string | void) => string | void,
cx: (
state: ClassNamesState | void,
className: string | void
) => string | void,
/**

@@ -60,0 +63,0 @@ Get the styles of a particular part of the select. Pass in the name of the

10

src/utils.js

@@ -44,7 +44,6 @@ // @flow

prefix?: string | null,
cssKey?: string | null,
state?: ClassNamesState,
className?: string,
className?: string
) {
const arr = [cssKey, className];
const arr = [className];
if (state && prefix) {

@@ -58,3 +57,6 @@ for (let key in state) {

return arr.filter(i => i).map(i => String(i).trim()).join(' ');
return arr
.filter(i => i)
.map(i => String(i).trim())
.join(' ');
}

@@ -61,0 +63,0 @@ // ==============================

dist/react-select.esm.js
dist/react-select.js
dist/react-select.min.js
HISTORY.md
lib/accessibility/index.js
lib/animated/index.js
lib/animated/Input.js
lib/animated/MultiValue.js
lib/animated/Placeholder.js
lib/animated/SingleValue.js
lib/animated/transitions.js
lib/animated/ValueContainer.js
lib/Async.js
lib/AsyncCreatable.js
lib/builtins.js
lib/components/containers.js
lib/components/Control.js
lib/components/Group.js
lib/components/index.js
lib/components/indicators.js
lib/components/Input.js
lib/components/Menu.js
lib/components/MultiValue.js
lib/components/Option.js
lib/components/Placeholder.js
lib/components/SingleValue.js
lib/Creatable.js
lib/diacritics.js
lib/filters.js
lib/index.js
lib/index.js.flow
lib/index.umd.js
lib/internal/A11yText.js
lib/internal/DummyInput.js
lib/internal/index.js
lib/internal/NodeResolver.js
lib/internal/react-fast-compare.js
lib/internal/ScrollBlock.js
lib/internal/ScrollCaptor.js
lib/internal/ScrollLock/constants.js
lib/internal/ScrollLock/index.js
lib/internal/ScrollLock/utils.js
lib/Select.js
lib/stateManager.js
lib/styles.js
lib/theme.js
lib/types.js
lib/utils.js
LICENSE
README.md
src/index.umd.js
src/__tests__/__snapshots__/Async.test.js.snap

Sorry, the diff of this file is not supported yet

src/__tests__/__snapshots__/AsyncCreatable.test.js.snap

Sorry, the diff of this file is not supported yet

src/__tests__/Select.test.js

Sorry, the diff of this file is too big to display

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