diff --git a/spiffworkflow-frontend/package-lock.json b/spiffworkflow-frontend/package-lock.json index 4d7637b2..70463c7a 100644 --- a/spiffworkflow-frontend/package-lock.json +++ b/spiffworkflow-frontend/package-lock.json @@ -19,10 +19,10 @@ "@monaco-editor/react": "^4.4.5", "@mui/material": "^5.10.14", "@react-icons/all-files": "^4.1.0", - "@rjsf/core": "*", - "@rjsf/mui": "^5.0.0-beta.13", - "@rjsf/utils": "^5.0.0-beta.13", - "@rjsf/validator-ajv8": "^5.0.0-beta.16", + "@rjsf/core": "5.0.0-beta.20", + "@rjsf/mui": "5.0.0-beta.20", + "@rjsf/utils": "5.0.0-beta.20", + "@rjsf/validator-ajv8": "5.0.0-beta.20", "@tanstack/react-table": "^8.2.2", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", @@ -5019,13 +5019,12 @@ } }, "node_modules/@rjsf/core": { - "version": "5.6.0", - "resolved": "https://registry.npmjs.org/@rjsf/core/-/core-5.6.0.tgz", - "integrity": "sha512-F61pIBgTrLzvGZvM16aGUUvro5QIDtI5pDdy24cfs5d9w1C/2Vc6Du6QMkml4d6B232IfQtYNHVo4Sg/8U3IYg==", + "version": "5.0.0-beta.20", + "resolved": "https://registry.npmjs.org/@rjsf/core/-/core-5.0.0-beta.20.tgz", + "integrity": "sha512-dPm7Wbm5ZT9y5frr0vtcr0MvpitbO6ApITmavIGN2tIdQveVVzavSJ4kZR7T17R6aw71TMtD3UOobwIh8IslLQ==", "dependencies": { "lodash": "^4.17.15", "lodash-es": "^4.17.15", - "markdown-to-jsx": "^7.2.0", "nanoid": "^3.3.4", "prop-types": "^15.7.2" }, @@ -5033,14 +5032,14 @@ "node": ">=14" }, "peerDependencies": { - "@rjsf/utils": "^5.0.0", + "@rjsf/utils": "^5.0.0-beta.1", "react": "^16.14.0 || >=17" } }, "node_modules/@rjsf/mui": { - "version": "5.6.0", - "resolved": "https://registry.npmjs.org/@rjsf/mui/-/mui-5.6.0.tgz", - "integrity": "sha512-hEt7BL9mBYpZtGRmMEQ640KjxWy6AlgblB1P5d7YnhtX6P3c0shDgcrSDmGxIb04AaD2CJd9YOl7luaWFtVb8g==", + "version": "5.0.0-beta.20", + "resolved": "https://registry.npmjs.org/@rjsf/mui/-/mui-5.0.0-beta.20.tgz", + "integrity": "sha512-DEZakIemrOSS4wQGTrvYVgwWXUCWaV4MQdPUC0rp7YQUKrB88V7Ys7rV2BLn5Iq/wcMyu35o+zwDAQv6YaEAEw==", "engines": { "node": ">=14" }, @@ -5049,15 +5048,15 @@ "@emotion/styled": "^11.6.0", "@mui/icons-material": "^5.2.0", "@mui/material": "^5.2.2", - "@rjsf/core": "^5.0.0", - "@rjsf/utils": "^5.0.0", + "@rjsf/core": "^5.0.0-beta.1", + "@rjsf/utils": "^5.0.0-beta.1", "react": ">=17" } }, "node_modules/@rjsf/utils": { - "version": "5.6.0", - "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.6.0.tgz", - "integrity": "sha512-R7PkIu6Ea+DlPlUrWM0LSJ8aFxz/gAUs4yACgTwg03f55vD1efTmYg6McscY5AuFLYCp841fjGJlnRLac0kVcQ==", + "version": "5.0.0-beta.20", + "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.0.0-beta.20.tgz", + "integrity": "sha512-ToYHJj6s9TrcHULmx1nDEVOk+TxmpylsFBUnVV8Wm2e5SFqs4TQ5cJLD84h1BP8Cv5OeEdarq7Q6uhiNjs0Qxg==", "dependencies": { "json-schema-merge-allof": "^0.8.1", "jsonpointer": "^5.0.1", @@ -5073,11 +5072,11 @@ } }, "node_modules/@rjsf/validator-ajv8": { - "version": "5.6.0", - "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.6.0.tgz", - "integrity": "sha512-QVBE7khOAW67BPk+1KG4agF/P1lQ00oGjqGZU9lkObDAMaVxRo20585+a81AWdz+TJh0tBtBMrhTZuIh14fjMw==", + "version": "5.0.0-beta.20", + "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.0.0-beta.20.tgz", + "integrity": "sha512-QzNX76ec7EoyazMZ/yJRo+DbSWKVLJghZxVOBYU8vm0jL7sK/lqROjeQUJuD2TVyT5zJC7QimFAIKSEKZQz/vg==", "dependencies": { - "ajv": "^8.12.0", + "ajv": "^8.11.0", "ajv-formats": "^2.1.1", "lodash": "^4.17.15", "lodash-es": "^4.17.15" @@ -5086,7 +5085,7 @@ "node": ">=14" }, "peerDependencies": { - "@rjsf/utils": "^5.0.0" + "@rjsf/utils": "^5.0.0-beta.16" } }, "node_modules/@rollup/plugin-babel": { @@ -21043,17 +21042,6 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/markdown-to-jsx": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.2.0.tgz", - "integrity": "sha512-3l4/Bigjm4bEqjCR6Xr+d4DtM1X6vvtGsMGSjJYyep8RjjIvcWtrXBS8Wbfe1/P+atKNMccpsraESIaWVplzVg==", - "engines": { - "node": ">= 10" - }, - "peerDependencies": { - "react": ">= 0.14.0" - } - }, "node_modules/matcher": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz", @@ -35661,27 +35649,26 @@ } }, "@rjsf/core": { - "version": "5.6.0", - "resolved": "https://registry.npmjs.org/@rjsf/core/-/core-5.6.0.tgz", - "integrity": "sha512-F61pIBgTrLzvGZvM16aGUUvro5QIDtI5pDdy24cfs5d9w1C/2Vc6Du6QMkml4d6B232IfQtYNHVo4Sg/8U3IYg==", + "version": "5.0.0-beta.20", + "resolved": "https://registry.npmjs.org/@rjsf/core/-/core-5.0.0-beta.20.tgz", + "integrity": "sha512-dPm7Wbm5ZT9y5frr0vtcr0MvpitbO6ApITmavIGN2tIdQveVVzavSJ4kZR7T17R6aw71TMtD3UOobwIh8IslLQ==", "requires": { "lodash": "^4.17.15", "lodash-es": "^4.17.15", - "markdown-to-jsx": "^7.2.0", "nanoid": "^3.3.4", "prop-types": "^15.7.2" } }, "@rjsf/mui": { - "version": "5.6.0", - "resolved": "https://registry.npmjs.org/@rjsf/mui/-/mui-5.6.0.tgz", - "integrity": "sha512-hEt7BL9mBYpZtGRmMEQ640KjxWy6AlgblB1P5d7YnhtX6P3c0shDgcrSDmGxIb04AaD2CJd9YOl7luaWFtVb8g==", + "version": "5.0.0-beta.20", + "resolved": "https://registry.npmjs.org/@rjsf/mui/-/mui-5.0.0-beta.20.tgz", + "integrity": "sha512-DEZakIemrOSS4wQGTrvYVgwWXUCWaV4MQdPUC0rp7YQUKrB88V7Ys7rV2BLn5Iq/wcMyu35o+zwDAQv6YaEAEw==", "requires": {} }, "@rjsf/utils": { - "version": "5.6.0", - "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.6.0.tgz", - "integrity": "sha512-R7PkIu6Ea+DlPlUrWM0LSJ8aFxz/gAUs4yACgTwg03f55vD1efTmYg6McscY5AuFLYCp841fjGJlnRLac0kVcQ==", + "version": "5.0.0-beta.20", + "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.0.0-beta.20.tgz", + "integrity": "sha512-ToYHJj6s9TrcHULmx1nDEVOk+TxmpylsFBUnVV8Wm2e5SFqs4TQ5cJLD84h1BP8Cv5OeEdarq7Q6uhiNjs0Qxg==", "requires": { "json-schema-merge-allof": "^0.8.1", "jsonpointer": "^5.0.1", @@ -35691,11 +35678,11 @@ } }, "@rjsf/validator-ajv8": { - "version": "5.6.0", - "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.6.0.tgz", - "integrity": "sha512-QVBE7khOAW67BPk+1KG4agF/P1lQ00oGjqGZU9lkObDAMaVxRo20585+a81AWdz+TJh0tBtBMrhTZuIh14fjMw==", + "version": "5.0.0-beta.20", + "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.0.0-beta.20.tgz", + "integrity": "sha512-QzNX76ec7EoyazMZ/yJRo+DbSWKVLJghZxVOBYU8vm0jL7sK/lqROjeQUJuD2TVyT5zJC7QimFAIKSEKZQz/vg==", "requires": { - "ajv": "^8.12.0", + "ajv": "^8.11.0", "ajv-formats": "^2.1.1", "lodash": "^4.17.15", "lodash-es": "^4.17.15" @@ -47910,12 +47897,6 @@ "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz", "integrity": "sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==" }, - "markdown-to-jsx": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.2.0.tgz", - "integrity": "sha512-3l4/Bigjm4bEqjCR6Xr+d4DtM1X6vvtGsMGSjJYyep8RjjIvcWtrXBS8Wbfe1/P+atKNMccpsraESIaWVplzVg==", - "requires": {} - }, "matcher": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz", diff --git a/spiffworkflow-frontend/package.json b/spiffworkflow-frontend/package.json index e2d7099c..11193434 100644 --- a/spiffworkflow-frontend/package.json +++ b/spiffworkflow-frontend/package.json @@ -14,10 +14,10 @@ "@monaco-editor/react": "^4.4.5", "@mui/material": "^5.10.14", "@react-icons/all-files": "^4.1.0", - "@rjsf/core": "*", - "@rjsf/mui": "^5.0.0-beta.13", - "@rjsf/utils": "^5.0.0-beta.13", - "@rjsf/validator-ajv8": "^5.0.0-beta.16", + "@rjsf/core": "5.0.0-beta.20", + "@rjsf/mui": "5.0.0-beta.20", + "@rjsf/utils": "5.0.0-beta.20", + "@rjsf/validator-ajv8": "5.0.0-beta.20", "@tanstack/react-table": "^8.2.2", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", diff --git a/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx b/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx index 7dae5155..19d93bd7 100644 --- a/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx +++ b/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx @@ -54,13 +54,6 @@ export default function BaseInputTemplate< ...getInputProps(schema, type, options), }; - let inputValue; - if (inputProps.type === 'number' || inputProps.type === 'integer') { - inputValue = value || value === 0 ? value : ''; - } else { - inputValue = value == null ? '' : value; - } - const _onChange = useCallback( ({ target: { value } }: React.ChangeEvent) => onChange(value === '' ? options.emptyValue : value), diff --git a/spiffworkflow-frontend/src/themes/carbon/SelectWidget/SelectWidget.tsx b/spiffworkflow-frontend/src/themes/carbon/SelectWidget/SelectWidget.tsx index 2fc4f881..7e644055 100644 --- a/spiffworkflow-frontend/src/themes/carbon/SelectWidget/SelectWidget.tsx +++ b/spiffworkflow-frontend/src/themes/carbon/SelectWidget/SelectWidget.tsx @@ -1,92 +1,58 @@ -// @ts-ignore import { Select, SelectItem } from '@carbon/react'; -import { ChangeEvent, FocusEvent, SyntheticEvent, useCallback } from 'react'; -import { - enumOptionsValueForIndex, - FormContextType, - RJSFSchema, - StrictRJSFSchema, - WidgetProps, -} from '@rjsf/utils'; +import { WidgetProps, processSelectValue } from '@rjsf/utils'; -function getValue(event: SyntheticEvent, multiple: boolean) { - if (multiple) { - return Array.from((event.target as HTMLSelectElement).options) - .slice() - .filter((o) => o.selected) - .map((o) => o.value); - } - return (event.target as HTMLSelectElement).value; -} - -/** The `SelectWidget` is a widget for rendering dropdowns. - * It is typically used with string properties constrained with enum options. - * - * @param props - The `WidgetProps` for this component - */ -function SelectWidget< - T = any, - S extends StrictRJSFSchema = RJSFSchema, - F extends FormContextType = any ->({ +function SelectWidget({ schema, - uiSchema, id, options, - value, + label, + required, disabled, readonly, - multiple = false, - autofocus = false, + value, + multiple, + autofocus, onChange, onBlur, onFocus, + uiSchema, + placeholder, rawErrors = [], -}: WidgetProps) { - const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options; +}: WidgetProps) { + const { enumOptions, enumDisabled } = options; + const emptyValue = multiple ? [] : ''; - const handleFocus = useCallback( - (event: FocusEvent) => { - const newValue = getValue(event, multiple); - return onFocus( - id, - enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal) - ); - }, - [onFocus, id, schema, multiple, options] - ); - - const handleBlur = useCallback( - (event: FocusEvent) => { - const newValue = getValue(event, multiple); - return onBlur( - id, - enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal) - ); - }, - [onBlur, id, schema, multiple, options] - ); - - const handleChange = useCallback( - (event: ChangeEvent) => { - const newValue = getValue(event, multiple); - return onChange( - enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal) - ); - }, - [onChange, schema, multiple, options] - ); + const _onChange = ({ + target: { value }, + }: React.ChangeEvent<{ name?: string; value: unknown }>) => + onChange(processSelectValue(schema, value, options)); + const _onBlur = ({ target: { value } }: React.FocusEvent) => + onBlur(id, processSelectValue(schema, value, options)); + const _onFocus = ({ + target: { value }, + }: React.FocusEvent) => + onFocus(id, processSelectValue(schema, value, options)); + let labelToUse = label; + if (uiSchema && uiSchema['ui:title']) { + labelToUse = uiSchema['ui:title']; + } else if (schema && schema.title) { + labelToUse = schema.title; + } let helperText = null; if (uiSchema && uiSchema['ui:help']) { helperText = uiSchema['ui:help']; } + if (required) { + labelToUse = `${labelToUse}*`; + } let invalid = false; let errorMessageForField = null; if (rawErrors && rawErrors.length > 0) { invalid = true; + // errorMessageForField = `${labelToUse.replace(/\*$/, '')} ${rawErrors[0]}`; errorMessageForField = rawErrors[0]; } @@ -104,9 +70,9 @@ function SelectWidget< disabled={disabled || readonly} autoFocus={autofocus} error={rawErrors.length > 0} - onChange={handleChange} - onBlur={handleBlur} - onFocus={handleFocus} + onChange={_onChange} + onBlur={_onBlur} + onFocus={_onFocus} invalid={invalid} invalidText={errorMessageForField} InputLabelProps={{