@@ -1761,79 +1876,45 @@ exports[`SelectInputField > should render correctly with a disabled option 1`] =
novalidate=""
>
@@ -1873,230 +1941,163 @@ exports[`SelectInputField > should trigger events 1`] = `
.emotion-2 {
width: 100%;
- position: relative;
- box-sizing: border-box;
}
.emotion-4 {
- z-index: 9999;
- border: 0;
- clip: rect(1px, 1px, 1px, 1px);
- height: 1px;
- width: 1px;
- position: absolute;
- overflow: hidden;
- padding: 0;
- white-space: nowrap;
+ display: inherit;
+}
+
+.emotion-4[data-container-full-height="true"] {
+ height: 100%;
+}
+
+.emotion-4[data-container-full-width="true"] {
+ width: 100%;
}
.emotion-6 {
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- cursor: pointer;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
- -webkit-box-flex-wrap: wrap;
- -webkit-flex-wrap: wrap;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- justify-content: space-between;
- min-height: 48px;
- outline: 0!important;
- position: relative;
- -webkit-transition: border-color 200ms ease,box-shadow 200ms ease;
- transition: border-color 200ms ease,box-shadow 200ms ease;
- background-color: #ffffff;
- border-color: #d9dadd;
- border-radius: 4px;
- border-style: solid;
- border-width: 1px;
+ -webkit-box-flex-wrap: nowrap;
+ -webkit-flex-wrap: nowrap;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -webkit-align-items: normal;
+ -webkit-box-align: normal;
+ -ms-flex-align: normal;
+ align-items: normal;
+ -webkit-box-pack: normal;
+ -ms-flex-pack: normal;
+ -webkit-justify-content: normal;
+ justify-content: normal;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ gap: 0.25rem;
+}
+
+.emotion-8 {
+ display: grid;
+ width: 100%;
+ gap: 0.5rem;
+ grid-template-columns: 1fr auto;
+ padding: 0.5rem;
+ padding-right: 0;
+ padding-left: 1rem;
+ cursor: pointer;
box-shadow: none;
- box-sizing: border-box;
- color: #3f4250;
- font-size: 16px;
- font-weight: 500;
- line-height: 24px;
- -webkit-animation: none;
- animation: none;
+ background: #ffffff;
+ border-radius: 0.25rem;
+ width: 100%;
}
-.emotion-6:hover {
- border-color: hsl(0, 0%, 70%);
+.emotion-8[data-size='small'] {
+ height: 2rem;
+ padding-left: 0.5rem;
}
-.emotion-6:focus-within {
- border-color: #8c40ef;
+.emotion-8[data-size='medium'] {
+ height: 2.5rem;
+}
+
+.emotion-8[data-size='large'] {
+ height: 3rem;
+}
+
+.emotion-8[data-state='neutral'] {
+ border: 1px solid #d9dadd;
+}
+
+.emotion-8[data-state='neutral']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+ border-color: #792dd4;
box-shadow: 0px 0px 0px 3px #8c40ef40;
}
-.emotion-6:hover {
+.emotion-8[data-state='neutral']:not([data-disabled='true']):hover {
border-color: #792dd4;
+ outline: none;
}
-.emotion-7 {
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- display: grid;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- -webkit-box-flex-wrap: wrap;
- -webkit-flex-wrap: wrap;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- -webkit-overflow-scrolling: touch;
- position: relative;
- overflow: hidden;
- padding: 2px 8px;
- box-sizing: border-box;
- height: 100%;
- padding-top: 0;
+.emotion-8[data-state='neutral']:not([data-disabled='true']):focus-visible {
+ outline: 5px auto Highlight;
+ outline: 5px auto -webkit-focus-ring-color;
}
-.emotion-7 label {
- display: initial;
+.emotion-8[data-state='neutral'][data-dropdownvisible='true'] {
+ border-color: #792dd4;
}
-.emotion-8 {
- position: absolute;
- left: 0;
- font-weight: 400;
- pointer-events: none;
- color: #3f4250;
- white-space: nowrap;
- width: 100%;
- height: 100%;
- font-size: 16px;
- -webkit-transition: -webkit-transform 250ms ease;
- transition: transform 250ms ease;
- opacity: 0;
- -webkit-transform: translate(0, -8px) scale(0.8);
- -moz-transform: translate(0, -8px) scale(0.8);
- -ms-transform: translate(0, -8px) scale(0.8);
- transform: translate(0, -8px) scale(0.8);
- transform-origin: left;
- padding-left: 8px;
- left: 0;
- top: 2px;
- opacity: 1;
+.emotion-8[data-state='success'] {
+ border: 1px solid #22674e;
}
-.emotion-10 {
- grid-area: 1/1/2/3;
- max-width: 100%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- color: #3f4250;
- margin-left: 0;
- margin-right: 0;
- box-sizing: border-box;
- margin-top: 5px;
- padding-left: 0;
+.emotion-8[data-state='success']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+ border-color: #1b533f;
+ box-shadow: 0px 0px 0px 3px #45d19f40;
}
-.emotion-11 {
- margin-left: 0px;
- caret-color: transparent;
-}
-
-.emotion-12 {
- visibility: visible;
- -webkit-flex: 1 1 auto;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- display: inline-grid;
- grid-area: 1/1/2/3;
- grid-template-columns: 0 min-content;
- margin: 2px;
- padding-bottom: 2px;
- padding-top: 11px;
- color: hsl(0, 0%, 20%);
- box-sizing: border-box;
- -webkit-box-flex: 1;
- -webkit-flex-grow: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- margin-left: 0;
-}
-
-.emotion-12:after {
- content: attr(data-value) " ";
- visibility: hidden;
- white-space: pre;
- grid-area: 1/2;
- font: inherit;
- min-width: 2px;
- border: 0;
- margin: 0;
- outline: 0;
- padding: 0;
+.emotion-8[data-state='success'][data-dropdownvisible='true'] {
+ border-color: #1b533f;
}
-.emotion-13 {
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-align-self: stretch;
- -ms-flex-item-align: stretch;
- align-self: stretch;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- box-sizing: border-box;
- max-height: 48px;
-}
-
-.emotion-14 {
- -webkit-align-self: stretch;
- -ms-flex-item-align: stretch;
- align-self: stretch;
- width: 1px;
- background-color: #d9dadd;
- margin-bottom: 8px;
- margin-top: 8px;
- box-sizing: border-box;
- display: none;
+.emotion-8[data-state='danger'] {
+ border: 1px solid #b3144d;
}
-.emotion-15 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transition: color 150ms;
- transition: color 150ms;
- color: hsl(0, 0%, 80%);
- padding: 8px;
- box-sizing: border-box;
+.emotion-8[data-state='danger']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+ border-color: #92103f;
+ box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-8[data-state='danger'][data-dropdownvisible='true'] {
+ border-color: #92103f;
+}
+
+.emotion-8:not([data-disabled='true']):not([data-readonly]):hover {
+ border-color: #8c40ef;
+}
+
+.emotion-8[data-readonly='true'] {
+ background: #f9f9fa;
+ border-color: #d9dadd;
+ cursor: default;
+}
+
+.emotion-8[data-disabled='true'] {
+ background: #f3f3f4;
+ border-color: #e9eaeb;
+ cursor: not-allowed;
}
-.emotion-15:hover {
- color: hsl(0, 0%, 60%);
+.emotion-11 {
+ color: #3f4250;
+ font-size: 1rem;
+ font-family: Inter,sans-serif;
+ font-weight: 400;
+ letter-spacing: 0;
+ line-height: 1.5rem;
+ text-transform: none;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ -webkit-align-self: center;
+ -ms-flex-item-align: center;
+ align-self: center;
}
-.emotion-16 {
+.emotion-13 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
- gap: 0.5rem;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
+ -webkit-box-flex-wrap: nowrap;
+ -webkit-flex-wrap: nowrap;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@@ -2105,41 +2106,31 @@ exports[`SelectInputField > should trigger events 1`] = `
-ms-flex-pack: normal;
-webkit-justify-content: normal;
justify-content: normal;
- -webkit-box-flex-wrap: nowrap;
- -webkit-flex-wrap: nowrap;
- -ms-flex-wrap: nowrap;
- flex-wrap: nowrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ gap: 0.5rem;
+ padding-right: 1rem;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
}
-.emotion-18 {
+.emotion-15 {
vertical-align: middle;
- fill: currentColor;
+ fill: #3f4250;
height: 1rem;
width: 1rem;
min-width: 1rem;
min-height: 1rem;
}
-.emotion-18 .fillStroke {
- stroke: currentColor;
+.emotion-15 .fillStroke {
+ stroke: #3f4250;
fill: none;
}
-.emotion-20 {
- height: auto;
-}
-
-.emotion-20[data-is-animated="true"] {
- -webkit-transition: max-height 300ms ease-out,opacity 300ms ease-out;
- transition: max-height 300ms ease-out,opacity 300ms ease-out;
-}
-
-.emotion-22 {
- font-size: 12px;
- color: #b3144d;
- padding-top: 0.125rem;
-}
-
@@ -2148,77 +2139,45 @@ exports[`SelectInputField > should trigger events 1`] = `
novalidate=""
>
-
-
-
-
- Label
-
-
-
-
-
-
-
+ Mercury
+
+
-
-
diff --git a/packages/form/src/components/SelectInputField/__tests__/index.test.tsx b/packages/form/src/components/SelectInputField/__tests__/index.test.tsx
index 3bc1c6ea0a..98431ded87 100644
--- a/packages/form/src/components/SelectInputField/__tests__/index.test.tsx
+++ b/packages/form/src/components/SelectInputField/__tests__/index.test.tsx
@@ -1,89 +1,54 @@
-import { act, fireEvent, screen } from '@testing-library/react'
+import { act, fireEvent, screen, waitFor } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
import { renderWithForm } from '@utils/test'
-import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+import { describe, expect, test, vi } from 'vitest'
import { SelectInputField } from '..'
+import { cities, planets } from './resources'
describe('SelectInputField', () => {
- beforeEach(() => {
- vi.spyOn(global.Math, 'random').mockReturnValue(0.4155913669444804)
- })
-
- afterEach(() => {
- vi.spyOn(global.Math, 'random').mockRestore()
- })
test('should render correctly', () => {
const { asFragment } = renderWithForm(
-
-
- ,
+
,
)
expect(asFragment()).toMatchSnapshot()
})
test('should render correctly disabled', () => {
const { asFragment } = renderWithForm(
-
-
-
- ,
+
,
)
expect(asFragment()).toMatchSnapshot()
})
- test('should render correctly multiple', () => {
+ test('should render correctly multiselect', () => {
const { asFragment } = renderWithForm(
-
-
-
- ,
+
,
)
expect(asFragment()).toMatchSnapshot()
})
- test('should render correctly with a disabled option', () => {
+ test('should render correctly grouped', () => {
const { asFragment } = renderWithForm(
-
-
-
- ,
+
,
)
expect(asFragment()).toMatchSnapshot()
})
test('should display right value on grouped options', async () => {
- const selectedOption = { label: 'Group Label', value: 'Group Value' }
- const options = [
- {
- label: 'Group',
- options: [
- selectedOption,
- { label: 'Group Label 2', value: 'Group value2' },
- ],
- },
- ]
-
- const { asFragment, container } = renderWithForm(
-
,
+ const { asFragment } = renderWithForm(
+
,
)
- const select = screen.getByRole
('combobox')
- act(() => select.focus())
+ const select = screen.getByTestId('select-input-test')
+ await userEvent.click(select)
fireEvent.keyDown(select, { key: 'ArrowDown', keyCode: 40 })
- const option = screen.getByTestId(
- `option-test-${selectedOption.value}`,
- // eslint-disable-next-line testing-library/no-node-access
- ).firstChild as HTMLElement
+ const mercury = screen.getByTestId(`option-stack-mercury`)
- await userEvent.click(option)
-
- // react-select works with a hidden input to handle value.
- // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container
- const hiddenSelectInput = container.querySelector(
- 'input[type="hidden"]',
- ) as HTMLInputElement
+ await userEvent.click(mercury)
+ await userEvent.click(select)
- const { value } = hiddenSelectInput
- expect(value).toBe(selectedOption.value)
+ await waitFor(() => {
+ expect(screen.getByTestId(`option-stack-mercury`)).toBeVisible()
+ })
expect(asFragment()).toMatchSnapshot()
})
@@ -93,22 +58,21 @@ describe('SelectInputField', () => {
const { asFragment } = renderWithForm(
,
)
- const select = screen.getByRole('combobox')
- fireEvent.keyDown(select, { key: 'ArrowDown', keyCode: 40 })
- const option =
- // eslint-disable-next-line testing-library/no-node-access
- screen.getByTestId('option-test-value').firstChild as HTMLElement
+ const select = screen.getByTestId('select-input-test')
+ await userEvent.click(select)
+ const option = screen.getByTestId('option-stack-mercury')
await userEvent.click(option)
- expect(onChange).toBeCalledTimes(1)
+ await waitFor(() => {
+ expect(onChange).toBeCalledTimes(1)
+ })
act(() => select.blur())
+
expect(asFragment()).toMatchSnapshot()
})
})
diff --git a/packages/form/src/components/SelectInputFieldV2/__tests__/resources.tsx b/packages/form/src/components/SelectInputField/__tests__/resources.tsx
similarity index 100%
rename from packages/form/src/components/SelectInputFieldV2/__tests__/resources.tsx
rename to packages/form/src/components/SelectInputField/__tests__/resources.tsx
diff --git a/packages/form/src/components/SelectInputField/index.tsx b/packages/form/src/components/SelectInputField/index.tsx
index 40a2795448..71fccc4cb4 100644
--- a/packages/form/src/components/SelectInputField/index.tsx
+++ b/packages/form/src/components/SelectInputField/index.tsx
@@ -1,312 +1,75 @@
'use client'
-import type { CSSObject, Theme, css } from '@emotion/react'
import { SelectInput } from '@ultraviolet/ui'
-import type {
- ComponentProps,
- ForwardedRef,
- ReactElement,
- ReactNode,
-} from 'react'
-import { Children, useCallback, useMemo } from 'react'
-import type { FieldPath, FieldValues } from 'react-hook-form'
+import { useCallback } from 'react'
+import type { ComponentProps } from 'react'
+import type { FieldPath, FieldValues, PathValue } from 'react-hook-form'
import { useController } from 'react-hook-form'
-import type { CommonProps, GroupBase, OptionProps, Props } from 'react-select'
-import type Select from 'react-select'
import { useErrors } from '../../providers'
import type { BaseFieldProps } from '../../types'
-// Here we duplicate SelectInput types as they are using interfaces which are not portable
-export type SelectInputType = typeof SelectInput
-
-type SelectOption = {
- value: string
- label: ReactNode
- disabled?: boolean
- description?: string
- inlineDescription?: string
-}
-
-type WithSelectProps = {
- selectProps: SelectProps
-}
-
-type SelectStyleProps = {
- error?: string
- /**
- * Custom styles of the SelectInput. See [React select documentation](https://react-select.com/styles)
- */
- customStyle: (
- state: SelectProps & WithSelectProps,
- ) => Record
- animation?: string
- /**
- * Time of the animation
- */
- animationDuration?: number
- /**
- * Show/hide the label inside the component
- */
- noTopLabel?: boolean
- theme: Theme
-}
-
-type StyledContainerProps = {
- isDisabled?: boolean
- additionalStyles?: Parameters[0]
-}
-
-type SelectProps = StyledContainerProps &
- Omit, 'value'> &
- CommonProps> & {
- value?: string | SelectOption
- checked?: boolean
- error?: string
- labelId?: string
- required?: boolean
- time?: boolean
- }
-
-type StateManagedSelect = typeof Select
-
-type SelectInputProps = Partial<
- SelectProps &
- SelectStyleProps &
- Pick, 'data-testid'> & {
- /**
- * Name of the animation
- */
- animation?: string
- /**
- * Play the animation when the value change
- */
- animationOnChange?: boolean
- disabled?: boolean
- readOnly?: boolean
- innerRef?: ForwardedRef
- /**
- * Custom components of the SelectInput. See [React select documentation](https://react-select.com/components)
- */
- customComponents?: SelectProps['components']
- children: ReactNode
- emptyState?: ComponentProps