@convertkit/design - npm Package Compare versions

Comparing version 0.0.18 to 0.0.19-beta.1

multiselect-menu/index.js

@@ -32,5 +32,7 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
 import VisuallyHidden from "@reach/visually-hidden";
+import { Manager, Reference, Popper } from "react-popper";
 import matchSorter from "match-sorter";
 import cx from "classnames";
 import Icon from "../icon";
+import Portal from "../portal";
 
@@ -58,3 +60,3 @@ var stateReducer = function stateReducer(state, changes) {
 
-  var className = cx("px-2 py-1 text-sm", {
+  var className = cx("px-2 py-1 text-sm whitespace-no-wrap", {
     "bg-gray-100 cursor-pointer": active
@@ -195,34 +197,47 @@ });
     }) : options;
-    return React.createElement("div", null, React.createElement("div", {
-      className: buttonClassName
-    }, React.createElement(VisuallyHidden, null, React.createElement("label", getLabelProps(), label)), React.createElement("div", {
-      className: "flex flex-grow flex-wrap items-center"
-    }, selectedItems.length > 0 ? selectedItems.map(function (item) {
-      return React.createElement(SelectedItem, {
-        key: item.id,
-        item: item,
-        onRemove: removeItem
-      });
-    }) : "", React.createElement("input", _extends({
-      className: "outline-none"
-    }, getInputProps(_objectSpread({}, inputFocusProps, {
-      onKeyDown: function onKeyDown(event) {
-        if (event.key === "Backspace" && !inputValue) {
-          removeItem(selectedItems[selectedItems.length - 1]);
+    return React.createElement("div", null, React.createElement(Manager, null, React.createElement(Reference, null, function (_ref6) {
+      var ref = _ref6.ref;
+      return React.createElement("div", {
+        ref: ref,
+        className: buttonClassName
+      }, React.createElement(VisuallyHidden, null, React.createElement("label", getLabelProps(), label)), React.createElement("div", {
+        className: "flex flex-grow flex-wrap items-center"
+      }, selectedItems.length > 0 ? selectedItems.map(function (item) {
+        return React.createElement(SelectedItem, {
+          key: item.id,
+          item: item,
+          onRemove: removeItem
+        });
+      }) : "", React.createElement("input", _extends({
+        className: "outline-none"
+      }, getInputProps(_objectSpread({}, inputFocusProps, {
+        onKeyDown: function onKeyDown(event) {
+          if (event.key === "Backspace" && !inputValue) {
+            removeItem(selectedItems[selectedItems.length - 1]);
+          }
         }
-      }
-    }))))), React.createElement(Button, getToggleButtonProps())), React.createElement("div", {
-      className: "relative"
-    }, React.createElement("ul", _extends({
-      className: menuClassName
-    }, getMenuProps()), isOpen ? items.map(function (item, index) {
-      return React.createElement(Item, _extends({
-        key: item.id
-      }, getItemProps({
-        item: item,
-        index: index,
-        active: highlightedIndex === index,
-        selected: selectedItems.includes(item)
-      })), item.label);
-    }) : null)));
+      }))))), React.createElement(Button, getToggleButtonProps()));
+    }), React.createElement(Popper, {
+      placement: "bottom-start"
+    }, function (_ref7) {
+      var ref = _ref7.ref,
+          style = _ref7.style,
+          scheduleUpdate = _ref7.scheduleUpdate;
+      scheduleUpdate();
+      return React.createElement(Portal, null, React.createElement("div", {
+        ref: ref,
+        style: style
+      }, React.createElement("ul", _extends({
+        className: menuClassName
+      }, getMenuProps()), isOpen ? items.map(function (item, index) {
+        return React.createElement(Item, _extends({
+          key: item.id
+        }, getItemProps({
+          item: item,
+          index: index,
+          active: highlightedIndex === index,
+          selected: selectedItems.includes(item)
+        })), item.label);
+      }) : null)));
+    })));
   });
@@ -229,0 +244,0 @@ }

package.json

 {
   "name": "@convertkit/design",
-  "version": "0.0.18",
+  "version": "0.0.19-beta.1",
   "description": "Design System for ConvertKit",
@@ -27,2 +27,3 @@ "main": "index.js",
     "prop-types": "^15.7.2",
+    "react-popper": "^1.3.4",
     "reakit": "^1.0.0-beta.9"
@@ -57,26 +58,27 @@ },
     "/badge/index.js": "/badge/index.js",
-    "/buttons/button.js": "/buttons/button.js",
     "/buttons/button-group.js": "/buttons/button-group.js",
     "/buttons/icon-button.js": "/buttons/icon-button.js",
+    "/buttons/button.js": "/buttons/button.js",
     "/buttons/index.js": "/buttons/index.js",
-    "/icon/icons.js": "/icon/icons.js",
-    "/icon/index.js": "/icon/index.js",
-    "/icon/library.js": "/icon/library.js",
+    "/date-picker/index.js": "/date-picker/index.js",
     "/card/cards.js": "/card/cards.js",
+    "/card/card.js": "/card/card.js",
     "/card/index.js": "/card/index.js",
-    "/card/card.js": "/card/card.js",
-    "/date-picker/index.js": "/date-picker/index.js",
+    "/multiselect-menu/index.js": "/multiselect-menu/index.js",
+    "/icon/library.js": "/icon/library.js",
+    "/icon/index.js": "/icon/index.js",
+    "/icon/icons.js": "/icon/icons.js",
+    "/note/index.js": "/note/index.js",
     "/jest-mocks/index.js": "/jest-mocks/index.js",
     "/jest-mocks/popover-mock.js": "/jest-mocks/popover-mock.js",
-    "/note/index.js": "/note/index.js",
-    "/multiselect-menu/index.js": "/multiselect-menu/index.js",
-    "/select-menu/index.js": "/select-menu/index.js",
+    "/modals/confirm.js": "/modals/confirm.js",
+    "/modals/confirm-modal.js": "/modals/confirm-modal.js",
     "/modals/action.js": "/modals/action.js",
+    "/modals/index.js": "/modals/index.js",
     "/modals/modal.js": "/modals/modal.js",
-    "/modals/index.js": "/modals/index.js",
-    "/modals/confirm-modal.js": "/modals/confirm-modal.js",
-    "/modals/confirm.js": "/modals/confirm.js",
-    "/utils/partition.js": "/utils/partition.js",
     "/popover/index.js": "/popover/index.js",
     "/popover/popover.js": "/popover/popover.js",
+    "/utils/partition.js": "/utils/partition.js",
+    "/portal/index.js": "/portal/index.js",
+    "/select-menu/index.js": "/select-menu/index.js",
     "/filter/add-filter.js": "/filter/add-filter.js",
@@ -88,7 +90,7 @@ "/filter/edit-filter.js": "/filter/edit-filter.js",
     "/filter/index.js": "/filter/index.js",
+    "/filter/types/index.js": "/filter/types/index.js",
+    "/filter/types/first-name.js": "/filter/types/first-name.js",
     "/filter/types/all-subscribers.js": "/filter/types/all-subscribers.js",
-    "/filter/types/first-name.js": "/filter/types/first-name.js",
-    "/filter/types/index.js": "/filter/types/index.js",
     "/filter/types/subscribed-to.js": "/filter/types/subscribed-to.js"
   }
 }

popover/popover.js

@@ -7,5 +7,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { createContext } from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import { usePopoverState, Popover as BasePopover, PopoverDisclosure, PopoverArrow } from "reakit/Popover";
+import Portal from "../portal";
 import cx from "classnames";
@@ -53,3 +54,3 @@ import Button from "../buttons";
     return React.cloneElement(button, disclosureProps);
-  }), React.createElement(BasePopover, _extends({
+  }), React.createElement(Portal, null, React.createElement(BasePopover, _extends({
     className: className
@@ -60,3 +61,3 @@ }, popover, {
     className: "popover-arrow"
-  }, popover)), content));
+  }, popover)), content)));
 }
@@ -63,0 +64,0 @@

select-menu/index.js

@@ -11,3 +11,5 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import Icon from "../icon";
+import Portal from "../portal";
 import { useSelect } from "downshift";
+import { Manager, Reference, Popper } from "react-popper";
 
@@ -30,3 +32,3 @@ var selectable = function selectable(option) {
 
-  var className = cx("px-2 py-1 text-sm", {
+  var className = cx("px-2 py-1 text-sm whitespace-no-wrap", {
     "bg-gray-100 cursor-pointer": active
@@ -100,28 +102,49 @@ });
   var menuClassName = cx({
-    "absolute bg-white top-0 left-0 py-2 px-0 shadow-lg outline-none list-none": isOpen
+    "bg-white py-2 px-0 shadow-lg outline-none list-none": isOpen
   });
-  return React.createElement("div", null, React.createElement(VisuallyHidden, null, React.createElement("label", getLabelProps(), label)), React.createElement(Button, _extends({}, getToggleButtonProps(), {
-    className: buttonClassName
-  }), selectedItem && selectedItem.label || "Select"), React.createElement("div", {
-    className: "relative"
-  }, React.createElement("ul", _extends({}, getMenuProps({
-    onMouseLeave: function onMouseLeave() {
-      setHighlightedIndex(-1);
+  return React.createElement(Manager, null, React.createElement(VisuallyHidden, null, React.createElement("label", getLabelProps(), label)), React.createElement(Reference, null, function (_ref4) {
+    var ref = _ref4.ref;
+    return React.createElement("div", {
+      className: "inline-flex",
+      ref: ref
+    }, React.createElement(Button, _extends({}, getToggleButtonProps(), {
+      className: buttonClassName
+    }), selectedItem && selectedItem.label || "Select"));
+  }), React.createElement(Popper, {
+    placement: "bottom-start",
+    modifiers: {
+      flip: {
+        enabled: true,
+        behavior: ["top-start", "bottom-start"]
+      }
     }
-  }), {
-    className: menuClassName
-  }), isOpen && options.map(function (option, i) {
-    var index = items.indexOf(option);
-    return option === separator ? React.createElement(Separator, {
-      key: i
-    }) : React.createElement(Item, _extends({}, getItemProps({
-      key: "".concat(option.value, "-").concat(index),
-      index: index,
-      item: option
+  }, function (_ref5) {
+    var ref = _ref5.ref,
+        style = _ref5.style,
+        scheduleUpdate = _ref5.scheduleUpdate;
+    scheduleUpdate();
+    return React.createElement(Portal, null, React.createElement("div", {
+      ref: ref,
+      style: style
+    }, React.createElement("ul", _extends({}, getMenuProps({
+      onMouseLeave: function onMouseLeave() {
+        setHighlightedIndex(-1);
+      }
     }), {
-      active: index === highlightedIndex
-    }), option.label);
-  }))));
+      className: menuClassName
+    }), isOpen && options.map(function (option, i) {
+      var index = items.indexOf(option);
+      return option === separator ? React.createElement(Separator, {
+        key: i
+      }) : React.createElement(Item, _extends({}, getItemProps({
+        key: "".concat(option.value, "-").concat(index),
+        index: index,
+        item: option
+      }), {
+        active: index === highlightedIndex
+      }), option.label);
+    }))));
+  }));
 }
 
 export default SelectMenu;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

436615

increased by0.64%

Number of package files

39

increased by2.63%

Lines of code

19945

increased by0.31%

Worsened metrics

Dependency count

9

increased by12.5%

Dependency changes

• + Addedreact-popper@^1.3.4

• + Added@hypnosphi/create-react-context@0.3.1(transitive)

• + Addedcall-bind@1.0.7(transitive)

• + Addeddeep-equal@1.1.2(transitive)

• + Addeddefine-data-property@1.1.4(transitive)

• + Addeddefine-properties@1.2.1(transitive)

• + Addedes-define-property@1.0.0(transitive)

• + Addedes-errors@1.3.0(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedfunctions-have-names@1.2.3(transitive)

• + Addedget-intrinsic@1.2.4(transitive)

• + Addedgopd@1.0.1(transitive)

• + Addedgud@1.0.0(transitive)

• + Addedhas-property-descriptors@1.0.2(transitive)

• + Addedhas-proto@1.0.3(transitive)

• + Addedhas-symbols@1.0.3(transitive)

• + Addedhas-tostringtag@1.0.2(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedis-arguments@1.1.1(transitive)

• + Addedis-date-object@1.0.5(transitive)

• + Addedis-regex@1.1.4(transitive)

• + Addedobject-is@1.1.6(transitive)

• + Addedobject-keys@1.1.1(transitive)

• + Addedpopper.js@1.16.1(transitive)

• + Addedreact-popper@1.3.11(transitive)

• + Addedregexp.prototype.flags@1.5.3(transitive)

• + Addedset-function-length@1.2.2(transitive)

• + Addedset-function-name@2.0.2(transitive)

• + Addedtyped-styles@0.0.7(transitive)

• + Addedwarning@4.0.3(transitive)