@onesy/ui-react 1.0.129 → 1.0.131

package/SpeedDial/index.js

@@ -1,8 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var SpeedDial_1 = require("./SpeedDial");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SpeedDial_1).default; } });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _SpeedDial.default;
+  }
+});
+var _SpeedDial = _interopRequireDefault(require("./SpeedDial"));

package/SpeedDialItem/SpeedDialItem.js

@@ -1,69 +1,95 @@
 "use strict";
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const Tooltip_1 = __importDefault(require("../Tooltip"));
-const IconButton_1 = __importDefault(require("../IconButton"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        position: 'relative',
-        lineHeight: '0'
-    },
-    no_render: {
-        '& .onesy-Button-root': {
-            boxShadow: theme.shadows.values.default[6],
-            '&:hover': {
-                boxShadow: theme.shadows.values.default[8]
-            },
-            '&.onesy-Button-focus': {
-                boxShadow: theme.shadows.values.default[8]
-            }
-        }
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _utils2 = require("../utils");
+const _excluded = ["open", "name", "label", "tooltipOpen", "closeOnClick", "render", "onBlur", "onFocus", "Icon", "TooltipProps", "Component", "className", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {
+    position: 'relative',
+    lineHeight: '0'
+  },
+  no_render: {
+    '& .onesy-Button-root': {
+      boxShadow: theme.shadows.values.default[6],
+      '&:hover': {
+        boxShadow: theme.shadows.values.default[8]
+      },
+      '&.onesy-Button-focus': {
+        boxShadow: theme.shadows.values.default[8]
+      }
     }
-}), { name: 'onesy-SpeedDialItem' });
-const SpeedDialItem = react_1.default.forwardRef((props_, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesySpeedDialItem) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
-    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
-    const { open, name, label: label_, tooltipOpen, closeOnClick, render, onBlur, onFocus, Icon, TooltipProps = {
+  }
+}), {
+  name: 'onesy-SpeedDialItem'
+});
+const SpeedDialItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesySpeedDialItem) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const Tooltip = _react.default.useMemo(() => {
+    var _theme$elements;
+    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Tooltip) || _Tooltip.default;
+  }, [theme]);
+  const IconButton = _react.default.useMemo(() => {
+    var _theme$elements2;
+    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.default;
+  }, [theme]);
+  const {
+      open,
+      name,
+      label: label_,
+      tooltipOpen,
+      closeOnClick,
+      render,
+      onBlur,
+      onFocus,
+      Icon,
+      TooltipProps = {
         alignment: 'center',
         interactive: false
-    }, Component = 'div', className, children } = props, other = __rest(props, ["open", "name", "label", "tooltipOpen", "closeOnClick", "render", "onBlur", "onFocus", "Icon", "TooltipProps", "Component", "className", "children"]);
-    const { classes } = useStyle();
-    delete TooltipProps.open;
-    if (tooltipOpen)
-        TooltipProps.open = true;
-    const label = name !== undefined ? name : label_;
-    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('SpeedDialItem', theme) && [
-                `onesy-SpeedDialItem-root`
-            ],
-            className,
-            classes.root,
-            !(0, utils_1.is)('function', render) && classes.no_render
-        ]) }, { children: (0, utils_1.is)('function', render) ?
-            render(Object.assign({ onBlur,
-                onFocus,
-                TooltipProps }, other)) :
-            (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: label, portal: true, nowrap: true }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onBlur: onBlur, onFocus: onFocus }, other, { children: (0, jsx_runtime_1.jsx)(Icon, {}) })) })) })));
+      },
+      Component = 'div',
+      className,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  delete TooltipProps.open;
+  if (tooltipOpen) TooltipProps.open = true;
+  const label = name !== undefined ? name : label_;
+  return /*#__PURE__*/_react.default.createElement(Component, {
+    ref: ref,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SpeedDialItem', theme) && [`onesy-SpeedDialItem-root`], className, classes.root, !(0, _utils.is)('function', render) && classes.no_render])
+  }, (0, _utils.is)('function', render) ? render(_objectSpread({
+    onBlur,
+    onFocus,
+    TooltipProps
+  }, other)) : /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+    name: label,
+    portal: true,
+    nowrap: true
+  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onBlur: onBlur,
+    onFocus: onFocus
+  }, other), /*#__PURE__*/_react.default.createElement(Icon, null))));
 });
 SpeedDialItem.displayName = 'onesy-SpeedDialItem';
-exports.default = SpeedDialItem;
+var _default = exports.default = SpeedDialItem;

package/SpeedDialItem/index.js

@@ -1,8 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var SpeedDialItem_1 = require("./SpeedDialItem");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SpeedDialItem_1).default; } });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _SpeedDialItem.default;
+  }
+});
+var _SpeedDialItem = _interopRequireDefault(require("./SpeedDialItem"));

package/SpyScroll/SpyScroll.js

@@ -1,147 +1,159 @@
 "use strict";
-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]];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _utils2 = require("../utils");
+const _excluded = ["ids", "offset", "offsetStart", "addClassName", "addStyle", "onActive", "parent", "className", "style", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {}
+}), {
+  name: 'onesy-SpyScroll'
+});
+const SpyScroll = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesySpyScroll) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const {
+      ids,
+      offset,
+      offsetStart,
+      addClassName,
+      addStyle,
+      onActive,
+      parent,
+      className,
+      style,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    root: _react.default.useRef(undefined),
+    active: _react.default.useRef([]),
+    parent: _react.default.useRef(parent),
+    props: _react.default.useRef(undefined),
+    onActive: _react.default.useRef(onActive)
+  };
+  refs.props.current = props;
+  refs.parent.current = parent;
+  refs.onActive.current = onActive;
+  _react.default.useEffect(() => {
+    var _refs$root$current2;
+    // Listen to window scroll value
+    const isVisible = element => new Promise(resolve => {
+      if (!(element && refs.root.current)) return resolve(null);
+      const observer = new IntersectionObserver(entries => {
+        const intersecting = entries === null || entries === void 0 ? void 0 : entries[0].isIntersecting;
+
+        // clean up
+        observer.disconnect();
+        return resolve(intersecting);
+      }, {
+        root: refs.parent.current
+      });
+      observer.observe(element);
+    });
+    const method = async () => {
+      var _refs$root$current;
+      // Find first active id
+      let id;
+      const rootElement_ = (0, _utils.isEnvironment)('browser') ? refs.parent.current || ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
+      for (const item of refs.props.current.ids || []) {
+        id = await isVisible(rootElement_.querySelector(`#${item}`.replace('##', '#')));
+        if (id) {
+          id = item;
+          break;
         }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {},
-}), { name: 'onesy-SpyScroll' });
-const SpyScroll = react_1.default.forwardRef((props_, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesySpyScroll) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const { ids, offset, offsetStart, addClassName, addStyle, onActive, parent, className, style, children } = props, other = __rest(props, ["ids", "offset", "offsetStart", "addClassName", "addStyle", "onActive", "parent", "className", "style", "children"]);
-    const { classes } = useStyle();
-    const refs = {
-        root: react_1.default.useRef(undefined),
-        active: react_1.default.useRef([]),
-        parent: react_1.default.useRef(parent),
-        props: react_1.default.useRef(undefined),
-        onActive: react_1.default.useRef(onActive)
-    };
-    refs.props.current = props;
-    refs.parent.current = parent;
-    refs.onActive.current = onActive;
-    react_1.default.useEffect(() => {
-        var _a;
-        // Listen to window scroll value
-        const isVisible = (element) => new Promise(resolve => {
-            if (!(element && refs.root.current))
-                return resolve(null);
-            const observer = new IntersectionObserver((entries) => {
-                const intersecting = entries === null || entries === void 0 ? void 0 : entries[0].isIntersecting;
-                // clean up
-                observer.disconnect();
-                return resolve(intersecting);
-            }, { root: refs.parent.current });
-            observer.observe(element);
-        });
-        const method = async () => {
-            var _a;
-            // Find first active id
-            let id;
-            const rootElement_ = (0, utils_1.isEnvironment)('browser') ? refs.parent.current || (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-            for (const item of (refs.props.current.ids || [])) {
-                id = await isVisible(rootElement_.querySelector(`#${item}`.replace('##', '#')));
-                if (id) {
-                    id = item;
-                    break;
-                }
-            }
-            if (id && refs.root.current) {
-                // Update all elements in root
-                // Remove active className and style from
-                // all previous active elements
-                for (const element of refs.active.current) {
-                    // addClassName
-                    element.classList.remove(refs.props.current.addClassName);
-                    // addStyle
-                    if (refs.props.current.addStyle) {
-                        Object.keys(refs.props.current.addStyle).forEach(item => {
-                            element.style.removeProperty(item);
-                        });
-                    }
-                }
-                // And add to all elements with href containing #id with addClassName and style
-                refs.active.current = (0, utils_1.unique)([
-                    // a elemnts with id
-                    ...Array.from(refs.root.current.querySelectorAll(`[href$='#${id}']`)),
-                    // elements active for multiple ids
-                    ...Array.from(refs.root.current.querySelectorAll(`[data-onesy-spy-scroll~=${id}]`))
-                ]).filter(Boolean);
-                for (const element of refs.active.current) {
-                    // addClassName
-                    if (!element.classList.contains(refs.props.current.addClassName))
-                        element.classList.add(refs.props.current.addClassName);
-                    // addStyle
-                    if (refs.props.current.addStyle) {
-                        Object.keys(refs.props.current.addStyle).forEach(item => {
-                            element.style[item] = refs.props.current.addStyle[item];
-                        });
-                    }
-                }
-                // onActive
-                if ((0, utils_1.is)('function', refs.onActive.current))
-                    refs.onActive.current(id);
-            }
-            else {
-                // Remove active className and style from
-                // all previous active elements
-                for (const element of refs.active.current) {
-                    // addClassName
-                    element.classList.remove(refs.props.current.addClassName);
-                    // addStyle
-                    if (refs.props.current.addStyle) {
-                        Object.keys(refs.props.current.addStyle).forEach(item => {
-                            element.style.removeProperty(item);
-                        });
-                    }
-                }
-            }
-        };
-        // Initial
-        method();
-        const rootElement = (0, utils_1.isEnvironment)('browser') ? refs.parent.current || (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        if (refs.root.current) {
-            rootElement.addEventListener('scroll', method);
+      }
+      if (id && refs.root.current) {
+        // Update all elements in root
+
+        // Remove active className and style from
+        // all previous active elements
+        for (const element of refs.active.current) {
+          // addClassName
+          element.classList.remove(refs.props.current.addClassName);
+
+          // addStyle
+          if (refs.props.current.addStyle) {
+            Object.keys(refs.props.current.addStyle).forEach(item => {
+              element.style.removeProperty(item);
+            });
+          }
+        }
+
+        // And add to all elements with href containing #id with addClassName and style
+        refs.active.current = (0, _utils.unique)([
+        // a elemnts with id
+        ...Array.from(refs.root.current.querySelectorAll(`[href$='#${id}']`)),
+        // elements active for multiple ids
+        ...Array.from(refs.root.current.querySelectorAll(`[data-onesy-spy-scroll~=${id}]`))]).filter(Boolean);
+        for (const element of refs.active.current) {
+          // addClassName
+          if (!element.classList.contains(refs.props.current.addClassName)) element.classList.add(refs.props.current.addClassName);
+
+          // addStyle
+          if (refs.props.current.addStyle) {
+            Object.keys(refs.props.current.addStyle).forEach(item => {
+              element.style[item] = refs.props.current.addStyle[item];
+            });
+          }
         }
-        return () => {
-            if (refs.root.current) {
-                rootElement.removeEventListener('scroll', method);
-            }
-        };
-    }, [parent]);
-    return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: react_1.default.cloneElement(children, Object.assign({ ref: (item) => {
-                if (ref) {
-                    if ((0, utils_1.is)('function', ref))
-                        ref(item);
-                    else
-                        ref.current = item;
-                }
-                refs.root.current = item;
-            }, className: (0, style_react_1.classNames)([
-                (0, utils_2.staticClassName)('SpyScroll', theme) && [
-                    'onesy-SpyScroll-root'
-                ],
-                children.props.className,
-                className,
-                classes.root
-            ]) }, other)) }));
+
+        // onActive
+        if ((0, _utils.is)('function', refs.onActive.current)) refs.onActive.current(id);
+      } else {
+        // Remove active className and style from
+        // all previous active elements
+        for (const element of refs.active.current) {
+          // addClassName
+          element.classList.remove(refs.props.current.addClassName);
+
+          // addStyle
+          if (refs.props.current.addStyle) {
+            Object.keys(refs.props.current.addStyle).forEach(item => {
+              element.style.removeProperty(item);
+            });
+          }
+        }
+      }
+    };
+
+    // Initial
+    method();
+    const rootElement = (0, _utils.isEnvironment)('browser') ? refs.parent.current || ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
+    if (refs.root.current) {
+      rootElement.addEventListener('scroll', method);
+    }
+    return () => {
+      if (refs.root.current) {
+        rootElement.removeEventListener('scroll', method);
+      }
+    };
+  }, [parent]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.cloneElement(children, _objectSpread({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SpyScroll', theme) && ['onesy-SpyScroll-root'], children.props.className, className, classes.root])
+  }, other)));
 });
 SpyScroll.displayName = 'onesy-SpyScroll';
-exports.default = SpyScroll;
+var _default = exports.default = SpyScroll;

package/SpyScroll/index.js

@@ -1,8 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var SpyScroll_1 = require("./SpyScroll");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SpyScroll_1).default; } });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _SpyScroll.default;
+  }
+});
+var _SpyScroll = _interopRequireDefault(require("./SpyScroll"));