@visma/rjsf-material-ui/dist/rjsf-material-ui.cjs.development.js

Material UI theme, fields and widgets for react-jsonschema-form

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var rjsfCore = require('@visma/rjsf-core');
var React = require('react');
var React__default = _interopDefault(React);
var Box = _interopDefault(require('@material-ui/core/Box'));
var Button = _interopDefault(require('@material-ui/core/Button'));
var reactIntl = require('react-intl');
var Grid = _interopDefault(require('@material-ui/core/Grid'));
var Paper = _interopDefault(require('@material-ui/core/Paper'));
var AddIcon = _interopDefault(require('@material-ui/icons/Add'));
var ArrowUpward = _interopDefault(require('@material-ui/icons/ArrowUpward'));
var ArrowDownward = _interopDefault(require('@material-ui/icons/ArrowDownward'));
var DeleteForever = _interopDefault(require('@material-ui/icons/DeleteForever'));
var VerticalAlignTop = _interopDefault(require('@material-ui/icons/VerticalAlignTop'));
var VerticalAlignBottom = _interopDefault(require('@material-ui/icons/VerticalAlignBottom'));
var Typography = _interopDefault(require('@material-ui/core/Typography'));
var Divider = _interopDefault(require('@material-ui/core/Divider'));
var Checkbox = _interopDefault(require('@material-ui/core/Checkbox'));
var FormControlLabel = _interopDefault(require('@material-ui/core/FormControlLabel'));
var List = _interopDefault(require('@material-ui/core/List'));
var ListItem = _interopDefault(require('@material-ui/core/ListItem'));
var ListItemIcon = _interopDefault(require('@material-ui/core/ListItemIcon'));
var ErrorIcon = _interopDefault(require('@material-ui/icons/Error'));
var ListItemText = _interopDefault(require('@material-ui/core/ListItemText'));
var styles = require('@material-ui/styles');
var FormControl = _interopDefault(require('@material-ui/core/FormControl'));
var FormHelperText = _interopDefault(require('@material-ui/core/FormHelperText'));
var Input = _interopDefault(require('@material-ui/core/Input'));
var InputLabel = _interopDefault(require('@material-ui/core/InputLabel'));
var core = require('@material-ui/core');
var FormGroup = _interopDefault(require('@material-ui/core/FormGroup'));
var Radio = _interopDefault(require('@material-ui/core/Radio'));
var RadioGroup = _interopDefault(require('@material-ui/core/RadioGroup'));
var Slider = _interopDefault(require('@material-ui/core/Slider'));
var styles$1 = require('@material-ui/core/styles');
var MenuItem = _interopDefault(require('@material-ui/core/MenuItem'));
var TextField = _interopDefault(require('@material-ui/core/TextField'));
var IconButton$1 = _interopDefault(require('@material-ui/core/IconButton'));
var DescriptionIcon = _interopDefault(require('@material-ui/icons/Description'));
var HighlightOffIcon = _interopDefault(require('@material-ui/icons/HighlightOff'));
var prettyBytes = _interopDefault(require('pretty-bytes'));

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

function _objectDestructuringEmpty(obj) {
  if (obj == null) throw new TypeError("Cannot destructure undefined");
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

var AddButton = function AddButton(props) {
  return React__default.createElement(Button, Object.assign({}, props, {
    color: "secondary"
  }), React__default.createElement(AddIcon, null), " ", reactIntl.useIntl().formatMessage({
    id: "kNLPWW",
    defaultMessage: [{
      "type": 0,
      "value": "Add Item"
    }]
  }));
};

var mappings = {
  remove: DeleteForever,
  plus: AddIcon,
  "arrow-up": ArrowUpward,
  "arrow-down": ArrowDownward,
  "double-arrow-up": VerticalAlignTop,
  "double-arrow-down": VerticalAlignBottom
};

var IconButton = function IconButton(props) {
  var icon = props.icon,
      iconProps = props.iconProps,
      otherProps = _objectWithoutPropertiesLoose(props, ["icon", "className", "iconProps"]);

  var IconComp = mappings[icon];
  return React__default.createElement(Button, Object.assign({}, otherProps, {
    variant: "outlined",
    size: "small"
  }), React__default.createElement(IconComp, Object.assign({
    alt: otherProps['aria-label']
  }, iconProps)));
};

var isMultiSelect = rjsfCore.utils.isMultiSelect,
    getDefaultRegistry = rjsfCore.utils.getDefaultRegistry;

var indentation = function indentation(element) {
  return element.indent;
};

var ArrayFieldTitle = function ArrayFieldTitle(_ref) {
  var schema = _ref.schema,
      idSchema = _ref.idSchema,
      title = _ref.title,
      required = _ref.required;

  if (!title) {
    return null;
  }

  var headerNumber = idSchema.$id.split('_').length + 1;
  var id = idSchema.$id + "__title"; // return <TitleField id={id} title={title} required={required} />;

  return React__default.createElement(Box, {
    id: id,
    mb: 1,
    mt: 1
  }, React__default.createElement(Typography, Object.assign({}, schema.items && schema.items.type === 'object' ? {
    component: headerNumber === 2 ? "h2" : "h3"
  } : {
    component: "p",
    'aria-hidden': true
  }, {
    variant: "subtitle1"
  }), title, required && React__default.createElement(React__default.Fragment, null, " *")), React__default.createElement(Divider, null));
};

var ArrayFieldDescription = function ArrayFieldDescription(_ref2) {
  var idSchema = _ref2.idSchema,
      description = _ref2.description;

  if (!description) {
    return null;
  }

  var id = rjsfCore.utils.descriptionId(idSchema.$id); //return <DescriptionField id={id} description={description} />;

  return React__default.createElement(Typography, {
    component: "p",
    variant: "subtitle2",
    id: id
  }, description);
}; // Used in the two templates


var DefaultArrayItem = function DefaultArrayItem(props) {
  var btnStyle = {
    flex: 1,
    paddingLeft: 3,
    paddingRight: 3,
    fontWeight: 'bold',
    minWidth: 0,
    marginLeft: 5,
    marginBottom: 10,
    borderRadius: 15,
    borderWidth: 2
  };
  var intl = reactIntl.useIntl();
  return React__default.createElement(Grid, {
    container: true,
    key: props.key,
    alignItems: "center"
  }, props.extraOptions && React__default.createElement(Grid, {
    container: true,
    style: {
      justifyContent: "flex-end"
    }
  }, React__default.createElement(Grid, {
    item: true
  }, React__default.createElement(Box, {
    mb: 2
  }, React__default.createElement(AddButton, {
    className: "array-item-add",
    onClick: props.onAddIndexClick(props.index),
    disabled: props.disabled || props.readonly
  })))), React__default.createElement(Grid, {
    item: true,
    xs: true
  }, React__default.createElement(Box, {
    mb: 2
  }, React__default.createElement(Paper, {
    elevation: 2
  }, React__default.createElement(Box, {
    p: 2
  }, props.children)))), props.hasToolbar && React__default.createElement(Grid, {
    item: true
  }, React__default.createElement(Grid, {
    container: true,
    direction: "column"
  }, (props.hasMoveUp || props.hasMoveDown) && props.extraOptions && React__default.createElement(IconButton, {
    icon: "double-arrow-up",
    className: "array-item-move-up",
    "aria-label": intl.formatMessage({
      id: "CEqozz",
      defaultMessage: [{
        "type": 0,
        "value": "Move first"
      }]
    }),
    //tabIndex={-1}
    style: btnStyle,
    iconProps: {
      fontSize: 'small'
    },
    disabled: props.disabled || props.readonly || !props.hasMoveUp,
    onClick: props.onReorderClick(props.index, 0)
  }), (props.hasMoveUp || props.hasMoveDown) && React__default.createElement(React__default.Fragment, null, React__default.createElement(IconButton, {
    icon: "arrow-up",
    className: "array-item-move-up",
    "aria-label": intl.formatMessage({
      id: "wmFdws",
      defaultMessage: [{
        "type": 0,
        "value": "Move up"
      }]
    }),
    //tabIndex={-1}
    style: btnStyle,
    iconProps: {
      fontSize: 'small'
    },
    disabled: props.disabled || props.readonly || !props.hasMoveUp,
    onClick: props.onReorderClick(props.index, props.index - 1)
  }), React__default.createElement(IconButton, {
    icon: "arrow-down",
    "aria-label": intl.formatMessage({
      id: "H/r5m6",
      defaultMessage: [{
        "type": 0,
        "value": "Move down"
      }]
    }),
    //tabIndex={-1}
    style: btnStyle,
    iconProps: {
      fontSize: 'small'
    },
    disabled: props.disabled || props.readonly || !props.hasMoveDown,
    onClick: props.onReorderClick(props.index, props.index + 1)
  })), (props.hasMoveUp || props.hasMoveDown) && props.extraOptions && React__default.createElement(IconButton, {
    icon: "double-arrow-down",
    className: "array-item-move-up",
    "aria-label": intl.formatMessage({
      id: "Q5rRZ3",
      defaultMessage: [{
        "type": 0,
        "value": "Move last"
      }]
    }),
    //tabIndex={-1}
    style: btnStyle,
    iconProps: {
      fontSize: 'small'
    },
    disabled: props.disabled || props.readonly || !props.hasMoveDown,
    onClick: props.onReorderClick(props.index, props.size - 1)
  }), props.hasRemove && React__default.createElement(IconButton, {
    icon: "remove",
    "aria-label": intl.formatMessage({
      id: "3dwSlf",
      defaultMessage: [{
        "type": 0,
        "value": "Remove item"
      }]
    }),
    //tabIndex={-1}
    style: btnStyle,
    iconProps: {
      fontSize: 'small'
    },
    disabled: props.disabled || props.readonly,
    onClick: props.onDropIndexClick(props.index)
  }))));
};

var DefaultFixedArrayFieldTemplate = function DefaultFixedArrayFieldTemplate(props) {
  return React__default.createElement("fieldset", {
    className: props.className
  }, React__default.createElement(ArrayFieldTitle, {
    key: "array-field-title-" + props.idSchema.$id,
    TitleField: props.TitleField,
    idSchema: props.idSchema,
    title: props.uiSchema['ui:title'] || props.title,
    required: props.required,
    schema: props.schema
  }), (props.uiSchema['ui:description'] || props.schema.description) && React__default.createElement(ArrayFieldDescription, {
    key: "array-field-description-" + props.idSchema.$id,
    idSchema: props.idSchema,
    description: props.uiSchema['ui:description'] || props.schema.description
  }), React__default.createElement("div", {
    className: "row array-item-list",
    key: "array-item-list-" + props.idSchema.$id
  }, props.items && props.items.map(function (p) {
    return DefaultArrayItem(_extends({}, p, {
      size: props.items.length,
      hasRemove: props.items.length > (props.schema.minItems ? props.schema.minItems : 0) && p.hasRemove,
      extraOptions: props.schema.extraListOptions
    }));
  })), props.canAdd && React__default.createElement(AddButton, {
    className: "array-item-add",
    onClick: props.onAddClick,
    disabled: props.disabled || props.readonly
  }));
};

var PaginationBar = function PaginationBar(props) {
  var currentPage = props.currentPage,
      pageAmount = props.pageAmount,
      setPage = props.setPage;
  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Button, {
    size: "large",
    style: {
      minWidth: 20,
      marginLeft: 20
    },
    disabled: currentPage === 0,
    onClick: function onClick() {
      return setPage(0);
    }
  }, '<<|'), React__default.createElement(Button, {
    size: "large",
    style: {
      minWidth: 20,
      marginLeft: 5
    },
    disabled: currentPage === 0,
    onClick: function onClick() {
      return setPage(currentPage - 1);
    }
  }, '<|'), Array.from({
    length: pageAmount
  }, function (_, i) {
    return i;
  }).map(function (i) {
    return React__default.createElement(Button, {
      size: "large",
      style: {
        minWidth: 40,
        marginLeft: 5
      },
      disabled: i === currentPage,
      onClick: function onClick() {
        return setPage(i);
      }
    }, i + 1);
  }), React__default.createElement(Button, {
    size: "large",
    style: {
      minWidth: 20,
      marginLeft: 5
    },
    disabled: currentPage === pageAmount - 1,
    onClick: function onClick() {
      return setPage(currentPage + 1);
    }
  }, '|>'), React__default.createElement(Button, {
    size: "large",
    style: {
      minWidth: 20,
      marginLeft: 5
    },
    disabled: currentPage === pageAmount - 1,
    onClick: function onClick() {
      return setPage(pageAmount - 1);
    }
  }, '|>>'));
};

var DefaultNormalArrayFieldTemplate = function DefaultNormalArrayFieldTemplate(props) {
  var intl = reactIntl.useIntl();
  var paginated = props.schema.items.pagination !== undefined ? props.schema.items.pagination : false;

  var _useState = React.useState([]),
      visibleItems = _useState[0],
      setVisibleItems = _useState[1];

  var _useState2 = React.useState(localStorage.getItem('formulaDisablePagination') === 'true'),
      disablePagination = _useState2[0],
      setDisablePagination = _useState2[1];

  var _useState3 = React.useState(0),
      page = _useState3[0],
      setPage = _useState3[1];

  var _useState4 = React.useState(localStorage.getItem('formulaPaginationElements') ? Number(localStorage.getItem('formulaPaginationElements')) : 5),
      elementsPerPage = _useState4[0],
      setElementsPerPage = _useState4[1];

  var _useState5 = React.useState(paginated ? Math.ceil(props.items.length / elementsPerPage) : 1),
      pageAmount = _useState5[0],
      setPageAmount = _useState5[1];

  var _useState6 = React.useState(false),
      scrollIntoView = _useState6[0],
      setScrollIntoView = _useState6[1];

  React.useEffect(function () {
    if (visibleItems && visibleItems.length > 0 && scrollIntoView) {
      // @ts-ignore
      var firstElement = document.getElementById(props.idSchema.$id + '__title');
      firstElement.focus();
      firstElement.scrollIntoView({
        behavior: 'smooth'
      });
      setScrollIntoView(false);
    }
  }, [visibleItems]);
  React.useEffect(function () {
    if (page > props.items.length / elementsPerPage && page > -1) {
      setPage(Math.floor(props.items.length / elementsPerPage));
    } else if (page > -1) {
      // @ts-ignore
      setVisibleItems(props.items.slice(elementsPerPage * page, elementsPerPage * page + elementsPerPage));
    }
  }, [page, props.items, elementsPerPage]);
  React.useEffect(function () {
    setPageAmount(paginated ? Math.ceil(props.items.length / elementsPerPage) : 1);
  }, [props.items, elementsPerPage]);

  var handlePageChange = function handlePageChange(pageNumber) {
    setPage(pageNumber);
    setScrollIntoView(true);
  };

  var handleSetElementsPerPage = function handleSetElementsPerPage(amount) {
    localStorage.setItem('formulaPaginationElements', amount.toString());
    setElementsPerPage(amount);
  };

  var handleDisablePagination = function handleDisablePagination(event) {
    localStorage.setItem('formulaDisablePagination', event.target.checked ? "true" : "false");
    setDisablePagination(event.target.checked);
  };

  return React__default.createElement(Paper, {
    elevation: 2
  }, React__default.createElement(Box, {
    p: 2
  }, React__default.createElement(ArrayFieldTitle, {
    key: "array-field-title-" + props.idSchema.$id,
    TitleField: props.TitleField,
    idSchema: props.idSchema,
    title: props.uiSchema['ui:title'] || props.title,
    required: props.required,
    schema: props.schema
  }), (props.uiSchema['ui:description'] || props.schema.description) && React__default.createElement(ArrayFieldDescription, {
    key: "array-field-description-" + props.idSchema.$id,
    idSchema: props.idSchema,
    description: props.uiSchema['ui:description'] || props.schema.description
  }), paginated && !disablePagination && pageAmount > 1 && React__default.createElement(PaginationBar, {
    currentPage: page,
    pageAmount: pageAmount,
    setPage: handlePageChange
  }), React__default.createElement(Grid, {
    container: true,
    key: "array-item-list-" + props.idSchema.$id
  }, paginated && !disablePagination && visibleItems && visibleItems.map(function (p) {
    return DefaultArrayItem( // @ts-ignore
    _extends({}, p, {
      size: props.items.length,
      hasRemove: props.items.length > (props.schema.minItems ? props.schema.minItems : 0) && p.hasRemove,
      extraOptions: props.schema.extraListOptions
    }));
  }), !(paginated && !disablePagination) && props.items && props.items.map(function (p) {
    return DefaultArrayItem(_extends({}, p, {
      size: props.items.length,
      hasRemove: props.items.length > (props.schema.minItems ? props.schema.minItems : 0) && p.hasRemove,
      extraOptions: props.schema.extraListOptions
    }));
  }), props.canAdd && React__default.createElement(Grid, {
    container: true,
    style: {
      justifyContent: "flex-end"
    }
  }, React__default.createElement(Grid, {
    item: true
  }, React__default.createElement(Box, {
    mt: 2
  }, React__default.createElement(AddButton, {
    className: "array-item-add",
    onClick: paginated && !disablePagination && props.items.length > 0 ? function () {
      props.items[0].onAddIndexClick((page + 1) * elementsPerPage)();

      if (page + 1 < pageAmount || props.items.length - (page + 1) * elementsPerPage >= 0) {
        setScrollIntoView(true);
        setPage(page + 1);
      }
    } : props.onAddClick,
    disabled: props.disabled || props.readonly
  })))))), paginated && !disablePagination && pageAmount > 1 && React__default.createElement(PaginationBar, {
    currentPage: page,
    pageAmount: pageAmount,
    setPage: handlePageChange
  }), paginated && !disablePagination && React__default.createElement("p", {
    style: {
      paddingLeft: 20
    }
  }, intl.formatMessage({
    id: "vJPbhT",
    defaultMessage: [{
      "type": 0,
      "value": "Elements per page:"
    }]
  }), [5, 10, 15].map(function (i) {
    return React__default.createElement(Button, {
      size: "small",
      style: {
        minWidth: 1,
        maxWidth: 30,
        borderRadius: 32,
        marginLeft: 5
      },
      variant: "outlined",
      disabled: i === elementsPerPage,
      onClick: function onClick() {
        return handleSetElementsPerPage(i);
      }
    }, i);
  })), paginated && React__default.createElement(FormControlLabel, {
    style: {
      paddingLeft: 20,
      paddingBottom: 15
    },
    control: React__default.createElement(Checkbox, {
      checked: disablePagination,
      onChange: handleDisablePagination
    }),
    label: intl.formatMessage({
      id: "FsKJR1",
      defaultMessage: [{
        "type": 0,
        "value": "Disable pagination"
      }]
    })
  }));
};

var ArrayFieldTemplate = function ArrayFieldTemplate(props) {
  var schema = props.schema,
      _props$registry = props.registry,
      registry = _props$registry === void 0 ? getDefaultRegistry() : _props$registry,
      uiSchema = props.uiSchema;
  return React__default.createElement(Box, {
    pl: uiSchema.items && uiSchema.items['ui:options'] && indentation(uiSchema.items['ui:options'].element) ? 3 * indentation(uiSchema.items['ui:options'].element) : 0
  }, isMultiSelect(schema, registry.rootSchema) ? React__default.createElement(DefaultFixedArrayFieldTemplate, Object.assign({}, props)) : React__default.createElement(DefaultNormalArrayFieldTemplate, Object.assign({}, props)));
};

var ErrorList = function ErrorList(_ref) {
  var errors = _ref.errors,
      uiSchema = _ref.uiSchema;
  var intl = reactIntl.useIntl();
  var uiOrder = uiSchema['ui:order'] || []; //Sorted array of errors according to uiOrder for correct error message order

  var newErrors = errors.map(function (error) {
    var newError = _extends({}, error); // Get content from inside the first square brackets


    var match = newError.property ? newError.property.match(/\[(.*?)\]/) : undefined;

    if (match) {
      // Remove single quotes
      newError.property = match[1].replace(/'/g, '');
    } // If property starts with a dot and is not a number, remove dot and keep the rest, done for ex .autofill_age
    else if (/^\./.test(newError.property)) {
        newError.property = newError.property.replace('.', '');
      }

    return newError; // Sort list of newErrors according to uiOrder
  }).sort(function (a, b) {
    var indexA = uiOrder.indexOf(a.property);
    var indexB = uiOrder.indexOf(b.property);
    return indexA - indexB;
  });
  return React__default.createElement(Paper, {
    elevation: 2
  }, React__default.createElement(Box, {
    id: "formula-validation-errors",
    mb: 2,
    p: 2
  }, uiSchema.formWithSteps ? React__default.createElement(Typography, {
    component: "h4",
    variant: "h6",
    role: "alert"
  }, intl.formatMessage({
    id: "9XTsp0",
    defaultMessage: [{
      "type": 0,
      "value": "Invalid inputs"
    }]
  })) : React__default.createElement(Typography, {
    component: "h2",
    variant: "h6",
    role: "alert"
  }, intl.formatMessage({
    id: "9XTsp0",
    defaultMessage: [{
      "type": 0,
      "value": "Invalid inputs"
    }]
  })), React__default.createElement(List, {
    dense: true,
    role: "alert"
  }, newErrors.map(function (error, i) {
    return React__default.createElement(ListItem, {
      key: i
    }, React__default.createElement(ListItemIcon, null, React__default.createElement(ErrorIcon, {
      color: "error"
    })), React__default.createElement(ListItemText, {
      primary: error.stack
    }));
  }))));
};

var useStyles =
/*#__PURE__*/
styles.makeStyles({
  root: {
    marginTop: 5
  }
});

var DescriptionField = function DescriptionField(_ref) {
  var description = _ref.description;

  if (description) {
    var classes = useStyles();
    return React__default.createElement(Typography, {
      component: "span",
      variant: "subtitle2",
      className: classes.root
    }, description);
  }

  return null;
};

var TitleField = function TitleField(_ref) {
  var title = _ref.title;
  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Box, {
    mb: 1,
    mt: 1
  }, React__default.createElement(Typography, {
    component: "h2",
    variant: "h5"
  }, title), React__default.createElement(Divider, null)));
};

var Fields = {
  DescriptionField: DescriptionField,
  TitleField: TitleField
};

var ADDITIONAL_PROPERTY_FLAG = rjsfCore.utils.ADDITIONAL_PROPERTY_FLAG;

var WrapIfAdditional = function WrapIfAdditional(_ref) {
  var children = _ref.children,
      disabled = _ref.disabled,
      id = _ref.id,
      label = _ref.label,
      uiSchema = _ref.uiSchema,
      onDropPropertyClick = _ref.onDropPropertyClick,
      onKeyChange = _ref.onKeyChange,
      readonly = _ref.readonly,
      required = _ref.required,
      schema = _ref.schema;
  var keyLabel = label + " Key"; // i18n ?

  var additional = schema.hasOwnProperty(ADDITIONAL_PROPERTY_FLAG);
  var btnStyle = {
    flex: 1,
    paddingLeft: 6,
    paddingRight: 6,
    fontWeight: "bold"
  };

  if (!additional) {
    return React__default.createElement(React__default.Fragment, null, children);
  }

  var handleBlur = function handleBlur(_ref2) {
    var target = _ref2.target;
    return onKeyChange(target.value);
  };

  return React__default.createElement(Grid, {
    container: true,
    key: id + "-key",
    alignItems: "center",
    spacing: 2
  }, React__default.createElement(Grid, {
    item: true,
    xs: true
  }, React__default.createElement(FormControl, {
    fullWidth: true,
    required: required
  }, React__default.createElement(InputLabel, null, keyLabel), React__default.createElement(Input, {
    defaultValue: label,
    disabled: disabled || readonly,
    id: id + "-key",
    name: id + "-key",
    onBlur: !readonly ? handleBlur : undefined,
    type: "text",
    "aria-describedby": rjsfCore.utils.ariaDescribedBy(id, uiSchema)
  }))), React__default.createElement(Grid, {
    item: true,
    xs: true
  }, children), React__default.createElement(Grid, {
    item: true
  }, React__default.createElement(IconButton, {
    icon: "remove",
    tabIndex: -1,
    style: btnStyle,
    disabled: disabled || readonly,
    onClick: onDropPropertyClick(label)
  })));
};

var showTitle = function showTitle(schema, uiSchema) {
  if (schema.type === 'array') {
    return schema.items.type !== 'object' && (schema.items["enum"] || schema.items.enumNames);
  } else if (uiSchema['ui:options'].element.type === 'dateRange' && uiSchema['ui:options'].element.list === false) {
    return uiSchema['ui:options'].element.title || uiSchema['ui:options'].element.label;
  } else if (uiSchema['ui:widget'] === 'checkbox' || schema.type === 'boolean' && uiSchema['ui:widget'] !== 'radio' || uiSchema['ui:options'].element.type === 'button') {
    return false;
  }

  return schema.format === 'table' || schema.format === 'confirmField' || !(schema.type === 'object' || schema.type === 'string' && schema.title === undefined);
};

var getLabel = function getLabel(uiSchema, defaultLabel) {
  if (uiSchema['ui:options'] && uiSchema['ui:options'].element) {
    var _uiSchema$uiOptions$ = uiSchema['ui:options'].element,
        useLabel = _uiSchema$uiOptions$.useLabel,
        label = _uiSchema$uiOptions$.label,
        title = _uiSchema$uiOptions$.title;
    return useLabel ? label : title;
  }

  return defaultLabel;
};

var indentation$1 = function indentation(element) {
  if (element.list || !element.list && element.listItem) {
    return 0;
  }

  return element.indent;
};

var ErrorList$1 = function ErrorList(props) {
  var id = props.id,
      errors = props.errors;
  return React__default.createElement(List, {
    id: rjsfCore.utils.errorsId(id),
    dense: true,
    disablePadding: true
  }, errors.map(function (error, i) {
    return React__default.createElement(ListItem, {
      key: i,
      disableGutters: true
    }, React__default.createElement(FormHelperText, null, error));
  }));
};

var FieldTemplate = function FieldTemplate(_ref) {
  var id = _ref.id,
      children = _ref.children,
      classNames = _ref.classNames,
      disabled = _ref.disabled,
      hidden = _ref.hidden,
      label = _ref.label,
      onDropPropertyClick = _ref.onDropPropertyClick,
      onKeyChange = _ref.onKeyChange,
      readonly = _ref.readonly,
      required = _ref.required,
      _ref$rawErrors = _ref.rawErrors,
      rawErrors = _ref$rawErrors === void 0 ? [] : _ref$rawErrors,
      rawHelp = _ref.rawHelp,
      rawDescription = _ref.rawDescription,
      schema = _ref.schema,
      uiSchema = _ref.uiSchema;

  if (hidden) {
    return null;
  }

  var type = schema.type;

  var dateRange = function dateRange(schema) {
    if (schema.properties.start) {
      return true;
    } else {
      return false;
    }
  };

  var displayLabel = function displayLabel(uiSchema) {
    if (uiSchema['ui:options'].element.description) {
      return true;
    } else {
      return false;
    }
  };

  return React__default.createElement(Box, {
    pl: uiSchema['ui:options'] && indentation$1(uiSchema['ui:options'].element) ? 3 * indentation$1(uiSchema['ui:options'].element) : 0
  }, React__default.createElement(WrapIfAdditional, {
    classNames: classNames,
    disabled: disabled,
    id: id,
    uiSchema: uiSchema,
    label: label,
    onDropPropertyClick: onDropPropertyClick,
    onKeyChange: onKeyChange,
    readonly: readonly,
    required: required,
    schema: schema
  }, React__default.createElement(FormControl, {
    fullWidth: true,
    error: rawErrors.length ? true : false,
    required: required
  }, showTitle(schema, uiSchema) && getLabel(uiSchema, label) && getLabel(uiSchema, label).trim() !== '' ? React__default.createElement(Typography, {
    "aria-hidden": true,
    component: "p",
    variant: "subtitle1"
  }, getLabel(uiSchema, label), required && " *") : null, displayLabel && rawDescription && (schema.type !== 'boolean' || uiSchema['ui:widget'] === 'radio') ? React__default.createElement(Typography, {
    id: rjsfCore.utils.descriptionId(id),
    variant: "caption",
    color: "textSecondary"
  }, rawDescription) : null, rawErrors.length > 0 && type === 'object' && !dateRange(schema) && React__default.createElement(ErrorList$1, {
    id: id,
    errors: rawErrors
  }), children, rawErrors.length > 0 && (type !== 'object' || dateRange(schema)) && React__default.createElement(ErrorList$1, {
    id: id,
    errors: rawErrors
  }), rawHelp && React__default.createElement(FormHelperText, {
    id: rjsfCore.utils.helpId(id)
  }, rawHelp))));
};

var canExpand = rjsfCore.utils.canExpand;
var useStyles$1 =
/*#__PURE__*/
styles.makeStyles({
  root: {
    marginTop: 10
  }
});

var ObjectFieldTemplate = function ObjectFieldTemplate(_ref) {
  var DescriptionField = _ref.DescriptionField,
      description = _ref.description,
      title = _ref.title,
      properties = _ref.properties,
      disabled = _ref.disabled,
      readonly = _ref.readonly,
      uiSchema = _ref.uiSchema,
      idSchema = _ref.idSchema,
      schema = _ref.schema,
      formData = _ref.formData,
      onAddClick = _ref.onAddClick;
  var classes = useStyles$1();
  var isInArray = schema.originalConfig ? schema.originalConfig.listItem : false;
  return React__default.createElement(React__default.Fragment, null, (uiSchema['ui:title'] || title) && !isInArray && React__default.createElement(Box, {
    id: idSchema.$id + "-title",
    mb: 1,
    mt: 1
  }, React__default.createElement(Typography, {
    component: idSchema.$id === 'root' ? 'h2' : 'h3',
    variant: "subtitle1",
    style: {
      fontSize: 18
    }
  }, title), React__default.createElement(Divider, null)), description && React__default.createElement(DescriptionField, {
    id: idSchema.$id + "-description",
    description: description
  }), React__default.createElement(Grid, {
    container: true,
    spacing: 2,
    className: classes.root
  }, properties.map(function (element, index) {
    return (// Remove the <Grid> if the inner element is hidden as the <Grid>
      // itself would otherwise still take up space.
      element.hidden ? element.content : React__default.createElement(Grid, {
        item: true,
        xs: 12,
        key: index,
        style: {
          marginBottom: "10px"
        }
      }, element.content)
    );
  }), canExpand(schema, uiSchema, formData) && React__default.createElement(Grid, {
    container: true,
    style: {
      justifyContent: 'flex-end'
    }
  }, React__default.createElement(Grid, {
    item: true
  }, React__default.createElement(AddButton, {
    className: 'object-property-expand',
    onClick: onAddClick(schema),
    disabled: disabled || readonly
  })))));
};

var CheckboxWidget = function CheckboxWidget(props) {
  var id = props.id,
      value = props.value,
      disabled = props.disabled,
      readonly = props.readonly,
      autofocus = props.autofocus,
      onChange = props.onChange,
      onBlur = props.onBlur,
      onFocus = props.onFocus,
      options = props.options,
      required = props.required,
      rawErrors = props.rawErrors;

  var _onChange = function _onChange(_ref, checked) {
    _objectDestructuringEmpty(_ref);

    return onChange(checked);
  };

  var _onBlur = function _onBlur(_ref2) {
    var value = _ref2.target.value;
    return onBlur(id, value);
  };

  var _onFocus = function _onFocus(_ref3) {
    var value = _ref3.target.value;
    return onFocus(id, value);
  };

  return React__default.createElement(React__default.Fragment, null, options.description && React__default.createElement(core.FormHelperText, {
    id: id + "__description"
  }, options.description), React__default.createElement(FormControlLabel, {
    control: React__default.createElement(Checkbox, {
      id: id,
      checked: typeof value === "undefined" ? false : value,
      required: required,
      disabled: disabled || readonly,
      autoFocus: autofocus,
      onChange: _onChange,
      onBlur: _onBlur,
      onFocus: _onFocus,
      inputProps: {
        'aria-describedby': rjsfCore.utils.ariaDescribedBy(id, {
          'ui:options': {
            element: props.options
          }
        }, rawErrors)
      }
    }),
    "aria-label": rjsfCore.utils.generateAriaLabel(props.label, options, required),
    label: React__default.createElement("span", null, props.label, required && " *")
  }));
};

var getScore = function getScore(choices, value) {
  var choice = choices.find(function (choice) {
    return choice["enum"] === value;
  });

  if (!choice) {
    choice = choices[Number(value)];
  }

  return choice && choice.meta ? choice.meta.score : undefined;
};

var getScores = function getScores(choices, value) {
  if (value.length > 0) {
    var choiceString = value.map(function (item) {
      return getScore(choices, item);
    });
    choiceString = choiceString.filter(function (value) {
      return value !== undefined;
    });
    return choiceString.length > 0 ? choiceString.join(', ') : '';
  } else {
    return "";
  }
};

var selectValue = function selectValue(value, selected, all) {
  var at = all.indexOf(value);
  var updated = selected.slice(0, at).concat(value, selected.slice(at)); // As inserting values at predefined index positions doesn't work with empty
  // arrays, we need to reorder the updated selection to match the initial order

  return updated.sort(function (a, b) {
    return all.indexOf(a) > all.indexOf(b);
  });
};

var deselectValue = function deselectValue(value, selected) {
  return selected.filter(function (v) {
    return v !== value;
  });
};

var CheckboxesWidget = function CheckboxesWidget(_ref) {
  var id = _ref.id,
      disabled = _ref.disabled,
      label = _ref.label,
      required = _ref.required,
      options = _ref.options,
      value = _ref.value,
      autofocus = _ref.autofocus,
      readonly = _ref.readonly,
      onChange = _ref.onChange,
      onBlur = _ref.onBlur,
      onFocus = _ref.onFocus,
      rawErrors = _ref.rawErrors;
  var enumOptions = options.enumOptions,
      enumDisabled = options.enumDisabled,
      inline = options.inline,
      showScore = options.showScore,
      element = options.element;
  var rawChoices = element ? options.element.choices : [];

  var _onChange = function _onChange(option) {
    return function (_ref2) {
      var checked = _ref2.target.checked;
      var all = enumOptions.map(function (_ref3) {
        var value = _ref3.value;
        return value;
      });

      if (checked) {
        onChange(selectValue(option.value, value, all));
      } else {
        onChange(deselectValue(option.value, value));
      }
    };
  };

  var _onBlur = function _onBlur(_ref4) {
    var value = _ref4.target.value;
    return onBlur(id, value);
  };

  var _onFocus = function _onFocus(_ref5) {
    var value = _ref5.target.value;
    return onFocus(id, value);
  };

  var ariaDescribedby = rjsfCore.utils.ariaDescribedBy(id, {
    'ui:options': {
      element: options
    }
  }, rawErrors);
  return React__default.createElement("div", {
    style: {
      display: 'flex'
    }
  }, React__default.createElement("div", {
    style: {
      flex: '1 1'
    }
  }, React__default.createElement(FormControl, {
    component: "fieldset",
    "aria-describedby": ariaDescribedby
  }, React__default.createElement("legend", {
    style: {
      position: 'absolute',
      clip: 'rect(0,0,0,0)'
    }
  }, rjsfCore.utils.generateAriaLabel(label, options, required)), React__default.createElement(FormGroup, {
    row: !!inline
  }, enumOptions.map(function (option, index) {
    var checked = value.indexOf(option.value) !== -1;
    var itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) != -1;
    var checkbox = React__default.createElement(Checkbox, {
      id: id + "_" + index,
      checked: checked,
      disabled: disabled || itemDisabled || readonly,
      autoFocus: autofocus && index === 0,
      onChange: _onChange(option),
      onBlur: _onBlur,
      onFocus: _onFocus
    });
    return React__default.createElement(FormControlLabel, {
      control: checkbox,
      key: index,
      style: {
        marginTop: '6px'
      },
      label: option.label
    });
  })))), React__default.createElement("div", null, showScore && value && React__default.createElement(Typography, null, getScores(rawChoices, value))));
};

var ColorWidget = function ColorWidget(props) {
  var registry = props.registry;
  var TextWidget = registry.widgets.TextWidget;
  return React__default.createElement(TextWidget, Object.assign({
    type: "color"
  }, props));
};

var DateWidget = function DateWidget(props) {
  var registry = props.registry;
  var TextWidget = registry.widgets.TextWidget;
  return React__default.createElement(TextWidget, Object.assign({
    type: "date",
    InputLabelProps: {
      shrink: true
    }
  }, props));
};

var localToUTC = rjsfCore.utils.localToUTC,
    utcToLocal = rjsfCore.utils.utcToLocal;

var DateTimeWidget = function DateTimeWidget(props) {
  var registry = props.registry;
  var TextWidget = registry.widgets.TextWidget;
  var value = utcToLocal(props.value);

  var onChange = function onChange(value) {
    props.onChange(localToUTC(value));
  };

  return React__default.createElement(TextWidget, Object.assign({
    type: "datetime-local",
    InputLabelProps: {
      shrink: true
    }
  }, props, {
    value: value,
    onChange: onChange
  }));
};

var EmailWidget = function EmailWidget(props) {
  var registry = props.registry;
  var TextWidget = registry.widgets.TextWidget;
  return React__default.createElement(TextWidget, Object.assign({
    type: "email"
  }, props));
};

var PasswordWidget = function PasswordWidget(props) {
  var registry = props.registry;
  var TextWidget = registry.widgets.TextWidget;
  return React__default.createElement(TextWidget, Object.assign({
    type: "password"
  }, props));
};

var getScore$1 = function getScore(choices, value) {
  var choice = choices.find(function (choice) {
    return choice["enum"] === value;
  });

  if (!choice) {
    choice = choices[Number(value)];
  }

  return choice && choice.meta ? choice.meta.score : 0;
};

var RadioWidget = function RadioWidget(_ref) {
  var id = _ref.id,
      schema = _ref.schema,
      label = _ref.label,
      options = _ref.options,
      value = _ref.value,
      required = _ref.required,
      disabled = _ref.disabled,
      readonly = _ref.readonly,
      onChange = _ref.onChange,
      onBlur = _ref.onBlur,
      onFocus = _ref.onFocus,
      uiSchema = _ref.uiSchema,
      rawErrors = _ref.rawErrors;
  var enumOptions = options.enumOptions,
      enumDisabled = options.enumDisabled;

  var _onChange = function _onChange(_ref2, value) {
    _objectDestructuringEmpty(_ref2);

    return onChange(schema.type == "boolean" ? value !== "false" : value);
  };

  var _onBlur = function _onBlur(_ref3) {
    var value = _ref3.target.value;
    return onBlur(id, value);
  };

  var _onFocus = function _onFocus(_ref4) {
    var value = _ref4.target.value;
    return onFocus(id, value);
  };

  var row = options ? options.inline : false;
  var showScore = options ? options.showScore : false;
  var rawChoices = options && options.element ? options.element.choices : [];
  return React__default.createElement("div", {
    style: {
      display: 'flex'
    }
  }, React__default.createElement("div", {
    style: {
      flex: '1 1'
    }
  }, React__default.createElement(FormControl, {
    component: "fieldset",
    "aria-describedby": rjsfCore.utils.ariaDescribedBy(id, uiSchema, rawErrors)
  }, React__default.createElement("legend", {
    style: {
      position: 'absolute',
      clip: 'rect(0,0,0,0)'
    }
  }, rjsfCore.utils.generateAriaLabel(label, options, required)), schema.type === 'boolean' && React__default.createElement(core.FormHelperText, {
    component: "span"
  }, options.description), React__default.createElement(RadioGroup, {
    value: "" + value,
    row: row,
    onChange: _onChange,
    onBlur: _onBlur,
    onFocus: _onFocus
  }, enumOptions.map(function (option, i) {
    var itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) != -1;
    return React__default.createElement(FormControlLabel, {
      control: React__default.createElement(Radio, {
        color: "primary",
        key: i
      }),
      style: {
        marginTop: '6px'
      },
      label: "" + option.label,
      value: "" + option.value,
      key: i,
      disabled: disabled || itemDisabled || readonly
    });
  })))), showScore && value && React__default.createElement(Typography, null, getScore$1(rawChoices, value)));
};

var rangeSpec = rjsfCore.utils.rangeSpec;

var useStyles$2 = function useStyles(props) {
  return styles$1.makeStyles({
    slider: {
      marginTop: '45px',
      '& .MuiSlider-markLabel': {
        wordWrap: 'break-word',
        whiteSpace: 'normal',
        textAlign: 'center',
        width: props.markWidth + '%',
        '&[style="left: 0%;"]': {
          textAlign: 'left',
          transform: 'translateX(0%)'
        },
        '&[style="left: 100%;"]': {
          textAlign: 'right',
          transform: 'translateX(-100%)'
        }
      }
    },
    sliderRoot: {
      marginBottom: '45px'
    }
  });
};

var getScaleProps = function getScaleProps(options) {
  var scaleMarks = options.element.scaleMarks && options.element.scaleMarks[0] === undefined ? undefined : options.element.scaleMarks;
  return {
    widget: options.element.widget,
    scaleMarks: scaleMarks
  };
};

var calculateMultiplier = function calculateMultiplier(min, max, step) {
  var multiplier = 1;
  var range = max - min;
  var maxAmountOfMarks = 10;
  var amountOfMarks = range / step; // finds a multiplier for step so that there are not too many marks
  // and all marks are also valid values

  while (amountOfMarks >= maxAmountOfMarks) {
    multiplier++;

    if (range % (step * multiplier) === 0) {
      amountOfMarks = range / (step * multiplier);
    } else {
      if (multiplier / range > 0.5) {
        multiplier = -1;
        amountOfMarks = 0;
      }
    }
  }

  return multiplier;
  /*
  let multiplier = 1;
  let amountOfMarks = (max-min)/step;
     while (amountOfMarks >= 10) {
    multiplier++;
    if ((max-min)%(step*multiplier))
    amountOfMarks = (max-min)/(step*multiplier);
  }
     return multiplier;
  */
};

var generateWithMiddleMarks = function generateWithMiddleMarks(min, max, step) {
  var middleMarks = [];

  for (var i = min; i < max; i = i + step) {
    middleMarks.push({
      value: i,
      label: i.toString()
    });
  }

  middleMarks.push({
    value: max,
    label: max.toString()
  });
  return middleMarks;
};

var generateEndpointMarks = function generateEndpointMarks(min, max) {
  if (min === undefined || max === undefined) {
    return undefined;
  } else {
    return [{
      value: min,
      label: min.toString()
    }, {
      value: max,
      label: max.toString()
    }];
  }
};

var generateMarks = function generateMarks(min, max, step) {
  if (min === undefined || max === undefined) {
    return [];
  }

  var multiplier = calculateMultiplier(min, max, step ? step < 1 ? 0.5 : step : 1);

  if (multiplier > 0) {
    return generateWithMiddleMarks(min, max, (step ? step < 1 ? 0.5 : step : 1) * multiplier);
  }

  return generateEndpointMarks(min, max);
};

var RangeWidget = function RangeWidget(_ref) {
  var value = _ref.value,
      readonly = _ref.readonly,
      disabled = _ref.disabled,
      onBlur = _ref.onBlur,
      required = _ref.required,
      onFocus = _ref.onFocus,
      options = _ref.options,
      schema = _ref.schema,
      onChange = _ref.onChange,
      label = _ref.label,
      id = _ref.id,
      uiSchema = _ref.uiSchema,
      rawErrors = _ref.rawErrors;

  var sliderProps = _extends({
    value: value,
    label: label,
    id: id
  }, rangeSpec(schema));

  var scaleProps = options.element ? getScaleProps(options) : {
    widget: 'noScale',
    scaleMarks: undefined
  };

  var _onChange = function _onChange(_ref2, value) {
    _objectDestructuringEmpty(_ref2);

    return onChange(value === "" ? options.emptyValue : value);
  };

  var _onBlur = function _onBlur(_ref3) {
    var value = _ref3.target.value;
    return onBlur(id, value);
  };

  var _onFocus = function _onFocus(_ref4) {
    var value = _ref4.target.value;
    return onFocus(id, value);
  };

  var marks = scaleProps.widget === 'customScale' ? scaleProps.scaleMarks : scaleProps.widget === 'automaticScale' ? generateMarks(sliderProps.min, sliderProps.max, sliderProps.step) : generateEndpointMarks(sliderProps.min, sliderProps.max);
  var markWidth = marks && Array.isArray(marks) ? Math.floor(95 / marks.length) : 15;
  var classes = useStyles$2({
    markWidth: markWidth > 15 ? markWidth : 15
  })();
  return React__default.createElement("div", {
    className: classes.sliderRoot
  }, options.description && options.description !== "" && React__default.createElement(Typography, {
    id: rjsfCore.utils.descriptionId(id),
    variant: "caption",
    color: "textSecondary"
  }, options.description), React__default.createElement(Slider, Object.assign({
    className: classes.slider,
    "aria-label": rjsfCore.utils.generateAriaLabel(label, options, required),
    "aria-describedby": rjsfCore.utils.ariaDescribedBy(id, uiSchema, rawErrors),
    disabled: disabled || readonly,
    onChange: _onChange,
    onBlur: _onBlur,
    onFocus: _onFocus,
    valueLabelDisplay: "on",
    defaultValue: value && isNaN(value) && value !== "" ? value : sliderProps.min,
    marks: marks
  }, sliderProps)));
};

var useStyles$3 =
/*#__PURE__*/
styles$1.makeStyles({
  inputLabelRoot: {
    clip: "rect(0 0 0 0)",
    clipPath: "inset(50%)",
    height: 1,
    overflow: "hidden",
    position: "absolute",
    whiteSpace: "nowrap",
    width: 1
  },
  inputFormControl: {
    "label + &": {
      marginTop: 0
    }
  }
});
var asNumber = rjsfCore.utils.asNumber,
    guessType = rjsfCore.utils.guessType;
var nums =
/*#__PURE__*/
new Set(["number", "integer"]);
/**
 * This is a silly limitation in the DOM where option change event values are
 * always retrieved as strings.
 */

var processValue = function processValue(schema, value) {
  // "enum" is a reserved word, so only "type" and "items" can be destructured
  var type = schema.type,
      items = schema.items;

  if (value === "") {
    return undefined;
  } else if (type === "array" && items && nums.has(items.type)) {
    return value.map(asNumber);
  } else if (type === "boolean") {
    return value === "true";
  } else if (type === "number") {
    return asNumber(value);
  } // If type is undefined, but an enum is present, try and infer the type from
  // the enum values


  if (schema["enum"]) {
    if (schema["enum"].every(function (x) {
      return guessType(x) === "number";
    })) {
      return asNumber(value);
    } else if (schema["enum"].every(function (x) {
      return guessType(x) === "boolean";
    })) {
      return value === "true";
    }
  }

  return value;
};

var getScore$2 = function getScore(choices, value) {
  if (typeof value === 'string') {
    var choice = choices.find(function (choice) {
      return choice["enum"] === value;
    });

    if (!choice) {
      choice = choices[Number(value)];
    }

    return choice && choice.meta ? choice.meta.score : undefined;
  } else if (Array.isArray(value) && value.length > 0) {
    var choiceString = value.map(function (item) {
      return getScore(choices, item);
    });
    choiceString = choiceString.filter(function (value) {
      return value !== undefined;
    });
    return choiceString.length > 0 ? choiceString.join(', ') : '';
  } else {
    return '';
  }
};

var SelectWidget = function SelectWidget(_ref) {
  var schema = _ref.schema,
      id = _ref.id,
      options = _ref.options,
      label = _ref.label,
      required = _ref.required,
      disabled = _ref.disabled,
      readonly = _ref.readonly,
      value = _ref.value,
      multiple = _ref.multiple,
      autofocus = _ref.autofocus,
      onChange = _ref.onChange,
      onBlur = _ref.onBlur,
      onFocus = _ref.onFocus,
      _ref$rawErrors = _ref.rawErrors,
      rawErrors = _ref$rawErrors === void 0 ? [] : _ref$rawErrors;
  var enumOptions = options.enumOptions,
      enumDisabled = options.enumDisabled;
  var emptyValue = multiple ? [] : "";

  var _onChange = function _onChange(_ref2) {
    var value = _ref2.target.value;
    return onChange(processValue(schema, value));
  };

  var _onBlur = function _onBlur(_ref3) {
    var value = _ref3.target.value;
    return onBlur(id, processValue(schema, value));
  };

  var _onFocus = function _onFocus(_ref4) {
    var value = _ref4.target.value;
    return onFocus(id, processValue(schema, value));
  };

  var showScore = options ? options.showScore : false;
  var rawChoices = options && options.element ? options.element.choices : [];
  var classes = useStyles$3();
  return React__default.createElement("div", {
    style: {
      display: 'flex'
    }
  }, React__default.createElement("div", {
    style: {
      flex: '1 1'
    }
  }, React__default.createElement(TextField, {
    id: id,
    select: true,
    fullWidth: true,
    value: typeof value === "undefined" ? emptyValue : value,
    required: required,
    label: rjsfCore.utils.generateAriaLabel(label, options, required),
    disabled: disabled || readonly,
    autoFocus: autofocus,
    error: rawErrors.l