@sankhyalabs/core 0.0.0-bugfix-dev-32613.0 → 0.0.0-bugfix-dev-KB-43388.0

package/src/dataunit/DataUnit.ts

@@ -25,6 +25,7 @@ import { getFormattedValue } from "./formatting/PrettyFormatter.js";
 import { v4 as uuid } from "uuid";
 import { DataUnitStorage } from "./DataUnitStorage.js";
 import { getInvalidFieldMessage, InvalidFieldsReducer } from "./state/slice/InvalidFieldsSlice.js";
+import { getLoadingProperties, LoadingPropertiesReducer } from "./state/slice/LoadingProperties.js";
 
 /***
  * `DataUnit`: Atua como uma camada de abstração entre o back-end e a interface do usuário.
@@ -61,6 +62,7 @@ export default class DataUnit {
         this._stateManager = new StateManager(
             [
                 HistReducer,
+                LoadingPropertiesReducer,
                 UnitMetadataReducer,
                 LoadingControlReducer,
                 RecordsReducer,
@@ -114,6 +116,27 @@ export default class DataUnit {
         this._interceptors = [];
     }
 
+    /**
+     * Adiciona uma propriedade transacional que será envida aos 
+     * loaders (dataLoader, saveLoader, removeLoader e recordLoader) na chamada.
+     * Essas propriedades serão limpas ao final da execução de cada método.
+     * 
+     * @param name - Nome da propriedade
+     * @param value - Valor da propriedade
+     * 
+     */
+    public addGlobalLoaderProp(name: string, value: string):void{
+        this.dispatchAction(Action.LOADING_PROPERTY_ADDED, {[name]: value});
+    }
+
+    /**
+     * Retorna as propriedades transacionais adicionados anteriores à chamada.
+     * 
+     * @returns - Todas as propriedades desde o final do último loader.
+     */
+    public getGlobalLoaderProps(): Map<string, string>{
+        return getLoadingProperties(this._stateManager) || new Map();
+    }
 
     public get dataUnitId(): string{
         return this._uuid;
@@ -215,22 +238,24 @@ export default class DataUnit {
             if (await this.dispatchAction(Action.LOADING_DATA, request, executionCtx)) {
                 if (this.dataLoader) {
                     this.dataLoader(this, request).then(
-                        response => {
-                            this.dispatchAction(
+                        async response => {
+                            await this.dispatchAction(
                                 Action.DATA_LOADED, 
                                 {...response, keepSelection: request.keepSelection, filters: request.filters},
                                 executionCtx
                             );
+                            
+                            await this.dispatchAction(Action.LOADING_PROPERTIES_CLEANED);
 
                             if(selectFirstRecord){
                                 this.requestSelectFirst(executionCtx);
                             }
-
                             resolve(response);
                         }
                     ).catch(error => {
                         console.error(error);
                         const {errorCode} = error;
+                        this.dispatchAction(Action.LOADING_PROPERTIES_CLEANED);
                         fail(new ErrorException("Erro ao carregar registros", error, errorCode))
                     });
                 }
@@ -431,6 +456,7 @@ export default class DataUnit {
                                 const changes: Array<Change> = this.getAllChangesToSave();
 
                                 this.saveLoader(this, changes).then((records) => {
+                                    this.dispatchAction(Action.LOADING_PROPERTIES_CLEANED);
                                     const recordsByDataUnit = this.getRecordsByDataUnit(records);
 
                                     const dispatchPromisses = [];
@@ -445,9 +471,11 @@ export default class DataUnit {
                                     Promise.all(dispatchPromisses).then(() => resolve());
                                 }).catch(cause => {
                                     const {errorCode} = cause;
+                                    this.dispatchAction(Action.LOADING_PROPERTIES_CLEANED);
                                     fail(new ErrorException("Erro ao salvar alterações", cause, errorCode));
                                 });
                             } else {
+                                this.dispatchAction(Action.LOADING_PROPERTIES_CLEANED);
                                 resolve();
                             }
                         });
@@ -536,6 +564,7 @@ export default class DataUnit {
     public async removeRecords(recordIds: Array<string>, cachedRecords: Array<Record>, buffered: boolean = false, executionCtx?: ExecutionContext, silent: boolean = false): Promise<Array<string>> {
         if (recordIds) {
             if (buffered || !this.removeLoader) {
+                this.dispatchAction(Action.LOADING_PROPERTIES_CLEANED);
                 this.dispatchAction(Action.RECORDS_REMOVED, { records: recordIds, cachedRecords, buffered: true }, executionCtx);
             } else {
                 if (await this.dispatchAction(Action.REMOVING_RECORDS, {silent}, executionCtx)) {
@@ -553,9 +582,11 @@ export default class DataUnit {
                                     const selectionAfterRemove = [currentRecordsKeys[nextIndex]];
 
                                     this.dispatchAction(Action.RECORDS_REMOVED, { records: removedIds, cachedRecords, removedIndex, buffered: false, selectionAfterRemove }, executionCtx);
+                                    this.dispatchAction(Action.LOADING_PROPERTIES_CLEANED);
                                     resolve(removedIds);
                                 }
                             ).catch(error => {
+                                this.dispatchAction(Action.LOADING_PROPERTIES_CLEANED);
                                 const {errorCode} = error;
                                 fail(new ErrorException("Erro ao remover registros", error, errorCode))
                             });
@@ -612,15 +643,14 @@ export default class DataUnit {
      * 
     */
     public getFormattedValue(fieldName: string, value?: any): string {
-        
         const descriptor = this.getField(fieldName);
-        if (value == undefined) {
+        if (value === undefined) {
             value = this.getFieldValue(fieldName);
         } else if (typeof value === "string" && descriptor?.dataType != DataType.TEXT){
             value = this.valueFromString(fieldName, value);
         }
 
-        if(value == undefined){
+        if(value === undefined){
             return "";
         }
 
@@ -1500,7 +1530,7 @@ export default class DataUnit {
      * @param observer - Função que recebe como parâmetro as ações que serão monitoradas.
      * 
     */
-    public subscribe(observer: (action: DataUnitAction) => void) {
+    public subscribe(observer: (action: DataUnitAction) => void | Promise<void>) {
         this._observers.push(observer);
     }
 
@@ -1527,12 +1557,16 @@ export default class DataUnit {
             const selection = getSelection(this._stateManager);
             this.dispatchAction(Action.LOADING_RECORD, selection);
             
-            if(!this.dataLoader) return;
-            if(!this.recordLoader) return;
+            if(!this.recordLoader || !this.dataLoader) {
+                this.dispatchAction(Action.LOADING_PROPERTIES_CLEANED);
+                return;
+            }
             
             this.recordLoader(this, selection).then(response => {
                 this.dispatchAction(Action.RECORD_LOADED, response)
+                this.dispatchAction(Action.LOADING_PROPERTIES_CLEANED);
             }).catch(cause => {
+                this.dispatchAction(Action.LOADING_PROPERTIES_CLEANED);
                 const {errorCode} = cause;
                 fail(new ErrorException("Erro ao recarregar registro", cause, errorCode));
             });
@@ -1697,12 +1731,21 @@ export default class DataUnit {
         return selection?.recordIds || [];
     }
 
+    /**
+     * Adiciona um campo stand-alone ao dataUnit.
+     * 
+     * @deprecated - metodo depreciado, utilizar o metodo addField
+     */
+    public addStandAloneField() : void {
+        console.warn("metodo depreciado, para adicionar um campo standAlone, utilizar o metodo addField")
+    }
+
     /**
      * Adiciona um campo stand-alone ao dataUnit.
      * 
      * @param field - Campo a ser adicionado.
      */
-    public addStandAloneField(field: Omit<FieldDescriptor, 'standAlone'>) : void {
+    public addField(field: Omit<FieldDescriptor, 'standAlone'>) : void {
         const standAloneField = {...field, standAlone: true};
         this.metadata = {...this.metadata, fields: [...this.metadata.fields, standAloneField]};
     }

package/src/dataunit/formatting/PrettyFormatter.ts

@@ -10,10 +10,10 @@ export const getFormattedValue = (value: any, descriptor?: FieldDescriptor) => {
     }
 
     if(descriptor?.dataType === DataType.OBJECT){
-        if(Object.hasOwn(value, "value")){
+        if(value && Object.hasOwn(value, "value")){
             return getSearchFormat(value, descriptor);
         }
-        return value == undefined ? "" : value.toString();
+        return !value ? "" : value.toString();
     }
 
     if(descriptor?.userInterface === UserInterface.OPTIONSELECTOR){
@@ -53,6 +53,7 @@ export const getFormattedValue = (value: any, descriptor?: FieldDescriptor) => {
 }
 
 const getNumberFormat = (value: any, descriptor: FieldDescriptor) => {
+    if(!value) return "";
     if(descriptor.userInterface === UserInterface.INTEGERNUMBER){
         return value;
     }
@@ -79,10 +80,12 @@ const getOptionFormat = (value: any, descriptor: FieldDescriptor) => {
         options = JSON.parse(prop);
     } else {
         options = {};
-        prop.forEach(opt => options[opt.label] = opt.value);
+        if(prop != undefined){
+            prop.forEach(opt => options[opt.label] = opt.value);
+        }
     }
 
-    if(typeof value === "object"){
+    if(value && typeof value === "object" ){
         value = value.value
     }
 
@@ -90,7 +93,7 @@ const getOptionFormat = (value: any, descriptor: FieldDescriptor) => {
         return options[value];
     }
 
-    return value;     
+    return value ?? "";
 }
 
 

package/src/dataunit/metadata/DataType.ts

@@ -67,7 +67,16 @@ export const getConvertedValue = (dataType: DataType, value: any): any => {
     case DataType.NUMBER:
       return value === "" || isNaN(Number(value)) ? null : Number(value);
     case DataType.OBJECT:
-      return typeof value === "string" ? JSON.parse(value) : value;
+    //Caso de uso campo DataType do tipo STRING e UserInterface do tipo TEXT, que tem relacionamento (TGFPRO.GRUPOPIS)
+    if(typeof value === "string") {
+        try{
+            return JSON.parse(value);
+        }catch(e){
+            console.warn(`Erro ao fazer parse do valor ${value} para objeto, dataType: ${dataType}`);
+        }
+      }
+
+      return value;
     case DataType.BOOLEAN:
       if (typeof value === "string") {
         return Boolean(value === 'true');

package/src/dataunit/state/action/DataUnitAction.ts

@@ -63,6 +63,8 @@ export enum Action{
     CHILD_CHANGED = "childChanged",
 
     FIELD_INVALIDATED = "fieldInvalidated",
-    INVALIDATE_CLEAN = "invalidateClean"
+    INVALIDATE_CLEAN = "invalidateClean",
     
+    LOADING_PROPERTY_ADDED = "loadingPropertyAdded",
+    LOADING_PROPERTIES_CLEANED = "loadingPropertiesCleaned"
 }

package/src/dataunit/state/slice/ChangesSlice.ts

@@ -94,27 +94,28 @@ export const getChangedFieldValue = (fieldName: string, record: Record, stateMan
 }
 
 export const getChangesToSave = (dataUnit: string, stateManager: StateManager): Array<Change> => {
-    const result: Array<Change> = [];
-
+    
     const changes = getChanges(stateManager);
     const selectedRecords = getSelectionRecords(stateManager) || [];
-    const records: Set<Record> = new Set(
+    const records: Map<string, Record> = new Map(
         getRecords(stateManager)
         .concat(
-            selectedRecords
-                .filter(record => !isAddedRecord(record.__record__id__, stateManager)
-            )
+            selectedRecords.filter(record => !isAddedRecord(record.__record__id__, stateManager))
         )
+        .map(r => [r.__record__id__, r])
     );
-
-    records?.forEach(r => {
-        if(changes){
-            const c = changes.get(r.__record__id__);
-            if (c) {
-                result.push(new Change(dataUnit, r, c, ChangeOperation.UPDATE,  r.__record__source__id__));
+    
+    const result: Array<Change> = [];
+    
+    if(changes != undefined){
+        Array.from(changes.entries())
+        .forEach(([recordId, change]) =>{
+            const record = records.get(recordId);
+            if(record != undefined){
+                result.push(new Change(dataUnit, record, change, ChangeOperation.UPDATE,  record.__record__source__id__));
             }
-        }
-    });
+        });
+    }
 
     const addedRecords = getAddedRecords(stateManager);
     if (addedRecords) {

package/src/dataunit/state/slice/InvalidFieldsSlice.ts

@@ -15,6 +15,8 @@ class InvalidFieldsReducerImpl implements ActionReducer{
                 return makeInvalid(currentState, action.payload);
             case Action.INVALIDATE_CLEAN:
                 return clearRecord(currentState, action.payload);
+            case Action.EDITION_CANCELED:
+                return undefined;
         }
 
         return currentState;

package/src/dataunit/state/slice/LoadingProperties.ts

@@ -0,0 +1,37 @@
+
+import { ActionReducer, StateAction } from "../StateManager.js";
+import { Action } from "../action/DataUnitAction.js";
+import StateManager from "../StateManager.js";
+
+class LoadingPropertiesImpl implements ActionReducer{
+    
+    public sliceName: string = "loadingProperties";
+
+    public reduce(_stateManager:StateManager, currentState: Map<string, string>, action: StateAction): Map<string, string>|undefined {
+        switch(action.type){
+            case Action.LOADING_PROPERTY_ADDED:
+                return buildNewState(currentState, action.payload);
+            case Action.LOADING_PROPERTIES_CLEANED:
+                return undefined;
+        }
+        return currentState;
+    }
+}
+
+export const LoadingPropertiesReducer = new LoadingPropertiesImpl();
+
+export const getLoadingProperties = (stateManager: StateManager): Map<string, string>|undefined => {
+    return stateManager.select(LoadingPropertiesReducer.sliceName, (state: Map<string, string>) => state);
+};
+
+function buildNewState(currentState: Map<string, string>, payload: any): Map<string, string>{
+    const newState =  new Map(currentState);
+    if(payload != undefined){
+        for (const [key, value] of Object.entries(payload)) {
+            if(typeof key === "string" && typeof value === "string"){
+                newState.set(key, value);
+            }
+        }
+    }
+    return newState;
+}

package/src/dataunit/state/slice/SelectionSlice.ts

@@ -17,7 +17,8 @@ class SelectionReducerImpl implements ActionReducer {
                 return !action.payload?.keepSelection ? undefined : currentState;
             case Action.RECORDS_ADDED:
             case Action.RECORDS_COPIED:
-                return {currentSelection: action.payload.map((r: Record)=>r.__record__id__), lastSelection: currentState?.currentSelection};
+                const lastSelection = currentState?.currentSelection || [];
+                return {currentSelection: action.payload.map((r: Record)=>r.__record__id__), lastSelection};
             case Action.DATA_SAVED:
                 return {currentSelection: updateSavedIds(stateManager, action.payload.records)};
             case Action.RECORDS_REMOVED:
@@ -67,7 +68,7 @@ class SelectionReducerImpl implements ActionReducer {
                 if(currentState?.lastSelection){
                     return { currentSelection: currentState.lastSelection };
                 }
-                break;
+                return { currentSelection: [] }
         }
 
         return currentState;

package/src/index.ts

@@ -39,6 +39,7 @@ import { IRepositoryIndex } from "./repository/indexeddb/IRepositoryIndex.js"
 import { FieldComparator } from "./dataunit/sorting/FieldComparator.js";
 import { KeyboardManager } from "./utils/KeyboardManager/index.js";
 import { SearchUtils } from "./utils/SearchUtils.js";
+import OverflowWatcher, { OnOverflowCallBack, OverflowDirection, OverFlowWatcherParams, OVERFLOWED_CLASS_NAME } from "./utils/OverflowWatcher/index.js";
 
 /*Classes públicas no pacote*/
 export {
@@ -106,4 +107,9 @@ export {
     defaultDataLoader,
     KeyboardManager,
     SearchUtils,
+    OverflowWatcher,
+    OnOverflowCallBack,
+    OverflowDirection,
+    OverFlowWatcherParams,
+    OVERFLOWED_CLASS_NAME
 };

package/src/utils/ElementUtils.ts

@@ -0,0 +1,10 @@
+import { OverflowDirection } from './OverflowWatcher/types/overflow-direction.js';
+
+export function calcMarginSize(el:Element, scrollDirection: OverflowDirection){
+  const computedStyle = getComputedStyle(el);
+  if(OverflowDirection.HORIZONTAL === scrollDirection){
+    return (parseInt(computedStyle.marginLeft || '0') + parseInt(computedStyle.marginRight || '0'));
+  }
+
+  return (parseInt(computedStyle.marginTop || '0') + parseInt(computedStyle.marginBottom || '0'));
+}

package/src/utils/OverflowWatcher/index.ts

@@ -0,0 +1,237 @@
+import { JSUtils } from "../JSUtils.js";
+import { OverflowDirection } from "./types/overflow-direction.js"
+import { OnOverflowCallBack } from "./types/overflow-callback.js"
+import { calcMarginSize } from '../ElementUtils.js';
+
+export * from "./types/overflow-direction.js";
+export * from "./types/overflow-callback.js";
+
+export const OVERFLOWED_CLASS_NAME = 'overflowed';
+
+export default class OverflowWatcher {
+    private _onResize:OnOverflowCallBack;
+    private _resizeObserver:ResizeObserver;
+    private _lastContainerSize:number|undefined = undefined;
+    private _lastContainerInstance: HTMLElement | undefined = undefined;
+    private _scrollDirection = OverflowDirection.HORIZONTAL;
+    private _propSize:string;
+    private _hiddenItemsProps:Map<Element, SizeProps> = new Map();
+    private _notOverFlowPros:Map<string, SizeProps> = new Map();
+    private _deltaSize:number;
+    private _notOverFlow: string[] = [];
+
+    readonly DATA_ELEMENT_ID = 'data-element-id';
+
+    /**
+     * Cria uma instancia do OverflowWatcher
+     *
+     * @param element - Elemento HTML que o overflow será observado.
+     * @param callback - Função que sera chamada quando ocorrer overflow no elemento.
+     * @param overFlowDirection - Indica direção que o overflow será monitorado.
+     * @param deltaSize - Variação de tamanho que será considerada como overflow.
+     * @param debounce - Tempo até execução do callback em milissegundos.
+     * @param notOverFlow - Lista de ids ou data-element-ids dos elementos que não devem sofrer overFlow.
+     */
+    constructor({
+                    element,
+                    callback,
+                    overFlowDirection = OverflowDirection.HORIZONTAL,
+                    debounce = 200,
+                    deltaSize = 0,
+                    notOverFlow = []
+    }: OverFlowWatcherParams){
+        this._onResize = callback;
+        this._scrollDirection = overFlowDirection;
+        this._propSize = (OverflowDirection.HORIZONTAL === overFlowDirection) ? "width" : "height";
+        this._resizeObserver = new ResizeObserver(JSUtils.debounce((entries: ResizeObserverEntry[]) => this.handleResize(entries), debounce));
+        this._resizeObserver.observe(element);
+        this._deltaSize = deltaSize;
+        this._notOverFlow = notOverFlow;
+    }
+
+    public destroy(){
+        this._resizeObserver.disconnect();
+    }
+
+    public forceUpdate(){
+        if(this._lastContainerSize && this._lastContainerInstance){
+            this.updateOverFlowedItems(this._lastContainerInstance, this._lastContainerSize);
+        }
+    }
+
+    private handleResize(entries: ResizeObserverEntry[]){
+        if(!entries || entries.length === 0) return;
+
+        const container = entries[0];
+        const containerSize:number = (container.contentRect as any)[this._propSize];
+        if(!containerSize) return;
+
+        if(this.hasChangedSize(containerSize)){
+           this.updateOverFlowedItems(container.target as HTMLElement, containerSize);
+        }
+    }
+
+    private updateOverFlowedItems(container: HTMLElement, containerSize: number){
+        const children:Element[] = Array.from(container.children);
+        this.registerNotOverflowProps(children);
+        this.proccessElements(containerSize, children);
+        this._lastContainerSize = containerSize;
+        this._lastContainerInstance = container;
+    }
+
+    private registerNotOverflowProps(children: Element[]) {
+        children.forEach(childElement => {
+            const id = childElement.id || this.getDataElementId(childElement);
+            if (this.canNotRegisterNotOverFlow(id)) return;
+            this._notOverFlowPros.set(id, this.getElementSizeProps(childElement));
+        });
+    }
+
+    private canNotRegisterNotOverFlow(id: string) {
+        return !id || !this._notOverFlow.includes(id) || this._notOverFlowPros.has(id);
+    }
+
+    private hasChangedSize(elementSize: number):boolean{
+        if(!this._lastContainerSize) return true;
+        const variation = elementSize - this._lastContainerSize;
+
+        if(variation < 0){
+            const absoluteVariation = Math.abs(variation);
+            return (absoluteVariation > this._deltaSize);
+        }
+
+        return variation > 0;
+    }
+
+    private proccessElements(elementSize:number, children:Element[]){
+        if(children.length === 0) return;
+
+        const childrenSize = this.calcChildrenSize(children);
+        let diff = Number((elementSize - childrenSize).toFixed(4));
+
+        if(diff > 0){
+            this.clearOverFlow();
+            return;
+        }
+
+        this.proccessElementsOverFlow(children, elementSize);
+    }
+
+    private clearOverFlow(){
+        this._hiddenItemsProps = new Map();
+        this._onResize([]);
+    }
+
+    private proccessElementsOverFlow(allElements:Element[], avaliableSize:number){
+        const elementsThatFit: Element[] = [];
+        const avaliableSizeConsideringDelta = (avaliableSize - this._deltaSize);
+
+        let sumElementsSize = 0;
+        for (const element of allElements) {
+            sumElementsSize += this.calcElementSize(element);
+            if(this.exceedsAvaliableSize(sumElementsSize, elementsThatFit, avaliableSizeConsideringDelta)) break;
+            elementsThatFit.push(element);
+        }
+
+        const overFlowedElements = allElements.filter(element => this.isElementOverFlowing(elementsThatFit, element));
+
+        overFlowedElements.forEach(overFlowed => {
+            if(!this._hiddenItemsProps.has(overFlowed)){
+                this.registerElementSize(overFlowed);
+            }
+        });
+
+        this._onResize(overFlowedElements);
+    }
+
+    private isElementOverFlowing(elementsThatFit: Element[], element: Element) {
+        return !elementsThatFit.includes(element) && this.canOverFlowElement(element);
+    }
+
+    private canOverFlowElement(element: Element) {
+        return !this._notOverFlow.includes(element.id)
+          && !this._notOverFlow.includes(this.getDataElementId(element));
+    }
+
+    private getDataElementId(element: Element): string {
+        return (element as HTMLElement).getAttribute('data-element-id') ?? "";
+    }
+
+    private exceedsAvaliableSize(sumElementsSize: number, elements: Element[], avaliableSize: number): boolean {
+        if(!this._notOverFlow.length) return sumElementsSize > avaliableSize
+
+        const elementIdsToCalculate = this.canNotOverFlowNotIncludedIds(elements);
+        if(!elementIdsToCalculate.length) return sumElementsSize > avaliableSize
+
+        const variation = this.calculateVariation(elementIdsToCalculate);
+        const occupiedSize = sumElementsSize + variation;
+        return occupiedSize > avaliableSize;
+    }
+
+    private calculateVariation(elementIdsToCalculate: string[]) {
+        let variation = 0
+        elementIdsToCalculate.forEach(id => {
+            const sizeProps = this._notOverFlowPros.get(id);
+            variation += sizeProps?.size ?? 0;
+            variation += sizeProps?.margin ?? 0;
+        });
+        return variation;
+    }
+
+    private canNotOverFlowNotIncludedIds(elements: Element[]): string[]{
+        const elementsIdList = elements.map(el =>  el.id || this.getDataElementId(el)).filter(id => !!id);
+        return this._notOverFlow.filter(id => !elementsIdList.includes(id));
+    }
+
+    private registerElementSize(element: Element) {
+        const sizeProps = this.getElementSizeProps(element);
+        this._hiddenItemsProps.set(element, sizeProps);
+    }
+
+    private getElementSizeProps(element: Element) {
+        const sizeProps: SizeProps = {
+            size: (element.getBoundingClientRect() as any)[this._propSize],
+            margin: calcMarginSize(element, this._scrollDirection),
+        };
+        return sizeProps;
+    }
+
+    private calcChildrenSize(children:Element[]):number{
+        let sumChildren = 0;
+        sumChildren += this._deltaSize;
+        Array.from(children).forEach(el => sumChildren += this.calcElementSize(el));
+        return sumChildren;
+    }
+
+    private calcElementSize(el: Element) {
+        let size = 0
+        if (this.isOverFlowed(el)) {
+            const sizeProps = this._hiddenItemsProps.get(el);
+            size += sizeProps?.size ?? 0;
+            size += sizeProps?.margin ?? 0;
+            return size;
+        }
+
+        size += (el.getBoundingClientRect() as any)[this._propSize];
+        size += calcMarginSize(el, this._scrollDirection);
+        return size;
+    }
+
+    private isOverFlowed(el: Element) {
+        return el.classList.contains(OVERFLOWED_CLASS_NAME);
+    }
+}
+
+export interface OverFlowWatcherParams {
+    element:HTMLElement,
+    callback:OnOverflowCallBack,
+    overFlowDirection?:OverflowDirection,
+    deltaSize?:number,
+    debounce?: number,
+    notOverFlow?: string[]
+}
+
+interface SizeProps {
+    size: number,
+    margin: number,
+}

package/src/utils/OverflowWatcher/types/overflow-callback.ts

@@ -0,0 +1,6 @@
+/**
+ * Callback que será chamado quando o overflow de um elemento for alterado.
+ * 
+ * @param elementsOverFlow - Conjunto de elementos filhos que estão causando overflow no elemento pai.
+ */
+export type OnOverflowCallBack = (elementsOverFlow:Array<Element>) => void;

package/src/utils/OverflowWatcher/types/overflow-direction.ts

@@ -0,0 +1,7 @@
+/**
+ * Define em qual direção o overflow será observado
+ */
+export enum OverflowDirection {
+    'VERTICAL',
+    'HORIZONTAL'
+}