@scenid/react-formulator 0.5.5 → 0.5.7

package/dist/index.cjs.js

@@ -50,6 +50,9 @@ var Tooltip = require('@material-ui/core/Tooltip');
 var Tabs = require('@material-ui/core/Tabs');
 var Typography = require('@material-ui/core/Typography');
 var Collapse = require('@material-ui/core/Collapse');
+var _Close = require('@material-ui/icons/esm/Close');
+var _Check = require('@material-ui/icons/esm/Check');
+var colorManipulator = require('@material-ui/core/styles/colorManipulator');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -116,6 +119,8 @@ var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 var Tabs__default = /*#__PURE__*/_interopDefaultLegacy(Tabs);
 var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
 var Collapse__default = /*#__PURE__*/_interopDefaultLegacy(Collapse);
+var _Close__default = /*#__PURE__*/_interopDefaultLegacy(_Close);
+var _Check__default = /*#__PURE__*/_interopDefaultLegacy(_Check);
 
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
@@ -22050,12 +22055,12 @@ function requireIsDate () {
 	return isDate$1.exports;
 }
 
-var isBoolean$2 = {exports: {}};
+var isBoolean$3 = {exports: {}};
 
 var hasRequiredIsBoolean;
 
 function requireIsBoolean () {
-	if (hasRequiredIsBoolean) return isBoolean$2.exports;
+	if (hasRequiredIsBoolean) return isBoolean$3.exports;
 	hasRequiredIsBoolean = 1;
 	(function (module, exports) {
 
@@ -22087,8 +22092,8 @@ function requireIsBoolean () {
 
 		module.exports = exports.default;
 		module.exports.default = exports.default;
-} (isBoolean$2, isBoolean$2.exports));
-	return isBoolean$2.exports;
+} (isBoolean$3, isBoolean$3.exports));
+	return isBoolean$3.exports;
 }
 
 var isLocale = {exports: {}};
@@ -29237,7 +29242,7 @@ FormSectionCard.propTypes = {
   children: PropTypes__default["default"].node
 };
 
-var useStyles$2 = styles$n.makeStyles(function (theme) {
+var useStyles$3 = styles$n.makeStyles(function (theme) {
   return {
     formSectionBlock: {
       '&:not(:last-child)': {
@@ -29254,7 +29259,7 @@ var FormSectionBlock = function FormSectionBlock(_ref) {
       descVariant = _ref.descVariant,
       textAlign = _ref.textAlign,
       children = _ref.children;
-  var styles = useStyles$2();
+  var styles = useStyles$3();
   return /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
     className: styles.formSectionBlock
   }, /*#__PURE__*/React__default["default"].createElement(FormGroupHeader, {
@@ -29280,7 +29285,7 @@ var _excluded$6 = ["prepend", "append", "componentProps"];
 function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var useStyles$1 = styles$o.makeStyles(function (theme) {
+var useStyles$2 = styles$o.makeStyles(function (theme) {
   return {
     error: {
       color: theme.palette.error.main
@@ -29290,6 +29295,7 @@ var useStyles$1 = styles$o.makeStyles(function (theme) {
 
 var FormControlField$1 = function FormControlField(_ref) {
   var variant = _ref.variant,
+      formVariant = _ref.formVariant,
       type = _ref.type,
       name = _ref.name,
       label = _ref.label,
@@ -29305,9 +29311,10 @@ var FormControlField$1 = function FormControlField(_ref) {
       validating = _ref.validating,
       dirty = _ref.dirty,
       onChange = _ref.onChange;
-  var styles = useStyles$1();
+  var styles = useStyles$2();
 
   var finalProps = _objectSpread$4(_objectSpread$4({
+    formVariant: formVariant,
     name: name,
     label: label,
     defaultValue: defaultValue,
@@ -29332,8 +29339,9 @@ var FormControlField$1 = function FormControlField(_ref) {
   if (isRender) {
     try {
       var oldProps = component.props || {};
-      control = /*#__PURE__*/React__default["default"].cloneElement(component, _objectSpread$4(_objectSpread$4(_objectSpread$4({}, finalProps), oldProps), {}, {
-        variant: variant,
+      control = /*#__PURE__*/React__default["default"].cloneElement(component, _objectSpread$4(_objectSpread$4(_objectSpread$4({
+        variant: variant
+      }, finalProps), oldProps), {}, {
         label: label,
         hasErrors: hasErrors,
         errors: errors,
@@ -29378,6 +29386,7 @@ var FormControlField$1 = function FormControlField(_ref) {
 
 FormControlField$1.propTypes = {
   variant: PropTypes__default["default"].oneOf(['standard', 'filled', 'outlined']),
+  formVariant: PropTypes__default["default"].oneOf(['block', 'card']),
   component: PropTypes__default["default"].any.isRequired,
   componentProps: PropTypes__default["default"].object,
   type: PropTypes__default["default"].string.isRequired,
@@ -39142,12 +39151,12 @@ FormCatalogType.propTypes = {
   autocomplete: PropTypes__default["default"].bool
 };
 
-var isBoolean$1 = function isBoolean(val) {
+var isBoolean$2 = function isBoolean(val) {
   return val === false || val === true;
 };
 
-var isChecked$1 = function isChecked(value, defaultValue) {
-  return isBoolean$1(value) ? value : defaultValue || false;
+var isChecked$2 = function isChecked(value, defaultValue) {
+  return isBoolean$2(value) ? value : defaultValue || false;
 };
 
 var FormBoolean = function FormBoolean(_ref) {
@@ -39173,7 +39182,7 @@ var FormBoolean = function FormBoolean(_ref) {
     return /*#__PURE__*/React__default["default"].createElement(_Checkbox__default["default"], {
       color: "primary",
       name: name,
-      checked: isChecked$1(value, defaultValue),
+      checked: isChecked$2(value, defaultValue),
       onChange: handleChange
     });
   }
@@ -39181,7 +39190,7 @@ var FormBoolean = function FormBoolean(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(_Switch__default["default"], {
     color: "primary",
     name: name,
-    checked: isChecked$1(value, defaultValue),
+    checked: isChecked$2(value, defaultValue),
     onChange: handleChange
   });
 };
@@ -39387,7 +39396,8 @@ function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var FormControlField = function FormControlField(_ref) {
-  var type = _ref.type,
+  var formVariant = _ref.formVariant,
+      type = _ref.type,
       name = _ref.name,
       label = _ref.label,
       component = _ref.component,
@@ -39397,6 +39407,7 @@ var FormControlField = function FormControlField(_ref) {
       required = _ref.required;
 
   var finalProps = _objectSpread$2(_objectSpread$2({}, componentProps), {}, {
+    formVariant: formVariant,
     name: name,
     label: label,
     value: value,
@@ -39405,6 +39416,8 @@ var FormControlField = function FormControlField(_ref) {
     readOnly: true
   });
 
+  var isSwitch = type === 'boolean';
+
   if ((componentProps === null || componentProps === void 0 ? void 0 : componentProps.readOnlyHidden) === true) {
     return false;
   }
@@ -39416,13 +39429,14 @@ var FormControlField = function FormControlField(_ref) {
     display: "flex",
     flexDirection: "column",
     mb: 1.5
-  }, label && /*#__PURE__*/React__default["default"].createElement(_Typography__default["default"], {
+  }, label && !isSwitch && /*#__PURE__*/React__default["default"].createElement(_Typography__default["default"], {
     variant: "caption",
     color: "textSecondary"
   }, label), control);
 };
 
 FormControlField.propTypes = {
+  formVariant: PropTypes__default["default"].oneOf(['block', 'card']),
   component: PropTypes__default["default"].any.isRequired,
   componentProps: PropTypes__default["default"].object,
   name: PropTypes__default["default"].string.isRequired,
@@ -77725,32 +77739,42 @@ FormReadOnlySelect.propTypes = {
   })).isRequired
 };
 
-var isBoolean = function isBoolean(val) {
+var isBoolean$1 = function isBoolean(val) {
   return val === false || val === true;
 };
 
-var isChecked = function isChecked(value, defaultValue) {
-  return isBoolean(value) ? value : defaultValue || false;
+var isChecked$1 = function isChecked(value, defaultValue) {
+  return isBoolean$1(value) ? value : defaultValue || false;
 };
 
 var FormReadOnlyBoolean = function FormReadOnlyBoolean(_ref) {
   var variant = _ref.variant,
       name = _ref.name,
       value = _ref.value,
-      defaultValue = _ref.defaultValue;
+      defaultValue = _ref.defaultValue,
+      label = _ref.label,
+      labelPlacement = _ref.labelPlacement;
 
   if (variant === 'checkbox') {
-    return /*#__PURE__*/React__default["default"].createElement(_Checkbox__default["default"], {
-      name: name,
-      checked: isChecked(value, defaultValue),
-      disabled: true
+    return /*#__PURE__*/React__default["default"].createElement(_FormControlLabel__default["default"], {
+      label: label,
+      labelPlacement: labelPlacement || 'end',
+      disabled: true,
+      control: /*#__PURE__*/React__default["default"].createElement(_Checkbox__default["default"], {
+        name: name,
+        checked: isChecked$1(value, defaultValue)
+      })
     });
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(_Switch__default["default"], {
-    name: name,
-    checked: isChecked(value, defaultValue),
-    disabled: true
+  return /*#__PURE__*/React__default["default"].createElement(_FormControlLabel__default["default"], {
+    label: label,
+    labelPlacement: labelPlacement || 'end',
+    disabled: true,
+    control: /*#__PURE__*/React__default["default"].createElement(_Switch__default["default"], {
+      name: name,
+      checked: isChecked$1(value, defaultValue)
+    })
   });
 };
 
@@ -77758,10 +77782,12 @@ FormReadOnlyBoolean.propTypes = {
   variant: PropTypes__default["default"].string,
   name: PropTypes__default["default"].string.isRequired,
   value: PropTypes__default["default"].bool,
-  defaultValue: PropTypes__default["default"].bool
+  defaultValue: PropTypes__default["default"].bool,
+  label: PropTypes__default["default"].string,
+  labelPlacement: PropTypes__default["default"].string
 };
 
-var useStyles = styles$n.makeStyles(function () {
+var useStyles$1 = styles$n.makeStyles(function () {
   return {
     formRepeater: {
       padding: 0,
@@ -77778,7 +77804,7 @@ var getValue = function getValue(value, catalog) {
 var FormReadOnlyRepeater = function FormReadOnlyRepeater(_ref) {
   var value = _ref.value,
       options = _ref.options;
-  var styles = useStyles();
+  var styles = useStyles$1();
   return /*#__PURE__*/React__default["default"].createElement(_List__default["default"], {
     className: styles.formRepeater,
     dense: true
@@ -83328,7 +83354,7 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
             dirty = fieldProps.dirty;
 
         if (readOnly) {
-          if (!value) return false;
+          if (value === '' || value === undefined || value === null) return false;
 
           if (Array.isArray(obscuredFields) && obscuredFields.includes(name)) {
             return /*#__PURE__*/React__default["default"].createElement(HiddenData, {
@@ -83375,6 +83401,7 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React__default["default"].createElement(FormFieldComponent, {
           key: "form-".concat(id, "-").concat(name),
           variant: inputVariant,
+          formVariant: variant,
           type: type,
           name: name,
           label: label,
@@ -84062,10 +84089,109 @@ FormulatorForm.defaultProps = {
   errorMessages: {}
 };
 
+var useStyles = styles$o.makeStyles(function (theme) {
+  return {
+    "default": {
+      margin: 0
+    },
+    sharpEdges: {
+      borderRadius: 0
+    },
+    spanToCard: {
+      margin: theme.spacing(2) * -1
+    },
+    checked: {
+      backgroundColor: colorManipulator.alpha(theme.palette.primary.main, 0.12)
+    },
+    unchecked: {
+      backgroundColor: theme.palette.grey[200]
+    }
+  };
+});
+
+var isBoolean = function isBoolean(val) {
+  return val === false || val === true;
+};
+
+var isChecked = function isChecked(value, defaultValue) {
+  return isBoolean(value) ? value : defaultValue || false;
+};
+
+var FormPrimaryToggle = function FormPrimaryToggle(_ref) {
+  var _cx;
+
+  var formVariant = _ref.formVariant,
+      solitary = _ref.solitary,
+      name = _ref.name,
+      value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      onChange = _ref.onChange,
+      readOnly = _ref.readOnly,
+      checkedLabel = _ref.checkedLabel,
+      uncheckedLabel = _ref.uncheckedLabel;
+  var styles = useStyles();
+  var theme = styles$o.useTheme();
+
+  var handleChange = function handleChange(e) {
+    var newValue = e.target.checked;
+    onChange({
+      target: {
+        name: name,
+        value: newValue
+      }
+    });
+  };
+
+  var checked = isChecked(value, defaultValue);
+  return /*#__PURE__*/React__default["default"].createElement(_Paper__default["default"], {
+    elevation: 0,
+    className: cx__default["default"](styles["default"], (_cx = {}, _defineProperty(_cx, styles.spanToCard, formVariant === 'card'), _defineProperty(_cx, styles.sharpEdges, !solitary), _defineProperty(_cx, styles.checked, checked), _defineProperty(_cx, styles.unchecked, !checked), _cx))
+  }, /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: readOnly ? 'flex-start' : 'space-between',
+    alignItems: "center",
+    padding: 2
+  }, readOnly && checked && /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
+    pt: 1,
+    mr: 2
+  }, /*#__PURE__*/React__default["default"].createElement(_Check__default["default"], {
+    fontSize: solitary ? 'large' : 'medium',
+    htmlColor: theme.palette.text.secondary
+  })), readOnly && !checked && /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
+    pt: 1,
+    mr: 2
+  }, /*#__PURE__*/React__default["default"].createElement(_Close__default["default"], {
+    fontSize: solitary ? 'large' : 'medium',
+    htmlColor: theme.palette.text.secondary
+  })), /*#__PURE__*/React__default["default"].createElement(_Typography__default["default"], {
+    variant: solitary ? 'h5' : 'body1',
+    color: checked && !readOnly ? 'primary' : 'textSecondary'
+  }, checked ? checkedLabel : uncheckedLabel), !readOnly && /*#__PURE__*/React__default["default"].createElement(_Switch__default["default"], {
+    color: "primary",
+    name: name,
+    checked: checked,
+    onChange: handleChange
+  })));
+};
+
+FormPrimaryToggle.propTypes = {
+  formVariant: PropTypes__default["default"].oneOf(['block', 'card']).isRequired,
+  solitary: PropTypes__default["default"].bool,
+  name: PropTypes__default["default"].string.isRequired,
+  value: PropTypes__default["default"].bool,
+  defaultValue: PropTypes__default["default"].bool,
+  onChange: PropTypes__default["default"].func.isRequired,
+  readOnly: PropTypes__default["default"].bool,
+  checkedLabel: PropTypes__default["default"].string.isRequired,
+  uncheckedLabel: PropTypes__default["default"].string.isRequired
+};
+
 exports.FormAutocomplete = FormAutocomplete;
 exports.FormBoolean = FormBoolean;
 exports.FormField = FormField$1;
 exports.FormNumber = FormNumber;
+exports.FormPrimaryToggle = FormPrimaryToggle;
 exports.FormReadOnlyBoolean = FormReadOnlyBoolean;
 exports.FormReadOnlyField = FormReadOnlyField$1;
 exports.FormReadOnlyMarkdown = FormReadOnlyMarkdown;

package/dist/index.esm.js

@@ -13,7 +13,7 @@ import _FormHelperText from '@material-ui/core/esm/FormHelperText';
 import _FormControlLabel from '@material-ui/core/esm/FormControlLabel';
 import _InputAdornment from '@material-ui/core/esm/InputAdornment';
 import cx from 'classnames';
-import { makeStyles as makeStyles$1 } from '@material-ui/styles';
+import { makeStyles as makeStyles$1, useTheme as useTheme$1 } from '@material-ui/styles';
 import AutorenewIcon from '@material-ui/icons/Autorenew';
 import _TextField from '@material-ui/core/esm/TextField';
 import _CircularProgress from '@material-ui/core/esm/CircularProgress';
@@ -48,6 +48,9 @@ import Tooltip from '@material-ui/core/Tooltip';
 import Tabs from '@material-ui/core/Tabs';
 import Typography$1 from '@material-ui/core/Typography';
 import Collapse from '@material-ui/core/Collapse';
+import _Close from '@material-ui/icons/esm/Close';
+import _Check from '@material-ui/icons/esm/Check';
+import { alpha as alpha$2 } from '@material-ui/core/styles/colorManipulator';
 
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
@@ -21982,12 +21985,12 @@ function requireIsDate () {
 	return isDate$1.exports;
 }
 
-var isBoolean$2 = {exports: {}};
+var isBoolean$3 = {exports: {}};
 
 var hasRequiredIsBoolean;
 
 function requireIsBoolean () {
-	if (hasRequiredIsBoolean) return isBoolean$2.exports;
+	if (hasRequiredIsBoolean) return isBoolean$3.exports;
 	hasRequiredIsBoolean = 1;
 	(function (module, exports) {
 
@@ -22019,8 +22022,8 @@ function requireIsBoolean () {
 
 		module.exports = exports.default;
 		module.exports.default = exports.default;
-} (isBoolean$2, isBoolean$2.exports));
-	return isBoolean$2.exports;
+} (isBoolean$3, isBoolean$3.exports));
+	return isBoolean$3.exports;
 }
 
 var isLocale = {exports: {}};
@@ -29169,7 +29172,7 @@ FormSectionCard.propTypes = {
   children: PropTypes__default.node
 };
 
-var useStyles$2 = makeStyles(function (theme) {
+var useStyles$3 = makeStyles(function (theme) {
   return {
     formSectionBlock: {
       '&:not(:last-child)': {
@@ -29186,7 +29189,7 @@ var FormSectionBlock = function FormSectionBlock(_ref) {
       descVariant = _ref.descVariant,
       textAlign = _ref.textAlign,
       children = _ref.children;
-  var styles = useStyles$2();
+  var styles = useStyles$3();
   return /*#__PURE__*/React__default.createElement(_Box, {
     className: styles.formSectionBlock
   }, /*#__PURE__*/React__default.createElement(FormGroupHeader, {
@@ -29212,7 +29215,7 @@ var _excluded$6 = ["prepend", "append", "componentProps"];
 function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var useStyles$1 = makeStyles$1(function (theme) {
+var useStyles$2 = makeStyles$1(function (theme) {
   return {
     error: {
       color: theme.palette.error.main
@@ -29222,6 +29225,7 @@ var useStyles$1 = makeStyles$1(function (theme) {
 
 var FormControlField$1 = function FormControlField(_ref) {
   var variant = _ref.variant,
+      formVariant = _ref.formVariant,
       type = _ref.type,
       name = _ref.name,
       label = _ref.label,
@@ -29237,9 +29241,10 @@ var FormControlField$1 = function FormControlField(_ref) {
       validating = _ref.validating,
       dirty = _ref.dirty,
       onChange = _ref.onChange;
-  var styles = useStyles$1();
+  var styles = useStyles$2();
 
   var finalProps = _objectSpread$4(_objectSpread$4({
+    formVariant: formVariant,
     name: name,
     label: label,
     defaultValue: defaultValue,
@@ -29264,8 +29269,9 @@ var FormControlField$1 = function FormControlField(_ref) {
   if (isRender) {
     try {
       var oldProps = component.props || {};
-      control = /*#__PURE__*/React__default.cloneElement(component, _objectSpread$4(_objectSpread$4(_objectSpread$4({}, finalProps), oldProps), {}, {
-        variant: variant,
+      control = /*#__PURE__*/React__default.cloneElement(component, _objectSpread$4(_objectSpread$4(_objectSpread$4({
+        variant: variant
+      }, finalProps), oldProps), {}, {
         label: label,
         hasErrors: hasErrors,
         errors: errors,
@@ -29310,6 +29316,7 @@ var FormControlField$1 = function FormControlField(_ref) {
 
 FormControlField$1.propTypes = {
   variant: PropTypes__default.oneOf(['standard', 'filled', 'outlined']),
+  formVariant: PropTypes__default.oneOf(['block', 'card']),
   component: PropTypes__default.any.isRequired,
   componentProps: PropTypes__default.object,
   type: PropTypes__default.string.isRequired,
@@ -39074,12 +39081,12 @@ FormCatalogType.propTypes = {
   autocomplete: PropTypes__default.bool
 };
 
-var isBoolean$1 = function isBoolean(val) {
+var isBoolean$2 = function isBoolean(val) {
   return val === false || val === true;
 };
 
-var isChecked$1 = function isChecked(value, defaultValue) {
-  return isBoolean$1(value) ? value : defaultValue || false;
+var isChecked$2 = function isChecked(value, defaultValue) {
+  return isBoolean$2(value) ? value : defaultValue || false;
 };
 
 var FormBoolean = function FormBoolean(_ref) {
@@ -39105,7 +39112,7 @@ var FormBoolean = function FormBoolean(_ref) {
     return /*#__PURE__*/React__default.createElement(_Checkbox, {
       color: "primary",
       name: name,
-      checked: isChecked$1(value, defaultValue),
+      checked: isChecked$2(value, defaultValue),
       onChange: handleChange
     });
   }
@@ -39113,7 +39120,7 @@ var FormBoolean = function FormBoolean(_ref) {
   return /*#__PURE__*/React__default.createElement(_Switch, {
     color: "primary",
     name: name,
-    checked: isChecked$1(value, defaultValue),
+    checked: isChecked$2(value, defaultValue),
     onChange: handleChange
   });
 };
@@ -39319,7 +39326,8 @@ function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var FormControlField = function FormControlField(_ref) {
-  var type = _ref.type,
+  var formVariant = _ref.formVariant,
+      type = _ref.type,
       name = _ref.name,
       label = _ref.label,
       component = _ref.component,
@@ -39329,6 +39337,7 @@ var FormControlField = function FormControlField(_ref) {
       required = _ref.required;
 
   var finalProps = _objectSpread$2(_objectSpread$2({}, componentProps), {}, {
+    formVariant: formVariant,
     name: name,
     label: label,
     value: value,
@@ -39337,6 +39346,8 @@ var FormControlField = function FormControlField(_ref) {
     readOnly: true
   });
 
+  var isSwitch = type === 'boolean';
+
   if ((componentProps === null || componentProps === void 0 ? void 0 : componentProps.readOnlyHidden) === true) {
     return false;
   }
@@ -39348,13 +39359,14 @@ var FormControlField = function FormControlField(_ref) {
     display: "flex",
     flexDirection: "column",
     mb: 1.5
-  }, label && /*#__PURE__*/React__default.createElement(_Typography, {
+  }, label && !isSwitch && /*#__PURE__*/React__default.createElement(_Typography, {
     variant: "caption",
     color: "textSecondary"
   }, label), control);
 };
 
 FormControlField.propTypes = {
+  formVariant: PropTypes__default.oneOf(['block', 'card']),
   component: PropTypes__default.any.isRequired,
   componentProps: PropTypes__default.object,
   name: PropTypes__default.string.isRequired,
@@ -77657,32 +77669,42 @@ FormReadOnlySelect.propTypes = {
   })).isRequired
 };
 
-var isBoolean = function isBoolean(val) {
+var isBoolean$1 = function isBoolean(val) {
   return val === false || val === true;
 };
 
-var isChecked = function isChecked(value, defaultValue) {
-  return isBoolean(value) ? value : defaultValue || false;
+var isChecked$1 = function isChecked(value, defaultValue) {
+  return isBoolean$1(value) ? value : defaultValue || false;
 };
 
 var FormReadOnlyBoolean = function FormReadOnlyBoolean(_ref) {
   var variant = _ref.variant,
       name = _ref.name,
       value = _ref.value,
-      defaultValue = _ref.defaultValue;
+      defaultValue = _ref.defaultValue,
+      label = _ref.label,
+      labelPlacement = _ref.labelPlacement;
 
   if (variant === 'checkbox') {
-    return /*#__PURE__*/React__default.createElement(_Checkbox, {
-      name: name,
-      checked: isChecked(value, defaultValue),
-      disabled: true
+    return /*#__PURE__*/React__default.createElement(_FormControlLabel, {
+      label: label,
+      labelPlacement: labelPlacement || 'end',
+      disabled: true,
+      control: /*#__PURE__*/React__default.createElement(_Checkbox, {
+        name: name,
+        checked: isChecked$1(value, defaultValue)
+      })
     });
   }
 
-  return /*#__PURE__*/React__default.createElement(_Switch, {
-    name: name,
-    checked: isChecked(value, defaultValue),
-    disabled: true
+  return /*#__PURE__*/React__default.createElement(_FormControlLabel, {
+    label: label,
+    labelPlacement: labelPlacement || 'end',
+    disabled: true,
+    control: /*#__PURE__*/React__default.createElement(_Switch, {
+      name: name,
+      checked: isChecked$1(value, defaultValue)
+    })
   });
 };
 
@@ -77690,10 +77712,12 @@ FormReadOnlyBoolean.propTypes = {
   variant: PropTypes__default.string,
   name: PropTypes__default.string.isRequired,
   value: PropTypes__default.bool,
-  defaultValue: PropTypes__default.bool
+  defaultValue: PropTypes__default.bool,
+  label: PropTypes__default.string,
+  labelPlacement: PropTypes__default.string
 };
 
-var useStyles = makeStyles(function () {
+var useStyles$1 = makeStyles(function () {
   return {
     formRepeater: {
       padding: 0,
@@ -77710,7 +77734,7 @@ var getValue = function getValue(value, catalog) {
 var FormReadOnlyRepeater = function FormReadOnlyRepeater(_ref) {
   var value = _ref.value,
       options = _ref.options;
-  var styles = useStyles();
+  var styles = useStyles$1();
   return /*#__PURE__*/React__default.createElement(_List, {
     className: styles.formRepeater,
     dense: true
@@ -83260,7 +83284,7 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
             dirty = fieldProps.dirty;
 
         if (readOnly) {
-          if (!value) return false;
+          if (value === '' || value === undefined || value === null) return false;
 
           if (Array.isArray(obscuredFields) && obscuredFields.includes(name)) {
             return /*#__PURE__*/React__default.createElement(HiddenData, {
@@ -83307,6 +83331,7 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React__default.createElement(FormFieldComponent, {
           key: "form-".concat(id, "-").concat(name),
           variant: inputVariant,
+          formVariant: variant,
           type: type,
           name: name,
           label: label,
@@ -83994,4 +84019,102 @@ FormulatorForm.defaultProps = {
   errorMessages: {}
 };
 
-export { FormAutocomplete, FormBoolean, FormField$1 as FormField, FormNumber, FormReadOnlyBoolean, FormReadOnlyField$1 as FormReadOnlyField, FormReadOnlyMarkdown, FormReadOnlyNumber, FormReadOnlyRepeater, FormReadOnlySelect, FormReadOnlyText, FormRepeater, FormSelect, FormText, FormulatorForm, HiddenData, SelectOrCreate };
+var useStyles = makeStyles$1(function (theme) {
+  return {
+    "default": {
+      margin: 0
+    },
+    sharpEdges: {
+      borderRadius: 0
+    },
+    spanToCard: {
+      margin: theme.spacing(2) * -1
+    },
+    checked: {
+      backgroundColor: alpha$2(theme.palette.primary.main, 0.12)
+    },
+    unchecked: {
+      backgroundColor: theme.palette.grey[200]
+    }
+  };
+});
+
+var isBoolean = function isBoolean(val) {
+  return val === false || val === true;
+};
+
+var isChecked = function isChecked(value, defaultValue) {
+  return isBoolean(value) ? value : defaultValue || false;
+};
+
+var FormPrimaryToggle = function FormPrimaryToggle(_ref) {
+  var _cx;
+
+  var formVariant = _ref.formVariant,
+      solitary = _ref.solitary,
+      name = _ref.name,
+      value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      onChange = _ref.onChange,
+      readOnly = _ref.readOnly,
+      checkedLabel = _ref.checkedLabel,
+      uncheckedLabel = _ref.uncheckedLabel;
+  var styles = useStyles();
+  var theme = useTheme$1();
+
+  var handleChange = function handleChange(e) {
+    var newValue = e.target.checked;
+    onChange({
+      target: {
+        name: name,
+        value: newValue
+      }
+    });
+  };
+
+  var checked = isChecked(value, defaultValue);
+  return /*#__PURE__*/React__default.createElement(_Paper, {
+    elevation: 0,
+    className: cx(styles["default"], (_cx = {}, _defineProperty(_cx, styles.spanToCard, formVariant === 'card'), _defineProperty(_cx, styles.sharpEdges, !solitary), _defineProperty(_cx, styles.checked, checked), _defineProperty(_cx, styles.unchecked, !checked), _cx))
+  }, /*#__PURE__*/React__default.createElement(_Box, {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: readOnly ? 'flex-start' : 'space-between',
+    alignItems: "center",
+    padding: 2
+  }, readOnly && checked && /*#__PURE__*/React__default.createElement(_Box, {
+    pt: 1,
+    mr: 2
+  }, /*#__PURE__*/React__default.createElement(_Check, {
+    fontSize: solitary ? 'large' : 'medium',
+    htmlColor: theme.palette.text.secondary
+  })), readOnly && !checked && /*#__PURE__*/React__default.createElement(_Box, {
+    pt: 1,
+    mr: 2
+  }, /*#__PURE__*/React__default.createElement(_Close, {
+    fontSize: solitary ? 'large' : 'medium',
+    htmlColor: theme.palette.text.secondary
+  })), /*#__PURE__*/React__default.createElement(_Typography, {
+    variant: solitary ? 'h5' : 'body1',
+    color: checked && !readOnly ? 'primary' : 'textSecondary'
+  }, checked ? checkedLabel : uncheckedLabel), !readOnly && /*#__PURE__*/React__default.createElement(_Switch, {
+    color: "primary",
+    name: name,
+    checked: checked,
+    onChange: handleChange
+  })));
+};
+
+FormPrimaryToggle.propTypes = {
+  formVariant: PropTypes__default.oneOf(['block', 'card']).isRequired,
+  solitary: PropTypes__default.bool,
+  name: PropTypes__default.string.isRequired,
+  value: PropTypes__default.bool,
+  defaultValue: PropTypes__default.bool,
+  onChange: PropTypes__default.func.isRequired,
+  readOnly: PropTypes__default.bool,
+  checkedLabel: PropTypes__default.string.isRequired,
+  uncheckedLabel: PropTypes__default.string.isRequired
+};
+
+export { FormAutocomplete, FormBoolean, FormField$1 as FormField, FormNumber, FormPrimaryToggle, FormReadOnlyBoolean, FormReadOnlyField$1 as FormReadOnlyField, FormReadOnlyMarkdown, FormReadOnlyNumber, FormReadOnlyRepeater, FormReadOnlySelect, FormReadOnlyText, FormRepeater, FormSelect, FormText, FormulatorForm, HiddenData, SelectOrCreate };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scenid/react-formulator",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "repository": "https://dennykoch@bitbucket.org/scenid/react-formulator.git",