@widergy/energy-ui 3.173.2 → 3.173.4

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

@@ -1,456 +1 @@
-import 'react-perfect-scrollbar/dist/css/styles.css';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import ScrollBar from 'react-perfect-scrollbar';
-import { isDesktop, isMobile, RESIZE_EVENT } from '@widergy/web-utils/lib/browser';
-import { isEmpty } from '@widergy/web-utils/lib/array';
-import { arrayOf, bool, elementType, func, node, number, object, objectOf, oneOf, oneOfType, shape, string } from 'prop-types';
-import UTLabel from '../UTLabel';
-import UTLoading from '../UTLoading';
-import WithTheme from '../WithTheme';
-import { ID_CONSTANTS } from '../../constants/testIds';
-import { INTEGRATION_TYPES } from '../../constants/UTTable';
-import { mergeClasses } from '../../utils/classesUtils';
-import Cell from './components/Cell';
-import HeaderCell from './components/HeaderCell';
-import ResponsiveCell from './components/ResponsiveCell';
-import styles from './styles.module.scss';
-import TableFooter from './components/TableFooter';
-import TableHeader from './components/TableHeader';
-import TableRow from './components/TableRow';
-import { classesType, columnsType } from './types';
-import { getColumnDefinition, orderRows, createRowStyles, getCurrentRows, getSelectableRowIds, getInitialValidPage, getInitialValidRowsPerPage, getColumnsSizes, getEnabledHeader } from './utils';
-import { retrieveStyle } from './theme';
-import { DEFAULT_MOBILE_BREAKPOINT, DEFAULT_TABLET_BREAKPOINT, NO_RESULTS_LABEL, ROWS_PER_PAGE, ROW_KEY, ROW_PADDING_NAMES, ROW_SPACING_NAMES, TOTAL_ROWS_LABEL, TOTAL_ROW_LABEL } from './constants';
-import { useResizeObserver } from './hook';
-const {
-  ACTIONS,
-  CELL,
-  HEADER,
-  SELECTION_COMPONENT,
-  TABLE,
-  TABLE_ROW
-} = ID_CONSTANTS;
-const UTTable = _ref => {
-  let {
-    actionDataTestId,
-    actionsConfig,
-    automaticRefreshDelay = 15 * 60 * 1000,
-    cellDataTestId,
-    classNames,
-    classes: themeClasses,
-    clickableRowValidation,
-    columns,
-    data = [],
-    defaultNullValue = '-',
-    description,
-    disableAutoOrder = false,
-    disablePagination = false,
-    disableReloadRows,
-    disableRowSelection,
-    disableSelectAll,
-    disabledRowTooltip,
-    disabledSelectAllTooltip,
-    exclusiveSelection = false,
-    externalPage,
-    externalRowsPerPage,
-    Filters,
-    fitColumnsWidth,
-    GeneralActions,
-    getRowClassName = () => '',
-    headerActionDataTestId,
-    headerCellDataTestId,
-    headerPadding = ROW_PADDING_NAMES.MEDIUM,
-    headerSelectionComponentDataTestId,
-    headerVersion,
-    hidePageSelector,
-    initialOrder,
-    initialSelectedRows = [],
-    integrationType = INTEGRATION_TYPES.INTERNAL,
-    loading,
-    mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT,
-    noResultDataTestId,
-    noResultsComponent,
-    paginatorDataTestId,
-    noResultsLabel = NO_RESULTS_LABEL,
-    onOrderChange,
-    onPageChange,
-    onRefresh,
-    onReloadRows,
-    onRowClick,
-    onRowsPerPageChange,
-    onSelectAllRows,
-    onSelectRow,
-    ongoingRefreshLabel,
-    refreshLabel,
-    removeDefaultOrderIcon = false,
-    removeFixedRowsDivisors = false,
-    rowKey = ROW_KEY,
-    rowPadding = ROW_PADDING_NAMES.SMALL,
-    rowSpacing = ROW_SPACING_NAMES.NONE,
-    rowsPerPageOptions = ROWS_PER_PAGE,
-    selectAllInCurrentPageOnly = false,
-    selectable = false,
-    selectedLabel,
-    selectionComponentDataTestId,
-    stickyHeader,
-    tableHeaderDataTestId,
-    tableTitle,
-    tabletBreakpoint = DEFAULT_TABLET_BREAKPOINT,
-    titleDataTestId,
-    totalRows,
-    totalRowsLabel,
-    withActionHeader,
-    withAutomaticRefresh,
-    withRefresh
-  } = _ref;
-  const initialValidRowsPerPageOption = getInitialValidRowsPerPage(externalRowsPerPage, rowsPerPageOptions, data, integrationType, totalRows);
-  const initialValidPage = getInitialValidPage(externalPage, initialValidRowsPerPageOption, data, integrationType);
-  const [order, setOrder] = useState(initialOrder || {});
-  const [rows, setRows] = useState([]);
-  const [selectedAll, setSelectedAll] = useState(false);
-  const [rowsPerPage, setRowsPerPage] = useState(initialValidRowsPerPageOption);
-  const [page, setPage] = useState(initialValidPage);
-  const [ref, entry] = useResizeObserver();
-  const [selectedRows, setSelectedRows] = useState(selectable ? initialSelectedRows : []);
-  const [isResponsive, setIsResponsive] = useState(!isDesktop(tabletBreakpoint));
-  const scrollRef = useRef();
-  const contentRef = useRef();
-  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
-  const handleResize = () => {
-    setIsResponsive(!isDesktop(tabletBreakpoint));
-  };
-  useEffect(() => {
-    window.addEventListener(RESIZE_EVENT, handleResize);
-    return () => window.removeEventListener(RESIZE_EVENT, handleResize);
-  }, []);
-  useEffect(() => {
-    if (!selectAllInCurrentPageOnly) setSelectedAll(!isEmpty(data) && initialSelectedRows.length === data.length);
-    setSelectedRows(selectable ? initialSelectedRows : []);
-    setRows(disableAutoOrder ? data : orderRows(data, order, data, columns));
-    if (externalRowsPerPage) setRowsPerPage(initialValidRowsPerPageOption);
-    const validPage = data.length / rowsPerPage > page;
-    if (!validPage || integrationType === INTEGRATION_TYPES.EXTERNAL) setPage(initialValidPage);
-  }, [data]);
-  const currentRows = useMemo(() => disablePagination || integrationType === INTEGRATION_TYPES.EXTERNAL ? rows : getCurrentRows(rows, page, rowsPerPage), [page, rowsPerPage, rows]);
-  const handleOrder = newOrder => {
-    setOrder(newOrder);
-    if (!disableAutoOrder && !isEmpty(rows)) setRows(orderRows(rows, newOrder, data, columns));
-    if (onOrderChange) onOrderChange(newOrder);
-  };
-  const handlePageChange = newPage => {
-    setPage(newPage);
-    if (onPageChange) onPageChange(newPage);
-  };
-  const allDisplayedRowsAreSelected = newSelectedRows => {
-    const displayedRows = getSelectableRowIds(rows, rowKey, disableRowSelection);
-    return displayedRows.every(value => newSelectedRows.includes(value));
-  };
-  const selectRow = row => {
-    if (!row[rowKey]) return null;
-    const pageRowsIds = getSelectableRowIds(currentRows, rowKey, disableRowSelection);
-    let newSelectedRows = [];
-    if (exclusiveSelection) {
-      newSelectedRows = [row[rowKey]];
-    } else {
-      const rowKeyIndex = selectedRows.indexOf(row[rowKey]);
-      if (rowKeyIndex === -1) newSelectedRows = [...selectedRows, row[rowKey]];else newSelectedRows = selectedRows.filter(el => el !== row[rowKey]);
-      const pageNewSelectedRows = newSelectedRows.filter(newSelectedRow => pageRowsIds.includes(newSelectedRow));
-      const allSelected = selectAllInCurrentPageOnly ? pageNewSelectedRows.length === pageRowsIds.length : allDisplayedRowsAreSelected(newSelectedRows);
-      if (!allSelected && selectedAll) setSelectedAll(false);
-      if (allSelected && !selectedAll) setSelectedAll(true);
-    }
-    setSelectedRows(newSelectedRows);
-    if (onSelectRow) onSelectRow(row[rowKey], newSelectedRows);
-  };
-  const selectAllRows = () => {
-    const newSelectedAll = !selectedAll;
-    const pageRowsIds = getSelectableRowIds(currentRows, rowKey, disableRowSelection);
-    const newSelectedRows = selectAllInCurrentPageOnly ? newSelectedAll ? [...pageRowsIds, ...selectedRows.filter(row => !pageRowsIds.includes(row))] : selectedRows.filter(row => !pageRowsIds.includes(row)) : newSelectedAll ? getSelectableRowIds(rows, rowKey, disableRowSelection) : [];
-    setSelectedRows(newSelectedRows);
-    setSelectedAll(newSelectedAll);
-    if (onSelectAllRows) onSelectAllRows(selectAllInCurrentPageOnly ? newSelectedRows : newSelectedAll);
-  };
-  useEffect(() => {
-    if (selectAllInCurrentPageOnly) {
-      const pageRowsIds = getSelectableRowIds(currentRows, rowKey, disableRowSelection);
-      setSelectedAll(!isEmpty(pageRowsIds) && pageRowsIds.every(row => selectedRows.includes(row)));
-    }
-  }, [page, rowsPerPage, rows, order, disableSelectAll]);
-  const columnsDefinition = useMemo(() => getColumnDefinition(columns, isResponsive), [columns, isResponsive]);
-  const isFirstRow = useCallback(index => !index, []);
-  const isLastRow = useCallback(index => index === currentRows.length - 1, [currentRows]);
-  const onChangeRowPerPage = newRowsPerPage => {
-    setRowsPerPage(newRowsPerPage || rowsPerPageOptions[0]);
-    setPage(0);
-    if (onRowsPerPageChange) onRowsPerPageChange(newRowsPerPage || rowsPerPageOptions[0]);
-  };
-  const showPagination = !disablePagination && !loading && !isEmpty(currentRows);
-  const rowStyles = useMemo(() => createRowStyles(rowPadding, rowSpacing, headerPadding, isResponsive), [rowPadding, rowSpacing, headerPadding, isResponsive]);
-  const tableWidth = useMemo(() => {
-    var _entry$target;
-    return (entry === null || entry === void 0 || (_entry$target = entry.target) === null || _entry$target === void 0 ? void 0 : _entry$target.clientWidth) || '100%';
-  }, [entry]);
-  const handleScrollbarSync = ps => {
-    setTimeout(() => {
-      ps.update();
-      if (scrollRef.current) scrollRef.current.scrollLeft = 0;
-    }, 100);
-  };
-  const CellComponent = isResponsive ? ResponsiveCell : Cell;
-  const totalRowLabel = isResponsive ? '' : totalRowsLabel || (data.length === 1 ? TOTAL_ROW_LABEL : TOTAL_ROWS_LABEL);
-  const handleSinchronizeContent = event => {
-    var _event$target;
-    if (contentRef.current && stickyHeader) contentRef.current.scrollTo(event === null || event === void 0 || (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.scrollLeft, 0);
-  };
-  const columnSizes = useMemo(() => getColumnsSizes({
-    columns,
-    fitColumnsWidth,
-    selectable
-  }), [columns, fitColumnsWidth, selectable]);
-  const enabledHeader = useMemo(() => getEnabledHeader(columns), [columns]);
-  const Content = /*#__PURE__*/React.createElement("div", {
-    className: "".concat(isEmpty(currentRows) && styles.preventScrolling),
-    ref: contentRef,
-    style: {
-      overflow: !isResponsive && stickyHeader && 'hidden',
-      width: tableWidth
-    }
-  }, /*#__PURE__*/React.createElement(UTLoading, {
-    className: "".concat(styles.tableLoading, " ").concat(classes.tableLoading),
-    loading: loading
-  }, isEmpty(currentRows) ? /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles.noResultsContainer, " ").concat(classes.noResultsContainer),
-    style: {
-      width: tableWidth
-    }
-  }, noResultsComponent || /*#__PURE__*/React.createElement(UTLabel, {
-    className: classes.noResultsLabel,
-    dataTestId: noResultDataTestId
-  }, noResultsLabel)) : currentRows.map((row, index) => {
-    const isSelected = selectedRows.includes(row[rowKey]);
-    const selectedClassNames = isSelected ? classes.selectedRow : rowSpacing === ROW_SPACING_NAMES.NONE && index < currentRows.length - 1 ? styles.unselectedSmallRow : undefined;
-    const isRowClickable = onRowClick && (!clickableRowValidation || clickableRowValidation(row));
-    const handleRowClick = isRowClickable ? event => onRowClick(event, row) : undefined;
-    return /*#__PURE__*/React.createElement(TableRow, {
-      actionDataTestId: actionDataTestId !== null && actionDataTestId !== void 0 ? actionDataTestId : "".concat(TABLE, ".").concat(TABLE_ROW, ".row_").concat(index, ".").concat(CELL, ".").concat(ACTIONS),
-      cellDataTestId: cellDataTestId !== null && cellDataTestId !== void 0 ? cellDataTestId : "".concat(TABLE, ".").concat(TABLE_ROW, ".row_").concat(index),
-      CellComponent: CellComponent,
-      cellProps: {
-        defaultNullValue,
-        classes,
-        rowData: {
-          ...row,
-          index
-        },
-        style: rowStyles.cell
-      },
-      checkBoxOnChange: () => selectRow(row),
-      checkBoxSelected: isSelected,
-      className: "\n                  ".concat(isResponsive && styles.responsiveRow, "\n                  ").concat(isRowClickable && classes.rowContainerClickable, "\n                  ").concat(getRowClassName(row), "\n                  "),
-      columnsDefinition: columnsDefinition,
-      columnSizes: columnSizes,
-      containerStyle: {
-        ...rowStyles.rowContainer,
-        minWidth: tableWidth
-      },
-      disableRowSelection: disableRowSelection,
-      disabledRowSelectionTooltip: disabledRowTooltip,
-      exclusiveSelection: exclusiveSelection,
-      fixedRowsLeftClassName: "".concat(classes.fixedRowLeft, " ").concat(selectedClassNames, " ").concat(isFirstRow(index) && classes.firstFixedRowLeft, " ").concat(isLastRow(index) && classes.lastFixedRowLeft),
-      fixedRowsRightClassName: "".concat(classes.fixedRowRight, " ").concat(selectedClassNames, " ").concat(isFirstRow(index) && classes.firstFixedRowRight, " ").concat(isLastRow(index) && classes.lastFixedRowRight),
-      handleRowClick: handleRowClick,
-      isResponsive: isResponsive,
-      key: row[rowKey] && "row_".concat(row[rowKey]),
-      pageRows: currentRows,
-      removeFixedRowsDivisors: removeFixedRowsDivisors,
-      rowClassName: "".concat(classes.row, " ").concat(selectedClassNames, " ").concat(isLastRow(index) && classes.lastRow, " ").concat(isFirstRow(index) && classes.firstRow),
-      rowKey: rowKey,
-      rowStyles: rowStyles,
-      selectable: selectable,
-      selectionComponentDataTestId: selectionComponentDataTestId !== null && selectionComponentDataTestId !== void 0 ? selectionComponentDataTestId : "".concat(TABLE, ".").concat(TABLE_ROW, ".row_").concat(index, ".").concat(CELL, ".").concat(SELECTION_COMPONENT),
-      selectedRows: selectedRows,
-      tableSize: tableWidth
-    });
-  })));
-  const Header = /*#__PURE__*/React.createElement(TableRow, {
-    actionDataTestId: headerActionDataTestId !== null && headerActionDataTestId !== void 0 ? headerActionDataTestId : "".concat(TABLE, ".").concat(TABLE_ROW, ".").concat(HEADER, "Cell.").concat(ACTIONS),
-    CellComponent: HeaderCell,
-    cellDataTestId: headerCellDataTestId !== null && headerCellDataTestId !== void 0 ? headerCellDataTestId : "".concat(TABLE, ".").concat(TABLE_ROW, ".").concat(HEADER, "Cell"),
-    cellProps: {
-      classes,
-      handleOrder,
-      order,
-      removeDefaultOrderIcon,
-      style: rowStyles.headerCell
-    },
-    checkBoxClassName: "".concat(exclusiveSelection && styles.hideCheckBox),
-    checkBoxOnChange: selectAllRows,
-    checkBoxSelected: selectedAll,
-    className: "".concat(isEmpty(currentRows) && styles.disableHeader),
-    columnSizes: columnSizes,
-    columnsDefinition: columnsDefinition,
-    containerStyle: {
-      ...rowStyles.headerRowContainer,
-      minWidth: tableWidth
-    },
-    disableRowSelection: disableSelectAll,
-    disabledRowSelectionTooltip: disabledSelectAllTooltip,
-    fixedRowsLeftClassName: classes.fixedHeaderRowLeft,
-    fixedRowsRightClassName: classes.fixedHeaderRowRight,
-    pageRows: currentRows,
-    removeFixedRowsDivisors: removeFixedRowsDivisors,
-    rowClassName: classes.header,
-    rowKey: rowKey,
-    rowStyles: rowStyles,
-    selectable: selectable,
-    selectionComponentDataTestId: headerSelectionComponentDataTestId !== null && headerSelectionComponentDataTestId !== void 0 ? headerSelectionComponentDataTestId : "".concat(TABLE, ".").concat(TABLE_ROW, ".").concat(HEADER, "Cell.").concat(SELECTION_COMPONENT),
-    selectedRows: selectedRows,
-    tableSize: tableWidth
-  });
-  const shouldRenderTableHeader = headerVersion === 'V0' || !headerVersion ? tableTitle || GeneralActions : withActionHeader;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles.table, " ").concat(classes.table),
-    ref: ref
-  }, shouldRenderTableHeader && /*#__PURE__*/React.createElement(TableHeader, {
-    actions: actionsConfig,
-    automaticRefreshDelay: automaticRefreshDelay,
-    classes: classes,
-    description: description,
-    disabled: disableReloadRows,
-    isDesktop: isDesktop(tabletBreakpoint),
-    isMobile: isMobile(mobileBreakpoint),
-    GeneralActions: GeneralActions,
-    loading: loading,
-    onRefresh: onRefresh,
-    onReload: onReloadRows,
-    ongoingRefreshLabel: ongoingRefreshLabel,
-    refreshLabel: refreshLabel,
-    selectedLabel: selectedLabel,
-    tableHeaderDataTestId: tableHeaderDataTestId,
-    title: tableTitle,
-    titleDataTestId: titleDataTestId,
-    version: headerVersion,
-    withAutomaticRefresh: withAutomaticRefresh,
-    withRefresh: withRefresh
-  }), Filters, !isResponsive && /*#__PURE__*/React.createElement("div", {
-    className: stickyHeader && "".concat(styles.stickyHeader, " ").concat(classes.stickyHeader || '')
-  }, /*#__PURE__*/React.createElement(ScrollBar, {
-    className: "\n                ".concat(styles.scrollbar, "\n                ").concat(classes.scrollbar, "\n                ").concat(loading && styles.disableHeader),
-    containerRef: el => scrollRef.current = el,
-    onScroll: handleSinchronizeContent,
-    onSync: handleScrollbarSync,
-    options: {
-      suppressScrollX: fitColumnsWidth,
-      suppressScrollY: true
-    },
-    style: {
-      width: tableWidth
-    }
-  }, enabledHeader && Header, !stickyHeader && Content)), (isResponsive || stickyHeader) && Content, showPagination && /*#__PURE__*/React.createElement(TableFooter, {
-    classes: classes,
-    handlePageChange: handlePageChange,
-    isResponsive: isResponsive,
-    onChangeRowPerPage: onChangeRowPerPage,
-    hidePageSelector: hidePageSelector,
-    page: page,
-    paginatorDataTestId: paginatorDataTestId,
-    rowsPerPage: rowsPerPage,
-    rowsPerPageOptions: rowsPerPageOptions,
-    totalRows: totalRows || rows.length,
-    totalRowsLabel: totalRowLabel
-  }));
-};
-UTTable.propTypes = {
-  actionsConfig: arrayOf(shape({
-    classes: objectOf(string),
-    classNames: objectOf(string),
-    colorTheme: string,
-    count: number,
-    dataTestId: string,
-    disabled: bool,
-    hideTextOnResponsive: bool,
-    Icon: oneOfType([elementType, string]),
-    iconPlacement: string,
-    isPrimary: bool,
-    LeftIcon: oneOfType([elementType, string]),
-    loading: bool,
-    onClick: func,
-    RightIcon: oneOfType([elementType, string]),
-    size: string,
-    type: string,
-    variant: string
-  })),
-  actionDataTestId: string,
-  automaticRefreshDelay: number,
-  cellDataTestId: string,
-  classNames: classesType,
-  classes: classesType,
-  clickableRowValidation: func,
-  columns: columnsType,
-  data: arrayOf(object),
-  defaultNullValue: string,
-  description: string,
-  disableAutoOrder: bool,
-  disablePagination: bool,
-  disableReloadRows: bool,
-  disableRowSelection: oneOfType([func, bool]),
-  disableSelectAll: oneOfType([func, bool]),
-  disabledRowTooltip: func,
-  disabledSelectAllTooltip: func,
-  exclusiveSelection: bool,
-  externalPage: number,
-  externalRowsPerPage: number,
-  Filters: node,
-  fitColumnsWidth: bool,
-  GeneralActions: node,
-  getRowClassName: func,
-  headerActionDataTestId: string,
-  headerCellDataTestId: string,
-  headerPadding: string,
-  headerSelectionComponentDataTestId: string,
-  headerVersion: string,
-  hidePageSelector: bool,
-  initialOrder: shape({
-    direction: string,
-    key: string
-  }),
-  initialSelectedRows: arrayOf(oneOfType([number, string])),
-  integrationType: oneOf([...Object.values(INTEGRATION_TYPES)]),
-  loading: bool,
-  mobileBreakpoint: number,
-  noResultDataTestId: string,
-  noResultsComponent: node,
-  paginatorDataTestId: string,
-  noResultsLabel: string,
-  onOrderChange: func,
-  onPageChange: func,
-  onRefresh: func,
-  onReloadRows: func,
-  onRowClick: func,
-  onRowsPerPageChange: func,
-  onSelectAllRows: func,
-  onSelectRow: func,
-  ongoingRefreshLabel: string,
-  refreshLabel: string,
-  removeDefaultOrderIcon: bool,
-  removeFixedRowsDivisors: bool,
-  rowKey: string,
-  rowPadding: string,
-  rowSpacing: string,
-  rowsPerPageOptions: arrayOf(number),
-  selectAllInCurrentPageOnly: bool,
-  selectable: bool,
-  selectedLabel: string,
-  selectionComponentDataTestId: string,
-  stickyHeader: bool,
-  tableHeaderDataTestId: string,
-  tableTitle: string,
-  tabletBreakpoint: number,
-  titleDataTestId: string,
-  totalRows: number,
-  totalRowsLabel: string,
-  withActionHeader: bool,
-  withAutomaticRefresh: bool,
-  withRefresh: bool
-};
-export default WithTheme(retrieveStyle)(UTTable);
+import"react-perfect-scrollbar/dist/css/styles.css";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import ScrollBar from"react-perfect-scrollbar";import{isDesktop,isMobile,RESIZE_EVENT}from"@widergy/web-utils/lib/browser";import{isEmpty}from"@widergy/web-utils/lib/array";import{arrayOf,bool,elementType,func,node,number,object,objectOf,oneOf,oneOfType,shape,string}from"prop-types";import UTLabel from"../UTLabel";import UTLoading from"../UTLoading";import WithTheme from"../WithTheme";import{ID_CONSTANTS}from"../../constants/testIds";import{INTEGRATION_TYPES}from"../../constants/UTTable";import{mergeClasses}from"../../utils/classesUtils";import Cell from"./components/Cell";import HeaderCell from"./components/HeaderCell";import ResponsiveCell from"./components/ResponsiveCell";import styles from"./styles.module.scss";import TableFooter from"./components/TableFooter";import TableHeader from"./components/TableHeader";import TableRow from"./components/TableRow";import{classesType,columnsType}from"./types";import{getColumnDefinition,orderRows,createRowStyles,getCurrentRows,getSelectableRowIds,getInitialValidPage,getInitialValidRowsPerPage,getColumnsSizes,getEnabledHeader}from"./utils";import{retrieveStyle}from"./theme";import{DEFAULT_MOBILE_BREAKPOINT,DEFAULT_TABLET_BREAKPOINT,NO_RESULTS_LABEL,ROWS_PER_PAGE,ROW_KEY,ROW_PADDING_NAMES,ROW_SPACING_NAMES,TOTAL_ROWS_LABEL,TOTAL_ROW_LABEL}from"./constants";import{useResizeObserver}from"./hook";const{ACTIONS:ACTIONS,CELL:CELL,HEADER:HEADER,SELECTION_COMPONENT:SELECTION_COMPONENT,TABLE:TABLE,TABLE_ROW:TABLE_ROW}=ID_CONSTANTS,UTTable=e=>{let{actionDataTestId:t,actionsConfig:o,automaticRefreshDelay:a=9e5,cellDataTestId:s,classNames:l,classes:n,clickableRowValidation:i,columns:r,data:c=[],defaultNullValue:d="-",description:R,disableAutoOrder:m=!1,disablePagination:T=!1,disableReloadRows:g,disableRowSelection:u,disableSelectAll:b,disabledRowTooltip:f,disabledSelectAllTooltip:E,exclusiveSelection:p=!1,externalPage:w,externalRowsPerPage:S,Filters:h,fitColumnsWidth:O,GeneralActions:C,getRowClassName:L=()=>"",headerActionDataTestId:A,headerCellDataTestId:I,headerPadding:y=ROW_PADDING_NAMES.MEDIUM,headerSelectionComponentDataTestId:N,headerVersion:D,hidePageSelector:P,initialOrder:_,initialSelectedRows:v=[],integrationType:B=INTEGRATION_TYPES.INTERNAL,loading:x,mobileBreakpoint:k=DEFAULT_MOBILE_BREAKPOINT,noResultDataTestId:W,noResultsComponent:H,paginatorDataTestId:M,noResultsLabel:U=NO_RESULTS_LABEL,onOrderChange:F,onPageChange:G,onRefresh:V,onReloadRows:K,onRowClick:z,onRowsPerPageChange:Y,onSelectAllRows:j,onSelectRow:X,ongoingRefreshLabel:Z,refreshLabel:q,removeDefaultOrderIcon:J=!1,removeFixedRowsDivisors:Q=!1,rowKey:$=ROW_KEY,rowPadding:ee=ROW_PADDING_NAMES.SMALL,rowSpacing:te=ROW_SPACING_NAMES.NONE,rowsPerPageOptions:oe=ROWS_PER_PAGE,selectAllInCurrentPageOnly:ae=!1,selectable:se=!1,selectedLabel:le,selectionComponentDataTestId:ne,stickyHeader:ie,tableHeaderDataTestId:re,tableTitle:ce,tabletBreakpoint:de=DEFAULT_TABLET_BREAKPOINT,titleDataTestId:Re,totalRows:me,totalRowsLabel:Te,withActionHeader:ge,withAutomaticRefresh:ue,withRefresh:be}=e;const fe=getInitialValidRowsPerPage(S,oe,c,B,me),Ee=getInitialValidPage(w,fe,c,B),[pe,we]=useState(_||{}),[Se,he]=useState([]),[Oe,Ce]=useState(!1),[Le,Ae]=useState(fe),[Ie,ye]=useState(Ee),[Ne,De]=useResizeObserver(),[Pe,_e]=useState(se?v:[]),[ve,Be]=useState(!isDesktop(de)),xe=useRef(),ke=useRef(),We=useMemo(()=>mergeClasses(n,l),[l]),He=()=>{Be(!isDesktop(de))};useEffect(()=>(window.addEventListener(RESIZE_EVENT,He),()=>window.removeEventListener(RESIZE_EVENT,He)),[]),useEffect(()=>{ae||Ce(!isEmpty(c)&&v.length===c.length),_e(se?v:[]),he(m?c:orderRows(c,pe,c,r)),S&&Ae(fe);c.length/Le>Ie&&B!==INTEGRATION_TYPES.EXTERNAL||ye(Ee)},[c]);const Me=useMemo(()=>T||B===INTEGRATION_TYPES.EXTERNAL?Se:getCurrentRows(Se,Ie,Le),[Ie,Le,Se]),Ue=e=>{if(!e[$])return null;const t=getSelectableRowIds(Me,$,u);let o=[];if(p)o=[e[$]];else{o=-1===Pe.indexOf(e[$])?[...Pe,e[$]]:Pe.filter(t=>t!==e[$]);const a=o.filter(e=>t.includes(e)),s=ae?a.length===t.length:(e=>getSelectableRowIds(Se,$,u).every(t=>e.includes(t)))(o);!s&&Oe&&Ce(!1),s&&!Oe&&Ce(!0)}_e(o),X&&X(e[$],o)};useEffect(()=>{if(ae){const e=getSelectableRowIds(Me,$,u);Ce(!isEmpty(e)&&e.every(e=>Pe.includes(e)))}},[Ie,Le,Se,pe,b]);const Fe=useMemo(()=>getColumnDefinition(r,ve),[r,ve]),Ge=useCallback(e=>!e,[]),Ve=useCallback(e=>e===Me.length-1,[Me]),Ke=!T&&!x&&!isEmpty(Me),ze=useMemo(()=>createRowStyles(ee,te,y,ve),[ee,te,y,ve]),Ye=useMemo(()=>{var e;return(null==De||null===(e=De.target)||void 0===e?void 0:e.clientWidth)||"100%"},[De]),je=ve?ResponsiveCell:Cell,Xe=ve?"":Te||(1===c.length?TOTAL_ROW_LABEL:TOTAL_ROWS_LABEL),Ze=useMemo(()=>getColumnsSizes({columns:r,fitColumnsWidth:O,selectable:se}),[r,O,se]),qe=useMemo(()=>getEnabledHeader(r),[r]),Je=React.createElement("div",{className:"".concat(isEmpty(Me)&&styles.preventScrolling),ref:ke,style:{overflow:!ve&&ie&&"hidden",width:Ye}},React.createElement(UTLoading,{className:"".concat(styles.tableLoading," ").concat(We.tableLoading),loading:x},isEmpty(Me)?React.createElement("div",{className:"".concat(styles.noResultsContainer," ").concat(We.noResultsContainer),style:{width:Ye}},H||React.createElement(UTLabel,{className:We.noResultsLabel,dataTestId:W},U)):Me.map((e,o)=>{const a=Pe.includes(e[$]),l=a?We.selectedRow:te===ROW_SPACING_NAMES.NONE&&o<Me.length-1?styles.unselectedSmallRow:void 0,n=z&&(!i||i(e)),r=n?t=>z(t,e):void 0;return React.createElement(TableRow,{actionDataTestId:null!=t?t:"".concat(TABLE,".").concat(TABLE_ROW,".row_").concat(o,".").concat(CELL,".").concat(ACTIONS),cellDataTestId:null!=s?s:"".concat(TABLE,".").concat(TABLE_ROW,".row_").concat(o),CellComponent:je,cellProps:{defaultNullValue:d,classes:We,rowData:{...e,index:o},style:ze.cell},checkBoxOnChange:()=>Ue(e),checkBoxSelected:a,className:"\n                  ".concat(ve&&styles.responsiveRow,"\n                  ").concat(n&&We.rowContainerClickable,"\n                  ").concat(L(e),"\n                  "),columnsDefinition:Fe,columnSizes:Ze,containerStyle:{...ze.rowContainer,minWidth:Ye},disableRowSelection:u,disabledRowSelectionTooltip:f,exclusiveSelection:p,fixedRowsLeftClassName:"".concat(We.fixedRowLeft," ").concat(l," ").concat(Ge(o)&&We.firstFixedRowLeft," ").concat(Ve(o)&&We.lastFixedRowLeft),fixedRowsRightClassName:"".concat(We.fixedRowRight," ").concat(l," ").concat(Ge(o)&&We.firstFixedRowRight," ").concat(Ve(o)&&We.lastFixedRowRight),handleRowClick:r,isResponsive:ve,key:e[$]&&"row_".concat(e[$]),pageRows:Me,removeFixedRowsDivisors:Q,rowClassName:"".concat(We.row," ").concat(l," ").concat(Ve(o)&&We.lastRow," ").concat(Ge(o)&&We.firstRow),rowKey:$,rowStyles:ze,selectable:se,selectionComponentDataTestId:null!=ne?ne:"".concat(TABLE,".").concat(TABLE_ROW,".row_").concat(o,".").concat(CELL,".").concat(SELECTION_COMPONENT),selectedRows:Pe,tableSize:Ye})}))),Qe=React.createElement(TableRow,{actionDataTestId:null!=A?A:"".concat(TABLE,".").concat(TABLE_ROW,".").concat(HEADER,"Cell.").concat(ACTIONS),CellComponent:HeaderCell,cellDataTestId:null!=I?I:"".concat(TABLE,".").concat(TABLE_ROW,".").concat(HEADER,"Cell"),cellProps:{classes:We,handleOrder:e=>{we(e),m||isEmpty(Se)||he(orderRows(Se,e,c,r)),F&&F(e)},order:pe,removeDefaultOrderIcon:J,style:ze.headerCell},checkBoxClassName:"".concat(p&&styles.hideCheckBox),checkBoxOnChange:()=>{const e=!Oe,t=getSelectableRowIds(Me,$,u),o=ae?e?[...t,...Pe.filter(e=>!t.includes(e))]:Pe.filter(e=>!t.includes(e)):e?getSelectableRowIds(Se,$,u):[];_e(o),Ce(e),j&&j(ae?o:e)},checkBoxSelected:Oe,className:"".concat(isEmpty(Me)&&styles.disableHeader),columnSizes:Ze,columnsDefinition:Fe,containerStyle:{...ze.headerRowContainer,minWidth:Ye},disableRowSelection:b,disabledRowSelectionTooltip:E,fixedRowsLeftClassName:We.fixedHeaderRowLeft,fixedRowsRightClassName:We.fixedHeaderRowRight,pageRows:Me,removeFixedRowsDivisors:Q,rowClassName:We.header,rowKey:$,rowStyles:ze,selectable:se,selectionComponentDataTestId:null!=N?N:"".concat(TABLE,".").concat(TABLE_ROW,".").concat(HEADER,"Cell.").concat(SELECTION_COMPONENT),selectedRows:Pe,tableSize:Ye}),$e="V0"!==D&&D?ge:ce||C;return React.createElement("div",{className:"".concat(styles.table," ").concat(We.table),ref:Ne},$e&&React.createElement(TableHeader,{actions:o,automaticRefreshDelay:a,classes:We,description:R,disabled:g,isDesktop:isDesktop(de),isMobile:isMobile(k),GeneralActions:C,loading:x,onRefresh:V,onReload:K,ongoingRefreshLabel:Z,refreshLabel:q,selectedLabel:le,tableHeaderDataTestId:re,title:ce,titleDataTestId:Re,version:D,withAutomaticRefresh:ue,withRefresh:be}),h,!ve&&React.createElement("div",{className:ie&&"".concat(styles.stickyHeader," ").concat(We.stickyHeader||"")},React.createElement(ScrollBar,{className:"\n                ".concat(styles.scrollbar,"\n                ").concat(We.scrollbar,"\n                ").concat(x&&styles.disableHeader),containerRef:e=>xe.current=e,onScroll:e=>{var t;ke.current&&ie&&ke.current.scrollTo(null==e||null===(t=e.target)||void 0===t?void 0:t.scrollLeft,0)},onSync:e=>{setTimeout(()=>{e.update(),xe.current&&(xe.current.scrollLeft=0)},100)},options:{suppressScrollX:O,suppressScrollY:!0},style:{width:Ye}},qe&&Qe,!ie&&Je)),(ve||ie)&&Je,Ke&&React.createElement(TableFooter,{classes:We,handlePageChange:e=>{ye(e),G&&G(e)},isResponsive:ve,onChangeRowPerPage:e=>{Ae(e||oe[0]),ye(0),Y&&Y(e||oe[0])},hidePageSelector:P,page:Ie,paginatorDataTestId:M,rowsPerPage:Le,rowsPerPageOptions:oe,totalRows:me||Se.length,totalRowsLabel:Xe}))};UTTable.propTypes={actionsConfig:arrayOf(shape({classes:objectOf(string),classNames:objectOf(string),colorTheme:string,count:number,dataTestId:string,disabled:bool,hideTextOnResponsive:bool,Icon:oneOfType([elementType,string]),iconPlacement:string,isPrimary:bool,LeftIcon:oneOfType([elementType,string]),loading:bool,onClick:func,RightIcon:oneOfType([elementType,string]),size:string,type:string,variant:string})),actionDataTestId:string,automaticRefreshDelay:number,cellDataTestId:string,classNames:classesType,classes:classesType,clickableRowValidation:func,columns:columnsType,data:arrayOf(object),defaultNullValue:string,description:string,disableAutoOrder:bool,disablePagination:bool,disableReloadRows:bool,disableRowSelection:oneOfType([func,bool]),disableSelectAll:oneOfType([func,bool]),disabledRowTooltip:func,disabledSelectAllTooltip:func,exclusiveSelection:bool,externalPage:number,externalRowsPerPage:number,Filters:node,fitColumnsWidth:bool,GeneralActions:node,getRowClassName:func,headerActionDataTestId:string,headerCellDataTestId:string,headerPadding:string,headerSelectionComponentDataTestId:string,headerVersion:string,hidePageSelector:bool,initialOrder:shape({direction:string,key:string}),initialSelectedRows:arrayOf(oneOfType([number,string])),integrationType:oneOf([...Object.values(INTEGRATION_TYPES)]),loading:bool,mobileBreakpoint:number,noResultDataTestId:string,noResultsComponent:node,paginatorDataTestId:string,noResultsLabel:string,onOrderChange:func,onPageChange:func,onRefresh:func,onReloadRows:func,onRowClick:func,onRowsPerPageChange:func,onSelectAllRows:func,onSelectRow:func,ongoingRefreshLabel:string,refreshLabel:string,removeDefaultOrderIcon:bool,removeFixedRowsDivisors:bool,rowKey:string,rowPadding:string,rowSpacing:string,rowsPerPageOptions:arrayOf(number),selectAllInCurrentPageOnly:bool,selectable:bool,selectedLabel:string,selectionComponentDataTestId:string,stickyHeader:bool,tableHeaderDataTestId:string,tableTitle:string,tabletBreakpoint:number,titleDataTestId:string,totalRows:number,totalRowsLabel:string,withActionHeader:bool,withAutomaticRefresh:bool,withRefresh:bool};export default WithTheme(retrieveStyle)(UTTable);