├── .eslintignore ├── .gitignore ├── .npmignore ├── .storybook ├── Select.story.tsx ├── main.js ├── manager-head.html ├── manager.js ├── preview.js ├── static │ ├── australia.svg │ ├── canada.svg │ ├── germany.svg │ ├── index.ts │ ├── japan.svg │ ├── logo.svg │ ├── options.mock.tsx │ ├── storybook.manager.css │ ├── storybook.preview.scss │ ├── sweden.svg │ ├── switzerland.svg │ ├── united_kingdom.svg │ └── united_states.svg └── templates │ ├── SelectMiltipleExample.tsx │ ├── SelectSingleExample.tsx │ ├── TemplateCustomOptions.tsx │ ├── TemplateCustomValue.tsx │ ├── TemplateMultiple.tsx │ ├── TemplateSingle.tsx │ └── index.ts ├── .vscode └── settings.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── babel.config.js ├── docs ├── 229.01997a2a8add2473116b.manager.bundle.js ├── 229.88a19c85.iframe.bundle.js ├── 295.223eb9bec083eddc34fe.manager.bundle.js ├── 51.6d936426.iframe.bundle.js ├── 51.6d936426.iframe.bundle.js.LICENSE.txt ├── 51.ed6f355dc48523569782.manager.bundle.js ├── 51.ed6f355dc48523569782.manager.bundle.js.LICENSE.txt ├── 551.13dd1811.iframe.bundle.js ├── 551.a6b072fedcf773ca497f.manager.bundle.js ├── 667.3b41f2fd.iframe.bundle.js ├── 667.3b41f2fd.iframe.bundle.js.LICENSE.txt ├── 701.ba29fb31.iframe.bundle.js ├── 745.ff01fbe3.iframe.bundle.js ├── 807.3f6e5527.iframe.bundle.js ├── 807.3f6e5527.iframe.bundle.js.LICENSE.txt ├── 807.79df300f37241c1d7fd3.manager.bundle.js ├── 807.79df300f37241c1d7fd3.manager.bundle.js.LICENSE.txt ├── 863.985396a1.iframe.bundle.js ├── 863.985396a1.iframe.bundle.js.LICENSE.txt ├── 897.4b7b5da4.iframe.bundle.js ├── 897.4b7b5da4.iframe.bundle.js.LICENSE.txt ├── 897.fb6b23057d54a49cd991.manager.bundle.js ├── 897.fb6b23057d54a49cd991.manager.bundle.js.LICENSE.txt ├── 935.0888ef1b976ca5eee32c.manager.bundle.js ├── 935.7fb34345.iframe.bundle.js ├── 991.f2f2eb3422c93b5c292f.manager.bundle.js ├── 991.f2f2eb3422c93b5c292f.manager.bundle.js.LICENSE.txt ├── favicon.ico ├── iframe.html ├── index.html ├── main.2d69bc10.iframe.bundle.js ├── main.b77887673a4132db2073.manager.bundle.js ├── project.json ├── runtime~main.20b0b20d1f298c057fdf.manager.bundle.js ├── runtime~main.3d1d13af.iframe.bundle.js └── static │ └── media │ ├── australia.17294a46.svg │ ├── canada.d6571367.svg │ ├── germany.06040a36.svg │ ├── japan.4b501c3b.svg │ ├── logo.15f45f33.svg │ ├── sweden.86348702.svg │ ├── switzerland.a197bc40.svg │ ├── united_kingdom.77926389.svg │ └── united_states.0138fef9.svg ├── package-lock.json ├── package.json ├── rollup.config.js ├── src ├── Select.spec.tsx ├── Select.tsx ├── Select.types.ts ├── components │ ├── dropdown │ │ ├── Dropdown.tsx │ │ ├── DropdownItem.tsx │ │ └── SelectAllButton.tsx │ ├── label │ │ └── SelectLabel.tsx │ ├── search │ │ └── Search.tsx │ └── value │ │ ├── SelectValue.tsx │ │ ├── SelectValueClear.tsx │ │ └── SelectValueTags.tsx ├── helpers │ ├── classNames.ts │ ├── events.ts │ ├── fireEvent.ts │ ├── mergeRefs.ts │ └── scrollIntoView.ts ├── index.ts └── select.scss └── tsconfig.json /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | test-coverage 3 | rollup.config.js 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .log 2 | .DS_Store 3 | .jest-* 4 | dist 5 | node_modules 6 | yarn-error.log 7 | build 8 | test-coverage 9 | .npmrc 10 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .github 2 | .jest-cache 3 | .storybook 4 | .vscode 5 | docs 6 | src 7 | test-coverage 8 | .eslintignore 9 | .gitignore 10 | babel.config.js 11 | rollup.config.js 12 | tsconfig.json 13 | yarn.lock 14 | @popperjs 15 | @popperjs/core 16 | -------------------------------------------------------------------------------- /.storybook/Select.story.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { countryOptions } from './static/options.mock'; 4 | import { TemplateSingle, TemplateMultiple, TemplateCustomOptions, TemplateCustomValue } from './templates/'; 5 | import { Select } from '../src/Select'; 6 | import { SelectMultiple, SelectSingle } from '../src/Select.types'; 7 | 8 | 9 | export const Single = TemplateSingle.bind({}); 10 | 11 | Single.storyName = 'Single [default]'; 12 | 13 | Single.parameters = { 14 | actions: false, 15 | controls: false, 16 | options: { 17 | order: 1, 18 | showPanel: false 19 | } 20 | }; 21 | 22 | export const Multiple = TemplateMultiple.bind({}); 23 | 24 | Multiple.parameters = { 25 | actions: false, 26 | controls: false, 27 | options: { 28 | order: 2, 29 | showPanel: false 30 | } 31 | }; 32 | 33 | export const CustomOptions = TemplateCustomOptions.bind({}); 34 | 35 | CustomOptions.storyName = 'Custom Options'; 36 | 37 | CustomOptions.parameters = { 38 | actions: false, 39 | controls: false, 40 | options: { 41 | order: 3, 42 | showPanel: false 43 | } 44 | }; 45 | 46 | export const CustomValue = TemplateCustomValue.bind({}); 47 | 48 | CustomValue.storyName = 'Custom Value'; 49 | 50 | CustomValue.parameters = { 51 | actions: false, 52 | controls: false, 53 | options: { 54 | order: 4, 55 | showPanel: false 56 | } 57 | }; 58 | 59 | const PlaygroundTemplate = ({ multiple, value, ...props }) => { 60 | return ( 61 |
62 |
63 |

Playground

64 | 65 | {multiple ? ( 66 | 69 | )} 70 |
71 |
72 | ); 73 | } 74 | 75 | export default { 76 | title: 'artof-select', 77 | component: PlaygroundTemplate 78 | }; 79 | 80 | 81 | export const Playground = { 82 | storyName: 'Playground', 83 | parameters: { 84 | actions: false, 85 | controls: { 86 | expanded: true 87 | }, 88 | options: { 89 | order: 5, 90 | showPanel: true 91 | } 92 | }, 93 | argTypes: { 94 | multiple: { 95 | description: ' Make the Select as Multiple', 96 | control: 'boolean', 97 | table: { defaultValue: { summary: false } } 98 | }, 99 | label: { 100 | description: 'The label above the Select', 101 | control: 'text', 102 | table: { defaultValue: { summary: 'undefined' } } 103 | }, 104 | labelPosition: { 105 | description: 'Placement for the label Tag', 106 | options: ['before', 'inside', 'after'], 107 | control: { 108 | type: 'select' 109 | }, 110 | table: { defaultValue: { summary: 'before' } } 111 | }, 112 | placeholder: { 113 | description: 'Placeholder will be displayed when no value is selected', 114 | control: 'text', 115 | table: { defaultValue: { summary: 'undefined' } } 116 | }, 117 | value: { 118 | description: 'Selected value(s):
- String for the Single Select
- Strings Array for the Multiple Select', 119 | options: countryOptions.map(item => item.value), 120 | control: { 121 | type: 'select' 122 | } 123 | }, 124 | options: { 125 | description: '
Array of Options
`{\n label?: string | number;\n value?: string;\n component?: ReactNode;\n}[]`
', 126 | table: { defaultValue: { summary: '[]' } } 127 | }, 128 | errorText: { 129 | description: 'Error Text displays under the Select', 130 | control: 'text', 131 | table: { defaultValue: { summary: 'undefined' } } 132 | }, 133 | hintText: { 134 | description: 'Hint text displays under the Select', 135 | control: 'text', 136 | table: { defaultValue: { summary: 'undefined' } } 137 | }, 138 | allowSelectAll: { 139 | description: 'Adds Select All option to the top of options list (prop `textSelectAll` is required)', 140 | control: 'boolean', 141 | table: { defaultValue: { summary: false } } 142 | }, 143 | allowClearAll: { 144 | description: 'Adds a Clear All button', 145 | control: 'boolean', 146 | table: { defaultValue: { summary: false } } 147 | }, 148 | allowSearch: { 149 | description: 'Allow to search', 150 | control: 'boolean', 151 | table: { defaultValue: { summary: false } } 152 | }, 153 | allowMarkWords: { 154 | description: 'Allow to mark search letters', 155 | control: 'boolean', 156 | table: { defaultValue: { summary: true } } 157 | }, 158 | asTags: { 159 | description: ' Display selected value as a Tags', 160 | control: 'boolean', 161 | table: { defaultValue: { summary: false } } 162 | }, 163 | allowRemoveTag: { 164 | description: ' Adds remove control at every item when `asTags=true`', 165 | control: 'boolean', 166 | table: { defaultValue: { summary: false } } 167 | }, 168 | allowTagsCount: { 169 | description: ' Display the selected count, in addition to `asTags=true`', 170 | control: 'boolean', 171 | table: { defaultValue: { summary: false } } 172 | }, 173 | autoFocus: { 174 | description: 'Autofocus at first component render', 175 | control: 'boolean', 176 | table: { defaultValue: { summary: false } } 177 | }, 178 | disabled: { 179 | description: 'Default HTMLSelect attribute', 180 | control: 'boolean', 181 | table: { defaultValue: { summary: false } } 182 | }, 183 | dropdownOffset: { 184 | description: 'Dropdown offset by `number`', 185 | control: 'number', 186 | table: { defaultValue: { summary: 4 } } 187 | }, 188 | dropdownPosition: { 189 | description: 'Placement for the label Tag', 190 | options: [ 191 | 'auto', 192 | 'auto-start', 193 | 'auto-end', 194 | 'top', 195 | 'top-start', 196 | 'top-end', 197 | 'bottom', 198 | 'bottom-start', 199 | 'bottom-end', 200 | 'right', 201 | 'right-start', 202 | 'right-end', 203 | 'left', 204 | 'left-start', 205 | 'left-end' 206 | ], 207 | control: { 208 | type: 'select' 209 | }, 210 | table: { defaultValue: { summary: 'bottom-start' } } 211 | }, 212 | splitterBefore: { 213 | description: 'Show the horizontal line before the option with index', 214 | control: 'number', 215 | table: { defaultValue: { summary: '0' } } 216 | }, 217 | searchPosition: { 218 | description: 'Placement of the Search input field (when `allowSearch=true`)', 219 | options: ['value', 'dropdown'], 220 | control: { 221 | type: 'select' 222 | }, 223 | table: { defaultValue: { summary: 'value' } } 224 | }, 225 | searchPlaceholder: { 226 | description: 'The placeholder text for search input (only when `searchPosition=dropdown`)', 227 | control: 'text', 228 | table: { defaultValue: { summary: 'undefined' } } 229 | }, 230 | textSelected: { 231 | description: ' Translated text for `Selected %n` text (when `asTags=false`)', 232 | control: 'text', 233 | table: { defaultValue: { summary: 'Selected' } } 234 | }, 235 | textSelectAll: { 236 | description: ' Translated text for `Select All` option item text (when `allowSelectAll=true`)', 237 | control: 'text', 238 | table: { defaultValue: { summary: 'Select all' } } 239 | }, 240 | "aria-expanded": { 241 | description: 'Expand the dropdown (default HTMLSelect attribute)', 242 | control: 'boolean', 243 | table: { defaultValue: { summary: false } } 244 | } 245 | }, 246 | args: { 247 | multiple: false, 248 | label: 'Select Country', 249 | options: countryOptions, 250 | placeholder: 'Choose your country', 251 | value: countryOptions[0].value, 252 | labelPosition: 'before', 253 | allowClearAll: false, 254 | allowSearch: true, 255 | allowMarkWords: true, 256 | asTags: false, 257 | allowRemoveTag: false, 258 | allowTagsCount: false, 259 | hintText: 'You should select the country from the list', 260 | allowSelectAll: false, 261 | textSelected: 'Selected', 262 | textSelectAll: 'Select All', 263 | errorText: '', 264 | autoFocus: false, 265 | disabled: false, 266 | dropdownOffset: [0, 4], 267 | dropdownPosition: 'bottom-start', 268 | splitterBefore: 0, 269 | searchPlaceholder: '', 270 | 'aria-expanded': false 271 | } 272 | }; 273 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | core: { 3 | builder: 'webpack5', 4 | }, 5 | stories: [ 6 | './Select.story.tsx' 7 | ], 8 | addons: [ 9 | { 10 | name: 'storybook-addon-sass-postcss', 11 | options: { 12 | sassLoaderOptions: { 13 | implementation: require('sass') 14 | } 15 | } 16 | }, 17 | { 18 | name: '@storybook/addon-essentials', 19 | options: { 20 | actions: false, 21 | }, 22 | }, 23 | '@storybook/addon-controls' 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /.storybook/manager-head.html: -------------------------------------------------------------------------------- 1 | artof-select 2 | 3 | -------------------------------------------------------------------------------- /.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import './static/storybook.manager.css'; 2 | 3 | import addons from '@storybook/addons'; 4 | import { themes } from '@storybook/theming'; 5 | import logo from './static/logo.svg'; 6 | 7 | addons.setConfig({ 8 | sidebar: { 9 | showRoots: false 10 | }, 11 | enableShortcuts: false, 12 | theme: { 13 | ...themes.dark, 14 | brandTitle: 'artof-select', 15 | brandUrl: 'https://github.com/o-mega/artof-select', 16 | brandImage: logo 17 | } 18 | }); 19 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import './static/storybook.preview.scss'; 2 | 3 | export const parameters = { 4 | options: { 5 | storySort: (a, b) => a[1].parameters.options.order > b[1].parameters.options.order, 6 | showPanel: false 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /.storybook/static/australia.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.storybook/static/canada.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.storybook/static/germany.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.storybook/static/index.ts: -------------------------------------------------------------------------------- 1 | // @ts-ignore 2 | import switzerland from './switzerland.svg'; 3 | // @ts-ignore 4 | import canada from './canada.svg'; 5 | // @ts-ignore 6 | import japan from './japan.svg'; 7 | // @ts-ignore 8 | import germany from './germany.svg'; 9 | // @ts-ignore 10 | import australia from './australia.svg'; 11 | // @ts-ignore 12 | import united_kingdom from './united_kingdom.svg'; 13 | // @ts-ignore 14 | import united_states from './united_states.svg'; 15 | // @ts-ignore 16 | import sweden from './sweden.svg'; 17 | 18 | export { 19 | switzerland, 20 | canada, 21 | japan, 22 | germany, 23 | australia, 24 | united_kingdom, 25 | united_states, 26 | sweden 27 | } 28 | -------------------------------------------------------------------------------- /.storybook/static/japan.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.storybook/static/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.storybook/static/options.mock.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { SelectOption } from "../../src"; 3 | import * as flags from './'; 4 | 5 | const industryOptions: SelectOption[] = [ 6 | { 7 | label: 'Accounting', 8 | value: 'accounting' 9 | }, 10 | { 11 | label: 'Administration & Office Support', 12 | value: 'administration' 13 | }, 14 | { 15 | label: 'Advertising, Arts & Media', 16 | value: 'advertising' 17 | }, 18 | { 19 | label: 'Banking & Financial Services', 20 | value: 'banking' 21 | }, 22 | { 23 | label: 'Call Centre & Customer Service', 24 | value: 'call' 25 | }, 26 | { 27 | label: 'Community Services & Development', 28 | value: 'community' 29 | }, 30 | { 31 | label: 'Construction', 32 | value: 'construction' 33 | }, 34 | { 35 | label: 'Consulting & Strategy', 36 | value: 'consulting' 37 | }, 38 | { 39 | label: 'Design & Architechture', 40 | value: 'design' 41 | }, 42 | { 43 | label: 'Education & Training', 44 | value: 'education' 45 | }, 46 | { 47 | label: 'Engineering', 48 | value: 'engineering' 49 | }, 50 | { 51 | label: 'Farming, Animals & Conservation', 52 | value: 'farming' 53 | }, 54 | { 55 | label: 'Government & Defence', 56 | value: 'government' 57 | }, 58 | { 59 | label: 'Healthcare & Medical', 60 | value: 'healthcare' 61 | }, 62 | { 63 | label: 'Hospitality & Tourism', 64 | value: 'hospitality' 65 | }, 66 | { 67 | label: 'Human Resources & Recruitment', 68 | value: 'human' 69 | }, 70 | { 71 | label: 'Information & Communication Technology', 72 | value: 'information' 73 | }, 74 | { 75 | label: 'Insurance & Superannuation', 76 | value: 'insurance' 77 | }, 78 | { 79 | label: 'Legal', 80 | value: 'legal' 81 | }, 82 | { 83 | label: 'Manufacturing, Transport & Logistics', 84 | value: 'manufacturing' 85 | }, 86 | { 87 | label: 'Marketing & Communications', 88 | value: 'marketing' 89 | }, 90 | { 91 | label: 'Mining, Resources & Energy', 92 | value: 'mining' 93 | }, 94 | { 95 | label: 'Real Estate & Property', 96 | value: 'real' 97 | }, 98 | { 99 | label: 'Retail & Consumer Products', 100 | value: 'retail' 101 | }, 102 | { 103 | label: 'Sales', 104 | value: 'sales' 105 | }, 106 | { 107 | label: 'Science & Technology', 108 | value: 'science' 109 | }, 110 | { 111 | label: 'Sport & Recreation', 112 | value: 'sport' 113 | }, 114 | { 115 | label: 'Trades & Services', 116 | value: 'trades' 117 | } 118 | ]; 119 | 120 | const yearsOptions: SelectOption[] = []; 121 | let year = new Date().getFullYear(); 122 | 123 | while (--year > 1900) { 124 | yearsOptions.push({ 125 | value: `${year}`, 126 | label: year 127 | }); 128 | } 129 | 130 | const countryOptions: SelectOption[] = [ 131 | { 132 | label: 'Switzerland', 133 | value: 'ch', 134 | component: ( 135 |
136 | 137 | Switzerland 138 |
139 | ) 140 | }, 141 | { 142 | label: 'Canada', 143 | value: 'ca', 144 | component: ( 145 |
146 | 147 | Canada 148 |
149 | ) 150 | }, 151 | { 152 | label: 'Japan', 153 | value: 'jp', 154 | component: ( 155 |
156 | 157 | Japan 158 |
159 | ) 160 | }, 161 | { 162 | label: 'Germany', 163 | value: 'de', 164 | component: ( 165 |
166 | 167 | Germany 168 |
169 | ) 170 | }, 171 | { 172 | label: 'Australia', 173 | value: 'au', 174 | component: ( 175 |
176 | 177 | Australia 178 |
179 | ) 180 | }, 181 | { 182 | label: 'United Kingdom', 183 | value: 'uk', 184 | component: ( 185 |
186 | 187 | United Kingdom 188 |
189 | ) 190 | }, 191 | { 192 | label: 'United States', 193 | value: 'us', 194 | component: ( 195 |
196 | 197 | United States 198 |
199 | ) 200 | }, 201 | { 202 | label: 'Sweden', 203 | value: 'sw', 204 | component: ( 205 |
206 | 207 | Sweden 208 |
209 | ) 210 | }, 211 | ]; 212 | 213 | export { 214 | industryOptions, 215 | yearsOptions, 216 | countryOptions 217 | } 218 | -------------------------------------------------------------------------------- /.storybook/static/storybook.manager.css: -------------------------------------------------------------------------------- 1 | body, 2 | #storybook-preview-wrapper { 3 | background-color: #f3f3f3 !important; 4 | } 5 | 6 | #storybook-explorer-tree { 7 | margin-top: 16px; 8 | } 9 | 10 | .sidebar-container { 11 | background-color: #212121; 12 | } 13 | 14 | .search-field { 15 | display: none !important; 16 | } 17 | 18 | .sidebar-header > div:first-child { 19 | margin-right: 0 !important; 20 | margin-bottom: 20px; 21 | } 22 | 23 | .sidebar-header > div:first-child > a { 24 | margin: 0 !important; 25 | border: 0 !important; 26 | padding: 0 !important; 27 | } 28 | 29 | .sidebar-header > div:last-child { 30 | display: none !important; 31 | } 32 | 33 | #storybook-explorer-menu { 34 | margin: 0 !important; 35 | } 36 | 37 | #storybook-explorer-tree #artof-select.sidebar-item { 38 | display: none !important; 39 | } 40 | 41 | #storybook-explorer-tree > div > div { 42 | margin: 0; 43 | } 44 | 45 | #storybook-explorer-tree .sidebar-item { 46 | color: #aaa; 47 | font-size: 14px; 48 | padding-top: 7px; 49 | padding-bottom: 7px; 50 | } 51 | 52 | #storybook-explorer-tree .sidebar-item span { 53 | border-top-width: 4px; 54 | border-bottom-width: 4px; 55 | border-left-width: 4px; 56 | margin-right: 10px; 57 | } 58 | 59 | #storybook-explorer-tree .sidebar-item svg { 60 | width: 14px; 61 | height: 14px; 62 | } 63 | 64 | #storybook-explorer-tree .sidebar-item[data-selected="true"] { 65 | color: #fff; 66 | font-weight: 400; 67 | } 68 | 69 | .os-host + div { 70 | top: 0 !important; 71 | height: 100% !important; 72 | } 73 | 74 | #root > div > div > div { 75 | box-shadow: none !important; 76 | } 77 | 78 | #root > div > div:last-child { 79 | top: 0 !important; 80 | } 81 | 82 | [role="main"] #storybook-panel-root > .os-host { 83 | display: none !important; 84 | } 85 | 86 | #root > div { 87 | background-color: #333333; 88 | } 89 | 90 | #panel-tab-content .os-content select { 91 | background: #3f3f3f url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23aaa' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 10px center / 10px 10px; 92 | -webkit-appearance: none; 93 | -moz-appearance: none; 94 | text-indent: 1px; 95 | text-overflow: ''; 96 | } 97 | 98 | #panel-tab-content .os-content > form > label { 99 | align-items: flex-start; 100 | } 101 | 102 | #panel-tab-content .os-content > form > label > span:first-child { 103 | width: 250px; 104 | white-space: pre-wrap; 105 | font-weight: 400; 106 | } 107 | 108 | #panel-tab-content .os-content > form > label > span:first-child > span:first-line { 109 | font-weight: 700; 110 | line-height: 2em; 111 | } 112 | 113 | #panel-tab-content .os-content textarea { 114 | resize: none; 115 | } 116 | 117 | #panel-tab-content .os-content input[type=number] { 118 | max-width: 100px; 119 | } 120 | 121 | .badge-multiple { 122 | display: inline-block; 123 | margin-right: 10px; 124 | background-color: #ffb736; 125 | padding: 2px 4px; 126 | line-height: 1; 127 | color: #000; 128 | font-size: 12px; 129 | border-radius: 3px; 130 | } 131 | 132 | .badge-multiple:before { 133 | content: "Multiple"; 134 | } 135 | 136 | .custom-code > code { 137 | margin-top: 5px !important; 138 | white-space: pre-wrap !important; 139 | line-height: 1.4 !important; 140 | } 141 | -------------------------------------------------------------------------------- /.storybook/static/storybook.preview.scss: -------------------------------------------------------------------------------- 1 | .sb-show-main.sb-main-padded { 2 | padding: 30px; 3 | } 4 | 5 | .story__select-wrapper { 6 | display: flex; 7 | width: 100%; 8 | } 9 | 10 | .story__select-col { 11 | flex: 0 0 50%; 12 | max-width: 50%; 13 | padding: 0 15px; 14 | box-sizing: border-box; 15 | } 16 | 17 | .flag_option { 18 | display: flex; 19 | height: 1.4376521739rem; 20 | align-items: center; 21 | line-height: 1; 22 | } 23 | 24 | .flag_option img { 25 | margin-right: 5px; 26 | } 27 | 28 | .select--multiple .select__tag .flag_option span { 29 | display: none; 30 | } 31 | 32 | .select--multiple .select__tag .flag_option img { 33 | margin-right: 0; 34 | } 35 | -------------------------------------------------------------------------------- /.storybook/static/sweden.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.storybook/static/switzerland.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.storybook/static/united_kingdom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.storybook/static/united_states.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.storybook/templates/SelectMiltipleExample.tsx: -------------------------------------------------------------------------------- 1 | import '../../src/select.scss'; 2 | 3 | import React, { useState } from "react"; 4 | 5 | import { Select } from "../../src/Select"; 6 | import { SelectMultiple } from "../../src/Select.types"; 7 | 8 | export const SelectMiltipleExample = (props: SelectMultiple) => { 9 | const [selected, setSelected] = useState(props.value); 10 | 11 | const onChange = (values: string[]): void => { 12 | setSelected(values); 13 | }; 14 | 15 | return ( 16 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /.storybook/templates/TemplateCustomOptions.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { SelectSingleExample } from "./SelectSingleExample"; 4 | import { SelectMiltipleExample } from "./SelectMiltipleExample"; 5 | import { countryOptions } from '../static/options.mock'; 6 | 7 | export const TemplateCustomOptions = () => { 8 | return ( 9 |
10 |
11 |

Single Select

12 | 13 | 20 |
21 | 22 |
23 |

Multiple Select

24 | 25 | 34 |
35 |
36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /.storybook/templates/TemplateCustomValue.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | import { countryOptions } from '../static/options.mock'; 4 | import { Select } from "../../src/Select"; 5 | 6 | export const TemplateCustomValue = () => { 7 | const [selected, setSelected] = useState(['ca', 'us', 'sw']); 8 | 9 | const onChange = (values: string[]): void => { 10 | setSelected(values); 11 | }; 12 | 13 | const handleRemove = (value?: string | number): void => { 14 | if (!!selected?.length) { 15 | onChange(selected.filter(item => value !== item)); 16 | } 17 | }; 18 | 19 | return ( 20 |
21 |
22 |

Custom Value Render

23 | 24 | 54 | ) 55 | } 56 | ``` 57 | 58 | ## Props 59 | 60 | Common props you may want to specify include: 61 | 62 | | Props | Default | Description | 63 | | ------------------ | -------------- | ------------------------------------------------------------- | 64 | | `allowClearAll` | `false` | Add button to clear the selection | 65 | | `allowMarkWords` | `true` | Wrap keywords with `` for `allowSearch={true}` | 66 | | `allowRemoveTag` | `false` | Add additional close icon for every tag, when `asTags={true}` | 67 | | `allowSearch` | `false` | Allow the user to search for inside options | 68 | | `allowSelectAll` | `false` | Include _Select All_ button with `multiple` options | 69 | | `allowTagsCount` | `false` | Add counter before selected tags, when `asTags={true}` | 70 | | `aria-expanded` | `false` | If `true` - can open the Dropdown on init | 71 | | `asTags` | `false` | Use with `multiple={true}` to display selections as tags | 72 | | `autoFocus` | `undefined` | Default `` | 75 | | `disabled` | `undefined` | Default ``'s attribute | 80 | | `hintText` | `undefined` | A text below the Select (and under the `errorText`) | 81 | | `id` | `undefined` | Default ``'s attribute | 86 | | `onBlur` | `undefined` | Handle the Blur event | 87 | | `onFocus` | `undefined` | Handle the Focus event | 88 | | `onKeyDown` | `undefined` | Handle the KeyDown event | 89 | | `onKeyUp` | `undefined` | Handle the KeyUp event | 90 | | `onToggle` | `undefined` | To handle th Dropdown open\close state | 91 | | `onSearchChange` | `undefined` | Handle the SearchChange event | 92 | | `options` | `[]` | Specify the options the user can select from | 93 | | `placeholder` | `undefined` | The text displayed when no option is selected | 94 | | `renderValue` | `undefined` | A function, that can render custom selected value | 95 | | `required` | `undefined` | Default ``'s attribute | 100 | | `textSelectAll` | `Select all` | A translation text _Select All_ if `allowSelectAll={true}` | 101 | | `textSelected` | `Selected` | A translation text _Selected_ %n if `multiple={true}` | 102 | | `value` | `undefined` | Current value. A string or an string[] if `multiple={true}` | 103 | 104 | Also, the `onChange` prop can return `event: React.ChangeEvent` or `values: string[]` depend on multiple option. 105 | 106 | In addition to above props, you can get access to the `Select` component with `ref`. 107 | This will allow you to force some events, like: `selectRef.current?.focus()` 108 | 109 | ## Run the Demo from local 110 | 111 | You can check out the demo: 112 | ```sh 113 | git clone https://github.com/o-mega/artof-select.git 114 | cd artof-select 115 | npm install 116 | npm run dev 117 | ``` 118 | 119 | This commands should run the Storybook with designed examples at `http://localhost:6006` 120 | 121 | ## License 122 | 123 | MIT Licensed. Copyright (c) Oleg Frolov 124 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | "@babel/preset-typescript", 4 | [ 5 | "@babel/preset-env", 6 | { 7 | targets: { 8 | esmodules: true, 9 | }, 10 | }, 11 | ], 12 | "@babel/preset-react", 13 | ], 14 | ignore: ["node_modules/**"], 15 | exclude: /node_modules/, 16 | plugins: [], 17 | }; 18 | -------------------------------------------------------------------------------- /docs/295.223eb9bec083eddc34fe.manager.bundle.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunkartof_select=self.webpackChunkartof_select||[]).push([[295],{19295:module=>{module.exports=function(e,n){return n=n||{},new Promise((function(t,r){var s=new XMLHttpRequest,o=[],u=[],i={},a=function(){return{ok:2==(s.status/100|0),statusText:s.statusText,status:s.status,url:s.responseURL,text:function(){return Promise.resolve(s.responseText)},json:function(){return Promise.resolve(s.responseText).then(JSON.parse)},blob:function(){return Promise.resolve(new Blob([s.response]))},clone:a,headers:{keys:function(){return o},entries:function(){return u},get:function(e){return i[e.toLowerCase()]},has:function(e){return e.toLowerCase()in i}}}};for(var l in s.open(n.method||"get",e,!0),s.onload=function(){s.getAllResponseHeaders().replace(/^(.*?):[^\S\n]*([\s\S]*?)$/gm,(function(e,n,t){o.push(n=n.toLowerCase()),u.push([n,t]),i[n]=i[n]?i[n]+","+t:t})),t(a())},s.onerror=r,s.withCredentials="include"==n.credentials,n.headers)s.setRequestHeader(l,n.headers[l]);s.send(n.body||null)}))}}}]); -------------------------------------------------------------------------------- /docs/51.6d936426.iframe.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /** 2 | * Prism: Lightweight, robust, elegant syntax highlighting 3 | * 4 | * @license MIT 5 | * @author Lea Verou 6 | * @namespace 7 | * @public 8 | */ 9 | -------------------------------------------------------------------------------- /docs/51.ed6f355dc48523569782.manager.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /** 2 | * Prism: Lightweight, robust, elegant syntax highlighting 3 | * 4 | * @license MIT 5 | * @author Lea Verou 6 | * @namespace 7 | * @public 8 | */ 9 | -------------------------------------------------------------------------------- /docs/551.13dd1811.iframe.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunkartof_select=self.webpackChunkartof_select||[]).push([[551],{"./node_modules/@storybook/components/dist/esm/GlobalScrollAreaStyles-8793ce4a.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>GlobalScrollAreaStyles,getScrollAreaStyles:()=>getScrollAreaStyles});__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.object.freeze.js");var _templateObject,react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/index.js"),_storybook_theming__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@storybook/theming/dist/esm/index.js");var hsResizeObserverDummyAnimation=(0,_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.F4)(_templateObject||(_templateObject=function _taggedTemplateLiteral(strings,raw){return raw||(raw=strings.slice(0)),Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))}(["0%{z-index:0}to{z-index:-1}"]))),getScrollAreaStyles=function getScrollAreaStyles(theme){return{"html.os-html, html.os-html>.os-host":{display:"block",overflow:"hidden",boxSizing:"border-box",height:"100%!important",width:"100%!important",minWidth:"100%!important",minHeight:"100%!important",margin:"0!important",position:"absolute!important"},"html.os-html>.os-host>.os-padding":{position:"absolute"},"body.os-dragging, body.os-dragging *":{cursor:"default"},".os-host, .os-host-textarea":{position:"relative",overflow:"visible!important",flexDirection:"column",flexWrap:"nowrap",justifyContent:"flex-start",alignContent:"flex-start",alignItems:"flex-start"},".os-host-flexbox":{overflow:"hidden!important",display:"flex"},".os-host-flexbox>.os-size-auto-observer":{height:"inherit!important"},".os-host-flexbox>.os-content-glue":{flexGrow:1,flexShrink:0},".os-host-flexbox>.os-size-auto-observer, .os-host-flexbox>.os-content-glue":{minHeight:0,minWidth:0,flexGrow:0,flexShrink:1,flexBasis:"auto"},"#os-dummy-scrollbar-size":{position:"fixed",opacity:0,visibility:"hidden",overflow:"scroll",height:500,width:500},"#os-dummy-scrollbar-size>div":{width:"200%",height:"200%",margin:10},"#os-dummy-scrollbar-size, .os-viewport":{},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size, .os-viewport-native-scrollbars-invisible.os-viewport":{scrollbarWidth:"none!important"},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner":{display:"none!important",width:"0!important",height:"0!important",visibility:"hidden!important",background:"0 0!important"},".os-content-glue":{boxSizing:"inherit",maxHeight:"100%",maxWidth:"100%",width:"100%",pointerEvents:"none"},".os-padding":{boxSizing:"inherit",direction:"inherit",position:"absolute",overflow:"visible",padding:0,margin:0,left:0,top:0,bottom:0,right:0,width:"auto!important",height:"auto!important",zIndex:1},".os-host-overflow>.os-padding":{overflow:"hidden"},".os-viewport":{direction:"inherit!important",boxSizing:"inherit!important",resize:"none!important",outline:"0!important",position:"absolute",overflow:"hidden",top:0,left:0,bottom:0,right:0,padding:0,margin:0},".os-content-arrange":{position:"absolute",zIndex:-1,minHeight:1,minWidth:1,pointerEvents:"none"},".os-content":{direction:"inherit",boxSizing:"border-box!important",position:"relative",display:"block",height:"100%",width:"100%",visibility:"visible"},".os-content:before, .os-content:after":{content:"''",display:"table",width:0,height:0,lineHeight:0,fontSize:0},".os-content>.os-textarea":{boxSizing:"border-box!important",direction:"inherit!important",background:"0 0!important",outline:"0 transparent!important",overflow:"hidden!important",position:"absolute!important",display:"block!important",top:"0!important",left:"0!important",margin:"0!important",borderRadius:"0!important",float:"none!important",filter:"none!important",border:"0!important",resize:"none!important",transform:"none!important",maxWidth:"none!important",maxHeight:"none!important",boxShadow:"none!important",perspective:"none!important",opacity:"1!important",zIndex:"1!important",clip:"auto!important",verticalAlign:"baseline!important",padding:0},".os-host-rtl>.os-padding>.os-viewport>.os-content>.os-textarea":{right:"0!important"},".os-content>.os-textarea-cover":{zIndex:-1,pointerEvents:"none"},".os-content>.os-textarea[wrap=off]":{whiteSpace:"pre!important",margin:"0!important"},".os-text-inherit":{fontFamily:"inherit",fontSize:"inherit",fontWeight:"inherit",fontStyle:"inherit",fontVariant:"inherit",textTransform:"inherit",textDecoration:"inherit",textIndent:"inherit",textAlign:"inherit",textShadow:"inherit",textOverflow:"inherit",letterSpacing:"inherit",wordSpacing:"inherit",lineHeight:"inherit",unicodeBidi:"inherit",direction:"inherit",color:"inherit",cursor:"text"},".os-resize-observer, .os-resize-observer-host":{boxSizing:"inherit",display:"block",opacity:0,position:"absolute",top:0,left:0,height:"100%",width:"100%",overflow:"hidden",pointerEvents:"none",zIndex:-1},".os-resize-observer-host":{padding:"inherit",border:"inherit",borderColor:"transparent",borderStyle:"solid",boxSizing:"border-box"},".os-resize-observer-host:after":{content:"''"},".os-resize-observer-host>.os-resize-observer, .os-resize-observer-host:after":{height:"200%",width:"200%",padding:"inherit",border:"inherit",margin:0,display:"block",boxSizing:"content-box"},".os-resize-observer.observed, object.os-resize-observer":{boxSizing:"border-box!important"},".os-size-auto-observer":{boxSizing:"inherit!important",height:"100%",width:"inherit",maxWidth:1,position:"relative",float:"left",maxHeight:1,overflow:"hidden",zIndex:-1,padding:0,margin:0,pointerEvents:"none",flexGrow:"inherit",flexShrink:0,flexBasis:0},".os-size-auto-observer>.os-resize-observer":{width:"1000%",height:"1000%",minHeight:1,minWidth:1},".os-resize-observer-item":{position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden",zIndex:-1,opacity:0,direction:"ltr!important",flex:"none!important"},".os-resize-observer-item-final":{position:"absolute",left:0,top:0,transition:"none!important",flex:"none!important"},".os-resize-observer":{animationDuration:".001s",animationName:"".concat(hsResizeObserverDummyAnimation)},".os-host-transition>.os-scrollbar, .os-host-transition>.os-scrollbar-corner":{transition:"opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s"},"html.os-html>.os-host>.os-scrollbar":{position:"absolute",zIndex:999999},".os-scrollbar, .os-scrollbar-corner":{position:"absolute",opacity:1,zIndex:1},".os-scrollbar-corner":{bottom:0,right:0,height:10,width:10,backgroundColor:"transparent"},".os-scrollbar":{pointerEvents:"none",padding:2,boxSizing:"border-box",background:0},".os-scrollbar-track":{pointerEvents:"auto",position:"relative",height:"100%",width:"100%",padding:"0!important",border:"0!important"},".os-scrollbar-handle":{pointerEvents:"auto",position:"absolute",width:"100%",height:"100%"},".os-scrollbar-handle-off, .os-scrollbar-track-off":{pointerEvents:"none"},".os-scrollbar.os-scrollbar-unusable, .os-scrollbar.os-scrollbar-unusable *":{pointerEvents:"none!important"},".os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle":{opacity:"0!important"},".os-scrollbar-horizontal":{bottom:0,left:0,right:10,height:10},".os-scrollbar-vertical":{top:0,right:0,bottom:10,width:10},".os-host-rtl>.os-scrollbar-horizontal":{right:0},".os-host-rtl>.os-scrollbar-vertical":{right:"auto",left:0},".os-host-rtl>.os-scrollbar-corner":{right:"auto",left:0},".os-scrollbar-auto-hidden, .os-padding+.os-scrollbar-corner, .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-corner, .os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal, .os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-corner, .os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical+.os-scrollbar-corner, .os-scrollbar-horizontal+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner":{opacity:0,visibility:"hidden",pointerEvents:"none"},".os-scrollbar-corner-resize-both":{cursor:"nwse-resize"},".os-host-rtl>.os-scrollbar-corner-resize-both":{cursor:"nesw-resize"},".os-scrollbar-corner-resize-horizontal":{cursor:"ew-resize"},".os-scrollbar-corner-resize-vertical":{cursor:"ns-resize"},".os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize":{cursor:"default"},".os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical":{top:0,bottom:0},".os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal, .os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal":{right:0,left:0},".os-scrollbar:hover, .os-scrollbar-corner.os-scrollbar-corner-resize":{opacity:"1!important",visibility:"visible!important"},".os-scrollbar-corner.os-scrollbar-corner-resize":{backgroundImage:"linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 100%)",backgroundRepeat:"no-repeat",backgroundPosition:"100% 100%",pointerEvents:"auto!important"},".os-host-rtl>.os-scrollbar-corner.os-scrollbar-corner-resize":{transform:"scale(-1,1)"},".os-host-overflow":{overflow:"hidden!important"},".os-theme-dark.os-host-rtl>.os-scrollbar-horizontal":{left:10,right:0},".os-scrollbar.os-scrollbar-unusable":{background:0},".os-scrollbar>.os-scrollbar-track":{background:0},".os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle":{minWidth:30},".os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle":{minHeight:30},".os-theme-dark.os-host-transition>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{transition:"background-color .3s"},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle, .os-scrollbar>.os-scrollbar-track":{borderRadius:10},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{background:theme.color.mediumdark,opacity:.5},".os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle":{opacity:.6},".os-scrollbar-horizontal .os-scrollbar-handle:before, .os-scrollbar-vertical .os-scrollbar-handle:before":{content:"''",position:"absolute",left:0,right:0,top:0,bottom:0,display:"block"},".os-theme-dark.os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-theme-dark.os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical .os-scrollbar-handle:before":{display:"none"},".os-scrollbar-horizontal .os-scrollbar-handle:before":{top:-6,bottom:-2},".os-scrollbar-vertical .os-scrollbar-handle:before":{left:-6,right:-2},".os-host-rtl.os-scrollbar-vertical .os-scrollbar-handle:before":{right:-6,left:-2}}},GlobalScrollAreaStyles=function GlobalScrollAreaStyles(){return react__WEBPACK_IMPORTED_MODULE_2__.createElement(_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.xB,{styles:getScrollAreaStyles})}}}]); -------------------------------------------------------------------------------- /docs/551.a6b072fedcf773ca497f.manager.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunkartof_select=self.webpackChunkartof_select||[]).push([[551],{82551:(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>GlobalScrollAreaStyles,getScrollAreaStyles:()=>getScrollAreaStyles});__webpack_require__(47042),__webpack_require__(43371);var _templateObject,react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(67294),_storybook_theming__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(65316);var hsResizeObserverDummyAnimation=(0,_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.F4)(_templateObject||(_templateObject=function _taggedTemplateLiteral(strings,raw){return raw||(raw=strings.slice(0)),Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))}(["0%{z-index:0}to{z-index:-1}"]))),getScrollAreaStyles=function getScrollAreaStyles(theme){return{"html.os-html, html.os-html>.os-host":{display:"block",overflow:"hidden",boxSizing:"border-box",height:"100%!important",width:"100%!important",minWidth:"100%!important",minHeight:"100%!important",margin:"0!important",position:"absolute!important"},"html.os-html>.os-host>.os-padding":{position:"absolute"},"body.os-dragging, body.os-dragging *":{cursor:"default"},".os-host, .os-host-textarea":{position:"relative",overflow:"visible!important",flexDirection:"column",flexWrap:"nowrap",justifyContent:"flex-start",alignContent:"flex-start",alignItems:"flex-start"},".os-host-flexbox":{overflow:"hidden!important",display:"flex"},".os-host-flexbox>.os-size-auto-observer":{height:"inherit!important"},".os-host-flexbox>.os-content-glue":{flexGrow:1,flexShrink:0},".os-host-flexbox>.os-size-auto-observer, .os-host-flexbox>.os-content-glue":{minHeight:0,minWidth:0,flexGrow:0,flexShrink:1,flexBasis:"auto"},"#os-dummy-scrollbar-size":{position:"fixed",opacity:0,visibility:"hidden",overflow:"scroll",height:500,width:500},"#os-dummy-scrollbar-size>div":{width:"200%",height:"200%",margin:10},"#os-dummy-scrollbar-size, .os-viewport":{},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size, .os-viewport-native-scrollbars-invisible.os-viewport":{scrollbarWidth:"none!important"},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner":{display:"none!important",width:"0!important",height:"0!important",visibility:"hidden!important",background:"0 0!important"},".os-content-glue":{boxSizing:"inherit",maxHeight:"100%",maxWidth:"100%",width:"100%",pointerEvents:"none"},".os-padding":{boxSizing:"inherit",direction:"inherit",position:"absolute",overflow:"visible",padding:0,margin:0,left:0,top:0,bottom:0,right:0,width:"auto!important",height:"auto!important",zIndex:1},".os-host-overflow>.os-padding":{overflow:"hidden"},".os-viewport":{direction:"inherit!important",boxSizing:"inherit!important",resize:"none!important",outline:"0!important",position:"absolute",overflow:"hidden",top:0,left:0,bottom:0,right:0,padding:0,margin:0},".os-content-arrange":{position:"absolute",zIndex:-1,minHeight:1,minWidth:1,pointerEvents:"none"},".os-content":{direction:"inherit",boxSizing:"border-box!important",position:"relative",display:"block",height:"100%",width:"100%",visibility:"visible"},".os-content:before, .os-content:after":{content:"''",display:"table",width:0,height:0,lineHeight:0,fontSize:0},".os-content>.os-textarea":{boxSizing:"border-box!important",direction:"inherit!important",background:"0 0!important",outline:"0 transparent!important",overflow:"hidden!important",position:"absolute!important",display:"block!important",top:"0!important",left:"0!important",margin:"0!important",borderRadius:"0!important",float:"none!important",filter:"none!important",border:"0!important",resize:"none!important",transform:"none!important",maxWidth:"none!important",maxHeight:"none!important",boxShadow:"none!important",perspective:"none!important",opacity:"1!important",zIndex:"1!important",clip:"auto!important",verticalAlign:"baseline!important",padding:0},".os-host-rtl>.os-padding>.os-viewport>.os-content>.os-textarea":{right:"0!important"},".os-content>.os-textarea-cover":{zIndex:-1,pointerEvents:"none"},".os-content>.os-textarea[wrap=off]":{whiteSpace:"pre!important",margin:"0!important"},".os-text-inherit":{fontFamily:"inherit",fontSize:"inherit",fontWeight:"inherit",fontStyle:"inherit",fontVariant:"inherit",textTransform:"inherit",textDecoration:"inherit",textIndent:"inherit",textAlign:"inherit",textShadow:"inherit",textOverflow:"inherit",letterSpacing:"inherit",wordSpacing:"inherit",lineHeight:"inherit",unicodeBidi:"inherit",direction:"inherit",color:"inherit",cursor:"text"},".os-resize-observer, .os-resize-observer-host":{boxSizing:"inherit",display:"block",opacity:0,position:"absolute",top:0,left:0,height:"100%",width:"100%",overflow:"hidden",pointerEvents:"none",zIndex:-1},".os-resize-observer-host":{padding:"inherit",border:"inherit",borderColor:"transparent",borderStyle:"solid",boxSizing:"border-box"},".os-resize-observer-host:after":{content:"''"},".os-resize-observer-host>.os-resize-observer, .os-resize-observer-host:after":{height:"200%",width:"200%",padding:"inherit",border:"inherit",margin:0,display:"block",boxSizing:"content-box"},".os-resize-observer.observed, object.os-resize-observer":{boxSizing:"border-box!important"},".os-size-auto-observer":{boxSizing:"inherit!important",height:"100%",width:"inherit",maxWidth:1,position:"relative",float:"left",maxHeight:1,overflow:"hidden",zIndex:-1,padding:0,margin:0,pointerEvents:"none",flexGrow:"inherit",flexShrink:0,flexBasis:0},".os-size-auto-observer>.os-resize-observer":{width:"1000%",height:"1000%",minHeight:1,minWidth:1},".os-resize-observer-item":{position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden",zIndex:-1,opacity:0,direction:"ltr!important",flex:"none!important"},".os-resize-observer-item-final":{position:"absolute",left:0,top:0,transition:"none!important",flex:"none!important"},".os-resize-observer":{animationDuration:".001s",animationName:"".concat(hsResizeObserverDummyAnimation)},".os-host-transition>.os-scrollbar, .os-host-transition>.os-scrollbar-corner":{transition:"opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s"},"html.os-html>.os-host>.os-scrollbar":{position:"absolute",zIndex:999999},".os-scrollbar, .os-scrollbar-corner":{position:"absolute",opacity:1,zIndex:1},".os-scrollbar-corner":{bottom:0,right:0,height:10,width:10,backgroundColor:"transparent"},".os-scrollbar":{pointerEvents:"none",padding:2,boxSizing:"border-box",background:0},".os-scrollbar-track":{pointerEvents:"auto",position:"relative",height:"100%",width:"100%",padding:"0!important",border:"0!important"},".os-scrollbar-handle":{pointerEvents:"auto",position:"absolute",width:"100%",height:"100%"},".os-scrollbar-handle-off, .os-scrollbar-track-off":{pointerEvents:"none"},".os-scrollbar.os-scrollbar-unusable, .os-scrollbar.os-scrollbar-unusable *":{pointerEvents:"none!important"},".os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle":{opacity:"0!important"},".os-scrollbar-horizontal":{bottom:0,left:0,right:10,height:10},".os-scrollbar-vertical":{top:0,right:0,bottom:10,width:10},".os-host-rtl>.os-scrollbar-horizontal":{right:0},".os-host-rtl>.os-scrollbar-vertical":{right:"auto",left:0},".os-host-rtl>.os-scrollbar-corner":{right:"auto",left:0},".os-scrollbar-auto-hidden, .os-padding+.os-scrollbar-corner, .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-corner, .os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal, .os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-corner, .os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical+.os-scrollbar-corner, .os-scrollbar-horizontal+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner":{opacity:0,visibility:"hidden",pointerEvents:"none"},".os-scrollbar-corner-resize-both":{cursor:"nwse-resize"},".os-host-rtl>.os-scrollbar-corner-resize-both":{cursor:"nesw-resize"},".os-scrollbar-corner-resize-horizontal":{cursor:"ew-resize"},".os-scrollbar-corner-resize-vertical":{cursor:"ns-resize"},".os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize":{cursor:"default"},".os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical":{top:0,bottom:0},".os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal, .os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal":{right:0,left:0},".os-scrollbar:hover, .os-scrollbar-corner.os-scrollbar-corner-resize":{opacity:"1!important",visibility:"visible!important"},".os-scrollbar-corner.os-scrollbar-corner-resize":{backgroundImage:"linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 100%)",backgroundRepeat:"no-repeat",backgroundPosition:"100% 100%",pointerEvents:"auto!important"},".os-host-rtl>.os-scrollbar-corner.os-scrollbar-corner-resize":{transform:"scale(-1,1)"},".os-host-overflow":{overflow:"hidden!important"},".os-theme-dark.os-host-rtl>.os-scrollbar-horizontal":{left:10,right:0},".os-scrollbar.os-scrollbar-unusable":{background:0},".os-scrollbar>.os-scrollbar-track":{background:0},".os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle":{minWidth:30},".os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle":{minHeight:30},".os-theme-dark.os-host-transition>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{transition:"background-color .3s"},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle, .os-scrollbar>.os-scrollbar-track":{borderRadius:10},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{background:theme.color.mediumdark,opacity:.5},".os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle":{opacity:.6},".os-scrollbar-horizontal .os-scrollbar-handle:before, .os-scrollbar-vertical .os-scrollbar-handle:before":{content:"''",position:"absolute",left:0,right:0,top:0,bottom:0,display:"block"},".os-theme-dark.os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-theme-dark.os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical .os-scrollbar-handle:before":{display:"none"},".os-scrollbar-horizontal .os-scrollbar-handle:before":{top:-6,bottom:-2},".os-scrollbar-vertical .os-scrollbar-handle:before":{left:-6,right:-2},".os-host-rtl.os-scrollbar-vertical .os-scrollbar-handle:before":{right:-6,left:-2}}},GlobalScrollAreaStyles=function GlobalScrollAreaStyles(){return react__WEBPACK_IMPORTED_MODULE_2__.createElement(_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.xB,{styles:getScrollAreaStyles})}}}]); -------------------------------------------------------------------------------- /docs/667.3b41f2fd.iframe.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /*! 8 | * The buffer module from node.js, for the browser. 9 | * 10 | * @author Feross Aboukhadijeh 11 | * @license MIT 12 | */ 13 | 14 | /*! 15 | * https://github.com/es-shims/es5-shim 16 | * @license es5-shim Copyright 2009-2020 by contributors, MIT License 17 | * see https://github.com/es-shims/es5-shim/blob/master/LICENSE 18 | */ 19 | 20 | /*! 21 | * is-plain-object 22 | * 23 | * Copyright (c) 2014-2017, Jon Schlinkert. 24 | * Released under the MIT License. 25 | */ 26 | 27 | /*! 28 | * isobject 29 | * 30 | * Copyright (c) 2014-2017, Jon Schlinkert. 31 | * Released under the MIT License. 32 | */ 33 | 34 | /** 35 | * @license React 36 | * react-dom.production.min.js 37 | * 38 | * Copyright (c) Facebook, Inc. and its affiliates. 39 | * 40 | * This source code is licensed under the MIT license found in the 41 | * LICENSE file in the root directory of this source tree. 42 | */ 43 | 44 | /** 45 | * @license React 46 | * react-jsx-runtime.production.min.js 47 | * 48 | * Copyright (c) Facebook, Inc. and its affiliates. 49 | * 50 | * This source code is licensed under the MIT license found in the 51 | * LICENSE file in the root directory of this source tree. 52 | */ 53 | 54 | /** 55 | * @license React 56 | * react.production.min.js 57 | * 58 | * Copyright (c) Facebook, Inc. and its affiliates. 59 | * 60 | * This source code is licensed under the MIT license found in the 61 | * LICENSE file in the root directory of this source tree. 62 | */ 63 | 64 | /** 65 | * @license React 66 | * scheduler.production.min.js 67 | * 68 | * Copyright (c) Facebook, Inc. and its affiliates. 69 | * 70 | * This source code is licensed under the MIT license found in the 71 | * LICENSE file in the root directory of this source tree. 72 | */ 73 | 74 | /** @license React v17.0.2 75 | * react-is.production.min.js 76 | * 77 | * Copyright (c) Facebook, Inc. and its affiliates. 78 | * 79 | * This source code is licensed under the MIT license found in the 80 | * LICENSE file in the root directory of this source tree. 81 | */ 82 | 83 | //! stable.js 0.1.8, https://github.com/Two-Screen/stable 84 | 85 | //! © 2018 Angry Bytes and contributors. MIT licensed. 86 | -------------------------------------------------------------------------------- /docs/701.ba29fb31.iframe.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunkartof_select=self.webpackChunkartof_select||[]).push([[701],{"./node_modules/@storybook/preview-web/dist/esm/renderDocs.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{renderDocs:()=>renderDocs,unmountDocs:()=>unmountDocs});__webpack_require__("./node_modules/regenerator-runtime/runtime.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.promise.js");var react=__webpack_require__("./node_modules/react/index.js"),react_dom=__webpack_require__("./node_modules/react-dom/index.js"),wrapper={fontSize:"14px",letterSpacing:"0.2px",margin:"10px 0"},main={margin:"auto",padding:30,borderRadius:10,background:"rgba(0,0,0,0.03)"},heading={textAlign:"center"},NoDocs=function NoDocs(){return react.createElement("div",{style:wrapper,className:"sb-nodocs sb-wrapper"},react.createElement("div",{style:main},react.createElement("h1",{style:heading},"No Docs"),react.createElement("p",null,"Sorry, but there are no docs for the selected story. To add them, set the story's ",react.createElement("code",null,"docs")," parameter. If you think this is an error:"),react.createElement("ul",null,react.createElement("li",null,"Please check the story definition."),react.createElement("li",null,"Please check the Storybook config."),react.createElement("li",null,"Try reloading the page.")),react.createElement("p",null,"If the problem persists, check the browser console, or the terminal you've run Storybook from.")))};function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}function renderDocs(story,docsContext,element,callback){return function renderDocsAsync(_x,_x2,_x3){return _renderDocsAsync.apply(this,arguments)}(story,docsContext,element).then(callback)}function _renderDocsAsync(){return(_renderDocsAsync=_asyncToGenerator(regeneratorRuntime.mark((function _callee(story,docsContext,element){var _docs$getContainer,_docs$getPage,docs,DocsContainer,Page,docsElement;return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:if(!(null!=(docs=story.parameters.docs)&&docs.getPage||null!=docs&&docs.page)||(null!=docs&&docs.getContainer||null!=docs&&docs.container)){_context.next=3;break}throw new Error("No `docs.container` set, did you run `addon-docs/preset`?");case 3:if(_context.t1=docs.container,_context.t1){_context.next=8;break}return _context.next=7,null===(_docs$getContainer=docs.getContainer)||void 0===_docs$getContainer?void 0:_docs$getContainer.call(docs);case 7:_context.t1=_context.sent;case 8:if(_context.t0=_context.t1,_context.t0){_context.next=11;break}_context.t0=function(_ref){var children=_ref.children;return react.createElement(react.Fragment,null,children)};case 11:if(DocsContainer=_context.t0,_context.t3=docs.page,_context.t3){_context.next=17;break}return _context.next=16,null===(_docs$getPage=docs.getPage)||void 0===_docs$getPage?void 0:_docs$getPage.call(docs);case 16:_context.t3=_context.sent;case 17:if(_context.t2=_context.t3,_context.t2){_context.next=20;break}_context.t2=NoDocs;case 20:return Page=_context.t2,docsElement=react.createElement(DocsContainer,{key:story.componentId,context:docsContext},react.createElement(Page,null)),_context.next=24,new Promise((function(resolve){react_dom.render(docsElement,element,resolve)}));case 24:case"end":return _context.stop()}}),_callee)})))).apply(this,arguments)}function unmountDocs(element){react_dom.unmountComponentAtNode(element)}NoDocs.displayName="NoDocs"}}]); -------------------------------------------------------------------------------- /docs/745.ff01fbe3.iframe.bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunkartof_select=self.webpackChunkartof_select||[]).push([[745],{"./node_modules/react-dom/client.js":(__unused_webpack_module,exports,__webpack_require__)=>{var m=__webpack_require__("./node_modules/react-dom/index.js");exports.createRoot=m.createRoot,exports.hydrateRoot=m.hydrateRoot}}]); -------------------------------------------------------------------------------- /docs/807.3f6e5527.iframe.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google Inc. All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | /** 10 | * @license 11 | * Copyright Google Inc. All Rights Reserved. 12 | * 13 | * Use of this source code is governed by an MIT-style license that can be 14 | * found in the LICENSE file at https://angular.io/license 15 | */ 16 | 17 | /** 18 | * @license 19 | * Copyright Google Inc. All Rights Reserved. 20 | * 21 | * Use of this source code is governed by an MIT-style license that can be 22 | * found in the LICENSE file at https://angular.io/license 23 | */ 24 | 25 | /** 26 | * @license 27 | * Copyright Google Inc. All Rights Reserved. 28 | * 29 | * Use of this source code is governed by an MIT-style license that can be 30 | * found in the LICENSE file at https://angular.io/license 31 | */ 32 | -------------------------------------------------------------------------------- /docs/807.79df300f37241c1d7fd3.manager.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google Inc. All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | /** 10 | * @license 11 | * Copyright Google Inc. All Rights Reserved. 12 | * 13 | * Use of this source code is governed by an MIT-style license that can be 14 | * found in the LICENSE file at https://angular.io/license 15 | */ 16 | 17 | /** 18 | * @license 19 | * Copyright Google Inc. All Rights Reserved. 20 | * 21 | * Use of this source code is governed by an MIT-style license that can be 22 | * found in the LICENSE file at https://angular.io/license 23 | */ 24 | 25 | /** 26 | * @license 27 | * Copyright Google Inc. All Rights Reserved. 28 | * 29 | * Use of this source code is governed by an MIT-style license that can be 30 | * found in the LICENSE file at https://angular.io/license 31 | */ 32 | -------------------------------------------------------------------------------- /docs/863.985396a1.iframe.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! ***************************************************************************** 2 | Copyright (c) Microsoft Corporation. 3 | 4 | Permission to use, copy, modify, and/or distribute this software for any 5 | purpose with or without fee is hereby granted. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 8 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 9 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 10 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 11 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 12 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 13 | PERFORMANCE OF THIS SOFTWARE. 14 | ***************************************************************************** */ 15 | -------------------------------------------------------------------------------- /docs/897.4b7b5da4.iframe.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! 2 | * OverlayScrollbars 3 | * https://github.com/KingSora/OverlayScrollbars 4 | * 5 | * Version: 1.13.0 6 | * 7 | * Copyright KingSora | Rene Haas. 8 | * https://github.com/KingSora 9 | * 10 | * Released under the MIT license. 11 | * Date: 02.08.2020 12 | */ 13 | -------------------------------------------------------------------------------- /docs/897.fb6b23057d54a49cd991.manager.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! 2 | * OverlayScrollbars 3 | * https://github.com/KingSora/OverlayScrollbars 4 | * 5 | * Version: 1.13.0 6 | * 7 | * Copyright KingSora | Rene Haas. 8 | * https://github.com/KingSora 9 | * 10 | * Released under the MIT license. 11 | * Date: 02.08.2020 12 | */ 13 | -------------------------------------------------------------------------------- /docs/991.f2f2eb3422c93b5c292f.manager.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /*! 8 | * Fuse.js v3.6.1 - Lightweight fuzzy-search (http://fusejs.io) 9 | * 10 | * Copyright (c) 2012-2017 Kirollos Risk (http://kiro.me) 11 | * All Rights Reserved. Apache Software License 2.0 12 | * 13 | * http://www.apache.org/licenses/LICENSE-2.0 14 | */ 15 | 16 | /*! 17 | * https://github.com/es-shims/es5-shim 18 | * @license es5-shim Copyright 2009-2020 by contributors, MIT License 19 | * see https://github.com/es-shims/es5-shim/blob/master/LICENSE 20 | */ 21 | 22 | /*! 23 | * isobject 24 | * 25 | * Copyright (c) 2014-2017, Jon Schlinkert. 26 | * Released under the MIT License. 27 | */ 28 | 29 | /*! ***************************************************************************** 30 | Copyright (c) Microsoft Corporation. 31 | 32 | Permission to use, copy, modify, and/or distribute this software for any 33 | purpose with or without fee is hereby granted. 34 | 35 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 36 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 37 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 38 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 39 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 40 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 41 | PERFORMANCE OF THIS SOFTWARE. 42 | ***************************************************************************** */ 43 | 44 | /*! store2 - v2.13.1 - 2021-12-20 45 | * Copyright (c) 2021 Nathan Bubna; Licensed (MIT OR GPL-3.0) */ 46 | 47 | /** 48 | * @license React 49 | * react-dom.production.min.js 50 | * 51 | * Copyright (c) Facebook, Inc. and its affiliates. 52 | * 53 | * This source code is licensed under the MIT license found in the 54 | * LICENSE file in the root directory of this source tree. 55 | */ 56 | 57 | /** 58 | * @license React 59 | * react.production.min.js 60 | * 61 | * Copyright (c) Facebook, Inc. and its affiliates. 62 | * 63 | * This source code is licensed under the MIT license found in the 64 | * LICENSE file in the root directory of this source tree. 65 | */ 66 | 67 | /** 68 | * @license React 69 | * scheduler.production.min.js 70 | * 71 | * Copyright (c) Facebook, Inc. and its affiliates. 72 | * 73 | * This source code is licensed under the MIT license found in the 74 | * LICENSE file in the root directory of this source tree. 75 | */ 76 | 77 | /** 78 | * React Router DOM v6.0.2 79 | * 80 | * Copyright (c) Remix Software Inc. 81 | * 82 | * This source code is licensed under the MIT license found in the 83 | * LICENSE.md file in the root directory of this source tree. 84 | * 85 | * @license MIT 86 | */ 87 | 88 | /** 89 | * React Router v6.0.2 90 | * 91 | * Copyright (c) Remix Software Inc. 92 | * 93 | * This source code is licensed under the MIT license found in the 94 | * LICENSE.md file in the root directory of this source tree. 95 | * 96 | * @license MIT 97 | */ 98 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/o-mega/artof-select/df1fc27a2e1959a4ae620f26fed65c12d02aca4c/docs/favicon.ico -------------------------------------------------------------------------------- /docs/iframe.html: -------------------------------------------------------------------------------- 1 | Webpack App

No Preview

Sorry, but you either have no stories or none are selected somehow.

  • Please check the Storybook config.
  • Try reloading the page.

If the problem persists, check the browser console, or the terminal you've run Storybook from.




--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | Webpack Appartof-select



--------------------------------------------------------------------------------
/docs/main.b77887673a4132db2073.manager.bundle.js:
--------------------------------------------------------------------------------
1 | (self.webpackChunkartof_select=self.webpackChunkartof_select||[]).push([[179],{66076:(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{"use strict";var injectStylesIntoStyleTag=__webpack_require__(93379),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),storybook_manager=__webpack_require__(38528),options={insert:"head",singleton:!1};injectStylesIntoStyleTag_default()(storybook_manager.Z,options);storybook_manager.Z.locals;var public_api=__webpack_require__(77428),esm=__webpack_require__(65316);const logo_namespaceObject=__webpack_require__.p+"static/media/logo.15f45f33.svg";public_api.ZP.setConfig({sidebar:{showRoots:!1},enableShortcuts:!1,theme:Object.assign({},esm.np.dark,{brandTitle:"artof-select",brandUrl:"https://github.com/o-mega/artof-select",brandImage:logo_namespaceObject})})},38528:(module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(23645),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__)()((function(i){return i[1]}));___CSS_LOADER_EXPORT___.push([module.id,"body,\n#storybook-preview-wrapper {\n  background-color: #f3f3f3 !important;\n}\n\n#storybook-explorer-tree {\n  margin-top: 16px;\n}\n\n.sidebar-container {\n  background-color: #212121;\n}\n\n.search-field {\n  display: none !important;\n}\n\n.sidebar-header > div:first-child {\n  margin-right: 0 !important;\n  margin-bottom: 20px;\n}\n\n.sidebar-header > div:first-child > a {\n  margin: 0 !important;\n  border: 0 !important;\n  padding: 0 !important;\n}\n\n.sidebar-header > div:last-child {\n  display: none !important;\n}\n\n#storybook-explorer-menu {\n  margin: 0 !important;\n}\n\n#storybook-explorer-tree #artof-select.sidebar-item {\n  display: none !important;\n}\n\n#storybook-explorer-tree > div > div {\n  margin: 0;\n}\n\n#storybook-explorer-tree .sidebar-item {\n  color: #aaa;\n  font-size: 14px;\n  padding-top: 7px;\n  padding-bottom: 7px;\n}\n\n#storybook-explorer-tree .sidebar-item span {\n  border-top-width: 4px;\n  border-bottom-width: 4px;\n  border-left-width: 4px;\n  margin-right: 10px;\n}\n\n#storybook-explorer-tree .sidebar-item svg {\n  width: 14px;\n  height: 14px;\n}\n\n#storybook-explorer-tree .sidebar-item[data-selected=\"true\"] {\n  color: #fff;\n  font-weight: 400;\n}\n\n.os-host + div {\n  top: 0 !important;\n  height: 100% !important;\n}\n\n#root > div > div > div {\n  box-shadow: none !important;\n}\n\n#root > div > div:last-child {\n  top: 0 !important;\n}\n\n[role=\"main\"] #storybook-panel-root > .os-host {\n  display: none !important;\n}\n\n#root > div {\n  background-color: #333333;\n}\n\n#panel-tab-content .os-content select {\n  background: #3f3f3f url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23aaa' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e\") no-repeat right 10px center / 10px 10px;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  text-indent: 1px;\n  text-overflow: '';\n}\n\n#panel-tab-content .os-content > form > label {\n  align-items: flex-start;\n}\n\n#panel-tab-content .os-content > form > label > span:first-child {\n  width: 250px;\n  white-space: pre-wrap;\n  font-weight: 400;\n}\n\n#panel-tab-content .os-content > form > label > span:first-child > span:first-line {\n font-weight: 700;\n line-height: 2em;\n}\n\n#panel-tab-content .os-content textarea {\n  resize: none;\n}\n\n#panel-tab-content .os-content input[type=number] {\n  max-width: 100px;\n}\n\n.badge-multiple {\n  display: inline-block;\n  margin-right: 10px;\n  background-color: #ffb736;\n  padding: 2px 4px;\n  line-height: 1;\n  color: #000;\n  font-size: 12px;\n  border-radius: 3px;\n}\n\n.badge-multiple:before {\n  content: \"Multiple\";\n}\n\n.custom-code > code {\n  margin-top: 5px !important;\n  white-space: pre-wrap !important;\n  line-height: 1.4 !important;\n}\n",""]);const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},24654:()=>{}},__webpack_require__=>{var __webpack_exec__=moduleId=>__webpack_require__(__webpack_require__.s=moduleId);__webpack_require__.O(0,[991],(()=>(__webpack_exec__(37707),__webpack_exec__(66076),__webpack_exec__(7967),__webpack_exec__(15887),__webpack_exec__(50213),__webpack_exec__(75259),__webpack_exec__(57464),__webpack_exec__(10165),__webpack_exec__(13457),__webpack_exec__(59288))));__webpack_require__.O()}]);


--------------------------------------------------------------------------------
/docs/project.json:
--------------------------------------------------------------------------------
1 | {"generatedAt":1667465725944,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.15.0"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/react":{"version":"6.5.13"}},"framework":{"name":"react"},"addons":{"storybook-addon-sass-postcss":{"options":{"sassLoaderOptions":{"implementation":{"sassNull":{},"sassTrue":{"value":true},"sassFalse":{"value":false},"Logger":{"silent":{}},"info":"dart-sass\t1.55.0\t(Sass Compiler)\t[Dart]\ndart2js\t2.18.1\t(Dart Compiler)\t[Dart]","types":{},"NULL":{},"TRUE":{"value":true},"FALSE":{"value":false}}}},"version":"0.1.3"},"@storybook/addon-essentials":{"options":{"actions":false},"version":"6.5.13"},"@storybook/addon-controls":{"version":"6.5.13"}}}
2 | 


--------------------------------------------------------------------------------
/docs/runtime~main.20b0b20d1f298c057fdf.manager.bundle.js:
--------------------------------------------------------------------------------
1 | (()=>{"use strict";var deferred,leafPrototypes,getProto,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,loaded:!1,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}__webpack_require__.m=__webpack_modules__,deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},getProto=Object.getPrototypeOf?obj=>Object.getPrototypeOf(obj):obj=>obj.__proto__,__webpack_require__.t=function(value,mode){if(1&mode&&(value=this(value)),8&mode)return value;if("object"==typeof value&&value){if(4&mode&&value.__esModule)return value;if(16&mode&&"function"==typeof value.then)return value}var ns=Object.create(null);__webpack_require__.r(ns);var def={};leafPrototypes=leafPrototypes||[null,getProto({}),getProto([]),getProto(getProto)];for(var current=2&mode&&value;"object"==typeof current&&!~leafPrototypes.indexOf(current);current=getProto(current))Object.getOwnPropertyNames(current).forEach((key=>def[key]=()=>value[key]));return def.default=()=>value,__webpack_require__.d(ns,def),ns},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>chunkId+"."+{51:"ed6f355dc48523569782",229:"01997a2a8add2473116b",295:"223eb9bec083eddc34fe",551:"a6b072fedcf773ca497f",807:"79df300f37241c1d7fd3",897:"fb6b23057d54a49cd991",935:"0888ef1b976ca5eee32c"}[chunkId]+".manager.bundle.js",__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.nmd=module=>(module.paths=[],module.children||(module.children=[]),module),__webpack_require__.p="",(()=>{var installedChunks={303:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(303!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],runtime=data[2],i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i{"use strict";var deferred,leafPrototypes,getProto,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,loaded:!1,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}__webpack_require__.m=__webpack_modules__,deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},getProto=Object.getPrototypeOf?obj=>Object.getPrototypeOf(obj):obj=>obj.__proto__,__webpack_require__.t=function(value,mode){if(1&mode&&(value=this(value)),8&mode)return value;if("object"==typeof value&&value){if(4&mode&&value.__esModule)return value;if(16&mode&&"function"==typeof value.then)return value}var ns=Object.create(null);__webpack_require__.r(ns);var def={};leafPrototypes=leafPrototypes||[null,getProto({}),getProto([]),getProto(getProto)];for(var current=2&mode&&value;"object"==typeof current&&!~leafPrototypes.indexOf(current);current=getProto(current))Object.getOwnPropertyNames(current).forEach((key=>def[key]=()=>value[key]));return def.default=()=>value,__webpack_require__.d(ns,def),ns},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>chunkId+"."+{51:"6d936426",229:"88a19c85",551:"13dd1811",701:"ba29fb31",745:"ff01fbe3",807:"3f6e5527",863:"985396a1",897:"4b7b5da4",935:"7fb34345"}[chunkId]+".iframe.bundle.js",__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.hmd=module=>((module=Object.create(module)).children||(module.children=[]),Object.defineProperty(module,"exports",{enumerable:!0,set:()=>{throw new Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+module.id)}}),module),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.nmd=module=>(module.paths=[],module.children||(module.children=[]),module),__webpack_require__.p="",(()=>{var installedChunks={303:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(303!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],runtime=data[2],i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i


--------------------------------------------------------------------------------
/docs/static/media/canada.d6571367.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/docs/static/media/germany.06040a36.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/docs/static/media/japan.4b501c3b.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/docs/static/media/logo.15f45f33.svg:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/docs/static/media/sweden.86348702.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/docs/static/media/switzerland.a197bc40.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/docs/static/media/united_kingdom.77926389.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/docs/static/media/united_states.0138fef9.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "artof-select",
  3 |   "description": "The 
20 |   );
21 | };
22 | 


--------------------------------------------------------------------------------
/src/components/value/SelectValue.tsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | 
  3 | import {
  4 |   SelectOption,
  5 |   SelectCommonProps,
  6 |   SelectMultiple,
  7 |   SelectSingle,
  8 | } from "../../Select.types";
  9 | import { SelectedValueClear } from "./SelectValueClear";
 10 | import { SelectedValueTags } from "./SelectValueTags";
 11 | 
 12 | type Props = {
 13 |   multiple: boolean;
 14 |   options: SelectOption[];
 15 |   asTags: SelectMultiple["asTags"];
 16 |   value: SelectMultiple["value"] | SelectSingle["value"];
 17 |   placeholder: SelectCommonProps["placeholder"];
 18 |   textSelected: SelectMultiple["textSelected"];
 19 |   allowTagsCount: SelectMultiple["allowTagsCount"];
 20 |   allowClearAll: SelectCommonProps["allowClearAll"];
 21 |   allowRemoveTag: SelectMultiple["allowRemoveTag"];
 22 |   select: React.RefObject;
 23 |   renderValue: SelectCommonProps["renderValue"];
 24 | };
 25 | 
 26 | export const SelectValue = React.memo(function selectValue({
 27 |   renderValue,
 28 |   multiple,
 29 |   options,
 30 |   placeholder,
 31 |   allowTagsCount,
 32 |   allowClearAll,
 33 |   allowRemoveTag,
 34 |   select,
 35 |   ...props
 36 | }: Props): JSX.Element {
 37 |   const selectedOptions = options.filter((option) => {
 38 |     if (typeof props.value === "string") {
 39 |       return props.value === `${option.value}`;
 40 |     } else if (typeof props.value === "object") {
 41 |       return props.value?.includes(`${option.value}`);
 42 |     }
 43 | 
 44 |     return false;
 45 |   });
 46 | 
 47 |   if (renderValue) {
 48 |     if (!selectedOptions.length) {
 49 |       return <>{placeholder};
 50 |     }
 51 | 
 52 |     return (
 53 |       
{renderValue(selectedOptions)}

 54 |     );
 55 |   }
 56 | 
 57 |   if (multiple) {
 58 |     const { asTags, textSelected } = props;
 59 |     const value = props.value as SelectMultiple["value"];
 60 | 
 61 |     if (asTags) {
 62 |       return (
 63 |         
 71 |       );
 72 |     } else if (value?.length) {
 73 |       return (
 74 |         <>
 75 |           

 76 |             {textSelected} {value.length}
 77 |           

 78 | 
 79 |           {allowClearAll && }
 80 |         
 81 |       );
 82 |     } else {
 83 |       return <>{placeholder};
 84 |     }
 85 |   }
 86 | 
 87 |   const value = props.value as SelectSingle["value"];
 88 |   const selectedOption = options.find((option) => value === option.value);
 89 | 
 90 |   if (selectedOption?.component ?? selectedOption?.label ?? value) {
 91 |     return (
 92 |       <>
 93 |         

 94 |           {selectedOption?.component ?? selectedOption?.label ?? value}
 95 |         

 96 | 
 97 |         {allowClearAll && }
 98 |       
 99 |     );
100 |   }
101 | 
102 |   return <>{placeholder};
103 | });
104 | 


--------------------------------------------------------------------------------
/src/components/value/SelectValueClear.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import { fireEvent } from "../../helpers/fireEvent";
 4 | 
 5 | type Props = {
 6 |   select: React.RefObject;
 7 | };
 8 | 
 9 | export const SelectedValueClear = ({ select }: Props): JSX.Element => {
10 |   const onClear = (): void => {
11 |     if (select.current) {
12 |       select.current.value = "";
13 |       fireEvent(select.current, "change");
14 |     }
15 |   };
16 | 
17 |   return (
18 |