diff --git a/package-lock.json b/package-lock.json index 8adda6aa..4590bc21 100644 --- a/package-lock.json +++ b/package-lock.json @@ -82,6 +82,7 @@ "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-select-event": "^5.5.1", "sass": "^1.75.0", "sass-loader": "^14.2.0", "storybook": "^8.3.5", @@ -18110,6 +18111,15 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-select-event": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/react-select-event/-/react-select-event-5.5.1.tgz", + "integrity": "sha512-goAx28y0+iYrbqZA2FeRTreHHs/ZtSuKxtA+J5jpKT5RHPCbVZJ4MqACfPnWyFXsEec+3dP5bCrNTxIX8oYe9A==", + "dev": true, + "dependencies": { + "@testing-library/dom": ">=7" + } + }, "node_modules/react-signature-canvas": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/react-signature-canvas/-/react-signature-canvas-1.0.6.tgz", @@ -34619,6 +34629,15 @@ "use-isomorphic-layout-effect": "^1.1.2" } }, + "react-select-event": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/react-select-event/-/react-select-event-5.5.1.tgz", + "integrity": "sha512-goAx28y0+iYrbqZA2FeRTreHHs/ZtSuKxtA+J5jpKT5RHPCbVZJ4MqACfPnWyFXsEec+3dP5bCrNTxIX8oYe9A==", + "dev": true, + "requires": { + "@testing-library/dom": ">=7" + } + }, "react-signature-canvas": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/react-signature-canvas/-/react-signature-canvas-1.0.6.tgz", diff --git a/package.json b/package.json index 49d8b84e..54b52eb5 100644 --- a/package.json +++ b/package.json @@ -106,6 +106,7 @@ "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-select-event": "^5.5.1", "sass": "^1.75.0", "sass-loader": "^14.2.0", "storybook": "^8.3.5", diff --git a/src/components/formio/select.tsx b/src/components/formio/select.tsx index bf652d01..06d732c9 100644 --- a/src/components/formio/select.tsx +++ b/src/components/formio/select.tsx @@ -1,5 +1,6 @@ import {useField} from 'formik'; import React from 'react'; +import {ReactNode} from 'react'; import ReactSelect from 'react-select'; import type { GroupBase, @@ -35,6 +36,12 @@ export interface SelectProps< onChange?: (event: {target: {name: string; value: ValueType}}) => void; } +export interface Option { + value: string; + label: ReactNode; + description?: string; +} + function isOption = GroupBase