diff --git a/CHANGELOG.md b/CHANGELOG.md index c05bac325d..60dfcfca01 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,11 @@ should change the heading of the (upcoming) version to include a major version b - Fixed form data propagation with `patternProperties` [#4617](https://github.com/rjsf-team/react-jsonschema-form/pull/4617) +## @rjsf/chakra-ui + +- Added `getChakra` to package exports +- Restored the `ui:options` customization + # 6.0.0-beta.7 ## @rjsf/core diff --git a/packages/chakra-ui/src/AddButton/AddButton.tsx b/packages/chakra-ui/src/AddButton/AddButton.tsx index 65cb199358..8d35a72401 100644 --- a/packages/chakra-ui/src/AddButton/AddButton.tsx +++ b/packages/chakra-ui/src/AddButton/AddButton.tsx @@ -3,7 +3,6 @@ import { Button } from '@chakra-ui/react'; import { PlusIcon } from 'lucide-react'; export default function AddButton({ - uiSchema, registry, ...props }: IconButtonProps) { diff --git a/packages/chakra-ui/src/AltDateWidget/AltDateWidget.tsx b/packages/chakra-ui/src/AltDateWidget/AltDateWidget.tsx index f8a0f6ef10..814d6dc193 100644 --- a/packages/chakra-ui/src/AltDateWidget/AltDateWidget.tsx +++ b/packages/chakra-ui/src/AltDateWidget/AltDateWidget.tsx @@ -1,9 +1,9 @@ -import { MouseEvent, useEffect, useState } from 'react'; +import { Box, Button, FieldsetRoot } from '@chakra-ui/react'; import { ariaDescribedByIds, - dateRangeOptions, DateElementFormat, DateObject, + dateRangeOptions, FormContextType, getDateElementProps, parseDateString, @@ -13,7 +13,8 @@ import { TranslatableString, WidgetProps, } from '@rjsf/utils'; -import { Box, Button } from '@chakra-ui/react'; +import { MouseEvent, useEffect, useState } from 'react'; +import { getChakra } from '../utils'; function DateElement( props: WidgetProps, @@ -85,8 +86,10 @@ function AltDateWidget + {getDateElementProps( state, @@ -127,7 +130,7 @@ function AltDateWidget )} - + ); } diff --git a/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx index a9f08aa147..4a43722b79 100644 --- a/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx +++ b/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx @@ -12,6 +12,7 @@ import { } from '@rjsf/utils'; import { Field } from '../components/ui/field'; +import { getChakra } from '../utils'; export default function BaseInputTemplate< T = any, @@ -36,6 +37,7 @@ export default function BaseInputTemplate< autofocus, placeholder, disabled, + uiSchema, } = props; const inputProps = getInputProps(schema, type, options); @@ -44,6 +46,8 @@ export default function BaseInputTemplate< const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); const _onFocus = ({ target }: FocusEvent) => onFocus(id, target && target.value); + const chakraProps = getChakra({ uiSchema }); + return ( 0} label={labelValue(label, hideLabel || !label)} + {...chakraProps} > ) => onBlur(id, target && target.value); const _onFocus = ({ target }: FocusEvent) => onFocus(id, target && target.value); + const chakraProps = getChakra({ uiSchema }); + return ( - + {!hideLabel && description && ( (id)} diff --git a/packages/chakra-ui/src/CheckboxesWidget/CheckboxesWidget.tsx b/packages/chakra-ui/src/CheckboxesWidget/CheckboxesWidget.tsx index 488cd6833f..7837083dff 100644 --- a/packages/chakra-ui/src/CheckboxesWidget/CheckboxesWidget.tsx +++ b/packages/chakra-ui/src/CheckboxesWidget/CheckboxesWidget.tsx @@ -13,6 +13,7 @@ import { import { FocusEvent } from 'react'; import { Checkbox } from '../components/ui/checkbox'; +import { getChakra } from '../utils'; export default function CheckboxesWidget< T = any, @@ -32,6 +33,7 @@ export default function CheckboxesWidget< label, hideLabel, rawErrors = [], + uiSchema, } = props; const { enumOptions, enumDisabled, emptyValue } = options; @@ -43,8 +45,15 @@ export default function CheckboxesWidget< const row = options ? options.inline : false; const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, true) as string[]; + const chakraProps = getChakra({ uiSchema }); + return ( - 0}> + 0} + {...(chakraProps as any)} + > onChange(enumOptionsValueForIndex(option, enumOptions, emptyValue))} value={selectedIndexes} diff --git a/packages/chakra-ui/src/RadioWidget/RadioWidget.tsx b/packages/chakra-ui/src/RadioWidget/RadioWidget.tsx index 82c1dd6913..1eef6dc24c 100644 --- a/packages/chakra-ui/src/RadioWidget/RadioWidget.tsx +++ b/packages/chakra-ui/src/RadioWidget/RadioWidget.tsx @@ -14,6 +14,7 @@ import { import { Field } from '../components/ui/field'; import { Radio, RadioGroup } from '../components/ui/radio'; +import { getChakra } from '../utils'; export default function RadioWidget({ id, @@ -27,6 +28,7 @@ export default function RadioWidget) { const { enumOptions, enumDisabled, emptyValue } = options; @@ -40,6 +42,8 @@ export default function RadioWidget(value, enumOptions) as string) ?? null; + const chakraProps = getChakra({ uiSchema }); + return ( ({ value, @@ -25,14 +26,17 @@ export default function RangeWidget) { const _onChange = ({ value }: SliderValueChangeDetails) => onChange(value === undefined ? options.emptyValue : value[0]); const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); const _onFocus = ({ target }: FocusEvent) => onFocus(id, target && target.value); + const chakraProps = getChakra({ uiSchema }); + return ( - + (schema)} id={id} diff --git a/packages/chakra-ui/src/SelectNativeWidget/NativeSelectWidget.tsx b/packages/chakra-ui/src/SelectNativeWidget/NativeSelectWidget.tsx index be77d1c373..23d37b940e 100644 --- a/packages/chakra-ui/src/SelectNativeWidget/NativeSelectWidget.tsx +++ b/packages/chakra-ui/src/SelectNativeWidget/NativeSelectWidget.tsx @@ -14,6 +14,7 @@ import { OptionsOrGroups } from 'chakra-react-select'; import { createListCollection, NativeSelect as ChakraSelect } from '@chakra-ui/react'; import { Field } from '../components/ui/field'; +import { getChakra } from '../utils'; /** * NativeSelectWidget is a React component that renders a native select input. @@ -47,6 +48,7 @@ export default function NativeSelectWidget< onFocus, rawErrors = [], schema, + uiSchema, } = props; const { enumOptions, enumDisabled, emptyValue } = options; @@ -102,6 +104,8 @@ export default function NativeSelectWidget< items: displayEnumOptions.filter((item) => item.value), }); + const chakraProps = getChakra({ uiSchema }); + return ( 0} label={labelValue(label, hideLabel || !label)} + {...chakraProps} > ( props: WidgetProps, @@ -37,6 +38,7 @@ export default function SelectWidget 0} label={labelValue(label, hideLabel || !label)} position='relative' + {...chakraProps} > ) { const _onChange = ({ target: { value } }: ChangeEvent) => onChange(value === '' ? options.emptyValue : value); const _onBlur = ({ target }: FocusEvent) => onBlur(id, target && target.value); const _onFocus = ({ target }: FocusEvent) => onFocus(id, target && target.value); + const chakraProps = getChakra({ uiSchema }); + return ( 0} label={labelValue(label, hideLabel || !label)} + {...chakraProps} >