@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/cjs/Combobox/ComboboxPopover.js

@@ -0,0 +1,250 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+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 _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 = _interopRequireWildcard(require("react"));
+
+var _ItemList = require("../ItemList");
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _FocusGroup = _interopRequireDefault(require("../FocusGroup"));
+
+var _Menu = _interopRequireDefault(require("../Menu"));
+
+var _Popover = _interopRequireDefault(require("../Popover"));
+
+var _utils = require("../utils");
+
+var _ComboboxInput = _interopRequireDefault(require("./ComboboxInput"));
+
+var ComboboxPopover = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(ComboboxPopover, _Component);
+
+  function ComboboxPopover() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      isPopoverOpen: _this.props.defaultOpen || false
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "id", (0, _utils.generateId)('combobox'));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputNode", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputTouched", false);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "closeRequestId", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setItemListRef", function (component) {
+      _this.itemList = component;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setInputRef", function (component) {
+      _this.input = component;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "openPopover", function () {
+      _this.setState({
+        isPopoverOpen: true
+      }, function () {
+        _this.itemList.setHighlightedIndex(0, {
+          maybeScrollIntoView: false
+        });
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "closePopover", function () {
+      // push to next event stack because Popover events are messed up :(
+      _this.closeRequestId = requestAnimationFrame(function () {
+        _this.setState({
+          isPopoverOpen: false
+        }, function () {
+          _this.itemList.clearHighlightedIndex();
+        });
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleBlur", function (event) {
+      _this.closePopover();
+
+      _this.inputTouched = false;
+
+      if (_this.props.onBlur) {
+        _this.props.onBlur(event);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSelect", function (event) {
+      if (_this.props.closeOnSelect) {
+        _this.closePopover();
+      }
+
+      if (_this.props.onSelect) {
+        _this.props.onSelect(event);
+      }
+    });
+    return _this;
+  }
+
+  var _proto = ComboboxPopover.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
+    if (lastProps.disabled !== lastProps.disabled && this.props.disabled === true) {
+      this.closePopover();
+    }
+
+    var isComboboxFocused = document.activeElement === this.inputNode;
+
+    if (isComboboxFocused && lastProps.value !== this.props.value && this.props.value.length > 0 && !this.state.isPopoverOpen) {
+      this.openPopover();
+    }
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    if (this.closeRequestId) {
+      cancelAnimationFrame(this.closeRequestId);
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        children = _this$props.children,
+        closeButton = _this$props.closeButton,
+        closeOnSelect = _this$props.closeOnSelect,
+        disabled = _this$props.disabled,
+        dropdownButton = _this$props.dropdownButton,
+        _innerRef = _this$props.innerRef,
+        defaultOpen = _this$props.defaultOpen,
+        lockScrollWhileOpen = _this$props.lockScrollWhileOpen,
+        onClear = _this$props.onClear,
+        onBlur = _this$props.onBlur,
+        _onFocus = _this$props.onFocus,
+        onSelect = _this$props.onSelect,
+        openOnFocus = _this$props.openOnFocus,
+        placement = _this$props.placement,
+        popoverProps = _this$props.popoverProps,
+        relativeTo = _this$props.relativeTo,
+        renderTo = _this$props.renderTo,
+        value = _this$props.value,
+        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["children", "closeButton", "closeOnSelect", "disabled", "dropdownButton", "innerRef", "defaultOpen", "lockScrollWhileOpen", "onClear", "onBlur", "onFocus", "onSelect", "openOnFocus", "placement", "popoverProps", "relativeTo", "renderTo", "value"]);
+    var isPopoverOpen = this.state.isPopoverOpen;
+    var valuePresent = value && value.length > 0;
+    return /*#__PURE__*/_react["default"].createElement(_FocusGroup["default"], {
+      onBlur: this.handleBlur
+    }, function (_ref) {
+      var requestBlur = _ref.requestBlur,
+          setRef = _ref.setRef;
+      return /*#__PURE__*/_react["default"].createElement(_ItemList.ItemList, {
+        ref: _this2.setItemListRef,
+        onSelect: _this2.handleSelect
+      }, function (_ref2) {
+        var clearHighlightedIndex = _ref2.clearHighlightedIndex;
+        return /*#__PURE__*/_react["default"].createElement(_Popover["default"], (0, _extends2["default"])({
+          keepInView: false,
+          matchWidths: true,
+          minWidth: 16
+        }, popoverProps, {
+          as: _Menu["default"],
+          ref: function ref(component) {
+            _this2.popover = component;
+          },
+          innerRef: function innerRef(node) {
+            setRef(_this2.id + "-popover")(node);
+          },
+          role: "menu",
+          tabIndex: -1,
+          elevation: 2,
+          lockScrollWhileOpen: lockScrollWhileOpen,
+          placement: placement,
+          relativeTo: relativeTo,
+          renderTo: renderTo,
+          open: isPopoverOpen,
+          onBlur: requestBlur,
+          anchorElement: function anchorElement(anchorProps) {
+            return /*#__PURE__*/_react["default"].createElement(_ComboboxInput["default"], (0, _extends2["default"])({
+              ref: _this2.setInputRef,
+              innerRef: function innerRef(node) {
+                var _anchorProps$innerRef;
+
+                if (typeof anchorProps.innerRef === 'function') {
+                  anchorProps.innerRef(node);
+                } else if ((_anchorProps$innerRef = anchorProps.innerRef) != null && _anchorProps$innerRef.current) {
+                  anchorProps.innerRef.current = node;
+                }
+
+                _this2.inputNode = node ? node.querySelector('input') : null;
+                setRef(_this2.id + "-input")(node);
+
+                if (_innerRef) {
+                  _innerRef(node);
+                }
+              },
+              value: value,
+              onFocus: function onFocus(event) {
+                if (closeOnSelect ? openOnFocus && !_this2.inputTouched : openOnFocus) {
+                  _this2.openPopover();
+                }
+
+                _this2.inputTouched = true;
+                _onFocus && _onFocus(event);
+              },
+              onBlur: function onBlur(event) {
+                requestBlur(event);
+                clearHighlightedIndex();
+              },
+              onClear: valuePresent ? onClear : undefined,
+              renderRight: closeButton ? /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+                disabled: disabled,
+                icon: {
+                  name: 'close'
+                },
+                title: "close options",
+                theme: false
+              }, closeButton)) : dropdownButton ? /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+                disabled: disabled,
+                icon: {
+                  name: isPopoverOpen ? 'close' : 'arrow-down'
+                },
+                title: isPopoverOpen ? 'close options' : 'open options',
+                theme: false,
+                onClick: function onClick() {
+                  if (isPopoverOpen) {
+                    _this2.closePopover();
+                  } else {
+                    _this2.openPopover();
+                  }
+
+                  _this2.input.focus();
+                }
+              }) : null,
+              disabled: disabled
+            }, restProps));
+          }
+        }), children);
+      });
+    });
+  };
+
+  return ComboboxPopover;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(ComboboxPopover, "displayName", 'Combobox.Popover');
+(0, _defineProperty2["default"])(ComboboxPopover, "defaultProps", {
+  closeOnSelect: false,
+  openOnFocus: false
+});
+var _default = ComboboxPopover;
+exports["default"] = _default;

package/dist/cjs/Combobox/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Combobox = _interopRequireDefault(require("./Combobox"));
+
+var _default = _Combobox["default"];
+exports["default"] = _default;

package/dist/cjs/DataTable/DataTable.js

@@ -0,0 +1,271 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _DragDrop = _interopRequireDefault(require("../DragDrop"));
+
+var _Pagination = _interopRequireDefault(require("../Pagination"));
+
+var _Spinner = _interopRequireDefault(require("../Spinner"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _Summary = _interopRequireDefault(require("../Summary"));
+
+var _system = require("../system");
+
+var _hooks = require("../hooks");
+
+var _utils = require("../utils");
+
+var _components = require("./components");
+
+var _hooks2 = require("./hooks");
+
+var _utils2 = require("./utils");
+
+var defaultAccessibility = {
+  toggleAllSubRowsTooltipTitle: function toggleAllSubRowsTooltipTitle(allSubRowsOpen) {
+    return allSubRowsOpen ? 'Close all sub rows' : 'Open all sub rows';
+  }
+};
+var defaultHiddenColumnIds = [];
+
+var DataTable = function DataTable(props) {
+  var _props$accessibility = props.accessibility,
+      accessibility = _props$accessibility === void 0 ? defaultAccessibility : _props$accessibility,
+      innerBodyRef = props.innerBodyRef,
+      _props$canCollapseSub = props.canCollapseSubRows,
+      canCollapseSubRows = _props$canCollapseSub === void 0 ? true : _props$canCollapseSub,
+      columns = props.columns,
+      currentPage = props.currentPage,
+      data = props.data,
+      dataTableRef = props.dataTableRef,
+      defaultSort = props.defaultSort,
+      defaultAllSubRowsOpen = props.defaultAllSubRowsOpen,
+      droppableId = props.droppableId,
+      empty = props.empty,
+      _props$getRowId = props.getRowId,
+      getRowId = _props$getRowId === void 0 ? function (rowData, rowIndex) {
+    return rowData.id || (droppableId === undefined ? rowIndex : droppableId + "-" + rowIndex);
+  } : _props$getRowId,
+      getRowLink = props.getRowLink,
+      getSubData = props.getSubData,
+      _props$hiddenColumnId = props.hiddenColumnIds,
+      hiddenColumnIds = _props$hiddenColumnId === void 0 ? defaultHiddenColumnIds : _props$hiddenColumnId,
+      keyboardShortcuts = props.keyboardShortcuts,
+      loading = props.loading,
+      loadingTitle = props.loadingTitle,
+      onColumnSort = props.onColumnSort,
+      onDragStart = props.onDragStart,
+      onDragEnd = props.onDragEnd,
+      onDrop = props.onDrop,
+      onPageChange = props.onPageChange,
+      onRowClick = props.onRowClick,
+      onRowSort = props.onRowSort,
+      sourceOnly = props.sourceOnly,
+      totalPages = props.totalPages,
+      _props$variant = props.variant,
+      variant = _props$variant === void 0 ? {} : _props$variant;
+  var css = (0, _system.useCss)();
+  var tableId = (0, _hooks.useId)('table');
+
+  var hasParentDragDrop = _DragDrop["default"].useDragDrop();
+
+  var isLoadingOrEmpty = loading || data.length <= 0;
+  var headerRef = (0, _react.useRef)();
+  var bodyRef = (0, _react.useRef)();
+  var footerRef = (0, _react.useRef)();
+  var scrollRefs = [headerRef, bodyRef];
+  var draggable = sourceOnly || onRowSort || onDrop;
+  var getVariant = (0, _hooks2.useVariants)(variant);
+  var collapsibleRows = (0, _hooks2.useCollapsibleRows)(data, defaultAllSubRowsOpen);
+  var hasSubRows = Boolean(canCollapseSubRows && getSubData);
+  var parsedColumns = (0, _react.useMemo)(function () {
+    return (0, _utils2.getParsedColumns)({
+      accessibility: accessibility,
+      hasSubRows: hasSubRows,
+      columns: columns,
+      hiddenColumnIds: hiddenColumnIds,
+      draggable: draggable
+    });
+  }, [columns, hasSubRows, hiddenColumnIds, draggable]);
+  var hasFooterColumns = parsedColumns.map(Object.keys).some(function (keys) {
+    return keys.some(function (key) {
+      return key === 'footer';
+    });
+  });
+
+  var _useColumnWidths = (0, _hooks2.useColumnWidths)({
+    columns: parsedColumns,
+    data: data,
+    loading: loading,
+    bodyRef: bodyRef
+  }),
+      columnWidths = _useColumnWidths.columnWidths,
+      getColumnRef = _useColumnWidths.getColumnRef;
+
+  var columnSort = (0, _hooks2.useColumnSort)({
+    defaultSort: defaultSort,
+    onColumnSort: onColumnSort
+  });
+  var shadowsToRender = (0, _hooks2.useScrollShadows)(bodyRef);
+  var bodyRowsProps = {
+    columns: parsedColumns,
+    collapsibleRows: collapsibleRows,
+    columnWidths: columnWidths,
+    data: data,
+    draggable: draggable,
+    getColumnRef: getColumnRef,
+    getRowId: getRowId,
+    getRowLink: getRowLink,
+    getSubData: getSubData,
+    getVariant: getVariant,
+    keyboardShortcuts: keyboardShortcuts,
+    onRowClick: onRowClick
+  };
+  var bodyToRender;
+
+  if (hasFooterColumns) {
+    scrollRefs.push(footerRef);
+  }
+
+  _hooks2.useScrollSync.apply(void 0, scrollRefs);
+
+  (0, _react.useImperativeHandle)(dataTableRef, function () {
+    return collapsibleRows;
+  });
+
+  if (typeof innerBodyRef === 'function') {
+    innerBodyRef(bodyRef);
+  }
+
+  if (hasParentDragDrop || draggable) {
+    bodyToRender = /*#__PURE__*/_react["default"].createElement(_DragDrop["default"].Provider, {
+      onDragEnd: function onDragEnd(_ref) {
+        var source = _ref.source,
+            destination = _ref.destination;
+
+        if (onRowSort && destination) {
+          onRowSort((0, _utils.reorderArray)({
+            list: data,
+            startIndex: source.index,
+            endIndex: destination.index
+          }));
+        }
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_DragDrop["default"].Droppable, {
+      droppableId: droppableId === undefined ? tableId : droppableId,
+      sourceOnly: sourceOnly,
+      onDragStart: onDragStart,
+      onDragEnd: onDragEnd,
+      onDrop: onDrop
+    }, function (provided) {
+      return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+        ref: function ref(_ref2) {
+          bodyRef.current = _ref2;
+          provided.innerRef(_ref2);
+        },
+        role: "rowgroup",
+        className: css(getVariant('body'))
+      }, provided.droppableProps), /*#__PURE__*/_react["default"].createElement(_components.BodyRows, bodyRowsProps), provided.placeholder);
+    }));
+  } else {
+    bodyToRender = /*#__PURE__*/_react["default"].createElement("div", {
+      ref: bodyRef,
+      role: "rowgroup",
+      className: css(getVariant('body'))
+    }, /*#__PURE__*/_react["default"].createElement(_components.BodyRows, bodyRowsProps));
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, isLoadingOrEmpty && /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    grow: 1,
+    alignment: "center",
+    distribution: "center",
+    minHeight: "100%",
+    paddingVertical: 8
+  }, loading ? /*#__PURE__*/_react["default"].createElement(_Summary["default"], {
+    image: /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
+      size: "xl"
+    }),
+    title: loadingTitle
+  }) : empty), /*#__PURE__*/_react["default"].createElement(_hooks2.CollapsibleRowsContext.Provider, {
+    value: collapsibleRows
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    role: getRowLink ? undefined : 'grid',
+    style: isLoadingOrEmpty ? {
+      display: 'none'
+    } : undefined,
+    className: "uikit-reset " + css({
+      position: 'relative'
+    })
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    ref: headerRef,
+    role: "rowgroup",
+    className: css(getVariant('header'))
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    role: "row",
+    className: css(getVariant('headerRow'))
+  }, parsedColumns.map(function (column, columnIndex) {
+    var cellVariantClassName = getVariant('headerCell', {
+      columnIndex: columnIndex,
+      isSortable: column.sortable
+    });
+    return /*#__PURE__*/_react["default"].createElement(_components.HeaderCell, {
+      key: columnIndex,
+      cellRef: getColumnRef(columnIndex + ".0"),
+      column: column,
+      columnIndex: columnIndex,
+      columnSort: columnSort,
+      className: "uikit-reset " + css([].concat(cellVariantClassName, [column.css]))
+    });
+  }))), bodyToRender, hasFooterColumns && /*#__PURE__*/_react["default"].createElement("div", {
+    ref: footerRef,
+    role: "rowgroup",
+    className: css(getVariant('footer'))
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    role: "row",
+    className: css(getVariant('footerRow'))
+  }, parsedColumns.map(function (column, columnIndex) {
+    var cellVariantClassName = getVariant('footerCell', {
+      columnIndex: columnIndex,
+      isSortable: column.sortable
+    });
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: columnIndex,
+      role: "cell",
+      ref: getColumnRef(columnIndex + "." + (data.length + 1)),
+      className: "uikit-reset " + css([].concat(cellVariantClassName, [column.css]))
+    }, typeof column.footer === 'string' || /*#__PURE__*/_react["default"].isValidElement(column.footer) ? column.footer : column.footer ? /*#__PURE__*/_react["default"].createElement(column.footer, {
+      columnIndex: columnIndex
+    }) : null);
+  }))), shadowsToRender, /*#__PURE__*/_react["default"].createElement(_Pagination["default"], {
+    currentPage: currentPage,
+    totalPages: totalPages,
+    onPageChange: onPageChange,
+    position: "sticky",
+    bottom: 0,
+    zIndex: 35,
+    marginTop: "-1px",
+    backgroundColor: "white",
+    borderTopWidth: 1,
+    borderTopColor: "grey-3",
+    className: css({
+      '@media print': {
+        position: 'relative'
+      }
+    })
+  }))));
+};
+
+var _default = DataTable;
+exports["default"] = _default;

package/dist/cjs/DataTable/components/BodyRow.js

@@ -0,0 +1,58 @@
+"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 _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _hooks = require("../../hooks");
+
+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; }
+
+function BodyRow(_ref) {
+  var innerRef = _ref.innerRef,
+      placeholder = _ref.placeholder,
+      rowData = _ref.rowData,
+      rowIndex = _ref.rowIndex,
+      style = _ref.style,
+      keyboardShortcuts = _ref.keyboardShortcuts,
+      onRowClick = _ref.onRowClick,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["innerRef", "placeholder", "rowData", "rowIndex", "style", "keyboardShortcuts", "onRowClick"]);
+  var Component = restProps.href ? 'a' : 'div';
+
+  var _useKeyboardShortcuts = (0, _hooks.useKeyboardShortcuts)(keyboardShortcuts, {
+    rowData: rowData,
+    rowIndex: rowIndex
+  }),
+      bindKeyboardShortcuts = _useKeyboardShortcuts.bindKeyboardShortcuts,
+      unbindKeyboardShortcuts = _useKeyboardShortcuts.unbindKeyboardShortcuts;
+
+  var props = _objectSpread({
+    ref: innerRef,
+    onClick: onRowClick && function () {
+      return onRowClick(rowData, rowIndex);
+    },
+    onMouseEnter: bindKeyboardShortcuts,
+    onMouseLeave: unbindKeyboardShortcuts,
+    style: _objectSpread({
+      opacity: placeholder ? 0.65 : undefined
+    }, style)
+  }, restProps);
+
+  if (!restProps.href) {
+    props.role = 'row';
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(Component, props);
+}
+
+var _default = BodyRow;
+exports["default"] = _default;