@kineticdata/react 5.1.2 → 6.0.0

package/lib/components/form/Form.models.js

@@ -1,7 +1,13 @@
-import { List, Map, OrderedMap, Record } from 'immutable';
-export var FormState = Record({
-  addFields: List(),
-  alterFields: Map(),
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormState = exports.Field = exports.FIELD_DEFAULT_VALUES = exports.DataSource = exports.DATA_SOURCE_STATUS = void 0;
+var _immutable = require("immutable");
+var FormState = (0, _immutable.Record)({
+  addFields: (0, _immutable.List)(),
+  alterFields: (0, _immutable.Map)(),
   bindings: {},
   callOnLoad: false,
   dataSources: null,
@@ -9,7 +15,7 @@ export var FormState = Record({
   fields: null,
   fieldsFn: null,
   formKey: null,
-  formOptions: Map(),
+  formOptions: (0, _immutable.Map)(),
   initialValuesFn: null,
   onError: null,
   onLoad: null,
@@ -17,12 +23,14 @@ export var FormState = Record({
   onSubmit: null,
   submitting: false
 });
-export var DATA_SOURCE_STATUS = {
+exports.FormState = FormState;
+var DATA_SOURCE_STATUS = {
   PENDING: 'PENDING',
   RESOLVED: 'RESOLVED',
   REJECTED: 'REJECTED'
 };
-export var DataSource = Record({
+exports.DATA_SOURCE_STATUS = DATA_SOURCE_STATUS;
+var DataSource = (0, _immutable.Record)({
   data: null,
   fn: null,
   params: null,
@@ -30,29 +38,34 @@ export var DataSource = Record({
   status: DATA_SOURCE_STATUS.PENDING,
   transform: null
 });
-export var FIELD_DEFAULT_VALUES = Map({
-  attributes: Map(),
+exports.DataSource = DataSource;
+var FIELD_DEFAULT_VALUES = (0, _immutable.Map)({
+  attributes: (0, _immutable.Map)(),
   checkbox: false,
-  'checkbox-multi': List(),
+  'checkbox-multi': (0, _immutable.List)(),
+  file: (0, _immutable.List)(),
+  'file-multi': (0, _immutable.List)(),
   form: null,
-  'form-multi': List(),
-  map: OrderedMap(),
-  'select-multi': List(),
+  'form-multi': (0, _immutable.List)(),
+  map: (0, _immutable.OrderedMap)(),
+  'select-multi': (0, _immutable.List)(),
   team: null,
-  'team-multi': List(),
-  'text-multi': List(),
+  'team-multi': (0, _immutable.List)(),
+  'text-multi': (0, _immutable.List)(),
   user: null,
-  'user-multi': List()
+  'user-multi': (0, _immutable.List)()
 });
-export var Field = Record({
+exports.FIELD_DEFAULT_VALUES = FIELD_DEFAULT_VALUES;
+var Field = (0, _immutable.Record)({
   constraint: null,
   constraintMessage: 'Invalid',
   dirty: false,
   enabled: true,
-  errors: List(),
-  eventHandlers: Map(),
+  errors: (0, _immutable.List)(),
+  eventHandlers: (0, _immutable.Map)(),
   focused: false,
-  functions: Map(),
+  form: null,
+  functions: (0, _immutable.Map)(),
   helpText: '',
   id: '',
   initialValue: null,
@@ -60,14 +73,14 @@ export var Field = Record({
   language: '',
   name: '',
   onChange: null,
-  options: List(),
+  options: (0, _immutable.List)(),
   pattern: null,
   patternMessage: 'Invalid format',
   placeholder: '',
-  renderAttributes: Map(),
+  renderAttributes: (0, _immutable.Map)(),
   required: false,
   requiredMessage: 'This field is required',
-  search: Map(),
+  search: (0, _immutable.Map)(),
   serialize: null,
   touched: false,
   "transient": false,
@@ -75,4 +88,5 @@ export var Field = Record({
   valid: true,
   value: null,
   visible: true
-});
+});
+exports.Field = Field;

package/lib/components/form/FormState.js

@@ -1,5 +1,10 @@
-import { connect } from '../../store';
+"use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormState = void 0;
+var _store = require("../../store");
 var selectFormState = function selectFormState(formState) {
   return {
     dirty: formState.fields.some(function (field) {
@@ -8,15 +13,13 @@ var selectFormState = function selectFormState(formState) {
     error: formState.error
   };
 };
-
 var mapStateToProps = function mapStateToProps(state, props) {
   return {
     formState: state.getIn(['forms', props.formKey], null)
   };
 };
-
 var FormStateComopnent = function FormStateComopnent(props) {
   return props.formState && props.children(selectFormState(props.formState));
 };
-
-export var FormState = connect(mapStateToProps)(FormStateComopnent);
+var FormState = (0, _store.connect)(mapStateToProps)(FormStateComopnent);
+exports.FormState = FormState;

package/lib/components/form/KitchenSinkForm.js

@@ -1,5 +1,11 @@
-import { generateForm } from './Form';
-export var KitchenSinkForm = generateForm({
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KitchenSinkForm = void 0;
+var _Form = require("./Form");
+var KitchenSinkForm = (0, _Form.generateForm)({
   dataSources: function dataSources() {
     return {};
   },
@@ -84,6 +90,67 @@ export var KitchenSinkForm = generateForm({
         type: 'checkbox',
         label: 'Checkbox 4',
         helpText: 'This is a checkbox with help text'
+      }, {
+        name: 'checkbox-multi1',
+        type: 'checkbox-multi',
+        label: 'Checkbox Multi 1',
+        options: [{
+          label: 'Circle',
+          value: 'circle'
+        }, {
+          label: 'Triangle',
+          value: 'triangle'
+        }, {
+          label: 'Square',
+          value: 'square'
+        }]
+      }, {
+        name: 'checkbox-multi2',
+        type: 'checkbox-multi',
+        label: 'Checkbox Multi 2',
+        required: true,
+        options: [{
+          label: 'Circle',
+          value: 'circle'
+        }, {
+          label: 'Triangle',
+          value: 'triangle'
+        }, {
+          label: 'Square',
+          value: 'square'
+        }]
+      }, {
+        name: 'checkbox-multi3',
+        type: 'checkbox-multi',
+        label: 'Checkbox Multi 3',
+        enabled: false,
+        initialValue: 'triangle',
+        options: [{
+          label: 'Circle',
+          value: 'circle'
+        }, {
+          label: 'Triangle',
+          value: 'triangle'
+        }, {
+          label: 'Square',
+          value: 'square'
+        }]
+      }, {
+        name: 'checkbox-multi4',
+        type: 'checkbox-multi',
+        label: 'Checkbox Multi 4',
+        helpText: 'Help Text',
+        placeholder: 'Placeholder',
+        options: [{
+          label: 'Circle',
+          value: 'circle'
+        }, {
+          label: 'Triangle',
+          value: 'triangle'
+        }, {
+          label: 'Square',
+          value: 'square'
+        }]
       }, {
         name: 'code1',
         type: 'code',
@@ -146,6 +213,48 @@ export var KitchenSinkForm = generateForm({
         label: 'Code 4',
         language: 'js-template',
         helpText: 'Help Text'
+      }, {
+        name: 'date1',
+        type: 'date',
+        label: 'Date 1'
+      }, {
+        name: 'date2',
+        type: 'date',
+        label: 'Date 2',
+        required: true
+      }, {
+        name: 'date3',
+        type: 'date',
+        label: 'Date 3',
+        enabled: false,
+        initialValue: '1999-12-31'
+      }, {
+        name: 'date4',
+        type: 'date',
+        label: 'Date 4',
+        helpText: 'Help Text',
+        placeholder: 'Placeholder'
+      }, {
+        name: 'datetime1',
+        type: 'datetime',
+        label: 'Date-Time 1'
+      }, {
+        name: 'datetime2',
+        type: 'datetime',
+        label: 'Date-Time 2',
+        required: true
+      }, {
+        name: 'datetime3',
+        type: 'datetime',
+        label: 'Date-Time 3',
+        enabled: false,
+        initialValue: '1999-12-31T23:59'
+      }, {
+        name: 'datetime4',
+        type: 'datetime',
+        label: 'Date-Time 4',
+        helpText: 'Help Text',
+        placeholder: 'Placeholder'
       }, {
         name: 'form1',
         type: 'form',
@@ -460,7 +569,7 @@ export var KitchenSinkForm = generateForm({
         type: 'select-multi',
         label: 'Select Multi 3',
         enabled: false,
-        initialValue: ['circle', 'triangle'],
+        // initialValue: ['circle', 'triangle'],
         options: [{
           label: 'Circle',
           value: 'circle'
@@ -574,6 +683,27 @@ export var KitchenSinkForm = generateForm({
         label: 'Text Multi 4',
         helpText: 'Help Text',
         placeholder: 'Placeholder'
+      }, {
+        name: 'time1',
+        type: 'time',
+        label: 'Time 1'
+      }, {
+        name: 'time2',
+        type: 'time',
+        label: 'Time 2',
+        required: true
+      }, {
+        name: 'time3',
+        type: 'time',
+        label: 'Time 3',
+        enabled: false,
+        initialValue: '23:59'
+      }, {
+        name: 'time4',
+        type: 'time',
+        label: 'Time 4',
+        helpText: 'Help Text',
+        placeholder: 'Placeholder'
       }, {
         name: 'user1',
         type: 'user',
@@ -634,4 +764,5 @@ export var KitchenSinkForm = generateForm({
       });
     };
   }
-});
+});
+exports.KitchenSinkForm = KitchenSinkForm;

package/lib/components/form/defaults/AttributesField.js

@@ -1,36 +1,36 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React, { Component, Fragment } from 'react';
-import { List, Map, Repeat } from 'immutable';
-export var AttributesField = /*#__PURE__*/function (_Component) {
-  _inherits(AttributesField, _Component);
-
-  var _super = _createSuper(AttributesField);
-
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AttributesField = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createSuper"));
+var _react = _interopRequireWildcard(require("react"));
+var _immutable = require("immutable");
+var AttributesField = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(AttributesField, _Component);
+  var _super = (0, _createSuper2["default"])(AttributesField);
   function AttributesField(props) {
     var _this;
-
-    _classCallCheck(this, AttributesField);
-
+    (0, _classCallCheck2["default"])(this, AttributesField);
     _this = _super.call(this, props);
-
     _this.countPrevious = function (name) {
       return _this.props.value.get(name).size - _this.countAdded(name);
     };
-
     _this.countAdded = function (name) {
       return _this.state.added.filter(function (n) {
         return n === name;
       }).size;
     };
-
     _this.onRemove = function (name, index) {
       return function () {
         var addedIndex = index - _this.countPrevious(name);
-
         if (addedIndex >= 0) {
           _this.setState(function (state) {
             return {
@@ -40,15 +40,12 @@ export var AttributesField = /*#__PURE__*/function (_Component) {
             };
           });
         }
-
         _this.props.onChange(_this.props.value.deleteIn([name, index]));
       };
     };
-
     _this.onInputChange = function (name, index) {
       return function (event) {
         var value = event.target.value;
-
         if (!_this.props.value.hasIn([name, index])) {
           _this.setState(function (state) {
             return {
@@ -57,34 +54,30 @@ export var AttributesField = /*#__PURE__*/function (_Component) {
             };
           });
         }
-
-        _this.props.onChange(_this.props.value.update(name, List(), function (values) {
+        _this.props.onChange(_this.props.value.update(name, (0, _immutable.List)(), function (values) {
           return values.set(index, value);
         }));
       };
     };
-
     _this.onSelectChange = function (event) {
       _this.setState({
         adding: event.target.value
       });
     };
-
     _this.state = {
-      added: List(),
+      added: (0, _immutable.List)(),
       adding: ''
     };
     return _this;
-  } // returns the number of attribute values that were previously set
-
+  }
 
-  _createClass(AttributesField, [{
+  // returns the number of attribute values that were previously set
+  (0, _createClass2["default"])(AttributesField, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var attributes = mapWithOccurrences(this.props.value.keySeq().sort().flatMap(function (name) {
-        return Repeat(name, _this2.countPrevious(name));
+        return (0, _immutable.Repeat)(name, _this2.countPrevious(name));
       }).concat(this.state.added.push(this.state.adding)), function (name, index) {
         return {
           name: name,
@@ -92,31 +85,31 @@ export var AttributesField = /*#__PURE__*/function (_Component) {
           value: _this2.props.value.getIn([name, index], '')
         };
       });
-      return this.props.visible && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("h5", null, this.props.label), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Name"), /*#__PURE__*/React.createElement("th", null, "Value"), /*#__PURE__*/React.createElement("th", null))), /*#__PURE__*/React.createElement("tbody", null, attributes.size === 1 && this.props.placeholder && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+      return this.props.visible && /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("h5", null, this.props.label), /*#__PURE__*/_react["default"].createElement("table", null, /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("th", null, "Name"), /*#__PURE__*/_react["default"].createElement("th", null, "Value"), /*#__PURE__*/_react["default"].createElement("th", null))), /*#__PURE__*/_react["default"].createElement("tbody", null, attributes.size === 1 && this.props.placeholder && /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
         colSpan: 3
-      }, /*#__PURE__*/React.createElement("em", null, this.props.placeholder))), attributes.map(function (_ref, i) {
+      }, /*#__PURE__*/_react["default"].createElement("em", null, this.props.placeholder))), attributes.map(function (_ref, i) {
         var name = _ref.name,
-            value = _ref.value,
-            index = _ref.index;
-        return /*#__PURE__*/React.createElement("tr", {
+          value = _ref.value,
+          index = _ref.index;
+        return /*#__PURE__*/_react["default"].createElement("tr", {
           key: i
-        }, /*#__PURE__*/React.createElement("td", null, i < attributes.size - 1 ? name : /*#__PURE__*/React.createElement("select", {
+        }, /*#__PURE__*/_react["default"].createElement("td", null, i < attributes.size - 1 ? name : /*#__PURE__*/_react["default"].createElement("select", {
           onChange: _this2.onSelectChange,
           value: name
-        }, /*#__PURE__*/React.createElement("option", {
+        }, /*#__PURE__*/_react["default"].createElement("option", {
           hidden: true
         }), availableAttributes(_this2.props.options, _this2.props.value).map(function (option) {
-          return /*#__PURE__*/React.createElement("option", {
+          return /*#__PURE__*/_react["default"].createElement("option", {
             key: option,
             value: option
           }, option);
-        }))), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("input", {
+        }))), /*#__PURE__*/_react["default"].createElement("td", null, /*#__PURE__*/_react["default"].createElement("input", {
           type: "text",
           value: value,
           onFocus: _this2.props.onFocus,
           onBlur: _this2.props.onBlur,
           onChange: _this2.onInputChange(name, index)
-        })), /*#__PURE__*/React.createElement("td", null, i < attributes.size - 1 && /*#__PURE__*/React.createElement("button", {
+        })), /*#__PURE__*/_react["default"].createElement("td", null, i < attributes.size - 1 && /*#__PURE__*/_react["default"].createElement("button", {
           type: "button",
           onFocus: _this2.props.onFocus,
           onBlur: _this2.props.onBlur,
@@ -125,42 +118,38 @@ export var AttributesField = /*#__PURE__*/function (_Component) {
       }))));
     }
   }]);
-
   return AttributesField;
-}(Component); // Helper function that maps for a List but instead of providing the index in
+}(_react.Component); // Helper function that maps for a List but instead of providing the index in
 // the overall list, it gives the lambda the count of the occurrences of current
 // value that have already occurred in the list.
 // For example: ['red', 'green', ''red',]
 // Would call: ['red,' 0], ['green', 0], ['red', 1], ['blue', 0]
-
+exports.AttributesField = AttributesField;
 var mapWithOccurrences = function mapWithOccurrences(list, mapper) {
   return list.reduce(function (_ref2, current) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-        result = _ref3[0],
-        counts = _ref3[1];
-
+    var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
+      result = _ref3[0],
+      counts = _ref3[1];
     return [result.push(mapper(current, counts.get(current, 0))), counts.update(current, 0, function (count) {
       return count + 1;
     })];
-  }, [List(), Map()])[0];
-}; // Same idea as mapWithOccurrences above.
-
+  }, [(0, _immutable.List)(), (0, _immutable.Map)()])[0];
+};
 
+// Same idea as mapWithOccurrences above.
 var filterWithOccurrences = function filterWithOccurrences(list, pred) {
   return list.reduce(function (_ref4, current) {
-    var _ref5 = _slicedToArray(_ref4, 2),
-        result = _ref5[0],
-        counts = _ref5[1];
-
+    var _ref5 = (0, _slicedToArray2["default"])(_ref4, 2),
+      result = _ref5[0],
+      counts = _ref5[1];
     return [pred(current, counts.get(current, 0)) ? result.push(current) : result, counts.update(current, 0, function (count) {
       return count + 1;
     })];
-  }, [List(), Map()])[0];
+  }, [(0, _immutable.List)(), (0, _immutable.Map)()])[0];
 };
-
 var availableAttributes = function availableAttributes(options, value) {
   return options.filter(function (option) {
-    return option.get('allowsMultiple') || value.get(option.get('name'), List()).isEmpty();
+    return option.get('allowsMultiple') || value.get(option.get('name'), (0, _immutable.List)()).isEmpty();
   }).map(function (option) {
     return option.get('name');
   });

package/lib/components/form/defaults/CheckboxField.js

@@ -1,8 +1,15 @@
-import React from 'react';
-export var CheckboxField = function CheckboxField(props) {
-  return props.visible && /*#__PURE__*/React.createElement("div", {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxField = void 0;
+var _react = _interopRequireDefault(require("react"));
+var CheckboxField = function CheckboxField(props) {
+  return props.visible && /*#__PURE__*/_react["default"].createElement("div", {
     className: "field"
-  }, /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/_react["default"].createElement("input", {
     type: "checkbox",
     id: props.id || props.name,
     name: props.name,
@@ -10,7 +17,8 @@ export var CheckboxField = function CheckboxField(props) {
     onBlur: props.onBlur,
     onChange: props.onChange,
     onFocus: props.onFocus
-  }), /*#__PURE__*/React.createElement("label", {
+  }), /*#__PURE__*/_react["default"].createElement("label", {
     htmlFor: props.id || props.name
   }, props.label));
-};
+};
+exports.CheckboxField = CheckboxField;

package/lib/components/form/defaults/CodeField.js

@@ -1,11 +1,18 @@
-import React from 'react';
-import { CodeInput } from '../../common/code_input/CodeInput';
-export var CodeField = function CodeField(props) {
-  return props.visible && /*#__PURE__*/React.createElement("div", {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CodeField = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CodeInput = require("../../common/code_input/CodeInput");
+var CodeField = function CodeField(props) {
+  return props.visible && /*#__PURE__*/_react["default"].createElement("div", {
     className: "field"
-  }, /*#__PURE__*/React.createElement("label", {
+  }, /*#__PURE__*/_react["default"].createElement("label", {
     htmlFor: props.id || props.name
-  }, props.label), /*#__PURE__*/React.createElement(CodeInput, {
+  }, props.label), /*#__PURE__*/_react["default"].createElement(_CodeInput.CodeInput, {
     id: props.id || props.name,
     language: props.language,
     bindings: props.options,
@@ -14,4 +21,5 @@ export var CodeField = function CodeField(props) {
     onChange: props.onChange,
     onFocus: props.onFocus
   }));
-};
+};
+exports.CodeField = CodeField;

package/lib/components/form/defaults/FormButtons.js

@@ -1,8 +1,16 @@
-import React from 'react';
-export var FormButtons = function FormButtons(props) {
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormButtons = void 0;
+var _react = _interopRequireDefault(require("react"));
+var FormButtons = function FormButtons(props) {
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {
     type: "submit",
     onClick: props.submit,
     disabled: !props.dirty || props.submitting
   }, "Submit"));
-};
+};
+exports.FormButtons = FormButtons;

package/lib/components/form/defaults/FormError.js

@@ -1,7 +1,15 @@
-import React from 'react';
-export var FormError = function FormError(props) {
-  return /*#__PURE__*/React.createElement("div", null, props.error, /*#__PURE__*/React.createElement("button", {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormError = void 0;
+var _react = _interopRequireDefault(require("react"));
+var FormError = function FormError(props) {
+  return /*#__PURE__*/_react["default"].createElement("div", null, props.error, /*#__PURE__*/_react["default"].createElement("button", {
     type: "button",
     onClick: props.clear
   }, "\xD7"));
-};
+};
+exports.FormError = FormError;

package/lib/components/form/defaults/FormField.js

@@ -1,11 +1,18 @@
-import React from 'react';
-import { FormSelect } from '../../common/FormSelect';
-export var FormField = function FormField(props) {
-  return props.visible && /*#__PURE__*/React.createElement("div", {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormField = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _FormSelect = require("../../common/FormSelect");
+var FormField = function FormField(props) {
+  return props.visible && /*#__PURE__*/_react["default"].createElement("div", {
     className: "field"
-  }, /*#__PURE__*/React.createElement("label", {
+  }, /*#__PURE__*/_react["default"].createElement("label", {
     htmlFor: props.id || props.name
-  }, props.label), /*#__PURE__*/React.createElement(FormSelect, {
+  }, props.label), /*#__PURE__*/_react["default"].createElement(_FormSelect.FormSelect, {
     textMode: true,
     value: props.value,
     onChange: props.onChange,
@@ -14,4 +21,5 @@ export var FormField = function FormField(props) {
     search: props.search,
     options: props.options
   }));
-};
+};
+exports.FormField = FormField;