@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/cjs/Table/Body.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var Body = function Body(props) {
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
+    role: "rowgroup",
+    position: "relative",
+    overflowX: "auto",
+    WebkitOverflowScrolling: "touch",
+    flexShrink: 1,
+    flexGrow: 1,
+    marginTop: "-1px",
+    zIndex: 5,
+    css: {
+      '@media print': {
+        overflowX: 'visible'
+      }
+    }
+  }, props));
+};
+
+var _default = Body;
+exports["default"] = _default;

package/dist/cjs/Table/BodyCell.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var BodyCell = function BodyCell(props) {
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    role: "cell",
+    axis: "horizontal",
+    shrink: 0,
+    paddingVertical: 0.5
+  }, props));
+};
+
+var _default = BodyCell;
+exports["default"] = _default;

package/dist/cjs/Table/BodyInnerCell.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var BodyInnerCell = function BodyInnerCell(_ref) {
+  var children = _ref.children,
+      column = _ref.column,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "column"]);
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    axis: "horizontal",
+    alignment: "center",
+    width: column.width || column.maxWidth || column.truncate ? '100%' : undefined,
+    paddingHorizontal: 1.5
+  }, restProps), column.truncate ? /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+    as: "div",
+    truncate: true
+  }, children) : children);
+};
+
+var _default = BodyInnerCell;
+exports["default"] = _default;

package/dist/cjs/Table/BodyRow.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DragDrop = _interopRequireDefault(require("../DragDrop"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _utils = require("../utils");
+
+var _hooks = require("../hooks");
+
+var BodyRow = function BodyRow(_ref) {
+  var children = _ref.children,
+      keyboardShortcuts = _ref.keyboardShortcuts,
+      row = _ref.row,
+      rowIndex = _ref.rowIndex,
+      onRowSort = _ref.onRowSort,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "keyboardShortcuts", "row", "rowIndex", "onRowSort"]);
+
+  var _useHover = (0, _hooks.useHover)(),
+      hover = _useHover.hover,
+      hoverProps = _useHover.hoverProps;
+
+  var _useKeyboardShortcuts = (0, _hooks.useKeyboardShortcuts)(keyboardShortcuts, {
+    row: row,
+    rowIndex: rowIndex
+  }),
+      bindKeyboardShortcuts = _useKeyboardShortcuts.bindKeyboardShortcuts,
+      unbindKeyboardShortcuts = _useKeyboardShortcuts.unbindKeyboardShortcuts;
+
+  var childrenToRender = function childrenToRender(provided) {
+    return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+      innerRef: provided.innerRef,
+      role: "row",
+      axis: "horizontal",
+      borderColor: "grey-3",
+      backgroundColor: "white"
+    }, restProps, provided.draggableProps, (0, _utils.composeMultipleEvents)({
+      onMouseEnter: bindKeyboardShortcuts,
+      onMouseLeave: unbindKeyboardShortcuts
+    }, hoverProps)), children({
+      isRowHovered: hover,
+      dragHandleProps: provided.dragHandleProps
+    }));
+  };
+
+  if (onRowSort) {
+    return /*#__PURE__*/_react["default"].createElement(_DragDrop["default"].Draggable, {
+      draggableId: rowIndex.toString(),
+      index: rowIndex
+    }, function (provided) {
+      return childrenToRender(provided);
+    });
+  } else {
+    return childrenToRender({});
+  }
+};
+
+var _default = BodyRow;
+exports["default"] = _default;

package/dist/cjs/Table/CheckboxCell.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Checkbox = _interopRequireDefault(require("../Checkbox"));
+
+// only allow checkbox to catch event to prevent firing anchor when using getRowLink
+var stopPropagation = function stopPropagation(originalEvent) {
+  return function (event) {
+    event.stopPropagation();
+
+    if (originalEvent) {
+      originalEvent(event);
+    }
+  };
+};
+
+function CheckboxCell(_ref) {
+  var onClick = _ref.onClick,
+      onKeyDown = _ref.onKeyDown,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["onClick", "onKeyDown"]);
+  return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], (0, _extends2["default"])({
+    size: "lg",
+    label: null,
+    onClick: stopPropagation(onClick),
+    onKeyDown: stopPropagation(onKeyDown)
+  }, restProps));
+}
+
+var _default = CheckboxCell;
+exports["default"] = _default;

package/dist/cjs/Table/ColumnPicker.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Checkbox = _interopRequireDefault(require("../Checkbox"));
+
+var _Dropdown = _interopRequireDefault(require("../Dropdown"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var noop = function noop() {
+  return null;
+};
+
+function ColumnPicker(_ref) {
+  var _ref$columns = _ref.columns,
+      columns = _ref$columns === void 0 ? [] : _ref$columns,
+      _ref$hiddenColumnIds = _ref.hiddenColumnIds,
+      hiddenColumnIds = _ref$hiddenColumnIds === void 0 ? [] : _ref$hiddenColumnIds,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["columns", "hiddenColumnIds", "onChange"]);
+  return /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], (0, _extends2["default"])({
+    variant: "outline",
+    icon: {
+      name: 'columns'
+    },
+    tooltip: {
+      title: 'Filter Columns'
+    },
+    placement: "bottom-end",
+    closeOnSelect: false,
+    onSelect: function onSelect(columnId) {
+      var newHiddenColumnIds = [].concat(hiddenColumnIds);
+      var indexPosition = newHiddenColumnIds.indexOf(columnId);
+
+      if (indexPosition > -1) {
+        newHiddenColumnIds.splice(indexPosition, 1);
+      } else {
+        newHiddenColumnIds.push(columnId);
+      }
+
+      onChange({
+        columnId: columnId,
+        hiddenColumnIds: newHiddenColumnIds
+      });
+    }
+  }, restProps), columns.filter(function (column) {
+    return !column.alwaysVisible;
+  }).map(function (column) {
+    return /*#__PURE__*/_react["default"].createElement(_Dropdown["default"].Item, {
+      key: column.id,
+      value: column.id
+    }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: null,
+      checked: hiddenColumnIds.indexOf(column.id) === -1,
+      onChange: noop,
+      marginRight: 1
+    }), /*#__PURE__*/_react["default"].createElement(_Text["default"], null, column.label || column.header));
+  }));
+}
+
+var _default = ColumnPicker;
+exports["default"] = _default;

package/dist/cjs/Table/DateCell.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _dateFns = require("date-fns");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+function DateCell(_ref) {
+  var date = _ref.date,
+      showTime = _ref.showTime;
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], null, (0, _dateFns.format)(date, showTime ? 'MMM dd, yyyy h:mm:A' : 'MMM dd, yyyy'));
+}
+
+var _default = DateCell;
+exports["default"] = _default;

package/dist/cjs/Table/DragCell.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var DragCell = function DragCell(_ref) {
+  var css = _ref.css,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["css"]);
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    "aria-hidden": true,
+    axis: "horizontal",
+    alignment: "center",
+    distribution: "center",
+    shrink: 0,
+    grow: 0,
+    width: 6,
+    basis: 6,
+    backgroundColor: "inherit",
+    position: "sticky",
+    left: 0,
+    zIndex: 35,
+    css: _objectSpread({
+      '@media print': {
+        display: 'none !important'
+      }
+    }, css)
+  }, restProps));
+};
+
+var _default = DragCell;
+exports["default"] = _default;

package/dist/cjs/Table/DragHandle.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var DragHandle = function DragHandle() {
+  return /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    name: "drag-handle",
+    size: "sm",
+    color: "foregroundTertiary",
+    cursor: "grab"
+  });
+};
+
+var _default = DragHandle;
+exports["default"] = _default;

package/dist/cjs/Table/Header.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var Header = function Header(_ref) {
+  var css = _ref.css,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["css"]);
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
+    role: "rowgroup",
+    flexShrink: 0,
+    borderBottomWidth: 1,
+    borderColor: "grey-3",
+    position: "sticky",
+    top: 0,
+    zIndex: 15,
+    overflow: "hidden",
+    css: _objectSpread({
+      '@media print': {
+        overflow: 'visible',
+        position: 'relative'
+      }
+    }, css)
+  }, restProps));
+};
+
+var _default = Header;
+exports["default"] = _default;

package/dist/cjs/Table/HeaderCell.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var HeaderCell = function HeaderCell(props) {
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    role: "columnheader",
+    axis: "horizontal",
+    alignment: "end",
+    shrink: 0,
+    backgroundColor: "inherit",
+    userSelect: "none"
+  }, props));
+};
+
+var _default = HeaderCell;
+exports["default"] = _default;

package/dist/cjs/Table/HeaderInnerCell.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var HeaderInnerCell = function HeaderInnerCell(_ref) {
+  var children = _ref.children,
+      column = _ref.column,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "column"]);
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    axis: "horizontal",
+    alignment: "center",
+    paddingHorizontal: 1.5,
+    transformOrigin: "left center",
+    zIndex: 1
+  }, restProps), children);
+};
+
+var _default = HeaderInnerCell;
+exports["default"] = _default;

package/dist/cjs/Table/HeaderRow.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var HeaderRow = function HeaderRow(props) {
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    role: "row",
+    axis: "horizontal",
+    alignment: "end",
+    backgroundColor: "inherit"
+  }, props));
+};
+
+var _default = HeaderRow;
+exports["default"] = _default;

package/dist/cjs/Table/NavigationArrow.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _system = require("../system");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var SUPPORTS_CSS_STICKY = typeof window !== 'undefined' && window.CSS && window.CSS.supports;
+
+function NavigationArrow(_ref) {
+  var _outerProps, _innerProps, _objectSpread2;
+
+  var direction = _ref.direction,
+      headerHeight = _ref.headerHeight,
+      offsets = _ref.offsets,
+      progress = _ref.progress,
+      mouseTouchHandlers = _ref.mouseTouchHandlers;
+  var colorBase = (0, _system.parseColor)({
+    base: 'grey-0',
+    alpha: 0
+  });
+  var color = (0, _system.parseColor)('grey-0');
+  var side = direction === -1 ? 'left' : 'right';
+  var outerProps = (_outerProps = {
+    'aria-hidden': true,
+    position: SUPPORTS_CSS_STICKY ? 'sticky' : 'absolute',
+    top: 0
+  }, _outerProps[side] = offsets[side] + 'px', _outerProps.zIndex = 25, _outerProps.width = 0, _outerProps.css = {
+    '@media print': {
+      display: 'none'
+    }
+  }, _outerProps);
+  var innerProps = (_innerProps = {
+    position: 'absolute',
+    top: 0
+  }, _innerProps[side] = 0, _innerProps.height = headerHeight + 'px', _innerProps.transition = 'all 300ms ease', _innerProps);
+
+  var buttonProps = _objectSpread((_objectSpread2 = {
+    icon: {
+      name: "caret-" + side
+    },
+    title: "navigate " + side,
+    theme: false,
+    disabled: direction === 1 ? progress >= 0.99 : progress <= 0,
+    height: '100%'
+  }, _objectSpread2[direction === -1 ? 'paddingLeft' : 'paddingRight'] = 1, _objectSpread2[direction === -1 ? 'paddingRight' : 'paddingLeft'] = 2, _objectSpread2), mouseTouchHandlers(direction));
+
+  var translateY = SUPPORTS_CSS_STICKY ? -100 : 0;
+
+  if (direction === 1) {
+    innerProps.opacity = progress >= 0.99 || progress === null ? 0 : 1;
+    innerProps.transform = "translate(" + (progress >= 0.99 ? 100 : 0) + "%, " + translateY + "%)";
+    innerProps.background = "linear-gradient(-90deg, " + color + " 24px, " + colorBase + ")";
+  } else {
+    innerProps.opacity = progress <= 0 ? 0 : 1;
+    innerProps.transform = "translate(" + (progress <= 0 ? -100 : 0) + "%, " + translateY + "%)";
+    innerProps.background = "linear-gradient(90deg, " + color + " 24px, " + colorBase + ")";
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], outerProps, /*#__PURE__*/_react["default"].createElement(_Box["default"], innerProps, /*#__PURE__*/_react["default"].createElement(_Button["default"], buttonProps)));
+}
+
+var _default = NavigationArrow;
+exports["default"] = _default;

package/dist/cjs/Table/ScrollShadow.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _popcorn = require("@popmotion/popcorn");
+
+var leftScrollShadow = (0, _popcorn.interpolate)([0, 0.2], [0, 1]);
+var rightScrollShadow = (0, _popcorn.interpolate)([0.8, 1], [1, 0]);
+
+function ScrollShadow(_ref) {
+  var _ref$offset = _ref.offset,
+      offset = _ref$offset === void 0 ? 0 : _ref$offset,
+      position = _ref.position,
+      progress = _ref.progress;
+  var scrollProgress = isNaN(progress) ? 0 : progress;
+  var style = {
+    width: 10,
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    zIndex: 30,
+    pointerEvents: 'none'
+  };
+
+  if (position === 'left') {
+    style.left = offset;
+    style.background = 'linear-gradient(-90deg, transparent 4px, rgba(125, 125, 125, 0.15))';
+    style.opacity = leftScrollShadow(scrollProgress);
+  } else {
+    style.right = offset;
+    style.background = 'linear-gradient(90deg, transparent 4px, rgba(125, 125, 125, 0.15))';
+    style.opacity = rightScrollShadow(scrollProgress);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    "aria-hidden": true,
+    style: style
+  });
+}
+
+var _default = ScrollShadow;
+exports["default"] = _default;

package/dist/cjs/Table/SubRowToggleCell.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var SubRowToggleCell = function SubRowToggleCell(_ref) {
+  var contentsHidden = _ref.contentsHidden,
+      rowIndex = _ref.rowIndex,
+      toggled = _ref.toggled,
+      height = _ref.height,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["contentsHidden", "rowIndex", "toggled", "height"]);
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    axis: "horizontal",
+    alignment: "center",
+    distribution: "center",
+    shrink: 0,
+    grow: 0,
+    basis: 6,
+    width: 6,
+    height: height,
+    backgroundColor: "inherit",
+    zIndex: 35
+  }, !contentsHidden && /*#__PURE__*/_react["default"].createElement(_Button["default"] // TODO: expose for better accessibility
+  , (0, _extends2["default"])({
+    theme: false,
+    title: "Toggle row",
+    icon: {
+      name: 'arrow-down'
+    },
+    transform: !toggled && 'rotate(-90deg)'
+  }, restProps)));
+};
+
+var _default = SubRowToggleCell;
+exports["default"] = _default;