react-stick - npm Package Compare versions

Comparing version 3.0.6 to 4.0.0

babel.config.js

@@ -20,5 +20,3 @@ const { NODE_ENV } = process.env
     '@babel/plugin-proposal-object-rest-spread',
-
-    'lodash',
   ],
 }

demo/src/PositionAlignOverview.js

@@ -1,2 +0,1 @@
-import { compact } from 'lodash'
 import React, { useCallback, useRef, useState } from 'react'
@@ -8,4 +7,4 @@
 const formPairs = (listA: Array<string>, listB: Array<string>) =>
-  compact(
-    listA.map((a: string) =>
+  listA
+    .map((a: string) =>
       listB.map((b: string) => {
@@ -19,3 +18,3 @@ if (a === b) {
     )
-  )
+    .filter((pair) => pair !== null)
 
@@ -22,0 +21,0 @@ const verticals = ['top', 'middle', 'bottom']

demo/src/regressions/FitOnPage.js

@@ -1,2 +0,1 @@
-import { times } from 'lodash'
 import React from 'react'
@@ -28,3 +27,3 @@
   >
-    {times(1, () => 'Lorem ipsum dolor sit amet.').join(' ')}
+    {Array(10).fill('Lorem ipsum dolor sit amet.').join(' ')}
   </div>
@@ -31,0 +30,0 @@ )

demo/src/regressions/StickNodeWidth.js

@@ -59,3 +59,5 @@ import React from 'react'
           <Node>
-            This text must line-break as it would reach off-screen otherwise
+            This text must line-break as it would reach off-screen otherwise.
+            After we've increased page width, this text needed to be extended a
+            bit.
           </Node>
@@ -62,0 +64,0 @@ }

demo/src/regressions/StickOnHover.js

@@ -1,2 +0,1 @@
-import { range } from 'lodash'
 import React, { useState } from 'react'
@@ -17,7 +16,9 @@
       <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-        {range(100).map(i => (
-          <div key={i} style={{ marginLeft: 20, marginBottom: 20 }}>
-            <Popover />
-          </div>
-        ))}
+        {Array(100)
+          .fill(null)
+          .map((_, i) => (
+            <div key={i} style={{ marginLeft: 20, marginBottom: 20 }}>
+              <Popover />
+            </div>
+          ))}
       </div>
@@ -48,3 +49,3 @@ </Regression>
       width: 30,
-      backgroundColor: 'rgb(24, 170, 177)'
+      backgroundColor: 'rgb(24, 170, 177)',
     }}
@@ -59,3 +60,3 @@ />
       width: 10,
-      height: 10
+      height: 10,
     }}
@@ -62,0 +63,0 @@ >

lib/Stick.js

@@ -14,4 +14,2 @@ "use strict";
 
-var _some2 = _interopRequireDefault(require("lodash/some"));
-
 require("requestidlecallback");
@@ -23,3 +21,3 @@
 
-var _substyle = require("substyle");
+var _substyle = _interopRequireDefault(require("substyle"));
 
@@ -41,2 +39,9 @@ var _StickContext = require("./StickContext");
 var _jsxFileName = "/home/circleci/repo/src/Stick.js";
+var defaultStyles = {
+  node: {
+    position: 'absolute',
+    zIndex: 99,
+    textAlign: 'left'
+  }
+};
 
@@ -46,3 +51,2 @@ function Stick(_ref) {
       node = _ref.node,
-      style = _ref.style,
       sameWidth = _ref.sameWidth,
@@ -58,3 +62,6 @@ children = _ref.children,
       onClickOutside = _ref.onClickOutside,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["inline", "node", "style", "sameWidth", "children", "updateOnAnimationFrame", "position", "align", "component", "transportTo", "autoFlipHorizontally", "autoFlipVertically", "onClickOutside"]);
+      style = _ref.style,
+      className = _ref.className,
+      classNames = _ref.classNames,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["inline", "node", "sameWidth", "children", "updateOnAnimationFrame", "position", "align", "component", "transportTo", "autoFlipHorizontally", "autoFlipVertically", "onClickOutside", "style", "className", "classNames"]);
 
@@ -83,2 +90,11 @@ var _useState = (0, _react.useState)(0),
 
+  var styles = (0, _substyle.default)(defaultStyles, {
+    style: style,
+    className: className,
+    classNames: classNames
+  }, (0, _utils.getModifiers)({
+    position: resolvedPosition,
+    align: resolvedAlign,
+    sameWidth: sameWidth
+  }));
   (0, _react.useEffect)(function () {
@@ -131,6 +147,2 @@ var handleScroll = function handleScroll() {
   });
-  var resolvedStyle = style((0, _utils.getModifiers)({
-    position: resolvedPosition,
-    align: resolvedAlign
-  }));
   var handleReposition = (0, _react.useCallback)(function () {
@@ -148,3 +160,3 @@ if (nodeRef.current && anchorRef.current) {
         fileName: _jsxFileName,
-        lineNumber: 137,
+        lineNumber: 145,
         columnNumber: 7
@@ -155,3 +167,3 @@ }
       align: resolvedAlign,
-      style: resolvedStyle,
+      style: styles,
       node: node && /*#__PURE__*/_react.default.createElement(_StickNode.default, {
@@ -166,3 +178,3 @@ width: width,
           fileName: _jsxFileName,
-          lineNumber: 145,
+          lineNumber: 153,
           columnNumber: 15
@@ -180,3 +192,3 @@ }
         fileName: _jsxFileName,
-        lineNumber: 138,
+        lineNumber: 146,
         columnNumber: 9
@@ -192,3 +204,3 @@ }
       fileName: _jsxFileName,
-      lineNumber: 170,
+      lineNumber: 178,
       columnNumber: 5
@@ -214,7 +226,7 @@ }
         fileName: _jsxFileName,
-        lineNumber: 187,
+        lineNumber: 195,
         columnNumber: 13
       }
     }, node),
-    style: resolvedStyle,
+    style: styles,
     nestingKey: nestingKey,
@@ -226,3 +238,3 @@ containerRef: _containerRef,
       fileName: _jsxFileName,
-      lineNumber: 171,
+      lineNumber: 179,
       columnNumber: 7
@@ -244,3 +256,3 @@ }
     var nestedStickNodes = document.querySelectorAll("[data-stickNestingKey^='" + nestingKey + "']");
-    return !(0, _some2.default)(nestedStickNodes, function (stickNode) {
+    return !nestedStickNodes || !Array.from(nestedStickNodes).some(function (stickNode) {
       return stickNode.contains(target);
@@ -291,13 +303,4 @@ });
 
-var styled = (0, _substyle.defaultStyle)({
-  node: {
-    position: 'absolute',
-    zIndex: 99,
-    textAlign: 'left'
-  }
-}, _utils.getModifiers);
-
-var _default = styled(Stick);
-
+var _default = Stick;
 exports.default = _default;
 module.exports = exports.default;

lib/StickInline.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _substyle = require("substyle");
+var _substyle = _interopRequireDefault(require("substyle"));
 
@@ -24,3 +24,2 @@ var _utils = require("./utils");
       children = _ref.children,
-      style = _ref.style,
       component = _ref.component,
@@ -31,5 +30,12 @@ containerRef = _ref.containerRef,
       position = _ref.position,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["node", "children", "style", "component", "containerRef", "nestingKey", "align", "position"]);
+      style = _ref.style,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["node", "children", "component", "containerRef", "nestingKey", "align", "position", "style"]);
+  var styles = (0, _substyle.default)(defaultStyle, {
+    style: style
+  }, (0, _utils.getModifiers)({
+    align: align,
+    position: position
+  }));
   var Component = component || 'div';
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, style, rest, {
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, styles, {
     ref: containerRef,
@@ -40,10 +46,10 @@ "data-sticknestingkey": nestingKey,
       fileName: _jsxFileName,
-      lineNumber: 22,
+      lineNumber: 26,
       columnNumber: 5
     }
-  }), children, node && /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, style('node'), {
+  }), children, node && /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, styles('node'), {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 29,
+      lineNumber: 33,
       columnNumber: 16
@@ -54,3 +60,3 @@ }
 
-var styled = (0, _substyle.defaultStyle)({
+var defaultStyle = {
   position: 'relative',
@@ -92,7 +98,5 @@ node: {
   }
-}, _utils.getModifiers);
-
-var _default = styled(StickInline);
-
+};
+var _default = StickInline;
 exports.default = _default;
 module.exports = exports.default;

lib/StickNode.js

@@ -5,2 +5,4 @@ "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 exports.__esModule = true;
@@ -13,3 +15,3 @@ exports.default = void 0;
 
-var _substyle = require("substyle");
+var _substyle = _interopRequireWildcard(require("substyle"));
 
@@ -21,13 +23,23 @@ var _utils = require("./utils");
 function StickNode(_ref) {
-  var style = _ref.style,
-      children = _ref.children,
-      nodeRef = _ref.nodeRef;
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, style, {
+  var children = _ref.children,
+      width = _ref.width,
+      nodeRef = _ref.nodeRef,
+      align = _ref.align,
+      position = _ref.position,
+      sameWidth = _ref.sameWidth;
+  var styles = (0, _substyle.default)(defaultStyle, {}, (0, _utils.getModifiers)({
+    align: align,
+    position: position,
+    sameWidth: sameWidth
+  }));
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, (0, _substyle.inline)(styles, {
+    width: width
+  }), {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 29,
+      lineNumber: 35,
       columnNumber: 5
     }
-  }), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, style('content'), {
+  }), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, styles('content'), {
     ref: nodeRef,
@@ -37,3 +49,3 @@ __self: this,
       fileName: _jsxFileName,
-      lineNumber: 30,
+      lineNumber: 36,
       columnNumber: 7
@@ -44,55 +56,49 @@ }
 
-var styled = (0, _substyle.defaultStyle)(function (_ref2) {
-  var width = _ref2.width;
-  return {
+var defaultStyle = {
+  position: 'absolute',
+  right: 0,
+  bottom: 0,
+  content: {
+    // absolute position is needed as the stick node would otherwise
+    // cover up the base node and, for instance, make it impossible to
+    // click buttons
     position: 'absolute',
-    right: 0,
-    bottom: 0,
-    width: width,
+    display: 'inline-block',
+    left: 'inherit',
+    right: 'inherit',
+    top: 'inherit',
+    bottom: 'inherit'
+  },
+  '&sameWidth': {
     content: {
-      // absolute position is needed as the stick node would otherwise
-      // cover up the base node and, for instance, make it impossible to
-      // click buttons
-      position: 'absolute',
-      display: 'inline-block',
-      left: 'inherit',
-      right: 'inherit',
-      top: 'inherit',
-      bottom: 'inherit'
+      display: 'block',
+      width: '100%'
+    }
+  },
+  '&align-left': {
+    right: 'auto',
+    left: 0
+  },
+  '&align-top': {
+    bottom: 'auto',
+    top: 0
+  },
+  '&align-middle': {
+    content: {
+      transform: 'translate(0, 50%)'
+    }
+  },
+  '&align-center': {
+    content: {
+      transform: 'translate(50%, 0)'
     },
-    '&sameWidth': {
-      content: {
-        display: 'block',
-        width: '100%'
-      }
-    },
-    '&align-left': {
-      right: 'auto',
-      left: 0
-    },
-    '&align-top': {
-      bottom: 'auto',
-      top: 0
-    },
     '&align-middle': {
       content: {
-        transform: 'translate(0, 50%)'
+        transform: 'translate(50%, 50%)'
       }
-    },
-    '&align-center': {
-      content: {
-        transform: 'translate(50%, 0)'
-      },
-      '&align-middle': {
-        content: {
-          transform: 'translate(50%, 50%)'
-        }
-      }
     }
-  };
-}, _utils.getModifiers);
-
-var _default = styled(StickNode);
-
+  }
+};
+var _default = StickNode;
 exports.default = _default;
 module.exports = exports.default;

lib/StickPortal.js

@@ -12,4 +12,2 @@ "use strict";
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
@@ -23,2 +21,4 @@
 
+var _substyle = require("substyle");
+
 var _reactDom = require("react-dom");
@@ -32,6 +32,2 @@
 
-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 StickPortal(_ref, _ref2) {
@@ -103,9 +99,4 @@ var children = _ref.children,
   });
-
-  var _style = style('node'),
-      nodeStyle = _style.style,
-      otherNodeStyleProps = (0, _objectWithoutPropertiesLoose2.default)(_style, ["style"]);
-
   var Component = component || 'div';
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, style, rest, {
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, style, {
     ref: function ref(node) {
@@ -123,3 +114,3 @@ if (typeof _ref2 === 'function') {
       fileName: _jsxFileName,
-      lineNumber: 94,
+      lineNumber: 93,
       columnNumber: 5
@@ -132,17 +123,17 @@ }
       fileName: _jsxFileName,
-      lineNumber: 109,
+      lineNumber: 108,
       columnNumber: 7
     }
-  }, (0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, otherNodeStyleProps, {
+  }, (0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     ref: containerRef,
-    "data-sticknestingkey": nestingKey,
-    style: _objectSpread({}, nodeStyle, {
-      position: 'absolute',
-      top: top,
-      left: left
-    }),
+    "data-sticknestingkey": nestingKey
+  }, (0, _substyle.inline)(style('node'), {
+    position: 'absolute',
+    top: top,
+    left: left
+  }), {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 111,
+      lineNumber: 110,
       columnNumber: 11
@@ -149,0 +140,0 @@ }

nwb.config.js

 module.exports = {
   type: 'react-component',
   babel: {
-    cherryPick: 'lodash',
     env: {
@@ -6,0 +5,0 @@ targets: {

package.json

 {
   "name": "react-stick",
-  "version": "3.0.6",
+  "version": "4.0.0",
   "description": "React component to stick a portaled node to an anchor node",
@@ -30,12 +30,10 @@ "main": "lib/index.js",
     "invariant": "^2.2.4",
-    "lodash": "^4.17.4",
-    "recompose": "0.30.0",
     "requestidlecallback": "^0.3.0",
-    "substyle": "^7.1.3"
+    "substyle": "^9.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.9.0",
-    "@babel/plugin-proposal-object-rest-spread": "7.9.5",
-    "@babel/plugin-transform-runtime": "7.9.0",
-    "@babel/preset-env": "7.9.5",
+    "@babel/core": "7.9.6",
+    "@babel/plugin-proposal-object-rest-spread": "7.9.6",
+    "@babel/plugin-transform-runtime": "7.9.6",
+    "@babel/preset-env": "7.9.6",
     "@babel/preset-flow": "7.9.0",
@@ -54,17 +52,17 @@ "@babel/preset-react": "7.9.4",
     "eslint-plugin-react": "7.19.0",
-    "eslint-plugin-react-hooks": "3.0.0",
-    "flow-bin": "0.123.0",
+    "eslint-plugin-react-hooks": "4.0.0",
+    "flow-bin": "0.124.0",
     "flow-copy-source": "2.0.9",
     "glamor": "2.20.40",
     "html-webpack-harddisk-plugin": "1.0.1",
-    "html-webpack-plugin": "4.2.0",
+    "html-webpack-plugin": "4.3.0",
     "inferno": "7.4.2",
     "nwb": "0.24.5",
-    "prettier": "2.0.4",
+    "prettier": "2.0.5",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "regenerator-runtime": "0.13.5",
-    "semantic-release": "17.0.6",
-    "substyle-glamor": "2.1.3",
-    "webpack": "4.42.1",
+    "semantic-release": "17.0.7",
+    "substyle-glamor": "4.0.1",
+    "webpack": "4.43.0",
     "webpack-cli": "3.3.11",
@@ -71,0 +69,0 @@ "webpack-dev-server": "3.10.3"

src/flowTypes.js

 // @flow
 import type { Node } from 'react'
-import type { Substyle } from 'substyle'
+import type { StylingProps, Substyle } from 'substyle'
 
@@ -27,3 +27,5 @@ export type VerticalTargetT = 'bottom' | 'middle' | 'top'
 
-export type ApiPropsT = {|
+export type StickPropsT = {|
+  ...$Exact<StylingProps>,
+
   position?: PositionT,
@@ -39,4 +41,2 @@ align?: AlignT,
 
-  style?: Substyle,
-
   component?: string,
@@ -52,24 +52,2 @@
 
-export type StickPropsT = {|
-  position: PositionT,
-  align: AlignT,
-
-  inline?: boolean,
-  sameWidth?: boolean,
-
-  updateOnAnimationFrame?: boolean,
-
-  style?: Substyle,
-
-  component?: string,
-
-  transportTo: ?HTMLElement,
-
-  node: Node,
-  children: Node,
-
-  onClickOutside?: (ev: MouseEvent) => void,
-  onReposition: (nodeRef: HTMLElement, anchorRef: HTMLElement) => void,
-|}
-
 type SpecificStickBasePropsT = {|
@@ -76,0 +54,0 @@ children: Node,

src/Stick.js

@@ -5,3 +5,2 @@ // @flow
 import invariant from 'invariant'
-import { some } from 'lodash'
 import React, {
@@ -14,4 +13,3 @@ useCallback,
 } from 'react'
-import { type HOC } from 'recompose'
-import { type Substyle, defaultStyle } from 'substyle'
+import useStyles from 'substyle'
 
@@ -23,16 +21,17 @@ import { StickContext } from './StickContext'
 import DEFAULT_POSITION from './defaultPosition'
-import { type AlignT, type ApiPropsT, type PositionT } from './flowTypes'
+import { type AlignT, type PositionT, type StickPropsT } from './flowTypes'
 import { useAutoFlip, useWatcher } from './hooks'
 import { getDefaultAlign, getModifiers, scrollX, uniqueId } from './utils'
 
-type PropsT = {|
-  ...ApiPropsT,
+const defaultStyles = {
+  node: {
+    position: 'absolute',
+    zIndex: 99,
+    textAlign: 'left',
+  },
+}
 
-  style: Substyle,
-|}
-
 function Stick({
   inline,
   node,
-  style,
   sameWidth,
@@ -48,4 +47,7 @@ children,
   onClickOutside,
+  style,
+  className,
+  classNames,
   ...rest
-}: PropsT) {
+}: StickPropsT) {
   const [width, setWidth] = useState(0)
@@ -68,2 +70,12 @@ const [containerNestingKeyExtension] = useState(() => uniqueId())
 
+  const styles = useStyles(
+    defaultStyles,
+    { style, className, classNames },
+    getModifiers({
+      position: resolvedPosition,
+      align: resolvedAlign,
+      sameWidth,
+    })
+  )
+
   useEffect(() => {
@@ -130,6 +142,2 @@ const handleScroll = () => {
 
-  const resolvedStyle = style(
-    getModifiers({ position: resolvedPosition, align: resolvedAlign })
-  )
-
   const handleReposition = useCallback(() => {
@@ -148,3 +156,3 @@ if (nodeRef.current && anchorRef.current) {
           align={resolvedAlign}
-          style={resolvedStyle}
+          style={styles}
           node={
@@ -205,3 +213,3 @@ node && (
         }
-        style={resolvedStyle}
+        style={styles}
         nestingKey={nestingKey}
@@ -232,3 +240,9 @@ containerRef={containerRef}
     )
-    return !some(nestedStickNodes, (stickNode) => stickNode.contains(target))
+
+    return (
+      !nestedStickNodes ||
+      !Array.from(nestedStickNodes).some((stickNode) =>
+        stickNode.contains(target)
+      )
+    )
   }
@@ -285,13 +299,2 @@
 
-const styled: HOC<*, ApiPropsT> = defaultStyle(
-  {
-    node: {
-      position: 'absolute',
-      zIndex: 99,
-      textAlign: 'left',
-    },
-  },
-  getModifiers
-)
-
-export default styled(Stick)
+export default Stick

src/StickInline.js

 // @flow
 import React from 'react'
-import { type HOC } from 'recompose'
-import { defaultStyle } from 'substyle'
+import useStyles from 'substyle'
 
@@ -12,3 +11,2 @@ import { type StickInlinePropsT } from './flowTypes'
   children,
-  style,
   component,
@@ -19,9 +17,15 @@ containerRef,
   position,
+  style,
   ...rest
 }: StickInlinePropsT) {
+  const styles = useStyles(
+    defaultStyle,
+    { style },
+    getModifiers({ align, position })
+  )
   const Component = component || 'div'
   return (
     <Component
-      {...style}
       {...rest}
+      {...styles}
       ref={containerRef}
@@ -31,3 +35,3 @@ data-sticknestingkey={nestingKey}
       {children}
-      {node && <div {...style('node')}>{node}</div>}
+      {node && <div {...styles('node')}>{node}</div>}
     </Component>
@@ -37,47 +41,44 @@ )
 
-const styled: HOC<*, StickInlinePropsT> = defaultStyle(
-  {
-    position: 'relative',
+const defaultStyle = {
+  position: 'relative',
 
+  node: {
+    position: 'absolute',
+    zIndex: 99,
+    textAlign: 'left',
+  },
+
+  '&position-top': {
     node: {
-      position: 'absolute',
-      zIndex: 99,
-      textAlign: 'left',
+      top: 0,
     },
-
-    '&position-top': {
-      node: {
-        top: 0,
-      },
+  },
+  '&position-middle': {
+    node: {
+      top: '50%',
     },
-    '&position-middle': {
-      node: {
-        top: '50%',
-      },
+  },
+  '&position-bottom': {
+    node: {
+      top: '100%',
     },
-    '&position-bottom': {
-      node: {
-        top: '100%',
-      },
-    },
+  },
 
-    '&position-left': {
-      node: {
-        left: 0,
-      },
+  '&position-left': {
+    node: {
+      left: 0,
     },
-    '&position-center': {
-      node: {
-        left: '50%',
-      },
+  },
+  '&position-center': {
+    node: {
+      left: '50%',
     },
-    '&position-right': {
-      node: {
-        left: '100%',
-      },
+  },
+  '&position-right': {
+    node: {
+      left: '100%',
     },
   },
-  getModifiers
-)
+}
 
-export default styled(StickInline)
+export default StickInline

src/StickNode.js

 // @flow
 import React, { type Node } from 'react'
-import { type HOC } from 'recompose'
-import { type Substyle, defaultStyle } from 'substyle'
+import useStyles, { inline } from 'substyle'
 
@@ -9,3 +8,3 @@ import { type AlignT, type PositionT, type RefT } from './flowTypes'
 
-type ApiPropsT = {|
+type PropsT = {|
   width: number,
@@ -22,12 +21,19 @@
 
-type PropsT = {|
-  ...ApiPropsT,
+function StickNode({
+  children,
+  width,
+  nodeRef,
+  align,
+  position,
+  sameWidth,
+}: PropsT) {
+  const styles = useStyles(
+    defaultStyle,
+    {},
+    getModifiers({ align, position, sameWidth })
+  )
 
-  style: Substyle,
-|}
-
-function StickNode({ style, children, nodeRef }: PropsT) {
   return (
-    <div {...style}>
-      <div {...style('content')} ref={nodeRef}>
+    <div {...inline(styles, { width })}>
+      <div {...styles('content')} ref={nodeRef}>
         {children}
@@ -39,58 +45,53 @@ </div>
 
-const styled: HOC<*, ApiPropsT> = defaultStyle(
-  ({ width }) => ({
+const defaultStyle = {
+  position: 'absolute',
+  right: 0,
+  bottom: 0,
+
+  content: {
+    // absolute position is needed as the stick node would otherwise
+    // cover up the base node and, for instance, make it impossible to
+    // click buttons
     position: 'absolute',
-    right: 0,
-    bottom: 0,
+    display: 'inline-block',
 
-    width,
+    left: 'inherit',
+    right: 'inherit',
+    top: 'inherit',
+    bottom: 'inherit',
+  },
 
+  '&sameWidth': {
     content: {
-      // absolute position is needed as the stick node would otherwise
-      // cover up the base node and, for instance, make it impossible to
-      // click buttons
-      position: 'absolute',
-      display: 'inline-block',
-
-      left: 'inherit',
-      right: 'inherit',
-      top: 'inherit',
-      bottom: 'inherit',
+      display: 'block',
+      width: '100%',
     },
+  },
 
-    '&sameWidth': {
-      content: {
-        display: 'block',
-        width: '100%',
-      },
-    },
+  '&align-left': {
+    right: 'auto',
+    left: 0,
+  },
+  '&align-top': {
+    bottom: 'auto',
+    top: 0,
+  },
 
-    '&align-left': {
-      right: 'auto',
-      left: 0,
+  '&align-middle': {
+    content: {
+      transform: 'translate(0, 50%)',
     },
-    '&align-top': {
-      bottom: 'auto',
-      top: 0,
+  },
+  '&align-center': {
+    content: {
+      transform: 'translate(50%, 0)',
     },
-
     '&align-middle': {
       content: {
-        transform: 'translate(0, 50%)',
+        transform: 'translate(50%, 50%)',
       },
     },
-    '&align-center': {
-      content: {
-        transform: 'translate(50%, 0)',
-      },
-      '&align-middle': {
-        content: {
-          transform: 'translate(50%, 50%)',
-        },
-      },
-    },
-  }),
-  getModifiers
-)
+  },
+}
 
-export default styled(StickNode)
+export default StickNode

src/StickPortal.js

@@ -15,2 +15,3 @@ // @flow
 } from 'react'
+import { inline } from 'substyle'
 import { createPortal } from 'react-dom'
@@ -91,9 +92,7 @@
 
-  const { style: nodeStyle, ...otherNodeStyleProps } = style('node')
-
   const Component = component || 'div'
   return (
     <Component
+      {...rest}
       {...style}
-      {...rest}
       ref={(node) => {
@@ -114,11 +113,9 @@ if (typeof ref === 'function') {
           <div
-            {...otherNodeStyleProps}
             ref={containerRef}
             data-sticknestingkey={nestingKey}
-            style={{
-              ...nodeStyle,
+            {...inline(style('node'), {
               position: 'absolute',
               top,
               left,
-            }}
+            })}
           >
@@ -125,0 +122,0 @@ {node}

src/utils/getModifiers.js

@@ -9,3 +9,2 @@ // @flow
   position: PositionT,
-
   sameWidth?: boolean,
@@ -12,0 +11,0 @@ }

tests/nodeWidth.test.js

 import expect from 'expect'
 import React, { cloneElement } from 'react'
 import { render as renderBase, unmountComponentAtNode } from 'react-dom'
-import { times } from 'lodash'
 
@@ -11,3 +10,3 @@ import Stick from 'src/'
 
-  const longText = times(50, () => 'Lorem ipsum dolor sit amet.').join(' ')
+  const longText = new Array(50).fill('Lorem ipsum dolor sit amet.').join(' ')
   const anchor = <div id="anchor" />
@@ -25,3 +24,3 @@ const node = <div id="node">{longText}</div>
             node: cloneElement(stick.props.node, {
-              ref: el => !!el && !called && window.setTimeout(callback, 1),
+              ref: (el) => !!el && !called && window.setTimeout(callback, 1),
             }),
@@ -47,5 +46,5 @@ })}
   const inlineOptions = [false, true]
-  inlineOptions.forEach(inline => {
+  inlineOptions.forEach((inline) => {
     describe(`inline={${inline}}`, () => {
-      it('should make sure that a left aligned node stretches to the right screen border', done => {
+      it('should make sure that a left aligned node stretches to the right screen border', (done) => {
         render(
@@ -70,3 +69,3 @@ <Stick
 
-      it('should make sure that a right aligned node stretches to the left screen border', done => {
+      it('should make sure that a right aligned node stretches to the left screen border', (done) => {
         render(
@@ -92,3 +91,3 @@ <Stick
       describe('sameWidth={true}', () => {
-        it('should make sure that the stick node has the same width as the anchor', done => {
+        it('should make sure that the stick node has the same width as the anchor', (done) => {
           render(
@@ -95,0 +94,0 @@ <Stick inline={inline} sameWidth node={node}>

tests/scroll.test.js

 import expect from 'expect'
 import React, { cloneElement } from 'react'
 import { render as renderBase, unmountComponentAtNode } from 'react-dom'
-import { times } from 'lodash'
 
@@ -11,3 +10,3 @@ import Stick from 'src/'
 
-  const longText = times(50, () => 'Lorem ipsum dolor sit amet.').join(' ')
+  const longText = new Array(50).fill('Lorem ipsum dolor sit amet.').join(' ')
   const anchor = <div id="anchor" />
@@ -25,3 +24,3 @@ const node = <div id="node">{longText}</div>
             node: cloneElement(stick.props.node, {
-              ref: el => !!el && !called && window.setTimeout(callback, 1),
+              ref: (el) => !!el && !called && window.setTimeout(callback, 1),
             }),
@@ -52,3 +51,3 @@ })}
 
-  it('should keep the correct the node position when scrolling', done => {
+  it('should keep the correct the node position when scrolling', (done) => {
     render(
@@ -74,3 +73,3 @@ <Stick position="bottom left" align="top left" node={node}>
 
-  it('should keep the correct the node position when transported to a fixed container', done => {
+  it('should keep the correct the node position when transported to a fixed container', (done) => {
     render(
@@ -77,0 +76,0 @@ <Stick

No alert changes

Improved metrics

Dependency count

5

decreased by-28.57%

Lines of code

9189

increased by0.02%

Worsened metrics

Total package byte prevSize

358241

decreased by-0.57%

Dependency changes

• + Addedsubstyle@9.4.1(transitive)

• - Removedlodash@^4.17.4

• - Removedrecompose@0.30.0

• - Removedasap@2.0.6(transitive)

• - Removedchange-emitter@0.1.6(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removedhoist-non-react-statics@2.5.53.3.2(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removedlodash@4.17.21(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedreact-lifecycles-compat@3.0.4(transitive)

• - Removedrecompose@0.30.0(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedsubstyle@7.1.3(transitive)

• - Removedsymbol-observable@1.2.0(transitive)

• - Removedua-parser-js@0.7.40(transitive)

• - Removedwarning@2.1.0(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)

• Updatedsubstyle@^9.1.0