From 26778e0570f8653f755078d0e6dabfe66090432e Mon Sep 17 00:00:00 2001 From: lisa Date: Thu, 10 Oct 2024 17:22:45 +0200 Subject: [PATCH 1/2] feat: various improvements --- .changeset/ten-pans-sleep.md | 9 + .../__snapshots__/index.test.tsx.snap | 316 +- .../src/components/SelectInputV2/Dropdown.tsx | 112 +- .../__stories__/EmptyState.stories.tsx | 8 +- .../__stories__/Footer.stories.tsx | 44 +- .../__stories__/Modal.stories.tsx | 23 +- .../__stories__/Searchable.stories.tsx | 40 + .../__stories__/index.stories.tsx | 1 + .../__snapshots__/index.test.tsx.snap | 6930 +++++++++-------- .../SelectInputV2/__tests__/index.test.tsx | 40 + .../ui/src/components/SelectInputV2/index.tsx | 4 +- 11 files changed, 4045 insertions(+), 3482 deletions(-) create mode 100644 .changeset/ten-pans-sleep.md create mode 100644 packages/ui/src/components/SelectInputV2/__stories__/Searchable.stories.tsx diff --git a/.changeset/ten-pans-sleep.md b/.changeset/ten-pans-sleep.md new file mode 100644 index 0000000000..d05ea69b15 --- /dev/null +++ b/.changeset/ten-pans-sleep.md @@ -0,0 +1,9 @@ +--- +"@ultraviolet/ui": patch +--- + +``: +- Hide search when less than 6 items (even when `searchable = true`) +- Clickable `footer` to close the dropdown +- `clearable = false` by default now +- Dropdown will close when clicking outside when it is inside a modal \ No newline at end of file diff --git a/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap index db2f4bbccc..0279adc318 100644 --- a/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap @@ -207,74 +207,6 @@ exports[`SelectInputField > should display right value on grouped options 1`] = } .emotion-13 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - height: 32px; - padding: 0 8px; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 8px; - border-radius: 4px; - box-sizing: border-box; - width: 32px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 14px; - font-family: Inter,Asap,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 20px; - paragraph-spacing: 0; - text-case: none; - background: none; - border: none; - color: #3f4250; -} - -.emotion-13:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-13:active { - box-shadow: 0px 0px 0px 3px #151a2d5c; -} - -.emotion-13:hover, -.emotion-13:active { - background: #e9eaeb; - color: #222638; -} - -.emotion-15 { - vertical-align: middle; - fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; -} - -.emotion-15 .fillStroke { - stroke: currentColor; - fill: none; -} - -.emotion-17 { vertical-align: middle; fill: #3f4250; height: 16px; @@ -283,12 +215,12 @@ exports[`SelectInputField > should display right value on grouped options 1`] = min-height: 16px; } -.emotion-17 .fillStroke { +.emotion-13 .fillStroke { stroke: #3f4250; fill: none; } -.emotion-20 { +.emotion-16 { background: #151a2d; color: #ffffff; border-radius: 4px; @@ -315,12 +247,12 @@ exports[`SelectInputField > should display right value on grouped options 1`] = margin-bottom: 80px; } -.emotion-20[data-animated="true"] { +.emotion-16[data-animated="true"] { -webkit-animation: 0ms animation-0 forwards; animation: 0ms animation-0 forwards; } -.emotion-20[data-has-arrow="true"]::after { +.emotion-16[data-has-arrow="true"]::after { content: " "; position: absolute; top: -5px; @@ -336,11 +268,11 @@ exports[`SelectInputField > should display right value on grouped options 1`] = pointer-events: none; } -.emotion-20[data-visible-in-dom="false"] { +.emotion-16[data-visible-in-dom="false"] { display: none; } -.emotion-22 { +.emotion-18 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -363,7 +295,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] = flex-wrap: nowrap; } -.emotion-24 { +.emotion-20 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -391,11 +323,11 @@ exports[`SelectInputField > should display right value on grouped options 1`] = padding-top: 4px; } -.emotion-24[data-grouped="true"] { +.emotion-20[data-grouped="true"] { padding-top: 0; } -.emotion-26 { +.emotion-22 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -418,13 +350,13 @@ exports[`SelectInputField > should display right value on grouped options 1`] = flex-wrap: nowrap; } -.emotion-28 { +.emotion-24 { position: -webkit-sticky; position: sticky; top: 0px; } -.emotion-30 { +.emotion-26 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -450,21 +382,21 @@ exports[`SelectInputField > should display right value on grouped options 1`] = margin-bottom: 2px; } -.emotion-30:focus { +.emotion-26:focus { background-color: #f9f9fa; outline: none; } -.emotion-30[data-selectgroup='true'] { +.emotion-26[data-selectgroup='true'] { padding-left: 16px; border-left: 4px solid #f9f9fa; } -.emotion-30[data-selectgroup='true']:focus { +.emotion-26[data-selectgroup='true']:focus { background-color: #e9eaeb; } -.emotion-32 { +.emotion-28 { color: #3f4250; font-size: 12px; font-family: Inter,Asap,sans-serif; @@ -477,7 +409,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] = text-align: left; } -.emotion-36 { +.emotion-32 { text-align: left; border: none; background-color: #ffffff; @@ -488,32 +420,32 @@ exports[`SelectInputField > should display right value on grouped options 1`] = border-radius: 4px; } -.emotion-36:hover, -.emotion-36:focus { +.emotion-32:hover, +.emotion-32:focus { background-color: #f1eefc; color: #641cb3; cursor: pointer; outline: none; } -.emotion-36[data-selected='true'] { +.emotion-32[data-selected='true'] { background-color: #f1eefc; } -.emotion-36[disabled] { +.emotion-32[disabled] { background-color: #f3f3f4; color: #b5b7bd; } -.emotion-36[disabled]:hover, -.emotion-36 [disabled]:focus { +.emotion-32[disabled]:hover, +.emotion-32 [disabled]:focus { background-color: #f3f3f4; color: #b5b7bd; cursor: not-allowed; outline: none; } -.emotion-40 { +.emotion-36 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -536,7 +468,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] = overflow: hidden; } -.emotion-43 { +.emotion-39 { font-size: 16px; font-family: Inter,Asap,sans-serif; font-weight: 400; @@ -558,7 +490,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] = max-width: 100%; } -.emotion-63 { +.emotion-59 { color: #727683; font-size: 14px; font-family: Inter,Asap,sans-serif; @@ -614,25 +546,9 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
- should display right value on grouped options 1`] =
should display right value on grouped options 1`] = style="opacity: 1;" >
should display right value on grouped options 1`] = data-testid="option-stack-mercury" >
Mercury @@ -712,7 +628,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
should display right value on grouped options 1`] = data-testid="option-stack-venus" >
Venus @@ -736,7 +652,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
should display right value on grouped options 1`] = data-testid="option-stack-earth" >
Earth
Our home planet @@ -765,7 +681,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
should display right value on grouped options 1`] = data-testid="option-stack-mars" >
Mars @@ -790,7 +706,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
should display right value on grouped options 1`] = data-testid="option-stack-pluto" >
Pluto
Pluto does not fit the usual classification of either terrestrial or Jovian planets, but is rocky @@ -820,13 +736,13 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
should display right value on grouped options 1`] = data-testid="option-stack-jupiter" >
Jupiter
Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass more than two and a half times that of all the other planets in the Solar System combined, and slightly less than one one-thousandth the mass of the Sun. @@ -875,7 +791,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
should display right value on grouped options 1`] = data-testid="option-stack-saturn" >
Saturn @@ -899,7 +815,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
should display right value on grouped options 1`] = data-testid="option-stack-uranus" >
Uranus @@ -923,7 +839,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
should display right value on grouped options 1`] = data-testid="option-stack-neptune" >
Neptune @@ -2218,74 +2134,6 @@ exports[`SelectInputField > should trigger events 1`] = ` } .emotion-13 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - height: 32px; - padding: 0 8px; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 8px; - border-radius: 4px; - box-sizing: border-box; - width: 32px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 14px; - font-family: Inter,Asap,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 20px; - paragraph-spacing: 0; - text-case: none; - background: none; - border: none; - color: #3f4250; -} - -.emotion-13:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-13:active { - box-shadow: 0px 0px 0px 3px #151a2d5c; -} - -.emotion-13:hover, -.emotion-13:active { - background: #e9eaeb; - color: #222638; -} - -.emotion-15 { - vertical-align: middle; - fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; -} - -.emotion-15 .fillStroke { - stroke: currentColor; - fill: none; -} - -.emotion-17 { vertical-align: middle; fill: #3f4250; height: 16px; @@ -2294,7 +2142,7 @@ exports[`SelectInputField > should trigger events 1`] = ` min-height: 16px; } -.emotion-17 .fillStroke { +.emotion-13 .fillStroke { stroke: #3f4250; fill: none; } @@ -2310,8 +2158,8 @@ exports[`SelectInputField > should trigger events 1`] = ` class="emotion-0 emotion-1" >
should trigger events 1`] = ` data-size="large" data-state="neutral" data-testid="select-input-test" - id=":r1d:" + id=":r1c:" role="combobox" tabindex="0" > @@ -2342,25 +2190,9 @@ exports[`SelectInputField > should trigger events 1`] = `
- void) => ReactNode) | ReactNode refSelect: RefObject loadMore?: ReactNode optionalInfoPlacement: 'left' | 'right' @@ -220,14 +220,23 @@ const handleClickOutside = ( refSelect: RefObject, onSearch: Dispatch>, options: DataType, + isInsideModal: boolean, ) => { if ( ref.current && !ref.current.contains(event.target as Node) && !refSelect.current?.contains(event.target as Node) ) { - setIsDropdownVisibile(false) // hide dropdown when clicking outside of the dropdown - onSearch(options) // reset displayed options to default when dropdown is hidden + if (isInsideModal) { + // Timeout when the selectInput is inside a modal to not close both the modal and the dropdown if it scrolls + setTimeout(() => { + setIsDropdownVisibile(false) // hide dropdown when clicking outside of the dropdown + onSearch(options) // reset displayed options to default when dropdown is hidden + }, 100) + } else { + setIsDropdownVisibile(false) + onSearch(options) + } } } @@ -682,6 +691,7 @@ export const Dropdown = ({ searchInput, options, displayedOptions, + numberOfOptions, } = useSelectInput() const theme = useTheme() const [searchBarActive, setSearchBarActive] = useState(false) @@ -738,16 +748,33 @@ export const Dropdown = ({ setSearch('') } - document.addEventListener('mousedown', event => - handleClickOutside( - event, - ref, - setIsDropdownVisible, - refSelect, - onSearch, - options, - ), - ) + const modalElement = document.getElementById('backdrop-modal') + + if (modalElement) { + modalElement.addEventListener('mousedown', event => + handleClickOutside( + event, + ref, + setIsDropdownVisible, + refSelect, + onSearch, + options, + true, + ), + ) + } else { + document.addEventListener('mousedown', event => + handleClickOutside( + event, + ref, + setIsDropdownVisible, + refSelect, + onSearch, + options, + false, + ), + ) + } if (!searchable) { document.addEventListener('keydown', event => @@ -764,16 +791,32 @@ export const Dropdown = ({ } return () => { - document.removeEventListener('mousedown', event => - handleClickOutside( - event, - ref, - setIsDropdownVisible, - refSelect, - onSearch, - options, - ), - ) + if (!modalElement) { + document.removeEventListener('mousedown', event => + handleClickOutside( + event, + ref, + setIsDropdownVisible, + refSelect, + onSearch, + options, + false, + ), + ) + } else { + modalElement.addEventListener('mousedown', event => + handleClickOutside( + event, + ref, + setIsDropdownVisible, + refSelect, + onSearch, + options, + true, + ), + ) + } + if (!searchable) { document.removeEventListener('keydown', event => handleKeyDown( @@ -800,7 +843,10 @@ export const Dropdown = ({ searchable, ]) + // No data is displayed (because of the search or because no data is provided) + // Set to true when noData by default const isEmpty = useMemo(() => { + if (numberOfOptions === 0) return true if (Array.isArray(displayedOptions)) { return !(displayedOptions.length > 0) } @@ -812,14 +858,28 @@ export const Dropdown = ({ } return true - }, [displayedOptions]) + }, [displayedOptions, numberOfOptions]) + + const computedFooter = useMemo(() => { + if (footer) { + if (typeof footer === 'function') { + return ( + {footer(() => setIsDropdownVisible(false))} + ) + } + + return {footer} + } + + return null + }, [footer, setIsDropdownVisible]) return ( - {searchable && !isLoading ? ( + {searchable && !isLoading && numberOfOptions >= 6 ? ( - {footer ? {footer} : null} + {computedFooter} } placement="bottom" diff --git a/packages/ui/src/components/SelectInputV2/__stories__/EmptyState.stories.tsx b/packages/ui/src/components/SelectInputV2/__stories__/EmptyState.stories.tsx index 35fbd96faa..193684b960 100644 --- a/packages/ui/src/components/SelectInputV2/__stories__/EmptyState.stories.tsx +++ b/packages/ui/src/components/SelectInputV2/__stories__/EmptyState.stories.tsx @@ -1,4 +1,8 @@ import type { StoryFn } from '@storybook/react' +import { + DynamicIllustration, + // @ts-expect-error can't import ultraviolet/illustration in ui (cyclic dependencies) +} from '@ultraviolet/illustrations' import { SelectInputV2 } from '..' import { EmptyState as EmptyStateComponent } from '../../EmptyState' import { Link } from '../../Link' @@ -37,7 +41,7 @@ export const EmptyState: StoryFn = args => ( } learnMore={{ link: 'https://scaleway.com', text: 'Learn more', @@ -54,8 +58,8 @@ export const EmptyState: StoryFn = args => ( EmptyState.args = { ...Template.args, options: {}, - searchable: false, } + EmptyState.decorators = [ StoryComponent => (
diff --git a/packages/ui/src/components/SelectInputV2/__stories__/Footer.stories.tsx b/packages/ui/src/components/SelectInputV2/__stories__/Footer.stories.tsx index ca92f99819..9d259dea87 100644 --- a/packages/ui/src/components/SelectInputV2/__stories__/Footer.stories.tsx +++ b/packages/ui/src/components/SelectInputV2/__stories__/Footer.stories.tsx @@ -1,10 +1,10 @@ +import type { StoryFn } from '@storybook/react' +import { SelectInputV2 } from '..' import { Button } from '../../Button' import { Stack } from '../../Stack' import { Template } from './Template.stories' import { dataGrouped } from './resources' -export const Footer = Template.bind({}) - const PopupFooter = () => ( + + +) + +export const Footer: StoryFn = args => ( + + } + /> + ( + + )} + /> + +) + Footer.args = { ...Template.args, options: dataGrouped, @@ -32,7 +69,8 @@ Footer.decorators = [ Footer.parameters = { docs: { description: { - story: 'Set a custom footer to the dropdown using the `Footer` prop.', + story: + 'Set a custom footer to the dropdown using the `Footer` prop. Footer can be a function with prop `closeDropdown` to hide the dropdown', }, }, } diff --git a/packages/ui/src/components/SelectInputV2/__stories__/Modal.stories.tsx b/packages/ui/src/components/SelectInputV2/__stories__/Modal.stories.tsx index 49d6bda223..da494df1c6 100644 --- a/packages/ui/src/components/SelectInputV2/__stories__/Modal.stories.tsx +++ b/packages/ui/src/components/SelectInputV2/__stories__/Modal.stories.tsx @@ -2,6 +2,8 @@ import type { StoryFn } from '@storybook/react' import { SelectInputV2 } from '..' import { Button } from '../../Button' import { Modal as ModalComponent } from '../../Modal' +import { Stack } from '../../Stack' +import { Text } from '../../Text' import { dataGrouped } from './resources' export const Modal: StoryFn = args => ( @@ -9,7 +11,26 @@ export const Modal: StoryFn = args => ( disclosure={} placement="bottom" > - + + + Title + + + This is an example of SelectInput inside a modal. Click outside the + select input to close the SelectInput and outside the modal to close + both the modal and the selectInput. + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + ) diff --git a/packages/ui/src/components/SelectInputV2/__stories__/Searchable.stories.tsx b/packages/ui/src/components/SelectInputV2/__stories__/Searchable.stories.tsx new file mode 100644 index 0000000000..dda254b9f0 --- /dev/null +++ b/packages/ui/src/components/SelectInputV2/__stories__/Searchable.stories.tsx @@ -0,0 +1,40 @@ +import type { StoryFn } from '@storybook/react' +import { SelectInputV2 } from '..' +import { Stack } from '../../Stack' +import { OptionalInfo, OptionalInfo2 } from './resources' + +export const Searchable: StoryFn = args => ( + + + + +) + +Searchable.args = { + name: 'example', + placeholder: 'Select item', + placeholderSearch: 'Search in list', + searchable: false, + disabled: false, + helper: 'helper', +} + +Searchable.parameters = { + docs: { + description: { + story: + 'Add a search bar in the dropdown to search through the different options. If there are less than 6 options, the search bar will **not** appear.', + }, + }, +} diff --git a/packages/ui/src/components/SelectInputV2/__stories__/index.stories.tsx b/packages/ui/src/components/SelectInputV2/__stories__/index.stories.tsx index 3838ba4a5f..a83749a450 100644 --- a/packages/ui/src/components/SelectInputV2/__stories__/index.stories.tsx +++ b/packages/ui/src/components/SelectInputV2/__stories__/index.stories.tsx @@ -29,3 +29,4 @@ export { IsLoading } from './IsLoading.stories' export { SelectAll } from './SelectAll.stories' export { Controlled } from './Controlled.stories' export { Modal } from './Modal.stories' +export { Searchable } from './Searchable.stories' diff --git a/packages/ui/src/components/SelectInputV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/SelectInputV2/__tests__/__snapshots__/index.test.tsx.snap index b161f503a4..036482f691 100644 --- a/packages/ui/src/components/SelectInputV2/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/SelectInputV2/__tests__/__snapshots__/index.test.tsx.snap @@ -61,7 +61,7 @@ exports[`SelectInputV2 > renders correctly 1`] = ` } .emotion-8 { - color: #3f4250; + color: #222638; font-size: 16px; font-family: Inter,Asap,sans-serif; font-weight: 500; @@ -104,18 +104,7 @@ exports[`SelectInputV2 > renders correctly 1`] = ` background: #ffffff; border-radius: 4px; width: 100%; -} - -.emotion-10[data-readonly='true'] { - background: #f9f9fa; - border-color: #d9dadd; - cursor: default; -} - -.emotion-10[data-disabled='true'] { - background: #f3f3f4; - border-color: #e9eaeb; - cursor: not-allowed; + overflow: hidden; } .emotion-10[data-size='small'] { @@ -135,33 +124,64 @@ exports[`SelectInputV2 > renders correctly 1`] = ` border: 1px solid #d9dadd; } +.emotion-10[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active { + border-color: #792dd4; + box-shadow: 0px 0px 0px 3px #8c40ef40; +} + +.emotion-10[data-state='neutral']:not([data-disabled='true']):hover, +.emotion-10[data-state='neutral']:not([data-disabled='true']):focus { + border-color: #792dd4; + outline: none; +} + +.emotion-10[data-state='neutral'][data-dropdownvisible='true'] { + border-color: #792dd4; +} + .emotion-10[data-state='success'] { border: 1px solid #22674e; } +.emotion-10[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active { + border-color: #1b533f; + box-shadow: 0px 0px 0px 3px #45d19f40; +} + +.emotion-10[data-state='success'][data-dropdownvisible='true'] { + border-color: #1b533f; +} + .emotion-10[data-state='danger'] { border: 1px solid #b3144d; } -.emotion-10:not([data-disabled='true']):not([data-readonly]):hover { - border-color: #8c40ef; +.emotion-10[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active { + border-color: #92103f; + box-shadow: 0px 0px 0px 3px #f91b6c40; } -.emotion-10:not([data-disabled='true']):not([data-readonly]):active { - box-shadow: 0px 0px 0px 3px #8c40ef40; +.emotion-10[data-state='danger'][data-dropdownvisible='true'] { + border-color: #92103f; } -.emotion-10:not([data-disabled='true']):hover, -.emotion-10:not([data-disabled='true']):focus { - border-color: #792dd4; - outline: none; +.emotion-10:not([data-disabled='true']):not([data-readonly]):hover { + border-color: #8c40ef; } -.emotion-10[data-dropdownvisible='true'] { - border-color: #792dd4; +.emotion-10[data-readonly='true'] { + background: #f9f9fa; + border-color: #d9dadd; + cursor: default; } -.emotion-12 { +.emotion-10[data-disabled='true'] { + background: #f3f3f4; + border-color: #e9eaeb; + cursor: not-allowed; +} + +.emotion-13 { color: #727683; font-size: 16px; font-family: Inter,Asap,sans-serif; @@ -171,9 +191,13 @@ exports[`SelectInputV2 > renders correctly 1`] = ` text-transform: none; -webkit-text-decoration: none; text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } -.emotion-14 { +.emotion-15 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -201,7 +225,7 @@ exports[`SelectInputV2 > renders correctly 1`] = ` display: flex; } -.emotion-16 { +.emotion-17 { vertical-align: middle; fill: #3f4250; height: 16px; @@ -210,7 +234,7 @@ exports[`SelectInputV2 > renders correctly 1`] = ` min-height: 16px; } -.emotion-16 .fillStroke { +.emotion-17 .fillStroke { stroke: #3f4250; fill: none; } @@ -257,22 +281,21 @@ exports[`SelectInputV2 > renders correctly 1`] = ` tabindex="0" >

Select item

@@ -354,18 +377,7 @@ exports[`SelectInputV2 > renders correctly disabled 1`] = ` background: #ffffff; border-radius: 4px; width: 100%; -} - -.emotion-6[data-readonly='true'] { - background: #f9f9fa; - border-color: #d9dadd; - cursor: default; -} - -.emotion-6[data-disabled='true'] { - background: #f3f3f4; - border-color: #e9eaeb; - cursor: not-allowed; + overflow: hidden; } .emotion-6[data-size='small'] { @@ -385,33 +397,64 @@ exports[`SelectInputV2 > renders correctly disabled 1`] = ` border: 1px solid #d9dadd; } +.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active { + border-color: #792dd4; + box-shadow: 0px 0px 0px 3px #8c40ef40; +} + +.emotion-6[data-state='neutral']:not([data-disabled='true']):hover, +.emotion-6[data-state='neutral']:not([data-disabled='true']):focus { + border-color: #792dd4; + outline: none; +} + +.emotion-6[data-state='neutral'][data-dropdownvisible='true'] { + border-color: #792dd4; +} + .emotion-6[data-state='success'] { border: 1px solid #22674e; } +.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active { + border-color: #1b533f; + box-shadow: 0px 0px 0px 3px #45d19f40; +} + +.emotion-6[data-state='success'][data-dropdownvisible='true'] { + border-color: #1b533f; +} + .emotion-6[data-state='danger'] { border: 1px solid #b3144d; } -.emotion-6:not([data-disabled='true']):not([data-readonly]):hover { - border-color: #8c40ef; +.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active { + border-color: #92103f; + box-shadow: 0px 0px 0px 3px #f91b6c40; } -.emotion-6:not([data-disabled='true']):not([data-readonly]):active { - box-shadow: 0px 0px 0px 3px #8c40ef40; +.emotion-6[data-state='danger'][data-dropdownvisible='true'] { + border-color: #92103f; } -.emotion-6:not([data-disabled='true']):hover, -.emotion-6:not([data-disabled='true']):focus { - border-color: #792dd4; - outline: none; +.emotion-6:not([data-disabled='true']):not([data-readonly]):hover { + border-color: #8c40ef; } -.emotion-6[data-dropdownvisible='true'] { - border-color: #792dd4; +.emotion-6[data-readonly='true'] { + background: #f9f9fa; + border-color: #d9dadd; + cursor: default; } -.emotion-8 { +.emotion-6[data-disabled='true'] { + background: #f3f3f4; + border-color: #e9eaeb; + cursor: not-allowed; +} + +.emotion-9 { color: #b5b7bd; font-size: 16px; font-family: Inter,Asap,sans-serif; @@ -421,9 +464,13 @@ exports[`SelectInputV2 > renders correctly disabled 1`] = ` text-transform: none; -webkit-text-decoration: none; text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } -.emotion-10 { +.emotion-11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -451,7 +498,7 @@ exports[`SelectInputV2 > renders correctly disabled 1`] = ` display: flex; } -.emotion-12 { +.emotion-13 { vertical-align: middle; fill: #b5b7bd; height: 16px; @@ -460,7 +507,7 @@ exports[`SelectInputV2 > renders correctly disabled 1`] = ` min-height: 16px; } -.emotion-12 .fillStroke { +.emotion-13 .fillStroke { stroke: #b5b7bd; fill: none; } @@ -473,8 +520,8 @@ exports[`SelectInputV2 > renders correctly disabled 1`] = ` class="emotion-0 emotion-1" >
renders correctly disabled 1`] = ` data-size="large" data-state="neutral" data-testid="select-input-test" - id=":ram:" + id=":rah:" role="combobox" tabindex="0" >

placeholder

@@ -612,18 +658,7 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` background: #ffffff; border-radius: 4px; width: 100%; -} - -.emotion-6[data-readonly='true'] { - background: #f9f9fa; - border-color: #d9dadd; - cursor: default; -} - -.emotion-6[data-disabled='true'] { - background: #f3f3f4; - border-color: #e9eaeb; - cursor: not-allowed; + overflow: hidden; } .emotion-6[data-size='small'] { @@ -643,33 +678,64 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` border: 1px solid #d9dadd; } +.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active { + border-color: #792dd4; + box-shadow: 0px 0px 0px 3px #8c40ef40; +} + +.emotion-6[data-state='neutral']:not([data-disabled='true']):hover, +.emotion-6[data-state='neutral']:not([data-disabled='true']):focus { + border-color: #792dd4; + outline: none; +} + +.emotion-6[data-state='neutral'][data-dropdownvisible='true'] { + border-color: #792dd4; +} + .emotion-6[data-state='success'] { border: 1px solid #22674e; } +.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active { + border-color: #1b533f; + box-shadow: 0px 0px 0px 3px #45d19f40; +} + +.emotion-6[data-state='success'][data-dropdownvisible='true'] { + border-color: #1b533f; +} + .emotion-6[data-state='danger'] { border: 1px solid #b3144d; } -.emotion-6:not([data-disabled='true']):not([data-readonly]):hover { - border-color: #8c40ef; +.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active { + border-color: #92103f; + box-shadow: 0px 0px 0px 3px #f91b6c40; } -.emotion-6:not([data-disabled='true']):not([data-readonly]):active { - box-shadow: 0px 0px 0px 3px #8c40ef40; +.emotion-6[data-state='danger'][data-dropdownvisible='true'] { + border-color: #92103f; } -.emotion-6:not([data-disabled='true']):hover, -.emotion-6:not([data-disabled='true']):focus { - border-color: #792dd4; - outline: none; +.emotion-6:not([data-disabled='true']):not([data-readonly]):hover { + border-color: #8c40ef; } -.emotion-6[data-dropdownvisible='true'] { - border-color: #792dd4; +.emotion-6[data-readonly='true'] { + background: #f9f9fa; + border-color: #d9dadd; + cursor: default; } -.emotion-8 { +.emotion-6[data-disabled='true'] { + background: #f3f3f4; + border-color: #e9eaeb; + cursor: not-allowed; +} + +.emotion-9 { color: #727683; font-size: 16px; font-family: Inter,Asap,sans-serif; @@ -679,9 +745,13 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` text-transform: none; -webkit-text-decoration: none; text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } -.emotion-10 { +.emotion-11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -709,7 +779,7 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` display: flex; } -.emotion-12 { +.emotion-13 { vertical-align: middle; fill: #3f4250; height: 16px; @@ -718,12 +788,12 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` min-height: 16px; } -.emotion-12 .fillStroke { +.emotion-13 .fillStroke { stroke: #3f4250; fill: none; } -.emotion-15 { +.emotion-16 { background: #151a2d; color: #ffffff; border-radius: 4px; @@ -747,14 +817,15 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` color: #3f4250; box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d; padding: 0; + margin-bottom: 80px; } -.emotion-15[data-animated="true"] { +.emotion-16[data-animated="true"] { -webkit-animation: 0ms animation-0 forwards; animation: 0ms animation-0 forwards; } -.emotion-15[data-has-arrow="true"]::after { +.emotion-16[data-has-arrow="true"]::after { content: " "; position: absolute; top: -5px; @@ -770,11 +841,11 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` pointer-events: none; } -.emotion-15[data-visible-in-dom="false"] { +.emotion-16[data-visible-in-dom="false"] { display: none; } -.emotion-17 { +.emotion-18 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -797,7 +868,7 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` flex-wrap: nowrap; } -.emotion-20 { +.emotion-21 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -824,7 +895,7 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` padding-right: 16px; } -.emotion-22 { +.emotion-23 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -838,69 +909,69 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` border-radius: 4px; } -.emotion-22>.emotion-29 { +.emotion-23>.emotion-30 { color: #3f4250; } -.emotion-22>.emotion-29::-webkit-input-placeholder { +.emotion-23>.emotion-30::-webkit-input-placeholder { color: #727683; } -.emotion-22>.emotion-29::-moz-placeholder { +.emotion-23>.emotion-30::-moz-placeholder { color: #727683; } -.emotion-22>.emotion-29:-ms-input-placeholder { +.emotion-23>.emotion-30:-ms-input-placeholder { color: #727683; } -.emotion-22>.emotion-29::placeholder { +.emotion-23>.emotion-30::placeholder { color: #727683; } -.emotion-22[data-success='true'] { +.emotion-23[data-success='true'] { border-color: #22674e; } -.emotion-22[data-error='true'] { +.emotion-23[data-error='true'] { border-color: #b3144d; } -.emotion-22[data-readonly='true'] { +.emotion-23[data-readonly='true'] { background: #f9f9fa; border-color: #d9dadd; } -.emotion-22[data-disabled='true'] { +.emotion-23[data-disabled='true'] { background: #f3f3f4; border-color: #e9eaeb; } -.emotion-22[data-disabled='true']>.emotion-29 { +.emotion-23[data-disabled='true']>.emotion-30 { color: #b5b7bd; } -.emotion-22[data-disabled='true']>.emotion-29::-webkit-input-placeholder { +.emotion-23[data-disabled='true']>.emotion-30::-webkit-input-placeholder { color: #b5b7bd; } -.emotion-22[data-disabled='true']>.emotion-29::-moz-placeholder { +.emotion-23[data-disabled='true']>.emotion-30::-moz-placeholder { color: #b5b7bd; } -.emotion-22[data-disabled='true']>.emotion-29:-ms-input-placeholder { +.emotion-23[data-disabled='true']>.emotion-30:-ms-input-placeholder { color: #b5b7bd; } -.emotion-22[data-disabled='true']>.emotion-29::placeholder { +.emotion-23[data-disabled='true']>.emotion-30::placeholder { color: #b5b7bd; } -.emotion-22:not([data-disabled='true']):not([data-readonly]):hover { +.emotion-23:not([data-disabled='true']):not([data-readonly]):hover { border-color: #8c40ef; } -.emotion-24 { +.emotion-25 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -926,11 +997,11 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` border-color: inherit; } -.emotion-24[data-size="small"] { +.emotion-25[data-size="small"] { padding: 8px; } -.emotion-28 { +.emotion-29 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -943,15 +1014,15 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` font-size: 14px; } -.emotion-28[data-size='large'] { +.emotion-29[data-size='large'] { font-size: 16px; } -.emotion-28[data-size='small'] { +.emotion-29[data-size='small'] { padding-left: 8px; } -.emotion-30 { +.emotion-31 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -979,11 +1050,11 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` padding-top: 4px; } -.emotion-30[data-grouped="true"] { +.emotion-31[data-grouped="true"] { padding-top: 0; } -.emotion-32 { +.emotion-33 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1006,13 +1077,13 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` flex-wrap: nowrap; } -.emotion-34 { +.emotion-35 { position: -webkit-sticky; position: sticky; top: 0px; } -.emotion-36 { +.emotion-37 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1038,21 +1109,22 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` margin-bottom: 2px; } -.emotion-36:focus { +.emotion-37:focus { background-color: #f9f9fa; outline: none; } -.emotion-36[data-selectgroup='true'] { +.emotion-37[data-selectgroup='true'] { padding-left: 16px; border-left: 4px solid #f9f9fa; } -.emotion-36[data-selectgroup='true']:focus { +.emotion-37[data-selectgroup='true']:focus { background-color: #e9eaeb; } -.emotion-38 { +.emotion-39 { + color: #3f4250; font-size: 12px; font-family: Inter,Asap,sans-serif; font-weight: 400; @@ -1064,7 +1136,7 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` text-align: left; } -.emotion-42 { +.emotion-43 { text-align: left; border: none; background-color: #ffffff; @@ -1075,32 +1147,32 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` border-radius: 4px; } -.emotion-42:hover, -.emotion-42:focus { +.emotion-43:hover, +.emotion-43:focus { background-color: #f1eefc; color: #641cb3; cursor: pointer; outline: none; } -.emotion-42[data-selected='true'] { +.emotion-43[data-selected='true'] { background-color: #f1eefc; } -.emotion-42[disabled] { +.emotion-43[disabled] { background-color: #f3f3f4; color: #b5b7bd; } -.emotion-42[disabled]:hover, -.emotion-42 [disabled]:focus { +.emotion-43[disabled]:hover, +.emotion-43 [disabled]:focus { background-color: #f3f3f4; color: #b5b7bd; cursor: not-allowed; outline: none; } -.emotion-46 { +.emotion-47 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1120,9 +1192,10 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; + overflow: hidden; } -.emotion-48 { +.emotion-50 { font-size: 16px; font-family: Inter,Asap,sans-serif; font-weight: 400; @@ -1132,9 +1205,19 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` -webkit-text-decoration: none; text-decoration: none; text-align: left; + overflow: auto; + text-overflow: ellipsis; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + max-width: 100%; } -.emotion-66 { +.emotion-70 { color: #727683; font-size: 14px; font-family: Inter,Asap,sans-serif; @@ -1147,7 +1230,7 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` text-align: left; } -.emotion-130 { +.emotion-140 { font-size: 16px; font-family: Inter,Asap,sans-serif; font-weight: 400; @@ -1158,7 +1241,7 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` text-decoration: none; } -.emotion-133 { +.emotion-143 { font-size: 12px; font-family: Inter,Asap,sans-serif; font-weight: 400; @@ -1225,22 +1308,21 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` tabindex="0" >

placeholder

@@ -1248,7 +1330,7 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = `
renders correctly grouped 1`] = ` style="opacity: 1;" >
@@ -1288,7 +1369,7 @@ exports[`SelectInputV2 > renders correctly grouped 1`] = ` renders correctly grouped 1`] = `
- - - - - +
- - - - +
@@ -1678,18 +1759,7 @@ exports[`SelectInputV2 > renders correctly loadMore 1`] = ` background: #ffffff; border-radius: 4px; width: 100%; -} - -.emotion-6[data-readonly='true'] { - background: #f9f9fa; - border-color: #d9dadd; - cursor: default; -} - -.emotion-6[data-disabled='true'] { - background: #f3f3f4; - border-color: #e9eaeb; - cursor: not-allowed; + overflow: hidden; } .emotion-6[data-size='small'] { @@ -1709,33 +1779,64 @@ exports[`SelectInputV2 > renders correctly loadMore 1`] = ` border: 1px solid #d9dadd; } +.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active { + border-color: #792dd4; + box-shadow: 0px 0px 0px 3px #8c40ef40; +} + +.emotion-6[data-state='neutral']:not([data-disabled='true']):hover, +.emotion-6[data-state='neutral']:not([data-disabled='true']):focus { + border-color: #792dd4; + outline: none; +} + +.emotion-6[data-state='neutral'][data-dropdownvisible='true'] { + border-color: #792dd4; +} + .emotion-6[data-state='success'] { border: 1px solid #22674e; } +.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active { + border-color: #1b533f; + box-shadow: 0px 0px 0px 3px #45d19f40; +} + +.emotion-6[data-state='success'][data-dropdownvisible='true'] { + border-color: #1b533f; +} + .emotion-6[data-state='danger'] { border: 1px solid #b3144d; } -.emotion-6:not([data-disabled='true']):not([data-readonly]):hover { - border-color: #8c40ef; +.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active { + border-color: #92103f; + box-shadow: 0px 0px 0px 3px #f91b6c40; } -.emotion-6:not([data-disabled='true']):not([data-readonly]):active { - box-shadow: 0px 0px 0px 3px #8c40ef40; +.emotion-6[data-state='danger'][data-dropdownvisible='true'] { + border-color: #92103f; } -.emotion-6:not([data-disabled='true']):hover, -.emotion-6:not([data-disabled='true']):focus { - border-color: #792dd4; - outline: none; +.emotion-6:not([data-disabled='true']):not([data-readonly]):hover { + border-color: #8c40ef; } -.emotion-6[data-dropdownvisible='true'] { - border-color: #792dd4; +.emotion-6[data-readonly='true'] { + background: #f9f9fa; + border-color: #d9dadd; + cursor: default; } -.emotion-8 { +.emotion-6[data-disabled='true'] { + background: #f3f3f4; + border-color: #e9eaeb; + cursor: not-allowed; +} + +.emotion-9 { color: #727683; font-size: 16px; font-family: Inter,Asap,sans-serif; @@ -1745,9 +1846,13 @@ exports[`SelectInputV2 > renders correctly loadMore 1`] = ` text-transform: none; -webkit-text-decoration: none; text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } -.emotion-10 { +.emotion-11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1775,7 +1880,7 @@ exports[`SelectInputV2 > renders correctly loadMore 1`] = ` display: flex; } -.emotion-12 { +.emotion-13 { vertical-align: middle; fill: #3f4250; height: 16px; @@ -1784,7 +1889,7 @@ exports[`SelectInputV2 > renders correctly loadMore 1`] = ` min-height: 16px; } -.emotion-12 .fillStroke { +.emotion-13 .fillStroke { stroke: #3f4250; fill: none; } @@ -1797,8 +1902,8 @@ exports[`SelectInputV2 > renders correctly loadMore 1`] = ` class="emotion-0 emotion-1" >
renders correctly loadMore 1`] = ` data-size="large" data-state="neutral" data-testid="select-input-test" - id=":rac:" + id=":ra9:" role="combobox" tabindex="0" >

placeholder

@@ -1946,18 +2050,7 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = ` background: #ffffff; border-radius: 4px; width: 100%; -} - -.emotion-6[data-readonly='true'] { - background: #f9f9fa; - border-color: #d9dadd; - cursor: default; -} - -.emotion-6[data-disabled='true'] { - background: #f3f3f4; - border-color: #e9eaeb; - cursor: not-allowed; + overflow: hidden; } .emotion-6[data-size='small'] { @@ -1977,33 +2070,64 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = ` border: 1px solid #d9dadd; } +.emotion-6[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active { + border-color: #792dd4; + box-shadow: 0px 0px 0px 3px #8c40ef40; +} + +.emotion-6[data-state='neutral']:not([data-disabled='true']):hover, +.emotion-6[data-state='neutral']:not([data-disabled='true']):focus { + border-color: #792dd4; + outline: none; +} + +.emotion-6[data-state='neutral'][data-dropdownvisible='true'] { + border-color: #792dd4; +} + .emotion-6[data-state='success'] { border: 1px solid #22674e; } +.emotion-6[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active { + border-color: #1b533f; + box-shadow: 0px 0px 0px 3px #45d19f40; +} + +.emotion-6[data-state='success'][data-dropdownvisible='true'] { + border-color: #1b533f; +} + .emotion-6[data-state='danger'] { border: 1px solid #b3144d; } -.emotion-6:not([data-disabled='true']):not([data-readonly]):hover { - border-color: #8c40ef; +.emotion-6[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active { + border-color: #92103f; + box-shadow: 0px 0px 0px 3px #f91b6c40; } -.emotion-6:not([data-disabled='true']):not([data-readonly]):active { - box-shadow: 0px 0px 0px 3px #8c40ef40; +.emotion-6[data-state='danger'][data-dropdownvisible='true'] { + border-color: #92103f; } -.emotion-6:not([data-disabled='true']):hover, -.emotion-6:not([data-disabled='true']):focus { - border-color: #792dd4; - outline: none; +.emotion-6:not([data-disabled='true']):not([data-readonly]):hover { + border-color: #8c40ef; } -.emotion-6[data-dropdownvisible='true'] { - border-color: #792dd4; +.emotion-6[data-readonly='true'] { + background: #f9f9fa; + border-color: #d9dadd; + cursor: default; } -.emotion-8 { +.emotion-6[data-disabled='true'] { + background: #f3f3f4; + border-color: #e9eaeb; + cursor: not-allowed; +} + +.emotion-9 { color: #727683; font-size: 16px; font-family: Inter,Asap,sans-serif; @@ -2013,9 +2137,13 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = ` text-transform: none; -webkit-text-decoration: none; text-decoration: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } -.emotion-10 { +.emotion-11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2043,7 +2171,7 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = ` display: flex; } -.emotion-12 { +.emotion-13 { vertical-align: middle; fill: #3f4250; height: 16px; @@ -2052,12 +2180,12 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = ` min-height: 16px; } -.emotion-12 .fillStroke { +.emotion-13 .fillStroke { stroke: #3f4250; fill: none; } -.emotion-15 { +.emotion-16 { background: #151a2d; color: #ffffff; border-radius: 4px; @@ -2081,14 +2209,15 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = ` color: #3f4250; box-shadow: 0px 4px 8px 0px #22263829,0px 8px 24px 0px #2226383d; padding: 0; + margin-bottom: 80px; } -.emotion-15[data-animated="true"] { +.emotion-16[data-animated="true"] { -webkit-animation: 0ms animation-0 forwards; animation: 0ms animation-0 forwards; } -.emotion-15[data-has-arrow="true"]::after { +.emotion-16[data-has-arrow="true"]::after { content: " "; position: absolute; top: -5px; @@ -2104,11 +2233,11 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = ` pointer-events: none; } -.emotion-15[data-visible-in-dom="false"] { +.emotion-16[data-visible-in-dom="false"] { display: none; } -.emotion-17 { +.emotion-18 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2131,7 +2260,7 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = ` flex-wrap: nowrap; } -.emotion-19 { +.emotion-20 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2159,11 +2288,11 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = ` padding-top: 4px; } -.emotion-19[data-grouped="true"] { +.emotion-20[data-grouped="true"] { padding-top: 0; } -.emotion-21 { +.emotion-22 { position: relative; width: 100%; overflow: hidden; @@ -2179,7 +2308,7 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = ` height: 100%; } -.emotion-23 { +.emotion-24 { min-height: 200px; width: 100%; height: 100%; @@ -2189,11 +2318,11 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = ` margin: 0; } -.emotion-23>.emotion-26:not(:last-child) { +.emotion-24>.emotion-27:not(:last-child) { border-bottom: 1px solid #d9dadd; } -.emotion-25 { +.emotion-26 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2205,7 +2334,7 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = ` padding: 24px 16px; } -.emotion-27 { +.emotion-28 { margin-right: 8px; width: 32px; height: 32px; @@ -2214,7 +2343,7 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = ` background-color: #e9eaeb; } -.emotion-29 { +.emotion-30 { height: 12px; width: 120px; max-width: 100%; @@ -2222,7 +2351,7 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = ` background-color: #e9eaeb; } -.emotion-43 { +.emotion-44 { position: absolute; top: 0; height: 100%; @@ -2243,7 +2372,7 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = ` } @media (prefers-reduced-motion: reduce) { - .emotion-43 { + .emotion-44 { -webkit-animation: unset; animation: unset; } @@ -2257,8 +2386,8 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = ` class="emotion-0 emotion-1" >
renders correctly loading - grouped data 1`] = ` data-size="large" data-state="neutral" data-testid="select-input-test" - id=":r1tj:" + id=":r1sk:" role="combobox" tabindex="0" >

placeholder

@@ -2304,18 +2432,18 @@ exports[`SelectInputV2 > renders correctly loading - grouped data 1`] = `