diff --git a/README.md b/README.md index 715b6991..fc2b3fdc 100644 --- a/README.md +++ b/README.md @@ -36,44 +36,45 @@ import: and use as: - - ```jsx const options = [ - { + { value: 1, - label: "Leanne Graham" + label: 'Leanne Graham' }, { - value: 2, - label: "Ervin Howell" + value: 2, + label: 'Ervin Howell' } ]; - this.setValues(values)} />; ``` If your options don't have **value** and **label** fields, include **labelField** and **valueField** in the props: - ```jsx const options = [ { id: 1, - name: "Leanne Graham" + name: 'Leanne Graham' }, { - id: 2, - name: "Ervin Howell" + id: 2, + name: 'Ervin Howell' } ]; - this.setValues(values)} +/>; ``` > **options** and **onChange** are the minimum required props - ### Help and Contributions #### How to help/contribute @@ -91,50 +92,51 @@ const options = [ ### Component props -| Prop | Type | Default | Description | -|---------------------------------------------------------------------------------------------|-----------|----------------|----------------------------------------------------------------------------------------------------------------------------------------| -| values | array | [] | Selected values | -| options | array | [] | Available options, (option with key `disabled: true` will be disabled) | -| keepOpen | bool | false | If true, dropdown will always stay open (good for debugging) | -| autoFocus | bool | false | If true, and `searchable`, dropdown will auto focus | -| clearOnBlur | bool | true | If true, and `searchable`, search value will be cleared on blur | -| clearOnSelect | bool | true | If true, and `searchable`, search value will be cleared upon value select/de-select | -| name | string | null | If set, input type hidden would be added in the component with the value of the `name` prop as name and select's `values` as value | -| required | bool | false | If set, input type hidden would be added in the component with `required` prop as true/false | -| pattern | string | null | If set, input type hidden would be added in the component with `pattern` prop as regex | -| dropdownGap | number | 5 | Gap between select element and dropdown | -| multi | bool | false | If true - will act as multi-select, if false - only one option will be selected at the time | -| placeholder | string | "Select..." | Placeholder shown where there are no selected values | -| addPlaceholder | string | "" | Secondary placeholder on search field if any value selected | -| disabled | bool | false | Disable select and all interactions | -| style | object | {} | Style object to pass to select | -| className | string | | CSS class attribute to pass to select | -| loading | bool | false | Loading indicator | -| clearable | bool | false | Clear all indicator | -| searchable | bool | true | If true, select will have search input text | -| separator | bool | false | Separator line between close all and dropdown handle | -| dropdownHandle | bool | true | Dropdown handle to open/close dropdown | -| dropdownHeight | string | "300px" | Minimum height of a dropdown | -| direction | string | "ltr" | direction of a dropdown "ltr", "rtl" or "auto" | -| searchBy | string | label | Search by object property in values | -| sortBy | string | null | Sort by object property in values | -| labelField | string | "label" | Field in data to use for label | -| valueField | string | "value" | Field in data to use for value | -| color | string | "#0074D9" | Base color to use in component, also can be overwritten via CSS | -| closeOnScroll | bool | false | If true, scrolling the page will close the dropdown | -| closeOnSelect | bool | false | If true, selecting option will close the dropdown -| closeOnClickInput | bool | false | If true, clicking input will close the dropdown if you are not searching. | -| [dropdownPosition](https://sanusart.github.io/react-dropdown-select/prop/dropdown-position) | string | "bottom" | Available options are "auto", "top" and "bottom" defaults to "bottom". Auto will adjust itself according Select's position on the page | -| keepSelectedInList | bool | true | If false, selected item will not appear in a list | +| Prop | Type | Default | Description | +| ------------------------------------------------------------------------------------------- | ----------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------- | +| values | array | [] | Selected values | +| options | array | [] | Available options, (option with key `disabled: true` will be disabled) | +| keepOpen | bool | false | If true, dropdown will always stay open (good for debugging) | +| defaultMenuIsOpen | bool | false | If true, dropdown will be open by default | +| autoFocus | bool | false | If true, and `searchable`, dropdown will auto focus | +| clearOnBlur | bool | true | If true, and `searchable`, search value will be cleared on blur | +| clearOnSelect | bool | true | If true, and `searchable`, search value will be cleared upon value select/de-select | +| name | string | null | If set, input type hidden would be added in the component with the value of the `name` prop as name and select's `values` as value | +| required | bool | false | If set, input type hidden would be added in the component with `required` prop as true/false | +| pattern | string | null | If set, input type hidden would be added in the component with `pattern` prop as regex | +| dropdownGap | number | 5 | Gap between select element and dropdown | +| multi | bool | false | If true - will act as multi-select, if false - only one option will be selected at the time | +| placeholder | string | "Select..." | Placeholder shown where there are no selected values | +| addPlaceholder | string | "" | Secondary placeholder on search field if any value selected | +| disabled | bool | false | Disable select and all interactions | +| style | object | {} | Style object to pass to select | +| className | string | | CSS class attribute to pass to select | +| loading | bool | false | Loading indicator | +| clearable | bool | false | Clear all indicator | +| searchable | bool | true | If true, select will have search input text | +| separator | bool | false | Separator line between close all and dropdown handle | +| dropdownHandle | bool | true | Dropdown handle to open/close dropdown | +| dropdownHeight | string | "300px" | Minimum height of a dropdown | +| direction | string | "ltr" | direction of a dropdown "ltr", "rtl" or "auto" | +| searchBy | string | label | Search by object property in values | +| sortBy | string | null | Sort by object property in values | +| labelField | string | "label" | Field in data to use for label | +| valueField | string | "value" | Field in data to use for value | +| color | string | "#0074D9" | Base color to use in component, also can be overwritten via CSS | +| closeOnScroll | bool | false | If true, scrolling the page will close the dropdown | +| closeOnSelect | bool | false | If true, selecting option will close the dropdown | +| closeOnClickInput | bool | false | If true, clicking input will close the dropdown if you are not searching. | +| [dropdownPosition](https://sanusart.github.io/react-dropdown-select/prop/dropdown-position) | string | "bottom" | Available options are "auto", "top" and "bottom" defaults to "bottom". Auto will adjust itself according Select's position on the page | +| keepSelectedInList | bool | true | If false, selected item will not appear in a list | | portal | DOM element | false | If valid dom element specified - dropdown will break out to render inside the specified element | -| create | bool | false | If true, select will create value from search string and fire `onCreateNew` callback prop | -| backspaceDelete | bool | true | If true, backspace key will delete last value | -| createNewLabel | string | "add {search}" | If create set to true, this will be the label of the "add new" component. `{search}` will be replaced by search value | -| disabledLabel | string | "disabled" | Label shown on disabled field (after) the text | -| selectAll | bool | false | Allow to select all | -| selectAllLabel | string | "Select all" | Label for "Select all" | -| clearAllLabel | string | "Clear all" | Label for "Clear all" | -| additionalProps | object | null | Additional props to pass to Select | +| create | bool | false | If true, select will create value from search string and fire `onCreateNew` callback prop | +| backspaceDelete | bool | true | If true, backspace key will delete last value | +| createNewLabel | string | "add {search}" | If create set to true, this will be the label of the "add new" component. `{search}` will be replaced by search value | +| disabledLabel | string | "disabled" | Label shown on disabled field (after) the text | +| selectAll | bool | false | Allow to select all | +| selectAllLabel | string | "Select all" | Label for "Select all" | +| clearAllLabel | string | "Clear all" | Label for "Clear all" | +| additionalProps | object | null | Additional props to pass to Select | ### Callback props diff --git a/docs/package-lock.json b/docs/package-lock.json index 93f3d055..229bf3e5 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -5209,6 +5209,7 @@ "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==", "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.", + "dev": true, "dependencies": { "@babel/code-frame": "^7.0.0", "@babel/parser": "^7.7.0", @@ -5390,22 +5391,6 @@ "gatsby": "^4.0.0-next" } }, - "node_modules/babel-plugin-styled-components": { - "version": "2.0.7", - "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz", - "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==", - "peer": true, - "dependencies": { - "@babel/helper-annotate-as-pure": "^7.16.0", - "@babel/helper-module-imports": "^7.16.0", - "babel-plugin-syntax-jsx": "^6.18.0", - "lodash": "^4.17.11", - "picomatch": "^2.3.0" - }, - "peerDependencies": { - "styled-components": ">= 2" - } - }, "node_modules/babel-plugin-syntax-jsx": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", @@ -6033,15 +6018,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/camelize": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", - "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", - "peer": true, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -6873,15 +6849,6 @@ "node": ">=8" } }, - "node_modules/css-color-keywords": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", - "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", - "peer": true, - "engines": { - "node": ">=4" - } - }, "node_modules/css-declaration-sorter": { "version": "6.1.4", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.4.tgz", @@ -7030,17 +6997,6 @@ "resolved": "https://registry.npmjs.org/css-selector-parser/-/css-selector-parser-1.4.1.tgz", "integrity": "sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g==" }, - "node_modules/css-to-react-native": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", - "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", - "peer": true, - "dependencies": { - "camelize": "^1.0.0", - "css-color-keywords": "^1.0.0", - "postcss-value-parser": "^4.0.2" - } - }, "node_modules/css-tree": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", @@ -17422,12 +17378,6 @@ "resolved": "https://registry.npmjs.org/shallow-compare/-/shallow-compare-1.2.2.tgz", "integrity": "sha512-LUMFi+RppPlrHzbqmFnINTrazo0lPNwhcgzuAXVVcfy/mqPDrQmHAyz5bvV0gDAuRFrk804V0HpQ6u9sZ0tBeg==" }, - "node_modules/shallowequal": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", - "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", - "peer": true - }, "node_modules/sharp": { "version": "0.30.7", "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.30.7.tgz", @@ -18084,37 +18034,6 @@ "inline-style-parser": "0.1.1" } }, - "node_modules/styled-components": { - "version": "5.3.6", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.6.tgz", - "integrity": "sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==", - "hasInstallScript": true, - "peer": true, - "dependencies": { - "@babel/helper-module-imports": "^7.0.0", - "@babel/traverse": "^7.4.5", - "@emotion/is-prop-valid": "^1.1.0", - "@emotion/stylis": "^0.8.4", - "@emotion/unitless": "^0.7.4", - "babel-plugin-styled-components": ">= 1.12.0", - "css-to-react-native": "^3.0.0", - "hoist-non-react-statics": "^3.0.0", - "shallowequal": "^1.1.0", - "supports-color": "^5.5.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/styled-components" - }, - "peerDependencies": { - "react": ">= 16.8.0", - "react-dom": ">= 16.8.0", - "react-is": ">= 16.8.0" - } - }, "node_modules/stylehacks": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.3.tgz", @@ -18670,19 +18589,6 @@ "is-typedarray": "^1.0.0" } }, - "node_modules/typescript": { - "version": "4.8.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz", - "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==", - "peer": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - }, "node_modules/ua-parser-js": { "version": "0.7.32", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.32.tgz", @@ -21552,8 +21458,7 @@ "@emotion/use-insertion-effect-with-fallbacks": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", - "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", - "requires": {} + "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==" }, "@emotion/utils": { "version": "1.2.1", @@ -23480,14 +23385,12 @@ "acorn-import-assertions": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz", - "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==", - "requires": {} + "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==" }, "acorn-jsx": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", - "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "requires": {} + "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==" }, "acorn-loose": { "version": "8.3.0", @@ -23521,8 +23424,7 @@ "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "requires": {} + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" }, "anser": { "version": "2.1.1", @@ -23760,6 +23662,7 @@ "version": "10.1.0", "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==", + "dev": true, "requires": { "@babel/code-frame": "^7.0.0", "@babel/parser": "^7.7.0", @@ -23910,19 +23813,6 @@ "gatsby-core-utils": "^3.25.0" } }, - "babel-plugin-styled-components": { - "version": "2.0.7", - "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz", - "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==", - "peer": true, - "requires": { - "@babel/helper-annotate-as-pure": "^7.16.0", - "@babel/helper-module-imports": "^7.16.0", - "babel-plugin-syntax-jsx": "^6.18.0", - "lodash": "^4.17.11", - "picomatch": "^2.3.0" - } - }, "babel-plugin-syntax-jsx": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", @@ -24392,12 +24282,6 @@ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==" }, - "camelize": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", - "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", - "peer": true - }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -25045,12 +24929,6 @@ "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz", "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==" }, - "css-color-keywords": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", - "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", - "peer": true - }, "css-declaration-sorter": { "version": "6.1.4", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.4.tgz", @@ -25146,17 +25024,6 @@ "resolved": "https://registry.npmjs.org/css-selector-parser/-/css-selector-parser-1.4.1.tgz", "integrity": "sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g==" }, - "css-to-react-native": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", - "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", - "peer": true, - "requires": { - "camelize": "^1.0.0", - "css-color-keywords": "^1.0.0", - "postcss-value-parser": "^4.0.2" - } - }, "css-tree": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", @@ -25242,8 +25109,7 @@ "cssnano-utils": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.0.2.tgz", - "integrity": "sha512-KhprijuQv2sP4kT92sSQwhlK3SJTbDIsxcfIEySB0O+3m9esFOai7dP9bMx5enHAh2MwarVIcnwiWoOm01RIbQ==", - "requires": {} + "integrity": "sha512-KhprijuQv2sP4kT92sSQwhlK3SJTbDIsxcfIEySB0O+3m9esFOai7dP9bMx5enHAh2MwarVIcnwiWoOm01RIbQ==" }, "csso": { "version": "4.2.0", @@ -26172,8 +26038,7 @@ "eslint-plugin-react-hooks": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz", - "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==", - "requires": {} + "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==" }, "eslint-scope": { "version": "5.1.1", @@ -27524,8 +27389,7 @@ "gatsby-script": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/gatsby-script/-/gatsby-script-1.10.0.tgz", - "integrity": "sha512-8jAtQR0mw3G8sCy6i2D1jfGvUF5d9AIboEQuo9ZEChT4Ep5f+PSRxiWZqSjhKvintAOIeS4QXCJP5Rtp3xZKLg==", - "requires": {} + "integrity": "sha512-8jAtQR0mw3G8sCy6i2D1jfGvUF5d9AIboEQuo9ZEChT4Ep5f+PSRxiWZqSjhKvintAOIeS4QXCJP5Rtp3xZKLg==" }, "gatsby-sharp": { "version": "0.19.0", @@ -28108,8 +27972,7 @@ "graphql-type-json": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/graphql-type-json/-/graphql-type-json-0.3.2.tgz", - "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==", - "requires": {} + "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==" }, "gray-matter": { "version": "4.0.3", @@ -28406,8 +28269,7 @@ "icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", - "requires": {} + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==" }, "ieee754": { "version": "1.2.1", @@ -30967,32 +30829,27 @@ "postcss-discard-comments": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.3.tgz", - "integrity": "sha512-6W5BemziRoqIdAKT+1QjM4bNcJAQ7z7zk073730NHg4cUXh3/rQHHj7pmYxUB9aGhuRhBiUf0pXvIHkRwhQP0Q==", - "requires": {} + "integrity": "sha512-6W5BemziRoqIdAKT+1QjM4bNcJAQ7z7zk073730NHg4cUXh3/rQHHj7pmYxUB9aGhuRhBiUf0pXvIHkRwhQP0Q==" }, "postcss-discard-duplicates": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.3.tgz", - "integrity": "sha512-vPtm1Mf+kp7iAENTG7jI1MN1lk+fBqL5y+qxyi4v3H+lzsXEdfS3dwUZD45KVhgzDEgduur8ycB4hMegyMTeRw==", - "requires": {} + "integrity": "sha512-vPtm1Mf+kp7iAENTG7jI1MN1lk+fBqL5y+qxyi4v3H+lzsXEdfS3dwUZD45KVhgzDEgduur8ycB4hMegyMTeRw==" }, "postcss-discard-empty": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.3.tgz", - "integrity": "sha512-xGJugpaXKakwKI7sSdZjUuN4V3zSzb2Y0LOlmTajFbNinEjTfVs9PFW2lmKBaC/E64WwYppfqLD03P8l9BuueA==", - "requires": {} + "integrity": "sha512-xGJugpaXKakwKI7sSdZjUuN4V3zSzb2Y0LOlmTajFbNinEjTfVs9PFW2lmKBaC/E64WwYppfqLD03P8l9BuueA==" }, "postcss-discard-overridden": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.4.tgz", - "integrity": "sha512-3j9QH0Qh1KkdxwiZOW82cId7zdwXVQv/gRXYDnwx5pBtR1sTkU4cXRK9lp5dSdiM0r0OICO/L8J6sV1/7m0kHg==", - "requires": {} + "integrity": "sha512-3j9QH0Qh1KkdxwiZOW82cId7zdwXVQv/gRXYDnwx5pBtR1sTkU4cXRK9lp5dSdiM0r0OICO/L8J6sV1/7m0kHg==" }, "postcss-flexbugs-fixes": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz", - "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==", - "requires": {} + "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==" }, "postcss-loader": { "version": "5.3.0", @@ -31077,8 +30934,7 @@ "postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", - "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", - "requires": {} + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==" }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -31109,8 +30965,7 @@ "postcss-normalize-charset": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.3.tgz", - "integrity": "sha512-iKEplDBco9EfH7sx4ut7R2r/dwTnUqyfACf62Unc9UiyFuI7uUqZZtY+u+qp7g8Qszl/U28HIfcsI3pEABWFfA==", - "requires": {} + "integrity": "sha512-iKEplDBco9EfH7sx4ut7R2r/dwTnUqyfACf62Unc9UiyFuI7uUqZZtY+u+qp7g8Qszl/U28HIfcsI3pEABWFfA==" }, "postcss-normalize-display-values": { "version": "5.0.3", @@ -31288,8 +31143,7 @@ "prism-react-renderer": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.1.tgz", - "integrity": "sha512-xUeDMEz074d0zc5y6rxiMp/dlC7C+5IDDlaEUlcBOFE2wddz7hz5PNupb087mPwTt7T9BrFmewObfCBuf/LKwQ==", - "requires": {} + "integrity": "sha512-xUeDMEz074d0zc5y6rxiMp/dlC7C+5IDDlaEUlcBOFE2wddz7hz5PNupb087mPwTt7T9BrFmewObfCBuf/LKwQ==" }, "process-nextick-args": { "version": "2.0.1", @@ -31884,8 +31738,7 @@ "react-simple-code-editor": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz", - "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==", - "requires": {} + "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==" }, "react-virtualized": { "version": "9.22.3", @@ -31982,8 +31835,7 @@ "redux-thunk": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz", - "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==", - "requires": {} + "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==" }, "regenerate": { "version": "1.4.2", @@ -32703,12 +32555,6 @@ "resolved": "https://registry.npmjs.org/shallow-compare/-/shallow-compare-1.2.2.tgz", "integrity": "sha512-LUMFi+RppPlrHzbqmFnINTrazo0lPNwhcgzuAXVVcfy/mqPDrQmHAyz5bvV0gDAuRFrk804V0HpQ6u9sZ0tBeg==" }, - "shallowequal": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", - "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", - "peer": true - }, "sharp": { "version": "0.30.7", "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.30.7.tgz", @@ -33200,24 +33046,6 @@ "inline-style-parser": "0.1.1" } }, - "styled-components": { - "version": "5.3.6", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.6.tgz", - "integrity": "sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==", - "peer": true, - "requires": { - "@babel/helper-module-imports": "^7.0.0", - "@babel/traverse": "^7.4.5", - "@emotion/is-prop-valid": "^1.1.0", - "@emotion/stylis": "^0.8.4", - "@emotion/unitless": "^0.7.4", - "babel-plugin-styled-components": ">= 1.12.0", - "css-to-react-native": "^3.0.0", - "hoist-non-react-statics": "^3.0.0", - "shallowequal": "^1.1.0", - "supports-color": "^5.5.0" - } - }, "stylehacks": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.3.tgz", @@ -33637,12 +33465,6 @@ "is-typedarray": "^1.0.0" } }, - "typescript": { - "version": "4.8.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz", - "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==", - "peer": true - }, "ua-parser-js": { "version": "0.7.32", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.32.tgz", @@ -34350,8 +34172,7 @@ "ws": { "version": "8.2.3", "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", - "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", - "requires": {} + "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==" }, "xdg-basedir": { "version": "4.0.0", diff --git a/docs/src/pages/api.md b/docs/src/pages/api.md index b76e5955..1457f699 100644 --- a/docs/src/pages/api.md +++ b/docs/src/pages/api.md @@ -11,6 +11,7 @@ title: 'API' | values | array | [] | Selected values | | options | array | [] | Available options, (option with key `disabled: true` will be disabled) | | keepOpen | bool | false | If true, dropdown will always stay open (good for debugging) | +| defaultMenuIsOpen | bool | false | If true, dropdown will be open by default | | autoFocus | bool | false | If true, and `searchable`, dropdown will auto focus | | clearOnBlur | bool | true | If true, and `searchable`, search value will be cleared on blur | | clearOnSelect | bool | true | If true, and `searchable`, search value will be cleared upon value select/de-select | @@ -45,9 +46,9 @@ title: 'API' | backspaceDelete | bool | true | If true, backspace key will delete last value | | createNewLabel | string | "add {search}" | If create set to true, this will be the label of the "add new" component. `{search}` will be replaced by search value | | disabledLabel | string | "disabled" | Label shown on disabled field (after) the text | -| selectAll | bool | false | Allow to select all | -| selectAllLabel | string | "Select all" | Label for "Select all" | -| clearAllLabel | string | "Clear all" | Label for "Clear all" | +| selectAll | bool | false | Allow to select all | +| selectAllLabel | string | "Select all" | Label for "Select all" | +| clearAllLabel | string | "Clear all" | Label for "Clear all" | | additionalProps | object | null | Additional props to pass to Select | ## Callback props