@rjsf/chakra-ui 5.11.2 → 5.12.0

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -0,0 +1,77 @@
+import { ChangeEvent, FocusEvent } from 'react';
+import { Checkbox, FormControl, Text } from '@chakra-ui/react';
+import {
+  ariaDescribedByIds,
+  descriptionId,
+  getTemplate,
+  labelValue,
+  WidgetProps,
+  schemaRequiresTrueValue,
+  StrictRJSFSchema,
+  RJSFSchema,
+  FormContextType,
+} from '@rjsf/utils';
+import { getChakra } from '../utils';
+
+export default function CheckboxWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
+  const {
+    id,
+    value,
+    disabled,
+    readonly,
+    onChange,
+    onBlur,
+    onFocus,
+    label,
+    hideLabel,
+    registry,
+    options,
+    uiSchema,
+    schema,
+  } = props;
+  const chakraProps = getChakra({ uiSchema });
+  // Because an unchecked checkbox will cause html5 validation to fail, only add
+  // the "required" attribute if the field value must be "true", due to the
+  // "const" or "enum" keywords
+  const required = schemaRequiresTrueValue<S>(schema);
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    options
+  );
+  const description = options.description || schema.description;
+
+  const _onChange = ({ target: { checked } }: ChangeEvent<HTMLInputElement>) => onChange(checked);
+  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement | any>) => onBlur(id, value);
+  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement | any>) => onFocus(id, value);
+
+  return (
+    <FormControl mb={1} {...chakraProps} isRequired={required}>
+      {!hideLabel && !!description && (
+        <DescriptionFieldTemplate
+          id={descriptionId<T>(id)}
+          description={description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      <Checkbox
+        id={id}
+        name={id}
+        isChecked={typeof value === 'undefined' ? false : value}
+        isDisabled={disabled || readonly}
+        onChange={_onChange}
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+        aria-describedby={ariaDescribedByIds<T>(id)}
+      >
+        {labelValue(<Text>{label}</Text>, hideLabel || !label)}
+      </Checkbox>
+    </FormControl>
+  );
+}

package/src/CheckboxWidget/index.ts

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

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -0,0 +1,93 @@
+import { FocusEvent } from 'react';
+import { CheckboxGroup, Checkbox, FormLabel, FormControl, Text, Stack } from '@chakra-ui/react';
+import {
+  ariaDescribedByIds,
+  enumOptionsIndexForValue,
+  enumOptionsIsSelected,
+  enumOptionsValueForIndex,
+  labelValue,
+  optionId,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+import { getChakra } from '../utils';
+
+export default function CheckboxesWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
+  const {
+    id,
+    disabled,
+    options,
+    value,
+    readonly,
+    onChange,
+    onBlur,
+    onFocus,
+    required,
+    label,
+    hideLabel,
+    uiSchema,
+    rawErrors = [],
+  } = props;
+  const { enumOptions, enumDisabled, emptyValue } = options;
+  const chakraProps = getChakra({ uiSchema });
+  const checkboxesValues = Array.isArray(value) ? value : [value];
+
+  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement | any>) =>
+    onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement | any>) =>
+    onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+
+  const row = options ? options.inline : false;
+  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, true) as string[];
+
+  return (
+    <FormControl
+      mb={1}
+      {...chakraProps}
+      isDisabled={disabled || readonly}
+      isRequired={required}
+      isReadOnly={readonly}
+      isInvalid={rawErrors && rawErrors.length > 0}
+    >
+      {labelValue(
+        <FormLabel htmlFor={id} id={`${id}-label`}>
+          {label}
+        </FormLabel>,
+        hideLabel || !label
+      )}
+      <CheckboxGroup
+        onChange={(option) => onChange(enumOptionsValueForIndex<S>(option, enumOptions, emptyValue))}
+        defaultValue={selectedIndexes}
+        aria-describedby={ariaDescribedByIds<T>(id)}
+      >
+        <Stack direction={row ? 'row' : 'column'}>
+          {Array.isArray(enumOptions) &&
+            enumOptions.map((option, index) => {
+              const checked = enumOptionsIsSelected<S>(option.value, checkboxesValues);
+              const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+              return (
+                <Checkbox
+                  key={index}
+                  id={optionId(id, index)}
+                  name={id}
+                  value={String(index)}
+                  isChecked={checked}
+                  isDisabled={disabled || itemDisabled || readonly}
+                  onBlur={_onBlur}
+                  onFocus={_onFocus}
+                >
+                  {option.label && <Text>{option.label}</Text>}
+                </Checkbox>
+              );
+            })}
+        </Stack>
+      </CheckboxGroup>
+    </FormControl>
+  );
+}

package/src/CheckboxesWidget/index.ts

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

package/src/CssReset.tsx

@@ -0,0 +1,270 @@
+import { Global } from '@emotion/react';
+
+/**
+ * 
+ * The reason we need this is for ChakraProvider styling in Playground. 
+ * The User Developer would be responsible for styling with ChakraProvider in their app.
+ * 
+ * Exact duplicate of `@chakra-ui/react`'s `CSSReset` component. Except for the following:
+ * 
+  ```css
+    input {
+      border-width: revert;
+      border-color: revert;
+      border-style: revert;
+    }
+    .array-item > hr {
+      margin-top: 16px;
+      margin-bottom: 16px;
+    }
+  ```
+
+  It is located at the bottom of the styles string.
+ */
+export const CSSReset = () => (
+  <Global
+    styles={`
+      html {
+        line-height: 1.5;
+        -webkit-text-size-adjust: 100%;
+        font-family: system-ui, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility;
+        -moz-osx-font-smoothing: grayscale;
+        touch-action: manipulation;
+      }
+      body {
+        position: relative;
+        min-height: 100%;
+        font-feature-settings: 'kern';
+      }
+      *,
+      *::before,
+      *::after {
+        border-width: 0;
+        border-style: solid;
+        box-sizing: border-box;
+      }
+      main {
+        display: block;
+      }
+      hr {
+        border-top-width: 1px;
+        box-sizing: content-box;
+        height: 0;
+        overflow: visible;
+      }
+      pre,
+      code,
+      kbd,
+      samp {
+        font-family: SFMono-Regular,  Menlo, Monaco, Consolas, monospace;
+        font-size: 1em;
+      }
+      a {
+        background-color: transparent;
+        color: inherit;
+        text-decoration: inherit;
+      }
+      abbr[title] {
+        border-bottom: none;
+        text-decoration: underline;
+        -webkit-text-decoration: underline dotted;
+        text-decoration: underline dotted;
+      }
+      b,
+      strong {
+        font-weight: bold;
+      }
+      small {
+        font-size: 80%;
+      }
+      sub,
+      sup {
+        font-size: 75%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+      }
+      sub {
+        bottom: -0.25em;
+      }
+      sup {
+        top: -0.5em;
+      }
+      img {
+        border-style: none;
+      }
+      button,
+      input,
+      optgroup,
+      select,
+      textarea {
+        font-family: inherit;
+        font-size: 100%;
+        line-height: 1.15;
+        margin: 0;
+      }
+      button,
+      input {
+        overflow: visible;
+      }
+      button,
+      select {
+        text-transform: none;
+      }
+      button::-moz-focus-inner,
+      [type="button"]::-moz-focus-inner,
+      [type="reset"]::-moz-focus-inner,
+      [type="submit"]::-moz-focus-inner {
+        border-style: none;
+        padding: 0;
+      }
+      fieldset {
+        padding: 0.35em 0.75em 0.625em;
+      }
+      legend {
+        box-sizing: border-box;
+        color: inherit;
+        display: table;
+        max-width: 100%;
+        padding: 0;
+        white-space: normal;
+      }
+      progress {
+        vertical-align: baseline;
+      }
+      textarea {
+        overflow: auto;
+      }
+      [type="checkbox"],
+      [type="radio"] {
+        box-sizing: border-box;
+        padding: 0;
+      }
+      [type="number"]::-webkit-inner-spin-button,
+      [type="number"]::-webkit-outer-spin-button {
+        -webkit-appearance: none !important;
+      }
+      input[type="number"] {
+        -moz-appearance: textfield;
+      }
+      [type="search"] {
+        -webkit-appearance: textfield;
+        outline-offset: -2px;
+      }
+      [type="search"]::-webkit-search-decoration {
+        -webkit-appearance: none !important;
+      }
+      ::-webkit-file-upload-button {
+        -webkit-appearance: button;
+        font: inherit;
+      }
+      details {
+        display: block;
+      }
+      summary {
+        display: list-item;
+      }
+      template {
+        display: none;
+      }
+      [hidden] {
+        display: none !important;
+      }
+      body,
+      blockquote,
+      dl,
+      dd,
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      hr,
+      figure,
+      p,
+      pre {
+        margin: 0;
+      }
+      button {
+        background: transparent;
+        padding: 0;
+      }
+      fieldset {
+        margin: 0;
+        padding: 0;
+      }
+      ol,
+      ul {
+        margin: 0;
+        padding: 0;
+      }
+      textarea {
+        resize: vertical;
+      }
+      button,
+      [role="button"] {
+        cursor: pointer;
+      }
+      button::-moz-focus-inner {
+        border: 0 !important;
+      }
+      table {
+        border-collapse: collapse;
+      }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-size: inherit;
+        font-weight: inherit;
+      }
+      button,
+      input,
+      optgroup,
+      select,
+      textarea {
+        padding: 0;
+        line-height: inherit;
+        color: inherit;
+      }
+      img,
+      svg,
+      video,
+      canvas,
+      audio,
+      iframe,
+      embed,
+      object {
+        display: block;
+      }
+      img,
+      video {
+        max-width: 100%;
+        height: auto;
+      }
+      [data-js-focus-visible] :focus:not([data-focus-visible-added]) {
+        outline: none;
+        box-shadow: none;
+      }
+      select::-ms-expand {
+        display: none;
+      }
+      input {
+        border-width: revert;
+        border-color: revert;
+        border-style: revert;
+      }
+      .array-item > hr {
+        margin-top: 16px;
+        margin-bottom: 16px;
+      }
+    `}
+  />
+);
+
+export default CSSReset;

package/src/DescriptionField/DescriptionField.tsx

@@ -0,0 +1,22 @@
+import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { Text } from '@chakra-ui/react';
+
+export default function DescriptionField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({ description, id }: DescriptionFieldProps<T, S, F>) {
+  if (!description) {
+    return null;
+  }
+
+  if (typeof description === 'string') {
+    return (
+      <Text id={id} mt={2} mb={4}>
+        {description}
+      </Text>
+    );
+  }
+
+  return <>{description}</>;
+}

package/src/DescriptionField/index.ts

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

package/src/ErrorList/ErrorList.tsx

@@ -0,0 +1,23 @@
+import { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import { List, ListIcon, ListItem, Alert, AlertTitle } from '@chakra-ui/react';
+import { WarningIcon } from '@chakra-ui/icons';
+
+export default function ErrorList<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  errors,
+  registry,
+}: ErrorListProps<T, S, F>) {
+  const { translateString } = registry;
+  return (
+    <Alert flexDirection='column' alignItems='flex-start' gap={3} status='error'>
+      <AlertTitle>{translateString(TranslatableString.ErrorsLabel)}</AlertTitle>
+      <List>
+        {errors.map((error, i) => (
+          <ListItem key={i}>
+            <ListIcon as={WarningIcon} color='red.500' />
+            {error.stack}
+          </ListItem>
+        ))}
+      </List>
+    </Alert>
+  );
+}

package/src/ErrorList/index.ts

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

package/src/FieldErrorTemplate/FieldErrorTemplate.tsx

@@ -0,0 +1,30 @@
+import { errorId, FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { FormErrorMessage, List, ListItem } from '@chakra-ui/react';
+
+/** The `FieldErrorTemplate` component renders the errors local to the particular field
+ *
+ * @param props - The `FieldErrorProps` for the errors being rendered
+ */
+export default function FieldErrorTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: FieldErrorProps<T, S, F>) {
+  const { errors = [], idSchema } = props;
+  if (errors.length === 0) {
+    return null;
+  }
+  const id = errorId<T>(idSchema);
+
+  return (
+    <List>
+      {errors.map((error, i: number) => {
+        return (
+          <ListItem key={i}>
+            <FormErrorMessage id={id}>{error}</FormErrorMessage>
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+}

package/src/FieldErrorTemplate/index.ts

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

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -0,0 +1,19 @@
+import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { FormHelperText } from '@chakra-ui/react';
+
+/** The `FieldHelpTemplate` component renders any help desired for a field
+ *
+ * @param props - The `FieldHelpProps` to be rendered
+ */
+export default function FieldHelpTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: FieldHelpProps<T, S, F>) {
+  const { idSchema, help } = props;
+  if (!help) {
+    return null;
+  }
+  const id = helpId<T>(idSchema);
+  return <FormHelperText id={id}>{help}</FormHelperText>;
+}

package/src/FieldHelpTemplate/index.ts

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

package/src/FieldTemplate/FieldTemplate.tsx

@@ -0,0 +1,72 @@
+import {
+  FieldTemplateProps,
+  FormContextType,
+  getTemplate,
+  getUiOptions,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+import { Text, FormControl } from '@chakra-ui/react';
+
+export default function FieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: FieldTemplateProps<T, S, F>) {
+  const {
+    id,
+    children,
+    classNames,
+    style,
+    disabled,
+    displayLabel,
+    hidden,
+    label,
+    onDropPropertyClick,
+    onKeyChange,
+    readonly,
+    registry,
+    required,
+    rawErrors = [],
+    errors,
+    help,
+    description,
+    rawDescription,
+    schema,
+    uiSchema,
+  } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate', T, S, F>(
+    'WrapIfAdditionalTemplate',
+    registry,
+    uiOptions
+  );
+
+  if (hidden) {
+    return <div style={{ display: 'none' }}>{children}</div>;
+  }
+
+  return (
+    <WrapIfAdditionalTemplate
+      classNames={classNames}
+      style={style}
+      disabled={disabled}
+      id={id}
+      label={label}
+      onDropPropertyClick={onDropPropertyClick}
+      onKeyChange={onKeyChange}
+      readonly={readonly}
+      required={required}
+      schema={schema}
+      uiSchema={uiSchema}
+      registry={registry}
+    >
+      <FormControl isRequired={required} isInvalid={rawErrors && rawErrors.length > 0}>
+        {children}
+        {displayLabel && rawDescription ? <Text mt={2}>{description}</Text> : null}
+        {errors}
+        {help}
+      </FormControl>
+    </WrapIfAdditionalTemplate>
+  );
+}

package/src/FieldTemplate/index.ts

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

package/src/Form/Form.tsx

@@ -0,0 +1,14 @@
+import { ComponentType } from 'react';
+import { withTheme, FormProps } from '@rjsf/core';
+import { generateTheme } from '../Theme';
+import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+export function generateForm<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): ComponentType<FormProps<T, S, F>> {
+  return withTheme<T, S, F>(generateTheme<T, S, F>());
+}
+
+export default generateForm();

package/src/Form/index.ts

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

package/src/IconButton/ChakraIconButton.tsx

@@ -0,0 +1,15 @@
+import { memo } from 'react';
+import { IconButton } from '@chakra-ui/react';
+type ChakraIconButtonProps = React.ComponentProps<typeof IconButton>;
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+function ChakraIconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>
+) {
+  const { icon, iconType, uiSchema, registry, ...otherProps } = props;
+  return <IconButton aria-label={props.title!} {...otherProps} icon={icon as ChakraIconButtonProps['icon']} />;
+}
+
+ChakraIconButton.displayName = 'ChakraIconButton';
+
+export default memo(ChakraIconButton) as typeof ChakraIconButton;