@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTTable/components/TableRow/index.js

@@ -1 +1,178 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}import Checkbox from"@material-ui/core/Checkbox";import Radio from"@material-ui/core/Radio";import React,{memo}from"react";import{arrayOf,bool,elementType,func,number,object,oneOfType,shape,string}from"prop-types";import{isEmpty}from"@widergy/web-utils/lib/array";import ActionIcons from"../ActionIcons";import PrimaryAction from"../PrimaryAction";import UTTooltip from"../../../UTTooltip";import UTTouchableWithoutFeedback from"../../../UTTouchableWithoutFeedback";import{ID_CONSTANTS}from"../../../../constants/testIds";import{COLUMN_POSITION}from"../../constants";import{columnSizesType}from"../../types";import styles from"./styles.module.scss";import{hasVisibleActions}from"./utils";import{tippyProps}from"./constants";const{CELL:CELL}=ID_CONSTANTS,TableRow=_ref=>{let{actionDataTestId:actionDataTestId,CellComponent:CellComponent,cellDataTestId:cellDataTestId,cellProps:cellProps,checkBoxClassName:checkBoxClassName,checkBoxOnChange:checkBoxOnChange,checkBoxSelected:checkBoxSelected,className:className,columnSizes:columnSizes,columnsDefinition:columnsDefinition,containerStyle:containerStyle,disableRowSelection:disableRowSelection,disabledRowSelectionTooltip:disabledRowSelectionTooltip,exclusiveSelection:exclusiveSelection,fixedRowsLeftClassName:fixedRowsLeftClassName,fixedRowsRightClassName:fixedRowsRightClassName,handleRowClick:handleRowClick,isResponsive:isResponsive,pageRows:pageRows,removeFixedRowsDivisors:removeFixedRowsDivisors,rowClassName:rowClassName,rowStyles:rowStyles,selectable:selectable,selectionComponentDataTestId:selectionComponentDataTestId,tableSize:tableSize}=_ref;const{fixedLeftColumns:fixedLeftColumns=[],fixedRightColumns:fixedRightColumns=[],primaryActions:primaryActions=[],secondaryActions:secondaryActions=[],secondaryColumns:secondaryColumns=[]}=columnsDefinition,SelectionComponent=exclusiveSelection?Radio:Checkbox,hasActionsRow=selectable||hasVisibleActions(secondaryActions,cellProps.rowData),selectableCellStyles=isResponsive?"".concat(styles.secondaryActionsContainer,"\n      ").concat(cellProps.classes.responsiveCell,"\n      ").concat(hasActionsRow?cellProps.classes.responsiveRowTopBorder:styles.hidden,"\n      ").concat(selectable?styles.secondaryActionsSelectable:"","\n      "):"\n\t".concat(styles.fixedRowLeft,"\n\t").concat(fixedRowsLeftClassName,"\n\t").concat((removeFixedRowsDivisors||isEmpty(fixedLeftColumns))&&styles.disableBorderRight,"\n\t").concat(!selectable&&isEmpty(fixedLeftColumns)&&styles.cleanFixedColumns,"\n");return React.createElement(UTTouchableWithoutFeedback,{className:"\n        ".concat(styles.row,"\n        ").concat((!handleRowClick||isResponsive)&&styles.noClick,"\n        ").concat(isResponsive&&cellProps.classes.responsiveRow,"\n        ").concat(isResponsive&&styles.responsiveRow,"\n        ").concat(className,"\n      "),onClick:handleRowClick,style:containerStyle},!isResponsive&&React.createElement("div",{className:styles.stickyRowBackground},React.createElement("div",{className:"".concat(styles.rowBackground," ").concat(rowClassName),style:{width:tableSize,...rowStyles.rowBackground}})),React.createElement("div",{className:selectableCellStyles,style:{...rowStyles.fixedRowsLeft,width:isResponsive?"auto":columnSizes.leftColumnsSize}},selectable&&React.createElement("div",{className:"\n                ".concat(styles.checkBoxCell,"\n                ").concat(checkBoxSelected?cellProps.classes.headerDecoratorSelected:cellProps.classes.headerDecoratorUnselected,"\n                ").concat(checkBoxClassName,"\n                ").concat(cellProps.classes.checkBoxCell,"\n                ").concat(isResponsive&&checkBoxSelected&&cellProps.classes.selectedResponsiveCell,"\n              "),style:rowStyles.selectCell},React.createElement(UTTooltip,{content:(null==disableRowSelection?void 0:disableRowSelection(cellProps.rowData,pageRows))&&(null==disabledRowSelectionTooltip?void 0:disabledRowSelectionTooltip(cellProps.rowData,pageRows)),stringContentClassName:styles.disableSelectionTooltip,tippyProps:tippyProps},React.createElement("span",null,React.createElement(SelectionComponent,{classes:{root:styles.checkBoxRoot,colorPrimary:"".concat(styles.checkboxColorPrimary," ").concat(cellProps.classes.checkBoxRoot),checked:cellProps.classes.checkboxColorChecked},checked:checkBoxSelected,color:"primary",disabled:disableRowSelection&&disableRowSelection(cellProps.rowData,pageRows),inputProps:{"data-testid":selectionComponentDataTestId},onChange:checkBoxOnChange})))),fixedLeftColumns.map((column,i)=>React.createElement(CellComponent,_extends({actionDataTestId:actionDataTestId,column:column,columnSizes:columnSizes,dataTestId:"".concat(cellDataTestId,".fixedLeft.column_").concat(i,".").concat(CELL),key:"cell_".concat(column.key)},cellProps))),!isEmpty(secondaryActions)&&React.createElement("div",{className:styles.secondaryActions},secondaryActions.map(action=>React.createElement(ActionIcons,{classes:cellProps.classes,column:action,dataTestId:"".concat(actionDataTestId,".tableRow."),key:"action_".concat(action.key),rowData:cellProps.rowData})))),!isEmpty(secondaryColumns)&&React.createElement("div",{className:"\n              ".concat(styles.secondaryColumns,"\n              ").concat(isResponsive&&checkBoxSelected&&cellProps.classes.selectedResponsiveCell,"\n              ").concat(isResponsive&&selectable&&styles.hideTopBorder,"\n              ").concat(isResponsive&&hasActionsRow&&styles.fixBorderRadius,"\n            "),style:{width:isResponsive?"auto":columnSizes.secondaryColumnsSize}},secondaryColumns.map((column,index)=>React.createElement(CellComponent,_extends({actionDataTestId:actionDataTestId,column:column,columnSizes:columnSizes,dataTestId:"".concat(cellDataTestId,".secondary.column_").concat(index,".").concat(CELL),key:"cell_".concat(column.key)},cellProps,{showBottomBorder:index===secondaryColumns.length-1&&isEmpty(primaryActions),rowStyles:rowStyles}))),primaryActions.map((column,index)=>React.createElement(PrimaryAction,_extends({actionDataTestId:actionDataTestId,column:column,key:"cell_".concat(column.key)},cellProps,{rowStyles:rowStyles,showBottomBorder:index===primaryActions.length-1,showBottomRadius:index===primaryActions.length-1})))),!isResponsive&&React.createElement("div",{className:"\n            ".concat(styles.fixedRowRight,"\n            ").concat(fixedRowsRightClassName,"\n            ").concat((removeFixedRowsDivisors||isEmpty(fixedRightColumns))&&styles.disableBorderLeft,"\n            ").concat(isEmpty(fixedRightColumns)&&styles.cleanFixedColumns,"\n          "),style:{...rowStyles.fixedRowsRight,width:columnSizes.rightColumnsSize}},fixedRightColumns.map((column,i)=>React.createElement(CellComponent,_extends({actionDataTestId:actionDataTestId,align:COLUMN_POSITION.RIGHT,column:column,columnSizes:columnSizes,dataTestId:"".concat(cellDataTestId,".fixedRight.column_").concat(i,".").concat(CELL),key:"cell_".concat(column.key)},cellProps)))))};TableRow.propTypes={actionDataTestId:string,CellComponent:elementType,cellDataTestId:string,cellProps:object,checkBoxClassName:string,checkBoxOnChange:func,checkBoxSelected:bool,className:string,columnsDefinition:shape({fixedLeftColumns:arrayOf(object),fixedRightColumns:arrayOf(object),secondaryColumns:arrayOf(object)}),columnSizes:columnSizesType,containerStyle:object,disableRowSelection:oneOfType([func,bool]),disabledRowSelectionTooltip:oneOfType([func,string]),exclusiveSelection:bool,fixedRowsLeftClassName:string,fixedRowsRightClassName:string,handleRowClick:func,isResponsive:bool,pageRows:arrayOf(object),removeFixedRowsDivisors:bool,rowClassName:string,rowStyles:object,selectable:bool,selectionComponentDataTestId:string,tableSize:oneOfType([number,string])};export default memo(TableRow);
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import Checkbox from '@material-ui/core/Checkbox';
+import Radio from '@material-ui/core/Radio';
+import React, { memo } from 'react';
+import { arrayOf, bool, elementType, func, number, object, oneOfType, shape, string } from 'prop-types';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import ActionIcons from '../ActionIcons';
+import PrimaryAction from '../PrimaryAction';
+import UTTooltip from '../../../UTTooltip';
+import UTTouchableWithoutFeedback from '../../../UTTouchableWithoutFeedback';
+import { ID_CONSTANTS } from '../../../../constants/testIds';
+import { COLUMN_POSITION } from '../../constants';
+import { columnSizesType } from '../../types';
+import styles from './styles.module.scss';
+import { hasVisibleActions } from './utils';
+import { tippyProps } from './constants';
+const {
+  CELL
+} = ID_CONSTANTS;
+const TableRow = _ref => {
+  let {
+    actionDataTestId,
+    CellComponent,
+    cellDataTestId,
+    cellProps,
+    checkBoxClassName,
+    checkBoxOnChange,
+    checkBoxSelected,
+    className,
+    columnSizes,
+    columnsDefinition,
+    containerStyle,
+    disableRowSelection,
+    disabledRowSelectionTooltip,
+    exclusiveSelection,
+    fixedRowsLeftClassName,
+    fixedRowsRightClassName,
+    handleRowClick,
+    isResponsive,
+    pageRows,
+    removeFixedRowsDivisors,
+    rowClassName,
+    rowStyles,
+    selectable,
+    selectionComponentDataTestId,
+    tableSize
+  } = _ref;
+  const {
+    fixedLeftColumns = [],
+    fixedRightColumns = [],
+    primaryActions = [],
+    secondaryActions = [],
+    secondaryColumns = []
+  } = columnsDefinition;
+  const SelectionComponent = exclusiveSelection ? Radio : Checkbox;
+  const hasActionsRow = selectable || hasVisibleActions(secondaryActions, cellProps.rowData);
+  const selectableCellStyles = isResponsive ? "".concat(styles.secondaryActionsContainer, "\n      ").concat(cellProps.classes.responsiveCell, "\n      ").concat(hasActionsRow ? cellProps.classes.responsiveRowTopBorder : styles.hidden, "\n      ").concat(selectable ? styles.secondaryActionsSelectable : '', "\n      ") : "\n\t".concat(styles.fixedRowLeft, "\n\t").concat(fixedRowsLeftClassName, "\n\t").concat((removeFixedRowsDivisors || isEmpty(fixedLeftColumns)) && styles.disableBorderRight, "\n\t").concat(!selectable && isEmpty(fixedLeftColumns) && styles.cleanFixedColumns, "\n");
+  return /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+    className: "\n        ".concat(styles.row, "\n        ").concat((!handleRowClick || isResponsive) && styles.noClick, "\n        ").concat(isResponsive && cellProps.classes.responsiveRow, "\n        ").concat(isResponsive && styles.responsiveRow, "\n        ").concat(className, "\n      "),
+    onClick: handleRowClick,
+    style: containerStyle
+  }, !isResponsive && /*#__PURE__*/React.createElement("div", {
+    className: styles.stickyRowBackground
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.rowBackground, " ").concat(rowClassName),
+    style: {
+      width: tableSize,
+      ...rowStyles.rowBackground
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: selectableCellStyles,
+    style: {
+      ...rowStyles.fixedRowsLeft,
+      width: isResponsive ? 'auto' : columnSizes.leftColumnsSize
+    }
+  }, selectable && /*#__PURE__*/React.createElement("div", {
+    className: "\n                ".concat(styles.checkBoxCell, "\n                ").concat(checkBoxSelected ? cellProps.classes.headerDecoratorSelected : cellProps.classes.headerDecoratorUnselected, "\n                ").concat(checkBoxClassName, "\n                ").concat(cellProps.classes.checkBoxCell, "\n                ").concat(isResponsive && checkBoxSelected && cellProps.classes.selectedResponsiveCell, "\n              "),
+    style: rowStyles.selectCell
+  }, /*#__PURE__*/React.createElement(UTTooltip, {
+    content: (disableRowSelection === null || disableRowSelection === void 0 ? void 0 : disableRowSelection(cellProps.rowData, pageRows)) && (disabledRowSelectionTooltip === null || disabledRowSelectionTooltip === void 0 ? void 0 : disabledRowSelectionTooltip(cellProps.rowData, pageRows)),
+    stringContentClassName: styles.disableSelectionTooltip,
+    tippyProps: tippyProps
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(SelectionComponent, {
+    classes: {
+      root: styles.checkBoxRoot,
+      colorPrimary: "".concat(styles.checkboxColorPrimary, " ").concat(cellProps.classes.checkBoxRoot),
+      checked: cellProps.classes.checkboxColorChecked
+    },
+    checked: checkBoxSelected,
+    color: "primary",
+    disabled: disableRowSelection && disableRowSelection(cellProps.rowData, pageRows),
+    inputProps: {
+      'data-testid': selectionComponentDataTestId
+    },
+    onChange: checkBoxOnChange
+  })))), fixedLeftColumns.map((column, i) => /*#__PURE__*/React.createElement(CellComponent, _extends({
+    actionDataTestId: actionDataTestId,
+    column: column,
+    columnSizes: columnSizes,
+    dataTestId: "".concat(cellDataTestId, ".fixedLeft.column_").concat(i, ".").concat(CELL),
+    key: "cell_".concat(column.key)
+  }, cellProps))), !isEmpty(secondaryActions) && /*#__PURE__*/React.createElement("div", {
+    className: styles.secondaryActions
+  }, secondaryActions.map(action => /*#__PURE__*/React.createElement(ActionIcons, {
+    classes: cellProps.classes,
+    column: action,
+    dataTestId: "".concat(actionDataTestId, ".tableRow."),
+    key: "action_".concat(action.key),
+    rowData: cellProps.rowData
+  })))), !isEmpty(secondaryColumns) && /*#__PURE__*/React.createElement("div", {
+    className: "\n              ".concat(styles.secondaryColumns, "\n              ").concat(isResponsive && checkBoxSelected && cellProps.classes.selectedResponsiveCell, "\n              ").concat(isResponsive && selectable && styles.hideTopBorder, "\n              ").concat(isResponsive && hasActionsRow && styles.fixBorderRadius, "\n            "),
+    style: {
+      width: isResponsive ? 'auto' : columnSizes.secondaryColumnsSize
+    }
+  }, secondaryColumns.map((column, index) => /*#__PURE__*/React.createElement(CellComponent, _extends({
+    actionDataTestId: actionDataTestId,
+    column: column,
+    columnSizes: columnSizes,
+    dataTestId: "".concat(cellDataTestId, ".secondary.column_").concat(index, ".").concat(CELL),
+    key: "cell_".concat(column.key)
+  }, cellProps, {
+    showBottomBorder: index === secondaryColumns.length - 1 && isEmpty(primaryActions),
+    rowStyles: rowStyles
+  }))), primaryActions.map((column, index) => /*#__PURE__*/React.createElement(PrimaryAction, _extends({
+    actionDataTestId: actionDataTestId,
+    column: column,
+    key: "cell_".concat(column.key)
+  }, cellProps, {
+    rowStyles: rowStyles,
+    showBottomBorder: index === primaryActions.length - 1,
+    showBottomRadius: index === primaryActions.length - 1
+  })))), !isResponsive && /*#__PURE__*/React.createElement("div", {
+    className: "\n            ".concat(styles.fixedRowRight, "\n            ").concat(fixedRowsRightClassName, "\n            ").concat((removeFixedRowsDivisors || isEmpty(fixedRightColumns)) && styles.disableBorderLeft, "\n            ").concat(isEmpty(fixedRightColumns) && styles.cleanFixedColumns, "\n          "),
+    style: {
+      ...rowStyles.fixedRowsRight,
+      width: columnSizes.rightColumnsSize
+    }
+  }, fixedRightColumns.map((column, i) => /*#__PURE__*/React.createElement(CellComponent, _extends({
+    actionDataTestId: actionDataTestId,
+    align: COLUMN_POSITION.RIGHT,
+    column: column,
+    columnSizes: columnSizes,
+    dataTestId: "".concat(cellDataTestId, ".fixedRight.column_").concat(i, ".").concat(CELL),
+    key: "cell_".concat(column.key)
+  }, cellProps)))));
+};
+TableRow.propTypes = {
+  actionDataTestId: string,
+  CellComponent: elementType,
+  cellDataTestId: string,
+  cellProps: object,
+  checkBoxClassName: string,
+  checkBoxOnChange: func,
+  checkBoxSelected: bool,
+  className: string,
+  columnsDefinition: shape({
+    fixedLeftColumns: arrayOf(object),
+    fixedRightColumns: arrayOf(object),
+    secondaryColumns: arrayOf(object)
+  }),
+  columnSizes: columnSizesType,
+  containerStyle: object,
+  disableRowSelection: oneOfType([func, bool]),
+  disabledRowSelectionTooltip: oneOfType([func, string]),
+  exclusiveSelection: bool,
+  fixedRowsLeftClassName: string,
+  fixedRowsRightClassName: string,
+  handleRowClick: func,
+  isResponsive: bool,
+  pageRows: arrayOf(object),
+  removeFixedRowsDivisors: bool,
+  rowClassName: string,
+  rowStyles: object,
+  selectable: bool,
+  selectionComponentDataTestId: string,
+  tableSize: oneOfType([number, string])
+};
+export default /*#__PURE__*/memo(TableRow);

package/dist/esm/components/UTTable/components/TableRow/utils.js

@@ -1 +1,8 @@
-import{isEmpty}from"@widergy/web-utils/lib/array";export const hasVisibleActions=(secondaryActions,rowData)=>!isEmpty(secondaryActions)&&secondaryActions.some(secondaryAction=>{var _secondaryAction$acti;return null==secondaryAction||null===(_secondaryAction$acti=secondaryAction.actions)||void 0===_secondaryAction$acti?void 0:_secondaryAction$acti.some(action=>{var _action$isVisible;return null===(_action$isVisible=action.isVisible)||void 0===_action$isVisible?void 0:_action$isVisible.call(action,rowData)})});
+import { isEmpty } from '@widergy/web-utils/lib/array';
+export const hasVisibleActions = (secondaryActions, rowData) => !isEmpty(secondaryActions) && secondaryActions.some(secondaryAction => {
+  var _secondaryAction$acti;
+  return secondaryAction === null || secondaryAction === void 0 || (_secondaryAction$acti = secondaryAction.actions) === null || _secondaryAction$acti === void 0 ? void 0 : _secondaryAction$acti.some(action => {
+    var _action$isVisible;
+    return (_action$isVisible = action.isVisible) === null || _action$isVisible === void 0 ? void 0 : _action$isVisible.call(action, rowData);
+  });
+});

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

@@ -1 +1,49 @@
-export const COLUMN_SIZES={xsmall:70,small:90,medium:120,large:160,xlarge:260,xxlarge:350};export const ROW_SIDE_PADDING=16;export const CELL_SIDE_PADDING=16;export const ROW_SPACING_NAMES={NONE:"none",SMALL:"small",MEDIUM:"medium"};export const ROW_PADDING_NAMES={SMALL:"small",MEDIUM:"medium"};export const ROW_SPACING={[ROW_SPACING_NAMES.NONE]:0,[ROW_SPACING_NAMES.SMALL]:5,[ROW_SPACING_NAMES.MEDIUM]:10};export const ROW_PADDING={[ROW_PADDING_NAMES.SMALL]:16,[ROW_PADDING_NAMES.MEDIUM]:24};export const COLUMN_POSITION={LEFT:"left",RIGHT:"right"};export const ROWS_PER_PAGE=[10,25,50];export const ROWS_BORDER_SIZE=1;export const TOTAL_ROWS_LABEL="resultados";export const TOTAL_ROW_LABEL="resultado";export const NO_RESULTS_LABEL="Aún no hay resultados";export const ROW_KEY="id";export const MAX_PAGINATION_ITEMS=5;export const PAGINATION_LIMIT_DOUBLE_ARROWS=10;export const CELL_TYPES={STATUS:"status",ACTION_ICONS:"action-icons",ACTION_BUTTON:"action-button",TEXT:"text"};export const CELL_ACTION_TYPES=[CELL_TYPES.ACTION_ICONS,CELL_TYPES.ACTION_BUTTON];export const DEFAULT_TABLET_BREAKPOINT=1024;export const DEFAULT_MOBILE_BREAKPOINT=768;
+export const COLUMN_SIZES = {
+  xsmall: 70,
+  small: 90,
+  medium: 120,
+  large: 160,
+  xlarge: 260,
+  xxlarge: 350
+};
+export const ROW_SIDE_PADDING = 16;
+export const CELL_SIDE_PADDING = 16;
+export const ROW_SPACING_NAMES = {
+  NONE: 'none',
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};
+export const ROW_PADDING_NAMES = {
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};
+export const ROW_SPACING = {
+  [ROW_SPACING_NAMES.NONE]: 0,
+  [ROW_SPACING_NAMES.SMALL]: 5,
+  [ROW_SPACING_NAMES.MEDIUM]: 10
+};
+export const ROW_PADDING = {
+  [ROW_PADDING_NAMES.SMALL]: 16,
+  [ROW_PADDING_NAMES.MEDIUM]: 24
+};
+export const COLUMN_POSITION = {
+  LEFT: 'left',
+  RIGHT: 'right'
+};
+export const ROWS_PER_PAGE = [10, 25, 50];
+export const ROWS_BORDER_SIZE = 1;
+export const TOTAL_ROWS_LABEL = 'resultados';
+export const TOTAL_ROW_LABEL = 'resultado';
+export const NO_RESULTS_LABEL = 'Aún no hay resultados';
+export const ROW_KEY = 'id';
+export const MAX_PAGINATION_ITEMS = 5;
+export const PAGINATION_LIMIT_DOUBLE_ARROWS = 10;
+export const CELL_TYPES = {
+  STATUS: 'status',
+  ACTION_ICONS: 'action-icons',
+  ACTION_BUTTON: 'action-button',
+  TEXT: 'text'
+};
+export const CELL_ACTION_TYPES = [CELL_TYPES.ACTION_ICONS, CELL_TYPES.ACTION_BUTTON];
+export const DEFAULT_TABLET_BREAKPOINT = 1024;
+export const DEFAULT_MOBILE_BREAKPOINT = 768;

package/dist/esm/components/UTTable/hook.js

@@ -1 +1,25 @@
-import{useRef,useLayoutEffect,useState,useCallback}from"react";export const useResizeObserver=()=>{const[observerEntry,setObserverEntry]=useState({}),[node,setNode]=useState(null),observer=useRef(null),disconnect=useCallback(()=>{var _observer$current;return null===(_observer$current=observer.current)||void 0===_observer$current?void 0:_observer$current.disconnect()},[]),callback=_ref=>{let[entry]=_ref;window.requestAnimationFrame(()=>{setObserverEntry(entry)})},observe=useCallback(()=>{observer.current=new ResizeObserver(callback),node&&observer.current.observe(node)},[node]);return useLayoutEffect(()=>(observe(),()=>disconnect()),[disconnect,observe]),[setNode,observerEntry]};
+import { useRef, useLayoutEffect, useState, useCallback } from 'react';
+export const useResizeObserver = () => {
+  const [observerEntry, setObserverEntry] = useState({});
+  const [node, setNode] = useState(null);
+  const observer = useRef(null);
+  const disconnect = useCallback(() => {
+    var _observer$current;
+    return (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.disconnect();
+  }, []);
+  const callback = _ref => {
+    let [entry] = _ref;
+    window.requestAnimationFrame(() => {
+      setObserverEntry(entry);
+    });
+  };
+  const observe = useCallback(() => {
+    observer.current = new ResizeObserver(callback);
+    if (node) observer.current.observe(node);
+  }, [node]);
+  useLayoutEffect(() => {
+    observe();
+    return () => disconnect();
+  }, [disconnect, observe]);
+  return [setNode, observerEntry];
+};