react-fit - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

dist/esm/Fit.js

@@ -1,35 +0,38 @@
-var _excluded = ["invertAxis", "invertSecondaryAxis"];
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-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; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React, { Component } from 'react';
@@ -40,312 +43,225 @@ import { findDOMNode } from 'react-dom';
 import warning from 'tiny-warning';
-var isBrowser = typeof window !== 'undefined';
+var isBrowser = typeof document !== 'undefined';
 var isDisplayContentsSupported = isBrowser && 'CSS' in window && 'supports' in window.CSS && CSS.supports('display', 'contents');
 var isMutationObserverSupported = isBrowser && 'MutationObserver' in window;
-
-function capitalize(a) {
-  return a[0].toUpperCase() + a.slice(1);
+function capitalize(string) {
+    return (string.charAt(0).toUpperCase() + string.slice(1));
 }
-
 function findScrollContainer(element) {
-  if (!element) {
-    return undefined;
-  }
-
-  var parent = element.parentElement;
-
-  while (parent) {
-    var _window$getComputedSt = window.getComputedStyle(parent),
-        overflow = _window$getComputedSt.overflow;
-
-    if (overflow.split(' ').every(function (o) {
-      return o === 'auto' || o === 'scroll';
-    })) {
-      return parent;
+    var parent = element.parentElement;
+    while (parent) {
+        var overflow = window.getComputedStyle(parent).overflow;
+        if (overflow.split(' ').every(function (o) { return o === 'auto' || o === 'scroll'; })) {
+            return parent;
+        }
+        parent = parent.parentElement;
     }
-
-    parent = parent.parentElement;
-  }
-
-  return document.documentElement;
+    return document.documentElement;
 }
-
-function alignAxis(_ref) {
-  var axis = _ref.axis,
-      container = _ref.container,
-      element = _ref.element,
-      invertAxis = _ref.invertAxis,
-      secondary = _ref.secondary,
-      scrollContainer = _ref.scrollContainer,
-      spacing = _ref.spacing;
-  var style = window.getComputedStyle(element);
-  var parent = container.parentElement;
-  var scrollContainerCollisions = detectElementOverflow(parent, scrollContainer);
-  var documentCollisions = detectElementOverflow(parent, document.documentElement);
-  var isX = axis === 'x';
-  var startProperty = isX ? 'left' : 'top';
-  var endProperty = isX ? 'right' : 'bottom';
-  var sizeProperty = isX ? 'width' : 'height';
-  var overflowStartProperty = "overflow".concat(capitalize(startProperty));
-  var overflowEndProperty = "overflow".concat(capitalize(endProperty));
-  var scrollProperty = "scroll".concat(capitalize(startProperty));
-  var uppercasedSizeProperty = capitalize(sizeProperty);
-  var offsetSizeProperty = "offset".concat(uppercasedSizeProperty);
-  var clientSizeProperty = "client".concat(uppercasedSizeProperty);
-  var minSizeProperty = "min-".concat(sizeProperty);
-  var scrollbarWidth = scrollContainer[offsetSizeProperty] - scrollContainer[clientSizeProperty];
-  var startSpacing = _typeof(spacing) === 'object' ? spacing[startProperty] : spacing;
-  var availableStartSpace = -Math.max(scrollContainerCollisions[overflowStartProperty], documentCollisions[overflowStartProperty] + document.documentElement[scrollProperty]) - startSpacing;
-  var endSpacing = _typeof(spacing) === 'object' ? spacing[endProperty] : spacing;
-  var availableEndSpace = -Math.max(scrollContainerCollisions[overflowEndProperty], documentCollisions[overflowEndProperty] - document.documentElement[scrollProperty]) - endSpacing - scrollbarWidth;
-
-  if (secondary) {
-    availableStartSpace += parent[clientSizeProperty];
-    availableEndSpace += parent[clientSizeProperty];
-  }
-
-  var offsetSize = element[offsetSizeProperty];
-
-  function displayStart() {
-    element.style[startProperty] = 'auto';
-    element.style[endProperty] = secondary ? '0' : '100%';
-  }
-
-  function displayEnd() {
-    element.style[startProperty] = secondary ? '0' : '100%';
-    element.style[endProperty] = 'auto';
-  }
-
-  function displayIfFits(availableSpace, display) {
-    var fits = offsetSize <= availableSpace;
-
-    if (fits) {
-      display();
+function alignAxis(_a) {
+    var axis = _a.axis, container = _a.container, element = _a.element, invertAxis = _a.invertAxis, secondary = _a.secondary, scrollContainer = _a.scrollContainer, spacing = _a.spacing;
+    var style = window.getComputedStyle(element);
+    var parent = container.parentElement;
+    if (!parent) {
+        return;
     }
-
-    return fits;
-  }
-
-  function displayStartIfFits() {
-    return displayIfFits(availableStartSpace, displayStart);
-  }
-
-  function displayEndIfFits() {
-    return displayIfFits(availableEndSpace, displayEnd);
-  }
-
-  function displayWhereverShrinkedFits() {
-    var moreSpaceStart = availableStartSpace > availableEndSpace;
-    var minSize = style[minSizeProperty] && parseInt(style[minSizeProperty], 10);
-
-    function shrinkToSize(size) {
-      warning(!minSize || size >= minSize, "<Fit />'s child will not fit anywhere with its current ".concat(minSizeProperty, " of ").concat(minSize, "px."));
-      var newSize = Math.max(size, minSize || 0);
-      warning(false, "<Fit />'s child needed to have its ".concat(sizeProperty, " decreased to ").concat(newSize, "px."));
-      element.style[sizeProperty] = "".concat(newSize, "px");
+    var scrollContainerCollisions = detectElementOverflow(parent, scrollContainer);
+    var documentCollisions = detectElementOverflow(parent, document.documentElement);
+    var isX = axis === 'x';
+    var startProperty = isX ? 'left' : 'top';
+    var endProperty = isX ? 'right' : 'bottom';
+    var sizeProperty = isX ? 'width' : 'height';
+    var overflowStartProperty = "overflow".concat(capitalize(startProperty));
+    var overflowEndProperty = "overflow".concat(capitalize(endProperty));
+    var scrollProperty = "scroll".concat(capitalize(startProperty));
+    var uppercasedSizeProperty = capitalize(sizeProperty);
+    var offsetSizeProperty = "offset".concat(uppercasedSizeProperty);
+    var clientSizeProperty = "client".concat(uppercasedSizeProperty);
+    var minSizeProperty = "min-".concat(sizeProperty);
+    var scrollbarWidth = scrollContainer[offsetSizeProperty] - scrollContainer[clientSizeProperty];
+    var startSpacing = typeof spacing === 'object' ? spacing[startProperty] : spacing;
+    var availableStartSpace = -Math.max(scrollContainerCollisions[overflowStartProperty], documentCollisions[overflowStartProperty] + document.documentElement[scrollProperty]) - startSpacing;
+    var endSpacing = typeof spacing === 'object' ? spacing[endProperty] : spacing;
+    var availableEndSpace = -Math.max(scrollContainerCollisions[overflowEndProperty], documentCollisions[overflowEndProperty] - document.documentElement[scrollProperty]) -
+        endSpacing -
+        scrollbarWidth;
+    if (secondary) {
+        availableStartSpace += parent[clientSizeProperty];
+        availableEndSpace += parent[clientSizeProperty];
     }
-
-    if (moreSpaceStart) {
-      shrinkToSize(availableStartSpace);
-      displayStart();
-    } else {
-      shrinkToSize(availableEndSpace);
-      displayEnd();
+    var offsetSize = element[offsetSizeProperty];
+    function displayStart() {
+        element.style[startProperty] = 'auto';
+        element.style[endProperty] = secondary ? '0' : '100%';
     }
-  }
-
-  var fits;
-
-  if (invertAxis) {
-    fits = displayStartIfFits() || displayEndIfFits();
-  } else {
-    fits = displayEndIfFits() || displayStartIfFits();
-  }
-
-  if (!fits) {
-    displayWhereverShrinkedFits();
-  }
+    function displayEnd() {
+        element.style[startProperty] = secondary ? '0' : '100%';
+        element.style[endProperty] = 'auto';
+    }
+    function displayIfFits(availableSpace, display) {
+        var fits = offsetSize <= availableSpace;
+        if (fits) {
+            display();
+        }
+        return fits;
+    }
+    function displayStartIfFits() {
+        return displayIfFits(availableStartSpace, displayStart);
+    }
+    function displayEndIfFits() {
+        return displayIfFits(availableEndSpace, displayEnd);
+    }
+    function displayWhereverShrinkedFits() {
+        var moreSpaceStart = availableStartSpace > availableEndSpace;
+        var rawMinSize = style.getPropertyValue(minSizeProperty);
+        var minSize = rawMinSize ? parseInt(rawMinSize, 10) : null;
+        function shrinkToSize(size) {
+            warning(!minSize || size >= minSize, "<Fit />'s child will not fit anywhere with its current ".concat(minSizeProperty, " of ").concat(minSize, "px."));
+            var newSize = Math.max(size, minSize || 0);
+            warning(false, "<Fit />'s child needed to have its ".concat(sizeProperty, " decreased to ").concat(newSize, "px."));
+            element.style[sizeProperty] = "".concat(newSize, "px");
+        }
+        if (moreSpaceStart) {
+            shrinkToSize(availableStartSpace);
+            displayStart();
+        }
+        else {
+            shrinkToSize(availableEndSpace);
+            displayEnd();
+        }
+    }
+    var fits;
+    if (invertAxis) {
+        fits = displayStartIfFits() || displayEndIfFits();
+    }
+    else {
+        fits = displayEndIfFits() || displayStartIfFits();
+    }
+    if (!fits) {
+        displayWhereverShrinkedFits();
+    }
 }
-
 function alignMainAxis(args) {
-  alignAxis(args);
+    alignAxis(args);
 }
-
 function alignSecondaryAxis(args) {
-  alignAxis(_objectSpread(_objectSpread({}, args), {}, {
-    axis: args.axis === 'x' ? 'y' : 'x',
-    secondary: true
-  }));
+    alignAxis(__assign(__assign({}, args), { axis: args.axis === 'x' ? 'y' : 'x', secondary: true }));
 }
-
 function alignBothAxis(args) {
-  var invertAxis = args.invertAxis,
-      invertSecondaryAxis = args.invertSecondaryAxis,
-      commonArgs = _objectWithoutProperties(args, _excluded);
-
-  alignMainAxis(_objectSpread(_objectSpread({}, commonArgs), {}, {
-    invertAxis: invertAxis
-  }));
-  alignSecondaryAxis(_objectSpread(_objectSpread({}, commonArgs), {}, {
-    invertAxis: invertSecondaryAxis
-  }));
+    var invertAxis = args.invertAxis, invertSecondaryAxis = args.invertSecondaryAxis, commonArgs = __rest(args, ["invertAxis", "invertSecondaryAxis"]);
+    alignMainAxis(__assign(__assign({}, commonArgs), { invertAxis: invertAxis }));
+    alignSecondaryAxis(__assign(__assign({}, commonArgs), { invertAxis: invertSecondaryAxis }));
 }
-
-var Fit = /*#__PURE__*/function (_Component) {
-  _inherits(Fit, _Component);
-
-  var _super = _createSuper(Fit);
-
-  function Fit() {
-    var _this;
-
-    _classCallCheck(this, Fit);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+var Fit = /** @class */ (function (_super) {
+    __extends(Fit, _super);
+    function Fit() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.fit = function () {
+            var _a = _this, scrollContainer = _a.scrollContainer, container = _a.container, element = _a.element;
+            if (!scrollContainer || !container || !element) {
+                return;
+            }
+            var elementWidth = element.clientWidth;
+            var elementHeight = element.clientHeight;
+            // No need to recalculate - already did that for current dimensions
+            if (_this.elementWidth === elementWidth && _this.elementHeight === elementHeight) {
+                return;
+            }
+            // Save the dimensions so that we know we don't need to repeat the function if unchanged
+            _this.elementWidth = elementWidth;
+            _this.elementHeight = elementHeight;
+            var parent = container.parentElement;
+            // Container was unmounted
+            if (!parent) {
+                return;
+            }
+            /**
+             * We need to ensure that <Fit />'s child has a absolute position. Otherwise,
+             * we wouldn't be able to place the child in the correct position.
+             */
+            var style = window.getComputedStyle(element);
+            var position = style.position;
+            if (position !== 'absolute') {
+                element.style.position = 'absolute';
+            }
+            /**
+             * We need to ensure that <Fit />'s parent has a relative or absolute position. Otherwise,
+             * we wouldn't be able to place the child in the correct position.
+             */
+            var parentStyle = window.getComputedStyle(parent);
+            var parentPosition = parentStyle.position;
+            if (parentPosition !== 'relative' && parentPosition !== 'absolute') {
+                parent.style.position = 'relative';
+            }
+            var _b = _this.props, invertAxis = _b.invertAxis, invertSecondaryAxis = _b.invertSecondaryAxis, _c = _b.mainAxis, mainAxis = _c === void 0 ? 'y' : _c, _d = _b.spacing, spacing = _d === void 0 ? 8 : _d;
+            alignBothAxis({
+                container: container,
+                element: element,
+                invertAxis: invertAxis,
+                invertSecondaryAxis: invertSecondaryAxis,
+                axis: mainAxis,
+                scrollContainer: scrollContainer,
+                spacing: spacing,
+            });
+        };
+        return _this;
     }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "onMutation", function () {
-      _this.fit();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "mutationObserver", isMutationObserverSupported && new MutationObserver(_this.onMutation));
-
-    _defineProperty(_assertThisInitialized(_this), "fit", function () {
-      var _assertThisInitialize = _assertThisInitialized(_this),
-          scrollContainer = _assertThisInitialize.scrollContainer,
-          container = _assertThisInitialize.container,
-          element = _assertThisInitialize.element;
-
-      if (!element) {
-        return;
-      }
-
-      var elementWidth = element.clientWidth;
-      var elementHeight = element.clientHeight; // No need to recalculate - already did that for current dimensions
-
-      if (_this.elementWidth === elementWidth && _this.elementHeight === elementHeight) {
-        return;
-      } // Save the dimensions so that we know we don't need to repeat the function if unchanged
-
-
-      _this.elementWidth = elementWidth;
-      _this.elementHeight = elementHeight;
-      var parent = container.parentElement; // Container was unmounted
-
-      if (!parent) {
-        return;
-      }
-      /**
-       * We need to ensure that <Fit />'s child has a absolute position. Otherwise,
-       * we wouldn't be able to place the child in the correct position.
-       */
-
-
-      var style = window.getComputedStyle(element);
-      var position = style.position;
-
-      if (position !== 'absolute') {
-        warning(false, '<Fit />\'s child does not have absolute position. You should apply `position: absolute` to it.');
-        element.style.position = 'absolute';
-      }
-      /**
-       * We need to ensure that <Fit />'s parent has a relative position. Otherwise,
-       * we wouldn't be able to place the child in the correct position.
-       */
-
-
-      var parentStyle = window.getComputedStyle(parent);
-      var parentPosition = parentStyle.position;
-
-      if (parentPosition !== 'relative' && parentPosition !== 'absolute') {
-        warning(false, '<Fit />\'s parent does not have relative position. You should apply `position: relative` to it.');
-        parent.style.position = 'relative';
-      }
-
-      var _this$props = _this.props,
-          invertAxis = _this$props.invertAxis,
-          invertSecondaryAxis = _this$props.invertSecondaryAxis,
-          mainAxis = _this$props.mainAxis,
-          spacing = _this$props.spacing;
-      alignBothAxis({
-        container: container,
-        element: element,
-        invertAxis: invertAxis,
-        invertSecondaryAxis: invertSecondaryAxis,
-        axis: mainAxis,
-        scrollContainer: scrollContainer,
-        spacing: spacing
-      });
-    });
-
-    return _this;
-  }
-
-  _createClass(Fit, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (!isDisplayContentsSupported) {
-        // eslint-disable-next-line react/no-find-dom-node
-        var element = findDOMNode(this);
-        this.container = element;
-        this.element = element;
-        this.scrollContainer = findScrollContainer(element);
-      }
-
-      this.fit();
-
-      if (isMutationObserverSupported) {
-        this.mutationObserver.observe(this.element, {
-          attributes: true,
-          attributeFilter: ['class', 'style']
-        });
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var children = this.props.children;
-      var child = React.Children.only(children);
-
-      if (isDisplayContentsSupported) {
-        return /*#__PURE__*/React.createElement("span", {
-          ref: function ref(container) {
-            _this2.container = container;
-            var element = container && container.firstChild;
-            _this2.element = element;
-            _this2.scrollContainer = findScrollContainer(element);
-          },
-          style: {
-            display: 'contents'
-          }
-        }, child);
-      }
-
-      return child;
-    }
-  }]);
-
-  return Fit;
-}(Component);
-
-export { Fit as default };
-Fit.propTypes = {
-  children: PropTypes.node,
-  invertAxis: PropTypes.bool,
-  invertSecondaryAxis: PropTypes.bool,
-  mainAxis: PropTypes.oneOf(['x', 'y']),
-  spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-    bottom: PropTypes.number.isRequired,
-    left: PropTypes.number.isRequired,
-    right: PropTypes.number.isRequired,
-    top: PropTypes.number.isRequired
-  })])
-};
-Fit.defaultProps = {
-  mainAxis: 'y',
-  spacing: 8
-};
+    Fit.prototype.componentDidMount = function () {
+        var _this = this;
+        if (!isDisplayContentsSupported) {
+            // eslint-disable-next-line react/no-find-dom-node
+            var element = findDOMNode(this);
+            if (!element || !(element instanceof HTMLElement)) {
+                return;
+            }
+            this.container = element;
+            this.element = element;
+            this.scrollContainer = findScrollContainer(element);
+        }
+        this.fit();
+        var onMutation = function () {
+            _this.fit();
+        };
+        if (isMutationObserverSupported && this.element) {
+            var mutationObserver = new MutationObserver(onMutation);
+            mutationObserver.observe(this.element, {
+                attributes: true,
+                attributeFilter: ['class', 'style'],
+            });
+        }
+    };
+    Fit.prototype.render = function () {
+        var _this = this;
+        var children = this.props.children;
+        var child = React.Children.only(children);
+        if (isDisplayContentsSupported) {
+            return (React.createElement("span", { ref: function (container) {
+                    _this.container = container;
+                    var element = container && container.firstElementChild;
+                    if (!element || !(element instanceof HTMLElement)) {
+                        return;
+                    }
+                    _this.element = element;
+                    _this.scrollContainer = findScrollContainer(element);
+                }, style: { display: 'contents' } }, child));
+        }
+        return child;
+    };
+    Fit.propTypes = {
+        children: PropTypes.node.isRequired,
+        invertAxis: PropTypes.bool,
+        invertSecondaryAxis: PropTypes.bool,
+        mainAxis: PropTypes.oneOf(['x', 'y']),
+        spacing: PropTypes.oneOfType([
+            PropTypes.number,
+            PropTypes.shape({
+                bottom: PropTypes.number.isRequired,
+                left: PropTypes.number.isRequired,
+                right: PropTypes.number.isRequired,
+                top: PropTypes.number.isRequired,
+            }),
+        ]),
+    };
+    return Fit;
+}(Component));
+export default Fit;

package.json

 {
   "name": "react-fit",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Fit a popover element on the screen.",
-  "main": "dist/umd/Fit.js",
-  "module": "dist/esm/Fit.js",
-  "source": "src/Fit.jsx",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "source": "src/index.ts",
+  "types": "dist/cjs/index.d.ts",
   "scripts": {
-    "build": "yarn build-js-all",
-    "build-js-all": "yarn build-js-esm && yarn build-js-umd",
-    "build-js-esm": "BABEL_ENV=production-esm babel src -d dist/esm --ignore \"**/*.spec.js,**/*.spec.jsx\"",
-    "build-js-umd": "BABEL_ENV=production-umd babel src -d dist/umd --ignore \"**/*.spec.js,**/*.spec.jsx\"",
+    "build": "yarn build-esm && yarn build-cjs",
+    "build-esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext",
+    "build-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs",
     "clean": "rimraf dist",
-    "lint": "eslint src/ test/ --ext .jsx,.js",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "prepack": "yarn clean && yarn build",
-    "test": "yarn lint"
+    "prettier": "prettier --check . --cache",
+    "test": "yarn lint && yarn tsc && yarn prettier",
+    "tsc": "tsc --noEmit"
   },
@@ -30,3 +32,5 @@ "keywords": [
   "dependencies": {
-    "detect-element-overflow": "^1.2.0",
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "detect-element-overflow": "^1.3.1",
     "prop-types": "^15.6.0",
@@ -36,16 +40,21 @@ "tiny-warning": "^1.0.0"
   "devDependencies": {
-    "@babel/cli": "^7.15.0",
     "@babel/core": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.0",
-    "babel-eslint": "^10.0.0",
-    "eslint": "~7.19.0",
-    "eslint-config-wojtekmaj": "^0.5.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "rimraf": "^3.0.0"
+    "@babel/preset-typescript": "^7.18.6",
+    "@typescript-eslint/eslint-plugin": "^5.41.0",
+    "@typescript-eslint/parser": "^5.44.0",
+    "eslint": "^8.26.0",
+    "eslint-config-wojtekmaj": "^0.7.1",
+    "husky": "^8.0.0",
+    "prettier": "^2.7.0",
+    "pretty-quick": "^3.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^3.0.0",
+    "typescript": "^4.9.4"
   },
   "peerDependencies": {
-    "react": "^15.5.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^15.5.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
@@ -52,0 +61,0 @@ "resolutions": {

README.md

@@ -1,22 +0,22 @@
-[![npm](https://img.shields.io/npm/v/react-fit.svg)](https://www.npmjs.com/package/react-fit) ![downloads](https://img.shields.io/npm/dt/react-fit.svg) [![CI](https://github.com/wojtekmaj/react-fit/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-fit/actions) ![dependencies](https://img.shields.io/david/wojtekmaj/react-fit.svg
-) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-fit.svg
-)
+[![npm](https://img.shields.io/npm/v/react-fit.svg)](https://www.npmjs.com/package/react-fit) ![downloads](https://img.shields.io/npm/dt/react-fit.svg) [![CI](https://github.com/wojtekmaj/react-fit/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-fit/actions)
 
 # React-Fit
+
 A component that aligns its child relatively to its parent while being aware where it may and may not fit.
 
 ## tl;dr
-* Install by executing `npm install react-fit` or `yarn add react-fit`.
-* Import by adding `import Fit from 'react-fit'`.
-* Do stuff with it!
-    ```js
-    const ElementWithChild = () => (
-      <Parent>
-        <Fit>
-          <PopoverChild />
-        </Fit>
-      </Parent>
-    );
-    ```
 
+- Install by executing `npm install react-fit` or `yarn add react-fit`.
+- Import by adding `import Fit from 'react-fit'`.
+- Do stuff with it!
+  ```js
+  const ElementWithChild = () => (
+    <Parent>
+      <Fit>
+        <PopoverChild />
+      </Fit>
+    </Parent>
+  );
+  ```
+
 ## Getting started
@@ -52,4 +52,4 @@
 
-* To display the element above: provide `invertAxis` flag.
-* To align the element to the right: provide `invertSecondaryAxis` flag.
+- To display the element above: provide `invertAxis` flag.
+- To align the element to the right: provide `invertSecondaryAxis` flag.
 
@@ -68,4 +68,4 @@ ### Horizontal axis (`mainAxis="x"`)
 
-* To display the element on the left: provide `invertAxis` flag.
-* To align the element to the bottom: provide `invertSecondaryAxis` flag.
+- To display the element on the left: provide `invertAxis` flag.
+- To align the element to the bottom: provide `invertSecondaryAxis` flag.
 
@@ -104,2 +104,6 @@ ### Spacing
 
+## Styling
+
+To avoid unnecessary style recalculations that may be caused by React-Fit applying the styles needed to make it work properly, the element should have absolute position, and its parent element should have relative or absolute position.
+
 ## License
@@ -106,0 +110,0 @@

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Number of package files

13

increased by116.67%

Lines of code

944

increased by11.06%

Number of lines in readme file

124

increased by3.33%

Worsened metrics

Total package byte prevSize

47261

decreased by-3.6%

Dependency count

7

increased by40%

Dev dependency count

15

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@types/react@*

• + Added@types/react-dom@*

• + Added@types/prop-types@15.7.13(transitive)

• + Added@types/react@18.3.10(transitive)

• + Added@types/react-dom@18.3.0(transitive)

• + Addedcsstype@3.1.3(transitive)

• Updateddetect-element-overflow@^1.3.1