diff --git a/integrations/gatsby-theme-stories/package.json b/integrations/gatsby-theme-stories/package.json index 82c871706..bd4d302c8 100644 --- a/integrations/gatsby-theme-stories/package.json +++ b/integrations/gatsby-theme-stories/package.json @@ -52,6 +52,7 @@ "theme-ui": "^0.3.1", "@theme-ui/sidenav": "^0.3.1", "react": "^16.13.1", + "react-dom": "^16.13.1", "react-helmet": "^6.0.0" }, "devDependencies": { @@ -59,7 +60,8 @@ }, "peerDependencies": { "gatsby": "^2.22.10", - "react": "^16.13.1" + "react": "^16.13.1", + "react-dom": "^16.13.1" }, "publishConfig": { "access": "public" diff --git a/ui/editors/package.json b/ui/editors/package.json index dda303280..9b75a8ae3 100644 --- a/ui/editors/package.json +++ b/ui/editors/package.json @@ -40,13 +40,11 @@ "react": "^16.13.1", "react-color": "^2.17.0", "react-dom": "^16.13.1", - "react-select": "^3.0.8", "theme-ui": "^0.3.1" }, "devDependencies": { "@types/jest": "^25.1.2", "@types/react-color": "^3.0.1", - "@types/react-select": "^3.0.10", "@types/theme-ui": "^0.3.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", diff --git a/ui/editors/src/OptionsEditor/OptionsEditor.tsx b/ui/editors/src/OptionsEditor/OptionsEditor.tsx index cb015f906..7fcc78bab 100644 --- a/ui/editors/src/OptionsEditor/OptionsEditor.tsx +++ b/ui/editors/src/OptionsEditor/OptionsEditor.tsx @@ -1,24 +1,31 @@ -/** @jsx jsx */ -import { jsx } from 'theme-ui'; +import React, { ChangeEvent } from 'react'; +import { Select } from 'theme-ui'; +import styled from '@emotion/styled'; import { ComponentControlOptions, ControlTypes, } from '@component-controls/specification'; +import { normalizeOptions } from './utils'; import { PropertyEditor } from '../types'; import { useControlContext } from '../context'; import { RadiosEditor } from './RadiosEditor'; import { CheckboxEditor } from './CheckboxEditor'; import { addPropertyEditor } from '../prop-factory'; +const OptionsSelect = styled(Select)({ + color: 'black', + flexBasis: '100%', +}); + /** * Options control editor. */ export const OptionsEditor: PropertyEditor = ({ name, ...rest }) => { - const { control } = useControlContext({ + const { control, onChange } = useControlContext({ name, }); - const { display } = control; + const { display, options, value } = control; if (display === 'check' || display === 'inline-check') { return ; @@ -33,13 +40,20 @@ export const OptionsEditor: PropertyEditor = ({ name, ...rest }) => { display === 'select' || display === 'multi-select' ) { + const { entries, selected } = normalizeOptions(options, value); + const handleChange = (e: ChangeEvent) => + onChange(name, [e.target.value]); + + const selectValue = entries.filter(op => selected.includes(op.value)); + const v: string = selectValue.length ? selectValue[0].value : ''; return ( -