@geneui/components 2.11.1

package/CardList.js

@@ -0,0 +1,705 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as classnames } from './index-6ff23041.js';
+import { M as ModuleTitle, W as Widget, m as Dropdown, o as InfiniteLoader, p as WindowScroller, r as List, s as CellMeasurer } from './index-0cf65939.js';
+import Paper from './Paper.js';
+import { C as CellMeasurerCache } from './CellMeasurerCache-c11cec83.js';
+import { p as oneIsRequired, n as noop } from './index-ac59cb10.js';
+import BusyLoader from './BusyLoader.js';
+import Empty from './Empty.js';
+import Icon from './Icon.js';
+import Card from './Card.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './Editor.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './useMount-6fef51a5.js';
+import './useDeviceType-dd51db38.js';
+import './configs-91c86664.js';
+import './useWindowSize-80369d76.js';
+import './Button.js';
+import './globalStyling-9c60a159.js';
+import './dateValidation-67caec66.js';
+import './ValidatableUploader.js';
+import './index-d9e8a888.js';
+import './Grid.js';
+import './useWidth-9f4647f8.js';
+import './useKeyDown-38102ae7.js';
+import './Image.js';
+import './Tooltip.js';
+import './Popover-f4d1cac0.js';
+import './GeneUIProvider.js';
+import './Checkbox.js';
+import './checkboxRadioSwitcher-5b69d7bd.js';
+import './guid-8ddf77b3.js';
+import './ExtendedInput.js';
+import './index-5cea9a7d.js';
+import './useClickOutside-5183e396.js';
+import './Scrollbar.js';
+import './ValidatableRadio.js';
+import './RadioGroup.js';
+import './Radio.js';
+import './ValidatableCheckbox.js';
+import './ValidatableSwitcher.js';
+import './Switcher.js';
+import './ValidatableNumberInput.js';
+import './ValidatableTextInput.js';
+import './ValidatableDatePicker.js';
+import './index-5e722d91.js';
+import './index-702bf24a.js';
+import './index-122432cd.js';
+import './debounce-4419bc2f.js';
+import './DatePicker.js';
+import './localization-4ba17032.js';
+import './checkTimeValidation-e56771be.js';
+import './useEllipsisDetection-ef536015.js';
+import './Tabs.js';
+import './Steps.js';
+import './index-a4635754.js';
+import './Portal.js';
+import './Timeline.js';
+import './Tag.js';
+import './Alert.js';
+import './index-00fe8887.js';
+import './rangeAndSlider-20599da4.js';
+import './Slider.js';
+import './Pagination.js';
+import './Divider.js';
+import './objectWithoutPropertiesLoose-299691d8.js';
+import './clsx.m-2bb6df4b.js';
+import './index-a59530cd.js';
+import './Notification.js';
+import './Modal.js';
+import './Collapse.js';
+import './Status.js';
+import './Menu.js';
+import './Option.js';
+import './Avatar.js';
+import './Search.js';
+import './TextLink.js';
+import './Label.js';
+import './Badge.js';
+import './configs.js';
+import './SkeletonLoader.js';
+import './Time.js';
+import './Title.js';
+import './KeyValue.js';
+import './index-b7a33c58.js';
+import './QRCode.js';
+import './Progress.js';
+import './MobileNavigation.js';
+import './MobilePopup.js';
+import './Products.js';
+import './Breadcrumb.js';
+import './Section.js';
+import './ColorPicker.js';
+import './NavigationMenu.js';
+import './Textarea.js';
+import './AdvancedSearch.js';
+import './LinkButton.js';
+
+function WithTitle(_ref) {
+  let {
+    name,
+    actions,
+    children,
+    ...restProps
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ModuleTitle, _extends({
+    title: name,
+    cornerRadius: "position-radius"
+  }, restProps), actions), children);
+}
+WithTitle.propTypes = {
+  name: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.node]).isRequired,
+  actions: propTypesExports.node,
+  children: propTypesExports.node
+};
+
+function PaperWrapper(_ref) {
+  let {
+    paperDirection,
+    cornerRadius,
+    className,
+    children,
+    shadow,
+    ...restProps
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(Paper, _extends({
+    shadow: shadow,
+    paperDirection: paperDirection,
+    cornerRadius: cornerRadius,
+    className: className
+  }, restProps), children);
+}
+PaperWrapper.propTypes = {
+  className: propTypesExports.string,
+  children: propTypesExports.node.isRequired,
+  cornerRadius: propTypesExports.string,
+  shadow: propTypesExports.bool,
+  ...Paper.propTypes
+};
+PaperWrapper.defaultProps = {
+  shadow: false,
+  cornerRadius: 'full-radius',
+  paperDirection: 'column'
+};
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .mobile-table-holder{position:relative;width:100%}[data-gene-ui-version=\"2.11.0\"] .paper>.mobile-table-holder{padding:1.6rem}[data-gene-ui-version=\"2.11.0\"] .m-popup-content>.paper>.mobile-table-holder{padding:1.6rem 0}[data-gene-ui-version=\"2.11.0\"] .mobile-table-head{margin:0 0 1rem;width:100%}[data-gene-ui-version=\"2.11.0\"] .mobile-table-head>ul{align-items:center;display:flex;width:100%}[data-gene-ui-version=\"2.11.0\"] .mobile-table-head>ul>li{align-items:center;display:flex;flex-shrink:0}[data-gene-ui-version=\"2.11.0\"] .mobile-table-head>ul>li+li{margin:0 0 0 3rem}[data-gene-ui-version=\"2.11.0\"] .mobile-table-head>ul>li:nth-child(2){flex:auto;max-width:20rem}[data-gene-ui-version=\"2.11.0\"] .mt-results-holder{font:600 1.4rem/1.8rem var(--font-family);opacity:.7;padding:0 1rem}[data-gene-ui-version=\"2.11.0\"] .mt-results-holder:not(:first-child){margin:1.6rem 0 0}[data-gene-ui-version=\"2.11.0\"] .mobile-table-cc{margin-inline-end:3rem;width:19.6rem}[data-gene-ui-version=\"2.11.0\"] .mobile-sort-button{align-items:center;cursor:pointer;display:flex;font:600 1.4rem/2.4rem var(--font-family)}[data-gene-ui-version=\"2.11.0\"] .mobile-sort-button p{transition:color .4s}[data-gene-ui-version=\"2.11.0\"] .mobile-sort-button .active{color:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .mobile-sort-icons{height:2.4rem;margin-inline-start:1.2rem;position:relative;width:2.4rem}[data-gene-ui-version=\"2.11.0\"] .mobile-sort-icons .icon{left:0;position:absolute;top:0;transition:color .4s}[data-gene-ui-version=\"2.11.0\"] .mobile-sort-icons .icon:not(.active){color:rgba(var(--background-sc-rgb),.5)}[data-gene-ui-version=\"2.11.0\"] .mobile-table-body{width:100%}[data-gene-ui-version=\"2.11.0\"] .mobile-table-body .ReactVirtualized__Grid,[data-gene-ui-version=\"2.11.0\"] .mobile-table-body .ReactVirtualized__Grid__innerScrollContainer{overflow:visible!important}[data-gene-ui-version=\"2.11.0\"] .mobile-table-loading{align-items:center;display:flex;justify-content:center;padding:2.4rem 0;width:100%}[data-gene-ui-version=\"2.11.0\"] .mobile-table-loading.absolute-splash{background:rgba(var(--background-rgb),.6);height:100%;left:0;position:absolute;top:0}[data-gene-ui-version=\"2.11.0\"] .cards-empty-holder{align-items:center;display:flex;height:calc(100vh - 35.7rem);justify-content:center;width:100%}[data-gene-ui-version=\"2.11.0\"] .quick-view-holder{padding:1.6rem 0;width:100%}[data-gene-ui-version=\"2.11.0\"] .quick-view-holder>.card-list-col{grid-column-gap:3.8rem;align-items:center;display:grid;font:600 1.4rem/2.2rem var(--font-family);grid-template-columns:1fr 1fr}[data-gene-ui-version=\"2.11.0\"] .quick-view-holder>.card-list-col+.card-list-col{margin:2rem 0 0}[data-gene-ui-version=\"2.11.0\"] .quick-view-holder>.card-list-col .kv-label{opacity:.7}[data-gene-ui-version=\"2.11.0\"] .quick-view-holder>.card-list-col .kv-value{white-space:normal;word-break:break-word}[data-gene-ui-version=\"2.11.0\"] .quick-view-holder a:not([class]){color:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .mc-widgets-holder{-webkit-overflow-scrolling:auto;margin:0 -1.6rem;overflow-x:auto;overflow-y:hidden;padding:0 1.6rem 1.6rem;width:calc(100% + 3.2rem)}[data-gene-ui-version=\"2.11.0\"] .mc-widgets-holder>ul{align-items:center;display:flex;min-width:100%}[data-gene-ui-version=\"2.11.0\"] .mc-widgets-holder>ul>li{margin-inline-end:1rem}[data-gene-ui-version=\"2.11.0\"] .mc-widgets-holder+.mobile-table-head{border-top:1px solid rgba(var(--background-sc-rgb),.1);padding:1.6rem 0 0}";
+styleInject(css_248z);
+
+const defaultSortFn = (prev, next, dataKey, type) => {
+  const first = prev.data[dataKey];
+  const second = next.data[dataKey];
+  if (first === null) return 1;
+  if (second === null) return -1;
+  const firstLowerCased = typeof first === 'string' ? first.toLowerCase() : first;
+  const secondLowerCased = typeof second === 'string' ? second.toLowerCase() : second;
+  if (type === 'asc') {
+    return firstLowerCased > secondLowerCased ? 1 : -1;
+  }
+  if (type === 'desc') {
+    return firstLowerCased > secondLowerCased ? -1 : 1;
+  }
+  return 0;
+};
+function CardList(props) {
+  const {
+    rowClassName,
+    onPaginationChange,
+    shadow,
+    border,
+    sortableColumns,
+    rowKey,
+    sortedColumn,
+    sortType,
+    defaultSortedColumn,
+    defaultSortType,
+    onSortChange,
+    columnLimit,
+    resultText,
+    className,
+    loading,
+    rows,
+    rowsCount,
+    columns,
+    columnKey,
+    rowActionBar,
+    getPopupProps,
+    customSubHeader,
+    rowsPerPage,
+    sortingPlaceholder,
+    viewCardText,
+    expandText,
+    cancelText,
+    sortByText,
+    expandedText,
+    emptyContent,
+    expandedCloseText,
+    scrollElement,
+    renderRowNestedChildren,
+    rowExtraClickMenuTitle,
+    getExpandIconDisableState,
+    onColumnChange,
+    totals,
+    rowExtraClick,
+    rowExtraClickNeeded,
+    closeWithOutsideClick,
+    isEditMode,
+    ...restProps
+  } = props;
+  const isCustomScrollElement = ('scrollElement' in props);
+  const isSortControlled = ('onSortChange' in props);
+  const virtualizedList = useRef(null);
+  const [sortDir, setSortDir] = useState(defaultSortType || null);
+  const [sortCol, setSortCol] = useState(defaultSortedColumn || null);
+  const [page, setPage] = useState(1);
+  const [listWidth, setListWidth] = useState(null);
+  const [pageLoading, setPageLoading] = useState(false);
+  const columnsWithSort = useMemo(() => columns.filter(_ref => {
+    let {
+      sortable
+    } = _ref;
+    return typeof sortable === 'boolean' ? sortable : sortableColumns;
+  }), [columns, sortableColumns]);
+  const sortedRows = useMemo(() => {
+    if (isSortControlled || !sortDir) return rows;
+    const column = columns.find(col => col.dataKey === sortCol) || {};
+    const sortFn = column.sortFn ? (prev, next) => column.sortFn(prev, next, sortCol, sortDir, column.formatter, column.removeSymbol) : (prev, next) => defaultSortFn(prev, next, sortCol, sortDir);
+    if (sortDir !== null) return [...rows].sort(sortFn);
+    return rows;
+  }, [isSortControlled, sortDir, rows, columns, sortCol]);
+  const handleSortChange = useCallback(() => {
+    const dir = !sortDir ? 'asc' : sortDir === 'asc' ? 'desc' : null;
+    const sortedColValue = isSortControlled ? sortedColumn : sortCol;
+    const column = columns.find(col => col[columnKey] === sortedColValue) || {};
+    if (sortCol) {
+      !isSortControlled && setSortDir(dir);
+    }
+    onSortChange && onSortChange({
+      column
+    }, sortCol, dir);
+  }, [sortDir, columns, sortCol, onSortChange, columnKey, sortedColumn, isSortControlled]);
+  const handlePageLoad = useCallback(_ref2 => {
+    let {
+      stopIndex
+    } = _ref2;
+    const loadedCount = stopIndex + 1;
+    if (loadedCount === rowsCount) return false;
+    if (loadedCount === rowsPerPage * page) {
+      const newPage = page + 1;
+      onPaginationChange(newPage, rowsPerPage);
+      setPageLoading(true);
+      setPage(newPage);
+    }
+  }, [rowsCount, rowsPerPage, page, onPaginationChange]);
+  useEffect(() => {
+    if (!loading) setPageLoading(false);
+  }, [loading]);
+  const sortedRowsLength = sortedRows.length;
+  const cache = useMemo(() => new CellMeasurerCache({
+    minHeight: 75,
+    defaultHeight: 200,
+    fixedWidth: true
+  }), []);
+  const rowRenderer = _ref3 => {
+    let {
+      index,
+      style,
+      parent
+    } = _ref3;
+    const {
+      onClick,
+      ...restItem
+    } = sortedRows[index];
+    return /*#__PURE__*/React__default.createElement(CellMeasurer, {
+      cache: cache,
+      columnIndex: 0,
+      key: index,
+      parent: parent,
+      rowIndex: index
+    }, /*#__PURE__*/React__default.createElement(Card, _extends({}, restItem, {
+      style: {
+        top: style.top
+      },
+      closeWithOutsideClick: closeWithOutsideClick,
+      isCustomScrollElement: isCustomScrollElement,
+      rowExtraClickMenuTitle: rowExtraClickMenuTitle,
+      getExpandIconDisableState: getExpandIconDisableState,
+      onRowClick: onClick,
+      index: index,
+      columnKey: columnKey,
+      columnLimit: columnLimit,
+      rowActionBar: rowActionBar,
+      getPopupProps: getPopupProps,
+      rowExtraClick: rowExtraClick,
+      isEditMode: isEditMode,
+      rowExtraClickNeeded: rowExtraClickNeeded,
+      rowHeightCache: cache,
+      row: restItem,
+      columns: columns,
+      className: rowClassName,
+      shadow: shadow,
+      border: border,
+      virtualizedList: virtualizedList.current,
+      viewCardText: viewCardText,
+      expandText: expandText,
+      cancelText: cancelText,
+      expandedText: expandedText,
+      expandedCloseText: expandedCloseText,
+      renderRowNestedChildren: renderRowNestedChildren
+    })));
+  };
+  const handleColumnChange = useCallback(_ref4 => {
+    let {
+      [columnKey]: value,
+      ...rest
+    } = _ref4;
+    setSortCol(value);
+    setSortDir(null);
+    onColumnChange && onColumnChange(value, rest);
+  }, [columnKey, onColumnChange]);
+  const customScrollElement = isCustomScrollElement && scrollElement ? scrollElement.current : undefined;
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classnames('mobile-table-holder', className)
+  }, restProps), sortedRows.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, customSubHeader, !!Object.keys(totals).length && /*#__PURE__*/React__default.createElement("div", {
+    className: "mc-widgets-holder"
+  }, /*#__PURE__*/React__default.createElement("ul", null, columns.map(_ref5 => {
+    let {
+      text,
+      widgetColor,
+      [columnKey]: unique
+    } = _ref5;
+    return totals[unique] && /*#__PURE__*/React__default.createElement("li", {
+      key: unique
+    }, /*#__PURE__*/React__default.createElement(Widget, {
+      type: "colorful",
+      title: text,
+      color: widgetColor,
+      text: totals[unique],
+      size: "small"
+    }));
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "mobile-table-head"
+  }, !!columnsWithSort.length && /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("button", {
+    className: "mobile-sort-button",
+    onClick: handleSortChange
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: classnames({
+      active: sortDir || sortType
+    })
+  }, sortByText), /*#__PURE__*/React__default.createElement("div", {
+    className: "mobile-sort-icons"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-sorting-down",
+    className: classnames({
+      active: sortDir === 'desc' || isSortControlled && sortType === 'desc'
+    })
+  }), /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-sorting-up",
+    className: classnames({
+      active: sortDir === 'asc' || isSortControlled && sortType === 'asc'
+    })
+  })))), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(Dropdown, {
+    data: columnsWithSort,
+    defaultValue: isSortControlled ? sortedColumn : sortCol || null,
+    onChange: handleColumnChange,
+    placeholder: sortingPlaceholder,
+    labelKey: "text",
+    valueKey: columnKey
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-results-holder"
+  }, resultText, " ", rowsCount || rows.length)), /*#__PURE__*/React__default.createElement("div", {
+    className: "mobile-table-body",
+    style: {
+      height: '100%'
+    },
+    ref: ref => ref && setListWidth(ref.clientWidth)
+  }, listWidth && (!isCustomScrollElement || scrollElement.current) && /*#__PURE__*/React__default.createElement(InfiniteLoader, {
+    minimumBatchSize: 0,
+    threshold: 0,
+    isRowLoaded: index => !!sortedRows[index],
+    loadMoreRows: handlePageLoad,
+    rowCount: sortedRowsLength
+  }, _ref6 => {
+    let {
+      onRowsRendered
+    } = _ref6;
+    return /*#__PURE__*/React__default.createElement(WindowScroller, {
+      scrollElement: customScrollElement
+    }, _ref7 => {
+      let {
+        height = 0,
+        scrollTop,
+        isScrolling
+      } = _ref7;
+      return /*#__PURE__*/React__default.createElement(List, {
+        ref: virtualizedList,
+        autoHeight: true,
+        height: height,
+        onRowsRendered: onRowsRendered,
+        isScrolling: isScrolling,
+        rowCount: sortedRowsLength,
+        rowHeight: row => cache.rowHeight(row),
+        rowRenderer: rowRenderer,
+        scrollTop: scrollTop,
+        width: listWidth
+      });
+    });
+  }))) : /*#__PURE__*/React__default.createElement("div", {
+    className: "cards-empty-holder"
+  }, emptyContent), loading && /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('mobile-table-loading', {
+      'absolute-splash': !pageLoading
+    })
+  }, /*#__PURE__*/React__default.createElement(BusyLoader, {
+    spinnerSize: pageLoading ? 'big' : 'small'
+  })));
+}
+CardList.propTypes = {
+  /**
+   * Show busy wrapper
+   */
+  loading: propTypesExports.bool,
+  /**
+   * Is have shadow
+   */
+  shadow: propTypesExports.bool,
+  /**
+   * Is have border
+   */
+  border: propTypesExports.bool,
+  /**
+   * Is card in edit mode
+   */
+  isEditMode: propTypesExports.bool,
+  /**
+   * Text for showing result
+   */
+  resultText: propTypesExports.string,
+  /**
+   * Classname for card items
+   */
+  rowClassName: propTypesExports.string,
+  /**
+   * Classname for card list
+   */
+  className: propTypesExports.string,
+  /**
+   * Type of sorting when it's controlled
+   */
+  sortType: propTypesExports.oneOf(['asc', 'desc', null]),
+  /**
+   * DataKey of column which was sorted
+   */
+  sortedColumn: propTypesExports.string,
+  /**
+   * DataKey of column which was sorted by default
+   */
+  defaultSortedColumn: propTypesExports.string,
+  /**
+   * Type of default sorting
+   */
+  defaultSortType: propTypesExports.oneOf(['asc', 'desc', null]),
+  /**
+   * Title for rowExtraClick menu item
+   */
+  rowExtraClickMenuTitle: propTypesExports.string,
+  /**
+   * Function which should return boolean
+   */
+  getExpandIconDisableState: propTypesExports.func,
+  /**
+   * Custom elements for sub header
+   */
+  customSubHeader: propTypesExports.node,
+  /**
+   * Are columns sortable?
+   */
+  sortableColumns: propTypesExports.bool,
+  /**
+   * Pass this function to catch sorting event and get related data
+   * ((type: string, dataKey: sting, column: PropTypes.columns[item]) => void
+   */
+  onSortChange: propTypesExports.func,
+  /**
+   * Placeholder for sorting dropdown
+   */
+  sortingPlaceholder: propTypesExports.string,
+  /**
+   * sortFn: Custom sort function for columns.((prev: PropTypes.rows[item], next: PropTypes.rows[item], rows: PropTypes.rows, dataKey: string) => {
+   *   if (prev is less than next by some ordering criterion) {
+   *      return -1;
+   *   }
+   *    if (prev is greater than next by the ordering criterion) {
+   *      return 1;
+   *    }
+   *    prev is equal to next
+   *   return 0;
+   *  }
+   * })
+   *
+   * text: Text value for columns
+   *
+   * render: Function to render custom text.((column: PropTypes.columns[item], index: number, isEditActive: boolean) =>  return any)
+   *
+   * sortable: Allows sorting if true
+   *
+   * resizable: Allows resizing if true
+   *
+   * current column's data key
+   *
+   * draggable: Allows dragging if true
+   *
+   * colRenderer: Render custom component on certain column of each row. ((value: string || number, index: number, row: PropTypes.rows[item], isEditActive: boolean) => {
+   *  return <div>Hello World</div>})
+   *
+   * getter: Function to define custom text. ((row: PropTypes.rows[item], index: number, isEditActive: boolean)) => {
+   *  return some string
+   * })
+   *
+   * formatter: Function tp format displaying text. ((middleText: string, row: PropTypes.rows[item], index: number, isEditActive: boolean) => {
+   *  return some string
+   * })
+   *
+   */
+  columns: propTypesExports.arrayOf(propTypesExports.shape({
+    sortFn: propTypesExports.func,
+    ...oneIsRequired({
+      text: propTypesExports.node,
+      render: propTypesExports.func
+    }),
+    sortable: propTypesExports.bool,
+    resizable: propTypesExports.bool,
+    dataKey: propTypesExports.string,
+    draggable: propTypesExports.bool,
+    colRenderer: propTypesExports.func,
+    getter: propTypesExports.func,
+    formatter: propTypesExports.func,
+    hide: propTypesExports.bool
+  })).isRequired,
+  /**
+   * Key from column's data which value is surely unique
+   */
+  columnKey: propTypesExports.string.isRequired,
+  /**
+   * hasHover: Allow hovering
+   * data: rows column's data
+   * nestedTable: object of columns: array of objects and rows: array of objects
+   * className: additional className for row element
+   * render: Render custom component on (row: PropTypes.rows[item] index: number) => {
+   *  return <div>Hello World</div>})
+   */
+  rows: propTypesExports.arrayOf(propTypesExports.shape({
+    /**
+     * Expand button disabled state
+     */
+    expandDisabled: propTypesExports.bool,
+    data: propTypesExports.object,
+    className: propTypesExports.string,
+    render: propTypesExports.func
+  })),
+  /**
+   * Rows total count
+   */
+  rowsCount: propTypesExports.number,
+  /**
+   * Number of columns that will be shown
+   */
+  columnLimit: propTypesExports.number,
+  /**
+   * Function which will return Array of objects as row's action bar on the right corner of the row. ((row: PropTypes.rows[item] ,index: number) => [])
+   */
+  rowActionBar: propTypesExports.func,
+  /**
+   * Function which will return props for mobile popup. ((row: PropTypes.rows[item] ,index: number) => {})
+   */
+  getPopupProps: propTypesExports.func,
+  /**
+   * Text for View Card
+   */
+  viewCardText: propTypesExports.string,
+  /**
+   * Text for Expand
+   */
+  expandText: propTypesExports.string,
+  /**
+   * Text for Cancel
+   */
+  cancelText: propTypesExports.string,
+  /**
+   * Key from row's data  which value is surely unique
+   */
+  rowKey: propTypesExports.string.isRequired,
+  /**
+   * Will render when there are no rows to render
+   */
+  emptyContent: propTypesExports.node,
+  /**
+   * Text for Expanded popup close button
+   */
+  expandedCloseText: propTypesExports.string,
+  /**
+   * Text for Expanded popup title
+   */
+  expandedText: propTypesExports.string,
+  /**
+   * Function which should return null or another
+   * Function which will return valid node
+   */
+  renderRowNestedChildren: propTypesExports.func,
+  /**
+   * Function will be called when page changes (page, rowsPerPage) => void
+   */
+  onPaginationChange: propTypesExports.func,
+  /**
+   * Rows count per page
+   */
+  rowsPerPage: propTypesExports.number,
+  /**
+   * Text for sort by
+   */
+  sortByText: propTypesExports.string,
+  /**
+   * Object with dataKeys and totals
+   */
+  totals: propTypesExports.object,
+  /**
+   * Extra click function for rows. ((e: event object, data: object, index: number, row: PropTypes.rows[item]) => custom logic)
+   */
+  rowExtraClick: propTypesExports.func,
+  /**
+   * Function for determining which rows should have extra click. ((e: event object, data: object, index: number, row: PropTypes.rows[item]) => return true or false)
+   */
+  rowExtraClickNeeded: propTypesExports.oneOfType([propTypesExports.func, propTypesExports.bool])
+};
+CardList.defaultProps = {
+  totals: {},
+  resultText: 'Result:',
+  sortByText: 'Sort by',
+  onPaginationChange: noop,
+  emptyContent: /*#__PURE__*/React__default.createElement(Empty, {
+    title: "No data to display"
+  }),
+  columnKey: 'dataKey',
+  sortingPlaceholder: 'Column',
+  rowExtraClickNeeded: noop,
+  sortableColumns: false,
+  columnLimit: 6,
+  shadow: true,
+  border: true,
+  rowsPerPage: 20
+};
+
+function WrapperTableContainer(_ref) {
+  let {
+    name,
+    titleActions,
+    className,
+    paperProps,
+    withTitle,
+    customSubHeader,
+    ...cardProps
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(PaperWrapper, _extends({
+    className: classnames(className)
+  }, paperProps), withTitle ? /*#__PURE__*/React__default.createElement(WithTitle, {
+    name: name,
+    actions: titleActions
+  }, customSubHeader, /*#__PURE__*/React__default.createElement(CardList, cardProps)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, customSubHeader, /*#__PURE__*/React__default.createElement(CardList, cardProps)));
+}
+WrapperTableContainer.propTypes = {
+  /**
+   * Module title name
+   */
+  name: propTypesExports.node,
+  /**
+   * Actions for ModuleTitle component
+   */
+  titleActions: propTypesExports.node,
+  /**
+   * Custom elements for sub header
+   */
+  customSubHeader: propTypesExports.node,
+  /**
+   * Classname for card list
+   */
+  className: propTypesExports.string,
+  /**
+   * Props for Paper component
+   */
+  paperProps: propTypesExports.shape({
+    ...PaperWrapper.propTypes
+  }),
+  /**
+   * Show/Hide ModuleTitle component
+   */
+  withTitle: propTypesExports.bool,
+  ...CardList.propTypes
+};
+WrapperTableContainer.defaultProps = {
+  ...CardList.defaultProps
+};
+
+export { CardList, WrapperTableContainer as WrappedCardList };