@uncinc/uncinc-react-kitchen-sink 2.3.6 → 2.4.1

package/dist/components/Lottie/index.js

@@ -1,45 +1,57 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 from 'react';
-import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
+"use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _component = _interopRequireDefault(require("@loadable/component"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Lazy-load Lottie animations with a delay.
-const Lottie = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    delay
-  } = props;
-  const LottieAnimation = loadable(() => {
-    return new Promise(resolve => {
-      setTimeout(() => resolve(import("./LottieAnimation")), delay);
+var Lottie = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var delay = props.delay;
+  var LottieAnimation = (0, _component.default)(function () {
+    return new Promise(function (resolve) {
+      setTimeout(function () {
+        return resolve(Promise.resolve().then(function () {
+          return _interopRequireWildcard(require('./LottieAnimation'));
+        }));
+      }, delay);
     });
   });
-  return /*#__PURE__*/React.createElement(LottieAnimation, _extends({
+  return /*#__PURE__*/_react.default.createElement(LottieAnimation, _extends({
     ref: ref
   }, props));
 });
 Lottie.propTypes = {
-  id: PropTypes.string,
-  className: PropTypes.string,
-  renderer: PropTypes.string,
-  rendererSettings: PropTypes.shape({
-    preserveAspectRatio: PropTypes.string
+  id: _propTypes.default.string,
+  className: _propTypes.default.string,
+  renderer: _propTypes.default.string,
+  rendererSettings: _propTypes.default.shape({
+    preserveAspectRatio: _propTypes.default.string
   }),
-  data: PropTypes.object,
-  path: PropTypes.string,
-  segments: PropTypes.array,
+  data: _propTypes.default.object,
+  path: _propTypes.default.string,
+  segments: _propTypes.default.array,
   // Events
-  onInit: PropTypes.func,
-  onDestroy: PropTypes.func,
+  onInit: _propTypes.default.func,
+  onDestroy: _propTypes.default.func,
   // Options
-  delay: PropTypes.number,
-  autoPlay: PropTypes.bool,
-  loop: PropTypes.bool,
-  speed: PropTypes.number,
-  direction: PropTypes.number,
-  activateOnHover: PropTypes.bool,
-  pauseOnClick: PropTypes.bool,
-  olaTime: PropTypes.number,
-  startPosition: PropTypes.number
+  delay: _propTypes.default.number,
+  autoPlay: _propTypes.default.bool,
+  loop: _propTypes.default.bool,
+  speed: _propTypes.default.number,
+  direction: _propTypes.default.number,
+  activateOnHover: _propTypes.default.bool,
+  pauseOnClick: _propTypes.default.bool,
+  olaTime: _propTypes.default.number,
+  startPosition: _propTypes.default.number,
+  ariaLabel: _propTypes.default.string
 };
 Lottie.defaultProps = {
   id: null,
@@ -52,8 +64,8 @@ Lottie.defaultProps = {
   path: null,
   segments: null,
   // Events
-  onInit: () => {},
-  onDestroy: () => {},
+  onInit: function onInit() {},
+  onDestroy: function onDestroy() {},
   // Options
   delay: null,
   autoPlay: true,
@@ -66,4 +78,5 @@ Lottie.defaultProps = {
   olaTime: 300,
   startPosition: null
 };
-export default Lottie;
+var _default = Lottie;
+exports.default = _default;

package/dist/components/Lottie/stories.js

@@ -1,41 +1,64 @@
-import React from 'react';
-import Lottie from './';
-import LottieAnimationWithMousePosition from './LottieAnimationWithMousePosition';
-import exampleLottie from '../../assets/lottie/example.json';
-import exampleLottieEspero from '../../assets/lottie/data.json';
-export default {
-  title: 'Atoms/Lottie'
-};
+"use strict";
 
-// Default animation
-export const DefaultAnimation = () => /*#__PURE__*/React.createElement(Lottie, {
-  id: "example",
-  data: exampleLottie,
-  onInit: lottie => console.log(lottie)
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
+exports.playAnimationOnMousePosition = exports.pauseOnClickAnimation = exports.default = exports.activateOnHoverAnimation = exports.PathLoad = exports.DefaultAnimation = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = _interopRequireDefault(require("."));
+var _LottieAnimationWithMousePosition = _interopRequireDefault(require("./LottieAnimationWithMousePosition"));
+var _example = _interopRequireDefault(require("../../assets/lottie/example.json"));
+var _data = _interopRequireDefault(require("../../assets/lottie/data.json"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Atoms/Lottie'
+}; // Default animation
+exports.default = _default;
+var DefaultAnimation = function DefaultAnimation() {
+  return /*#__PURE__*/_react.default.createElement(_.default, {
+    id: "example",
+    data: _example.default,
+    onInit: function onInit(lottie) {
+      return console.log(lottie);
+    }
+  });
+};
 
 // Animation active on hover
-export const activateOnHoverAnimation = () => /*#__PURE__*/React.createElement(Lottie, {
-  data: exampleLottie,
-  activateOnHover: true
-});
+exports.DefaultAnimation = DefaultAnimation;
+var activateOnHoverAnimation = function activateOnHoverAnimation() {
+  return /*#__PURE__*/_react.default.createElement(_.default, {
+    data: _example.default,
+    activateOnHover: true
+  });
+};
 
 // Animation plays on mouse position
-export const playAnimationOnMousePosition = () => /*#__PURE__*/React.createElement(LottieAnimationWithMousePosition, {
-  loop: false,
-  autoplay: false,
-  data: exampleLottieEspero,
-  olaTime: 100,
-  startPosition: 0.5
-});
+exports.activateOnHoverAnimation = activateOnHoverAnimation;
+var playAnimationOnMousePosition = function playAnimationOnMousePosition() {
+  return /*#__PURE__*/_react.default.createElement(_LottieAnimationWithMousePosition.default, {
+    loop: false,
+    autoplay: false,
+    data: _data.default,
+    olaTime: 100,
+    startPosition: 0.5
+  });
+};
 
 // Pause animation on click
-export const pauseOnClickAnimation = () => /*#__PURE__*/React.createElement(Lottie, {
-  data: exampleLottie,
-  pauseOnClick: true
-});
+exports.playAnimationOnMousePosition = playAnimationOnMousePosition;
+var pauseOnClickAnimation = function pauseOnClickAnimation() {
+  return /*#__PURE__*/_react.default.createElement(_.default, {
+    data: _example.default,
+    pauseOnClick: true
+  });
+};
 
 // Via path load
-export const PathLoad = () => /*#__PURE__*/React.createElement(Lottie, {
-  path: "https://maxst.icons8.com/vue-static/landings/animated-icons/icons/checkmark-ok/checkmark-ok.json"
-});
+exports.pauseOnClickAnimation = pauseOnClickAnimation;
+var PathLoad = function PathLoad() {
+  return /*#__PURE__*/_react.default.createElement(_.default, {
+    path: "https://maxst.icons8.com/vue-static/landings/animated-icons/icons/checkmark-ok/checkmark-ok.json"
+  });
+};
+exports.PathLoad = PathLoad;

package/dist/components/MagicLine/index.js

@@ -1,64 +1,87 @@
-import React, { useRef, useState, useEffect } from 'react';
-import c from 'classnames';
-const MagicLine = ({
-  activeClassName = "Menu__item--active",
-  children
-}) => {
-  const magicLineParentRef = useRef(null);
-  const magicLineRef = useRef(null);
-  const currentActiveItem = useRef(null);
-  const [loaded, setLoaded] = useState(false);
-  const [activeItemInNavigation, _setActiveItemInNavigation] = useState(false);
-  const setActiveItemInNavigation = value => {
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var MagicLine = function MagicLine(_ref) {
+  var _ref$activeClassName = _ref.activeClassName,
+    activeClassName = _ref$activeClassName === void 0 ? 'Menu__item--active' : _ref$activeClassName,
+    children = _ref.children;
+  var magicLineParentRef = (0, _react.useRef)(null);
+  var magicLineRef = (0, _react.useRef)(null);
+  var currentActiveItem = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    loaded = _useState2[0],
+    setLoaded = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeItemInNavigation = _useState4[0],
+    _setActiveItemInNavigation = _useState4[1];
+  var setActiveItemInNavigation = function setActiveItemInNavigation(value) {
     if (value !== activeItemInNavigation) {
       _setActiveItemInNavigation(value);
     }
   };
-  const MagicLineRefClasses = c('MagicLine__magic_line', {
+  var MagicLineRefClasses = (0, _classnames.default)('MagicLine__magic_line', {
     'MagicLine__magic_line--visible': activeItemInNavigation && loaded
   });
-  const alignMagicLine = () => {
+  var alignMagicLine = function alignMagicLine() {
     if (magicLineRef.current && currentActiveItem.current) {
-      const left = currentActiveItem.current.getBoundingClientRect().left - magicLineParentRef.current.getBoundingClientRect().left;
-      const right = magicLineParentRef.current.getBoundingClientRect().width - left - currentActiveItem.current.getBoundingClientRect().width;
-      magicLineRef.current.style.left = `${left}px`;
-      magicLineRef.current.style.right = `${right}px`;
+      var left = currentActiveItem.current.getBoundingClientRect().left - magicLineParentRef.current.getBoundingClientRect().left;
+      var right = magicLineParentRef.current.getBoundingClientRect().width - left - currentActiveItem.current.getBoundingClientRect().width;
+      magicLineRef.current.style.left = "".concat(left, "px");
+      magicLineRef.current.style.right = "".concat(right, "px");
       setLoaded(true);
     }
   };
-  const hoverMagicLine = e => {
+  var hoverMagicLine = function hoverMagicLine(e) {
     currentActiveItem.current = e.target;
     _setActiveItemInNavigation(true);
     alignMagicLine();
   };
-  const setInitialMagicLine = () => {
+  var setInitialMagicLine = function setInitialMagicLine() {
     currentActiveItem.current = document.getElementsByClassName(activeClassName)[0];
     if (!currentActiveItem.current) {
       _setActiveItemInNavigation(false);
     }
     alignMagicLine();
   };
-  useEffect(() => {
-    const initialize = () => {
+  (0, _react.useEffect)(function () {
+    var initialize = function initialize() {
       setInitialMagicLine();
     };
-    const handleResize = () => {
+    var handleResize = function handleResize() {
       alignMagicLine();
     };
     document.fonts.ready.then(initialize);
     window.addEventListener('load', initialize);
-    window.addEventListener("resize", handleResize);
-    return () => {
+    window.addEventListener('resize', handleResize);
+    return function () {
       window.removeEventListener('load', initialize);
-      window.removeEventListener("resize", handleResize);
+      window.removeEventListener('resize', handleResize);
     };
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     ref: magicLineParentRef,
     className: "MagicLine"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     ref: magicLineRef,
     className: MagicLineRefClasses
   }), children(setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation));
 };
-export default MagicLine;
+var _default = MagicLine;
+exports.default = _default;

package/dist/components/MagicLine/stories.js

@@ -1,49 +1,63 @@
-import React from 'react';
-import c from 'classnames';
-import MagicLine from './';
-import './stories.scss';
-export default {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.NoActiveItem = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ = _interopRequireDefault(require("."));
+require("./stories.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
   title: 'Molecules/MagicLine'
 };
-export const Default = () => /*#__PURE__*/React.createElement(MagicLine, null, (setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation) => {
-  const items = ["one", "two with a longer name", "three"];
-  return /*#__PURE__*/React.createElement("div", {
-    className: "Menu"
-  }, items.map(item => {
-    const active = item === "three";
-    if (active) {
-      setActiveItemInNavigation(true);
-    }
-    const classes = c('Menu__item', {
-      'Menu__item--active': active
-    });
-    return /*#__PURE__*/React.createElement("div", {
-      key: item,
-      className: classes,
-      onMouseEnter: e => {
-        hoverMagicLine(e);
-      },
-      onMouseLeave: e => {
-        setInitialMagicLine();
-      }
-    }, item);
-  }));
-});
-export const NoActiveItem = () => /*#__PURE__*/React.createElement(MagicLine, null, (setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation) => {
-  const items = ["one", "two with a longer name", "three"];
-  return /*#__PURE__*/React.createElement("div", {
-    className: "Menu"
-  }, items.map(item => {
-    const classes = c('Menu__item');
-    return /*#__PURE__*/React.createElement("div", {
-      key: item,
-      className: classes,
-      onMouseEnter: e => {
-        hoverMagicLine(e);
-      },
-      onMouseLeave: e => {
-        setInitialMagicLine();
+exports.default = _default;
+var Default = function Default() {
+  return /*#__PURE__*/_react.default.createElement(_.default, null, function (setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation) {
+    var items = ['one', 'two with a longer name', 'three'];
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "Menu"
+    }, items.map(function (item) {
+      var active = item === 'three';
+      if (active) {
+        setActiveItemInNavigation(true);
       }
-    }, item);
-  }));
-});
+      var classes = (0, _classnames.default)('Menu__item', {
+        'Menu__item--active': active
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: item,
+        className: classes,
+        onMouseEnter: function onMouseEnter(e) {
+          hoverMagicLine(e);
+        },
+        onMouseLeave: function onMouseLeave(e) {
+          setInitialMagicLine();
+        }
+      }, item);
+    }));
+  });
+};
+exports.Default = Default;
+var NoActiveItem = function NoActiveItem() {
+  return /*#__PURE__*/_react.default.createElement(_.default, null, function (setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation) {
+    var items = ['one', 'two with a longer name', 'three'];
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "Menu"
+    }, items.map(function (item) {
+      var classes = (0, _classnames.default)('Menu__item');
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: item,
+        className: classes,
+        onMouseEnter: function onMouseEnter(e) {
+          hoverMagicLine(e);
+        },
+        onMouseLeave: function onMouseLeave(e) {
+          setInitialMagicLine();
+        }
+      }, item);
+    }));
+  });
+};
+exports.NoActiveItem = NoActiveItem;

package/dist/components/NavigationScroll/index.js

@@ -1,74 +1,95 @@
-import React, { useState, useEffect, useRef } from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import './style.scss';
-const NavigationScroll = props => {
-  const node = useRef(null);
-  const [state, setState] = useState({
-    pos: 0,
-    reachedBottom: false,
-    reachedTop: false,
-    scrolledPastNavHeight: false,
-    _previousPos: 0
-  });
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  });
-  const getScrollPos = element => {
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+require("./style.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var NavigationScroll = function NavigationScroll(props) {
+  var node = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)({
+      pos: 0,
+      reachedBottom: false,
+      reachedTop: false,
+      scrolledPastNavHeight: false,
+      _previousPos: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var getScrollPos = function getScrollPos(element) {
     if (typeof element.pageYOffset !== 'undefined') {
       return element.pageYOffset;
     }
     return element.scrollTop;
   };
-  const getElementHeight = element => {
-    let deductHeight = 0;
+  var getElementHeight = function getElementHeight(element) {
+    var deductHeight = 0;
     if (document.getElementsByClassName('Header__subMenu').length !== 0) {
       deductHeight = document.getElementsByClassName('Header__subMenu')[0].clientHeight;
     }
     return element.offsetHeight - deductHeight;
   };
-  const handleScroll = () => {
-    const scrollPos = getScrollPos(window);
-    let elementHeight = getElementHeight(node.current);
-    let newPos = 0;
+  var handleScroll = function handleScroll() {
+    var scrollPos = getScrollPos(window);
+    var elementHeight = getElementHeight(node.current);
+    var newPos = 0;
     if (scrollPos > 0) {
-      const diff = state._previousPos - scrollPos;
+      var diff = state._previousPos - scrollPos;
       newPos = state.pos + diff;
       newPos = Math.max(-elementHeight, Math.min(0, newPos));
     }
-    const isVisible = newPos > -elementHeight;
-    const hasReachedTop = scrollPos < 5 && isVisible;
-    const hasReachedBottom = Math.round(scrollPos + window.innerHeight) >= document.body.clientHeight;
-    const scrolledPastNavHeight = scrollPos > elementHeight;
-    setState(prevState => ({
-      ...prevState,
-      pos: hasReachedBottom ? 0 : newPos,
-      reachedTop: hasReachedTop,
-      scrolledPastNavHeight,
-      reachedBottom: hasReachedBottom,
-      _previousPos: scrollPos
-    }));
+    var isVisible = newPos > -elementHeight;
+    var hasReachedTop = scrollPos < 5 && isVisible;
+    var hasReachedBottom = Math.round(scrollPos + window.innerHeight) >= document.body.clientHeight;
+    var scrolledPastNavHeight = scrollPos > elementHeight;
+    setState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        pos: hasReachedBottom ? 0 : newPos,
+        reachedTop: hasReachedTop,
+        scrolledPastNavHeight: scrolledPastNavHeight,
+        reachedBottom: hasReachedBottom,
+        _previousPos: scrollPos
+      });
+    });
   };
-  const {
-    reachedTop,
-    reachedBottom,
-    pos,
-    scrolledPastNavHeight
-  } = state;
-  const {
-    children,
-    hasBackground
-  } = props;
-  const classes = classNames('NavigationScroll', {
+  (0, _react.useEffect)(function () {
+    window.addEventListener('scroll', handleScroll);
+    return function () {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  });
+  var reachedTop = state.reachedTop,
+    reachedBottom = state.reachedBottom,
+    pos = state.pos,
+    scrolledPastNavHeight = state.scrolledPastNavHeight;
+  var children = props.children,
+    hasBackground = props.hasBackground;
+  var classes = (0, _classnames.default)('NavigationScroll', {
     'NavigationScroll--hasBackground': hasBackground,
     's-scrolled-past-nav-height': scrolledPastNavHeight,
     's-reached-page-top': reachedTop,
     's-reached-page-bottom': reachedBottom
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     ref: node,
     className: classes,
     style: {
@@ -77,10 +98,8 @@ const NavigationScroll = props => {
   }, children);
 };
 NavigationScroll.propTypes = {
-  children: PropTypes.element.isRequired,
-  onUpdate: PropTypes.func
-};
-NavigationScroll.defaultProps = {
-  onUpdate: () => {}
+  children: _propTypes.default.element.isRequired
 };
-export default NavigationScroll;
+NavigationScroll.defaultProps = {};
+var _default = NavigationScroll;
+exports.default = _default;

package/dist/components/NavigationScroll/stories.js

@@ -1,10 +1,21 @@
-import React from 'react';
-import c from 'classnames';
-import NavigationScroll from './';
-import './stories.scss';
-export default {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ = _interopRequireDefault(require("."));
+require("./stories.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
   title: 'Molecules/NavigationScroll'
 };
-export const Default = () => /*#__PURE__*/React.createElement("div", {
-  className: "NavigationScrollExample"
-}, /*#__PURE__*/React.createElement(NavigationScroll, null, /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement("div", null, "one"), /*#__PURE__*/React.createElement("div", null, "two"), /*#__PURE__*/React.createElement("div", null, "three"))));
+exports.default = _default;
+var Default = function Default() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "NavigationScrollExample"
+  }, /*#__PURE__*/_react.default.createElement(_.default, null, /*#__PURE__*/_react.default.createElement("nav", null, /*#__PURE__*/_react.default.createElement("div", null, "one"), /*#__PURE__*/_react.default.createElement("div", null, "two"), /*#__PURE__*/_react.default.createElement("div", null, "three"))));
+};
+exports.Default = Default;