@rjsf/semantic-ui 5.11.2 → 5.12.0

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -0,0 +1,90 @@
+import { ChangeEvent } from 'react';
+import { Form } from 'semantic-ui-react';
+import { getSemanticProps } from '../util';
+import {
+  ariaDescribedByIds,
+  BaseInputTemplateProps,
+  examplesId,
+  getInputProps,
+  labelValue,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+
+/** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
+ * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
+ * It can be customized/overridden for other themes or individual implementations as needed.
+ *
+ * @param props - The `WidgetProps` for this template
+ */
+export default function BaseInputTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: BaseInputTemplateProps<T, S, F>) {
+  const {
+    id,
+    placeholder,
+    label,
+    hideLabel,
+    value,
+    required,
+    readonly,
+    disabled,
+    onChange,
+    onChangeOverride,
+    onBlur,
+    onFocus,
+    autofocus,
+    options,
+    schema,
+    uiSchema,
+    formContext,
+    type,
+    rawErrors = [],
+  } = props;
+  const inputProps = getInputProps<T, S, F>(schema, type, options);
+  const semanticProps = getSemanticProps<T, S, F>({
+    uiSchema,
+    formContext,
+    options,
+  });
+  const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
+    onChange(value === '' ? options.emptyValue : value);
+  const _onBlur = () => onBlur && onBlur(id, value);
+  const _onFocus = () => onFocus && onFocus(id, value);
+
+  return (
+    <>
+      <Form.Input
+        key={id}
+        id={id}
+        name={id}
+        placeholder={placeholder}
+        {...inputProps}
+        label={labelValue(label || undefined, hideLabel, false)}
+        required={required}
+        autoFocus={autofocus}
+        disabled={disabled || readonly}
+        list={schema.examples ? examplesId<T>(id) : undefined}
+        {...semanticProps}
+        value={value || value === 0 ? value : ''}
+        error={rawErrors.length > 0}
+        onChange={onChangeOverride || _onChange}
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+        aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+      />
+      {Array.isArray(schema.examples) && (
+        <datalist id={examplesId<T>(id)}>
+          {(schema.examples as string[])
+            .concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : [])
+            .map((example) => {
+              return <option key={example} value={example} />;
+            })}
+        </datalist>
+      )}
+    </>
+  );
+}

package/src/BaseInputTemplate/index.ts

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

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -0,0 +1,95 @@
+import { FormEvent } from 'react';
+import {
+  ariaDescribedByIds,
+  descriptionId,
+  getTemplate,
+  labelValue,
+  schemaRequiresTrueValue,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+import { Form, CheckboxProps } from 'semantic-ui-react';
+import { getSemanticProps } 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,
+    formContext,
+    schema,
+    uiSchema,
+    rawErrors = [],
+    registry,
+  } = props;
+  const semanticProps = getSemanticProps<T, S, F>({
+    options,
+    formContext,
+    uiSchema,
+    defaultSchemaProps: {
+      inverted: 'false',
+    },
+  });
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    options
+  );
+  // 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 _onChange = (_: FormEvent<HTMLInputElement>, data: CheckboxProps) => onChange && onChange(data.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;
+
+  return (
+    <>
+      {!hideLabel && !!description && (
+        <DescriptionFieldTemplate
+          id={descriptionId<T>(id)}
+          description={description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      <Form.Checkbox
+        id={id}
+        name={id}
+        disabled={disabled || readonly}
+        autoFocus={autofocus}
+        {...semanticProps}
+        checked={typeof value === 'undefined' ? false : checked}
+        error={rawErrors.length > 0}
+        onChange={_onChange}
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+        required={required}
+        label={labelValue(label, hideLabel, false)}
+        aria-describedby={ariaDescribedByIds<T>(id)}
+      />
+    </>
+  );
+}

package/src/CheckboxWidget/index.ts

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

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -0,0 +1,102 @@
+import { ChangeEvent } from 'react';
+import { Form } from 'semantic-ui-react';
+import {
+  ariaDescribedByIds,
+  enumOptionsDeselectValue,
+  enumOptionsIsSelected,
+  enumOptionsSelectValue,
+  getTemplate,
+  optionId,
+  titleId,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+import { getSemanticProps } 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,
+    label,
+    hideLabel,
+    onChange,
+    onBlur,
+    onFocus,
+    formContext,
+    schema,
+    uiSchema,
+    rawErrors = [],
+    registry,
+  } = props;
+  const TitleFieldTemplate = getTemplate<'TitleFieldTemplate', T, S, F>('TitleFieldTemplate', registry, options);
+  const { enumOptions, enumDisabled, inline } = options;
+  const checkboxesValues = Array.isArray(value) ? value : [value];
+  const semanticProps = getSemanticProps<T, S, F>({
+    options,
+    formContext,
+    uiSchema,
+    defaultSchemaProps: {
+      inverted: 'false',
+    },
+  });
+  const _onChange =
+    (index: number) =>
+    ({ target: { checked } }: ChangeEvent<HTMLInputElement>) => {
+      // eslint-disable-next-line no-shadow
+      if (checked) {
+        onChange(enumOptionsSelectValue<S>(index, checkboxesValues, enumOptions));
+      } else {
+        onChange(enumOptionsDeselectValue<S>(index, checkboxesValues, enumOptions));
+      }
+    };
+
+  const _onBlur = () => onBlur(id, value);
+  const _onFocus = () => onFocus(id, value);
+  const inlineOption = inline ? { inline: true } : { grouped: true };
+  return (
+    <>
+      {!hideLabel && !!label && (
+        <TitleFieldTemplate id={titleId<T>(id)} title={label} schema={schema} uiSchema={uiSchema} registry={registry} />
+      )}
+      <Form.Group id={id} name={id} {...inlineOption}>
+        {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 (
+              <Form.Checkbox
+                id={optionId(id, index)}
+                name={id}
+                key={index}
+                label={option.label}
+                {...semanticProps}
+                checked={checked}
+                error={rawErrors.length > 0}
+                disabled={disabled || itemDisabled || readonly}
+                autoFocus={autofocus && index === 0}
+                onChange={_onChange(index)}
+                onBlur={_onBlur}
+                onFocus={_onFocus}
+                aria-describedby={ariaDescribedByIds<T>(id)}
+              />
+            );
+          })}
+      </Form.Group>
+    </>
+  );
+}

package/src/CheckboxesWidget/index.ts

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

package/src/DescriptionField/DescriptionField.tsx

@@ -0,0 +1,21 @@
+import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+/** 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 } = props;
+  if (!description) {
+    return null;
+  }
+  return (
+    <p id={id} className='sui-description'>
+      {description}
+    </p>
+  );
+}

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 { Message } from 'semantic-ui-react';
+import { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+
+/** The `ErrorList` component is the template that renders the 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;
+  return (
+    <Message negative>
+      <Message.Header>{translateString(TranslatableString.ErrorsLabel)}</Message.Header>
+      <Message.List>
+        {errors.map((error, index) => (
+          <Message.Item key={`error-${index}`}>{error.stack}</Message.Item>
+        ))}
+      </Message.List>
+    </Message>
+  );
+}

package/src/ErrorList/index.ts

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

package/src/FieldErrorTemplate/FieldErrorTemplate.tsx

@@ -0,0 +1,43 @@
+import { errorId, FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { nanoid } from 'nanoid';
+import { Label, List } from 'semantic-ui-react';
+
+import { getSemanticErrorProps } from '../util';
+
+const DEFAULT_OPTIONS = {
+  options: {
+    pointing: 'above',
+    size: 'small',
+  },
+};
+
+/** 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, uiSchema, registry }: FieldErrorProps<T, S, F>) {
+  const { formContext } = registry;
+  const options = getSemanticErrorProps<T, S, F>({
+    formContext,
+    uiSchema,
+    defaultProps: DEFAULT_OPTIONS,
+  });
+  const { pointing, size } = options;
+  if (errors && errors.length > 0) {
+    const id = errorId<T>(idSchema);
+    return (
+      <Label id={id} color='red' pointing={pointing || 'above'} size={size || 'small'} basic>
+        <List bulleted>
+          {errors.map((error) => (
+            <List.Item key={nanoid()}>{error}</List.Item>
+          ))}
+        </List>
+      </Label>
+    );
+  }
+  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,19 @@
+import { Message } from 'semantic-ui-react';
+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 <Message size='mini' info id={id} content={help} />;
+  }
+  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,77 @@
+import {
+  FieldTemplateProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  getTemplate,
+  getUiOptions,
+} from '@rjsf/utils';
+import { Form } from 'semantic-ui-react';
+import { getSemanticProps, MaybeWrap } from '../util';
+
+/** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
+ * content, (label, description, children, errors and help) inside of a `WrapIfAdditional` component.
+ *
+ * @param props - The `FieldTemplateProps` for this component
+ */
+export default function FieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: FieldTemplateProps<T, S, F>) {
+  const {
+    id,
+    children,
+    classNames,
+    style,
+    displayLabel,
+    label,
+    errors,
+    help,
+    hidden,
+    description,
+    rawDescription,
+    registry,
+    schema,
+    uiSchema,
+    ...otherProps
+  } = props;
+  const semanticProps = getSemanticProps<T, S, F>(otherProps);
+  const { wrapLabel, wrapContent } = semanticProps;
+  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}
+      id={id}
+      label={label}
+      registry={registry}
+      schema={schema}
+      uiSchema={uiSchema}
+      {...otherProps}
+    >
+      <Form.Group key={id} widths='equal' grouped>
+        <MaybeWrap wrap={wrapContent} className='sui-field-content'>
+          {children}
+          {displayLabel && rawDescription && (
+            <MaybeWrap wrap={wrapLabel} className='sui-field-label'>
+              {description}
+            </MaybeWrap>
+          )}
+          {help}
+          {errors}
+        </MaybeWrap>
+      </Form.Group>
+    </WrapIfAdditionalTemplate>
+  );
+}

package/src/FieldTemplate/index.ts

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

package/src/IconButton/IconButton.tsx

@@ -0,0 +1,55 @@
+import { Button, ButtonProps } from 'semantic-ui-react';
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+
+function IconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>
+) {
+  const { icon, iconType, color, className, uiSchema, registry, ...otherProps } = props;
+  return (
+    <Button
+      icon={icon}
+      size={iconType as ButtonProps['size']}
+      color={color as ButtonProps['color']}
+      className={className}
+      {...otherProps}
+    />
+  );
+}
+
+export default IconButton;
+
+export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return <IconButton title={translateString(TranslatableString.CopyButton)} {...props} icon='copy' />;
+}
+
+export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return <IconButton title={translateString(TranslatableString.MoveDownButton)} {...props} icon='angle down' />;
+}
+
+export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return <IconButton title={translateString(TranslatableString.MoveUpButton)} {...props} icon='angle up' />;
+}
+
+export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return <IconButton title={translateString(TranslatableString.RemoveButton)} {...props} icon='trash' />;
+}

package/src/IconButton/index.ts

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

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -0,0 +1,94 @@
+import { Grid } from 'semantic-ui-react';
+import {
+  FormContextType,
+  ObjectFieldTemplateProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+  canExpand,
+  descriptionId,
+  getTemplate,
+  getUiOptions,
+  titleId,
+} from '@rjsf/utils';
+
+/** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
+ * title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
+ * the properties.
+ *
+ * @param props - The `ObjectFieldTemplateProps` for this component
+ */
+export default function ObjectFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ObjectFieldTemplateProps<T, S, F>) {
+  const {
+    description,
+    onAddClick,
+    title,
+    properties,
+    disabled,
+    readonly,
+    required,
+    uiSchema,
+    schema,
+    formData,
+    idSchema,
+    registry,
+  } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const TitleFieldTemplate = getTemplate<'TitleFieldTemplate', T, S, F>('TitleFieldTemplate', registry, uiOptions);
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    uiOptions
+  );
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+  return (
+    <>
+      {title && (
+        <TitleFieldTemplate
+          id={titleId<T>(idSchema)}
+          title={title}
+          required={required}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      {description && (
+        <DescriptionFieldTemplate
+          id={descriptionId<T>(idSchema)}
+          description={description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      {properties.map((prop) => prop.content)}
+      {canExpand<T, S, F>(schema, uiSchema, formData) && (
+        <Grid.Column width={16} verticalAlign='middle'>
+          <Grid.Row>
+            <div
+              style={{
+                marginTop: '1rem',
+                position: 'relative',
+                textAlign: 'right',
+              }}
+            >
+              <AddButton
+                onClick={onAddClick(schema)}
+                disabled={disabled || readonly}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            </div>
+          </Grid.Row>
+        </Grid.Column>
+      )}
+    </>
+  );
+}

package/src/ObjectFieldTemplate/index.ts

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