@widergy/energy-ui 3.46.0 → 3.48.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.48.0](https://github.com/widergy/energy-ui/compare/v3.47.0...v3.48.0) (2024-12-11)
+
+
+### Features
+
+* [CGE-565] utvirtualkeyboard ([#541](https://github.com/widergy/energy-ui/issues/541)) ([d1d0d5e](https://github.com/widergy/energy-ui/commit/d1d0d5e5ff4a8cce1d1cec78e7b53cb9c49476a4))
+
+# [3.47.0](https://github.com/widergy/energy-ui/compare/v3.46.0...v3.47.0) (2024-12-03)
+
+
+### Features
+
+* added react-credit-cards ([#538](https://github.com/widergy/energy-ui/issues/538)) ([5364625](https://github.com/widergy/energy-ui/commit/5364625a91519253ca26892bee9103c5fef7c232))
+
 # [3.46.0](https://github.com/widergy/energy-ui/compare/v3.45.0...v3.46.0) (2024-12-02)
 
 

package/dist/components/UTAutocomplete/index.js

@@ -27,6 +27,7 @@ const UTAutocomplete = _ref => {
     ArrowIcon,
     autocompleteProps,
     classes = {},
+    dataTestId,
     disabled,
     field,
     fixedSizeListProps,
@@ -98,6 +99,14 @@ const UTAutocomplete = _ref => {
       label: textInputLabel,
       fullWidth: true,
       error: (0, _form.shouldShowErrors)(meta),
+      InputProps: {
+        ...params.InputProps,
+        inputProps: {
+          ...params.inputProps,
+          'data-keyboard': input !== null && input !== void 0 && input.name ? "autocomplete-".concat(input.name) : null,
+          'data-testid': dataTestId
+        }
+      },
       helperText: errorMessage ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
         className: classes.errorLabel,
         colorTheme: "error",
@@ -112,6 +121,7 @@ UTAutocomplete.propTypes = {
   ArrowIcon: _propTypes.elementType,
   autocompleteProps: _propTypes.object,
   classes: (0, _propTypes.objectOf)(_propTypes.string),
+  dataTestId: _propTypes.string,
   disabled: _propTypes.bool,
   input: _formTypes.inputPropTypes.isRequired,
   field: _formTypes.fieldType,

package/dist/components/UTBaseInputField/index.js

@@ -61,13 +61,9 @@ const UTBaseInputField = _ref => {
     }
   }, [onChange, type]);
   const handleKeyDown = (0, _react.useCallback)(event => {
-    if (type === 'numeric') {
-      const allowedKeys = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete', 'Tab'];
-      const isNumericKey = /^[0-9]$/;
-      if (!isNumericKey.test(event.key) && !allowedKeys.includes(event.key)) {
-        event.preventDefault();
-      }
-    }
+    const allowedKey = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete', 'Tab'].includes(event.key);
+    const isNumericKey = /^[0-9]$/.test(event.key);
+    if (type === 'numeric' && !isNumericKey && !allowedKey) event.preventDefault();else if (!allowedKey) event.stopPropagation();
   }, [type]);
   const multiline = maxRows > 1;
   const hasCharactersCount = (0, _react.useMemo)(() => showCharacterCount && maxLength && !disabled && !readOnly, [showCharacterCount, maxLength, disabled, readOnly]);

package/dist/components/UTCBUInput/versions/V0/index.js

@@ -24,7 +24,8 @@ const UTCBUInput = _ref => {
   } = _ref;
   const {
     onChange,
-    value
+    value,
+    name
   } = input;
   const {
     placeholder,
@@ -57,6 +58,7 @@ const UTCBUInput = _ref => {
     },
     helperTextDataTestId: helperTextDataTestId,
     input: {
+      name,
       onChange: onChangeText,
       value: {
         [cbuNumberKey]: value[cbuNumberKey],

package/dist/components/UTCuit/index.js

@@ -97,7 +97,10 @@ class UTCuit extends _react.PureComponent {
     const {
       documentDataTestId,
       prefixDataTestId,
-      verificationCodeDataTestId
+      verificationCodeDataTestId,
+      input: {
+        name
+      }
     } = this.props;
     this.handleFocus();
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -116,7 +119,8 @@ class UTCuit extends _react.PureComponent {
       InputProps: {
         type: 'input',
         inputProps: {
-          'data-testid': prefixDataTestId
+          'data-testid': prefixDataTestId,
+          'data-keyboard': name ? "prefix-".concat(name) : null
         }
       },
       label: this.props.field.label,
@@ -135,7 +139,8 @@ class UTCuit extends _react.PureComponent {
       InputProps: {
         type: 'text',
         inputProps: {
-          'data-testid': documentDataTestId
+          'data-testid': documentDataTestId,
+          'data-keyboard': name ? "document-".concat(name) : null
         }
       },
       inputRef: this.documentRef,
@@ -154,7 +159,8 @@ class UTCuit extends _react.PureComponent {
       InputProps: {
         type: 'input',
         inputProps: {
-          'data-testid': verificationCodeDataTestId
+          'data-testid': verificationCodeDataTestId,
+          'data-keyboard': name ? "verificationCode-".concat(name) : null
         }
       },
       margin: "none",

package/dist/components/UTPhoneInput/versions/V0/index.js

@@ -223,7 +223,8 @@ class UTPhoneInput extends _react.PureComponent {
           input: inputClassName
         },
         inputProps: {
-          'data-testid': areaCodeDataTestId
+          'data-testid': areaCodeDataTestId,
+          'data-keyboard': input !== null && input !== void 0 && input.name ? "areaCode-".concat(input === null || input === void 0 ? void 0 : input.name) : null
         }
       }
     }, areaCodeFieldProps)), /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
@@ -256,7 +257,8 @@ class UTPhoneInput extends _react.PureComponent {
           input: inputClassName
         },
         inputProps: {
-          'data-testid': phoneNumberDataTestId
+          'data-testid': phoneNumberDataTestId,
+          'data-keyboard': input !== null && input !== void 0 && input.name ? "phoneNumber-".concat(input === null || input === void 0 ? void 0 : input.name) : null
         }
       }
     }, phoneNumberFieldProps)))), (error || (0, _form.shouldShowErrors)(meta)) && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {

package/dist/components/UTTextArea/versions/V0/index.js

@@ -25,6 +25,7 @@ const UTTextArea = _ref => {
     disabled,
     field,
     HelpIcon,
+    input,
     inputProps = {},
     onBlur,
     onChange,
@@ -64,6 +65,7 @@ const UTTextArea = _ref => {
   }, /*#__PURE__*/_react.default.createElement("textarea", _extends({}, inputProps, {
     className: "".concat(_stylesModule.default.textarea, " ").concat(textarea, " ").concat(classes.textarea),
     "data-testid": dataTestId,
+    "data-keyboard": input === null || input === void 0 ? void 0 : input.name,
     onChange: handleOnChange,
     onBlur: onBlur,
     onFocus: onFocus,
@@ -93,6 +95,7 @@ UTTextArea.propTypes = {
   disabled: _propTypes.bool,
   field: _formTypes.fieldType,
   HelpIcon: _propTypes.elementType,
+  input: _propTypes.object,
   inputProps: _formTypes.inputPropTypes,
   onBlur: _propTypes.func,
   onChange: _propTypes.func,

package/dist/components/UTTextInput/versions/V0/index.js

@@ -149,7 +149,8 @@ class UTTextInput extends _react.PureComponent {
       InputProps: {
         id: fieldId,
         inputProps: {
-          'data-testid': dataTestId
+          'data-testid': dataTestId,
+          'data-keyboard': (input === null || input === void 0 ? void 0 : input.name) || null
         },
         endAdornment: endAction && /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
           position: "end",

package/dist/components/UTVirtualKeyboard/README.md

@@ -0,0 +1,197 @@
+# UTVirtualKeyboard
+
+## Description
+
+Configurable virtual keyboard intended for use within products running on devices without access to a physical keyboard or whose keyboard, either physical or virtual, can't be trusted.
+
+## Props
+
+| Name                | Type               | Default | Description                                              |
+| ------------------- | ------------------ | ------- | -------------------------------------------------------- |
+| `currentFieldValue` | `string \| number` | -       | Current value of the field the keyboard is modifying.    |
+| `handleChangeValue` | `function`         | -       | Method used by the keyboard to update the field's value. |
+| `handleOnEnter`     | `function`         | -       | Method invoked when the `{enter}` key is pressed.        |
+| `show`              | `boolean`          | -       | Whether the keyboard is rendered or not.                 |
+
+## Auxiliary Methods
+
+This methods can be found in `utils/keyboardUtils.js` and are intended for general use of the keyboard, allowing it's use within forms, particularly `redux-form` components.
+For any other case, custom methods can be used, as long as the keyboard gets the `current value` of the focused field, and the methods to execute `onEnter` and `onValueChange`.
+
+### clickForKeyboard
+
+This method is intended to be used within a `click` `eventListener`. The objective of it's execution is to define whether or not to open the keyboard in response to a `click event`.
+It requires to be instanced before being passed to the `event listener`.
+
+```jsx
+const openKeyboard = clickForKeyboard(formList, setFieldIdentifiers, setShowKeyboard, showKeyboard);
+```
+
+This instance expects:
+
+| Argument              | Type       | Default | Description                                                                                                    |
+| --------------------- | ---------- | ------- | -------------------------------------------------------------------------------------------------------------- |
+| `formList`            | `object`   | -       | The `form` key (or it's equivalent) from the redux store that contains a list of every active form on the app. |
+| `setFieldIdentifiers` | `function` | -       | The `setState` `function` that modifies the `fieldIdentifiers` `object` in the parent component.               |
+| `setShowKeyboard`     | `function` | -       | The `setState` `function` that modifies the value of `showKeyboard` in the parent component.                   |
+| `showKeyboard`        | `boolean`  | -       | The value that defines whether the keyboard is rendered or not.                                                |
+
+After being instanced it can be passed to the `event listener` and it's able to handle the event as it's sent by the browser
+
+```jsx
+window.addEventListener('click', openKeyboard);
+```
+
+Always remember to `remove` `event listeners`, specially if you add them in a `useEffect`
+
+```jsx
+seEffect(() => {
+  window.addEventListener('click', openKeyboard);
+  return () => {
+    window.removeEventListener('click', openKeyboard);
+  };
+}, [{ dependencies }]);
+```
+
+### getIsInputForKeyboard
+
+This method is used within `clickForKeyboard`, but it could be useful on it's own.
+
+The idea behind this method is to check if the `clicked` element is an `input` o a `textarea` to define if it's posible to type within said element. If it's an `input` it alse checks that it's `type` is within those `inputs` that can be typed within.
+
+| Argument   | Type     | Default | Description                                 |
+| ---------- | -------- | ------- | ------------------------------------------- |
+| `nodeName` | `string` | -       | The `nodeName` property of a `event.target` |
+| `type`     | `string` | -       | The `type` property of a `event.target`     |
+
+### getIsKeyboard
+
+This method is used within `clickForKeyboard`, but it could be useful on it's own.
+
+The idea behind this method is to check if the `clicked` element is part of the `UTVirtualKeyboard`
+
+| Argument      | Type     | Default | Description                             |
+| ------------- | -------- | ------- | --------------------------------------- |
+| `eventTarget` | `object` | -       | The `event.target` object               |
+| `type`        | `string` | -       | The `type` property of a `event.target` |
+
+### getFieldValue
+
+This method is used to get the `current value` of the focused `field`. The search is made within the `form` `key` of the `redux store`.
+
+| Argument             | Type       | Default | Description                                               |
+| -------------------- | ---------- | ------- | --------------------------------------------------------- |
+| `currentIdentifiers` | `object`   | -       | The `fieldIdentifiers` `object` from the parent component |
+| `fieldSelector`      | `function` | -       | A `selector` function to search within the state          |
+| `state`              | `object`   | -       | The `form` key of the `redux state`                       |
+
+```jsx
+const state = reduxStore.getState();
+const { form: formList } = state;
+
+const [fieldIdentifiers, setFieldIdentifiers] = useState(null);
+
+const selector = formName => formValueSelector(formName);
+
+const currentFieldValue = getFieldValue(fieldIdentifiers, selector, state);
+```
+
+### indentifyField
+
+This method is used within `clickForKeyboard`, but it could be useful on it's own.
+
+The idea behind this method is to get `identifying values` that allow to define which field to work upon when using the `UTVirtualKeyboard`
+
+| Argument      | Type     | Default | Description                                                                                                    |
+| ------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------- |
+| `eventTarget` | `object` | -       | The `event.target` object                                                                                      |
+| `forms`       | `object` | -       | The `form` key (or it's equivalent) from the redux store that contains a list of every active form on the app. |
+
+### preventPointerDown
+
+This method is used within `clickForKeyboard`, but it could be useful on it's own.
+
+The idea behind this method is to be used within a `pointerdown` `event listener`. It's sole function is to do a `preventDefault` of the
+aforementioned event.
+
+## Keyboard Simplified Usage
+
+```jsx
+import React, {useState} from 'react';
+
+import { UTVirtualKeyboard } from '@widergy/energy-ui';
+
+const Example = () => {
+  const [showKeyboard, setShowKeyboard] = useState(true);
+
+  let currentFieldValue = 'foo';
+
+  const handleChangeValue = () => currentFieldValue = 'bar';
+
+  const handleOnEnter () => {
+    console.log(currentFieldValue);
+    setShowKeyboard(false)
+  };
+
+  return (
+    <UTVirtualKeyboard
+      show={showKeyboard}
+      currentFieldValue={currentFieldValue}
+      handleChangeValue={handleKeyboardChangeValue}
+      handleOnEnter={handleKeyboardEnter}
+    />
+  );
+};
+
+export default Exampe;
+```
+
+## Keyboard Extended Usage (as implemented in UGTotem)
+
+```jsx
+import React, { useEffect, useState } from 'react';
+import { UTVirtualKeyboard, keyboardUtils } from '@widergy/energy-ui';
+
+import reduxStore from 'redux/store';
+
+const App = ({ location }) => {
+  const state = reduxStore.getState();
+  const { form: formList } = state;
+
+  const [showKeyboard, setShowKeyboard] = useState(false);
+  const [fieldIdentifiers, setFieldIdentifiers] = useState(null);
+
+  const openKeyboard = clickForKeyboard(formList, setFieldIdentifiers, setShowKeyboard, showKeyboard);
+
+  const selector = formName => formValueSelector(formName);
+
+  const currentFieldValue = getFieldValue(fieldIdentifiers, selector, state);
+
+  const handleKeyboardChangeValue = value => {
+    const { onChange } = fieldIdentifiers || {};
+    if (onChange)
+      onChange({
+        target: { value }
+      });
+  };
+  const handleKeyboardEnter = () => dispatch(submit(fieldIdentifiers?.formName));
+
+  useEffect(() => {
+    window.addEventListener('click', openKeyboard);
+    return () => {
+      window.removeEventListener('click', openKeyboard);
+    };
+  }, [showKeyboard, fieldIdentifiers, formList]);
+
+  useEffect(() => setShowKeyboard(false), [location]);
+
+  return (
+    <UTVirtualKeyboard
+      show={showKeyboard}
+      currentFieldValue={currentFieldValue}
+      handleChangeValue={handleKeyboardChangeValue}
+      handleOnEnter={handleKeyboardEnter}
+    />
+  );
+};
+```

package/dist/components/UTVirtualKeyboard/constants.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WIDERGY_LAYOUTS_ES = exports.WIDERGY_DISPLAY = exports.UPPERCASE = exports.SPECIAL_KEYS = exports.SPECIAL_CHARACTERS = exports.DEFAULT = exports.CAPSLOCK_DELAY = exports.CAPSLOCKED = void 0;
+const CAPSLOCK_DELAY = exports.CAPSLOCK_DELAY = 500;
+
+// Layout names
+const CAPSLOCKED = exports.CAPSLOCKED = 'capslocked';
+const DEFAULT = exports.DEFAULT = 'default';
+const SPECIAL_CHARACTERS = exports.SPECIAL_CHARACTERS = 'special_characters';
+const UPPERCASE = exports.UPPERCASE = 'uppercase';
+
+// Special keys
+const ALT = 'alt';
+const BKSP = 'bksp';
+const LOCK = 'lock';
+const SHIFT = 'shift';
+const ENTER = 'enter';
+const SPACE = 'space';
+const SPECIAL_KEYS = exports.SPECIAL_KEYS = {
+  [ALT]: '{alt}',
+  [BKSP]: '{bksp}',
+  [DEFAULT]: '{default}',
+  [ENTER]: '{enter}',
+  [LOCK]: '{lock}',
+  [SHIFT]: '{shift}',
+  [SPACE]: '{space}'
+};
+
+// Static keyboard lines
+const FIRST_LINE = 'q w e r t y u i o p';
+const SECOND_LINE = 'a s d f g h j k l ñ';
+const THIRD_LINE = '{shift} z x c v b n m {bksp}';
+const FOURTH_LINE = '{alt} {space} {enter}';
+
+// Uppercased lines
+const UPPERCASED_THIRD_LINE = THIRD_LINE.toUpperCase().replace(SHIFT.toUpperCase(), SHIFT).replace(BKSP.toUpperCase(), BKSP);
+const CAPSLOCKED_THIRD_LINE = UPPERCASED_THIRD_LINE.replace(SHIFT, LOCK);
+
+// Special characters lines
+const SPECIAL_CHARACTERS_FIRST_LINE = '1 2 3 4 5 6 7 8 9 0';
+const SPECIAL_CHARACTERS_SECOND_LINE = "@ # $ & * ( ) ' \" , .";
+const SPECIAL_CHARACTERS_THIRD_LINE = '{shift} % - + = / ; : ! ? {bksp}';
+const SPECIAL_CHARACTERS_FOURTH_LINE = FOURTH_LINE.replace(ALT, DEFAULT);
+
+// Final layouts
+const WIDERGY_LAYOUTS_ES = exports.WIDERGY_LAYOUTS_ES = {
+  [DEFAULT]: [FIRST_LINE, SECOND_LINE, THIRD_LINE, FOURTH_LINE],
+  [UPPERCASE]: [FIRST_LINE.toUpperCase(), SECOND_LINE.toUpperCase(), UPPERCASED_THIRD_LINE, FOURTH_LINE],
+  [CAPSLOCKED]: [FIRST_LINE.toUpperCase(), SECOND_LINE.toUpperCase(), CAPSLOCKED_THIRD_LINE, FOURTH_LINE],
+  [SPECIAL_CHARACTERS]: [SPECIAL_CHARACTERS_FIRST_LINE, SPECIAL_CHARACTERS_SECOND_LINE, SPECIAL_CHARACTERS_THIRD_LINE, SPECIAL_CHARACTERS_FOURTH_LINE]
+};
+
+// Special keys displays
+const WIDERGY_DISPLAY = exports.WIDERGY_DISPLAY = {
+  [SPECIAL_KEYS.alt]: '.?123',
+  [SPECIAL_KEYS.bksp]: '⌫',
+  [SPECIAL_KEYS.default]: 'ABC',
+  [SPECIAL_KEYS.enter]: '↲',
+  [SPECIAL_KEYS.lock]: '⇪',
+  [SPECIAL_KEYS.shift]: '⇧',
+  [SPECIAL_KEYS.space]: '⎵'
+};

package/dist/components/UTVirtualKeyboard/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("react-simple-keyboard/build/css/index.css");
+var _reactSimpleKeyboard = _interopRequireDefault(require("react-simple-keyboard"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _utils = require("./utils");
+var _constants = require("./constants");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const UTVirtualKeyboard = _ref => {
+  let {
+    currentFieldValue,
+    handleChangeValue,
+    handleOnEnter,
+    show
+  } = _ref;
+  const [fieldValue, setFieldValue] = (0, _react.useState)(currentFieldValue);
+  const [layoutName, setLayoutName] = (0, _react.useState)(_constants.DEFAULT);
+  const [shiftPressTimeStamp, setShiftPressTimeStamp] = (0, _react.useState)(null);
+  const resetState = () => {
+    setFieldValue(currentFieldValue);
+    setShiftPressTimeStamp(null);
+  };
+  (0, _react.useEffect)(() => {
+    handleChangeValue(fieldValue);
+  }, [fieldValue]);
+  (0, _react.useEffect)(resetState, [handleChangeValue]);
+  (0, _react.useEffect)(() => setLayoutName(_constants.DEFAULT), [show]);
+  const handleKeyPress = pressedKey => {
+    if (Object.values(_constants.SPECIAL_KEYS).includes(pressedKey)) {
+      (0, _utils.localKeysHandle)({
+        fieldValue,
+        layoutName,
+        onEnter: handleOnEnter,
+        pressedKey,
+        setFieldValue,
+        setLayoutName,
+        setShiftPressTimeStamp,
+        shiftPressTimeStamp
+      });
+      return;
+    }
+    if (layoutName === _constants.UPPERCASE) {
+      (0, _utils.shiftSwitcher)(layoutName, setLayoutName);
+    }
+    setFieldValue("".concat(fieldValue || '').concat(pressedKey));
+  };
+  return show ? /*#__PURE__*/_react.default.createElement(_reactSimpleKeyboard.default, {
+    display: _constants.WIDERGY_DISPLAY,
+    layout: _constants.WIDERGY_LAYOUTS_ES,
+    layoutName: layoutName,
+    onKeyPress: handleKeyPress,
+    theme: _stylesModule.default.keyboard
+  }) : null;
+};
+UTVirtualKeyboard.propTypes = {
+  currentFieldValue: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number]),
+  handleChangeValue: _propTypes.func,
+  handleOnEnter: _propTypes.func,
+  show: _propTypes.bool
+};
+var _default = exports.default = UTVirtualKeyboard;

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

@@ -0,0 +1,102 @@
+$key-shadow: #00000038;
+
+.keyboard {
+  background-color: var(--light04);
+  bottom: 0;
+  padding: 48px 12px;
+  position: sticky;
+  z-index: 1;
+
+  @media (orientation: landscape) {
+    padding: 32px 16px;
+  }
+
+  :global(.hg-rows) {
+    display: flex;
+    flex-direction: column;
+    grid-gap: 48px;
+    width: 100%;
+  
+    @media (orientation: landscape) {
+      grid-gap: 18px;
+    }
+  
+    :global(.hg-row) {
+      display: flex;
+      grid-gap: 16px;
+      justify-content: center;
+    
+      @media (orientation: landscape) {
+        grid-gap: 18px;
+      }
+
+      :global(.hg-button) {
+        align-items: center;
+        background: var(--light01);
+        border-radius: 10px;
+        box-shadow: 0px 3px 0px 0px $key-shadow;
+        color: var(--gray04);
+        display: flex;
+        height: 184px;
+        justify-content: center;
+        max-width: 91px;
+        width: 91px;
+      
+        > span {
+          font-size: 50px;
+          pointer-events: none;
+        }
+      
+        @media (orientation: landscape) {
+          height: 92px;
+          max-width: 172px;
+          width: 172px;
+      
+          > span {
+            font-size: 40px;
+          }
+        }
+      }
+
+      [data-skbtn="{alt}"],
+      [data-skbtn="{bksp}"],
+      [data-skbtn="{default}"],
+      [data-skbtn="{enter}"],
+      [data-skbtn="{lock}"],
+      [data-skbtn="{shift}"] {
+        background-color: var(--light03);
+        font-weight: 500;
+        min-width: 117px;
+      
+        > span {
+          font-size: 40px;
+        }
+      
+        @media (orientation: landscape) {
+          font-weight: 400;
+          min-width: 254px;
+        }
+      }
+      
+      [data-skbtn="{bksp}"],
+      [data-skbtn="{enter}"] {
+        margin-left: auto;
+      }
+      
+      [data-skbtn="{alt}"],
+      [data-skbtn="{default}"],
+      [data-skbtn="{lock}"],
+      [data-skbtn="{shift}"] {
+        margin-right: auto;
+      }
+      
+      [data-skbtn="{space}"] {
+        min-width: 725px;
+      
+        @media (orientation: landscape) {
+          min-width: 1228px;
+        }
+      }
+    }
+  }
+}

package/dist/components/UTVirtualKeyboard/utils.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shiftSwitcher = exports.localKeysHandle = void 0;
+var _constants = require("./constants");
+const shiftSwitcher = (layoutName, setLayoutName) => {
+  switch (layoutName) {
+    case _constants.DEFAULT:
+      setLayoutName(_constants.UPPERCASE);
+      break;
+    case _constants.UPPERCASE:
+      setLayoutName(_constants.DEFAULT);
+      break;
+    case _constants.SPECIAL_CHARACTERS:
+      setLayoutName(_constants.UPPERCASE);
+      break;
+    default:
+      break;
+  }
+};
+exports.shiftSwitcher = shiftSwitcher;
+const localKeysHandle = _ref => {
+  let {
+    fieldValue,
+    layoutName,
+    onEnter,
+    pressedKey,
+    setFieldValue,
+    setLayoutName,
+    setShiftPressTimeStamp,
+    shiftPressTimeStamp
+  } = _ref;
+  switch (pressedKey) {
+    case _constants.SPECIAL_KEYS.alt:
+      setLayoutName(_constants.SPECIAL_CHARACTERS);
+      break;
+    case _constants.SPECIAL_KEYS.default:
+      setLayoutName(_constants.DEFAULT);
+      break;
+    case _constants.SPECIAL_KEYS.shift:
+      if (shiftPressTimeStamp && Date.now() - shiftPressTimeStamp < _constants.CAPSLOCK_DELAY) {
+        setLayoutName(_constants.CAPSLOCKED);
+        return;
+      }
+      setShiftPressTimeStamp(Date.now());
+      shiftSwitcher(layoutName, setLayoutName);
+      break;
+    case _constants.SPECIAL_KEYS.lock:
+      setLayoutName(layoutName === _constants.DEFAULT ? _constants.UPPERCASE : _constants.DEFAULT);
+      break;
+    case _constants.SPECIAL_KEYS.bksp:
+      setFieldValue(fieldValue ? fieldValue.slice(0, -1) : '');
+      break;
+    case _constants.SPECIAL_KEYS.enter:
+      onEnter();
+      break;
+    case _constants.SPECIAL_KEYS.space:
+      setFieldValue("".concat(fieldValue || '', ' '));
+      break;
+    default:
+      break;
+  }
+};
+exports.localKeysHandle = localKeysHandle;

package/dist/constants/keyboardConstants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NO_FORM = exports.KEYBOARD_ALLOWED_TYPES = exports.HANDLER_IDENTIFIER = void 0;
+const HANDLER_IDENTIFIER = exports.HANDLER_IDENTIFIER = 'reactEvent';
+const NO_FORM = exports.NO_FORM = 'NO_FORM';
+const KEYBOARD_ALLOWED_TYPES = exports.KEYBOARD_ALLOWED_TYPES = ['date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'text'];

package/dist/index.js

@@ -411,6 +411,12 @@ Object.defineProperty(exports, "UTValidation", {
     return _UTValidation.default;
   }
 });
+Object.defineProperty(exports, "UTVirtualKeyboard", {
+  enumerable: true,
+  get: function () {
+    return _UTVirtualKeyboard.default;
+  }
+});
 Object.defineProperty(exports, "UTVirtualizedList", {
   enumerable: true,
   get: function () {
@@ -441,9 +447,16 @@ Object.defineProperty(exports, "componentUtils", {
     return _componentUtils.default;
   }
 });
+Object.defineProperty(exports, "keyboardUtils", {
+  enumerable: true,
+  get: function () {
+    return _keyboardUtils.default;
+  }
+});
 var _AlertHandler = _interopRequireDefault(require("./components/UTAlert/AlertHandler"));
 var _componentUtils = _interopRequireDefault(require("./utils/componentUtils"));
 var _EnergyThemeProvider = _interopRequireDefault(require("./components/EnergyThemeProvider"));
+var _keyboardUtils = _interopRequireDefault(require("./utils/keyboardUtils"));
 var _UTActionCard = _interopRequireDefault(require("./components/UTActionCard"));
 var _UTAlert = _interopRequireDefault(require("./components/UTAlert"));
 var _UTAttachment = _interopRequireDefault(require("./components/UTAttachment"));
@@ -511,6 +524,7 @@ var _UTTouchableWithoutFeedback = _interopRequireDefault(require("./components/U
 var _UTTracker = _interopRequireDefault(require("./components/UTTracker"));
 var _UTValidation = _interopRequireDefault(require("./components/UTValidation"));
 var _UTVirtualizedList = _interopRequireDefault(require("./components/UTVirtualizedList"));
+var _UTVirtualKeyboard = _interopRequireDefault(require("./components/UTVirtualKeyboard"));
 var _UTWorkflowContainer = _interopRequireDefault(require("./components/UTWorkflowContainer"));
 var _WithLoading = _interopRequireDefault(require("./components/WithLoading"));
 var _WithTouch = _interopRequireDefault(require("./components/WithTouch"));

package/dist/utils/keyboardUtils.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.preventPointerDown = exports.identifyField = exports.getIsKeyboard = exports.getIsInputForKeyboard = exports.getFieldValue = exports.default = exports.clickForKeyboard = void 0;
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _keyboardConstants = require("../constants/keyboardConstants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const preventPointerDown = e => e.preventDefault();
+exports.preventPointerDown = preventPointerDown;
+const identifyField = function () {
+  let eventTarget = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let forms = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    dataset: {
+      keyboard: inputName
+    }
+  } = eventTarget;
+  const fieldName = inputName.includes('-') ? inputName.split('-')[1] : inputName;
+  const fieldPrefix = inputName.includes('-') ? inputName.split('-')[0] : null;
+  const formsArray = Object.entries(forms);
+  // eslint-disable-next-line no-unused-vars
+  const [formName] = formsArray.find(_ref => {
+    let [_, {
+      registeredFields
+    }] = _ref;
+    return registeredFields ? Object.keys(registeredFields).includes(fieldName) : false;
+  }) || [_keyboardConstants.NO_FORM];
+  const eventHandlersKey = Object.keys(eventTarget).find(key => key.includes(_keyboardConstants.HANDLER_IDENTIFIER));
+  const {
+    onChange
+  } = eventTarget[eventHandlersKey] || {};
+  return {
+    fieldName,
+    fieldPrefix,
+    formName,
+    onChange
+  };
+};
+exports.identifyField = identifyField;
+const getFieldValue = (currentIdentifiers, fieldSelector, state) => {
+  var _fieldSelector, _fieldSelector2, _fieldSelector3;
+  if (!(0, _isEmpty.default)(currentIdentifiers)) {
+    const {
+      fieldName,
+      fieldPrefix,
+      formName
+    } = currentIdentifiers || {};
+    switch (fieldPrefix) {
+      case 'areaCode':
+      case 'prefix':
+        return (_fieldSelector = fieldSelector(formName || '')(state, fieldName)) === null || _fieldSelector === void 0 ? void 0 : _fieldSelector.split('-')[0];
+      case 'phoneNumber':
+      case 'document':
+        return (_fieldSelector2 = fieldSelector(formName || '')(state, fieldName)) === null || _fieldSelector2 === void 0 ? void 0 : _fieldSelector2.split('-')[1];
+      case 'verificationCode':
+        return (_fieldSelector3 = fieldSelector(formName || '')(state, fieldName)) === null || _fieldSelector3 === void 0 ? void 0 : _fieldSelector3.split('-')[2];
+      default:
+        return fieldSelector(formName || '')(state, fieldName);
+    }
+  }
+};
+exports.getFieldValue = getFieldValue;
+const getIsKeyboard = eventTarget => {
+  const {
+    dataset: {
+      skbtn,
+      skinstance
+    },
+    classList
+  } = eventTarget;
+  return skbtn || skinstance || [...classList].some(cssClass => cssClass.includes('hg-'));
+};
+exports.getIsKeyboard = getIsKeyboard;
+const getIsInputForKeyboard = (nodeName, type) => nodeName === 'INPUT' && _keyboardConstants.KEYBOARD_ALLOWED_TYPES.includes(type) || nodeName === 'TEXTAREA';
+exports.getIsInputForKeyboard = getIsInputForKeyboard;
+const clickForKeyboard = (formList, setFieldIdentifiers, setShowKeyboard, showKeyboard) => _ref2 => {
+  let {
+    target: eventTarget
+  } = _ref2;
+  const {
+    nodeName,
+    type
+  } = eventTarget;
+  const isKeyboard = getIsKeyboard(eventTarget);
+  const isInputForKeyboard = getIsInputForKeyboard(nodeName, type);
+  if (isInputForKeyboard) {
+    const identifiers = identifyField(eventTarget, formList);
+    if (identifiers.fieldPrefix === 'autocomplete') {
+      window.addEventListener('pointerdown', preventPointerDown);
+    }
+    setFieldIdentifiers(identifiers);
+    if (!showKeyboard) {
+      setShowKeyboard(true);
+    }
+  } else if (!isInputForKeyboard && !isKeyboard) {
+    setShowKeyboard(false);
+    window.removeEventListener('pointerdown', preventPointerDown);
+  }
+};
+exports.clickForKeyboard = clickForKeyboard;
+var _default = exports.default = {
+  identifyField,
+  getFieldValue,
+  getIsKeyboard,
+  getIsInputForKeyboard,
+  clickForKeyboard
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.46.0",
+  "version": "3.48.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",
@@ -44,11 +44,13 @@
     "intro.js-react": "0.7.1",
     "numeral": "^2.0.6",
     "object-hash": "^3.0.0",
+    "react-credit-cards": "^0.7.0",
     "react-google-maps": ">=9.2.2",
     "react-google-recaptcha": "^3.1.0",
     "react-jss": "^8.6.1",
     "react-markdown": "^8.0.7",
     "react-perfect-scrollbar": "^1.5.3",
+    "react-simple-keyboard": "^3.8.28",
     "react-transition-group": "^4.2.2",
     "react-window": "^1.8.5",
     "rehype-raw": "^6.1.0",