@rjsf/antd 5.3.0 → 5.4.0

package/dist/antd.esm.js

@@ -3,7 +3,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import Button from 'antd/es/button';
 import Col from 'antd/es/col';
 import Row from 'antd/es/row';
-import { getUiOptions, getTemplate, getInputProps, ariaDescribedByIds, examplesId, TranslatableString, errorId, titleId, descriptionId, canExpand, getSubmitButtonOptions, UI_OPTIONS_KEY, ADDITIONAL_PROPERTY_FLAG, parseDateString, toDateString, pad, enumOptionsIndexForValue, optionId, enumOptionsValueForIndex, rangeSpec } from '@rjsf/utils';
+import { getUiOptions, getTemplate, getInputProps, ariaDescribedByIds, examplesId, TranslatableString, errorId, titleId, descriptionId, canExpand, getSubmitButtonOptions, UI_OPTIONS_KEY, ADDITIONAL_PROPERTY_FLAG, parseDateString, toDateString, pad, enumOptionsIndexForValue, optionId, enumOptionsValueForIndex, labelValue, rangeSpec } from '@rjsf/utils';
 import classNames from 'classnames';
 import { ConfigConsumer } from 'antd/es/config-provider/context';
 import Input from 'antd/es/input';
@@ -193,7 +193,7 @@ function ArrayFieldTemplate(props) {
             span: 24,
             style: DESCRIPTION_COL_STYLE$1,
             children: jsx(ArrayFieldDescriptionTemplate, {
-              description: uiOptions.description || schema.description || '',
+              description: uiOptions.description || schema.description,
               idSchema: idSchema,
               schema: schema,
               uiSchema: uiSchema,
@@ -475,7 +475,9 @@ function FieldTemplate(props) {
     labelCol = _formContext$labelCol === void 0 ? VERTICAL_LABEL_COL$1 : _formContext$labelCol,
     _formContext$wrapperC = formContext.wrapperCol,
     wrapperCol = _formContext$wrapperC === void 0 ? VERTICAL_WRAPPER_COL$1 : _formContext$wrapperC,
-    wrapperStyle = formContext.wrapperStyle;
+    wrapperStyle = formContext.wrapperStyle,
+    _formContext$descript = formContext.descriptionLocation,
+    descriptionLocation = _formContext$descript === void 0 ? 'below' : _formContext$descript;
   var uiOptions = getUiOptions(uiSchema);
   var WrapIfAdditionalTemplate = getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
   if (hidden) {
@@ -484,6 +486,19 @@ function FieldTemplate(props) {
       children: children
     });
   }
+  // check to see if there is rawDescription(string) before using description(ReactNode)
+  // to prevent showing a blank description area
+  var descriptionNode = rawDescription ? description : undefined;
+  var descriptionProps = {};
+  switch (descriptionLocation) {
+    case 'tooltip':
+      descriptionProps.tooltip = descriptionNode;
+      break;
+    case 'below':
+    default:
+      descriptionProps.extra = descriptionNode;
+      break;
+  }
   return jsx(WrapIfAdditionalTemplate, {
     classNames: classNames,
     style: style,
@@ -497,9 +512,8 @@ function FieldTemplate(props) {
     schema: schema,
     uiSchema: uiSchema,
     registry: registry,
-    children: id === 'root' ? children : jsx(Form$1.Item, {
+    children: id === 'root' ? children : jsx(Form$1.Item, _extends({
       colon: colon,
-      extra: rawDescription && description,
       hasFeedback: schema.type !== 'array' && schema.type !== 'object',
       help: !!rawHelp && help || (rawErrors !== null && rawErrors !== void 0 && rawErrors.length ? errors : undefined),
       htmlFor: id,
@@ -508,9 +522,10 @@ function FieldTemplate(props) {
       required: required,
       style: wrapperStyle,
       validateStatus: rawErrors !== null && rawErrors !== void 0 && rawErrors.length ? 'error' : undefined,
-      wrapperCol: wrapperCol,
+      wrapperCol: wrapperCol
+    }, descriptionProps, {
       children: children
-    })
+    }))
   });
 }
 
@@ -600,23 +615,23 @@ function ObjectFieldTemplate(props) {
         id: idSchema.$id,
         children: [jsxs(Row, {
           gutter: rowGutter,
-          children: [(uiOptions.title || title) && jsx(Col, {
+          children: [title && jsx(Col, {
             className: labelColClassName,
             span: 24,
             children: jsx(TitleFieldTemplate, {
               id: titleId(idSchema),
-              title: uiOptions.title || title,
+              title: title,
               required: required,
               schema: schema,
               uiSchema: uiSchema,
               registry: registry
             })
-          }), (uiOptions.description || description) && jsx(Col, {
+          }), description && jsx(Col, {
             span: 24,
             style: DESCRIPTION_COL_STYLE,
             children: jsx(DescriptionFieldTemplate, {
               id: descriptionId(idSchema),
-              description: uiOptions.description || description,
+              description: description,
               schema: schema,
               uiSchema: uiSchema,
               registry: registry
@@ -1053,14 +1068,20 @@ function CheckboxesWidget(_ref) {
     disabled = _ref.disabled,
     formContext = _ref.formContext,
     id = _ref.id,
+    label = _ref.label,
+    hideLabel = _ref.hideLabel,
     onBlur = _ref.onBlur,
     onChange = _ref.onChange,
     onFocus = _ref.onFocus,
     options = _ref.options,
     readonly = _ref.readonly,
+    registry = _ref.registry,
+    schema = _ref.schema,
+    uiSchema = _ref.uiSchema,
     value = _ref.value;
   var _formContext$readonly = formContext.readonlyAsDisabled,
     readonlyAsDisabled = _formContext$readonly === void 0 ? true : _formContext$readonly;
+  var TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, options);
   var enumOptions = options.enumOptions,
     enumDisabled = options.enumDisabled,
     inline = options.inline,
@@ -1084,26 +1105,36 @@ function CheckboxesWidget(_ref) {
     onFocus: !readonly ? handleFocus : undefined
   };
   var selectedIndexes = enumOptionsIndexForValue(value, enumOptions, true);
-  return Array.isArray(enumOptions) && enumOptions.length > 0 ? jsx(Checkbox.Group, _extends({
-    disabled: disabled || readonlyAsDisabled && readonly,
-    name: id,
-    onChange: !readonly ? handleChange : undefined,
-    value: selectedIndexes
-  }, extraProps, {
-    "aria-describedby": ariaDescribedByIds(id),
-    children: Array.isArray(enumOptions) && enumOptions.map(function (option, i) {
-      return jsxs("span", {
-        children: [jsx(Checkbox, {
-          id: optionId(id, i),
-          name: id,
-          autoFocus: i === 0 ? autofocus : false,
-          disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1,
-          value: String(i),
-          children: option.label
-        }), !inline && jsx("br", {})]
-      }, i);
-    })
-  })) : null;
+  return Array.isArray(enumOptions) && enumOptions.length > 0 ? jsxs(Fragment, {
+    children: [!hideLabel && !!label && jsx("div", {
+      children: jsx(TitleFieldTemplate, {
+        id: titleId(id),
+        title: label,
+        schema: schema,
+        uiSchema: uiSchema,
+        registry: registry
+      })
+    }), jsx(Checkbox.Group, _extends({
+      disabled: disabled || readonlyAsDisabled && readonly,
+      name: id,
+      onChange: !readonly ? handleChange : undefined,
+      value: selectedIndexes
+    }, extraProps, {
+      "aria-describedby": ariaDescribedByIds(id),
+      children: Array.isArray(enumOptions) && enumOptions.map(function (option, i) {
+        return jsxs("span", {
+          children: [jsx(Checkbox, {
+            id: optionId(id, i),
+            name: id,
+            autoFocus: i === 0 ? autofocus : false,
+            disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1,
+            value: String(i),
+            children: option.label
+          }), !inline && jsx("br", {})]
+        }, i);
+      })
+    }))]
+  }) : null;
 }
 
 /** The `CheckBoxWidget` is a widget for rendering boolean properties.
@@ -1112,18 +1143,25 @@ function CheckboxesWidget(_ref) {
  * @param props - The `WidgetProps` for this component
  */
 function CheckboxWidget(props) {
+  var _options$description;
   var autofocus = props.autofocus,
     disabled = props.disabled,
     formContext = props.formContext,
     id = props.id,
     label = props.label,
+    hideLabel = props.hideLabel,
     onBlur = props.onBlur,
     onChange = props.onChange,
     onFocus = props.onFocus,
     readonly = props.readonly,
-    value = props.value;
+    value = props.value,
+    registry = props.registry,
+    options = props.options,
+    schema = props.schema,
+    uiSchema = props.uiSchema;
   var _formContext$readonly = formContext.readonlyAsDisabled,
     readonlyAsDisabled = _formContext$readonly === void 0 ? true : _formContext$readonly;
+  var DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, options);
   var handleChange = function handleChange(_ref) {
     var target = _ref.target;
     return onChange(target.checked);
@@ -1142,17 +1180,28 @@ function CheckboxWidget(props) {
     onBlur: !readonly ? handleBlur : undefined,
     onFocus: !readonly ? handleFocus : undefined
   };
-  return jsx(Checkbox, _extends({
-    autoFocus: autofocus,
-    checked: typeof value === 'undefined' ? false : value,
-    disabled: disabled || readonlyAsDisabled && readonly,
-    id: id,
-    name: id,
-    onChange: !readonly ? handleChange : undefined
-  }, extraProps, {
-    "aria-describedby": ariaDescribedByIds(id),
-    children: label
-  }));
+  var description = (_options$description = options.description) != null ? _options$description : schema.description;
+  return jsxs(Fragment, {
+    children: [!hideLabel && !!description && jsx("div", {
+      children: jsx(DescriptionFieldTemplate, {
+        id: descriptionId(id),
+        description: description,
+        schema: schema,
+        uiSchema: uiSchema,
+        registry: registry
+      })
+    }), jsx(Checkbox, _extends({
+      autoFocus: autofocus,
+      checked: typeof value === 'undefined' ? false : value,
+      disabled: disabled || readonlyAsDisabled && readonly,
+      id: id,
+      name: id,
+      onChange: !readonly ? handleChange : undefined
+    }, extraProps, {
+      "aria-describedby": ariaDescribedByIds(id),
+      children: labelValue(label, hideLabel, '')
+    }))]
+  });
 }
 
 var DatePicker = /*#__PURE__*/generatePicker(dayjsGenerateConfig);
@@ -1422,6 +1471,8 @@ function SelectWidget(_ref) {
     _ref$formContext = _ref.formContext,
     formContext = _ref$formContext === void 0 ? {} : _ref$formContext,
     id = _ref.id,
+    label = _ref.label,
+    hideLabel = _ref.hideLabel,
     multiple = _ref.multiple,
     onBlur = _ref.onBlur,
     onChange = _ref.onChange,
@@ -1429,9 +1480,13 @@ function SelectWidget(_ref) {
     options = _ref.options,
     placeholder = _ref.placeholder,
     readonly = _ref.readonly,
+    registry = _ref.registry,
+    schema = _ref.schema,
+    uiSchema = _ref.uiSchema,
     value = _ref.value;
   var _formContext$readonly = formContext.readonlyAsDisabled,
     readonlyAsDisabled = _formContext$readonly === void 0 ? true : _formContext$readonly;
+  var TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, options);
   var enumOptions = options.enumOptions,
     enumDisabled = options.enumDisabled,
     emptyValue = options.emptyValue;
@@ -1460,31 +1515,39 @@ function SelectWidget(_ref) {
   var extraProps = {
     name: id
   };
-  return jsx(Select, _extends({
-    autoFocus: autofocus,
-    disabled: disabled || readonlyAsDisabled && readonly,
-    getPopupContainer: getPopupContainer,
-    id: id,
-    mode: typeof multiple !== 'undefined' ? 'multiple' : undefined,
-    onBlur: !readonly ? handleBlur : undefined,
-    onChange: !readonly ? handleChange : undefined,
-    onFocus: !readonly ? handleFocus : undefined,
-    placeholder: placeholder,
-    style: SELECT_STYLE,
-    value: selectedIndexes
-  }, extraProps, {
-    filterOption: filterOption,
-    "aria-describedby": ariaDescribedByIds(id),
-    children: Array.isArray(enumOptions) && enumOptions.map(function (_ref2, index) {
-      var optionValue = _ref2.value,
-        optionLabel = _ref2.label;
-      return jsx(Select.Option, {
-        disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(optionValue) !== -1,
-        value: String(index),
-        children: optionLabel
-      }, String(index));
-    })
-  }));
+  return jsxs(Fragment, {
+    children: [!hideLabel && !!label && jsx(TitleFieldTemplate, {
+      id: titleId(id),
+      title: label,
+      schema: schema,
+      uiSchema: uiSchema,
+      registry: registry
+    }), jsx(Select, _extends({
+      autoFocus: autofocus,
+      disabled: disabled || readonlyAsDisabled && readonly,
+      getPopupContainer: getPopupContainer,
+      id: id,
+      mode: typeof multiple !== 'undefined' ? 'multiple' : undefined,
+      onBlur: !readonly ? handleBlur : undefined,
+      onChange: !readonly ? handleChange : undefined,
+      onFocus: !readonly ? handleFocus : undefined,
+      placeholder: placeholder,
+      style: SELECT_STYLE,
+      value: selectedIndexes
+    }, extraProps, {
+      filterOption: filterOption,
+      "aria-describedby": ariaDescribedByIds(id),
+      children: Array.isArray(enumOptions) && enumOptions.map(function (_ref2, index) {
+        var optionValue = _ref2.value,
+          optionLabel = _ref2.label;
+        return jsx(Select.Option, {
+          disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(optionValue) !== -1,
+          value: String(index),
+          children: optionLabel
+        }, String(index));
+      })
+    }))]
+  });
 }
 
 var INPUT_STYLE = {