feat: update react-select v5 (#536)

* feat(ui): update react-select v5

* feat(ui): update react-select v5

* fix(test): visual

* fix(test): unit & visual

* fix(test): unit & visual

* fix(test): unit & visual

* fix(test): unit & visual

* fix(test): unit & visual

* fix(test): unit & visual

package.json

@@ -54,22 +54,24 @@
   },
   "pnpm": {
     "overrides": {
-      "shelljs@<0.8.5": ">=0.8.5",
-      "qs@>=6.10.0 <6.10.3": ">=6.10.3",
-      "@sideway/formula@<3.0.1": ">=3.0.1",
-      "json5@<1.0.2": ">=1.0.2",
-      "minimist@>=1.0.0 <1.2.6": ">=1.2.6",
-      "loader-utils@<1.4.1": ">=1.4.1",
-      "loader-utils@>=2.0.0 <2.0.3": ">=2.0.3",
-      "loader-utils@>=2.0.0 <2.0.4": ">=2.0.4",
-      "loader-utils@>=1.0.0 <1.4.2": ">=1.4.2",
-      "ini@<1.3.6": ">=1.3.6",
+      "trim@<0.0.3": ">=0.0.3",
+      "xml2js@<0.5.0": ">=0.5.0",
+      "browserify-sign@>=2.6.0 <=4.2.1": ">=4.2.2",
+      "postcss@<8.4.31": ">=8.4.31",
+      "react-devtools-core@<4.28.4": ">=4.28.4",
+      "glob-parent@<5.1.2": ">=5.1.2",
+      "word-wrap@<1.2.4": ">=1.2.4",
       "trim-newlines@<3.0.1": ">=3.0.1",
-      "shell-quote@<=1.7.2": ">=1.7.3",
-      "decode-uri-component@<0.2.1": ">=0.2.1",
-      "terser@>=5.0.0 <5.14.2": ">=5.14.2",
-      "terser@<4.8.1": ">=4.8.1",
-      "yaml@>=2.0.0-5 <2.2.2": ">=2.2.2"
+      "tough-cookie@<4.1.3": ">=4.1.3",
+      "@babel/traverse@<7.23.2": ">=7.23.2",
+      "follow-redirects@<1.15.4": ">=1.15.4",
+      "qs@>=6.9.0 <6.9.7": ">=6.9.7",
+      "semver@>=7.0.0 <7.5.2": ">=7.5.2",
+      "semver@<5.7.2": ">=5.7.2",
+      "semver@>=6.0.0 <6.3.1": ">=6.3.1",
+      "axios@>=0.8.1 <0.28.0": ">=0.28.0",
+      "axios@>=1.0.0 <1.6.0": ">=1.6.0",
+      "ip@=2.0.0": ">=2.0.1"
     }
   }
 }

packages/ui/__stories__/Icon.stories.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { Clipboard, FolderPlus } from 'react-feather'
-import { Google } from '@icons-pack/react-simple-icons'
 import { Meta, Story } from '@storybook/react'
 
 import { Icon, IconProps } from '../src/Icon'
@@ -57,8 +56,3 @@ export const FeatherIcon = Template.bind({})
 FeatherIcon.args = {
   icon: FolderPlus,
 }
-
-export const SimpleIcon = Template.bind({})
-SimpleIcon.args = {
-  icon: Google,
-}

packages/ui/__stories__/InteractiveListFormik.stories.tsx

@@ -115,7 +115,6 @@ export const WithCustomAddButton = () => {
     try {
       await inputRef.current?.addItem()
       await schema.validate(values, { abortEarly: false })
-      console.log('submit', values)
     } catch (e) {
       logger.log('submit', e)
     }

packages/ui/__stories__/MultiSelectField.stories.tsx

@@ -1,7 +1,6 @@
 import React, { ReactNode, useState } from 'react'
 import { logger } from '@hazelcast/services'
 import { Meta, Story } from '@storybook/react'
-import { GroupedOptionsType } from 'react-select'
 import { Form, Formik } from 'formik'
 
 import { MultiSelectField, MultiSelectProps } from '../src/Select/MultiSelectField'
@@ -10,6 +9,7 @@ import { MultiSelectFieldFormik } from '../src/Select/MultiSelectFieldFormik'
 import { LONG_MULTIPLE_WORD_TEXT, LONG_ONE_WORD_TEXT } from './constants'
 
 import styles from '../src/Select/SelectField.module.scss'
+import { GroupBase } from 'react-select'
 
 const options: SelectFieldOption<string>[] = [
   { value: 'darth_vader', label: 'Darth Vader' },
@@ -137,7 +137,7 @@ WithLongTextOptions.args = {
   ],
 }
 
-const groupedOptions: GroupedOptionsType<SelectFieldOption<string>> = [
+const groupedOptions: ReadonlyArray<GroupBase<SelectFieldOption<string>>> = [
   {
     label: 'Dark Side',
     options: [

packages/ui/__stories__/SelectField.stories.tsx

@@ -2,7 +2,6 @@ import React, { ReactNode, useState } from 'react'
 import { logger } from '@hazelcast/services'
 import { Meta, Story } from '@storybook/react'
 import { Aperture } from 'react-feather'
-import { GroupedOptionsType } from 'react-select'
 import { Form, Formik } from 'formik'
 
 import { SelectField, SelectFieldProps } from '../src/Select/SelectField'
@@ -11,6 +10,7 @@ import { SelectFieldFormik } from '../src/Select/SelectFieldFormik'
 import { LONG_MULTIPLE_WORD_TEXT, LONG_ONE_WORD_TEXT } from './constants'
 
 import styles from '../src/Select/SelectField.module.scss'
+import { GroupBase } from 'react-select'
 
 const options: SelectFieldOption<string>[] = [
   { value: 'darth_vader', label: 'Darth Vader' },
@@ -170,7 +170,7 @@ WithTooltipHidden.args = {
   singleValueTooltipVisible: false,
 }
 
-const groupedOptions: GroupedOptionsType<SelectFieldOption<string>> = [
+const groupedOptions: ReadonlyArray<GroupBase<SelectFieldOption<string>>> = [
   {
     label: 'Dark Side',
     options: [

packages/ui/__tests__/AutocompleteFieldFormik.test.tsx

@@ -2,7 +2,7 @@ import React, { createRef } from 'react'
 import { Formik, Form, FormikProps } from 'formik'
 import { mountAndCheckA11Y } from '@hazelcast/test-helpers'
 import { act } from 'react-dom/test-utils'
-import Select from 'react-select'
+import Select, { SelectInstance } from 'react-select'
 
 import { AutocompleteFieldFormik } from '../src/AutocompleteFieldFormik'
 import { Error } from '../src/Error'
@@ -38,7 +38,7 @@ describe('AutocompleteFieldFormik', () => {
     )
 
     const wrapper = await mountAndCheckA11Y(<TestForm />)
-    const selectInstance = wrapper.find(Select).instance() as Select
+    const selectInstance = wrapper.find(Select)
 
     expect(formikBag.current?.values).toEqual({
       name: null,
@@ -47,7 +47,7 @@ describe('AutocompleteFieldFormik', () => {
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.(options[1], { action: 'select-option' })
+      selectInstance.props().onChange?.(options[1], { action: 'select-option' })
     })
     wrapper.update()
 
@@ -58,7 +58,7 @@ describe('AutocompleteFieldFormik', () => {
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.(options[0], { action: 'select-option' })
+      selectInstance.props().onChange?.(options[0], { action: 'select-option' })
     })
     wrapper.update()
 
@@ -83,14 +83,14 @@ describe('AutocompleteFieldFormik', () => {
     )
 
     const wrapper = await mountAndCheckA11Y(<TestForm />)
-    const selectInstance = wrapper.find(Select).instance() as Select
+    const selectInstance = wrapper.find(Select)
 
     expect(wrapper.find(Error).prop('error')).toBe(undefined)
 
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.(options[1], { action: 'select-option' })
+      selectInstance.props().onChange?.(options[1], { action: 'select-option' })
     })
     wrapper.update()
 
@@ -123,12 +123,12 @@ describe('AutocompleteFieldFormik', () => {
     )
 
     const wrapper = await mountAndCheckA11Y(<TestForm />)
-    const selectInstance = wrapper.find(Select).instance() as Select
+    const selectInstance = wrapper.find(Select)
 
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.(options[1], { action: 'select-option' })
+      selectInstance.props().onChange?.(options[1], { action: 'select-option' })
     })
     wrapper.update()
 

packages/ui/__tests__/EmptyState.test.tsx

@@ -1,5 +1,5 @@
 import { mountAndCheckA11Y } from '@hazelcast/test-helpers'
-import { Figma } from '@icons-pack/react-simple-icons'
+import { SiFigma } from '@icons-pack/react-simple-icons'
 import React from 'react'
 import cn from 'classnames'
 
@@ -14,7 +14,7 @@ const title = 'Figma'
 const description =
   'Figma is a vector graphics editor and prototyping tool, with additional offline features enabled by desktop applications for macOS and Windows.'
 // Icon
-const icon = Figma
+const icon = SiFigma
 const iconLabel = 'Icon Figma'
 // Action
 const action = 'Cool!'

packages/ui/__tests__/Pagination.test.tsx

@@ -458,11 +458,11 @@ describe('Pagination', () => {
 
     expect(setPageSize).toHaveBeenCalledTimes(0)
 
-    const selectInstance = wrapper.find(Select).instance() as Select<SelectFieldOption<number>>
+    const selectInstance = wrapper.find(Select)
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.({ value: 10, label: '10' }, { action: 'select-option' })
+      selectInstance.props().onChange?.({ value: 10, label: '10' }, { action: 'select-option' })
     })
     wrapper.update()
 

packages/ui/__tests__/Select/MultiSelectField.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useUID } from 'react-uid'
 import { mountAndCheckA11Y } from '@hazelcast/test-helpers'
-import ReactSelect, { OptionsType } from 'react-select'
+import ReactSelect, { Options } from 'react-select'
 import ReactSelectCreatable from 'react-select/creatable'
 import { X } from 'react-feather'
 
@@ -21,7 +21,7 @@ const selectId = 'selectId'
 const selectName = 'selectName'
 const selectLabel = 'selectLabel'
 
-const options: OptionsType<SelectFieldOption<string>> = [
+const options: Options<SelectFieldOption<string>> = [
   { value: 'darth_vader', label: 'Darth Vader' },
   { value: 'luke_skywalker', label: 'Luke Skywalker' },
   { value: 'obi', label: 'Obi-Wan Kenobi' },
@@ -33,7 +33,7 @@ const options: OptionsType<SelectFieldOption<string>> = [
 const selectedOptions = [options[1]]
 const selectedValues = selectedOptions.map(({ value }) => value)
 
-describe('SelectField', () => {
+describe('MultiSelectField', () => {
   beforeEach(() => {
     useUIDMock.mockImplementation(() => selectId)
   })

packages/ui/__tests__/Select/MultiSelectFieldFormik.test.tsx

@@ -2,7 +2,7 @@ import React, { createRef } from 'react'
 import { Formik, Form, FormikProps } from 'formik'
 import { mountAndCheckA11Y } from '@hazelcast/test-helpers'
 import { act } from 'react-dom/test-utils'
-import Select from 'react-select'
+import ReactSelect from 'react-select'
 
 import { MultiSelectFieldFormik } from '../../src/Select/MultiSelectFieldFormik'
 import { SelectFieldOption } from '../../src/Select/helpers'
@@ -38,7 +38,7 @@ describe('MultiSelectFieldFormik', () => {
     )
 
     const wrapper = await mountAndCheckA11Y(<TestForm />)
-    const selectInstance = wrapper.find(Select).instance() as Select
+    const selectInstance = wrapper.find(ReactSelect)
 
     expect(formikBag.current?.values).toEqual({
       names: [],
@@ -47,7 +47,7 @@ describe('MultiSelectFieldFormik', () => {
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.([options[1]], { action: 'select-option' })
+      selectInstance.props().onChange?.([options[1]], { action: 'select-option' })
     })
     wrapper.update()
 
@@ -58,7 +58,7 @@ describe('MultiSelectFieldFormik', () => {
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.([options[1], options[0]], { action: 'select-option' })
+      selectInstance.props().onChange?.([options[1], options[0]], { action: 'select-option' })
     })
     wrapper.update()
 
@@ -83,14 +83,14 @@ describe('MultiSelectFieldFormik', () => {
     )
 
     const wrapper = await mountAndCheckA11Y(<TestForm />)
-    const selectInstance = wrapper.find(Select).instance() as Select
+    const selectInstance = wrapper.find(ReactSelect)
 
     expect(wrapper.find(Error).prop('error')).toBe(undefined)
 
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.([options[1]], { action: 'select-option' })
+      selectInstance.props().onChange?.([options[1]], { action: 'select-option' })
     })
     wrapper.update()
 
@@ -123,7 +123,7 @@ describe('MultiSelectFieldFormik', () => {
     )
 
     const wrapper = await mountAndCheckA11Y(<TestForm />)
-    const selectInstance = wrapper.find(Select).instance() as Select
+    const selectInstance = wrapper.find(ReactSelect)
 
     expect(formikBag.current?.values).toEqual({
       names: [],
@@ -132,7 +132,7 @@ describe('MultiSelectFieldFormik', () => {
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.([options[1]], { action: 'select-option' })
+      selectInstance.props().onChange?.([options[1]], { action: 'select-option' })
     })
     wrapper.update()
 

packages/ui/__tests__/Select/SelectField.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useUID } from 'react-uid'
 import { mountAndCheckA11Y } from '@hazelcast/test-helpers'
-import ReactSelect, { OptionsType } from 'react-select'
+import ReactSelect, { Options } from 'react-select'
 import ReactSelectCreatable from 'react-select/creatable'
 
 import { SelectField } from '../../src/Select/SelectField'
@@ -21,7 +21,7 @@ const selectId = 'selectId'
 const selectName = 'selectName'
 const selectLabel = 'selectLabel'
 
-const options: OptionsType<SelectFieldOption<string>> = [
+const options: Options<SelectFieldOption<string>> = [
   { value: 'darth_vader', label: 'Darth Vader' },
   { value: 'luke_skywalker', label: 'Luke Skywalker' },
   { value: 'obi', label: 'Obi-Wan Kenobi' },

packages/ui/__tests__/Select/SelectFieldFormik.test.tsx

@@ -2,8 +2,9 @@ import React, { createRef } from 'react'
 import { Formik, Form, FormikProps } from 'formik'
 import { mountAndCheckA11Y } from '@hazelcast/test-helpers'
 import { act } from 'react-dom/test-utils'
-import Select from 'react-select'
+import ReactSelect, { SelectInstance } from 'react-select'
 
+import { SelectField } from '../../src/Select/SelectField'
 import { SelectFieldFormik } from '../../src/Select/SelectFieldFormik'
 import { SelectFieldOption } from '../../src/Select/helpers'
 import { Error } from '../../src/Error'
@@ -38,16 +39,15 @@ describe('SelectFieldFormik', () => {
     )
 
     const wrapper = await mountAndCheckA11Y(<TestForm />)
-    const selectInstance = wrapper.find(Select).instance() as Select
+    const selectInstance = wrapper.find(ReactSelect)
 
     expect(formikBag.current?.values).toEqual({
       name: null,
     })
-
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.(options[1], { action: 'select-option' })
+      selectInstance.props().onChange?.(options[1], { action: 'select-option' })
     })
     wrapper.update()
 
@@ -58,7 +58,7 @@ describe('SelectFieldFormik', () => {
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.(options[0], { action: 'select-option' })
+      selectInstance.props().onChange?.(options[0], { action: 'select-option' })
     })
     wrapper.update()
 
@@ -83,14 +83,14 @@ describe('SelectFieldFormik', () => {
     )
 
     const wrapper = await mountAndCheckA11Y(<TestForm />)
-    const selectInstance = wrapper.find(Select).instance() as Select
+    const selectInstance = wrapper.find(ReactSelect)
 
     expect(wrapper.find(Error).prop('error')).toBe(undefined)
 
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.(options[1], { action: 'select-option' })
+      selectInstance.props().onChange?.(options[1], { action: 'select-option' })
     })
     wrapper.update()
 
@@ -113,12 +113,12 @@ describe('SelectFieldFormik', () => {
     )
 
     const wrapper = await mountAndCheckA11Y(<TestForm />)
-    const selectInstance = wrapper.find(Select).instance() as Select
+    const selectInstance = wrapper.find(ReactSelect)
 
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.(options[1], { action: 'select-option' })
+      selectInstance.props().onChange?.(options[1], { action: 'select-option' })
     })
     wrapper.update()