@bolio-ui/core 1.0.2 → 1.0.4

package/esm/card/card.js

@@ -12,17 +12,20 @@ import Image from '../image';
 import { hasChild, pickChild } from '../utils/collections';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
+var defaultProps = {
+  type: 'default',
+  hoverable: false,
+  shadow: false,
+  className: ''
+};
 
 function CardComponent(_ref) {
   var children = _ref.children,
-      _ref$hoverable = _ref.hoverable,
-      hoverable = _ref$hoverable === void 0 ? false : _ref$hoverable,
-      _ref$rounded = _ref.rounded,
-      rounded = _ref$rounded === void 0 ? false : _ref$rounded,
+      hoverable = _ref.hoverable,
+      rounded = _ref.rounded,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$shadow = _ref.shadow,
-      shadow = _ref$shadow === void 0 ? false : _ref$shadow,
+      shadow = _ref.shadow,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'default' : _ref$type,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -56,15 +59,14 @@ function CardComponent(_ref) {
 
   var hasContent = hasChild(withoutImageChildren, CardContent);
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["470877697", [rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses('card', className) || "")
-  }), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React.createElement(CardContent, {
-    className: "card"
-  }, withoutImageChildren), footerChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "470877697",
-    dynamic: [rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
-  }, ".card.__jsx-style-dynamic-selector{-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:".concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
+    className: _JSXStyle.dynamic([["1209748169", [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, borderColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses('card', className) || "")
+  }), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React.createElement(CardContent, null, withoutImageChildren), footerChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1209748169",
+    dynamic: [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, borderColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
+  }, ".card.__jsx-style-dynamic-selector{background:".concat(theme.palette.background, ";-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";border:none;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
 }
 
+CardComponent.defaultProps = defaultProps;
 CardComponent.displayName = 'BolioUICard';
 var Card = withScale(CardComponent);
 export default Card;

package/esm/index.js

@@ -42,6 +42,7 @@ export { default as Slider } from './slider';
 export { default as Snippet } from './snippet';
 export { default as Spacer } from './spacer';
 export { default as Spinner } from './spinner';
+export { default as Table } from './table';
 export { default as Tabs } from './tabs';
 export { default as Tag } from './tag';
 export { default as Text } from './text';

package/esm/table/index.js

@@ -0,0 +1,2 @@
+import Table from './table';
+export default Table;

package/esm/table/stories.js

@@ -0,0 +1,269 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import Table from '.';
+import Code from '../code';
+import Text from '../text';
+import Button from '../button';
+export default {
+  title: 'Data Display/Table',
+  component: Table
+};
+export var Default = function Default() {
+  var data = [{
+    property: 'type',
+    description: 'Content type',
+    type: 'secondary | warning',
+    "default": '-'
+  }, {
+    property: 'Component',
+    description: 'DOM element to use',
+    type: 'string',
+    "default": '-'
+  }, {
+    property: 'bold',
+    description: 'Bold style',
+    type: 'boolean',
+    "default": 'true'
+  }];
+  return /*#__PURE__*/React.createElement(Table, {
+    data: data
+  }, /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "property",
+    label: "property"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "description",
+    label: "description"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "type",
+    label: "type"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "default",
+    label: "default"
+  }));
+};
+export var Compose = function Compose() {
+  var data = [{
+    property: 'type',
+    description: 'Content type',
+    type: 'secondary | warning',
+    "default": '-'
+  }, {
+    property: 'Component',
+    description: 'DOM element to use',
+    type: /*#__PURE__*/React.createElement(Code, null, "string"),
+    "default": '-'
+  }, {
+    property: /*#__PURE__*/React.createElement(Text, {
+      b: true
+    }, "bold"),
+    description: 'Bold style',
+    type: /*#__PURE__*/React.createElement(Code, null, "boolean"),
+    "default": /*#__PURE__*/React.createElement(Code, null, "true")
+  }];
+  return /*#__PURE__*/React.createElement(Table, {
+    data: data
+  }, /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "property",
+    label: "property"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "description",
+    label: "description"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "type",
+    label: "type"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "default",
+    label: "default"
+  }));
+};
+export var Width = function Width() {
+  var data = [{
+    property: 'type',
+    description: 'Content type',
+    type: 'secondary | warning',
+    "default": '-'
+  }, {
+    property: 'Component',
+    description: 'DOM element to use',
+    type: /*#__PURE__*/React.createElement(Code, null, "string"),
+    "default": '-'
+  }, {
+    property: /*#__PURE__*/React.createElement(Text, {
+      b: true
+    }, "bold"),
+    description: 'Bold style',
+    type: /*#__PURE__*/React.createElement(Code, null, "boolean"),
+    "default": /*#__PURE__*/React.createElement(Code, null, "true")
+  }];
+  return /*#__PURE__*/React.createElement(Table, {
+    data: data
+  }, /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "property",
+    label: "property",
+    width: 50
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "description",
+    label: "description"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "type",
+    label: "type"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "default",
+    label: "default"
+  }));
+};
+export var Actions = function Actions() {
+  var dataSource = [{
+    property: 'type',
+    description: 'Content type',
+    operation: ''
+  }, {
+    property: 'Component',
+    description: 'DOM element to use',
+    operation: ''
+  }, {
+    property: /*#__PURE__*/React.createElement(Text, {
+      b: true
+    }, "bold"),
+    description: 'Bold style',
+    operation: ''
+  }];
+
+  var _useState = useState(dataSource),
+      _useState2 = _slicedToArray(_useState, 2),
+      data = _useState2[0],
+      setData = _useState2[1];
+
+  var renderAction = function renderAction(value, rowData, index) {
+    var removeHandler = function removeHandler() {
+      setData(function (last) {
+        return last.filter(function (_, dataIndex) {
+          return dataIndex !== index;
+        });
+      });
+    };
+
+    return /*#__PURE__*/React.createElement(Button, {
+      type: "error",
+      auto: true,
+      scale: 1 / 3,
+      font: "12px",
+      onClick: removeHandler
+    }, "Remove");
+  };
+
+  return /*#__PURE__*/React.createElement(Table, {
+    data: data,
+    onChange: function onChange(value) {
+      return setData(value);
+    }
+  }, /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "property",
+    label: "property"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "description",
+    label: "description"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "operation",
+    label: "operation",
+    width: 150,
+    render: renderAction
+  }));
+};
+export var UpdateRow = function UpdateRow() {
+  var dataSource = [{
+    property: 'type',
+    description: 'Content type',
+    operation: ''
+  }, {
+    property: 'Component',
+    description: 'DOM element to use',
+    operation: ''
+  }, {
+    property: /*#__PURE__*/React.createElement(Text, {
+      b: true
+    }, "bold"),
+    description: 'Bold style',
+    operation: ''
+  }];
+
+  var _React$useState = React.useState(dataSource),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      data = _React$useState2[0],
+      setData = _React$useState2[1];
+
+  var renderAction = function renderAction(value, rowData, rowIndex) {
+    var updateHandler = function updateHandler() {
+      setData(function (last) {
+        return last.map(function (item, dataIndex) {
+          if (dataIndex !== rowIndex) return item;
+          return _extends({}, item, {
+            property: Math.random().toString(16).slice(-5)
+          });
+        });
+      });
+    };
+
+    return /*#__PURE__*/React.createElement(Button, {
+      type: "secondary",
+      auto: true,
+      scale: 1 / 3,
+      font: "12px",
+      onClick: updateHandler
+    }, "Update");
+  };
+
+  return /*#__PURE__*/React.createElement(Table, {
+    data: data,
+    onChange: function onChange(value) {
+      return setData(value);
+    }
+  }, /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "property",
+    label: "property"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "description",
+    label: "description"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "operation",
+    label: "operation",
+    width: 150,
+    render: renderAction
+  }));
+};
+export var CustomHead = function CustomHead() {
+  var data = [{
+    property: 'type',
+    description: 'Content type',
+    type: 'secondary | warning',
+    "default": '-'
+  }, {
+    property: 'Component',
+    description: 'DOM element to use',
+    type: /*#__PURE__*/React.createElement(Code, null, "string"),
+    "default": '-'
+  }, {
+    property: /*#__PURE__*/React.createElement(Text, {
+      b: true
+    }, "bold"),
+    description: 'Bold style',
+    type: /*#__PURE__*/React.createElement(Code, null, "boolean"),
+    "default": /*#__PURE__*/React.createElement(Code, null, "true")
+  }];
+  return /*#__PURE__*/React.createElement(Table, {
+    data: data
+  }, /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "property",
+    label: "property"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "description",
+    label: "description"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "type"
+  }, /*#__PURE__*/React.createElement(Code, null, "type")), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "default"
+  }, /*#__PURE__*/React.createElement(Text, {
+    b: true
+  }, "default")));
+};

package/esm/table/table-body.js

@@ -0,0 +1,54 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import TableCell from './table-cell';
+import { useTableContext } from './table-context';
+import useClasses from '../use-classes';
+var defaultProps = {
+  className: ''
+};
+
+var TableBody = function TableBody(_ref) {
+  var data = _ref.data,
+      hover = _ref.hover,
+      emptyText = _ref.emptyText,
+      onRow = _ref.onRow,
+      onCell = _ref.onCell,
+      rowClassName = _ref.rowClassName;
+  var theme = useTheme();
+
+  var _useTableContext = useTableContext(),
+      columns = _useTableContext.columns;
+
+  var rowClickHandler = function rowClickHandler(row, index) {
+    onRow && onRow(row, index);
+  };
+
+  return /*#__PURE__*/React.createElement("tbody", {
+    className: _JSXStyle.dynamic([["3433300570", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
+  }, data.map(function (row, index) {
+    var className = rowClassName(row, index);
+    return /*#__PURE__*/React.createElement("tr", {
+      key: "tbody-row-".concat(index),
+      onClick: function onClick() {
+        return rowClickHandler(row, index);
+      },
+      className: _JSXStyle.dynamic([["3433300570", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses({
+        hover: hover
+      }, className) || "")
+    }, /*#__PURE__*/React.createElement(TableCell, {
+      columns: columns,
+      row: row,
+      rowIndex: index,
+      emptyText: emptyText,
+      onCellClick: onCell
+    }));
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3433300570",
+    dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
+  }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
+};
+
+TableBody.defaultProps = defaultProps;
+TableBody.displayName = 'BolioUITableBody';
+export default TableBody;

package/esm/table/table-cell.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+var TableCell = function TableCell(_ref) {
+  var columns = _ref.columns,
+      row = _ref.row,
+      rowIndex = _ref.rowIndex,
+      emptyText = _ref.emptyText,
+      onCellClick = _ref.onCellClick;
+
+  /* eslint-disable react/jsx-no-useless-fragment */
+  return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
+    var currentRowValue = row[column.prop];
+    var cellValue = currentRowValue || emptyText;
+    var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
+    return /*#__PURE__*/React.createElement("td", {
+      key: "row-td-".concat(index, "-").concat(column.prop),
+      onClick: function onClick() {
+        return onCellClick && onCellClick(currentRowValue, rowIndex, index);
+      },
+      className: column.className
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "cell"
+    }, shouldBeRenderElement ? shouldBeRenderElement : cellValue));
+  }));
+  /* eslint-enable */
+};
+
+export default TableCell;

package/esm/table/table-column.js

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { useTableContext } from './table-context';
+import useWarning from '../utils/use-warning';
+var defaultProps = {
+  className: '',
+  render: function render() {}
+};
+
+var TableColumn = function TableColumn(columnProps) {
+  var _ref = columnProps,
+      children = _ref.children,
+      prop = _ref.prop,
+      label = _ref.label,
+      width = _ref.width,
+      className = _ref.className,
+      renderHandler = _ref.render;
+
+  var _useTableContext = useTableContext(),
+      updateColumn = _useTableContext.updateColumn;
+
+  var safeProp = "".concat(prop).trim();
+
+  if (!safeProp) {
+    useWarning('The props "prop" is required.', 'Table.Column');
+  }
+
+  useEffect(function () {
+    updateColumn({
+      label: children || label,
+      prop: safeProp,
+      width: width,
+      className: className,
+      renderHandler: renderHandler
+    });
+  }, [children, label, prop, width, className, renderHandler]);
+  return null;
+};
+
+TableColumn.defaultProps = defaultProps;
+TableColumn.displayName = 'BolioUITableColumn';
+export default TableColumn;

package/esm/table/table-context.js

@@ -0,0 +1,9 @@
+import React from 'react';
+var defaultContext = {
+  columns: [],
+  updateColumn: function updateColumn() {}
+};
+export var TableContext = /*#__PURE__*/React.createContext(defaultContext);
+export var useTableContext = function useTableContext() {
+  return React.useContext(TableContext);
+};

package/esm/table/table-head.js

@@ -0,0 +1,58 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+var defaultProps = {
+  className: ''
+};
+
+var makeColgroup = function makeColgroup(width, columns) {
+  var unsetWidthCount = columns.filter(function (c) {
+    return !c.width;
+  }).length;
+  var customWidthTotal = columns.reduce(function (pre, current) {
+    return current.width ? pre + current.width : pre;
+  }, 0);
+  var averageWidth = (width - customWidthTotal) / unsetWidthCount;
+  if (averageWidth <= 0) return /*#__PURE__*/React.createElement("colgroup", null);
+  return /*#__PURE__*/React.createElement("colgroup", null, columns.map(function (column, index) {
+    return /*#__PURE__*/React.createElement("col", {
+      key: "colgroup-".concat(index),
+      width: column.width || averageWidth
+    });
+  }));
+};
+
+var TableHead = function TableHead(props) {
+  var theme = useTheme();
+  var _ref = props,
+      columns = _ref.columns,
+      width = _ref.width;
+  var isScalableWidth = useMemo(function () {
+    return columns.find(function (item) {
+      return !!item.width;
+    });
+  }, [columns]);
+  var colgroup = useMemo(function () {
+    if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
+    return makeColgroup(width, columns);
+  }, [isScalableWidth, width]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
+    className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+  }, /*#__PURE__*/React.createElement("tr", {
+    className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+  }, columns.map(function (column, index) {
+    return /*#__PURE__*/React.createElement("th", {
+      key: "table-th-".concat(column.prop, "-").concat(index),
+      className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
+    }, column.label));
+  }))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "134865897",
+    dynamic: [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
+  }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:".concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
+};
+
+TableHead.defaultProps = defaultProps;
+TableHead.displayName = 'BolioUITableHead';
+export default TableHead;

package/esm/table/table-types.js

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

package/esm/table/table.js

@@ -0,0 +1,115 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "data", "initialData", "hover", "emptyText", "onRow", "onCell", "onChange", "className", "rowClassName"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import TableHead from './table-head';
+import TableBody from './table-body';
+import useRealShape from '../utils/use-real-shape';
+import useResize from '../utils/use-resize';
+import { TableContext } from './table-context';
+import useScale, { withScale } from '../use-scale';
+import TableColumn from './table-column';
+var defaultProps = {
+  hover: true,
+  initialData: [],
+  emptyText: '',
+  className: '',
+  rowClassName: function rowClassName() {
+    return '';
+  }
+};
+
+function TableComponent(tableProps) {
+  /* eslint-disable  @typescript-eslint/no-unused-vars */
+  var _ref = tableProps,
+      children = _ref.children,
+      customData = _ref.data,
+      initialData = _ref.initialData,
+      hover = _ref.hover,
+      emptyText = _ref.emptyText,
+      onRow = _ref.onRow,
+      onCell = _ref.onCell,
+      onChange = _ref.onChange,
+      className = _ref.className,
+      rowClassName = _ref.rowClassName,
+      props = _objectWithoutProperties(_ref, _excluded);
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var ref = useRef(null);
+
+  var _useRealShape = useRealShape(ref),
+      _useRealShape2 = _slicedToArray(_useRealShape, 2),
+      width = _useRealShape2[0].width,
+      updateShape = _useRealShape2[1];
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      columns = _useState2[0],
+      setColumns = _useState2[1];
+
+  var _useState3 = useState(initialData),
+      _useState4 = _slicedToArray(_useState3, 2),
+      data = _useState4[0],
+      setData = _useState4[1];
+
+  var updateColumn = function updateColumn(column) {
+    setColumns(function (last) {
+      var hasColumn = last.find(function (item) {
+        return item.prop === column.prop;
+      });
+      if (!hasColumn) return [].concat(_toConsumableArray(last), [column]);
+      return last.map(function (item) {
+        if (item.prop !== column.prop) return item;
+        return column;
+      });
+    });
+  };
+
+  var contextValue = useMemo(function () {
+    return {
+      columns: columns,
+      updateColumn: updateColumn
+    };
+  }, [columns]);
+  useEffect(function () {
+    if (typeof customData === 'undefined') return;
+    setData(customData);
+  }, [customData]);
+  useResize(function () {
+    return updateShape();
+  });
+  return /*#__PURE__*/React.createElement(TableContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("table", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["2991182230", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), /*#__PURE__*/React.createElement(TableHead, {
+    columns: columns,
+    width: width
+  }), /*#__PURE__*/React.createElement(TableBody, {
+    data: data,
+    hover: hover,
+    emptyText: emptyText,
+    onRow: onRow,
+    onCell: onCell,
+    rowClassName: rowClassName
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2991182230",
+    dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}"))));
+}
+
+TableComponent.defaultProps = defaultProps;
+TableComponent.displayName = 'BolioUITable';
+TableComponent.Column = TableColumn;
+var Table = withScale(TableComponent);
+Table.Column = TableColumn;
+export default Table;