@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTTracker/theme.js

@@ -1 +1,89 @@
-import{VARIANTS}from"./constants";import{getVariant}from"./utils";const getBorderColor=_ref=>{var _theme$Palette$action,_theme$Palette$accent;let{theme:theme,variant:variant}=_ref;return variant===VARIANTS.error?"".concat(theme.Palette.error["04"]," !important"):"".concat((null===(_theme$Palette$action=theme.Palette.actions)||void 0===_theme$Palette$action?void 0:_theme$Palette$action.accent["04"])||(null===(_theme$Palette$accent=theme.Palette.accent)||void 0===_theme$Palette$accent?void 0:_theme$Palette$accent["04"])," !important")},getBorderLightColor=_ref2=>{var _theme$Palette$action2,_theme$Palette$accent2;let{theme:theme,variant:variant}=_ref2;return variant===VARIANTS.error?"".concat(theme.Palette.error["04"]," !important"):"".concat((null===(_theme$Palette$action2=theme.Palette.actions)||void 0===_theme$Palette$action2?void 0:_theme$Palette$action2.accent["04"])||(null===(_theme$Palette$accent2=theme.Palette.accent)||void 0===_theme$Palette$accent2?void 0:_theme$Palette$accent2["04"])," !important")};export const retrieveStyle=_ref3=>{let{theme:theme,variant:variant}=_ref3;const variantTheme=getVariant(variant);return{activeContainer:{borderColor:getBorderColor({theme:theme,variant:variantTheme})},activeInnerContainer:{backgroundColor:getBorderColor({theme:theme,variant:variantTheme})},completedContainer:{borderColor:getBorderColor({theme:theme,variant:variantTheme})},completedInnerContainer:{backgroundColor:getBorderColor({theme:theme,variant:variantTheme})},completedOuterContainer:{opacity:.5},fullContainer:{backgroundColor:getBorderColor({theme:theme,variant:variantTheme})},container:{backgroundColor:theme.Palette.light["01"]},connector:{borderLeft:"2px dashed ".concat(theme.Palette.gray["04"])},detailButtonContainer:{backgroundColor:theme.Palette.light["01"],borderTop:"1px solid ".concat(theme.Palette.light["04"])},containerStep:{backgroundColor:theme.Palette.light["01"],borderColor:theme.Palette.gray["04"]},innerContainer:{backgroundColor:theme.Palette.light["01"]},completedLight:{borderColor:getBorderLightColor({theme:theme,variant:variantTheme}),opacity:.5},errorBanner:{backgroundColor:theme.Palette.error["01"],borderRadius:4,padding:8}}};
+import { VARIANTS } from './constants';
+import { getVariant } from './utils';
+const getBorderColor = _ref => {
+  var _theme$Palette$action, _theme$Palette$accent;
+  let {
+    theme,
+    variant
+  } = _ref;
+  return variant === VARIANTS.error ? "".concat(theme.Palette.error['04'], " !important") : "".concat(((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.accent['04']) || ((_theme$Palette$accent = theme.Palette.accent) === null || _theme$Palette$accent === void 0 ? void 0 : _theme$Palette$accent['04']), " !important");
+};
+const getBorderLightColor = _ref2 => {
+  var _theme$Palette$action2, _theme$Palette$accent2;
+  let {
+    theme,
+    variant
+  } = _ref2;
+  return variant === VARIANTS.error ? "".concat(theme.Palette.error['04'], " !important") : "".concat(((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.accent['04']) || ((_theme$Palette$accent2 = theme.Palette.accent) === null || _theme$Palette$accent2 === void 0 ? void 0 : _theme$Palette$accent2['04']), " !important");
+};
+export const retrieveStyle = _ref3 => {
+  let {
+    theme,
+    variant
+  } = _ref3;
+  const variantTheme = getVariant(variant);
+  return {
+    activeContainer: {
+      borderColor: getBorderColor({
+        theme,
+        variant: variantTheme
+      })
+    },
+    activeInnerContainer: {
+      backgroundColor: getBorderColor({
+        theme,
+        variant: variantTheme
+      })
+    },
+    completedContainer: {
+      borderColor: getBorderColor({
+        theme,
+        variant: variantTheme
+      })
+    },
+    completedInnerContainer: {
+      backgroundColor: getBorderColor({
+        theme,
+        variant: variantTheme
+      })
+    },
+    completedOuterContainer: {
+      opacity: 0.5
+    },
+    fullContainer: {
+      backgroundColor: getBorderColor({
+        theme,
+        variant: variantTheme
+      })
+    },
+    container: {
+      backgroundColor: theme.Palette.light['01']
+    },
+    connector: {
+      borderLeft: "2px dashed ".concat(theme.Palette.gray['04'])
+    },
+    detailButtonContainer: {
+      backgroundColor: theme.Palette.light['01'],
+      borderTop: "1px solid ".concat(theme.Palette.light['04'])
+    },
+    containerStep: {
+      backgroundColor: theme.Palette.light['01'],
+      borderColor: theme.Palette.gray['04']
+    },
+    innerContainer: {
+      backgroundColor: theme.Palette.light['01']
+    },
+    completedLight: {
+      borderColor: getBorderLightColor({
+        theme,
+        variant: variantTheme
+      }),
+      opacity: 0.5
+    },
+    errorBanner: {
+      backgroundColor: theme.Palette.error['01'],
+      borderRadius: 4,
+      padding: 8
+    }
+  };
+};

package/dist/esm/components/UTTracker/utils.js

@@ -1 +1,7 @@
-import{DEFAULT_PROPS,FLAT,VARIANTS}from"./constants";export const getVariant=variant=>VARIANTS[variant]||VARIANTS[DEFAULT_PROPS.variant];export const getLabelTheme=variant=>({[VARIANTS.error]:"error",[VARIANTS.standar]:"accent"}[getVariant(variant)]);export const getContainerStyle=mode=>mode===FLAT?"transparent":"white";
+import { DEFAULT_PROPS, FLAT, VARIANTS } from './constants';
+export const getVariant = variant => VARIANTS[variant] || VARIANTS[DEFAULT_PROPS.variant];
+export const getLabelTheme = variant => ({
+  [VARIANTS.error]: 'error',
+  [VARIANTS.standar]: 'accent'
+})[getVariant(variant)];
+export const getContainerStyle = mode => mode === FLAT ? 'transparent' : 'white';

package/dist/esm/components/UTValidation/README.md

@@ -0,0 +1,69 @@
+# UTValidation
+
+## Description
+
+`UTValidation` is a component designed to display input validation messages in a structured and customizable way. It supports various statuses such as `success`, `error`, and `default`, and can include optional icons for each validation message.
+
+## Props
+
+| Name           | Type   | Default | Description                                                                                  |
+| -------------- | ------ | ------- | -------------------------------------------------------------------------------------------- |
+| className      | string |         | Custom CSS class to apply to the root of the component.                                      |
+| dataTestId     | string |         | Component `data-testid`                                                                      |
+| validationData | array  | []      | Array of validation data objects to display messages, each with a status and optional icons. |
+
+### validationData
+
+The `validationData` prop is an array of objects, each representing a group of validation messages. Each object can optionally have a `title` and must have a `status` and an `items` array. The `items` array contains objects, each with `text`, `status`, and an optional `withIcon` property.
+
+#### Structure of validationData
+
+- **title** (optional): A string representing the title of the validation group.
+- **status** (optional): A string indicating the status of the validation group. Defaults to `default`. Possible values are `success`, `error`, and `default`.
+- **items** (required): An array of objects, each representing an individual validation item.
+  - **text** (required): A string containing the validation message.
+  - **status** (optional): A string indicating the status of the validation item. Defaults to `default`. Possible values are `success`, `error`, and `default`.
+  - **withIcon** (optional): A boolean indicating whether to display an icon next to the validation message. Defaults to `true`.
+
+### Example
+
+```javascript
+const validationData = [
+  {
+    items: [
+      {
+        status: 'success',
+        text: 'Must be at least 8 characters long.',
+        withIcon: true // Optional, defaults to true
+      }
+    ]
+  },
+  {
+    title: 'Must meet at least 2 of the following conditions:',
+    status: 'error',
+    items: [
+      {
+        text: 'At least 1 lowercase letter.' // Defaults to "default" and "withIcon" to true
+      },
+      {
+        text: 'At least 1 uppercase letter.' // Defaults to "default" and "withIcon" to true
+      },
+      {
+        status: 'success',
+        text: 'At least 1 number.',
+        withIcon: false // Will not display an icon
+      }
+    ]
+  }
+];
+```
+
+## Statuses
+
+The `status` prop can be one of these values:
+
+- `success`
+- `error`
+- `default`
+
+If `status` is not provided, it defaults to `default`.

package/dist/esm/components/UTValidation/constants.js

@@ -1 +1,21 @@
-export const STATUSES={success:"success",error:"error",default:"default"};export const ICON_STATUS_COLOR_MAPPER={[STATUSES.success]:"success",[STATUSES.error]:"error",[STATUSES.default]:"light"};export const STATUS_COLOR_MAPPER={[STATUSES.success]:"success",[STATUSES.error]:"error",[STATUSES.default]:"gray"};export const ICON_MAPPER={[STATUSES.success]:"IconCheck",[STATUSES.error]:"IconX"};export const STATUSES_WITH_ICON=[STATUSES.success,STATUSES.error];export const ICON_SIZE=15;
+export const STATUSES = {
+  success: 'success',
+  error: 'error',
+  default: 'default'
+};
+export const ICON_STATUS_COLOR_MAPPER = {
+  [STATUSES.success]: 'success',
+  [STATUSES.error]: 'error',
+  [STATUSES.default]: 'light'
+};
+export const STATUS_COLOR_MAPPER = {
+  [STATUSES.success]: 'success',
+  [STATUSES.error]: 'error',
+  [STATUSES.default]: 'gray'
+};
+export const ICON_MAPPER = {
+  [STATUSES.success]: 'IconCheck',
+  [STATUSES.error]: 'IconX'
+};
+export const STATUSES_WITH_ICON = [STATUSES.success, STATUSES.error];
+export const ICON_SIZE = 15;

package/dist/esm/components/UTValidation/index.js

@@ -1 +1,82 @@
-import React from"react";import isEmpty from"lodash/isEmpty";import{arrayOf,bool,objectOf,shape,string}from"prop-types";import{capitalize}from"../../utils/componentUtils";import UTIcon from"../UTIcon";import UTLabel from"../UTLabel";import WithTheme from"../WithTheme";import{ICON_MAPPER,ICON_SIZE,STATUS_COLOR_MAPPER,STATUSES_WITH_ICON,STATUSES}from"./constants";import{generateItemKey,generateKey}from"./utils";import{retrieveStyle}from"./theme";import styles from"./styles.module.scss";const UTValidation=_ref=>{let{classes:classes,className:className,dataTestId:dataTestId,validationData:validationData=[]}=_ref;if(isEmpty(validationData))return null;return React.createElement("div",{className:"".concat(className," ").concat(styles.container)},validationData.map((_ref2,index)=>{let{items:items,status:status=STATUSES.default,title:title}=_ref2;return React.createElement("div",{key:generateKey({items:items,status:status,title:title},index),className:styles.validationContainer},title&&React.createElement(UTLabel,{colorTheme:STATUS_COLOR_MAPPER[status],variant:"small"},title),React.createElement("div",{className:styles.itemsContainer},items.map((_ref3,itemIndex)=>{let{text:text,status:itemStatus=STATUSES.default,withIcon:withIcon=!0}=_ref3;return React.createElement("div",{key:generateItemKey({text:text,status:itemStatus},itemIndex),className:styles.itemContainer,"data-testid":"".concat(dataTestId,".").concat(index,".").concat(itemIndex)},withIcon&&React.createElement("div",{className:"".concat(styles.iconContainer," ").concat(classes["icon".concat(capitalize(itemStatus))])},(status=>STATUSES_WITH_ICON.includes(status))(itemStatus)&&React.createElement(UTIcon,{colorTheme:itemStatus,name:ICON_MAPPER[itemStatus],size:ICON_SIZE})),React.createElement(UTLabel,{colorTheme:STATUS_COLOR_MAPPER[itemStatus],variant:"small"},text))})))}))};export const validationDataProptypes=arrayOf(shape({items:arrayOf(shape({status:string,text:string,withIcon:bool})),status:string,title:string}));UTValidation.propTypes={classes:objectOf(string),className:string,dataTestId:string,validationData:validationDataProptypes};export default WithTheme(retrieveStyle)(UTValidation);
+import React from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { arrayOf, bool, objectOf, shape, string } from 'prop-types';
+import { capitalize } from '../../utils/componentUtils';
+import UTIcon from '../UTIcon';
+import UTLabel from '../UTLabel';
+import WithTheme from '../WithTheme';
+import { ICON_MAPPER, ICON_SIZE, STATUS_COLOR_MAPPER, STATUSES_WITH_ICON, STATUSES } from './constants';
+import { generateItemKey, generateKey } from './utils';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const UTValidation = _ref => {
+  let {
+    classes,
+    className,
+    dataTestId,
+    validationData = []
+  } = _ref;
+  if (isEmpty(validationData)) return null;
+  const showIcon = status => STATUSES_WITH_ICON.includes(status);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(className, " ").concat(styles.container)
+  }, validationData.map((_ref2, index) => {
+    let {
+      items,
+      status = STATUSES.default,
+      title
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("div", {
+      key: generateKey({
+        items,
+        status,
+        title
+      }, index),
+      className: styles.validationContainer
+    }, title && /*#__PURE__*/React.createElement(UTLabel, {
+      colorTheme: STATUS_COLOR_MAPPER[status],
+      variant: "small"
+    }, title), /*#__PURE__*/React.createElement("div", {
+      className: styles.itemsContainer
+    }, items.map((_ref3, itemIndex) => {
+      let {
+        text,
+        status: itemStatus = STATUSES.default,
+        withIcon = true
+      } = _ref3;
+      return /*#__PURE__*/React.createElement("div", {
+        key: generateItemKey({
+          text,
+          status: itemStatus
+        }, itemIndex),
+        className: styles.itemContainer,
+        "data-testid": "".concat(dataTestId, ".").concat(index, ".").concat(itemIndex)
+      }, withIcon && /*#__PURE__*/React.createElement("div", {
+        className: "".concat(styles.iconContainer, " ").concat(classes["icon".concat(capitalize(itemStatus))])
+      }, showIcon(itemStatus) && /*#__PURE__*/React.createElement(UTIcon, {
+        colorTheme: itemStatus,
+        name: ICON_MAPPER[itemStatus],
+        size: ICON_SIZE
+      })), /*#__PURE__*/React.createElement(UTLabel, {
+        colorTheme: STATUS_COLOR_MAPPER[itemStatus],
+        variant: "small"
+      }, text));
+    })));
+  }));
+};
+export const validationDataProptypes = arrayOf(shape({
+  items: arrayOf(shape({
+    status: string,
+    text: string,
+    withIcon: bool
+  })),
+  status: string,
+  title: string
+}));
+UTValidation.propTypes = {
+  classes: objectOf(string),
+  className: string,
+  dataTestId: string,
+  validationData: validationDataProptypes
+};
+export default WithTheme(retrieveStyle)(UTValidation);

package/dist/esm/components/UTValidation/theme.js

@@ -1 +1,18 @@
-import{STATUSES,ICON_STATUS_COLOR_MAPPER}from"./constants";const variantsColorTheme=(colorTheme,theme)=>theme.Palette[colorTheme];export const retrieveStyle=_ref=>{let{theme:theme}=_ref;return{iconSuccess:{backgroundColor:variantsColorTheme(ICON_STATUS_COLOR_MAPPER[STATUSES.success],theme)["01"]},iconError:{backgroundColor:variantsColorTheme(ICON_STATUS_COLOR_MAPPER[STATUSES.error],theme)["01"]},iconDefault:{backgroundColor:variantsColorTheme(ICON_STATUS_COLOR_MAPPER[STATUSES.default],theme)["04"]}}};
+import { STATUSES, ICON_STATUS_COLOR_MAPPER } from './constants';
+const variantsColorTheme = (colorTheme, theme) => theme.Palette[colorTheme];
+export const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    iconSuccess: {
+      backgroundColor: variantsColorTheme(ICON_STATUS_COLOR_MAPPER[STATUSES.success], theme)['01']
+    },
+    iconError: {
+      backgroundColor: variantsColorTheme(ICON_STATUS_COLOR_MAPPER[STATUSES.error], theme)['01']
+    },
+    iconDefault: {
+      backgroundColor: variantsColorTheme(ICON_STATUS_COLOR_MAPPER[STATUSES.default], theme)['04']
+    }
+  };
+};

package/dist/esm/components/UTValidation/utils.js

@@ -1 +1,14 @@
-export const generateKey=(data,index)=>{const titleKey=data.title||"",statusKey=data.status||"",itemsKey=data.items.map(item=>item.text).join("-");return"".concat(index,"-").concat(titleKey,"-").concat(statusKey,"-").concat(itemsKey)};export const generateItemKey=(item,index)=>"".concat(index,"-").concat(item.status,"-").concat(item.text);export const formatErrorToValidation=(error,options)=>[{items:[{text:error,status:"error",withIcon:null==options?void 0:options.withIcon}]}];
+export const generateKey = (data, index) => {
+  const titleKey = data.title || '';
+  const statusKey = data.status || '';
+  const itemsKey = data.items.map(item => item.text).join('-');
+  return "".concat(index, "-").concat(titleKey, "-").concat(statusKey, "-").concat(itemsKey);
+};
+export const generateItemKey = (item, index) => "".concat(index, "-").concat(item.status, "-").concat(item.text);
+export const formatErrorToValidation = (error, options) => [{
+  items: [{
+    text: error,
+    status: 'error',
+    withIcon: options === null || options === void 0 ? void 0 : options.withIcon
+  }]
+}];

package/dist/esm/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/esm/components/UTVirtualKeyboard/constants.js

@@ -1 +1,59 @@
-export const CAPSLOCK_DELAY=500;export const CAPSLOCKED="capslocked";export const DEFAULT="default";export const SPECIAL_CHARACTERS="special_characters";export const UPPERCASE="uppercase";const ALT="alt",BKSP="bksp",LOCK="lock",SHIFT="shift",ENTER="enter",SPACE="space";export const SPECIAL_KEYS={[ALT]:"{alt}",[BKSP]:"{bksp}",[DEFAULT]:"{default}",[ENTER]:"{enter}",[LOCK]:"{lock}",[SHIFT]:"{shift}",[SPACE]:"{space}"};const FIRST_LINE="q w e r t y u i o p",SECOND_LINE="a s d f g h j k l ñ",THIRD_LINE="{shift} z x c v b n m {bksp}",FOURTH_LINE="{alt} {space} {enter}",UPPERCASED_THIRD_LINE=THIRD_LINE.toUpperCase().replace(SHIFT.toUpperCase(),SHIFT).replace(BKSP.toUpperCase(),BKSP),CAPSLOCKED_THIRD_LINE=UPPERCASED_THIRD_LINE.replace(SHIFT,LOCK),SPECIAL_CHARACTERS_FIRST_LINE="1 2 3 4 5 6 7 8 9 0",SPECIAL_CHARACTERS_SECOND_LINE="@ # $ & * ( ) ' \" , .",SPECIAL_CHARACTERS_THIRD_LINE="{shift} % _ - + = / ; : ! ? {bksp}",SPECIAL_CHARACTERS_FOURTH_LINE=FOURTH_LINE.replace(ALT,DEFAULT);export const 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]:["1 2 3 4 5 6 7 8 9 0","@ # $ & * ( ) ' \" , .",SPECIAL_CHARACTERS_THIRD_LINE,SPECIAL_CHARACTERS_FOURTH_LINE]};export const 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]:"⎵"};
+export const CAPSLOCK_DELAY = 500;
+
+// Layout names
+export const CAPSLOCKED = 'capslocked';
+export const DEFAULT = 'default';
+export const SPECIAL_CHARACTERS = 'special_characters';
+export const UPPERCASE = 'uppercase';
+
+// Special keys
+const ALT = 'alt';
+const BKSP = 'bksp';
+const LOCK = 'lock';
+const SHIFT = 'shift';
+const ENTER = 'enter';
+const SPACE = 'space';
+export const 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
+export const 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
+export const 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/esm/components/UTVirtualKeyboard/index.js

@@ -1 +1,62 @@
-import"react-simple-keyboard/build/css/index.css";import Keyboard from"react-simple-keyboard";import React,{useEffect,useState}from"react";import{bool,func,number,oneOfType,string}from"prop-types";import styles from"./styles.module.scss";import{localKeysHandle,shiftSwitcher}from"./utils";import{DEFAULT,SPECIAL_KEYS,UPPERCASE,WIDERGY_DISPLAY,WIDERGY_LAYOUTS_ES}from"./constants";const UTVirtualKeyboard=_ref=>{let{currentFieldValue:currentFieldValue,handleChangeValue:handleChangeValue,handleOnEnter:handleOnEnter,show:show}=_ref;const[fieldValue,setFieldValue]=useState(currentFieldValue),[layoutName,setLayoutName]=useState(DEFAULT),[shiftPressTimeStamp,setShiftPressTimeStamp]=useState(null),[lastPressedKey,setLastPressedKey]=useState(null);useEffect(()=>{(!fieldValue&&"{bksp}"===lastPressedKey||fieldValue)&&handleChangeValue(fieldValue)},[fieldValue]),useEffect(()=>{setFieldValue(currentFieldValue),setShiftPressTimeStamp(null)},[handleChangeValue]),useEffect(()=>setLayoutName(DEFAULT),[show]);return show?React.createElement(Keyboard,{display:WIDERGY_DISPLAY,layout:WIDERGY_LAYOUTS_ES,layoutName:layoutName,onKeyPress:pressedKey=>{setLastPressedKey(pressedKey),Object.values(SPECIAL_KEYS).includes(pressedKey)?localKeysHandle({fieldValue:fieldValue,layoutName:layoutName,onEnter:handleOnEnter,pressedKey:pressedKey,setFieldValue:setFieldValue,setLayoutName:setLayoutName,setShiftPressTimeStamp:setShiftPressTimeStamp,shiftPressTimeStamp:shiftPressTimeStamp}):(layoutName===UPPERCASE&&shiftSwitcher(layoutName,setLayoutName),setFieldValue("".concat(fieldValue||"").concat(pressedKey)))},theme:styles.keyboard}):null};UTVirtualKeyboard.propTypes={currentFieldValue:oneOfType([string,number]),handleChangeValue:func,handleOnEnter:func,show:bool};export default UTVirtualKeyboard;
+import 'react-simple-keyboard/build/css/index.css';
+import Keyboard from 'react-simple-keyboard';
+import React, { useEffect, useState } from 'react';
+import { bool, func, number, oneOfType, string } from 'prop-types';
+import styles from './styles.module.scss';
+import { localKeysHandle, shiftSwitcher } from './utils';
+import { DEFAULT, SPECIAL_KEYS, UPPERCASE, WIDERGY_DISPLAY, WIDERGY_LAYOUTS_ES } from './constants';
+const UTVirtualKeyboard = _ref => {
+  let {
+    currentFieldValue,
+    handleChangeValue,
+    handleOnEnter,
+    show
+  } = _ref;
+  const [fieldValue, setFieldValue] = useState(currentFieldValue);
+  const [layoutName, setLayoutName] = useState(DEFAULT);
+  const [shiftPressTimeStamp, setShiftPressTimeStamp] = useState(null);
+  const [lastPressedKey, setLastPressedKey] = useState(null);
+  const resetState = () => {
+    setFieldValue(currentFieldValue);
+    setShiftPressTimeStamp(null);
+  };
+  useEffect(() => {
+    if (!fieldValue && lastPressedKey === '{bksp}' || fieldValue) handleChangeValue(fieldValue);
+  }, [fieldValue]);
+  useEffect(resetState, [handleChangeValue]);
+  useEffect(() => setLayoutName(DEFAULT), [show]);
+  const handleKeyPress = pressedKey => {
+    setLastPressedKey(pressedKey);
+    if (Object.values(SPECIAL_KEYS).includes(pressedKey)) {
+      localKeysHandle({
+        fieldValue,
+        layoutName,
+        onEnter: handleOnEnter,
+        pressedKey,
+        setFieldValue,
+        setLayoutName,
+        setShiftPressTimeStamp,
+        shiftPressTimeStamp
+      });
+      return;
+    }
+    if (layoutName === UPPERCASE) {
+      shiftSwitcher(layoutName, setLayoutName);
+    }
+    setFieldValue("".concat(fieldValue || '').concat(pressedKey));
+  };
+  return show ? /*#__PURE__*/React.createElement(Keyboard, {
+    display: WIDERGY_DISPLAY,
+    layout: WIDERGY_LAYOUTS_ES,
+    layoutName: layoutName,
+    onKeyPress: handleKeyPress,
+    theme: styles.keyboard
+  }) : null;
+};
+UTVirtualKeyboard.propTypes = {
+  currentFieldValue: oneOfType([string, number]),
+  handleChangeValue: func,
+  handleOnEnter: func,
+  show: bool
+};
+export default UTVirtualKeyboard;