@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/esm/DragDrop/DragDrop.js

@@ -0,0 +1,213 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+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) { _defineProperty(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; }
+
+import React, { Children, Fragment, createElement, createContext, useContext, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import * as RBDND from 'react-beautiful-dnd';
+import mitt from 'mitt';
+import StackView from '../StackView';
+var DragDropContext = /*#__PURE__*/createContext(false);
+var DroppableContext = /*#__PURE__*/createContext(false);
+var emitter = mitt();
+var draggableData = {};
+var portalNode = null;
+var providerCount = 0;
+
+function setDraggableData(id, data) {
+  draggableData[id] = data;
+  return function () {
+    delete draggableData[id];
+  };
+}
+
+function useDragDrop() {
+  var hasParentDragDrop = useContext(DragDropContext);
+  return hasParentDragDrop;
+}
+
+function Provider(_ref) {
+  var _onDragStart = _ref.onDragStart,
+      _onDragEnd = _ref.onDragEnd,
+      props = _objectWithoutPropertiesLoose(_ref, ["onDragStart", "onDragEnd"]);
+
+  var hasParentDragDrop = useDragDrop();
+
+  if (typeof document !== 'undefined' && portalNode === null) {
+    portalNode = document.createElement('div');
+    portalNode.id = 'rbd-portal';
+    document.body.appendChild(portalNode);
+  }
+
+  useEffect(function () {
+    providerCount += 1;
+    return function () {
+      providerCount -= 1; // last unmounting provider clears the portalNode
+
+      if (providerCount === 0) {
+        portalNode = null;
+      }
+    };
+  }, []);
+  return hasParentDragDrop ? props.children : /*#__PURE__*/React.createElement(DragDropContext.Provider, {
+    value: true
+  }, /*#__PURE__*/React.createElement(RBDND.DragDropContext, _extends({
+    onDragStart: function onDragStart(event) {
+      var augmentedEvent = _objectSpread(_objectSpread({}, event), {}, {
+        data: draggableData[event.draggableId] || null
+      });
+
+      emitter.emit('dragStart', augmentedEvent);
+
+      if (_onDragStart) {
+        _onDragStart(augmentedEvent);
+      }
+    },
+    onDragEnd: function onDragEnd(event) {
+      var augmentedEvent = _objectSpread(_objectSpread({}, event), {}, {
+        data: draggableData[event.draggableId] || null
+      });
+
+      emitter.emit('dragEnd', augmentedEvent);
+
+      if (_onDragEnd) {
+        _onDragEnd(augmentedEvent);
+      }
+    }
+  }, props)));
+}
+
+function Droppable(_ref2) {
+  var children = _ref2.children,
+      sourceOnly = _ref2.sourceOnly,
+      onDragStart = _ref2.onDragStart,
+      onDragEnd = _ref2.onDragEnd,
+      onDrop = _ref2.onDrop,
+      props = _objectWithoutPropertiesLoose(_ref2, ["children", "sourceOnly", "onDragStart", "onDragEnd", "onDrop"]);
+
+  useEffect(function () {
+    function handleDragStart(event) {
+      if (onDragStart && event.source.droppableId === props.droppableId) {
+        onDragStart(event);
+      }
+    }
+
+    emitter.on('dragStart', handleDragStart);
+    return function () {
+      emitter.off('dragStart', handleDragStart);
+    };
+  }, [onDragStart]);
+  useEffect(function () {
+    function handleDragEnd(event) {
+      if (onDragEnd && event.source.droppableId === props.droppableId) {
+        onDragEnd(event);
+      }
+
+      if (onDrop && event.destination && event.destination.droppableId === props.droppableId) {
+        onDrop(event);
+      }
+    }
+
+    emitter.on('dragEnd', handleDragEnd);
+    return function () {
+      emitter.off('dragEnd', handleDragEnd);
+    };
+  }, [onDragEnd, onDrop]);
+  return /*#__PURE__*/React.createElement(DroppableContext.Provider, {
+    value: sourceOnly
+  }, /*#__PURE__*/React.createElement(RBDND.Droppable, _extends({
+    isDropDisabled: sourceOnly
+  }, props), function (provided, snapshot) {
+    if (sourceOnly) {
+      provided.placeholder = /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'none'
+        }
+      }, provided.placeholder);
+    }
+
+    return children(provided, snapshot);
+  }));
+}
+
+function Draggable(_ref3) {
+  var children = _ref3.children,
+      placeholder = _ref3.placeholder,
+      data = _ref3.data,
+      props = _objectWithoutPropertiesLoose(_ref3, ["children", "placeholder", "data"]);
+
+  var sourceOnly = useContext(DroppableContext);
+  useEffect(function () {
+    return setDraggableData(props.draggableId, data);
+  }, [data]);
+  return /*#__PURE__*/React.createElement(RBDND.Draggable, props, function (provided, snapshot) {
+    if (sourceOnly) {
+      provided.draggableProps.style = snapshot.isDragging ? provided.draggableProps.style : {
+        transform: 'none',
+        transition: 'none'
+      };
+    }
+
+    var child = children(provided, snapshot);
+    return snapshot.isDragging ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/createPortal(child, portalNode), sourceOnly && placeholder && placeholder()) : child;
+  });
+}
+
+function StaticList(_ref4) {
+  var children = _ref4.children,
+      _variants = _ref4.variants,
+      id = _ref4.id,
+      props = _objectWithoutPropertiesLoose(_ref4, ["children", "variants", "id"]);
+
+  var variants = _objectSpread({
+    item: function item(style) {
+      return style;
+    },
+    placeholder: {
+      opacity: 0.5
+    }
+  }, _variants);
+
+  return /*#__PURE__*/React.createElement(Droppable, {
+    droppableId: id,
+    isDropDisabled: true
+  }, function (provided) {
+    return /*#__PURE__*/React.createElement(StackView, _extends({
+      innerRef: provided.innerRef
+    }, props), Children.map(children, function (child, index) {
+      var _child$props = child.props,
+          id = _child$props.id,
+          childProps = _objectWithoutPropertiesLoose(_child$props, ["id"]);
+
+      return /*#__PURE__*/React.createElement(Draggable, {
+        key: child.key,
+        draggableId: id,
+        index: index
+      }, function (provided, snapshot) {
+        return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/createElement(child.type, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, childProps), provided.draggableProps), provided.dragHandleProps), {}, {
+          innerRef: provided.innerRef,
+          style: variants.item(snapshot.isDragging ? provided.draggableProps.style : {
+            transform: 'none',
+            transition: 'none'
+          }, snapshot)
+        })), snapshot.isDragging && /*#__PURE__*/createElement(child.type, _objectSpread(_objectSpread({}, childProps), variants.placeholder)));
+      });
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'none'
+      }
+    }, provided.placeholder));
+  });
+}
+
+export default {
+  Provider: Provider,
+  Droppable: Droppable,
+  Draggable: Draggable,
+  StaticList: StaticList,
+  useDragDrop: useDragDrop
+};

package/dist/esm/DragDrop/index.js

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

package/dist/esm/Drawer/Drawer.js

@@ -0,0 +1,87 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import StackView from '../StackView';
+
+function DrawerContents(_ref) {
+  var shouldClose = _ref.shouldClose,
+      onClose = _ref.onClose,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["shouldClose", "onClose"]);
+
+  var ref = useRef(null);
+
+  var _useState = useState(false),
+      show = _useState[0],
+      setShow = _useState[1];
+
+  useEffect(function () {
+    var node = ref.current;
+    var firstTransition = true;
+
+    function handleTransitionEnd(event) {
+      if (event.target === node && event.propertyName === 'transform') {
+        if (firstTransition) {
+          firstTransition = false;
+        } else {
+          onClose();
+        }
+      }
+    }
+
+    setShow(true);
+    node.addEventListener('transitionend', handleTransitionEnd);
+    return function () {
+      node.removeEventListener('transitionend', handleTransitionEnd);
+    };
+  }, []);
+  useEffect(function () {
+    if (shouldClose) {
+      setShow(false);
+    }
+  }, [shouldClose]);
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    innerRef: ref,
+    width: 52,
+    height: "100%",
+    x: (show ? 0 : 100) + "%",
+    position: "absolute",
+    bottom: 0,
+    right: 0,
+    zIndex: 999,
+    boxShadow: "-6px 0px 6px -4px rgba(150,150,150,0.25)",
+    backgroundColor: "surfaceTertiary",
+    transition: "transform 240ms ease-out"
+  }, restProps));
+}
+
+function Drawer(props) {
+  var open = props.open,
+      restProps = _objectWithoutPropertiesLoose(props, ["open"]);
+
+  var _useState2 = useState(null),
+      localOpen = _useState2[0],
+      setLocalOpen = _useState2[1];
+
+  var _useState3 = useState(null),
+      shouldClose = _useState3[0],
+      setShouldClose = _useState3[1];
+
+  var handleClose = useCallback(function () {
+    setLocalOpen(false);
+    setShouldClose(true);
+  }, []);
+  useLayoutEffect(function () {
+    if (open) {
+      setLocalOpen(true);
+      setShouldClose(false);
+    } else if (localOpen !== null) {
+      setShouldClose(true);
+    }
+  }, [open]);
+  return localOpen && /*#__PURE__*/React.createElement(DrawerContents, _extends({
+    shouldClose: shouldClose,
+    onClose: handleClose
+  }, restProps));
+}
+
+export default Drawer;

package/dist/esm/Drawer/index.js

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

package/dist/esm/Dropdown/Dropdown.js

@@ -0,0 +1,282 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+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) { _defineProperty(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; }
+
+import React, { Component, cloneElement, createElement } from 'react';
+import Button from '../Button';
+import FocusGroup from '../FocusGroup';
+import { ItemList, ItemListController } from '../ItemList';
+import Menu from '../Menu';
+import Popover from '../Popover';
+import { cloneChildren, generateId } from '../utils';
+import Item, { ITEM_DISPLAY_NAME } from './Item';
+import Link, { LINK_DISPLAY_NAME, LINK_DATA } from './Link';
+
+var Dropdown = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Dropdown, _Component);
+
+  function Dropdown(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_this), "openPopover", function (event) {
+      if (_this.props.onOpen) {
+        _this.props.onOpen();
+      }
+
+      _this.setState({
+        isPopoverOpen: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "closePopover", function (event) {
+      if (_this.props.onClose) {
+        _this.props.onClose();
+      }
+
+      if (!_this.props.forceOpen) {
+        _this.setState({
+          isPopoverOpen: false
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "togglePopover", function (event) {
+      if (_this.state.isPopoverOpen) {
+        _this.closePopover(event);
+      } else {
+        _this.openPopover(event);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleSelect", function (data, _ref) {
+      var node = _ref.node;
+
+      if (_this.props.closeOnSelect) {
+        _this.itemList.clearHighlightedIndex();
+
+        _this.closePopover();
+
+        _this.popover.focusAnchor();
+      }
+
+      if (data === LINK_DATA) {
+        node.click();
+      } else if (_this.props.onSelect) {
+        _this.props.onSelect(data);
+      }
+    });
+
+    _this.state = {
+      isPopoverOpen: props.defaultOpen || props.forceOpen
+    };
+    _this.id = generateId('dropdown');
+    return _this;
+  }
+
+  var _proto = Dropdown.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        forceOpen = _this$props.forceOpen,
+        closeOnSelect = _this$props.closeOnSelect,
+        children = _this$props.children,
+        as = _this$props.as,
+        defaultOpen = _this$props.defaultOpen,
+        _innerRef = _this$props.innerRef,
+        keepInView = _this$props.keepInView,
+        lockScrollWhileOpen = _this$props.lockScrollWhileOpen,
+        matchWidths = _this$props.matchWidths,
+        onClick = _this$props.onClick,
+        onClose = _this$props.onClose,
+        onKeyDown = _this$props.onKeyDown,
+        onOpen = _this$props.onOpen,
+        onSearch = _this$props.onSearch,
+        placement = _this$props.placement,
+        popoverProps = _this$props.popoverProps,
+        renderTo = _this$props.renderTo,
+        triggerElement = _this$props.triggerElement,
+        restProps = _objectWithoutPropertiesLoose(_this$props, ["forceOpen", "closeOnSelect", "children", "as", "defaultOpen", "innerRef", "keepInView", "lockScrollWhileOpen", "matchWidths", "onClick", "onClose", "onKeyDown", "onOpen", "onSearch", "placement", "popoverProps", "renderTo", "triggerElement"]);
+
+    var isPopoverOpen = this.state.isPopoverOpen;
+    var arrowIconOnly = !restProps.icon && !restProps.title;
+    var index = -1;
+    return /*#__PURE__*/React.createElement(FocusGroup, {
+      onBlur: this.closePopover
+    }, function (_ref2) {
+      var requestBlur = _ref2.requestBlur,
+          setRef = _ref2.setRef;
+      return /*#__PURE__*/React.createElement(ItemList, {
+        ref: function ref(c) {
+          return _this2.itemList = c;
+        },
+        onSelect: _this2.handleSelect
+      }, function (_ref3) {
+        var getItemByText = _ref3.getItemByText,
+            moveHighlightedIndex = _ref3.moveHighlightedIndex,
+            selectHighlightedItem = _ref3.selectHighlightedItem,
+            setHighlightedIndex = _ref3.setHighlightedIndex,
+            stringSearch = _ref3.stringSearch;
+        return /*#__PURE__*/React.createElement(Popover, _extends({}, popoverProps, {
+          as: Menu,
+          ref: function ref(component) {
+            _this2.popover = component;
+          },
+          innerRef: function innerRef(node) {
+            setRef(_this2.id + "-popover")(node);
+          },
+          role: "menu",
+          tabIndex: -1,
+          elevation: 2,
+          display: Boolean(restProps.spinner) ? 'none' : undefined,
+          onBlur: requestBlur,
+          matchWidths: matchWidths,
+          keepInView: keepInView,
+          lockScrollWhileOpen: lockScrollWhileOpen,
+          placement: placement,
+          renderTo: renderTo,
+          open: isPopoverOpen,
+          onRequestClose: function onRequestClose() {
+            _this2.closePopover();
+
+            _this2.popover.focusAnchor();
+          },
+          anchorElement: function anchorElement(anchorProps) {
+            return /*#__PURE__*/React.createElement(ItemListController, null, function (_ref4) {
+              var _objectSpread2;
+
+              var getHighlightedItemId = _ref4.getHighlightedItemId;
+
+              var triggerProps = _objectSpread((_objectSpread2 = {
+                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;
+                  }
+
+                  setRef(_this2.id + "-button")(node);
+
+                  if (_innerRef) {
+                    _innerRef(node);
+                  }
+                },
+                'aria-activedescendant': getHighlightedItemId(),
+                'aria-owns': getHighlightedItemId(),
+                'aria-haspopup': true,
+                'aria-expanded': isPopoverOpen
+              }, _objectSpread2[arrowIconOnly ? 'icon' : 'iconRight'] = {
+                name: isPopoverOpen ? 'arrow-up' : 'arrow-down',
+                size: 'sm'
+              }, _objectSpread2.title = arrowIconOnly ? 'arrow down' : restProps.title, _objectSpread2.tabIndex = 0, _objectSpread2.cursor = 'pointer', _objectSpread2.onBlur = requestBlur, _objectSpread2.onClick = function onClick() {
+                _this2.togglePopover();
+
+                if (!isPopoverOpen) {
+                  _this2.popover.focusAnchor();
+                }
+              }, _objectSpread2.onKeyDown = function onKeyDown(event) {
+                anchorProps.onKeyDown(event);
+
+                switch (event.key) {
+                  case 'ArrowUp':
+                    event.preventDefault();
+
+                    if (isPopoverOpen) {
+                      moveHighlightedIndex(-1);
+                    } else {
+                      _this2.openPopover();
+
+                      setTimeout(function () {
+                        moveHighlightedIndex(-1);
+                      });
+                    }
+
+                    break;
+
+                  case 'ArrowDown':
+                    event.preventDefault();
+
+                    if (isPopoverOpen) {
+                      moveHighlightedIndex(1);
+                    } else {
+                      _this2.openPopover();
+
+                      setTimeout(function () {
+                        moveHighlightedIndex(1);
+                      });
+                    }
+
+                    break;
+
+                  case 'Enter':
+                    if (isPopoverOpen) {
+                      event.preventDefault();
+                      selectHighlightedItem();
+                    }
+
+                    break;
+
+                  case ' ':
+                    event.preventDefault();
+
+                    _this2.togglePopover();
+
+                    break;
+
+                  default:
+                    onSearch ? onSearch(event) : stringSearch(event).then(function (text) {
+                      var item = getItemByText(text);
+
+                      if (item) {
+                        setHighlightedIndex(item.props.index);
+                      }
+                    });
+                }
+              }, _objectSpread2), restProps);
+
+              if ( /*#__PURE__*/React.isValidElement(triggerElement)) {
+                return /*#__PURE__*/cloneElement(triggerElement, triggerProps);
+              } else {
+                return /*#__PURE__*/createElement(triggerElement, triggerProps);
+              }
+            });
+          }
+        }), cloneChildren(children, function (child) {
+          if (child.type.displayName === ITEM_DISPLAY_NAME || child.type.displayName === LINK_DISPLAY_NAME) {
+            index++;
+            return {
+              index: index
+            };
+          } else {
+            return {};
+          }
+        }));
+      });
+    });
+  };
+
+  return Dropdown;
+}(Component);
+
+_defineProperty(Dropdown, "Item", Item);
+
+_defineProperty(Dropdown, "Link", Link);
+
+_defineProperty(Dropdown, "defaultProps", {
+  triggerElement: Button,
+  closeOnSelect: true,
+  defaultOpen: false
+});
+
+export default Dropdown;

package/dist/esm/Dropdown/Dropdown.test.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import Dropdown from './Dropdown';
+import ThemeProvider from '../ThemeProvider';
+
+var _ref = /*#__PURE__*/React.createElement(Dropdown, {
+  title: "A menu"
+});
+
+it("should render title", function () {
+  render(_ref);
+  screen.getByText('A menu');
+});
+it("calls passed onSearch function when receiving keyboard input", function () {
+  var customTextSearch = jest.fn();
+  render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, {
+    title: "A menu",
+    onSearch: customTextSearch
+  })));
+  var dropdown = screen.getByText('A menu');
+  fireEvent.keyDown(dropdown, {
+    key: 'A',
+    code: 'KeyA'
+  });
+  expect(customTextSearch).toHaveBeenCalled();
+});

package/dist/esm/Dropdown/Item.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { Component } from 'react';
+import { ItemListItem } from '../ItemList';
+import Menu from '../Menu';
+export var ITEM_DISPLAY_NAME = 'Dropdown.Item';
+
+var Item = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Item, _Component);
+
+  function Item() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Item.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        disabled = _this$props.disabled,
+        index = _this$props.index,
+        onSelect = _this$props.onSelect,
+        text = _this$props.text,
+        value = _this$props.value,
+        restProps = _objectWithoutPropertiesLoose(_this$props, ["disabled", "index", "onSelect", "text", "value"]);
+
+    return /*#__PURE__*/React.createElement(ItemListItem, {
+      data: value,
+      text: text,
+      disabled: disabled,
+      index: index,
+      onSelect: onSelect
+    }, function (_ref) {
+      var id = _ref.id,
+          highlight = _ref.highlight,
+          highlighted = _ref.highlighted,
+          clearHighlight = _ref.clearHighlight,
+          select = _ref.select;
+      return /*#__PURE__*/React.createElement(Menu.Item, _extends({
+        id: id,
+        role: "menuitem",
+        "aria-disabled": disabled,
+        disabled: disabled,
+        isHighlighted: highlighted,
+        onMouseOver: highlight,
+        onMouseOut: clearHighlight,
+        onClick: select
+      }, restProps));
+    });
+  };
+
+  return Item;
+}(Component);
+
+_defineProperty(Item, "displayName", ITEM_DISPLAY_NAME);
+
+export default Item;