@rjsf/primereact 6.0.0-beta.11

package/src/AutoCompleteWidget/AutoCompleteWidget.tsx

@@ -0,0 +1,96 @@
+import { ChangeEvent, useState } from 'react';
+import {
+  ariaDescribedByIds,
+  FormContextType,
+  getInputProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+import { AutoComplete, AutoCompleteCompleteEvent } from 'primereact/autocomplete';
+
+/** The `AutoCompleteWidget` is a widget for rendering a field with options.
+ *  This is used instead of the base input template if the schema has examples.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function AutoCompleteWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: WidgetProps<T, S, F>) {
+  const {
+    id,
+    placeholder,
+    value,
+    required,
+    readonly,
+    disabled,
+    onChange,
+    onChangeOverride,
+    onBlur,
+    onFocus,
+    autofocus,
+    options,
+    schema,
+    type,
+    rawErrors = [],
+  } = props;
+  const inputProps = getInputProps<T, S, F>(schema, type, options);
+  const primeProps = (options.prime || {}) as object;
+  const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
+    onChange(value === '' ? options.emptyValue : value);
+  const _onBlur = () => onBlur && onBlur(id, value);
+  const _onFocus = () => onFocus && onFocus(id, value);
+
+  const examples = (schema.examples as string[]).concat(
+    schema.default && !(schema.examples as string[]).includes(schema.default.toString())
+      ? [schema.default.toString()]
+      : [],
+  );
+
+  const [items, setItems] = useState<string[]>([]);
+
+  const search = (event: AutoCompleteCompleteEvent) => {
+    setItems(examples.filter((example) => example.toString().toLowerCase().includes(event.query.toLowerCase())));
+  };
+
+  return (
+    <AutoComplete
+      id={id}
+      name={id}
+      placeholder={placeholder}
+      {...primeProps}
+      {...inputProps}
+      loadingIcon={<></>}
+      required={required}
+      autoFocus={autofocus}
+      disabled={disabled || readonly}
+      suggestions={items}
+      completeMethod={search}
+      value={value || value === 0 ? value : ''}
+      dropdown
+      invalid={rawErrors.length > 0}
+      onChange={(onChangeOverride as any) || _onChange}
+      onBlur={_onBlur}
+      onFocus={_onFocus}
+      aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+      /* Make autocomplete look like a dropdown, which looks much nicer */
+      pt={{
+        root: {
+          className: 'p-dropdown',
+        },
+        input: {
+          root: {
+            style: { border: 'none' },
+          },
+        },
+        dropdownButton: {
+          root: {
+            className: 'p-button-text p-button-secondary',
+          },
+        },
+      }}
+    />
+  );
+}

package/src/AutoCompleteWidget/index.ts

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

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -0,0 +1,71 @@
+import { ChangeEvent } from 'react';
+import {
+  ariaDescribedByIds,
+  BaseInputTemplateProps,
+  examplesId,
+  FormContextType,
+  getInputProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+import { InputText } from 'primereact/inputtext';
+
+/** The `BaseInputTemplate` is the template the fallback if no widget is specified.
+ */
+export default function BaseInputTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: BaseInputTemplateProps<T, S, F>) {
+  const {
+    id,
+    placeholder,
+    value,
+    required,
+    readonly,
+    disabled,
+    onChange,
+    onChangeOverride,
+    onBlur,
+    onFocus,
+    autofocus,
+    options,
+    schema,
+    type,
+    registry,
+    rawErrors = [],
+  } = props;
+
+  const { AutoCompleteWidget } = registry.widgets;
+
+  if (Array.isArray(schema.examples)) {
+    return <AutoCompleteWidget {...props} />;
+  }
+
+  const inputProps = getInputProps<T, S, F>(schema, type, options);
+  const primeProps = (options.prime || {}) as object;
+  const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
+    onChange(value === '' ? options.emptyValue : value);
+  const _onBlur = () => onBlur && onBlur(id, value);
+  const _onFocus = () => onFocus && onFocus(id, value);
+
+  return (
+    <InputText
+      id={id}
+      name={id}
+      placeholder={placeholder}
+      {...primeProps}
+      {...inputProps}
+      required={required}
+      autoFocus={autofocus}
+      disabled={disabled || readonly}
+      list={schema.examples ? examplesId<T>(id) : undefined}
+      value={value || value === 0 ? value : ''}
+      invalid={rawErrors.length > 0}
+      onChange={onChangeOverride || _onChange}
+      onBlur={_onBlur}
+      onFocus={_onFocus}
+      aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+    />
+  );
+}

package/src/BaseInputTemplate/index.ts

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

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -0,0 +1,86 @@
+import {
+  ariaDescribedByIds,
+  descriptionId,
+  getTemplate,
+  labelValue,
+  schemaRequiresTrueValue,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+import { Checkbox, CheckboxChangeEvent } from 'primereact/checkbox';
+
+import { Label } from '../util';
+
+/** The `CheckBoxWidget` is a widget for rendering boolean properties.
+ *  It is typically used to represent a boolean.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function CheckboxWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: WidgetProps<T, S, F>) {
+  const {
+    id,
+    value,
+    disabled,
+    readonly,
+    label = '',
+    hideLabel,
+    autofocus,
+    onChange,
+    onBlur,
+    options,
+    onFocus,
+    schema,
+    uiSchema,
+    registry,
+  } = props;
+
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    options,
+  );
+
+  const required = schemaRequiresTrueValue<S>(schema);
+  const _onChange = (e: CheckboxChangeEvent) => onChange && onChange(e.checked);
+  const _onBlur = () => onBlur && onBlur(id, value);
+  const _onFocus = () => onFocus && onFocus(id, value);
+  const checked = value === 'true' || value === true;
+  const description = options.description ?? schema.description;
+  const primeProps = (options.prime || {}) as object;
+
+  return (
+    <>
+      {!hideLabel && !!description && (
+        <DescriptionFieldTemplate
+          id={descriptionId<T>(id)}
+          description={description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      <div style={{ display: 'flex', flexDirection: 'row', gap: '0.5rem', alignItems: 'center' }}>
+        <Checkbox
+          inputId={id}
+          name={id}
+          {...primeProps}
+          disabled={disabled || readonly}
+          autoFocus={autofocus}
+          checked={typeof value === 'undefined' ? false : checked}
+          onChange={_onChange}
+          onBlur={_onBlur}
+          onFocus={_onFocus}
+          required={required}
+          aria-describedby={ariaDescribedByIds<T>(id)}
+        />
+        {labelValue(<Label id={id} text={label} />, hideLabel, false)}
+      </div>
+    </>
+  );
+}

package/src/CheckboxWidget/index.ts

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

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -0,0 +1,105 @@
+import { Checkbox, CheckboxChangeEvent } from 'primereact/checkbox';
+import {
+  ariaDescribedByIds,
+  enumOptionsDeselectValue,
+  enumOptionsIsSelected,
+  enumOptionsSelectValue,
+  optionId,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+  descriptionId,
+  getTemplate,
+} from '@rjsf/utils';
+
+import { Label } from '../util';
+
+/** The `CheckboxesWidget` is a widget for rendering checkbox groups.
+ *  It is typically used to represent an array of enums.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function CheckboxesWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: WidgetProps<T, S, F>) {
+  const {
+    id,
+    disabled,
+    options,
+    value,
+    autofocus,
+    readonly,
+    onChange,
+    onBlur,
+    onFocus,
+    schema,
+    uiSchema,
+    registry,
+    hideLabel,
+  } = props;
+  const { enumOptions, enumDisabled } = options;
+  const primeProps = (options.prime || {}) as object;
+  const checkboxesValues = Array.isArray(value) ? value : [value];
+
+  const _onChange = (index: number) => (e: CheckboxChangeEvent) => {
+    if (e.checked) {
+      onChange(enumOptionsSelectValue<S>(index, checkboxesValues, enumOptions));
+    } else {
+      onChange(enumOptionsDeselectValue<S>(index, checkboxesValues, enumOptions));
+    }
+  };
+
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    options,
+  );
+
+  const _onBlur = () => onBlur(id, value);
+  const _onFocus = () => onFocus(id, value);
+
+  const description = options.description ?? schema.description;
+
+  return (
+    <div
+      id={id}
+      style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '0.5rem', marginBottom: '0.5rem' }}
+    >
+      {!hideLabel && !!description && (
+        <DescriptionFieldTemplate
+          id={descriptionId<T>(id)}
+          description={description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      {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 (
+            <div key={index} style={{ display: 'flex', flexDirection: 'row', gap: '0.5rem', alignItems: 'center' }}>
+              <Checkbox
+                inputId={optionId(id, index)}
+                name={id}
+                {...primeProps}
+                value={option.value}
+                checked={checked}
+                disabled={disabled || itemDisabled || readonly}
+                autoFocus={autofocus && index === 0}
+                onChange={_onChange(index)}
+                onBlur={_onBlur}
+                onFocus={_onFocus}
+                aria-describedby={ariaDescribedByIds<T>(id)}
+              />
+              <Label id={optionId(id, index)} text={option.label} />
+            </div>
+          );
+        })}
+    </div>
+  );
+}

package/src/CheckboxesWidget/index.ts

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

package/src/ColorWidget/ColorWidget.tsx

@@ -0,0 +1,62 @@
+import { ChangeEvent } from 'react';
+import {
+  ariaDescribedByIds,
+  FormContextType,
+  getInputProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+import { ColorPicker } from 'primereact/colorpicker';
+
+/** The `ColorWidget` component renders a color picker.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function ColorWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>,
+) {
+  const {
+    id,
+    placeholder,
+    value,
+    required,
+    readonly,
+    disabled,
+    onChange,
+    onChangeOverride,
+    onBlur,
+    onFocus,
+    autofocus,
+    options,
+    schema,
+    type,
+  } = props;
+  const inputProps = getInputProps<T, S, F>(schema, type, options);
+  const { inline } = options;
+  const primeProps = (options.prime || {}) as object;
+
+  const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
+    onChange(value === '' ? options.emptyValue : value);
+  const _onBlur = () => onBlur && onBlur(id, value);
+  const _onFocus = () => onFocus && onFocus(id, value);
+
+  return (
+    <ColorPicker
+      id={id}
+      name={id}
+      placeholder={placeholder}
+      {...primeProps}
+      {...inputProps}
+      required={required}
+      inline={inline}
+      autoFocus={autofocus}
+      disabled={disabled || readonly}
+      value={value || ''}
+      onChange={onChangeOverride || _onChange}
+      onBlur={_onBlur}
+      onFocus={_onFocus}
+      aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+    />
+  );
+}

package/src/ColorWidget/index.ts

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

package/src/DescriptionField/DescriptionField.tsx

@@ -0,0 +1,22 @@
+import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { RichDescription } from '@rjsf/core';
+
+/** The `DescriptionField` is the template to use to render the description of a field
+ *
+ * @param props - The `DescriptionFieldProps` for this component
+ */
+export default function DescriptionField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: DescriptionFieldProps<T, S, F>) {
+  const { id, description, registry, uiSchema } = props;
+  if (!description) {
+    return null;
+  }
+  return (
+    <span id={id}>
+      <RichDescription description={description} registry={registry} uiSchema={uiSchema} />
+    </span>
+  );
+}

package/src/DescriptionField/index.ts

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

package/src/ErrorList/ErrorList.tsx

@@ -0,0 +1,44 @@
+import { Message } from 'primereact/message';
+import { TimesCircleIcon } from 'primereact/icons/timescircle';
+import { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+
+/** The `ErrorList` component is the template that renders all the errors associated with the fields in the `Form`
+ *
+ * @param props - The `ErrorListProps` for this component
+ */
+export default function ErrorList<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  errors,
+  registry,
+}: ErrorListProps<T, S, F>) {
+  const { translateString } = registry;
+
+  const content = (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '0.5rem' }}>
+        <TimesCircleIcon style={{ width: '1.5rem', height: '1.5rem' }} />
+        <div className='p-message-summary'>{translateString(TranslatableString.ErrorsLabel)}</div>
+      </div>
+      <ul className='p-message-list'>
+        {errors.map((error, index) => (
+          <li key={`error-${index}`}>{error.stack}</li>
+        ))}
+      </ul>
+    </div>
+  );
+
+  return (
+    <Message
+      className='p-message'
+      style={{
+        borderStyle: 'solid',
+        borderColor: '#ff5757',
+        borderWidth: '0 0 0 6px',
+        width: '100%',
+        justifyContent: 'start',
+        marginBottom: '1rem',
+      }}
+      severity='error'
+      content={content}
+    />
+  );
+}

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 { Message } from 'primereact/message';
+
+/** 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,
+>({ errors, idSchema }: FieldErrorProps<T, S, F>) {
+  if (errors && errors.length > 0) {
+    const id = errorId<T>(idSchema);
+    const content = errors.map((error, i: number) => {
+      return <div key={i}>{error}</div>;
+    });
+
+    return (
+      <Message
+        id={id}
+        severity='error'
+        style={{ justifyContent: 'left' }}
+        text={content}
+        pt={{ text: { style: { fontSize: 'smaller' } } }}
+      />
+    );
+  }
+  return null;
+}

package/src/FieldErrorTemplate/index.ts

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

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -0,0 +1,18 @@
+import { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, helpId } from '@rjsf/utils';
+
+/** 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) {
+    const id = helpId<T>(idSchema);
+    return <small id={id}>{help}</small>;
+  }
+  return null;
+}

package/src/FieldHelpTemplate/index.ts

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

package/src/FieldTemplate/FieldTemplate.tsx

@@ -0,0 +1,40 @@
+import {
+  FieldTemplateProps,
+  FormContextType,
+  getTemplate,
+  getUiOptions,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+
+import { Label } from '../util';
+
+export default function FieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: FieldTemplateProps<T, S, F>) {
+  const { children, errors, help, displayLabel, description, rawDescription, hidden, uiSchema, registry } = 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 {...props}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', marginBottom: '1rem' }}>
+        {displayLabel && <Label id={props.id} text={props.label} required={props.required} />}
+        {children}
+        {displayLabel && rawDescription && <small>{description}</small>}
+        {errors}
+        {help}
+      </div>
+    </WrapIfAdditionalTemplate>
+  );
+}

package/src/FieldTemplate/index.ts

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