@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/cjs/Input/InputLabel.js

@@ -0,0 +1,93 @@
+"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 _system = require("../system");
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _utils = require("./utils");
+
+var InputLabel = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(InputLabel, _Component);
+
+  function InputLabel() {
+    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), "focusInput", function () {
+      _this.input && _this.input.focus();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseOver", function () {
+      _this.input && _this.input.setState({
+        isHovered: true
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseOut", function () {
+      _this.input && _this.input.setState({
+        isHovered: false
+      });
+    });
+    return _this;
+  }
+
+  var _proto = InputLabel.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    this.input = _utils.inputs[this.props.controls];
+    _utils.inputLabels[this.props.controls] = true;
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    delete _utils.inputLabels[this.props.controls];
+  };
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        controls = _this$props.controls,
+        state = _this$props.state,
+        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["controls", "state"]);
+
+    if (controls) {
+      restProps.id = controls + "-label";
+    }
+
+    if (state) {
+      restProps.color = (0, _system.getColor)(state);
+    }
+
+    return /*#__PURE__*/_react["default"].createElement(_Text["default"], (0, _extends2["default"])({
+      as: "label",
+      onMouseOver: this.handleMouseOver,
+      onMouseOut: this.handleMouseOut,
+      onClick: this.focusInput
+    }, restProps));
+  };
+
+  return InputLabel;
+}(_react.Component);
+
+InputLabel.displayName = 'Input.InputLabel';
+var _default = InputLabel;
+exports["default"] = _default;

package/dist/cjs/Input/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Inline = _interopRequireDefault(require("./Inline"));
+
+var _Input = _interopRequireDefault(require("./Input"));
+
+var _InputBox = _interopRequireDefault(require("./InputBox"));
+
+var _InputField = _interopRequireDefault(require("./InputField"));
+
+var _InputLabel = _interopRequireDefault(require("./InputLabel"));
+
+_Input["default"].Inline = _Inline["default"];
+_Input["default"].InputBox = _InputBox["default"];
+_Input["default"].InputField = _InputField["default"];
+_Input["default"].InputLabel = _InputLabel["default"];
+var _default = _Input["default"];
+exports["default"] = _default;

package/dist/cjs/Input/utils.js

@@ -0,0 +1,13 @@
+"use strict";
+
+exports.__esModule = true;
+exports.isTabbable = isTabbable;
+exports.inputLabels = exports.inputs = void 0;
+var inputs = {};
+exports.inputs = inputs;
+var inputLabels = {};
+exports.inputLabels = inputLabels;
+
+function isTabbable(node) {
+  return ['BUTTON', 'INPUT'].indexOf(node.tagName) > -1 || parseInt(node.getAttribute('tabindex'), 10) > -1;
+}

package/dist/cjs/ItemList/ItemList.js

@@ -0,0 +1,262 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+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 = _interopRequireWildcard(require("react"));
+
+var _ItemListContext = _interopRequireDefault(require("./ItemListContext"));
+
+var _utils = require("./utils");
+
+var itemListId = 0;
+
+var ItemList = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(ItemList, _Component);
+
+  function ItemList() {
+    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), "controllers", []);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "highlightedIndex", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "id", "item-list-" + itemListId++);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "items", []);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "searchString", '');
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getItemId", function (index) {
+      return index === null ? null : _this.id + "-item-" + index;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getItemNode", function (index) {
+      return index === null ? null : _this.items[index].getNode();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getItemByText", function (text) {
+      for (var index = 0; index < _this.items.length; index++) {
+        var item = _this.items[index];
+        var itemText = item.props.text || String(item.props.data);
+
+        if (!item.props.disabled && itemText.toLowerCase().indexOf(text) === 0) {
+          return item;
+        }
+      }
+
+      return null;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "subscribeController", function (controllerInstance) {
+      _this.controllers.push(controllerInstance);
+
+      return function () {
+        _this.controllers.splice(_this.controllers.indexOf(controllerInstance), 1);
+      };
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "subscribeItem", function (itemInstance) {
+      _this.items.push(itemInstance);
+
+      return function () {
+        // if item was highlighted we need to null the highlightedIndex on unsubscribe
+        if (itemInstance.props.index === _this.highlightedIndex) {
+          _this.highlightedIndex = null;
+        }
+
+        _this.items.splice(_this.items.indexOf(itemInstance), 1);
+      };
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "scrollItemIntoViewByIndex", function (index) {
+      var itemNode = _this.getItemNode(index);
+
+      if (itemNode) {
+        (0, _utils.scrollIntoView)(itemNode);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "stringSearch", function (event, delay) {
+      if (delay === void 0) {
+        delay = 300;
+      }
+
+      return new Promise(function (resolve) {
+        if (((0, _utils.isNumberKey)(event) || (0, _utils.isLetterKey)(event) || (0, _utils.isSpecialKey)(event)) && !(0, _utils.isComboKey)(event)) {
+          event.preventDefault();
+
+          _this.addToSearchString(event.key);
+
+          _this.startSearchStringRefreshTimer(delay);
+
+          resolve(_this.searchString);
+        }
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addToSearchString", function (letter) {
+      _this.searchString += letter.toLowerCase();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "clearSearchString", function () {
+      _this.searchString = '';
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "startSearchStringRefreshTimer", function (delay) {
+      _this.clearSearchStringRefreshTimer();
+
+      _this.stringSearchTimer = setTimeout(function () {
+        _this.clearSearchString();
+      }, delay);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "clearSearchStringRefreshTimer", function () {
+      clearTimeout(_this.stringSearchTimer);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getHighlightedIndex", function () {
+      return _this.highlightedIndex;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getHighlightedItemId", function () {
+      return _this.highlightedItemId;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setHighlightedIndex", function (index, _temp) {
+      var _ref = _temp === void 0 ? {} : _temp,
+          _ref$focus = _ref.focus,
+          focus = _ref$focus === void 0 ? false : _ref$focus,
+          _ref$maybeScrollIntoV = _ref.maybeScrollIntoView,
+          maybeScrollIntoView = _ref$maybeScrollIntoV === void 0 ? true : _ref$maybeScrollIntoV;
+
+      var event = {
+        lastIndex: _this.highlightedIndex,
+        newIndex: index
+      };
+      var item = _this.items[index];
+
+      if (_this.items.length === 0) {
+        return;
+      }
+
+      if (item && item.props.disabled) {
+        index = null;
+      }
+
+      if (index !== null) {
+        var itemNode = _this.getItemNode(index);
+
+        if (maybeScrollIntoView) {
+          (0, _utils.scrollIntoView)(itemNode);
+        }
+
+        if (focus) {
+          itemNode.focus();
+        }
+      }
+
+      if (_this.props.onHighlight) {
+        _this.props.onHighlight(event);
+      }
+
+      _this.items.forEach(function (itemInstance) {
+        if (itemInstance.props.index === index) {
+          itemInstance.highlighted = true;
+          itemInstance.forceUpdate();
+        } else if (itemInstance.highlighted) {
+          itemInstance.highlighted = false;
+          itemInstance.forceUpdate();
+        } else {
+          itemInstance.highlighted = false;
+        }
+      });
+
+      _this.controllers.forEach(function (controllerInstance) {
+        controllerInstance.highlightedItemId = _this.getItemId(index);
+        controllerInstance.forceUpdate();
+      });
+
+      _this.highlightedIndex = index;
+      _this.highlightedItemId = _this.getItemId(index);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "moveHighlightedIndex", function (amount, _temp2) {
+      var _ref2 = _temp2 === void 0 ? {} : _temp2,
+          _ref2$contain = _ref2.contain,
+          contain = _ref2$contain === void 0 ? true : _ref2$contain,
+          focus = _ref2.focus,
+          maybeScrollIntoView = _ref2.maybeScrollIntoView;
+
+      var itemCount = _this.items.length;
+      var index = _this.highlightedIndex;
+
+      if (index === null) {
+        index = amount >= 0 ? 0 : itemCount - 1;
+      } else {
+        index += amount;
+
+        if (index < 0 || index >= itemCount) {
+          index = contain ? (0, _utils.modulo)(_this.highlightedIndex + amount, itemCount) : null;
+        }
+      }
+
+      var item = _this.items[index];
+
+      if (item && item.props.disabled) {
+        _this.highlightedIndex = index;
+
+        _this.moveHighlightedIndex(amount, {
+          contain: contain,
+          focus: focus,
+          maybeScrollIntoView: maybeScrollIntoView
+        });
+      } else {
+        _this.setHighlightedIndex(index, {
+          focus: focus,
+          maybeScrollIntoView: maybeScrollIntoView
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "clearHighlightedIndex", function () {
+      _this.setHighlightedIndex(null);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "selectItemByIndex", function (index) {
+      var item = _this.items[index];
+
+      if (item) {
+        _this.props.onSelect(item.props.data, {
+          index: item.props.index,
+          node: item.node
+        });
+
+        if (item.props.onSelect) {
+          item.props.onSelect(item.node);
+        }
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "selectItem", function (index) {
+      _this.selectItemByIndex(index);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "selectHighlightedItem", function () {
+      if (_this.highlightedIndex !== null) {
+        _this.selectItemByIndex(_this.highlightedIndex);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isItemSelected", function (data) {
+      var selected = _this.props.selected;
+      return typeof selected === 'function' ? selected(data) : selected === data;
+    });
+    return _this;
+  }
+
+  var _proto = ItemList.prototype;
+
+  _proto.render = function render() {
+    var children = this.props.children;
+    return /*#__PURE__*/_react["default"].createElement(_ItemListContext["default"].Provider, {
+      value: this
+    }, typeof children === 'function' ? children(this) : children);
+  };
+
+  return ItemList;
+}(_react.Component);
+
+var _default = ItemList;
+exports["default"] = _default;

package/dist/cjs/ItemList/ItemListContext.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var ItemListContext = /*#__PURE__*/(0, _react.createContext)();
+var _default = ItemListContext;
+exports["default"] = _default;

package/dist/cjs/ItemList/ItemListController.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+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 = _interopRequireWildcard(require("react"));
+
+var _ItemListContext = _interopRequireDefault(require("./ItemListContext"));
+
+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 ItemListController = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(ItemListController, _Component);
+
+  function ItemListController() {
+    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), "highlightedItemId", null);
+    return _this;
+  }
+
+  var _proto = ItemListController.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    this.unsubsribeController = this.itemList.subscribeController(this);
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.unsubsribeController();
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/_react["default"].createElement(_ItemListContext["default"].Consumer, null, function (itemList) {
+      if (!_this2.itemList) {
+        _this2.itemList = itemList;
+      }
+
+      return _this2.props.children(_objectSpread(_objectSpread({}, itemList), {}, {
+        highlightedItemId: _this2.highlightedItemId
+      }));
+    });
+  };
+
+  return ItemListController;
+}(_react.Component);
+
+var _default = ItemListController;
+exports["default"] = _default;

package/dist/cjs/ItemList/ItemListItem.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+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 = _interopRequireWildcard(require("react"));
+
+var _ItemListContext = _interopRequireDefault(require("./ItemListContext"));
+
+var ItemListItem = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(ItemListItem, _Component);
+
+  function ItemListItem() {
+    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), "node", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "highlighted", false);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "highlight", function () {
+      if (!_this.props.disabled) {
+        _this.itemList.setHighlightedIndex(_this.props.index, {
+          maybeScrollIntoView: false
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "select", function () {
+      if (!_this.props.disabled) {
+        _this.itemList.selectItem(_this.props.index);
+      }
+    });
+    return _this;
+  }
+
+  var _proto = ItemListItem.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    this.setNode();
+    this.unsubscribeItem = this.itemList.subscribeItem(this);
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
+    if (lastProps.index !== this.props.index) {
+      // sort items array since index has changed and is now misplaced
+      this.itemList.items.sort(function (a, b) {
+        return a.props.index - b.props.index;
+      });
+      this.setNode();
+    }
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.unsubscribeItem();
+  };
+
+  _proto.setNode = function setNode() {
+    this.node = document.getElementById(this.itemList.getItemId(this.props.index));
+  };
+
+  _proto.getNode = function getNode() {
+    return this.node;
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/_react["default"].createElement(_ItemListContext["default"].Consumer, null, function (itemList) {
+      if (!_this2.itemList) {
+        _this2.itemList = itemList;
+      }
+
+      return _this2.props.children({
+        id: itemList.getItemId(_this2.props.index),
+        clearHighlight: itemList.clearHighlightedIndex,
+        highlight: _this2.highlight,
+        highlighted: _this2.highlighted,
+        select: _this2.select,
+        selected: itemList.isItemSelected(_this2.props.data)
+      });
+    });
+  };
+
+  return ItemListItem;
+}(_react.Component);
+
+var _default = ItemListItem;
+exports["default"] = _default;

package/dist/cjs/ItemList/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+
+var _ItemList = _interopRequireDefault(require("./ItemList"));
+
+exports.ItemList = _ItemList["default"];
+
+var _ItemListController = _interopRequireDefault(require("./ItemListController"));
+
+exports.ItemListController = _ItemListController["default"];
+
+var _ItemListItem = _interopRequireDefault(require("./ItemListItem"));
+
+exports.ItemListItem = _ItemListItem["default"];

package/dist/cjs/ItemList/utils.js

@@ -0,0 +1,73 @@
+"use strict";
+
+exports.__esModule = true;
+exports.isNumberKey = isNumberKey;
+exports.isLetterKey = isLetterKey;
+exports.isSpecialKey = isSpecialKey;
+exports.isComboKey = isComboKey;
+exports.modulo = modulo;
+exports.scroller = scroller;
+exports.scrollIntoView = scrollIntoView;
+
+var _utils = require("../utils");
+
+function isNumberKey(event) {
+  return event.keyCode >= 48 && event.keyCode <= 57;
+}
+
+function isLetterKey(event) {
+  return event.keyCode >= 65 && event.keyCode <= 90;
+}
+
+function isSpecialKey(event) {
+  return event.keyCode >= 188 && event.keyCode <= 190;
+}
+
+function isComboKey(event) {
+  return event.ctrlKey || event.metaKey || event.altKey;
+}
+
+function modulo(val, max) {
+  return val >= 0 ? val % max : (val % max + max) % max;
+}
+
+function scroller(node) {
+  if (node === document.body) {
+    return {
+      offsetTop: 0,
+      scrollY: window.pageYOffset,
+      height: window.innerHeight,
+      setPosition: function setPosition(top) {
+        return window.scrollTo(0, top);
+      }
+    };
+  } else {
+    return {
+      offsetTop: node.getBoundingClientRect().top,
+      scrollY: node.scrollTop,
+      height: node.offsetHeight,
+      setPosition: function setPosition(top) {
+        return node.scrollTop = top;
+      }
+    };
+  }
+}
+
+function scrollIntoView(node) {
+  var scrollParent = scroller((0, _utils.getClosestViewport)(node));
+
+  if (scrollParent === null) {
+    return;
+  }
+
+  var nodeRect = node.getBoundingClientRect();
+  var nodeTop = scrollParent.scrollY + (nodeRect.top - scrollParent.offsetTop);
+
+  if (nodeTop < scrollParent.scrollY) {
+    // the item is above the scrollable area
+    scrollParent.setPosition(nodeTop);
+  } else if (nodeTop + nodeRect.height > scrollParent.scrollY + scrollParent.height) {
+    // the item is below the scrollable area
+    scrollParent.setPosition(nodeTop + nodeRect.height - scrollParent.height);
+  }
+}