@planningcenter/tapestry-react 2.10.0-rc.9 → 2.10.0

package/dist/cjs/TabNav/Tab.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.Tab = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _ = require("..");
+
+var _StackView = require("../StackView");
+
+var _utils = require("../system/utils");
+
+var _designTokens = require("../designTokens");
+
+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 _designTokens$tabNav = _designTokens.designTokens.tabNav,
+    tab = _designTokens$tabNav.tab,
+    _designTokens$tabNav$ = _designTokens$tabNav.tab,
+    desktop = _designTokens$tabNav$.desktop,
+    mobile = _designTokens$tabNav$.mobile;
+
+var Tab = function Tab(_ref) {
+  var _ref$badge = _ref.badge,
+      badge = _ref$badge === void 0 ? undefined : _ref$badge,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$iconLeft = _ref.iconLeft,
+      iconLeft = _ref$iconLeft === void 0 ? undefined : _ref$iconLeft,
+      _ref$iconRight = _ref.iconRight,
+      iconRight = _ref$iconRight === void 0 ? undefined : _ref$iconRight,
+      _ref$isMobile = _ref.isMobile,
+      isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      label = _ref.label,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? undefined : _ref$onClick,
+      selectedTabBackgroundColor = _ref.selectedTabBackgroundColor;
+  var defaultIconProps = {
+    color: tab.iconColor
+  };
+  var iconLeftProps = typeof iconLeft === 'string' ? _objectSpread(_objectSpread({}, defaultIconProps), {}, {
+    name: iconLeft
+  }) : _objectSpread(_objectSpread({}, defaultIconProps), iconLeft);
+  var iconRightProps = typeof iconRight === 'string' ? _objectSpread(_objectSpread({}, defaultIconProps), {}, {
+    name: iconRight
+  }) : _objectSpread(_objectSpread({}, defaultIconProps), iconRight);
+
+  var desktopStyles = _objectSpread({
+    backgroundColor: isSelected && !disabled ? selectedTabBackgroundColor : desktop.defaultBackgroundColor,
+    fontSize: desktop.fontSize + "px",
+    height: (0, _utils.convertToBaseUnit)(desktop.height),
+    paddingHorizontal: (0, _utils.convertToBaseUnit)(desktop.paddingX),
+    radiusTop: desktop.borderRadiusTop
+  }, !disabled && {
+    active: {
+      backgroundColor: selectedTabBackgroundColor,
+      color: desktop.activeTextColor
+    },
+    hover: {
+      backgroundColor: selectedTabBackgroundColor,
+      color: desktop.hoverTextColor
+    }
+  });
+
+  var mobileStyles = {
+    borderBottomColor: isSelected ? 'primary' : 'transparent',
+    borderBottomStyle: 'solid',
+    borderBottomWidth: mobile.borderBottomWidth,
+    fontSize: mobile.fontSize + "px",
+    height: (0, _utils.convertToBaseUnit)(mobile.height),
+    paddingBottom: (0, _utils.convertToBaseUnit)(mobile.paddingBottom),
+    paddingTop: (0, _utils.convertToBaseUnit)(mobile.paddingTop)
+  };
+  return /*#__PURE__*/_react["default"].createElement(_StackView.StackView, (0, _extends2["default"])({
+    alignment: "center",
+    "aria-disabled": disabled,
+    axis: "horizontal",
+    color: disabled ? tab.disabledTextColor : isSelected ? tab.selectedTextColor : tab.textColor,
+    cursor: disabled ? 'not-allowed' : isSelected ? 'default' : 'pointer',
+    role: "tab",
+    spacing: 1,
+    userSelect: "none",
+    onClick: onClick
+  }, isMobile ? mobileStyles : desktopStyles), iconLeft && /*#__PURE__*/_react["default"].createElement(_.Icon, iconLeftProps), label, badge && /*#__PURE__*/_react["default"].createElement(_StackView.StackView, {
+    backgroundColor: tab.badgeBackgroundColor,
+    distribution: "center",
+    paddingHorizontal: 1,
+    radius: "pill"
+  }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+    color: tab.badgeTextColor,
+    size: tab.badgeFontSize + "px"
+  }, badge)), iconRight && /*#__PURE__*/_react["default"].createElement(_.Icon, iconRightProps));
+};
+
+exports.Tab = Tab;
+Tab.displayName = 'TabNav.Tab';
+var _default = Tab;
+exports["default"] = _default;

package/dist/cjs/TabNav/TabNav.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.TabNav = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _StackView = require("../StackView");
+
+var _hooks = require("../hooks");
+
+var _Tab = require("./Tab");
+
+var _utils = require("../system/utils");
+
+var _designTokens = require("../designTokens");
+
+var _designTokens$tabNav = _designTokens.designTokens.tabNav,
+    desktop = _designTokens$tabNav.desktop,
+    mobile = _designTokens$tabNav.mobile;
+
+var TabNav = function TabNav(_ref) {
+  var _ref$selectedTabBackg = _ref.selectedTabBackgroundColor,
+      selectedTabBackgroundColor = _ref$selectedTabBackg === void 0 ? desktop.selectedTabBackgroundColor : _ref$selectedTabBackg,
+      tabs = _ref.tabs;
+  var isMobile = (0, _hooks.useMediaQuery)('(max-width: 600px)');
+  var desktopStyles = {
+    paddingHorizontal: (0, _utils.convertToBaseUnit)(desktop.paddingX),
+    spacing: (0, _utils.convertToBaseUnit)(desktop.spacing)
+  };
+  var mobileStyles = {
+    backgroundColor: mobile.backgroundColor,
+    borderBottomColor: mobile.borderBottomColor,
+    borderBottomStyle: mobile.borderBottomStyle,
+    borderBottomWidth: mobile.borderBottomWidth,
+    paddingHorizontal: (0, _utils.convertToBaseUnit)(mobile.paddingX),
+    spacing: (0, _utils.convertToBaseUnit)(mobile.spacing)
+  };
+  return /*#__PURE__*/_react["default"].createElement(_StackView.StackView, (0, _extends2["default"])({
+    axis: "horizontal",
+    overflowX: "scroll",
+    role: "tablist",
+    spacing: 2.5,
+    width: "100%"
+  }, isMobile ? mobileStyles : desktopStyles), tabs.map(function (tab, index) {
+    return /*#__PURE__*/_react["default"].createElement(_Tab.Tab, (0, _extends2["default"])({
+      key: index,
+      isMobile: isMobile,
+      selectedTabBackgroundColor: selectedTabBackgroundColor
+    }, tab));
+  }));
+};
+
+exports.TabNav = TabNav;
+var _default = TabNav;
+exports["default"] = _default;

package/dist/cjs/TabNav/TabNav.test.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _TabNav = _interopRequireDefault(require("./TabNav"));
+
+describe('TabNav component', function () {
+  it('should render with default properties', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TabNav["default"], {
+      tabs: [{
+        label: 'Tab 1'
+      }]
+    })),
+        getByRole = _render.getByRole;
+
+    var tabNav = getByRole('tablist');
+    expect(tabNav).toBeInTheDocument();
+    var tab = (0, _react2.getAllByRole)(tabNav, 'tab')[0];
+    expect(tab).toBeInTheDocument();
+    expect(tab).toHaveTextContent('Tab 1');
+  });
+});
+describe('TabNav component with multiple tabs', function () {
+  it('should render with default properties', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TabNav["default"], {
+      tabs: [{
+        label: 'Tab 1'
+      }, {
+        label: 'Tab 2'
+      }, {
+        label: 'Tab 3'
+      }, {
+        label: 'Tab 4'
+      }]
+    })),
+        getByRole = _render2.getByRole;
+
+    var tabNav = getByRole('tablist');
+    expect(tabNav).toBeInTheDocument();
+    var tabs = (0, _react2.getAllByRole)(tabNav, 'tab');
+    expect(tabs).toHaveLength(4);
+    expect(tabs[0]).toHaveTextContent('Tab 1');
+    expect(tabs[1]).toHaveTextContent('Tab 2');
+    expect(tabs[2]).toHaveTextContent('Tab 3');
+    expect(tabs[3]).toHaveTextContent('Tab 4');
+  });
+});

package/dist/cjs/TabNav/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _TabNav = require("./TabNav");
+
+exports["default"] = _TabNav.TabNav;
+Object.keys(_TabNav).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TabNav[key]) return;
+  exports[key] = _TabNav[key];
+});

package/dist/cjs/Table/AnimateScroll.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("react");
+
+var _tinySpring = _interopRequireDefault(require("tiny-spring"));
+
+var _stylefire = _interopRequireDefault(require("stylefire"));
+
+var AnimateScroll = /*#__PURE__*/function (_PureComponent) {
+  (0, _inheritsLoose2["default"])(AnimateScroll, _PureComponent);
+
+  function AnimateScroll() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setRef", function (node) {
+      if (!_this.scroller) {
+        _this.scroller = (0, _stylefire["default"])(node);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setScroll", function (side, amount) {
+      var spring = (0, _tinySpring["default"])(_this.scroller.get(side), {
+        stiffness: 500,
+        damping: 50
+      });
+      spring.onUpdate(function (value) {
+        var _this$scroller$set;
+
+        return _this.scroller.set((_this$scroller$set = {}, _this$scroller$set[side] = value, _this$scroller$set));
+      });
+      spring.transitionTo(amount);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setScrollX", function (amount) {
+      _this.setScroll('scrollLeft', amount);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setScrollY", function (amount) {
+      _this.setScroll('scrollTop', amount);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "moveScroll", function (side, amount) {
+      _this.setScroll(side, _this.scroller.get(side) + amount);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "moveScrollX", function (amount) {
+      _this.moveScroll('scrollLeft', amount);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "moveScrollY", function (amount) {
+      _this.moveScroll('scrollTop', amount);
+    });
+    return _this;
+  }
+
+  var _proto = AnimateScroll.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    if (!this.scroller) {
+      this.scroller = (0, _stylefire["default"])(window);
+    }
+  };
+
+  _proto.render = function render() {
+    return this.props.children({
+      ref: this.setRef,
+      moveScrollX: this.moveScrollX,
+      moveScrollY: this.moveScrollY,
+      setScrollX: this.setScrollX,
+      setScrollY: this.setScrollY
+    });
+  };
+
+  return AnimateScroll;
+}(_react.PureComponent);
+
+var _default = AnimateScroll;
+exports["default"] = _default;

package/dist/cjs/Table/AvatarCell.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 _react = _interopRequireDefault(require("react"));
+
+var _Avatar = _interopRequireDefault(require("../Avatar"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _hooks = require("../hooks");
+
+var _CheckboxCell = _interopRequireDefault(require("./CheckboxCell"));
+
+function AvatarCell(_ref) {
+  var source = _ref.source,
+      checked = _ref.checked,
+      onChange = _ref.onChange;
+
+  var _useHover = (0, _hooks.useHover)(),
+      hover = _useHover.hover,
+      hoverProps = _useHover.hoverProps;
+
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    alignment: "center",
+    distribution: "center",
+    width: 4,
+    height: 4
+  }, hoverProps), hover || checked ? /*#__PURE__*/_react["default"].createElement(_CheckboxCell["default"], {
+    onChange: onChange,
+    checked: checked
+  }) : /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+    source: source,
+    size: "sm"
+  }));
+}
+
+var _default = AvatarCell;
+exports["default"] = _default;

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: 'general.threeVerticalBars'
+    },
+    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;