@widergy/energy-ui 3.48.0 → 3.49.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.49.0](https://github.com/widergy/energy-ui/compare/v3.48.1...v3.49.0) (2024-12-12)
+
+
+### Features
+
+* [UG-2247] forms container in workflows ([#539](https://github.com/widergy/energy-ui/issues/539)) ([7cfb289](https://github.com/widergy/energy-ui/commit/7cfb2895239959f0a154d8fd07d0648d731e10d4))
+
+## [3.48.1](https://github.com/widergy/energy-ui/compare/v3.48.0...v3.48.1) (2024-12-12)
+
+
+### Bug Fixes
+
+* fixes ([#543](https://github.com/widergy/energy-ui/issues/543)) ([3cc67b9](https://github.com/widergy/energy-ui/commit/3cc67b926b20bb9faeccf1aa29ee584aa6fb1382))
+
 # [3.48.0](https://github.com/widergy/energy-ui/compare/v3.47.0...v3.48.0) (2024-12-11)
 
 

package/dist/components/UTVirtualKeyboard/index.js

@@ -24,16 +24,18 @@ const UTVirtualKeyboard = _ref => {
   const [fieldValue, setFieldValue] = (0, _react.useState)(currentFieldValue);
   const [layoutName, setLayoutName] = (0, _react.useState)(_constants.DEFAULT);
   const [shiftPressTimeStamp, setShiftPressTimeStamp] = (0, _react.useState)(null);
+  const [lastPressedKey, setLastPressedKey] = (0, _react.useState)(null);
   const resetState = () => {
     setFieldValue(currentFieldValue);
     setShiftPressTimeStamp(null);
   };
   (0, _react.useEffect)(() => {
-    handleChangeValue(fieldValue);
+    if (!fieldValue && lastPressedKey === '{bksp}' || fieldValue) handleChangeValue(fieldValue);
   }, [fieldValue]);
   (0, _react.useEffect)(resetState, [handleChangeValue]);
   (0, _react.useEffect)(() => setLayoutName(_constants.DEFAULT), [show]);
   const handleKeyPress = pressedKey => {
+    setLastPressedKey(pressedKey);
     if (Object.values(_constants.SPECIAL_KEYS).includes(pressedKey)) {
       (0, _utils.localKeysHandle)({
         fieldValue,

package/dist/components/UTWorkflowContainer/versions/V1/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.childrenContentStyle = exports.VARIANTS = void 0;
+exports.childrenContentStyle = exports.VARIANTS = exports.FORMS_QUERY_SELECTOR = exports.CHILDREN_CONTAINER_ID = void 0;
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DEFAULT = 'default';
@@ -15,4 +15,6 @@ const VARIANTS = exports.VARIANTS = {
 const childrenContentStyle = exports.childrenContentStyle = {
   [VARIANTS.DEFAULT]: _stylesModule.default.childrenContent,
   [VARIANTS.FULL_WIDTH]: _stylesModule.default.childrenContentFullWidth
-};
+};
+const CHILDREN_CONTAINER_ID = exports.CHILDREN_CONTAINER_ID = 'workflow-children-container-';
+const FORMS_QUERY_SELECTOR = exports.FORMS_QUERY_SELECTOR = "#".concat(CHILDREN_CONTAINER_ID).concat(VARIANTS.DEFAULT, " form");

package/dist/components/UTWorkflowContainer/versions/V1/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _UTProgressBar = _interopRequireDefault(require("../../../UTProgressBar"));
 var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
 var _classesUtils = require("../../../../utils/classesUtils");
@@ -60,6 +61,29 @@ const UTWorkflowContainer = _ref => {
   const isNextButtonHidden = nextButton === null || nextButton === void 0 ? void 0 : nextButton.isHidden;
   const isLastStep = stepsCount && stepsCount === currentStep;
   const isNavHidden = !!isLastStep && isBackButtonHidden && isNextButtonHidden;
+  (0, _react.useEffect)(() => {
+    const applyStylesToForms = () => {
+      const formComponents = document.querySelectorAll(_constants.FORMS_QUERY_SELECTOR);
+      if (!(0, _isEmpty.default)(formComponents)) formComponents.forEach(form => {
+        const childrenIsNotEmpty = !(0, _isEmpty.default)(form === null || form === void 0 ? void 0 : form.children);
+        const hasInputs = !(0, _isEmpty.default)(form.querySelectorAll('input'));
+        if (childrenIsNotEmpty && hasInputs) {
+          var _form$classList;
+          form === null || form === void 0 || (_form$classList = form.classList) === null || _form$classList === void 0 || _form$classList.add(_stylesModule.default.formContainer);
+        }
+      });
+    };
+    const observer = new MutationObserver(() => applyStylesToForms());
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    applyStylesToForms();
+    return () => {
+      applyStylesToForms();
+      observer.disconnect();
+    };
+  }, [currentStep, currentStage]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -83,7 +107,8 @@ const UTWorkflowContainer = _ref => {
     tagline: title && tagline,
     title
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.childrenContainer, " ").concat(classes.childrenContainer, " ").concat(variant === _constants.VARIANTS.FULL_WIDTH && "".concat(_stylesModule.default.childrenContainerFullWidth, " ").concat(classes.childrenContainerFullWidth))
+    className: "".concat(_stylesModule.default.childrenContainer, " ").concat(classes.childrenContainer, " ").concat(variant === _constants.VARIANTS.FULL_WIDTH && "".concat(_stylesModule.default.childrenContainerFullWidth, " ").concat(classes.childrenContainerFullWidth)),
+    id: _constants.CHILDREN_CONTAINER_ID + variant
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_constants.childrenContentStyle[variant] || _stylesModule.default.childrenContent, " ").concat(classes.childrenContent)
   }, children))), /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/UTWorkflowContainer/versions/V1/styles.module.scss

@@ -1,4 +1,5 @@
 @use '../../../../scss/variables/mediaQueries.module.scss' as *;
+@use '../../../../scss/variables/colors.module.scss' as *;
 
 $default-variant-max-width: 966px;
 
@@ -91,3 +92,10 @@ $default-variant-max-width: 966px;
   position: relative;
   width: 100%;
 }
+
+.formContainer {
+  background-color: var(--light03, $default-background-form);
+  border-radius: 8px;
+  box-sizing: border-box;
+  padding: 32px 54px;
+}

package/dist/scss/variables/colors.module.scss

@@ -56,6 +56,7 @@ $usage-indicator-gray: #C3C3C3;
 
 $error-red: #F44336;
 $card-background: #FAFAFA;
+$default-background-form: #F4F5F7;
 
 // sass-lint:disable no-misspelled-properties
 // sass-lint:disable property-sort-order

package/package.json

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