@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +1,65 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),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,CAPSLOCKED=exports.CAPSLOCKED="capslocked",DEFAULT=exports.DEFAULT="default",SPECIAL_CHARACTERS=exports.SPECIAL_CHARACTERS="special_characters",UPPERCASE=exports.UPPERCASE="uppercase",ALT="alt",BKSP="bksp",LOCK="lock",SHIFT="shift",ENTER="enter",SPACE="space",SPECIAL_KEYS=exports.SPECIAL_KEYS={[ALT]:"{alt}",[BKSP]:"{bksp}",[DEFAULT]:"{default}",[ENTER]:"{enter}",[LOCK]:"{lock}",[SHIFT]:"{shift}",[SPACE]:"{space}"},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),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]:["1 2 3 4 5 6 7 8 9 0","@ # $ & * ( ) ' \" , .",SPECIAL_CHARACTERS_THIRD_LINE,SPECIAL_CHARACTERS_FOURTH_LINE]},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]:"⎵"};
+"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

@@ -1 +1,70 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0,require("react-simple-keyboard/build/css/index.css");var _reactSimpleKeyboard=_interopRequireDefault(require("react-simple-keyboard")),_react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_utils=require("./utils"),_constants=require("./constants");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const UTVirtualKeyboard=_ref=>{let{currentFieldValue:currentFieldValue,handleChangeValue:handleChangeValue,handleOnEnter:handleOnEnter,show:show}=_ref;const[fieldValue,setFieldValue]=(0,_react.useState)(currentFieldValue),[layoutName,setLayoutName]=(0,_react.useState)(_constants.DEFAULT),[shiftPressTimeStamp,setShiftPressTimeStamp]=(0,_react.useState)(null),[lastPressedKey,setLastPressedKey]=(0,_react.useState)(null);(0,_react.useEffect)(()=>{(!fieldValue&&"{bksp}"===lastPressedKey||fieldValue)&&handleChangeValue(fieldValue)},[fieldValue]),(0,_react.useEffect)(()=>{setFieldValue(currentFieldValue),setShiftPressTimeStamp(null)},[handleChangeValue]),(0,_react.useEffect)(()=>setLayoutName(_constants.DEFAULT),[show]);return show?_react.default.createElement(_reactSimpleKeyboard.default,{display:_constants.WIDERGY_DISPLAY,layout:_constants.WIDERGY_LAYOUTS_ES,layoutName:layoutName,onKeyPress:pressedKey=>{setLastPressedKey(pressedKey),Object.values(_constants.SPECIAL_KEYS).includes(pressedKey)?(0,_utils.localKeysHandle)({fieldValue:fieldValue,layoutName:layoutName,onEnter:handleOnEnter,pressedKey:pressedKey,setFieldValue:setFieldValue,setLayoutName:setLayoutName,setShiftPressTimeStamp:setShiftPressTimeStamp,shiftPressTimeStamp:shiftPressTimeStamp}):(layoutName===_constants.UPPERCASE&&(0,_utils.shiftSwitcher)(layoutName,setLayoutName),setFieldValue("".concat(fieldValue||"").concat(pressedKey)))},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;
+"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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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 [lastPressedKey, setLastPressedKey] = (0, _react.useState)(null);
+  const resetState = () => {
+    setFieldValue(currentFieldValue);
+    setShiftPressTimeStamp(null);
+  };
+  (0, _react.useEffect)(() => {
+    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,
+        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/utils.js

@@ -1 +1,66 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),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)}};exports.shiftSwitcher=shiftSwitcher;const localKeysHandle=_ref=>{let{fieldValue:fieldValue,layoutName:layoutName,onEnter:onEnter,pressedKey:pressedKey,setFieldValue:setFieldValue,setLayoutName:setLayoutName,setShiftPressTimeStamp:setShiftPressTimeStamp,shiftPressTimeStamp: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)return void setLayoutName(_constants.CAPSLOCKED);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||""," "))}};exports.localKeysHandle=localKeysHandle;
+"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/components/UTVirtualizedList/README.md

@@ -0,0 +1,19 @@
+# UTVirtualizedList
+
+### Description
+Component that aims to virtualize content in a easy and dynamic fashion. It supports different and varying size elements, adjusts dynamically to available space.
+
+### Props
+
+- `data`: expects an `array` of `objects` representing the complete set of information required to build one list element. Take into consideration that a change in this array will result in a scroll respositioning on the scroll origin.
+- `className`: expects a `string`, represents the style to be applied to the list container.
+- `elementsPerRow`: expects a `number`, defines the number of elements per row.
+- `overscan`: expects a `number`, represents the extra number of elements to render so that scroll is smoother.
+  e.g: if `overscan = 10` then 10 elements will be added before the first visible element in the list's viewport, and 10 will be added after the last visible element in the list's viewport. Given that it aims to always have the same elements mounted in the DOM, if `overscan` number of elements cant be added before or after, because the scroll position is near one of both ends, the list will add the difference on the other end. For example, when positioned at `scroll = 0` there are `2 * overscan` elements after the last visible node given that none can be rendered before.
+- `itemPadding`: expects a `number`, defines the padding between rows and row elements.
+- `NoDataComponent`: expects a `func` which renders the corresponding component when `data` is empty.
+- `effect`: expects a `string` which indicates the effect with which the list will render the elements on mount. Available: `fadeIn`, `slideIn`
+- `loading`: expects a `bool`, indicates whether to render a loading spinner indicator instead of the list.
+- `reRenderOnChange`: expects an `array` of dependencies that upon change force the list to re-render.
+- `headerRenderer`: expects a `func` that can render a header component. It will stick to the top of the list.
+- `footerRenderer`: expects a `func` that can render a footer component.

package/dist/components/UTVirtualizedList/components/VirtualizedData/components/ListRow/constants.js

@@ -1 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SUB_KEY=exports.KEY=void 0;const KEY=exports.KEY="UTV-ROW-",SUB_KEY=exports.SUB_KEY="UTV-ITEM-";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SUB_KEY = exports.KEY = void 0;
+const KEY = exports.KEY = 'UTV-ROW-';
+const SUB_KEY = exports.SUB_KEY = 'UTV-ITEM-';

package/dist/components/UTVirtualizedList/components/VirtualizedData/components/ListRow/index.js

@@ -1 +1,74 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=require("prop-types"),_energyHooks=require("@widergy/energy-hooks"),_constants=require("./constants"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const ListRow=_ref=>{var _ledgerRef$current$el,_ledgerRef$current;let{row:row,index:index,effect:effect,configItemRender:configItemRender,updateLedger:updateLedger,ledgerRef:ledgerRef}=_ref;const elementKey="".concat(_constants.KEY).concat(index),{setRef:setRef}=(0,_energyHooks.useResizeEvent)(element=>{const{clientHeight:clientHeight}=element||{};clientHeight&&updateLedger(elementKey,clientHeight)}),{itemRenderer:itemRenderer,itemPadding:itemPadding,elementWidth:elementWidth}=configItemRender,width=elementWidth-itemPadding;return _react.default.createElement("div",{key:elementKey,className:"".concat(_stylesModule.default.row," ").concat(_stylesModule.default[effect]),style:{top:null!==(_ledgerRef$current$el=null===(_ledgerRef$current=ledgerRef.current)||void 0===_ledgerRef$current||null===(_ledgerRef$current=_ledgerRef$current[elementKey])||void 0===_ledgerRef$current?void 0:_ledgerRef$current.offset)&&void 0!==_ledgerRef$current$el?_ledgerRef$current$el:0},ref:setRef},row.map((item,itemIndex)=>item&&_react.default.createElement("div",{key:"".concat(_constants.SUB_KEY).concat(itemIndex),style:{padding:itemPadding/2,width:width,maxWidth:width},className:_stylesModule.default.item},itemRenderer(item,index))))};ListRow.propTypes={row:_propTypes.array,index:_propTypes.number,updateLedger:_propTypes.func,effect:_propTypes.string,configItemRender:(0,_propTypes.shape)({itemRenderer:_propTypes.func,itemPadding:_propTypes.number,elementWidth:_propTypes.number}),ledgerRef:(0,_propTypes.shape)({current:(0,_propTypes.objectOf)((0,_propTypes.shape)({offset:_propTypes.number,height:_propTypes.number}))})};var _default=exports.default=ListRow;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _energyHooks = require("@widergy/energy-hooks");
+var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable react/no-array-index-key */
+
+const ListRow = _ref => {
+  var _ledgerRef$current$el, _ledgerRef$current;
+  let {
+    row,
+    index,
+    effect,
+    configItemRender,
+    updateLedger,
+    ledgerRef
+  } = _ref;
+  const elementKey = "".concat(_constants.KEY).concat(index);
+  const {
+    setRef
+  } = (0, _energyHooks.useResizeEvent)(element => {
+    const {
+      clientHeight
+    } = element || {};
+    if (clientHeight) updateLedger(elementKey, clientHeight);
+  });
+  const {
+    itemRenderer,
+    itemPadding,
+    elementWidth
+  } = configItemRender;
+  const width = elementWidth - itemPadding;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    key: elementKey,
+    className: "".concat(_stylesModule.default.row, " ").concat(_stylesModule.default[effect]),
+    style: {
+      top: (_ledgerRef$current$el = (_ledgerRef$current = ledgerRef.current) === null || _ledgerRef$current === void 0 || (_ledgerRef$current = _ledgerRef$current[elementKey]) === null || _ledgerRef$current === void 0 ? void 0 : _ledgerRef$current.offset) !== null && _ledgerRef$current$el !== void 0 ? _ledgerRef$current$el : 0
+    },
+    ref: setRef
+  }, row.map((item, itemIndex) => item && /*#__PURE__*/_react.default.createElement("div", {
+    key: "".concat(_constants.SUB_KEY).concat(itemIndex),
+    style: {
+      padding: itemPadding / 2,
+      width,
+      maxWidth: width
+    },
+    className: _stylesModule.default.item
+  }, itemRenderer(item, index))));
+};
+ListRow.propTypes = {
+  row: _propTypes.array,
+  index: _propTypes.number,
+  updateLedger: _propTypes.func,
+  effect: _propTypes.string,
+  configItemRender: (0, _propTypes.shape)({
+    itemRenderer: _propTypes.func,
+    itemPadding: _propTypes.number,
+    elementWidth: _propTypes.number
+  }),
+  ledgerRef: (0, _propTypes.shape)({
+    current: (0, _propTypes.objectOf)((0, _propTypes.shape)({
+      offset: _propTypes.number,
+      height: _propTypes.number
+    }))
+  })
+};
+var _default = exports.default = ListRow;

package/dist/components/UTVirtualizedList/components/VirtualizedData/components/ListRow/utils.js

@@ -1 +1,14 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getDynamicPosition=void 0;const getDynamicPosition=(ref,position,setPosition)=>{var _ref$current,_sibling$clientHeight,_sibling$offsetTop;const sibling=null===(_ref$current=ref.current)||void 0===_ref$current?void 0:_ref$current.previousSibling,height=null!==(_sibling$clientHeight=null==sibling?void 0:sibling.clientHeight)&&void 0!==_sibling$clientHeight?_sibling$clientHeight:0,offsetTop=null!==(_sibling$offsetTop=null==sibling?void 0:sibling.offsetTop)&&void 0!==_sibling$offsetTop?_sibling$offsetTop:0;position!==offsetTop+height&&setPosition(sibling?offsetTop+height:0)};exports.getDynamicPosition=getDynamicPosition;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDynamicPosition = void 0;
+const getDynamicPosition = (ref, position, setPosition) => {
+  var _ref$current, _sibling$clientHeight, _sibling$offsetTop;
+  const sibling = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.previousSibling;
+  const height = (_sibling$clientHeight = sibling === null || sibling === void 0 ? void 0 : sibling.clientHeight) !== null && _sibling$clientHeight !== void 0 ? _sibling$clientHeight : 0;
+  const offsetTop = (_sibling$offsetTop = sibling === null || sibling === void 0 ? void 0 : sibling.offsetTop) !== null && _sibling$offsetTop !== void 0 ? _sibling$offsetTop : 0;
+  if (position !== offsetTop + height) setPosition(sibling ? offsetTop + height : 0);
+};
+exports.getDynamicPosition = getDynamicPosition;

package/dist/components/UTVirtualizedList/components/VirtualizedData/constants.js

@@ -1 +1,17 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SCROLL_THROTTLE_DELAY=exports.SCROLL_EVENT_OPTIONS=exports.SCROLL_EVENT=exports.MAX_LIMIT_MULTIPLIER=exports.DEFAULT_LIMIT_MULTIPLIER=exports.CACHE=void 0;const CACHE=exports.CACHE={height:200},SCROLL_EVENT_OPTIONS=exports.SCROLL_EVENT_OPTIONS={passive:!0,capture:!0},SCROLL_EVENT=exports.SCROLL_EVENT="scroll",SCROLL_THROTTLE_DELAY=exports.SCROLL_THROTTLE_DELAY=50,MAX_LIMIT_MULTIPLIER=exports.MAX_LIMIT_MULTIPLIER=4,DEFAULT_LIMIT_MULTIPLIER=exports.DEFAULT_LIMIT_MULTIPLIER=2;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SCROLL_THROTTLE_DELAY = exports.SCROLL_EVENT_OPTIONS = exports.SCROLL_EVENT = exports.MAX_LIMIT_MULTIPLIER = exports.DEFAULT_LIMIT_MULTIPLIER = exports.CACHE = void 0;
+const CACHE = exports.CACHE = {
+  height: 200
+};
+const SCROLL_EVENT_OPTIONS = exports.SCROLL_EVENT_OPTIONS = {
+  passive: true,
+  capture: true
+};
+const SCROLL_EVENT = exports.SCROLL_EVENT = 'scroll';
+const SCROLL_THROTTLE_DELAY = exports.SCROLL_THROTTLE_DELAY = 50;
+const MAX_LIMIT_MULTIPLIER = exports.MAX_LIMIT_MULTIPLIER = 4;
+const DEFAULT_LIMIT_MULTIPLIER = exports.DEFAULT_LIMIT_MULTIPLIER = 2;

package/dist/components/UTVirtualizedList/components/VirtualizedData/hooks/use-ledger.js

@@ -1 +1,28 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=require("react"),_constants=require("../components/ListRow/constants");const useLedger=data=>{const[ledger,setLedger]=(0,_react.useState)({}),ledgerRef=(0,_react.useRef)(ledger);ledgerRef.current=ledger;return(0,_react.useEffect)(()=>{Object.keys(ledger).length!==data.length&&setLedger((()=>{const newLedger={};return data.forEach((_,index)=>{newLedger["".concat(_constants.KEY).concat(index)]={height:0,offset:0}}),newLedger})())},[data]),[ledgerRef,setLedger]};var _default=exports.default=useLedger;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _constants = require("../components/ListRow/constants");
+const useLedger = data => {
+  const [ledger, setLedger] = (0, _react.useState)({});
+  const ledgerRef = (0, _react.useRef)(ledger);
+  ledgerRef.current = ledger;
+  const resetLedger = () => {
+    const newLedger = {};
+    data.forEach((_, index) => {
+      newLedger["".concat(_constants.KEY).concat(index)] = {
+        height: 0,
+        offset: 0
+      };
+    });
+    return newLedger;
+  };
+  (0, _react.useEffect)(() => {
+    if (Object.keys(ledger).length !== data.length) setLedger(resetLedger());
+  }, [data]);
+  return [ledgerRef, setLedger];
+};
+var _default = exports.default = useLedger;

package/dist/components/UTVirtualizedList/components/VirtualizedData/hooks/use-virtualized-data.js

@@ -1 +1,51 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=require("react"),_energyHooks=require("@widergy/energy-hooks"),_constants=require("../constants"),_utils=require("../utils"),_useLedger=_interopRequireDefault(require("./use-ledger"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const useVirtualizedData=(data,totalElements,overscan,listViewportHeight,listViewportWidth,configItemRender,listViewportRef,elementsPerRow,effect,reRenderOnChange)=>{const[shouldReRender,setShouldReRender]=(0,_react.useState)(!1),[scroll,setScroll]=(0,_react.useState)(0),[virtualizedData,setVirtualizedData]=(0,_react.useState)([]),[heightLedger,setHeightLedger]=(0,_useLedger.default)(data);(0,_energyHooks.useScrollbarThrottle)(_ref=>{let{target:target}=_ref;if(target===listViewportRef.current){const currentScroll=target.scrollTop;setScroll(currentScroll)}},listViewportRef,_constants.SCROLL_THROTTLE_DELAY);const rowRenderer=(0,_react.useCallback)((0,_utils.createRowRenderer)(configItemRender,effect),[configItemRender,effect]),{virtualScreenStart:virtualScreenStart,virtualScreenEnd:virtualScreenEnd,listHeight:listHeight}=(0,_react.useMemo)(()=>(0,_utils.renderVirtualScreen)(scroll,overscan,totalElements,listViewportHeight,heightLedger.current),[scroll,overscan,totalElements,heightLedger.current,listViewportHeight]);(0,_react.useEffect)(()=>{setShouldReRender(!0)},[listViewportWidth,rowRenderer,elementsPerRow,heightLedger.current,data,reRenderOnChange]);const ledgerUpdater=(0,_react.useMemo)(()=>(0,_utils.updateLedger)(heightLedger,setHeightLedger),[heightLedger,setHeightLedger]);return(0,_react.useEffect)(()=>{const newVirtualizedData=shouldReRender?new Array(totalElements).fill(null):[...virtualizedData];(0,_utils.nullifyDataInBetween)(newVirtualizedData,0,virtualScreenStart),(0,_utils.nullifyDataInBetween)(newVirtualizedData,virtualScreenEnd,newVirtualizedData.length),(0,_utils.addVirtualizedElements)(data,newVirtualizedData,virtualScreenStart,virtualScreenEnd,rowRenderer,ledgerUpdater,heightLedger),setVirtualizedData(newVirtualizedData),shouldReRender&&setShouldReRender(!1)},[virtualScreenStart,virtualScreenEnd,shouldReRender,ledgerUpdater]),{virtualizedData:virtualizedData,listHeight:listHeight}};var _default=exports.default=useVirtualizedData;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _energyHooks = require("@widergy/energy-hooks");
+var _constants = require("../constants");
+var _utils = require("../utils");
+var _useLedger = _interopRequireDefault(require("./use-ledger"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const useVirtualizedData = (data, totalElements, overscan, listViewportHeight, listViewportWidth, configItemRender, listViewportRef, elementsPerRow, effect, reRenderOnChange) => {
+  const [shouldReRender, setShouldReRender] = (0, _react.useState)(false);
+  const [scroll, setScroll] = (0, _react.useState)(0);
+  const [virtualizedData, setVirtualizedData] = (0, _react.useState)([]);
+  const [heightLedger, setHeightLedger] = (0, _useLedger.default)(data);
+  const updateScroll = _ref => {
+    let {
+      target
+    } = _ref;
+    if (target === listViewportRef.current) {
+      const currentScroll = target.scrollTop;
+      setScroll(currentScroll);
+    }
+  };
+  (0, _energyHooks.useScrollbarThrottle)(updateScroll, listViewportRef, _constants.SCROLL_THROTTLE_DELAY);
+  const rowRenderer = (0, _react.useCallback)((0, _utils.createRowRenderer)(configItemRender, effect), [configItemRender, effect]);
+  const {
+    virtualScreenStart,
+    virtualScreenEnd,
+    listHeight
+  } = (0, _react.useMemo)(() => (0, _utils.renderVirtualScreen)(scroll, overscan, totalElements, listViewportHeight, heightLedger.current), [scroll, overscan, totalElements, heightLedger.current, listViewportHeight]);
+  (0, _react.useEffect)(() => {
+    setShouldReRender(true);
+  }, [listViewportWidth, rowRenderer, elementsPerRow, heightLedger.current, data, reRenderOnChange]);
+  const ledgerUpdater = (0, _react.useMemo)(() => (0, _utils.updateLedger)(heightLedger, setHeightLedger), [heightLedger, setHeightLedger]);
+  (0, _react.useEffect)(() => {
+    const newVirtualizedData = shouldReRender ? new Array(totalElements).fill(null) : [...virtualizedData];
+    (0, _utils.nullifyDataInBetween)(newVirtualizedData, 0, virtualScreenStart);
+    (0, _utils.nullifyDataInBetween)(newVirtualizedData, virtualScreenEnd, newVirtualizedData.length);
+    (0, _utils.addVirtualizedElements)(data, newVirtualizedData, virtualScreenStart, virtualScreenEnd, rowRenderer, ledgerUpdater, heightLedger);
+    setVirtualizedData(newVirtualizedData);
+    if (shouldReRender) setShouldReRender(false);
+  }, [virtualScreenStart, virtualScreenEnd, shouldReRender, ledgerUpdater]);
+  return {
+    virtualizedData,
+    listHeight
+  };
+};
+var _default = exports.default = useVirtualizedData;