restore getChakra calls (#4620)

* restore getChakra calls

* export getChakra util

* add chakraProps to AltDateWidget

* add chakra changelog

Author: antpaw

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

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<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
-  uiSchema,
   registry,
   ...props
 }: IconButtonProps<T, S, F>) {

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<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: WidgetProps<T, S, F>,
@@ -85,8 +86,10 @@ function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exten
     onChange(undefined);
   };
 
+  const chakraProps = getChakra({ uiSchema: props.uiSchema });
+
   return (
-    <Box>
+    <FieldsetRoot {...(chakraProps as any)}>
       <Box display='flex' flexWrap='wrap' alignItems='center'>
         {getDateElementProps(
           state,
@@ -127,7 +130,7 @@ function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exten
           </Button>
         )}
       </Box>
-    </Box>
+    </FieldsetRoot>
   );
 }
 

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<T, S, F>(schema, type, options);
 
@@ -44,6 +46,8 @@ export default function BaseInputTemplate<
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
   const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
 
+  const chakraProps = getChakra({ uiSchema });
+
   return (
     <Field
       mb={1}
@@ -52,6 +56,7 @@ export default function BaseInputTemplate<
       readOnly={readonly}
       invalid={rawErrors && rawErrors.length > 0}
       label={labelValue(label, hideLabel || !label)}
+      {...chakraProps}
     >
       <Input
         id={id}

packages/chakra-ui/src/CheckboxWidget/CheckboxWidget.tsx

@@ -14,6 +14,7 @@ import {
 
 import { Field } from '../components/ui/field';
 import { Checkbox } from '../components/ui/checkbox';
+import { getChakra } from '../utils';
 
 export default function CheckboxWidget<
   T = any,
@@ -50,8 +51,10 @@ export default function CheckboxWidget<
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement | any>) => onBlur(id, target && target.value);
   const _onFocus = ({ target }: FocusEvent<HTMLInputElement | any>) => onFocus(id, target && target.value);
 
+  const chakraProps = getChakra({ uiSchema });
+
   return (
-    <Field mb={1} required={required}>
+    <Field mb={1} required={required} {...chakraProps}>
       {!hideLabel && description && (
         <DescriptionFieldTemplate
           id={descriptionId<T>(id)}

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<S>(value, enumOptions, true) as string[];
 
+  const chakraProps = getChakra({ uiSchema });
+
   return (
-    <FieldsetRoot mb={1} disabled={disabled || readonly} invalid={rawErrors && rawErrors.length > 0}>
+    <FieldsetRoot
+      mb={1}
+      disabled={disabled || readonly}
+      invalid={rawErrors && rawErrors.length > 0}
+      {...(chakraProps as any)}
+    >
       <CheckboxGroup
         onValueChange={(option) => onChange(enumOptionsValueForIndex<S>(option, enumOptions, emptyValue))}
         value={selectedIndexes}

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<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   id,
@@ -27,6 +28,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   onChange,
   onBlur,
   onFocus,
+  uiSchema,
 }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, emptyValue } = options;
 
@@ -40,13 +42,16 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   const row = options ? options.inline : false;
   const selectedIndex = (enumOptionsIndexForValue<S>(value, enumOptions) as string) ?? null;
 
+  const chakraProps = getChakra({ uiSchema });
+
   return (
     <Field
       mb={1}
       disabled={disabled || readonly}
       required={required}
       readOnly={readonly}
       label={labelValue(label, hideLabel || !label)}
+      {...chakraProps}
     >
       <RadioGroup
         onChange={_onChange}

packages/chakra-ui/src/RangeWidget/RangeWidget.tsx

@@ -12,6 +12,7 @@ import {
 
 import { Field } from '../components/ui/field';
 import { Slider } from '../components/ui/slider';
+import { getChakra } from '../utils';
 
 export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   value,
@@ -25,14 +26,17 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   label,
   hideLabel,
   id,
+  uiSchema,
 }: WidgetProps<T, S, F>) {
   const _onChange = ({ value }: SliderValueChangeDetails) =>
     onChange(value === undefined ? options.emptyValue : value[0]);
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
   const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
 
+  const chakraProps = getChakra({ uiSchema });
+
   return (
-    <Field mb={1} label={labelValue(label, hideLabel || !label)}>
+    <Field mb={1} label={labelValue(label, hideLabel || !label)} {...chakraProps}>
       <Slider
         {...rangeSpec<S>(schema)}
         id={id}

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 (
     <Field
       mb={1}
@@ -110,6 +114,7 @@ export default function NativeSelectWidget<
       readOnly={readonly}
       invalid={rawErrors && rawErrors.length > 0}
       label={labelValue(label, hideLabel || !label)}
+      {...chakraProps}
     >
       <ChakraSelect.Root>
         <ChakraSelect.Field

packages/chakra-ui/src/SelectWidget/SelectWidget.tsx

@@ -16,6 +16,7 @@ import { createListCollection, SelectValueChangeDetails, Select as ChakraSelect
 
 import { Field } from '../components/ui/field';
 import { SelectRoot, SelectTrigger, SelectValueText } from '../components/ui/select';
+import { getChakra } from '../utils';
 
 export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: WidgetProps<T, S, F>,
@@ -37,6 +38,7 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
     onFocus,
     rawErrors = [],
     schema,
+    uiSchema,
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
 
@@ -114,6 +116,7 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
   });
 
   const containerRef = useRef(null);
+  const chakraProps = getChakra({ uiSchema });
 
   return (
     <Field
@@ -125,6 +128,7 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
       invalid={rawErrors && rawErrors.length > 0}
       label={labelValue(label, hideLabel || !label)}
       position='relative'
+      {...chakraProps}
     >
       <SelectRoot
         collection={selectOptions}