@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +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)}};export const localKeysHandle=_ref=>{let{fieldValue:fieldValue,layoutName:layoutName,onEnter:onEnter,pressedKey:pressedKey,setFieldValue:setFieldValue,setLayoutName:setLayoutName,setShiftPressTimeStamp:setShiftPressTimeStamp,shiftPressTimeStamp: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)return void setLayoutName(CAPSLOCKED);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||""," "))}};
+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

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

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

@@ -1 +1,66 @@
-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:row,index:index,effect:effect,configItemRender:configItemRender,updateLedger:updateLedger,ledgerRef:ledgerRef}=_ref;const elementKey="".concat(KEY).concat(index),{setRef:setRef}=useResizeEvent(element=>{const{clientHeight:clientHeight}=element||{};clientHeight&&updateLedger(elementKey,clientHeight)}),{itemRenderer:itemRenderer,itemPadding:itemPadding,elementWidth:elementWidth}=configItemRender,width=elementWidth-itemPadding;return React.createElement("div",{key:elementKey,className:"".concat(styles.row," ").concat(styles[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.createElement("div",{key:"".concat(SUB_KEY).concat(itemIndex),style:{padding:itemPadding/2,width: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;
+/* 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/utils.js

@@ -1 +1,7 @@
-export 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)};
+export 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);
+};

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

@@ -1 +1,11 @@
-export const CACHE={height:200};export const SCROLL_EVENT_OPTIONS={passive:!0,capture:!0};export const SCROLL_EVENT="scroll";export const SCROLL_THROTTLE_DELAY=50;export const MAX_LIMIT_MULTIPLIER=4;export const DEFAULT_LIMIT_MULTIPLIER=2;
+export const CACHE = {
+  height: 200
+};
+export const SCROLL_EVENT_OPTIONS = {
+  passive: true,
+  capture: true
+};
+export const SCROLL_EVENT = 'scroll';
+export const SCROLL_THROTTLE_DELAY = 50;
+export const MAX_LIMIT_MULTIPLIER = 4;
+export const DEFAULT_LIMIT_MULTIPLIER = 2;

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

@@ -1 +1,22 @@
-import{useState,useEffect,useRef}from"react";import{KEY}from"../components/ListRow/constants";const useLedger=data=>{const[ledger,setLedger]=useState({}),ledgerRef=useRef(ledger);ledgerRef.current=ledger;return useEffect(()=>{Object.keys(ledger).length!==data.length&&setLedger((()=>{const newLedger={};return data.forEach((_,index)=>{newLedger["".concat(KEY).concat(index)]={height:0,offset:0}}),newLedger})())},[data]),[ledgerRef,setLedger]};export default useLedger;
+import { useState, useEffect, useRef } from 'react';
+import { KEY } from '../components/ListRow/constants';
+const useLedger = data => {
+  const [ledger, setLedger] = useState({});
+  const ledgerRef = useRef(ledger);
+  ledgerRef.current = ledger;
+  const resetLedger = () => {
+    const newLedger = {};
+    data.forEach((_, index) => {
+      newLedger["".concat(KEY).concat(index)] = {
+        height: 0,
+        offset: 0
+      };
+    });
+    return newLedger;
+  };
+  useEffect(() => {
+    if (Object.keys(ledger).length !== data.length) setLedger(resetLedger());
+  }, [data]);
+  return [ledgerRef, setLedger];
+};
+export default useLedger;

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

@@ -1 +1,44 @@
-import{useState,useCallback,useEffect,useMemo}from"react";import{useScrollbarThrottle}from"@widergy/energy-hooks";import{SCROLL_THROTTLE_DELAY}from"../constants";import{createRowRenderer,renderVirtualScreen,nullifyDataInBetween,addVirtualizedElements,updateLedger}from"../utils";import useHeightLedger from"./use-ledger";const useVirtualizedData=(data,totalElements,overscan,listViewportHeight,listViewportWidth,configItemRender,listViewportRef,elementsPerRow,effect,reRenderOnChange)=>{const[shouldReRender,setShouldReRender]=useState(!1),[scroll,setScroll]=useState(0),[virtualizedData,setVirtualizedData]=useState([]),[heightLedger,setHeightLedger]=useHeightLedger(data);useScrollbarThrottle(_ref=>{let{target:target}=_ref;if(target===listViewportRef.current){const currentScroll=target.scrollTop;setScroll(currentScroll)}},listViewportRef,SCROLL_THROTTLE_DELAY);const rowRenderer=useCallback(createRowRenderer(configItemRender,effect),[configItemRender,effect]),{virtualScreenStart:virtualScreenStart,virtualScreenEnd:virtualScreenEnd,listHeight:listHeight}=useMemo(()=>renderVirtualScreen(scroll,overscan,totalElements,listViewportHeight,heightLedger.current),[scroll,overscan,totalElements,heightLedger.current,listViewportHeight]);useEffect(()=>{setShouldReRender(!0)},[listViewportWidth,rowRenderer,elementsPerRow,heightLedger.current,data,reRenderOnChange]);const ledgerUpdater=useMemo(()=>updateLedger(heightLedger,setHeightLedger),[heightLedger,setHeightLedger]);return useEffect(()=>{const newVirtualizedData=shouldReRender?new Array(totalElements).fill(null):[...virtualizedData];nullifyDataInBetween(newVirtualizedData,0,virtualScreenStart),nullifyDataInBetween(newVirtualizedData,virtualScreenEnd,newVirtualizedData.length),addVirtualizedElements(data,newVirtualizedData,virtualScreenStart,virtualScreenEnd,rowRenderer,ledgerUpdater,heightLedger),setVirtualizedData(newVirtualizedData),shouldReRender&&setShouldReRender(!1)},[virtualScreenStart,virtualScreenEnd,shouldReRender,ledgerUpdater]),{virtualizedData:virtualizedData,listHeight:listHeight}};export default useVirtualizedData;
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { useScrollbarThrottle } from '@widergy/energy-hooks';
+import { SCROLL_THROTTLE_DELAY } from '../constants';
+import { createRowRenderer, renderVirtualScreen, nullifyDataInBetween, addVirtualizedElements, updateLedger } from '../utils';
+import useHeightLedger from './use-ledger';
+const useVirtualizedData = (data, totalElements, overscan, listViewportHeight, listViewportWidth, configItemRender, listViewportRef, elementsPerRow, effect, reRenderOnChange) => {
+  const [shouldReRender, setShouldReRender] = useState(false);
+  const [scroll, setScroll] = useState(0);
+  const [virtualizedData, setVirtualizedData] = useState([]);
+  const [heightLedger, setHeightLedger] = useHeightLedger(data);
+  const updateScroll = _ref => {
+    let {
+      target
+    } = _ref;
+    if (target === listViewportRef.current) {
+      const currentScroll = target.scrollTop;
+      setScroll(currentScroll);
+    }
+  };
+  useScrollbarThrottle(updateScroll, listViewportRef, SCROLL_THROTTLE_DELAY);
+  const rowRenderer = useCallback(createRowRenderer(configItemRender, effect), [configItemRender, effect]);
+  const {
+    virtualScreenStart,
+    virtualScreenEnd,
+    listHeight
+  } = useMemo(() => renderVirtualScreen(scroll, overscan, totalElements, listViewportHeight, heightLedger.current), [scroll, overscan, totalElements, heightLedger.current, listViewportHeight]);
+  useEffect(() => {
+    setShouldReRender(true);
+  }, [listViewportWidth, rowRenderer, elementsPerRow, heightLedger.current, data, reRenderOnChange]);
+  const ledgerUpdater = useMemo(() => updateLedger(heightLedger, setHeightLedger), [heightLedger, setHeightLedger]);
+  useEffect(() => {
+    const newVirtualizedData = shouldReRender ? new Array(totalElements).fill(null) : [...virtualizedData];
+    nullifyDataInBetween(newVirtualizedData, 0, virtualScreenStart);
+    nullifyDataInBetween(newVirtualizedData, virtualScreenEnd, newVirtualizedData.length);
+    addVirtualizedElements(data, newVirtualizedData, virtualScreenStart, virtualScreenEnd, rowRenderer, ledgerUpdater, heightLedger);
+    setVirtualizedData(newVirtualizedData);
+    if (shouldReRender) setShouldReRender(false);
+  }, [virtualScreenStart, virtualScreenEnd, shouldReRender, ledgerUpdater]);
+  return {
+    virtualizedData,
+    listHeight
+  };
+};
+export default useVirtualizedData;

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

@@ -1 +1,61 @@
-import React,{useMemo,Fragment,memo}from"react";import{array,number,func,string,bool}from"prop-types";import{refType}from"../../../../types/commonTypes";import useVirtualizedData from"./hooks/use-virtualized-data";import{createRows}from"./utils";import styles from"./styles.module.scss";const VirtualizedData=_ref=>{let{data:data,elementsPerRow:elementsPerRow,overscan:overscan,itemRenderer:itemRenderer,itemPadding:itemPadding,listViewportRef:listViewportRef,listViewportHeight:listViewportHeight,listViewportWidth:listViewportWidth,effect:effect,reRenderOnChange:reRenderOnChange,headerRenderer:headerRenderer,footerRenderer:footerRenderer}=_ref;const elementWidth=Math.floor(listViewportWidth/elementsPerRow),rows=useMemo(()=>createRows(data,elementsPerRow),[data,elementsPerRow]),totalRows=rows.length,configItemRender=useMemo(()=>({itemRenderer:itemRenderer,itemPadding:itemPadding,elementWidth:elementWidth}),[itemRenderer,itemPadding,elementWidth]),{virtualizedData:virtualizedData,listHeight:listHeight}=useVirtualizedData(rows,totalRows,overscan,listViewportHeight,listViewportWidth,configItemRender,listViewportRef,elementsPerRow,effect,reRenderOnChange);return React.createElement(Fragment,null,headerRenderer&&React.createElement("div",{className:styles.header},headerRenderer()),React.createElement("div",{style:{height:listHeight,position:"relative",scrollBehavior:"smooth",width:"100%"}},virtualizedData),footerRenderer&&React.createElement("div",{className:styles.footer},footerRenderer()))};VirtualizedData.propTypes={data:array,elementsPerRow:number,overscan:number,itemRenderer:func,itemPadding:number,listViewportRef:refType,listViewportHeight:number,listViewportWidth:number,effect:string,reRenderOnChange:bool,headerRenderer:func,footerRenderer:func};export default memo(VirtualizedData);
+import React, { useMemo, Fragment, memo } from 'react';
+import { array, number, func, string, bool } from 'prop-types';
+import { refType } from '../../../../types/commonTypes';
+import useVirtualizedData from './hooks/use-virtualized-data';
+import { createRows } from './utils';
+import styles from './styles.module.scss';
+const VirtualizedData = _ref => {
+  let {
+    data,
+    elementsPerRow,
+    overscan,
+    itemRenderer,
+    itemPadding,
+    listViewportRef,
+    listViewportHeight,
+    listViewportWidth,
+    effect,
+    reRenderOnChange,
+    headerRenderer,
+    footerRenderer
+  } = _ref;
+  const elementWidth = Math.floor(listViewportWidth / elementsPerRow);
+  const rows = useMemo(() => createRows(data, elementsPerRow), [data, elementsPerRow]);
+  const totalRows = rows.length;
+  const configItemRender = useMemo(() => ({
+    itemRenderer,
+    itemPadding,
+    elementWidth
+  }), [itemRenderer, itemPadding, elementWidth]);
+  const {
+    virtualizedData,
+    listHeight
+  } = useVirtualizedData(rows, totalRows, overscan, listViewportHeight, listViewportWidth, configItemRender, listViewportRef, elementsPerRow, effect, reRenderOnChange);
+  return /*#__PURE__*/React.createElement(Fragment, null, headerRenderer && /*#__PURE__*/React.createElement("div", {
+    className: styles.header
+  }, headerRenderer()), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: listHeight,
+      position: 'relative',
+      scrollBehavior: 'smooth',
+      width: '100%'
+    }
+  }, virtualizedData), footerRenderer && /*#__PURE__*/React.createElement("div", {
+    className: styles.footer
+  }, footerRenderer()));
+};
+VirtualizedData.propTypes = {
+  data: array,
+  elementsPerRow: number,
+  overscan: number,
+  itemRenderer: func,
+  itemPadding: number,
+  listViewportRef: refType,
+  listViewportHeight: number,
+  listViewportWidth: number,
+  effect: string,
+  reRenderOnChange: bool,
+  headerRenderer: func,
+  footerRenderer: func
+};
+export default /*#__PURE__*/memo(VirtualizedData);

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

@@ -1 +1,106 @@
-import React from"react";import{KEY}from"./components/ListRow/constants";import ListRow from"./components/ListRow";import{MAX_LIMIT_MULTIPLIER,DEFAULT_LIMIT_MULTIPLIER}from"./constants";export const createRows=(data,elementsPerRow)=>{const totalRows=Math.ceil(data.length/elementsPerRow),rows=new Array(totalRows).fill(0).map(()=>[]);for(let i=0;i<data.length;i++)rows[Math.floor(i/elementsPerRow)].push(data[i]);return rows};export const applyToIndex=(index,target,object)=>index===target?object:null;export const createRowRenderer=(configItemRender,effect)=>(row,index,updateLedger,ledgerRef)=>React.createElement(ListRow,{row:row,index:index,effect:effect,configItemRender:configItemRender,updateLedger:updateLedger,ledgerRef:ledgerRef});const getOffsets=ledger=>Object.values(ledger).map(_ref=>{let{offset:offset}=_ref;return offset}),getFirstIndex=(ledger,scroll)=>{const offsets=getOffsets(ledger);return Math.max(offsets.findIndex(offset=>offset>scroll)-1,0)},getElementsInViewport=(ledger,scroll,listViewportHeight,firstIndex,totalElements)=>{const index=getOffsets(ledger).findIndex(offset=>offset>scroll+listViewportHeight);return(-1!==index?index:totalElements)-1-firstIndex},getListHeight=ledger=>{const values=Object.values(ledger),lastUsableIndex=values.findIndex(_ref2=>{let{height:height}=_ref2;return!height}),{height:height=0,offset:offset=0}=values[-1!==lastUsableIndex?lastUsableIndex:values.length-1]||{};return offset+height};export const renderVirtualScreen=(scrollPosition,overscan,totalElements,listViewportHeight,ledger)=>{const listHeight=getListHeight(ledger);if(!listViewportHeight)return{virtualScreenStart:0,virtualScreenEnd:Math.min(2*overscan,totalElements)};const firstElementIndex=getFirstIndex(ledger,scrollPosition),elementsInViewport=listHeight?getElementsInViewport(ledger,scrollPosition,listViewportHeight,firstElementIndex,totalElements):0,upperScan=Math.min(firstElementIndex,overscan),lowerScan=Math.min(totalElements-(firstElementIndex+elementsInViewport),overscan),normalizedUpperScan=upperScan+overscan-lowerScan,normalizedLowerScan=lowerScan+overscan-upperScan,virtualScreenStart=Math.max(firstElementIndex-normalizedUpperScan,0);let virtualScreenEnd=Math.min(firstElementIndex+elementsInViewport+normalizedLowerScan,totalElements);return virtualScreenEnd-virtualScreenStart>=MAX_LIMIT_MULTIPLIER*overscan&&(virtualScreenEnd=virtualScreenStart+DEFAULT_LIMIT_MULTIPLIER*overscan),{virtualScreenStart:virtualScreenStart,virtualScreenEnd:virtualScreenEnd,listHeight:listHeight}};export const nullifyDataInBetween=(data,startIndex,endIndex)=>{for(let i=startIndex;i<endIndex;i++)data[i]=null};export const addVirtualizedElements=(data,virtualizedData,startIndex,endIndex,rowRenderer,updateLedger,ledgerRef)=>{for(let i=startIndex;i<endIndex;i++)virtualizedData[i]||(virtualizedData[i]=rowRenderer(data[i],i,updateLedger,ledgerRef))};export const updateLedger=(ledgerRef,setLedgerRef)=>(key,height)=>{var _ledgerRef$current;if((null===(_ledgerRef$current=ledgerRef.current)||void 0===_ledgerRef$current||null===(_ledgerRef$current=_ledgerRef$current[key])||void 0===_ledgerRef$current?void 0:_ledgerRef$current.height)!==height){const newLedger={...ledgerRef.current,[key]:{height:height}};let accumulator=0;Object.keys(newLedger).forEach((currentKey,index)=>{newLedger[currentKey].height||(newLedger[currentKey].height=height),index&&(accumulator+=newLedger["".concat(KEY).concat(index-1)].height),newLedger[currentKey]={...newLedger[currentKey],offset:accumulator}}),setLedgerRef(newLedger)}};
+import React from 'react';
+import { KEY } from './components/ListRow/constants';
+import ListRow from './components/ListRow';
+import { MAX_LIMIT_MULTIPLIER, DEFAULT_LIMIT_MULTIPLIER } from './constants';
+export const createRows = (data, elementsPerRow) => {
+  const totalRows = Math.ceil(data.length / elementsPerRow);
+  const rows = new Array(totalRows).fill(0).map(() => []);
+  for (let i = 0; i < data.length; i++) {
+    rows[Math.floor(i / elementsPerRow)].push(data[i]);
+  }
+  return rows;
+};
+export const applyToIndex = (index, target, object) => index === target ? object : null;
+export const createRowRenderer = (configItemRender, effect) => (row, index, updateLedger, ledgerRef) => /*#__PURE__*/React.createElement(ListRow, {
+  row: row,
+  index: index,
+  effect: effect,
+  configItemRender: configItemRender,
+  updateLedger: updateLedger,
+  ledgerRef: ledgerRef
+});
+const getOffsets = ledger => Object.values(ledger).map(_ref => {
+  let {
+    offset
+  } = _ref;
+  return offset;
+});
+const getFirstIndex = (ledger, scroll) => {
+  const offsets = getOffsets(ledger);
+  return Math.max(offsets.findIndex(offset => offset > scroll) - 1, 0);
+};
+const getElementsInViewport = (ledger, scroll, listViewportHeight, firstIndex, totalElements) => {
+  const offsets = getOffsets(ledger);
+  const index = offsets.findIndex(offset => offset > scroll + listViewportHeight);
+  return (index !== -1 ? index : totalElements) - 1 - firstIndex;
+};
+const getListHeight = ledger => {
+  const values = Object.values(ledger);
+  const lastUsableIndex = values.findIndex(_ref2 => {
+    let {
+      height
+    } = _ref2;
+    return !height;
+  });
+  const {
+    height = 0,
+    offset = 0
+  } = values[lastUsableIndex !== -1 ? lastUsableIndex : values.length - 1] || {};
+  return offset + height;
+};
+export const renderVirtualScreen = (scrollPosition, overscan, totalElements, listViewportHeight, ledger) => {
+  const listHeight = getListHeight(ledger);
+  if (!listViewportHeight) return {
+    virtualScreenStart: 0,
+    virtualScreenEnd: Math.min(2 * overscan, totalElements)
+  };
+  const firstElementIndex = getFirstIndex(ledger, scrollPosition);
+  const elementsInViewport = listHeight ? getElementsInViewport(ledger, scrollPosition, listViewportHeight, firstElementIndex, totalElements) : 0;
+  const upperScan = Math.min(firstElementIndex, overscan);
+  const lowerScan = Math.min(totalElements - (firstElementIndex + elementsInViewport), overscan);
+  const normalizedUpperScan = upperScan + overscan - lowerScan;
+  const normalizedLowerScan = lowerScan + overscan - upperScan;
+  const virtualScreenStart = Math.max(firstElementIndex - normalizedUpperScan, 0);
+  let virtualScreenEnd = Math.min(firstElementIndex + elementsInViewport + normalizedLowerScan, totalElements);
+  if (virtualScreenEnd - virtualScreenStart >= MAX_LIMIT_MULTIPLIER * overscan) virtualScreenEnd = virtualScreenStart + DEFAULT_LIMIT_MULTIPLIER * overscan;
+  return {
+    virtualScreenStart,
+    virtualScreenEnd,
+    listHeight
+  };
+};
+export const nullifyDataInBetween = (data, startIndex, endIndex) => {
+  for (let i = startIndex; i < endIndex; i++) data[i] = null;
+};
+export const addVirtualizedElements = (data, virtualizedData, startIndex, endIndex, rowRenderer, updateLedger, ledgerRef) => {
+  for (let i = startIndex; i < endIndex; i++) {
+    if (!virtualizedData[i]) virtualizedData[i] = rowRenderer(data[i], i, updateLedger, ledgerRef);
+  }
+};
+export const updateLedger = (ledgerRef, setLedgerRef) => (key, height) => {
+  var _ledgerRef$current;
+  const currentHeight = (_ledgerRef$current = ledgerRef.current) === null || _ledgerRef$current === void 0 || (_ledgerRef$current = _ledgerRef$current[key]) === null || _ledgerRef$current === void 0 ? void 0 : _ledgerRef$current.height;
+  if (currentHeight !== height) {
+    const newLedger = {
+      ...ledgerRef.current,
+      [key]: {
+        height
+      }
+    };
+    let accumulator = 0;
+    const keys = Object.keys(newLedger);
+    keys.forEach((currentKey, index) => {
+      if (!newLedger[currentKey].height) {
+        newLedger[currentKey].height = height;
+      }
+      if (index) {
+        accumulator += newLedger["".concat(KEY).concat(index - 1)].height;
+      }
+      newLedger[currentKey] = {
+        ...newLedger[currentKey],
+        offset: accumulator
+      };
+    });
+    setLedgerRef(newLedger);
+  }
+};

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

@@ -1 +1,4 @@
-export const DEFAULT_ITEM_PADDING=10;export const DEFAULT_OVERSCAN=10;export const DEFAULT_EFFECT="fadeIn";export const DEFAULT_ELEMENTS_PER_ROW=1;
+export const DEFAULT_ITEM_PADDING = 10;
+export const DEFAULT_OVERSCAN = 10;
+export const DEFAULT_EFFECT = 'fadeIn';
+export const DEFAULT_ELEMENTS_PER_ROW = 1;

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

@@ -1 +1,75 @@
-import React,{useEffect,useState}from"react";import{array,string,number,func,bool}from"prop-types";import{isEmpty}from"@widergy/web-utils/lib/array";import{useComponentDimensions}from"@widergy/energy-hooks";import UTLoading from"../UTLoading";import styles from"./styles.module.scss";import{DEFAULT_ITEM_PADDING,DEFAULT_OVERSCAN,DEFAULT_EFFECT,DEFAULT_ELEMENTS_PER_ROW}from"./constants";import VirtualizedData from"./components/VirtualizedData";const UTVirtualizedList=_ref=>{let{data:data,className:className,elementsPerRow:elementsPerRow,overscan:overscan,itemRenderer:itemRenderer,itemPadding:itemPadding,NoDataComponent:NoDataComponent,effect:effect,loading:loading,reRenderOnChange:reRenderOnChange,headerRenderer:headerRenderer,footerRenderer:footerRenderer}=_ref;const{height:listViewportHeight,width:listViewportWidth,ref:listViewportRef}=useComponentDimensions(),[reRender,setReRender]=useState(!1);return useEffect(()=>{setReRender(!reRender)},[...reRenderOnChange]),React.createElement("div",{className:"".concat(styles.container," ").concat(className),ref:listViewportRef},React.createElement(UTLoading,{loading:loading},isEmpty(data)?NoDataComponent?React.createElement(NoDataComponent,null):null:React.createElement(VirtualizedData,{headerRenderer:headerRenderer,footerRenderer:footerRenderer,reRenderOnChange:reRender,listViewportHeight:listViewportHeight,listViewportWidth:listViewportWidth,listViewportRef:listViewportRef,data:data,elementsPerRow:elementsPerRow,overscan:overscan,itemRenderer:itemRenderer,itemPadding:itemPadding,effect:effect})))};UTVirtualizedList.propTypes={data:array,className:string,elementsPerRow:number,overscan:number,itemRenderer:func,itemPadding:number,NoDataComponent:func,effect:string,loading:bool,reRenderOnChange:array,headerRenderer:func,footerRenderer:func},UTVirtualizedList.defaultProps={data:[],itemPadding:DEFAULT_ITEM_PADDING,overscan:DEFAULT_OVERSCAN,effect:DEFAULT_EFFECT,elementsPerRow:DEFAULT_ELEMENTS_PER_ROW,reRenderOnChange:[]};export default UTVirtualizedList;
+import React, { useEffect, useState } from 'react';
+import { array, string, number, func, bool } from 'prop-types';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import { useComponentDimensions } from '@widergy/energy-hooks';
+import UTLoading from '../UTLoading';
+import styles from './styles.module.scss';
+import { DEFAULT_ITEM_PADDING, DEFAULT_OVERSCAN, DEFAULT_EFFECT, DEFAULT_ELEMENTS_PER_ROW } from './constants';
+import VirtualizedData from './components/VirtualizedData';
+const UTVirtualizedList = _ref => {
+  let {
+    data,
+    className,
+    elementsPerRow,
+    overscan,
+    itemRenderer,
+    itemPadding,
+    NoDataComponent,
+    effect,
+    loading,
+    reRenderOnChange,
+    headerRenderer,
+    footerRenderer
+  } = _ref;
+  const {
+    height: listViewportHeight,
+    width: listViewportWidth,
+    ref: listViewportRef
+  } = useComponentDimensions();
+  const [reRender, setReRender] = useState(false);
+  useEffect(() => {
+    setReRender(!reRender);
+  }, [...reRenderOnChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(className),
+    ref: listViewportRef
+  }, /*#__PURE__*/React.createElement(UTLoading, {
+    loading: loading
+  }, isEmpty(data) ? NoDataComponent ? /*#__PURE__*/React.createElement(NoDataComponent, null) : null : /*#__PURE__*/React.createElement(VirtualizedData, {
+    headerRenderer: headerRenderer,
+    footerRenderer: footerRenderer,
+    reRenderOnChange: reRender,
+    listViewportHeight: listViewportHeight,
+    listViewportWidth: listViewportWidth,
+    listViewportRef: listViewportRef,
+    data: data,
+    elementsPerRow: elementsPerRow,
+    overscan: overscan,
+    itemRenderer: itemRenderer,
+    itemPadding: itemPadding,
+    effect: effect
+  })));
+};
+UTVirtualizedList.propTypes = {
+  data: array,
+  className: string,
+  elementsPerRow: number,
+  overscan: number,
+  itemRenderer: func,
+  itemPadding: number,
+  NoDataComponent: func,
+  effect: string,
+  loading: bool,
+  reRenderOnChange: array,
+  headerRenderer: func,
+  footerRenderer: func
+};
+UTVirtualizedList.defaultProps = {
+  data: [],
+  itemPadding: DEFAULT_ITEM_PADDING,
+  overscan: DEFAULT_OVERSCAN,
+  effect: DEFAULT_EFFECT,
+  elementsPerRow: DEFAULT_ELEMENTS_PER_ROW,
+  reRenderOnChange: []
+};
+export default UTVirtualizedList;

package/dist/esm/components/UTWizard/components/StepImage/index.js

@@ -1 +1,19 @@
-import React from"react";import{oneOfType,string,elementType}from"prop-types";import styles from"./styles.module.scss";const StepImage=_ref=>{let{Image:Image}=_ref;return"string"==typeof Image?React.createElement("img",{alt:"",className:styles.image,src:Image}):React.createElement(Image,{className:styles.image})};StepImage.propTypes={Image:oneOfType([string,elementType])};export default StepImage;
+import React from 'react';
+import { oneOfType, string, elementType } from 'prop-types';
+import styles from './styles.module.scss';
+const StepImage = _ref => {
+  let {
+    Image
+  } = _ref;
+  return typeof Image === 'string' ? /*#__PURE__*/React.createElement("img", {
+    alt: "",
+    className: styles.image,
+    src: Image
+  }) : /*#__PURE__*/React.createElement(Image, {
+    className: styles.image
+  });
+};
+StepImage.propTypes = {
+  Image: oneOfType([string, elementType])
+};
+export default StepImage;

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

@@ -1 +1,13 @@
-export const VARIANTS={dark:"dark",information:"information",light:"light"};export const DEFAULT_PROPS={variant:"dark"};export const ACTIONS={NEXT:"next",PREVIOUS:"previous",RESET:"reset"};
+export const VARIANTS = {
+  dark: 'dark',
+  information: 'information',
+  light: 'light'
+};
+export const DEFAULT_PROPS = {
+  variant: 'dark'
+};
+export const ACTIONS = {
+  NEXT: 'next',
+  PREVIOUS: 'previous',
+  RESET: 'reset'
+};