@codacy/ui-components 0.64.15 → 0.64.17

package/lib/Table/Table.js

@@ -1,172 +1,187 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableContext = exports.Table = exports.ColumnsGroup = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _Table = require("./Table.styles");
+var _IconAndText = require("../IconAndText");
+var _Icons = require("../Icons");
+var _NewSelectableTable = require("./NewSelectableTable");
+var _ScrollableContent = require("../ScrollableContent");
+var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children"],
-    _excluded2 = ["children", "sticky", "stickyOffset"],
-    _excluded3 = ["children", "sortable", "direction", "defaultDirection", "name", "onClick", "align", "width"],
-    _excluded4 = ["children", "align", "span"],
-    _excluded5 = ["children"],
-    _excluded6 = ["children"],
-    _excluded7 = ["children", "index", "height"];
-import React, { useContext, useState, useCallback, useEffect } from 'react';
-import { TableWrapper, StyledTableHeader, StyledTableHeaderCell, StyledTableBodyCell, StyledTableBody, StyledTableRow, StyledTable } from './Table.styles';
-import { IconAndText } from '../IconAndText';
-import { SortDown, SortUp } from '../Icons';
-import { SelectableHeader, SelectableRow } from './NewSelectableTable';
-import { ScrollableContentContext } from '../ScrollableContent';
-export var TableContext = React.createContext({
+  _excluded2 = ["children", "sticky", "stickyOffset"],
+  _excluded3 = ["children", "sortable", "direction", "defaultDirection", "name", "onClick", "align", "width"],
+  _excluded4 = ["children", "align", "span"],
+  _excluded5 = ["children"],
+  _excluded6 = ["children"],
+  _excluded7 = ["children", "index", "height"];
+var TableContext = exports.TableContext = /*#__PURE__*/_react["default"].createContext({
   columnsCount: 0,
   setColumnsCount: function setColumnsCount() {
     return null;
   }
 });
+
 /**
  * Styled table component
  */
-
 var TableComponent = function TableComponent(_ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      columnsCount = _useState2[0],
-      setColumnsCount = _useState2[1];
-
-  return /*#__PURE__*/React.createElement(TableContext.Provider, {
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    columnsCount = _useState2[0],
+    setColumnsCount = _useState2[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableContext.Provider, {
     value: {
       columnsCount: columnsCount,
       setColumnsCount: setColumnsCount
-    }
-  }, /*#__PURE__*/React.createElement(TableWrapper, props, /*#__PURE__*/React.createElement(StyledTable, null, children)));
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.TableWrapper, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.StyledTable, {
+        children: children
+      })
+    }))
+  });
 };
-
-export var ColumnsGroup = function ColumnsGroup(_ref2) {
+var ColumnsGroup = exports.ColumnsGroup = function ColumnsGroup(_ref2) {
   var children = _ref2.children;
-  var tableCtx = useContext(TableContext);
-  useEffect(function () {
-    tableCtx.setColumnsCount(React.Children.toArray(children).length);
+  var tableCtx = (0, _react.useContext)(TableContext);
+  (0, _react.useEffect)(function () {
+    tableCtx.setColumnsCount(_react["default"].Children.toArray(children).length);
   }, [tableCtx, children]);
-  return /*#__PURE__*/React.createElement("colgroup", null, React.Children.map(children, function (child) {
-    if (React.isValidElement(child)) {
-      if (child.props.width) {
-        var cw = child.props.width;
-        return /*#__PURE__*/React.createElement("col", {
-          style: {
-            width: typeof cw !== 'string' ? cw < 1 ? "".concat(cw * 100, "%") : "".concat(cw, "px") : cw
-          }
-        });
-      } else {
-        return /*#__PURE__*/React.createElement("col", null);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("colgroup", {
+    children: _react["default"].Children.map(children, function (child) {
+      if ( /*#__PURE__*/_react["default"].isValidElement(child)) {
+        if (child.props.width) {
+          var cw = child.props.width;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("col", {
+            style: {
+              width: typeof cw !== 'string' ? cw < 1 ? "".concat(cw * 100, "%") : "".concat(cw, "px") : cw
+            }
+          });
+        } else {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("col", {});
+        }
       }
-    }
-
-    return null;
-  }));
+      return null;
+    })
+  });
 };
-
 var Header = function Header(_ref3) {
   var children = _ref3.children,
-      _ref3$sticky = _ref3.sticky,
-      sticky = _ref3$sticky === void 0 ? false : _ref3$sticky,
-      _ref3$stickyOffset = _ref3.stickyOffset,
-      stickyOffset = _ref3$stickyOffset === void 0 ? '0' : _ref3$stickyOffset,
-      props = _objectWithoutProperties(_ref3, _excluded2);
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColumnsGroup, null, children), /*#__PURE__*/React.createElement(StyledTableHeader, Object.assign({
-    sticky: sticky,
-    stickyOffset: stickyOffset
-  }, props), /*#__PURE__*/React.createElement(StyledTableRow, null, children)));
+    _ref3$sticky = _ref3.sticky,
+    sticky = _ref3$sticky === void 0 ? false : _ref3$sticky,
+    _ref3$stickyOffset = _ref3.stickyOffset,
+    stickyOffset = _ref3$stickyOffset === void 0 ? '0' : _ref3$stickyOffset,
+    props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnsGroup, {
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.StyledTableHeader, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+      sticky: sticky,
+      stickyOffset: stickyOffset
+    }, props), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.StyledTableRow, {
+        children: children
+      })
+    }))]
+  });
 };
-
 var HeaderCell = function HeaderCell(_ref4) {
   var children = _ref4.children,
-      sortable = _ref4.sortable,
-      direction = _ref4.direction,
-      _ref4$defaultDirectio = _ref4.defaultDirection,
-      defaultDirection = _ref4$defaultDirectio === void 0 ? 'ascending' : _ref4$defaultDirectio,
-      name = _ref4.name,
-      onClick = _ref4.onClick,
-      _ref4$align = _ref4.align,
-      align = _ref4$align === void 0 ? 'left' : _ref4$align,
-      width = _ref4.width,
-      props = _objectWithoutProperties(_ref4, _excluded3);
-
+    sortable = _ref4.sortable,
+    direction = _ref4.direction,
+    _ref4$defaultDirectio = _ref4.defaultDirection,
+    defaultDirection = _ref4$defaultDirectio === void 0 ? 'ascending' : _ref4$defaultDirectio,
+    name = _ref4.name,
+    onClick = _ref4.onClick,
+    _ref4$align = _ref4.align,
+    align = _ref4$align === void 0 ? 'left' : _ref4$align,
+    width = _ref4.width,
+    props = (0, _objectWithoutProperties2["default"])(_ref4, _excluded3);
   var _direction = direction || defaultDirection;
-
-  var content = sortable ? /*#__PURE__*/React.createElement(IconAndText, {
-    icon: _direction === 'ascending' ? SortUp : SortDown,
+  var content = sortable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconAndText.IconAndText, {
+    icon: _direction === 'ascending' ? _Icons.SortUp : _Icons.SortDown,
     toRight: true,
     iconProps: {
       size: 'sm',
       color: !!direction ? 'accent-primary' : 'ui-border'
-    }
-  }, children) : children;
-  var onClickHandler = useCallback(function (e) {
+    },
+    children: children
+  }) : children;
+  var onClickHandler = (0, _react.useCallback)(function (e) {
     if (onClick) onClick(e, !direction ? defaultDirection : direction === 'ascending' ? 'descending' : 'ascending', name);
   }, [onClick, direction, defaultDirection, name]);
-  return /*#__PURE__*/React.createElement(StyledTableHeaderCell, Object.assign({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.StyledTableHeaderCell, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     align: align,
     "aria-sort": direction,
     onClick: onClickHandler,
     direction: direction,
     sortable: sortable
-  }, props), content);
+  }, props), {}, {
+    children: content
+  }));
 };
-
 var Cell = function Cell(_ref5) {
   var children = _ref5.children,
-      _ref5$align = _ref5.align,
-      align = _ref5$align === void 0 ? 'left' : _ref5$align,
-      span = _ref5.span,
-      props = _objectWithoutProperties(_ref5, _excluded4);
-
-  var tableCtx = useContext(TableContext);
-  return /*#__PURE__*/React.createElement(StyledTableBodyCell, Object.assign({
+    _ref5$align = _ref5.align,
+    align = _ref5$align === void 0 ? 'left' : _ref5$align,
+    span = _ref5.span,
+    props = (0, _objectWithoutProperties2["default"])(_ref5, _excluded4);
+  var tableCtx = (0, _react.useContext)(TableContext);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.StyledTableBodyCell, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     colSpan: span === 'auto' ? tableCtx === null || tableCtx === void 0 ? void 0 : tableCtx.columnsCount : span,
     align: align
-  }, props), children);
+  }, props), {}, {
+    children: children
+  }));
 };
-
 var Rows = function Rows(_ref6) {
   var children = _ref6.children,
-      props = _objectWithoutProperties(_ref6, _excluded5);
-
-  return /*#__PURE__*/React.createElement(StyledTableBody, props, children);
+    props = (0, _objectWithoutProperties2["default"])(_ref6, _excluded5);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.StyledTableBody, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
+    children: children
+  }));
 };
-
 var Row = function Row(_ref7) {
   var children = _ref7.children,
-      props = _objectWithoutProperties(_ref7, _excluded6);
-
-  return /*#__PURE__*/React.createElement(StyledTableRow, props, children);
+    props = (0, _objectWithoutProperties2["default"])(_ref7, _excluded6);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.StyledTableRow, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
+    children: children
+  }));
 };
-
 var VirtualRow = function VirtualRow(_ref8) {
   var children = _ref8.children,
-      index = _ref8.index,
-      height = _ref8.height,
-      props = _objectWithoutProperties(_ref8, _excluded7);
-
-  var scrollCtx = useContext(ScrollableContentContext);
-  var top = (index + 1
-  /* +1 to acknowledge the header row */
-  ) * height;
+    index = _ref8.index,
+    height = _ref8.height,
+    props = (0, _objectWithoutProperties2["default"])(_ref8, _excluded7);
+  var scrollCtx = (0, _react.useContext)(_ScrollableContent.ScrollableContentContext);
+  var top = (index + 1 /* +1 to acknowledge the header row */) * height;
   var threshold = height / 2;
   var inViewport = top >= scrollCtx.scroll - threshold && top <= scrollCtx.scroll + scrollCtx.height + threshold;
-  return /*#__PURE__*/React.createElement(StyledTableRow, Object.assign({}, props, {
-    height: height
-  }), inViewport ? children : /*#__PURE__*/React.createElement(Cell, {
-    span: "auto"
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.StyledTableRow, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
+    height: height,
+    children: inViewport ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)(Cell, {
+      span: "auto"
+    })
   }));
 };
-
-export var Table = Object.assign(TableComponent, {
+var Table = exports.Table = Object.assign(TableComponent, {
   Header: Header,
   HeaderCell: HeaderCell,
   Rows: Rows,
   Row: Row,
   VirtualRow: VirtualRow,
   Cell: Cell,
-  SelectableHeader: SelectableHeader,
-  SelectableRow: SelectableRow
+  SelectableHeader: _NewSelectableTable.SelectableHeader,
+  SelectableRow: _NewSelectableTable.SelectableRow
 });

package/lib/Table/Table.styles.d.ts

@@ -1,21 +1,37 @@
 /// <reference types="react" />
 import { CodacyTheme } from '../theme';
-import { BoxProps } from '../Flexbox';
 import { TableProps, TableHeaderProps, TableHeaderCellProps, TableCellProps, TableRowProps, TableRowsProps } from './Table.types';
-export declare const StyledTable: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, Pick<TableProps, "color" | "size">, CodacyTheme>;
-export declare const TableWrapper: import("@emotion/styled-base").StyledComponent<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<import("..").ColorProps & import("..").LayoutProps & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("../Flexbox").As & {
+export declare const StyledTable: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Pick<TableProps, "color" | "size">, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+export declare const TableWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("..").ColorProps & Omit<import("..").LayoutProps, "size"> & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("../Flexbox").As & {
     fontWeight?: import("styled-system").ResponsiveValue<number | import("../theme").FontWeights, CodacyTheme> | undefined;
-}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps> & {
-    theme?: object | undefined;
-}, "key" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-} & Pick<BoxProps, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps | keyof import("..").FlexboxProps | keyof import("..").GridboxProps> & {
-    theme?: object | undefined;
-}, BoxProps, CodacyTheme>;
-export declare const StyledTableHeaderCell: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, TableHeaderCellProps & {
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & import("..").FlexboxProps & import("..").GridboxProps, {}, {}>;
+export declare const StyledTableHeaderCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TableHeaderCellProps & {
     totalizer?: boolean | undefined;
-}, CodacyTheme>;
-export declare const StyledTableHeader: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, Pick<TableHeaderProps, "background" | "sticky" | "stickyOffset">, CodacyTheme>;
-export declare const StyledTableBodyCell: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, TableCellProps, CodacyTheme>;
-export declare const StyledTableRow: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, TableRowProps, CodacyTheme>;
-export declare const StyledTableBody: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, TableRowsProps, CodacyTheme>;
+}, import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {}>;
+export declare const StyledTableHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Pick<TableHeaderProps, "background" | "sticky" | "stickyOffset">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, {}>;
+export declare const StyledTableBodyCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TableCellProps, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
+export declare const StyledTableRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TableRowProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
+export declare const StyledTableBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TableRowsProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, {}>;