@rjsf/chakra-ui 5.0.2 → 5.2.0

package/dist/chakra-ui.esm.js

@@ -1,9 +1,9 @@
 import { withTheme } from '@rjsf/core';
 import * as React from 'react';
 import React__default, { useMemo, useState, useEffect } from 'react';
+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 { 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, ArrowDownIcon, ArrowUpIcon, DeleteIcon } from '@chakra-ui/icons';
-import { 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 { Select } from 'chakra-react-select';
 import { Global, CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
@@ -38,10 +38,12 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 
 var _excluded$2 = ["uiSchema", "registry"];
 function AddButton(_ref) {
-  var props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  var registry = _ref.registry,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  var translateString = registry.translateString;
   return React__default.createElement(Button, _extends({
     leftIcon: React__default.createElement(AddIcon, null)
-  }, props), "Add Item");
+  }, props), translateString(TranslatableString.AddItemButton));
 }
 
 function ArrayFieldItemTemplate(props) {
@@ -253,13 +255,15 @@ function DescriptionField(_ref) {
 }
 
 function ErrorList(_ref) {
-  var errors = _ref.errors;
+  var errors = _ref.errors,
+    registry = _ref.registry;
+  var translateString = registry.translateString;
   return React__default.createElement(Alert, {
     flexDirection: "column",
     alignItems: "flex-start",
     gap: 3,
     status: "error"
-  }, React__default.createElement(AlertTitle, null, "Errors"), React__default.createElement(List, null, errors.map(function (error, i) {
+  }, React__default.createElement(AlertTitle, null, translateString(TranslatableString.ErrorsLabel)), React__default.createElement(List, null, errors.map(function (error, i) {
     return React__default.createElement(ListItem, {
       key: i
     }, React__default.createElement(ListIcon, {
@@ -283,22 +287,25 @@ ChakraIconButton.displayName = "ChakraIconButton";
 var ChakraIconButton$1 = /*#__PURE__*/React__default.memo(ChakraIconButton);
 
 function MoveDownButton(props) {
+  var translateString = props.registry.translateString;
   return React__default.createElement(ChakraIconButton$1, _extends({
-    title: "Move down"
+    title: translateString(TranslatableString.MoveDownButton)
   }, props, {
     icon: React__default.createElement(ArrowDownIcon, null)
   }));
 }
 function MoveUpButton(props) {
+  var translateString = props.registry.translateString;
   return React__default.createElement(ChakraIconButton$1, _extends({
-    title: "Move up"
+    title: translateString(TranslatableString.MoveUpButton)
   }, props, {
     icon: React__default.createElement(ArrowUpIcon, null)
   }));
 }
 function RemoveButton(props) {
+  var translateString = props.registry.translateString;
   return React__default.createElement(ChakraIconButton$1, _extends({
-    title: "Remove"
+    title: translateString(TranslatableString.RemoveButton)
   }, props, {
     icon: React__default.createElement(DeleteIcon, null)
   }));
@@ -484,8 +491,11 @@ function WrapIfAdditionalTemplate(props) {
     required = props.required,
     schema = props.schema,
     uiSchema = props.uiSchema;
+  var templates = registry.templates,
+    translateString = registry.translateString;
   // Button templates are not overridden in the uiSchema
-  var RemoveButton = registry.templates.ButtonTemplates.RemoveButton;
+  var RemoveButton = templates.ButtonTemplates.RemoveButton;
+  var keyLabel = translateString(TranslatableString.KeyLabel, [label]);
   var additional = (ADDITIONAL_PROPERTY_FLAG in schema);
   if (!additional) {
     return React__default.createElement("div", {
@@ -493,7 +503,6 @@ function WrapIfAdditionalTemplate(props) {
       style: style
     }, children);
   }
-  var keyLabel = label + " Key";
   var handleBlur = function handleBlur(_ref) {
     var target = _ref.target;
     return onKeyChange(target.value);
@@ -596,6 +605,7 @@ function AltDateWidget(props) {
     registry = props.registry,
     showTime = props.showTime,
     value = props.value;
+  var translateString = registry.translateString;
   var _useState = useState(parseDateString(value, showTime)),
     state = _useState[0],
     setState = _useState[1];
@@ -693,11 +703,11 @@ function AltDateWidget(props) {
       return handleNow(e);
     },
     mr: "2"
-  }, "Now"), !options.hideClearButton && React__default.createElement(Button, {
+  }, translateString(TranslatableString.NowLabel)), !options.hideClearButton && React__default.createElement(Button, {
     onClick: function onClick(e) {
       return handleClear(e);
     }
-  }, "Clear")));
+  }, translateString(TranslatableString.ClearLabel))));
 }
 AltDateWidget.defaultProps = {
   autofocus: false,
@@ -985,7 +995,7 @@ function SelectWidget(props) {
   var displayEnumOptions = Array.isArray(enumOptions) ? enumOptions.map(function (option, index) {
     var value = option.value,
       label = option.label;
-    _valueLabelMap[index] = label;
+    _valueLabelMap[index] = label || String(value);
     return {
       label: label,
       value: String(index),
@@ -993,14 +1003,15 @@ function SelectWidget(props) {
     };
   }) : [];
   var isMultiple = typeof multiple !== "undefined" && Boolean(enumOptions);
-  var formValue = isMultiple ? (value || []).map(function (v, index) {
+  var selectedIndex = enumOptionsIndexForValue(value, enumOptions, isMultiple);
+  var formValue = isMultiple ? (selectedIndex || []).map(function (i) {
     return {
-      label: _valueLabelMap[index] || v,
-      value: index
+      label: _valueLabelMap[i],
+      value: i
     };
   }) : {
-    label: _valueLabelMap[0] || value || "",
-    value: 0
+    label: _valueLabelMap[selectedIndex] || "",
+    selectedIndex: selectedIndex
   };
   return React__default.createElement(FormControl, _extends({
     mb: 1