@widergy/energy-ui 3.158.1 → 3.160.0

package/dist/esm/components/UTValidation/styles.module.scss

@@ -0,0 +1,33 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 16px;
+}
+
+.iconContainer {
+  align-items: center;
+  border-radius: 100%;
+  display: flex;
+  height: 20px;
+  justify-content: center;
+  width: 20px;
+}
+
+.itemContainer {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 8px;
+}
+
+.itemsContainer {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+}
+
+.validationContainer {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 12px;
+}

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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +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,
+    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;

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

@@ -0,0 +1,112 @@
+$key-shadow: #00000038;
+
+.keyboard {
+  background-color: var(--light04);
+  bottom: 0;
+  padding: 48px 12px;
+  position: sticky;
+  z-index: 1;
+
+  @media only screen and (orientation: portrait) and (max-width: 1200px) {
+    padding: 24px 8px;
+  }
+
+  @media (orientation: landscape) {
+    padding: 32px 16px;
+  }
+
+  :global(.hg-rows) {
+    display: flex;
+    flex-direction: column;
+    grid-gap: 48px;
+    width: 100%;
+
+    @media only screen and (orientation: portrait) and (max-width: 1200px) {
+      grid-gap: 28px;
+    }
+
+    @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 only screen and (orientation: portrait) and (max-width: 1200px) {
+          height: 96px;
+        }
+
+        @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: unset;
+        max-width: unset;
+        flex-grow: 1;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+import { CAPSLOCK_DELAY, CAPSLOCKED, DEFAULT, SPECIAL_CHARACTERS, SPECIAL_KEYS, UPPERCASE } from './constants';
+export const shiftSwitcher = (layoutName, setLayoutName) => {
+  switch (layoutName) {
+    case DEFAULT:
+      setLayoutName(UPPERCASE);
+      break;
+    case UPPERCASE:
+      setLayoutName(DEFAULT);
+      break;
+    case SPECIAL_CHARACTERS:
+      setLayoutName(UPPERCASE);
+      break;
+    default:
+      break;
+  }
+};
+export const localKeysHandle = _ref => {
+  let {
+    fieldValue,
+    layoutName,
+    onEnter,
+    pressedKey,
+    setFieldValue,
+    setLayoutName,
+    setShiftPressTimeStamp,
+    shiftPressTimeStamp
+  } = _ref;
+  switch (pressedKey) {
+    case SPECIAL_KEYS.alt:
+      setLayoutName(SPECIAL_CHARACTERS);
+      break;
+    case SPECIAL_KEYS.default:
+      setLayoutName(DEFAULT);
+      break;
+    case SPECIAL_KEYS.shift:
+      if (shiftPressTimeStamp && Date.now() - shiftPressTimeStamp < CAPSLOCK_DELAY) {
+        setLayoutName(CAPSLOCKED);
+        return;
+      }
+      setShiftPressTimeStamp(Date.now());
+      shiftSwitcher(layoutName, setLayoutName);
+      break;
+    case SPECIAL_KEYS.lock:
+      setLayoutName(layoutName === DEFAULT ? UPPERCASE : DEFAULT);
+      break;
+    case SPECIAL_KEYS.bksp:
+      setFieldValue(fieldValue ? fieldValue.slice(0, -1) : '');
+      break;
+    case SPECIAL_KEYS.enter:
+      onEnter();
+      break;
+    case SPECIAL_KEYS.space:
+      setFieldValue("".concat(fieldValue || '', ' '));
+      break;
+    default:
+      break;
+  }
+};

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

@@ -0,0 +1,2 @@
+export const KEY = 'UTV-ROW-';
+export const SUB_KEY = 'UTV-ITEM-';

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

@@ -0,0 +1,66 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import { array, number, shape, string, func, objectOf } from 'prop-types';
+import { useResizeEvent } from '@widergy/energy-hooks';
+import { KEY, SUB_KEY } from './constants';
+import styles from './styles.module.scss';
+const ListRow = _ref => {
+  var _ledgerRef$current$el, _ledgerRef$current;
+  let {
+    row,
+    index,
+    effect,
+    configItemRender,
+    updateLedger,
+    ledgerRef
+  } = _ref;
+  const elementKey = "".concat(KEY).concat(index);
+  const {
+    setRef
+  } = useResizeEvent(element => {
+    const {
+      clientHeight
+    } = element || {};
+    if (clientHeight) updateLedger(elementKey, clientHeight);
+  });
+  const {
+    itemRenderer,
+    itemPadding,
+    elementWidth
+  } = configItemRender;
+  const width = elementWidth - itemPadding;
+  return /*#__PURE__*/React.createElement("div", {
+    key: elementKey,
+    className: "".concat(styles.row, " ").concat(styles[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.createElement("div", {
+    key: "".concat(SUB_KEY).concat(itemIndex),
+    style: {
+      padding: itemPadding / 2,
+      width,
+      maxWidth: width
+    },
+    className: styles.item
+  }, itemRenderer(item, index))));
+};
+ListRow.propTypes = {
+  row: array,
+  index: number,
+  updateLedger: func,
+  effect: string,
+  configItemRender: shape({
+    itemRenderer: func,
+    itemPadding: number,
+    elementWidth: number
+  }),
+  ledgerRef: shape({
+    current: objectOf(shape({
+      offset: number,
+      height: number
+    }))
+  })
+};
+export default ListRow;

package/dist/esm/components/UTVirtualizedList/components/VirtualizedData/components/ListRow/styles.module.scss

@@ -0,0 +1,39 @@
+.row {
+  display: flex;
+  position: absolute;
+  width: 100%;
+}
+
+.item {
+  flex-grow: 1;
+}
+
+.fadeIn {
+  animation: fadeInAnimation 0.5s ease-in-out;
+}
+
+@keyframes fadeInAnimation {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.slideIn {
+  animation: slideInAnimation 0.5s ease-in;
+}
+
+@keyframes slideInAnimation {
+  0% {
+    left: -100%;
+    opacity: 0;
+  }
+
+  100% {
+    left: 0;
+    opacity: 1;
+  }
+}