@rescui/tab-list 0.13.4 → 0.13.6

package/lib/parts/deep-map.js

@@ -1,12 +1,9 @@
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { isValidElement, cloneElement } from 'react';
 
 function deepMap(children, fn) {
-  var _context;
-
-  var processChild = function processChild(child) {
-    var i = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    var returnChild = child;
+  const processChild = function (child) {
+    let i = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let returnChild = child;
 
     if (! /*#__PURE__*/isValidElement(returnChild)) {
       return returnChild;
@@ -26,7 +23,7 @@ function deepMap(children, fn) {
     return processChild(children);
   }
 
-  return _mapInstanceProperty(_context = React.Children).call(_context, children, processChild);
+  return React.Children.map(children, processChild);
 }
 
 export { deepMap };

package/lib/parts/separator.p.module.css.js

@@ -1,6 +1,6 @@
 var styles = {
-  "light": "_light_aq3vka_4",
-  "dark": "_dark_aq3vka_7",
-  "separator": "_separator_aq3vka_11"
+  "light": "_light_wbpza0_4",
+  "dark": "_dark_wbpza0_7",
+  "separator": "_separator_wbpza0_11"
 };
 export { styles as default };

package/lib/parts/tab-list-context.js

@@ -1,12 +1,10 @@
 import { createContext, useContext } from 'react';
-var TabListContext = /*#__PURE__*/createContext({
+const TabListContext = /*#__PURE__*/createContext({
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onChange: function onChange() {},
+  onChange: () => {},
   selectedId: 0
 });
 
-var useTabListContext = function useTabListContext() {
-  return useContext(TabListContext);
-};
+const useTabListContext = () => useContext(TabListContext);
 
 export { TabListContext, useTabListContext };

package/lib/parts/tab-list.p.module.css.js

@@ -1,18 +1,18 @@
 var styles = {
-  "light": "_light_1kqq769_7",
-  "dark": "_dark_1kqq769_10",
-  "sizeM": "_sizeM_1kqq769_14",
-  "sizeL": "_sizeL_1kqq769_17",
-  "classic": "_classic_1kqq769_21",
-  "rock": "_rock_1kqq769_24",
-  "sparse": "_sparse_1kqq769_28",
-  "short": "_short_1kqq769_32",
-  "tabsContainer": "_tabsContainer_1kqq769_36",
-  "indicator": "_indicator_1kqq769_46",
-  "iconLeft": "_iconLeft_1kqq769_61",
-  "iconRight": "_iconRight_1kqq769_64",
-  "tab": "_tab_1kqq769_36",
-  "selected": "_selected_1kqq769_154",
-  "icon": "_icon_1kqq769_61"
+  "light": "_light_7obrsz_7",
+  "dark": "_dark_7obrsz_10",
+  "sizeM": "_sizeM_7obrsz_14",
+  "sizeL": "_sizeL_7obrsz_17",
+  "classic": "_classic_7obrsz_21",
+  "rock": "_rock_7obrsz_24",
+  "sparse": "_sparse_7obrsz_28",
+  "short": "_short_7obrsz_32",
+  "tabsContainer": "_tabsContainer_7obrsz_36",
+  "indicator": "_indicator_7obrsz_46",
+  "iconLeft": "_iconLeft_7obrsz_61",
+  "iconRight": "_iconRight_7obrsz_64",
+  "tab": "_tab_7obrsz_36",
+  "selected": "_selected_7obrsz_154",
+  "icon": "_icon_7obrsz_61"
 };
 export { styles as default };

package/lib/parts/tab-separator.js

@@ -3,10 +3,12 @@ import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import styles from './separator.p.module.css.js';
 
-var TabSeparator = function TabSeparator(_ref) {
-  var className = _ref.className,
-      themeFromProps = _ref.theme;
-  var theme = useThemeWithUndefined(themeFromProps);
+const TabSeparator = _ref => {
+  let {
+    className,
+    theme: themeFromProps
+  } = _ref;
+  const theme = useThemeWithUndefined(themeFromProps);
   return /*#__PURE__*/React.createElement("div", {
     className: cn(styles.separator, styles[theme], className)
   });

package/lib/parts/tab.js

@@ -1,81 +1,67 @@
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-var _excluded = ["value", "className", "children", "icon", "iconPosition", "itemId", "onClick", "onKeyDown", "data-e2e"];
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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; }
-
 import React, { forwardRef, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './tab-list.p.module.css.js';
 import { useTabListContext } from './tab-list-context.js';
-var TabTag = /*#__PURE__*/forwardRef(function (props, ref) {
+const TabTag = /*#__PURE__*/forwardRef((props, ref) => {
   if (typeof props.href !== 'undefined') {
-    return /*#__PURE__*/React.createElement("a", _objectSpread({
-      ref: ref
-    }, props), props.children);
+    return /*#__PURE__*/React.createElement("a", {
+      ref: ref,
+      ...props
+    }, props.children);
   }
 
-  return /*#__PURE__*/React.createElement("button", _objectSpread(_objectSpread({
-    ref: ref
-  }, props), {}, {
+  return /*#__PURE__*/React.createElement("button", {
+    ref: ref,
+    ...props,
     type: "button"
-  }), props.children);
+  }, props.children);
 });
 TabTag.displayName = 'TabTag';
-var Tab = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var value = _ref.value,
-      className = _ref.className,
-      children = _ref.children,
-      icon = _ref.icon,
-      _ref$iconPosition = _ref.iconPosition,
-      iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
-      itemId = _ref.itemId,
-      _onClick = _ref.onClick,
-      _onKeyDown = _ref.onKeyDown,
-      e2eId = _ref['data-e2e'],
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
-  var _useTabListContext = useTabListContext(),
-      onChange = _useTabListContext.onChange,
-      selectedId = _useTabListContext.selectedId;
-
-  var selected = itemId === selectedId;
-  return /*#__PURE__*/React.createElement(TabTag, _objectSpread(_objectSpread({}, restProps), {}, {
+const Tab = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    value,
+    className,
+    children,
+    icon,
+    iconPosition = 'left',
+    itemId,
+    onClick,
+    onKeyDown,
+    ['data-e2e']: e2eId,
+    ...restProps
+  } = _ref;
+  const {
+    onChange,
+    selectedId
+  } = useTabListContext();
+  const selected = itemId === selectedId;
+  return /*#__PURE__*/React.createElement(TabTag, { ...restProps,
     className: cn(styles.tab, selected && styles.selected, iconPosition === 'right' ? styles.iconRight : styles.iconLeft, className),
-    onClick: function onClick(e) {
-      if (_onClick) {
-        _onClick(e);
+    onClick: e => {
+      if (onClick) {
+        onClick(e);
       }
 
       onChange(value);
     },
-    onKeyDown: function onKeyDown(e) {
+    onKeyDown: e => {
       if (e.key === ' ') {
         e.target.click();
         e.preventDefault();
       }
 
-      if (_onKeyDown) {
-        _onKeyDown(e);
+      if (onKeyDown) {
+        onKeyDown(e);
       }
     },
     role: "tab",
     tabIndex: 0,
     ref: ref,
     "data-e2e": e2eId,
-    "data-test": "tab".concat(selected ? ' tab-selected' : ''),
+    "data-test": `tab${selected ? ' tab-selected' : ''}`,
     "data-rs-internal": 'tab-list__tab'
-  }), icon && /*#__PURE__*/cloneElement(icon, {
+  }, icon && /*#__PURE__*/cloneElement(icon, {
     className: cn(icon.props.className, styles.icon)
   }), /*#__PURE__*/React.createElement("div", null, children));
 });

package/lib/parts/use-indicator.js

@@ -1,60 +1,39 @@
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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; }
-
 import { useState, useEffect } from 'react';
 import { useResizeObserver } from '@rescui/use-resize-observer';
 
 function calculateIndicator(activeNodeRef, parentNode) {
-  var childPos = activeNodeRef.getBoundingClientRect();
-  var parentPos = parentNode.getBoundingClientRect();
-  var left = "".concat(childPos.left - parentPos.left + parentNode.scrollLeft, "px");
-  var width = "".concat(childPos.width, "px");
+  const childPos = activeNodeRef.getBoundingClientRect();
+  const parentPos = parentNode.getBoundingClientRect();
+  const left = `${childPos.left - parentPos.left + parentNode.scrollLeft}px`;
+  const width = `${childPos.width}px`;
   return {
-    left: left,
-    width: width
+    left,
+    width
   };
 }
 
-var useIndicator = function useIndicator(_ref) {
-  var activeNodeRef = _ref.activeNodeRef,
-      containerRef = _ref.containerRef,
-      triggers = _ref.triggers;
-
-  var _useState = useState({
+const useIndicator = _ref => {
+  let {
+    activeNodeRef,
+    containerRef,
+    triggers
+  } = _ref;
+  const [indicator, setIndicator] = useState({
     left: 0,
     width: 0
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      indicator = _useState2[0],
-      setIndicator = _useState2[1];
-
-  var _useState3 = useState(true),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isSSR = _useState4[0],
-      setIsSSR = _useState4[1]; // Catch the resize of the container which is happening when the fonts downloads for example
-
+  });
+  const [isSSR, setIsSSR] = useState(true); // Catch the resize of the container which is happening when the fonts downloads for example
 
-  var onResize = function onResize() {
+  const onResize = () => {
     if (!activeNodeRef.current || !containerRef.current) {
       return;
     }
 
     if (isSSR) {
       setIsSSR(false);
-      setIndicator(_objectSpread(_objectSpread({}, calculateIndicator(activeNodeRef.current, containerRef.current)), {}, {
+      setIndicator({ ...calculateIndicator(activeNodeRef.current, containerRef.current),
         transitionDuration: '0ms'
-      }));
+      });
       return;
     }
 

package/lib/parts/use-scrollable-list.js

@@ -1,53 +1,37 @@
-import "core-js/modules/web.dom-collections.for-each.js";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["child", "itemId", "childValue", "ref"],
-    _excluded2 = ["value", "onFocus"];
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.promise.js";
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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; }
-
 import React, { useRef, useState, useCallback, useMemo, useEffect, cloneElement } from 'react';
 import { useResizeObserver } from '@rescui/use-resize-observer';
 import { deepMap } from './deep-map.js'; // arrow (32) + shadow (10) + shadow blur (~8) + item focus outline (4)
 
-var ARROW_AREA_WIDTH_IN_PX = 54;
+const ARROW_AREA_WIDTH_IN_PX = 54;
 
 function patchItemIfNeeded(_ref) {
-  var child = _ref.child,
-      itemId = _ref.itemId,
-      childValue = _ref.childValue,
-      ref = _ref.ref,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/cloneElement(child, _objectSpread({
-    itemId: itemId,
+  let {
+    child,
+    itemId,
+    childValue,
+    ref,
+    ...restProps
+  } = _ref;
+  return /*#__PURE__*/cloneElement(child, {
+    itemId,
     value: childValue,
-    ref: ref
-  }, restProps));
+    ref,
+    ...restProps
+  });
 }
 
 function calculateArrowsVisibility(scrollContainerEl) {
   // doing this because scrollContainerEl.scrollWidth returns a rounded value
-  var scrollLeft = Math.round(scrollContainerEl.scrollLeft);
-  var shouldShowAnyArrow = scrollContainerEl.offsetWidth < scrollContainerEl.scrollWidth; // in some browsers, fully scrolled element has `scrollLeft + offsetWidth === scrollWidth - 1`
+  const scrollLeft = Math.round(scrollContainerEl.scrollLeft);
+  const shouldShowAnyArrow = scrollContainerEl.offsetWidth < scrollContainerEl.scrollWidth; // in some browsers, fully scrolled element has `scrollLeft + offsetWidth === scrollWidth - 1`
   // so we take this measurement error into account
 
-  var delta = 1;
-  var showLeftArrow = shouldShowAnyArrow && scrollLeft > 0;
-  var showRightArrow = shouldShowAnyArrow && scrollLeft + scrollContainerEl.offsetWidth < scrollContainerEl.scrollWidth - delta;
+  const delta = 1;
+  const showLeftArrow = shouldShowAnyArrow && scrollLeft > 0;
+  const showRightArrow = shouldShowAnyArrow && scrollLeft + scrollContainerEl.offsetWidth < scrollContainerEl.scrollWidth - delta;
   return {
-    showLeftArrow: showLeftArrow,
-    showRightArrow: showRightArrow
+    showLeftArrow,
+    showRightArrow
   };
 }
 
@@ -76,30 +60,30 @@ function scrollElementLeft(element, to) {
 }
 
 function scrollIntoView(activeNode, parentNode) {
-  var childWidth = activeNode.offsetWidth;
-  var parentWidth = parentNode.offsetWidth;
-  var parentStyles = getComputedStyle(parentNode);
-  var parentMarginsOffset = parseInt(parentStyles.marginLeft, 10) + parseInt(parentStyles.marginRight, 10);
-  var parentScrollLeft = parentNode.scrollLeft;
-  var parentScrollWidth = parentNode.scrollWidth; // position of the left border in the container
+  const childWidth = activeNode.offsetWidth;
+  const parentWidth = parentNode.offsetWidth;
+  const parentStyles = getComputedStyle(parentNode);
+  const parentMarginsOffset = parseInt(parentStyles.marginLeft, 10) + parseInt(parentStyles.marginRight, 10);
+  const parentScrollLeft = parentNode.scrollLeft;
+  const parentScrollWidth = parentNode.scrollWidth; // position of the left border in the container
 
-  var activeNodeLeft = parentNode.offsetLeft + activeNode.offsetLeft; // position of the right border in the container
+  const activeNodeLeft = parentNode.offsetLeft + activeNode.offsetLeft; // position of the right border in the container
 
-  var activeNodeRight = activeNodeLeft + childWidth; // position of the left border in relation to the viewport
+  const activeNodeRight = activeNodeLeft + childWidth; // position of the left border in relation to the viewport
 
-  var activeNodeLeftOffset = activeNodeLeft - parentScrollLeft; // position of the right border in relation to the viewport
+  const activeNodeLeftOffset = activeNodeLeft - parentScrollLeft; // position of the right border in relation to the viewport
 
-  var activeNodeRightOffset = parentWidth - (activeNodeLeftOffset + childWidth); // by default, don't scroll at all
+  const activeNodeRightOffset = parentWidth - (activeNodeLeftOffset + childWidth); // by default, don't scroll at all
 
-  var scrollTo = -1; // if before the element there is a space larger than arrow area
+  let scrollTo = -1; // if before the element there is a space larger than arrow area
 
-  var isElHasWorkSpaceLeft = activeNodeLeft > ARROW_AREA_WIDTH_IN_PX; // if after the element there is a space larger than arrow area
+  const isElHasWorkSpaceLeft = activeNodeLeft > ARROW_AREA_WIDTH_IN_PX; // if after the element there is a space larger than arrow area
 
-  var isElHasWorkSpaceRight = activeNodeRight < parentScrollWidth - ARROW_AREA_WIDTH_IN_PX;
+  const isElHasWorkSpaceRight = activeNodeRight < parentScrollWidth - ARROW_AREA_WIDTH_IN_PX;
 
   if (activeNodeRightOffset <= ARROW_AREA_WIDTH_IN_PX) {
     if (isElHasWorkSpaceRight) {
-      var sideOffset = parentWidth - childWidth + parentMarginsOffset;
+      const sideOffset = parentWidth - childWidth + parentMarginsOffset;
       scrollTo = activeNodeLeft + ARROW_AREA_WIDTH_IN_PX - sideOffset;
     } else {
       scrollTo = parentScrollWidth - parentWidth; // right edge
@@ -120,67 +104,60 @@ function scrollIntoView(activeNode, parentNode) {
   }
 }
 
-var useScrollableList = function useScrollableList(_ref2) {
-  var children = _ref2.children,
-      compareValues = _ref2.compareValues,
-      value = _ref2.value,
-      CompareItem = _ref2.CompareItem;
-  var activeNodeRef = useRef(null);
-  var scrollableRef = useRef(null);
-  var containerRef = useRef(null); // reset targeted element on scrolling by arrows
+const useScrollableList = _ref2 => {
+  let {
+    children,
+    compareValues,
+    value,
+    CompareItem
+  } = _ref2;
+  const activeNodeRef = useRef(null);
+  const scrollableRef = useRef(null);
+  const containerRef = useRef(null); // reset targeted element on scrolling by arrows
   // so on window resize there wouldn't scroll to it
 
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      targetedEl = _useState2[0],
-      setTargetedEl = _useState2[1];
-
-  var _useState3 = useState({
+  const [targetedEl, setTargetedEl] = useState(null);
+  const [{
+    showLeftArrow,
+    showRightArrow
+  }, setShowArrows] = useState({
     showLeftArrow: false,
     showRightArrow: false
-  }),
-      _useState4 = _slicedToArray(_useState3, 2),
-      _useState4$ = _useState4[0],
-      showLeftArrow = _useState4$.showLeftArrow,
-      showRightArrow = _useState4$.showRightArrow,
-      setShowArrows = _useState4[1];
-
-  var _onFocus = useCallback(function (e) {
+  });
+  const onFocus = useCallback(e => {
     setTargetedEl(e.target);
   }, []);
-
-  var _useMemo = useMemo(function () {
-    var counter = 0;
-    var currentSelectedItemId = null;
-    var items = deepMap(children, function (child) {
+  const [childrenWithValues, selectedId] = useMemo(() => {
+    let counter = 0;
+    let currentSelectedItemId = null;
+    const items = deepMap(children, child => {
       if (child.type === CompareItem) {
-        var _child$props = child.props,
-            _child$props$value = _child$props.value,
-            childValue = _child$props$value === void 0 ? counter : _child$props$value,
-            onFocusFromProps = _child$props.onFocus,
-            restProps = _objectWithoutProperties(_child$props, _excluded2);
-
-        var hasAlreadySelectedItem = currentSelectedItemId === null;
-        var isSelectedItem = hasAlreadySelectedItem && compareValues(value, childValue);
+        const {
+          value: childValue = counter,
+          onFocus: onFocusFromProps,
+          ...restProps
+        } = child.props;
+        const hasAlreadySelectedItem = currentSelectedItemId === null;
+        const isSelectedItem = hasAlreadySelectedItem && compareValues(value, childValue);
 
         if (isSelectedItem) {
           currentSelectedItemId = counter;
         }
 
-        var patchedItem = patchItemIfNeeded(_objectSpread(_objectSpread({
-          child: child,
+        const patchedItem = patchItemIfNeeded({
+          child,
           itemId: counter,
-          childValue: childValue
-        }, restProps), {}, {
-          onFocus: function onFocus(e) {
+          childValue,
+          ...restProps,
+          onFocus: e => {
             if (onFocusFromProps) {
               onFocusFromProps(e);
             }
 
-            _onFocus(e);
+            onFocus(e);
           },
           ref: isSelectedItem ? activeNodeRef : null
-        }));
+        });
         counter += 1;
         return patchedItem;
       } else {
@@ -188,28 +165,25 @@ var useScrollableList = function useScrollableList(_ref2) {
       }
     });
     return [React.Children.toArray(items), currentSelectedItemId];
-  }, [children, value, compareValues, _onFocus, CompareItem]),
-      _useMemo2 = _slicedToArray(_useMemo, 2),
-      childrenWithValues = _useMemo2[0],
-      selectedId = _useMemo2[1];
-
-  var prepareDirectionScroller = function prepareDirectionScroller(direction) {
-    return function () {
-      var current = scrollableRef.current;
-      var left = Math.max(current.clientWidth - 2 * ARROW_AREA_WIDTH_IN_PX, 30) * (direction === 'right' ? 1 : -1);
-      setTargetedEl(null);
-      scrollElementBy(current, left);
-    };
+  }, [children, value, compareValues, onFocus, CompareItem]);
+
+  const prepareDirectionScroller = direction => () => {
+    const {
+      current
+    } = scrollableRef;
+    const left = Math.max(current.clientWidth - 2 * ARROW_AREA_WIDTH_IN_PX, 30) * (direction === 'right' ? 1 : -1);
+    setTargetedEl(null);
+    scrollElementBy(current, left);
   };
 
-  useEffect(function () {
+  useEffect(() => {
     if (!activeNodeRef.current) {
       return;
     }
 
     setTargetedEl(activeNodeRef.current);
   }, [value, childrenWithValues]);
-  var setArrowsVisibility = useCallback(function () {
+  const setArrowsVisibility = useCallback(() => {
     if (!scrollableRef.current) {
       return;
     }
@@ -217,8 +191,8 @@ var useScrollableList = function useScrollableList(_ref2) {
     setShowArrows(calculateArrowsVisibility(scrollableRef.current));
   }, []); // update arrows while smooth scrolling
 
-  useEffect(function () {
-    var scrollContainer = scrollableRef.current;
+  useEffect(() => {
+    const scrollContainer = scrollableRef.current;
 
     if (!scrollContainer) {
       return null;
@@ -227,13 +201,11 @@ var useScrollableList = function useScrollableList(_ref2) {
     scrollContainer.addEventListener('scroll', setArrowsVisibility, {
       passive: true
     });
-    return function () {
-      return scrollContainer.removeEventListener('scroll', setArrowsVisibility);
-    };
+    return () => scrollContainer.removeEventListener('scroll', setArrowsVisibility);
   }, [setArrowsVisibility]); // scrollIntoView active element when it changes or the component resizes
 
-  var updateScrollState = function updateScrollState() {
-    var scrollableEl = scrollableRef.current;
+  const updateScrollState = () => {
+    const scrollableEl = scrollableRef.current;
 
     if (!scrollableEl) {
       return;
@@ -255,14 +227,14 @@ var useScrollableList = function useScrollableList(_ref2) {
   });
   useEffect(updateScrollState, [targetedEl, setArrowsVisibility]);
   return {
-    selectedId: selectedId,
-    prepareDirectionScroller: prepareDirectionScroller,
-    activeNodeRef: activeNodeRef,
-    scrollableRef: scrollableRef,
-    containerRef: containerRef,
-    childrenWithValues: childrenWithValues,
-    showLeftArrow: showLeftArrow,
-    showRightArrow: showRightArrow
+    selectedId,
+    prepareDirectionScroller,
+    activeNodeRef,
+    scrollableRef,
+    containerRef,
+    childrenWithValues,
+    showLeftArrow,
+    showRightArrow
   };
 };