@vitality-ds/components 4.0.0-alpha.0

package/dist/esm/Table/components/Cells/Button/index.js

@@ -0,0 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from "react";
+import Button from "../../../../Button";
+function ButtonCell(props) {
+  return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
+    size: "compact"
+  }));
+}
+ButtonCell.displayName = "ButtonCell";
+export default ButtonCell;

package/dist/esm/Table/components/Cells/Button/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Table/components/Cells/CreatableSelect/index.js

@@ -0,0 +1,9 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
+import React from "react";
+import { CreatableSelect } from "../../../../Input/Select";
+function CreatableSelectCell(_ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/React.createElement(CreatableSelect, props);
+}
+export default CreatableSelectCell;

package/dist/esm/Table/components/Cells/CurrencyInput/index.js

@@ -0,0 +1,9 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
+import React from "react";
+import CurrencyInput from "../../../../Input/CurrencyInput";
+function CurrencyInputCell(_ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/React.createElement(CurrencyInput, props);
+}
+export default CurrencyInputCell;

package/dist/esm/Table/components/Cells/Custom/index.js

@@ -0,0 +1,5 @@
+function CustomCell(_ref) {
+  var component = _ref.component;
+  return component;
+}
+export default CustomCell;

package/dist/esm/Table/components/Cells/Custom/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Table/components/Cells/DatePicker/index.js

@@ -0,0 +1,9 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
+import React from "react";
+import DatePicker from "../../../../Input/DatePicker";
+function DatePickerCell(_ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/React.createElement(DatePicker, props);
+}
+export default DatePickerCell;

package/dist/esm/Table/components/Cells/DurationInput/index.js

@@ -0,0 +1,9 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
+import React from "react";
+import DurationInput from "../../../../Input/DurationInput";
+function DurationInputCell(_ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/React.createElement(DurationInput, props);
+}
+export default DurationInputCell;

package/dist/esm/Table/components/Cells/Header/index.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["cellType", "label"];
+import React from "react";
+import Typography from "../../../../Typography";
+import { BaseHeaderCell } from "./styled";
+function HeaderCell(_ref) {
+  var cellType = _ref.cellType,
+    label = _ref.label,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var textAlign = cellType === "number" ? "right" : "left";
+  var alignContent = cellType === "number" ? "end" : null;
+  return /*#__PURE__*/React.createElement(BaseHeaderCell, {
+    alignContent: alignContent
+  }, /*#__PURE__*/React.createElement(Typography, _extends({
+    variant: "inherit",
+    color: "inherit",
+    textAlign: textAlign
+  }, props), label));
+}
+export default HeaderCell;

package/dist/esm/Table/components/Cells/Header/styled.js

@@ -0,0 +1,5 @@
+import { styled } from "@vitality-ds/system";
+import BaseHeaderCellStyles from "./styles/BaseHeaderCell.styles";
+
+// eslint-disable-next-line import/prefer-default-export
+export var BaseHeaderCell = styled("div", BaseHeaderCellStyles);

package/dist/esm/Table/components/Cells/Header/styles/BaseHeaderCell.styles.js

@@ -0,0 +1,13 @@
+import { css } from "@vitality-ds/system";
+export default css({
+  width: "100%",
+  display: "flex",
+  variants: {
+    alignContent: {
+      end: {
+        justifyContent: "flex-end",
+        textAlign: "right"
+      }
+    }
+  }
+});

package/dist/esm/Table/components/Cells/Header/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Table/components/Cells/Icon/index.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["size", "icon"];
+import React from "react";
+function IconCell(_ref) {
+  var size = _ref.size,
+    icon = _ref.icon,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var Component = icon.type;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    size: "md"
+  }, restProps));
+}
+IconCell.displayName = "IconCell";
+export default IconCell;

package/dist/esm/Table/components/Cells/Icon/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Table/components/Cells/IconButton/index.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["size"];
+import React from "react";
+import IconButton from "../../../../IconButton";
+function IconButtonCell(_ref) {
+  var size = _ref.size,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(IconButton, _extends({}, restProps, {
+    size: "compact"
+  }));
+}
+IconButtonCell.displayName = "IconButtonCell";
+export default IconButtonCell;

package/dist/esm/Table/components/Cells/IconButton/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Table/components/Cells/Link/index.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["variant"];
+import React from "react";
+import { Link } from "../../../../Link";
+function LinkCell(_ref) {
+  var variant = _ref.variant,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Link, _extends({
+    variant: "inherit"
+  }, restProps));
+}
+LinkCell.displayName = "LinkCell";
+export default LinkCell;

package/dist/esm/Table/components/Cells/Link/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Table/components/Cells/Number/index.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "textAlign", "variant", "htmlTag"];
+import React from "react";
+import Typography from "../../../../Typography";
+import { BaseNumberTextCell } from "./styled";
+function NumberCell(_ref) {
+  var children = _ref.children,
+    textAlign = _ref.textAlign,
+    variant = _ref.variant,
+    htmlTag = _ref.htmlTag,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(BaseNumberTextCell, null, /*#__PURE__*/React.createElement(Typography, _extends({
+    textAlign: "right",
+    variant: "inherit"
+  }, restProps), children));
+}
+NumberCell.displayName = "NumberCell";
+export default NumberCell;

package/dist/esm/Table/components/Cells/Number/styled.js

@@ -0,0 +1,5 @@
+import { styled } from "@vitality-ds/system";
+import BaseNumberTextCellStyles from "./styles/BaseNumberTextCell.styles";
+
+// eslint-disable-next-line import/prefer-default-export
+export var BaseNumberTextCell = styled("div", BaseNumberTextCellStyles);

package/dist/esm/Table/components/Cells/Number/styles/BaseNumberTextCell.styles.js

@@ -0,0 +1,6 @@
+import { css } from "@vitality-ds/system";
+export default css({
+  width: "100%",
+  display: "flex",
+  justifyContent: "flex-end"
+});

package/dist/esm/Table/components/Cells/Number/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Table/components/Cells/RowActions/constants.js

@@ -0,0 +1,8 @@
+import { Delete, Download, Edit, Print } from "@vitality-ds/icons";
+var ICON_MAPPING = {
+  "delete": Delete,
+  edit: Edit,
+  print: Print,
+  download: Download
+};
+export default ICON_MAPPING;

package/dist/esm/Table/components/Cells/RowActions/index.js

@@ -0,0 +1,13 @@
+import React, { Fragment } from "react";
+import getIconButtonProps from "./logic";
+import { BaseIconButtonCell } from "./styled";
+export default function RowActionsCell(props) {
+  var getRowActions = Object.keys(props).map(function (action) {
+    var actionProps = props[action];
+    var iconButtonProps = getIconButtonProps(actionProps, action);
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: action
+    }, /*#__PURE__*/React.createElement(BaseIconButtonCell, iconButtonProps));
+  });
+  return getRowActions;
+}

package/dist/esm/Table/components/Cells/RowActions/logic.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onClick", "tooltipContent"];
+import React from "react";
+import ICON_MAPPING from "./constants";
+var getDefaultTooltipContent = function getDefaultTooltipContent(action) {
+  return action.charAt(0).toUpperCase() + action.slice(1);
+};
+function getIconButtonProps(actionProps, action) {
+  var Component = ICON_MAPPING[action];
+  var onClick = actionProps.onClick,
+    _actionProps$tooltipC = actionProps.tooltipContent,
+    tooltipContent = _actionProps$tooltipC === void 0 ? getDefaultTooltipContent(action) : _actionProps$tooltipC,
+    restProps = _objectWithoutProperties(actionProps, _excluded);
+  return _extends({}, restProps, {
+    icon: /*#__PURE__*/React.createElement(Component, null),
+    onClick: onClick,
+    tooltipContent: tooltipContent
+  });
+}
+export default getIconButtonProps;

package/dist/esm/Table/components/Cells/RowActions/styled.js

@@ -0,0 +1,6 @@
+import { styled } from "@vitality-ds/system";
+import IconButtonCell from "../IconButton";
+import BaseIconButtonCellStyles from "./styles/BaseIconButtonCell.styles";
+
+// eslint-disable-next-line import/prefer-default-export
+export var BaseIconButtonCell = styled(IconButtonCell, BaseIconButtonCellStyles);

package/dist/esm/Table/components/Cells/RowActions/styles/BaseIconButtonCell.styles.js

@@ -0,0 +1,7 @@
+import { css } from "@vitality-ds/system";
+export default css({
+  opacity: 1,
+  "@bp2": {
+    opacity: 0
+  }
+});

package/dist/esm/Table/components/Cells/RowActions/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Table/components/Cells/SearchInput/index.js

@@ -0,0 +1,9 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
+import React from "react";
+import SearchInput from "../../../../Input/SearchInput";
+function SearchInputCell(_ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/React.createElement(SearchInput, props);
+}
+export default SearchInputCell;

package/dist/esm/Table/components/Cells/SearchSelectInput/index.js

@@ -0,0 +1,9 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
+import React from "react";
+import { SearchSelectInput } from "../../../../Input/Select";
+function SearchSelectInputCell(_ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/React.createElement(SearchSelectInput, props);
+}
+export default SearchSelectInputCell;

package/dist/esm/Table/components/Cells/Select/index.js

@@ -0,0 +1,9 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
+import React from "react";
+import { Select } from "../../../../Input/Select";
+function SelectCell(_ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/React.createElement(Select, props);
+}
+export default SelectCell;

package/dist/esm/Table/components/Cells/SortableHeader/components/SortableHeaderCell/index.js

@@ -0,0 +1,2 @@
+import { SortableHeaderCell } from "./styled";
+export default SortableHeaderCell;

package/dist/esm/Table/components/Cells/SortableHeader/components/SortableHeaderCell/styled.js

@@ -0,0 +1,6 @@
+import { HeaderCellSort } from "@table-library/react-table-library/sort";
+import { styled } from "@vitality-ds/system";
+import BaseSortableHeaderCellStyles from "./styles/BaseSortableHeaderCell.styles";
+
+// eslint-disable-next-line import/prefer-default-export
+export var SortableHeaderCell = styled(HeaderCellSort, BaseSortableHeaderCellStyles);

package/dist/esm/Table/components/Cells/SortableHeader/components/SortableHeaderCell/styles/BaseSortableHeaderCell.styles.js

@@ -0,0 +1,20 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _hover;
+import { colorUseCases, css, getColorScaleValueByUseCase } from "@vitality-ds/system";
+import { BaseSortableIconContainer } from "../../SortableIcon/styled";
+import { BaseSortedIconContainer } from "../../SortedIcon/styled";
+
+/**
+ * These styles are applied to React-Table-Libary's `HeaderCellSort` component,
+ * which renders a <button> containing the sortable icons. Because that button
+ * receives the hover state etc, we need to use its hover selector to then
+ * apply styles to the sortable icons.
+ */
+export default css({
+  all: "unset",
+  "&:hover": (_hover = {}, _defineProperty(_hover, "& ".concat(BaseSortedIconContainer), {
+    color: getColorScaleValueByUseCase("neutral", colorUseCases.text.hiContrast)
+  }), _defineProperty(_hover, "& ".concat(BaseSortableIconContainer), {
+    color: getColorScaleValueByUseCase("neutral", colorUseCases.text.lowContrast)
+  }), _hover)
+});

package/dist/esm/Table/components/Cells/SortableHeader/components/SortableIcon/index.js

@@ -0,0 +1,10 @@
+import { Sortable } from "@vitality-ds/icons";
+import React from "react";
+import { BaseSortableIconContainer } from "./styled";
+function SortableIcon() {
+  return /*#__PURE__*/React.createElement(BaseSortableIconContainer, null, /*#__PURE__*/React.createElement(Sortable, {
+    color: "inherit",
+    size: "sm"
+  }));
+}
+export default SortableIcon;

package/dist/esm/Table/components/Cells/SortableHeader/components/SortableIcon/styled.js

@@ -0,0 +1,5 @@
+import { styled } from "@vitality-ds/system";
+import BaseBaseSortableIconContainerStyles from "./styles/BaseSortableIconContainer.styles";
+
+// eslint-disable-next-line import/prefer-default-export
+export var BaseSortableIconContainer = styled("div", BaseBaseSortableIconContainerStyles);

package/dist/esm/Table/components/Cells/SortableHeader/components/SortableIcon/styles/BaseSortableIconContainer.styles.js

@@ -0,0 +1,5 @@
+import { colorUseCases, css, getColorScaleValueByUseCase } from "@vitality-ds/system";
+var text = colorUseCases.text;
+export default css({
+  color: getColorScaleValueByUseCase("neutral", text.placeholder)
+});

package/dist/esm/Table/components/Cells/SortableHeader/components/SortedIcon/index.js

@@ -0,0 +1,13 @@
+import { Back } from "@vitality-ds/icons";
+import React from "react";
+import { BaseSortedIconContainer } from "./styled";
+function SortedIcon(_ref) {
+  var sortBy = _ref.sortBy;
+  return /*#__PURE__*/React.createElement(BaseSortedIconContainer, {
+    sortBy: sortBy
+  }, /*#__PURE__*/React.createElement(Back, {
+    color: "inherit",
+    size: "sm"
+  }));
+}
+export default SortedIcon;

package/dist/esm/Table/components/Cells/SortableHeader/components/SortedIcon/styled.js

@@ -0,0 +1,5 @@
+import { styled } from "@vitality-ds/system";
+import BaseSortedIconContainerStyles from "./styles/BaseSortedIconContainer";
+
+// eslint-disable-next-line import/prefer-default-export
+export var BaseSortedIconContainer = styled("div", BaseSortedIconContainerStyles);

package/dist/esm/Table/components/Cells/SortableHeader/components/SortedIcon/styles/BaseSortedIconContainer.js

@@ -0,0 +1,15 @@
+import { colorUseCases, css, getColorScaleValueByUseCase } from "@vitality-ds/system";
+var text = colorUseCases.text;
+export default css({
+  color: getColorScaleValueByUseCase("neutral", text.lowContrast),
+  variants: {
+    sortBy: {
+      descending: {
+        transform: "rotate(270deg)"
+      },
+      ascending: {
+        transform: "rotate(90deg)"
+      }
+    }
+  }
+});

package/dist/esm/Table/components/Cells/SortableHeader/components/SortedIcon/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Table/components/Cells/SortableHeader/index.js

@@ -0,0 +1,3 @@
+export { default as SortedIcon } from "./components/SortedIcon";
+export { default as SortableIcon } from "./components/SortableIcon";
+export { default as SortableHeaderCell } from "./components/SortableHeaderCell";

package/dist/esm/Table/components/Cells/StatusBadge/index.js

@@ -0,0 +1,7 @@
+import React from "react";
+import StatusBadge from "../../../../StatusBadge/StatusBadge";
+function StatusBadgeCell(props) {
+  return /*#__PURE__*/React.createElement(StatusBadge, props);
+}
+StatusBadgeCell.displayName = "StatusBadgeCell";
+export default StatusBadgeCell;

package/dist/esm/Table/components/Cells/StatusBadge/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Table/components/Cells/Switch/index.js

@@ -0,0 +1,10 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
+import React from "react";
+import Switch from "../../../../Switch";
+function SwitchCell(_ref) {
+  var restProps = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/React.createElement(Switch, restProps);
+}
+SwitchCell.displayName = "SwitchCell";
+export default SwitchCell;

package/dist/esm/Table/components/Cells/Text/index.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["variant"];
+import React from "react";
+import Typography from "../../../../Typography";
+import { BaseTextCell } from "./styled";
+function TextCell(_ref) {
+  var variant = _ref.variant,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(BaseTextCell, null, /*#__PURE__*/React.createElement(Typography, _extends({
+    variant: "inherit",
+    htmlTag: "div"
+  }, props)));
+}
+TextCell.displayName = "TextCell";
+export default TextCell;

package/dist/esm/Table/components/Cells/Text/styled.js

@@ -0,0 +1,5 @@
+import { styled } from "@vitality-ds/system";
+import BaseTextCellStyles from "./styles/BaseTextCell.styles";
+
+// eslint-disable-next-line import/prefer-default-export
+export var BaseTextCell = styled("div", BaseTextCellStyles);

package/dist/esm/Table/components/Cells/Text/styles/BaseTextCell.styles.js

@@ -0,0 +1,4 @@
+import { css } from "@vitality-ds/system";
+export default css({
+  width: "100%"
+});

package/dist/esm/Table/components/Cells/Text/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Table/components/Cells/TextInput/index.js

@@ -0,0 +1,9 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
+import React from "react";
+import TextInput from "../../../../Input/TextInput/index";
+function TextInputCell(_ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/React.createElement(TextInput, props);
+}
+export default TextInputCell;

package/dist/esm/Table/components/Cells/TimePicker/index.js

@@ -0,0 +1,11 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
+import React from "react";
+import TimePicker from "../../../../Input/TimePicker";
+function TimePickerCell(_ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/React.createElement(TimePicker, _extends({}, props, {
+    ref: null
+  }));
+}
+export default TimePickerCell;

package/dist/esm/Table/components/Cells/index.js

@@ -0,0 +1,20 @@
+export { default as ButtonCell } from "./Button";
+export { default as IconCell } from "./Icon";
+export { default as IconButtonCell } from "./IconButton";
+export { default as LinkCell } from "./Link";
+export { default as NumberCell } from "./Number";
+export { default as RowActionsCell } from "./RowActions";
+export { default as SelectCell } from "./Select";
+export { default as StatusBadgeCell } from "./StatusBadge";
+export { default as SwitchCell } from "./Switch";
+export { default as TextCell } from "./Text";
+export { default as TextInputCell } from "./TextInput";
+export { default as CurrencyInputCell } from "./CurrencyInput";
+export { default as DurationInputCell } from "./DurationInput";
+export { default as SearchInputCell } from "./SearchInput";
+export { default as TimePickerCell } from "./TimePicker";
+export { default as DatePickerCell } from "./DatePicker";
+export { default as CreatableSelectCell } from "./CreatableSelect";
+export { default as AsyncSelectCell } from "./AsyncSelect";
+export { default as SearchSelectInputCell } from "./SearchSelectInput";
+export { default as CustomCell } from "./Custom";

package/dist/esm/Table/components/Cells/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Table/components/HeaderRow/constants.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { SortableIcon, SortedIcon } from "../Cells/SortableHeader";
+export default {
+  iconDefault: /*#__PURE__*/React.createElement(SortableIcon, null),
+  iconUp: /*#__PURE__*/React.createElement(SortedIcon, {
+    sortBy: "ascending"
+  }),
+  iconDown: /*#__PURE__*/React.createElement(SortedIcon, {
+    sortBy: "descending"
+  })
+};

package/dist/esm/Table/components/HeaderRow/index.js

@@ -0,0 +1,49 @@
+import { HeaderCell as ComposedHeaderCell, HeaderRow as ComposedHeaderRow } from "@table-library/react-table-library/table";
+import React, { useContext } from "react";
+import BaseCheckbox from "../../../Input/Checkbox/components/BaseCheckbox";
+import { SelectContext } from "../../contexts/SelectContext";
+import { getHeaderCheckboxState } from "../../logic";
+import { resizerTheme } from "../../styles/BaseTable.styles";
+import HeaderCell from "../Cells/Header";
+import { SortableHeaderCell } from "../Cells/SortableHeader";
+import { toggle } from "./logic";
+function HeaderRow(_ref) {
+  var columns = _ref.columns,
+    tableStatus = _ref.tableStatus,
+    tablePagination = _ref.tablePagination,
+    data = _ref.data;
+  var _useContext = useContext(SelectContext),
+    selectLogic = _useContext.selectLogic,
+    selectableRows = _useContext.selectableRows;
+  return /*#__PURE__*/React.createElement(ComposedHeaderRow, null, selectableRows && /*#__PURE__*/React.createElement(ComposedHeaderCell, null, /*#__PURE__*/React.createElement(BaseCheckbox, {
+    disabled: Boolean(tableStatus),
+    checked: getHeaderCheckboxState(selectLogic),
+    onCheckedChange: function onCheckedChange() {
+      return toggle(selectLogic, tablePagination, data);
+    }
+  })), columns.map(function (_ref2) {
+    var label = _ref2.label,
+      resize = _ref2.resize,
+      minWidth = _ref2.minWidth,
+      cellType = _ref2.cellType,
+      colId = _ref2.colId,
+      sortable = _ref2.sortable;
+    return sortable ? /*#__PURE__*/React.createElement(SortableHeaderCell, {
+      key: colId.toUpperCase(),
+      sortKey: colId.toUpperCase(),
+      resize: resize && resizerTheme(minWidth),
+      select: selectableRows ? selectLogic : null
+    }, /*#__PURE__*/React.createElement(HeaderCell, {
+      cellType: cellType,
+      label: label
+    })) : /*#__PURE__*/React.createElement(ComposedHeaderCell, {
+      key: colId.toUpperCase(),
+      resize: resize && resizerTheme(minWidth),
+      select: selectableRows ? selectLogic : null
+    }, /*#__PURE__*/React.createElement(HeaderCell, {
+      cellType: cellType,
+      label: label
+    }));
+  }));
+}
+export default HeaderRow;

package/dist/esm/Table/components/HeaderRow/logic.js

@@ -0,0 +1,28 @@
+export function selectIdsByTablePage(tablePagination, data) {
+  var _tablePagination$stat = tablePagination.state,
+    page = _tablePagination$stat.page,
+    size = _tablePagination$stat.size;
+  var lastOnPage = (page + 1) * size;
+  var firstOnPage = lastOnPage - size + 1;
+  var selectableIds = [];
+  for (var i = firstOnPage; i <= lastOnPage; i += 1) {
+    if (data.nodes[i - 1]) {
+      selectableIds.push(data.nodes[i - 1].id);
+    }
+  }
+  return selectableIds;
+}
+export function toggleSelection(selectLogic, idsOnPage) {
+  if (selectLogic.state.ids.length > 0) {
+    selectLogic.fns.onToggleAll({});
+  } else {
+    selectLogic.fns.onAddByIds(idsOnPage);
+  }
+}
+export function toggle(selectLogic, tablePagination, data) {
+  if (tablePagination) {
+    toggleSelection(selectLogic, selectIdsByTablePage(tablePagination, data));
+  } else {
+    selectLogic.fns.onToggleAll({});
+  }
+}