@widergy/energy-ui 1.131.0 → 1.131.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.131.2](https://github.com/widergy/energy-ui/compare/v1.131.1...v1.131.2) (2022-09-30)
+
+
+### Bug Fixes
+
+* added outside text ([#312](https://github.com/widergy/energy-ui/issues/312)) ([09fd1bd](https://github.com/widergy/energy-ui/commit/09fd1bdb263d1f45df29694ae28d3d96f577ce64))
+
+## [1.131.1](https://github.com/widergy/energy-ui/compare/v1.131.0...v1.131.1) (2022-09-26)
+
+
+### Bug Fixes
+
+* adding tooltip to UTChecklist Checkbox render ([#311](https://github.com/widergy/energy-ui/issues/311)) ([7a52d03](https://github.com/widergy/energy-ui/commit/7a52d03cc3ff4a734aa9f538601a5377413e3acb))
+
 # [1.131.0](https://github.com/widergy/energy-ui/compare/v1.130.3...v1.131.0) (2022-09-15)
 
 

package/dist/components/UTCheckList/index.js

@@ -56,31 +56,32 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 var UTCheckList = function UTCheckList(_ref) {
   var _field$configuration;
 
-  var valueKey = _ref.valueKey,
-      labelKey = _ref.labelKey,
-      input = _ref.input,
-      additionalInfo = _ref.additionalInfo,
-      list = _ref.list,
-      className = _ref.className,
-      shouldShowErrors = _ref.shouldShowErrors,
-      meta = _ref.meta,
-      disabled = _ref.disabled,
+  var additionalInfo = _ref.additionalInfo,
+      allChecked = _ref.allChecked,
+      CustomCheckedIcon = _ref.CustomCheckedIcon,
+      CustomUncheckedIcon = _ref.CustomUncheckedIcon,
       CustomRowLabel = _ref.customRowLabel,
       CustomSelectAllRowLabel = _ref.customSelectAllRowLabel,
       _ref$classes = _ref.classes,
       themeClasses = _ref$classes === void 0 ? {} : _ref$classes,
+      className = _ref.className,
       classNames = _ref.classNames,
+      disabled = _ref.disabled,
+      disabledItemTooltip = _ref.disabledItemTooltip,
+      field = _ref.field,
+      getSelectAllNewValues = _ref.getSelectAllNewValues,
       header = _ref.header,
       headerLabel = _ref.headerLabel,
-      withCheckRow = _ref.withCheckRow,
+      input = _ref.input,
+      labelKey = _ref.labelKey,
+      list = _ref.list,
+      meta = _ref.meta,
+      shouldShowErrors = _ref.shouldShowErrors,
+      titleProps = _ref.titleProps,
       useCustomIcons = _ref.useCustomIcons,
-      allChecked = _ref.allChecked,
-      getSelectAllNewValues = _ref.getSelectAllNewValues,
-      CustomCheckedIcon = _ref.CustomCheckedIcon,
-      CustomUncheckedIcon = _ref.CustomUncheckedIcon,
-      field = _ref.field,
-      withUpperTitle = _ref.withUpperTitle,
-      titleProps = _ref.titleProps;
+      valueKey = _ref.valueKey,
+      withCheckRow = _ref.withCheckRow,
+      withUpperTitle = _ref.withUpperTitle;
   var shouldShowUpperTitle = (field === null || field === void 0 ? void 0 : (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.ignore_title) && withUpperTitle;
 
   var handleChange = function handleChange(id) {
@@ -168,7 +169,8 @@ var UTCheckList = function UTCheckList(_ref) {
       },
       useCustomIcons: useCustomIcons,
       CustomCheckedIcon: CustomCheckedIcon,
-      CustomUncheckedIcon: CustomUncheckedIcon
+      CustomUncheckedIcon: CustomUncheckedIcon,
+      tooltipContent: item.disabled && disabledItemTooltip && disabledItemTooltip(item, list)
     }));
   })), additionalInfo && additionalInfo.footer && /*#__PURE__*/_react.default.createElement(_FormHelperText.default, null, additionalInfo.footer), shouldShowErrors && /*#__PURE__*/_react.default.createElement(_FormHelperText.default, {
     error: true
@@ -192,6 +194,7 @@ UTCheckList.propTypes = {
   customSelectAllRowLabel: _propTypes.element,
   CustomUncheckedIcon: _propTypes.element,
   disabled: _propTypes.bool,
+  disabledItemTooltip: _propTypes.func,
   field: _formTypes.fieldType,
   getSelectAllNewValues: _propTypes.func,
   header: (0, _propTypes.shape)({

package/dist/components/UTCheckbox/constants.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tippyProps = void 0;
+var tippyProps = {
+  appendTo: function appendTo() {
+    return document.body;
+  },
+  interactive: false,
+  maxWidth: 'none'
+};
+exports.tippyProps = tippyProps;

package/dist/components/UTCheckbox/index.js

@@ -19,6 +19,8 @@ var _form = require("@widergy/web-utils/lib/form");
 
 var _energyHooks = require("@widergy/energy-hooks");
 
+var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
+
 var _formTypes = require("../../types/formTypes");
 
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
@@ -29,6 +31,10 @@ var _classesUtils = require("../../utils/classesUtils");
 
 var _theme = require("./theme");
 
+var _constants = require("./constants");
+
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -83,6 +89,7 @@ var UTCheckbox = function UTCheckbox(_ref) {
       disableRipple = _ref.disableRipple,
       label = _ref.label,
       input = _ref.input,
+      tooltipContent = _ref.tooltipContent,
       onChange = _ref.onChange;
 
   var _useMutableState = (0, _energyHooks.useMutableState)(value),
@@ -101,7 +108,11 @@ var UTCheckbox = function UTCheckbox(_ref) {
   var classes = (0, _classesUtils.mergeClasses)(themeClasses, classNames);
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
     disabled: disabled,
-    control: /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+    control: /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+      content: tooltipContent,
+      stringContentClassName: _stylesModule.default.disableSelectionTooltip,
+      tippyProps: _constants.tippyProps
+    }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
       classes: {
         colorPrimary: classes.checkboxColorPrimary,
         colorSecondary: classes.checkboxColorSecondary
@@ -116,8 +127,9 @@ var UTCheckbox = function UTCheckbox(_ref) {
       onChange: handleChange,
       value: (input === null || input === void 0 ? void 0 : input.value) || value,
       color: color,
-      disableRipple: disableRipple
-    }),
+      disableRipple: disableRipple,
+      disabled: disabled
+    }))),
     label: CustomRowLabel ? /*#__PURE__*/_react.default.createElement(CustomRowLabel, {
       item: item
     }) : /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
@@ -152,7 +164,8 @@ UTCheckbox.propTypes = {
   meta: _formTypes.metaPropTypes,
   showError: _propTypes.bool,
   input: _formTypes.inputPropTypes,
-  disableRipple: _propTypes.bool
+  disableRipple: _propTypes.bool,
+  tooltipContent: _propTypes.element
 };
 
 var _default = (0, _WithTheme.default)(_theme.retrieveStyle, _theme.retrieveMuiTheme)(UTCheckbox);

package/dist/components/UTCheckbox/styles.module.scss

@@ -0,0 +1,3 @@
+.disableSelectionTooltip {
+  text-align: center;
+}

package/dist/components/UTSwitch/index.js

@@ -58,35 +58,38 @@ var UTSwitch = function UTSwitch(_ref) {
       themeClasses = _ref$classes === void 0 ? {} : _ref$classes,
       classNames = _ref.classNames,
       disabled = _ref.disabled,
-      field = _ref.field,
-      input = _ref.input,
+      _ref$field = _ref.field,
+      field = _ref$field === void 0 ? {} : _ref$field,
+      _ref$input = _ref.input,
+      input = _ref$input === void 0 ? {} : _ref$input,
       _ref$meta = _ref.meta,
       meta = _ref$meta === void 0 ? {} : _ref$meta,
-      showErrors = _ref.showErrors,
-      textOff = _ref.textOff,
-      textOn = _ref.textOn,
-      withText = _ref.withText;
-
-  var _ref2 = input || {},
-      value = _ref2.value,
-      onChange_ = _ref2.onChange;
-
+      showErrors = _ref.showErrors;
+  var value = input.value,
+      onChange_ = input.onChange;
   var key = field.key,
-      fieldOptions = field.field_options;
+      fieldOptions = field.field_options,
+      _field$configuration = field.configuration,
+      configuration = _field$configuration === void 0 ? {} : _field$configuration;
+  var textOff_ = configuration.textOff,
+      textOn_ = configuration.textOn,
+      _configuration$inside = configuration.insideText,
+      insideText = _configuration$inside === void 0 ? true : _configuration$inside,
+      withText = configuration.withText;
   var switchId = key || _constants.DEFAULT_SWITCH_ID;
   var classes = (0, _react.useMemo)(function () {
     return (0, _classesUtils.mergeClasses)(themeClasses, classNames);
   }, [classNames]);
   var useFieldOptions = fieldOptions && !(0, _array.isEmpty)(fieldOptions);
 
-  var _ref3 = useFieldOptions ? _toConsumableArray(fieldOptions).sort(function (_, _ref5) {
-    var optionValue = _ref5.value,
-        name = _ref5.name;
+  var _ref2 = useFieldOptions ? _toConsumableArray(fieldOptions).sort(function (_, _ref4) {
+    var optionValue = _ref4.value,
+        name = _ref4.name;
     return [optionValue, name === _constants.TRUE].includes(value) ? 1 : -1;
   }) : [],
-      _ref4 = _slicedToArray(_ref3, 2),
-      currentOption = _ref4[0],
-      switchedOption = _ref4[1];
+      _ref3 = _slicedToArray(_ref2, 2),
+      currentOption = _ref3[0],
+      switchedOption = _ref3[1];
 
   var onChange = useFieldOptions ? function () {
     return onChange_(switchedOption.value);
@@ -94,7 +97,11 @@ var UTSwitch = function UTSwitch(_ref) {
   (0, _react.useEffect)(function () {
     if (useFieldOptions && value === false) onChange_(currentOption.value);
   }, [value]);
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("label", {
+  var textOn = textOn_ || _constants.STATES.ON;
+  var textOff = textOff_ || _constants.STATES.OFF;
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.outerContainer
+  }, withText && !insideText && textOff, /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: switchId,
     className: "".concat(classes.container, " ").concat(disabled && classes.disabled)
   }, /*#__PURE__*/_react.default.createElement("input", {
@@ -109,17 +116,17 @@ var UTSwitch = function UTSwitch(_ref) {
     className: "".concat(classes.sliderContainer, " ").concat(disabled && classes.disabled)
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(classes.sliderBack, " ").concat(disabled && classes.disabled)
-  }), withText && /*#__PURE__*/_react.default.createElement("div", {
+  }), withText && insideText && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.textContainer
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.checkedText
-  }, textOn || _constants.STATES.ON), /*#__PURE__*/_react.default.createElement("div", {
+  }, textOn), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.uncheckedText
-  }, textOff || _constants.STATES.OFF)), /*#__PURE__*/_react.default.createElement("span", {
+  }, textOff)), /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(classes.sliderHover, " ").concat(disabled && classes.disabled)
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(classes.slider, " ").concat(disabled && classes.disabled)
-  }))), showErrors && meta && (0, _form.shouldShowErrors)(meta) && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  }))), withText && !insideText && textOn), showErrors && meta && (0, _form.shouldShowErrors)(meta) && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     error: true
   }, meta === null || meta === void 0 ? void 0 : meta.error));
 };
@@ -131,10 +138,7 @@ UTSwitch.propTypes = {
   field: _formTypes.fieldType,
   input: _formTypes.inputPropTypes.isRequired,
   meta: _formTypes.metaPropTypes,
-  showErrors: _propTypes.bool,
-  textOff: _propTypes.string,
-  textOn: _propTypes.string,
-  withText: _propTypes.bool
+  showErrors: _propTypes.bool
 };
 
 var _default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTSwitch);

package/dist/components/UTSwitch/theme.js

@@ -13,6 +13,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var retrieveStyle = function retrieveStyle(theme) {
   return {
+    outerContainer: {
+      alignItems: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'outerContainer', 'alignItems'], 'center'),
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'outerContainer', 'color']),
+      columnGap: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'outerContainer', 'columnGap']),
+      display: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'outerContainer', 'display'], 'flex')
+    },
     container: {
       boxSizing: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'container', 'boxSizing'], 'border-box'),
       cursor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'container', 'cursor'], 'pointer'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "1.131.0",
+  "version": "1.131.2",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",