@rjsf/chakra-ui 5.3.1 → 5.4.0

package/dist/chakra-ui.esm.js

@@ -1,6 +1,6 @@
 import { withTheme } from '@rjsf/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { TranslatableString, getUiOptions, getTemplate, getInputProps, examplesId, ariaDescribedByIds, errorId, helpId, titleId, descriptionId, canExpand, getSubmitButtonOptions, ADDITIONAL_PROPERTY_FLAG, parseDateString, toDateString, pad, schemaRequiresTrueValue, enumOptionsIndexForValue, enumOptionsValueForIndex, enumOptionsIsSelected, optionId, rangeSpec } from '@rjsf/utils';
+import { TranslatableString, getUiOptions, getTemplate, getInputProps, labelValue, examplesId, ariaDescribedByIds, errorId, helpId, titleId, descriptionId, canExpand, getSubmitButtonOptions, ADDITIONAL_PROPERTY_FLAG, parseDateString, toDateString, pad, schemaRequiresTrueValue, enumOptionsIndexForValue, enumOptionsValueForIndex, enumOptionsIsSelected, optionId, rangeSpec } from '@rjsf/utils';
 import { Button, HStack, Box, ButtonGroup, Grid, GridItem, shouldForwardProp, FormControl, FormLabel, Input, Text, Alert, AlertTitle, List, ListItem, ListIcon, IconButton, FormErrorMessage, FormHelperText, Heading, Divider, Checkbox, CheckboxGroup, Stack, RadioGroup, Radio, Slider, SliderTrack, SliderFilledTrack, SliderThumb, Textarea, NumberInput, NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper, ChakraProvider } from '@chakra-ui/react';
 import { AddIcon, WarningIcon, CopyIcon, ArrowDownIcon, ArrowUpIcon, DeleteIcon } from '@chakra-ui/icons';
 import { useMemo, memo, useState, useEffect } from 'react';
@@ -197,6 +197,7 @@ function BaseInputTemplate(props) {
     type = props.type,
     value = props.value,
     label = props.label,
+    hideLabel = props.hideLabel,
     schema = props.schema,
     uiSchema = props.uiSchema,
     onChange = props.onChange,
@@ -209,13 +210,11 @@ function BaseInputTemplate(props) {
     rawErrors = props.rawErrors,
     autofocus = props.autofocus,
     placeholder = props.placeholder,
-    disabled = props.disabled,
-    registry = props.registry;
+    disabled = props.disabled;
   var inputProps = getInputProps(schema, type, options);
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
-  var schemaUtils = registry.schemaUtils;
   var _onChange = function _onChange(_ref) {
     var value = _ref.target.value;
     return onChange(value === '' ? options.emptyValue : value);
@@ -228,7 +227,6 @@ function BaseInputTemplate(props) {
     var value = _ref3.target.value;
     return onFocus(id, value);
   };
-  var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
   return jsxs(FormControl, _extends({
     mb: 1
   }, chakraProps, {
@@ -236,11 +234,11 @@ function BaseInputTemplate(props) {
     isRequired: required,
     isReadOnly: readonly,
     isInvalid: rawErrors && rawErrors.length > 0,
-    children: [displayLabel ? jsx(FormLabel, {
+    children: [labelValue(jsx(FormLabel, {
       htmlFor: id,
       id: id + "-label",
-      children: label || schema.title
-    }) : null, jsx(Input, _extends({
+      children: label
+    }), hideLabel || !label), jsx(Input, _extends({
       id: id,
       name: id,
       value: value || value === 0 ? value : '',
@@ -467,16 +465,16 @@ function ObjectFieldTemplate(props) {
   // Button templates are not overridden in the uiSchema
   var AddButton = registry.templates.ButtonTemplates.AddButton;
   return jsxs(Fragment, {
-    children: [(uiOptions.title || title) && jsx(TitleFieldTemplate, {
+    children: [title && jsx(TitleFieldTemplate, {
       id: titleId(idSchema),
-      title: uiOptions.title || title,
+      title: title,
       required: required,
       schema: schema,
       uiSchema: uiSchema,
       registry: registry
-    }), (uiOptions.description || description) && jsx(DescriptionFieldTemplate, {
+    }), description && jsx(DescriptionFieldTemplate, {
       id: descriptionId(idSchema),
-      description: uiOptions.description || description,
+      description: description,
       schema: schema,
       uiSchema: uiSchema,
       registry: registry
@@ -812,6 +810,9 @@ function CheckboxWidget(props) {
     onBlur = props.onBlur,
     onFocus = props.onFocus,
     label = props.label,
+    hideLabel = props.hideLabel,
+    registry = props.registry,
+    options = props.options,
     uiSchema = props.uiSchema,
     schema = props.schema;
   var chakraProps = getChakra({
@@ -821,6 +822,8 @@ function CheckboxWidget(props) {
   // the "required" attribute if the field value must be "true", due to the
   // "const" or "enum" keywords
   var required = schemaRequiresTrueValue(schema);
+  var DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, options);
+  var description = options.description || schema.description;
   var _onChange = function _onChange(_ref) {
     var checked = _ref.target.checked;
     return onChange(checked);
@@ -833,11 +836,17 @@ function CheckboxWidget(props) {
     var value = _ref3.target.value;
     return onFocus(id, value);
   };
-  return jsx(FormControl, _extends({
+  return jsxs(FormControl, _extends({
     mb: 1
   }, chakraProps, {
     isRequired: required,
-    children: jsx(Checkbox, {
+    children: [!hideLabel && !!description && jsx(DescriptionFieldTemplate, {
+      id: descriptionId(id),
+      description: description,
+      schema: schema,
+      uiSchema: uiSchema,
+      registry: registry
+    }), jsx(Checkbox, {
       id: id,
       name: id,
       isChecked: typeof value === 'undefined' ? false : value,
@@ -846,10 +855,10 @@ function CheckboxWidget(props) {
       onBlur: _onBlur,
       onFocus: _onFocus,
       "aria-describedby": ariaDescribedByIds(id),
-      children: label && jsx(Text, {
+      children: labelValue(jsx(Text, {
         children: label
-      })
-    })
+      }), hideLabel || !label)
+    })]
   }));
 }
 
@@ -864,10 +873,10 @@ function CheckboxesWidget(props) {
     onFocus = props.onFocus,
     required = props.required,
     label = props.label,
+    hideLabel = props.hideLabel,
     uiSchema = props.uiSchema,
     _props$rawErrors = props.rawErrors,
-    rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
-    schema = props.schema;
+    rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors;
   var enumOptions = options.enumOptions,
     enumDisabled = options.enumDisabled,
     emptyValue = options.emptyValue;
@@ -892,11 +901,11 @@ function CheckboxesWidget(props) {
     isRequired: required,
     isReadOnly: readonly,
     isInvalid: rawErrors && rawErrors.length > 0,
-    children: [jsx(FormLabel, {
+    children: [labelValue(jsx(FormLabel, {
       htmlFor: id,
       id: id + "-label",
-      children: label || schema.title
-    }), jsx(CheckboxGroup, {
+      children: label
+    }), hideLabel || !label), jsx(CheckboxGroup, {
       onChange: function onChange(option) {
         return _onChange(enumOptionsValueForIndex(option, enumOptions, emptyValue));
       },
@@ -926,14 +935,15 @@ function CheckboxesWidget(props) {
 }
 
 function RadioWidget(_ref) {
+  var _enumOptionsIndexForV;
   var id = _ref.id,
-    schema = _ref.schema,
     options = _ref.options,
     value = _ref.value,
     required = _ref.required,
     disabled = _ref.disabled,
     readonly = _ref.readonly,
     label = _ref.label,
+    hideLabel = _ref.hideLabel,
     onChange = _ref.onChange,
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
@@ -956,18 +966,18 @@ function RadioWidget(_ref) {
     return onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue));
   };
   var row = options ? options.inline : false;
-  var selectedIndex = enumOptionsIndexForValue(value, enumOptions);
+  var selectedIndex = (_enumOptionsIndexForV = enumOptionsIndexForValue(value, enumOptions)) != null ? _enumOptionsIndexForV : null;
   return jsxs(FormControl, _extends({
     mb: 1
   }, chakraProps, {
     isDisabled: disabled || readonly,
     isRequired: required,
     isReadOnly: readonly,
-    children: [jsx(FormLabel, {
+    children: [labelValue(jsx(FormLabel, {
       htmlFor: id,
       id: id + "-label",
-      children: label || schema.title
-    }), jsx(RadioGroup, {
+      children: label
+    }), hideLabel || !label), jsx(RadioGroup, {
       onChange: _onChange,
       onBlur: _onBlur,
       onFocus: _onFocus,
@@ -1001,9 +1011,8 @@ function RangeWidget(_ref) {
     uiSchema = _ref.uiSchema,
     onChange = _ref.onChange,
     label = _ref.label,
-    id = _ref.id,
-    registry = _ref.registry;
-  var schemaUtils = registry.schemaUtils;
+    hideLabel = _ref.hideLabel,
+    id = _ref.id;
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
@@ -1012,7 +1021,6 @@ function RangeWidget(_ref) {
     label: label,
     id: id
   }, rangeSpec(schema));
-  var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
   var _onChange = function _onChange(value) {
     return onChange(value === undefined ? options.emptyValue : value);
   };
@@ -1027,10 +1035,10 @@ function RangeWidget(_ref) {
   return jsxs(FormControl, _extends({
     mb: 1
   }, chakraProps, {
-    children: [displayLabel ? jsx(FormLabel, {
+    children: [labelValue(jsx(FormLabel, {
       htmlFor: id,
-      children: label || schema.title
-    }) : null, jsxs(Slider, _extends({}, sliderWidgetProps, {
+      children: label
+    }), hideLabel || !label), jsxs(Slider, _extends({}, sliderWidgetProps, {
       id: id,
       name: id,
       isDisabled: disabled || readonly,
@@ -1046,10 +1054,10 @@ function RangeWidget(_ref) {
 }
 
 function SelectWidget(props) {
-  var schema = props.schema,
-    id = props.id,
+  var id = props.id,
     options = props.options,
     label = props.label,
+    hideLabel = props.hideLabel,
     placeholder = props.placeholder,
     multiple = props.multiple,
     required = props.required,
@@ -1114,10 +1122,10 @@ function SelectWidget(props) {
     isRequired: required,
     isReadOnly: readonly,
     isInvalid: rawErrors && rawErrors.length > 0,
-    children: [(label || schema.title) && jsx(FormLabel, {
+    children: [labelValue(jsx(FormLabel, {
       htmlFor: isMultiple ? undefined : id,
-      children: label || schema.title
-    }), jsx(Select, {
+      children: label
+    }), hideLabel || !label), jsx(Select, {
       inputId: id,
       name: id,
       isMulti: isMultiple,
@@ -1139,6 +1147,7 @@ function TextareaWidget(_ref) {
     placeholder = _ref.placeholder,
     value = _ref.value,
     label = _ref.label,
+    hideLabel = _ref.hideLabel,
     disabled = _ref.disabled,
     autofocus = _ref.autofocus,
     readonly = _ref.readonly,
@@ -1146,16 +1155,12 @@ function TextareaWidget(_ref) {
     onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     options = _ref.options,
-    schema = _ref.schema,
     uiSchema = _ref.uiSchema,
     required = _ref.required,
-    rawErrors = _ref.rawErrors,
-    registry = _ref.registry;
+    rawErrors = _ref.rawErrors;
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
-  var schemaUtils = registry.schemaUtils;
-  var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
   var _onChange = function _onChange(_ref2) {
     var value = _ref2.target.value;
     return onChange(value === '' ? options.emptyValue : value);
@@ -1175,10 +1180,10 @@ function TextareaWidget(_ref) {
     isRequired: required,
     isReadOnly: readonly,
     isInvalid: rawErrors && rawErrors.length > 0,
-    children: [displayLabel ? jsx(FormLabel, {
+    children: [labelValue(jsx(FormLabel, {
       htmlFor: id,
-      children: label || schema.title
-    }) : null, jsx(Textarea, {
+      children: label
+    }), hideLabel || !label), jsx(Textarea, {
       id: id,
       name: id,
       value: value != null ? value : '',
@@ -1194,20 +1199,17 @@ function TextareaWidget(_ref) {
 
 function UpDownWidget(props) {
   var id = props.id,
-    schema = props.schema,
     uiSchema = props.uiSchema,
     readonly = props.readonly,
     disabled = props.disabled,
     label = props.label,
+    hideLabel = props.hideLabel,
     value = props.value,
     onChange = props.onChange,
     onBlur = props.onBlur,
     onFocus = props.onFocus,
     rawErrors = props.rawErrors,
-    required = props.required,
-    registry = props.registry;
-  var schemaUtils = registry.schemaUtils;
-  var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
+    required = props.required;
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
@@ -1229,10 +1231,10 @@ function UpDownWidget(props) {
     isRequired: required,
     isReadOnly: readonly,
     isInvalid: rawErrors && rawErrors.length > 0,
-    children: [displayLabel ? jsx(FormLabel, {
+    children: [labelValue(jsx(FormLabel, {
       htmlFor: id,
-      children: label || schema.title
-    }) : null, jsxs(NumberInput, {
+      children: label
+    }), hideLabel || !label), jsxs(NumberInput, {
       value: value != null ? value : '',
       onChange: _onChange,
       onBlur: _onBlur,