@rjsf/chakra-ui 5.11.2 → 5.12.0

package/src/Widgets/Widgets.ts

@@ -0,0 +1,30 @@
+import AltDateTimeWidget from '../AltDateTimeWidget/AltDateTimeWidget';
+import AltDateWidget from '../AltDateWidget/AltDateWidget';
+import CheckboxWidget from '../CheckboxWidget/CheckboxWidget';
+import CheckboxesWidget from '../CheckboxesWidget/CheckboxesWidget';
+import RadioWidget from '../RadioWidget/RadioWidget';
+import RangeWidget from '../RangeWidget/RangeWidget';
+import SelectWidget from '../SelectWidget/SelectWidget';
+import TextareaWidget from '../TextareaWidget/TextareaWidget';
+import UpDownWidget from '../UpDownWidget/UpDownWidget';
+import { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+export function generateWidgets<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): RegistryWidgetsType<T, S, F> {
+  return {
+    AltDateTimeWidget,
+    AltDateWidget,
+    CheckboxWidget,
+    CheckboxesWidget,
+    RadioWidget,
+    RangeWidget,
+    SelectWidget,
+    TextareaWidget,
+    UpDownWidget,
+  };
+}
+
+export default generateWidgets();

package/src/Widgets/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Widgets';
+export * from './Widgets';

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -0,0 +1,76 @@
+import { FocusEvent } from 'react';
+import {
+  ADDITIONAL_PROPERTY_FLAG,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+  WrapIfAdditionalTemplateProps,
+} from '@rjsf/utils';
+import { FormControl, FormLabel, Grid, GridItem, Input } from '@chakra-ui/react';
+
+export default function WrapIfAdditionalTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WrapIfAdditionalTemplateProps<T, S, F>) {
+  const {
+    children,
+    classNames,
+    style,
+    disabled,
+    id,
+    label,
+    onDropPropertyClick,
+    onKeyChange,
+    readonly,
+    registry,
+    required,
+    schema,
+    uiSchema,
+  } = props;
+  const { templates, translateString } = registry;
+  // Button templates are not overridden in the uiSchema
+  const { RemoveButton } = templates.ButtonTemplates;
+  const keyLabel = translateString(TranslatableString.KeyLabel, [label]);
+  const additional = ADDITIONAL_PROPERTY_FLAG in schema;
+  if (!additional) {
+    return (
+      <div className={classNames} style={style}>
+        {children}
+      </div>
+    );
+  }
+
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onKeyChange(target.value);
+
+  return (
+    <Grid key={`${id}-key`} className={classNames} style={style} alignItems='center' gap={2}>
+      <GridItem>
+        <FormControl isRequired={required}>
+          <FormLabel htmlFor={`${id}-key`} id={`${id}-key-label`}>
+            {keyLabel}
+          </FormLabel>
+          <Input
+            defaultValue={label}
+            disabled={disabled || readonly}
+            id={`${id}-key`}
+            name={`${id}-key`}
+            onBlur={!readonly ? handleBlur : undefined}
+            type='text'
+            mb={1}
+          />
+        </FormControl>
+      </GridItem>
+      <GridItem>{children}</GridItem>
+      <GridItem>
+        <RemoveButton
+          disabled={disabled || readonly}
+          onClick={onDropPropertyClick(label)}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      </GridItem>
+    </Grid>
+  );
+}

package/src/WrapIfAdditionalTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './WrapIfAdditionalTemplate';
+export * from './WrapIfAdditionalTemplate';

package/src/index.ts

@@ -0,0 +1,11 @@
+import Form from './Form';
+
+export { default as Form, generateForm } from './Form';
+export { default as Templates, generateTemplates } from './Templates';
+export { default as Theme, generateTheme } from './Theme';
+export { default as Widgets, generateWidgets } from './Widgets';
+export { __createChakraFrameProvider } from './ChakraFrameProvider';
+
+export type { ChakraUiSchema as UiSchema } from './utils';
+
+export default Form;

package/src/utils.ts

@@ -0,0 +1,31 @@
+import { ChakraProps, shouldForwardProp } from '@chakra-ui/react';
+import { UiSchema } from '@rjsf/utils';
+
+export interface ChakraUiSchema extends Omit<UiSchema, 'ui:options'> {
+  'ui:options'?: ChakraUiOptions;
+}
+
+type ChakraUiOptions = UiSchema['ui:options'] & { chakra?: ChakraProps };
+
+interface GetChakraProps {
+  uiSchema?: ChakraUiSchema;
+}
+
+export function getChakra({ uiSchema = {} }: GetChakraProps): ChakraProps {
+  const chakraProps = (uiSchema['ui:options'] && uiSchema['ui:options'].chakra) || {};
+
+  Object.keys(chakraProps).forEach((key) => {
+    /**
+     * Leveraging `shouldForwardProp` to remove props
+     *
+     * This is a utility function that's used in `@chakra-ui/react`'s factory function.
+     * Normally, it prevents ChakraProps from being passed to the DOM.
+     * In this case we just want to delete the unknown props. So we flip the boolean.
+     */
+    if (shouldForwardProp(key)) {
+      delete (chakraProps as any)[key];
+    }
+  });
+
+  return chakraProps;
+}