@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/cjs/DragDrop/DragDrop.js

@@ -0,0 +1,226 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = require("react-dom");
+
+var RBDND = _interopRequireWildcard(require("react-beautiful-dnd"));
+
+var _mitt = _interopRequireDefault(require("mitt"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var DragDropContext = /*#__PURE__*/(0, _react.createContext)(false);
+var DroppableContext = /*#__PURE__*/(0, _react.createContext)(false);
+var emitter = (0, _mitt["default"])();
+var draggableData = {};
+var portalNode = null;
+var providerCount = 0;
+
+function setDraggableData(id, data) {
+  draggableData[id] = data;
+  return function () {
+    delete draggableData[id];
+  };
+}
+
+function useDragDrop() {
+  var hasParentDragDrop = (0, _react.useContext)(DragDropContext);
+  return hasParentDragDrop;
+}
+
+function Provider(_ref) {
+  var _onDragStart = _ref.onDragStart,
+      _onDragEnd = _ref.onDragEnd,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["onDragStart", "onDragEnd"]);
+  var hasParentDragDrop = useDragDrop();
+
+  if (typeof document !== 'undefined' && portalNode === null) {
+    portalNode = document.createElement('div');
+    portalNode.id = 'rbd-portal';
+    document.body.appendChild(portalNode);
+  }
+
+  (0, _react.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["default"].createElement(DragDropContext.Provider, {
+    value: true
+  }, /*#__PURE__*/_react["default"].createElement(RBDND.DragDropContext, (0, _extends2["default"])({
+    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 = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["children", "sourceOnly", "onDragStart", "onDragEnd", "onDrop"]);
+  (0, _react.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]);
+  (0, _react.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["default"].createElement(DroppableContext.Provider, {
+    value: sourceOnly
+  }, /*#__PURE__*/_react["default"].createElement(RBDND.Droppable, (0, _extends2["default"])({
+    isDropDisabled: sourceOnly
+  }, props), function (provided, snapshot) {
+    if (sourceOnly) {
+      provided.placeholder = /*#__PURE__*/_react["default"].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 = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, ["children", "placeholder", "data"]);
+  var sourceOnly = (0, _react.useContext)(DroppableContext);
+  (0, _react.useEffect)(function () {
+    return setDraggableData(props.draggableId, data);
+  }, [data]);
+  return /*#__PURE__*/_react["default"].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["default"].createElement(_react.Fragment, null, /*#__PURE__*/(0, _reactDom.createPortal)(child, portalNode), sourceOnly && placeholder && placeholder()) : child;
+  });
+}
+
+function StaticList(_ref4) {
+  var children = _ref4.children,
+      _variants = _ref4.variants,
+      id = _ref4.id,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref4, ["children", "variants", "id"]);
+
+  var variants = _objectSpread({
+    item: function item(style) {
+      return style;
+    },
+    placeholder: {
+      opacity: 0.5
+    }
+  }, _variants);
+
+  return /*#__PURE__*/_react["default"].createElement(Droppable, {
+    droppableId: id,
+    isDropDisabled: true
+  }, function (provided) {
+    return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+      innerRef: provided.innerRef
+    }, props), _react.Children.map(children, function (child, index) {
+      var _child$props = child.props,
+          id = _child$props.id,
+          childProps = (0, _objectWithoutPropertiesLoose2["default"])(_child$props, ["id"]);
+      return /*#__PURE__*/_react["default"].createElement(Draggable, {
+        key: child.key,
+        draggableId: id,
+        index: index
+      }, function (provided, snapshot) {
+        return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/(0, _react.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__*/(0, _react.createElement)(child.type, _objectSpread(_objectSpread({}, childProps), variants.placeholder)));
+      });
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'none'
+      }
+    }, provided.placeholder));
+  });
+}
+
+var _default = {
+  Provider: Provider,
+  Droppable: Droppable,
+  Draggable: Draggable,
+  StaticList: StaticList,
+  useDragDrop: useDragDrop
+};
+exports["default"] = _default;

package/dist/cjs/DragDrop/index.js

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

package/dist/cjs/Drawer/Drawer.js

@@ -0,0 +1,99 @@
+"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 _react = _interopRequireWildcard(require("react"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+function DrawerContents(_ref) {
+  var shouldClose = _ref.shouldClose,
+      onClose = _ref.onClose,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["shouldClose", "onClose"]);
+  var ref = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(false),
+      show = _useState[0],
+      setShow = _useState[1];
+
+  (0, _react.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);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (shouldClose) {
+      setShow(false);
+    }
+  }, [shouldClose]);
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    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 = (0, _objectWithoutPropertiesLoose2["default"])(props, ["open"]);
+
+  var _useState2 = (0, _react.useState)(null),
+      localOpen = _useState2[0],
+      setLocalOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      shouldClose = _useState3[0],
+      setShouldClose = _useState3[1];
+
+  var handleClose = (0, _react.useCallback)(function () {
+    setLocalOpen(false);
+    setShouldClose(true);
+  }, []);
+  (0, _react.useLayoutEffect)(function () {
+    if (open) {
+      setLocalOpen(true);
+      setShouldClose(false);
+    } else if (localOpen !== null) {
+      setShouldClose(true);
+    }
+  }, [open]);
+  return localOpen && /*#__PURE__*/_react["default"].createElement(DrawerContents, (0, _extends2["default"])({
+    shouldClose: shouldClose,
+    onClose: handleClose
+  }, restProps));
+}
+
+var _default = Drawer;
+exports["default"] = _default;

package/dist/cjs/Drawer/index.js

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

package/dist/cjs/Dropdown/Dropdown.js

@@ -0,0 +1,295 @@
+"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 _Button = _interopRequireDefault(require("../Button"));
+
+var _FocusGroup = _interopRequireDefault(require("../FocusGroup"));
+
+var _ItemList = require("../ItemList");
+
+var _Menu = _interopRequireDefault(require("../Menu"));
+
+var _Popover = _interopRequireDefault(require("../Popover"));
+
+var _utils = require("../utils");
+
+var _Item = _interopRequireWildcard(require("./Item"));
+
+var _Link = _interopRequireWildcard(require("./Link"));
+
+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 Dropdown = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(Dropdown, _Component);
+
+  function Dropdown(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "openPopover", function (event) {
+      if (_this.props.onOpen) {
+        _this.props.onOpen();
+      }
+
+      _this.setState({
+        isPopoverOpen: true
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "closePopover", function (event) {
+      if (_this.props.onClose) {
+        _this.props.onClose();
+      }
+
+      if (!_this.props.forceOpen) {
+        _this.setState({
+          isPopoverOpen: false
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "togglePopover", function (event) {
+      if (_this.state.isPopoverOpen) {
+        _this.closePopover(event);
+      } else {
+        _this.openPopover(event);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSelect", function (data, _ref) {
+      var node = _ref.node;
+
+      if (_this.props.closeOnSelect) {
+        _this.itemList.clearHighlightedIndex();
+
+        _this.closePopover();
+
+        _this.popover.focusAnchor();
+      }
+
+      if (data === _Link.LINK_DATA) {
+        node.click();
+      } else if (_this.props.onSelect) {
+        _this.props.onSelect(data);
+      }
+    });
+    _this.state = {
+      isPopoverOpen: props.defaultOpen || props.forceOpen
+    };
+    _this.id = (0, _utils.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 = (0, _objectWithoutPropertiesLoose2["default"])(_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["default"].createElement(_FocusGroup["default"], {
+      onBlur: this.closePopover
+    }, function (_ref2) {
+      var requestBlur = _ref2.requestBlur,
+          setRef = _ref2.setRef;
+      return /*#__PURE__*/_react["default"].createElement(_ItemList.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["default"].createElement(_Popover["default"], (0, _extends2["default"])({}, 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,
+          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["default"].createElement(_ItemList.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["default"].isValidElement(triggerElement)) {
+                return /*#__PURE__*/(0, _react.cloneElement)(triggerElement, triggerProps);
+              } else {
+                return /*#__PURE__*/(0, _react.createElement)(triggerElement, triggerProps);
+              }
+            });
+          }
+        }), (0, _utils.cloneChildren)(children, function (child) {
+          if (child.type.displayName === _Item.ITEM_DISPLAY_NAME || child.type.displayName === _Link.LINK_DISPLAY_NAME) {
+            index++;
+            return {
+              index: index
+            };
+          } else {
+            return {};
+          }
+        }));
+      });
+    });
+  };
+
+  return Dropdown;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(Dropdown, "Item", _Item["default"]);
+(0, _defineProperty2["default"])(Dropdown, "Link", _Link["default"]);
+(0, _defineProperty2["default"])(Dropdown, "defaultProps", {
+  triggerElement: _Button["default"],
+  closeOnSelect: true,
+  defaultOpen: false
+});
+var _default = Dropdown;
+exports["default"] = _default;

package/dist/cjs/Dropdown/Dropdown.test.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+
+var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
+
+it("should render title", function () {
+  (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+    title: "A menu"
+  }));
+
+  _react2.screen.getByText('A menu');
+});
+it("calls passed onSearch function when receiving keyboard input", function () {
+  var customTextSearch = jest.fn();
+  (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], null, /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+    title: "A menu",
+    onSearch: customTextSearch
+  })));
+
+  var dropdown = _react2.screen.getByText('A menu');
+
+  _react2.fireEvent.keyDown(dropdown, {
+    key: 'A',
+    code: 'KeyA'
+  });
+
+  expect(customTextSearch).toHaveBeenCalled();
+});