@rescui/tab-list 0.13.3 → 0.13.5

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_13oqeux_4",
-  "dark": "_dark_13oqeux_7",
-  "separator": "_separator_13oqeux_11"
+  "light": "_light_q23mtz_4",
+  "dark": "_dark_q23mtz_7",
+  "separator": "_separator_q23mtz_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_q5frz6_7",
-  "dark": "_dark_q5frz6_10",
-  "sizeM": "_sizeM_q5frz6_14",
-  "sizeL": "_sizeL_q5frz6_17",
-  "classic": "_classic_q5frz6_21",
-  "rock": "_rock_q5frz6_24",
-  "sparse": "_sparse_q5frz6_28",
-  "short": "_short_q5frz6_32",
-  "tabsContainer": "_tabsContainer_q5frz6_36",
-  "indicator": "_indicator_q5frz6_46",
-  "iconLeft": "_iconLeft_q5frz6_61",
-  "iconRight": "_iconRight_q5frz6_64",
-  "tab": "_tab_q5frz6_36",
-  "selected": "_selected_q5frz6_154",
-  "icon": "_icon_q5frz6_61"
+  "light": "_light_yqgmx8_7",
+  "dark": "_dark_yqgmx8_10",
+  "sizeM": "_sizeM_yqgmx8_14",
+  "sizeL": "_sizeL_yqgmx8_17",
+  "classic": "_classic_yqgmx8_21",
+  "rock": "_rock_yqgmx8_24",
+  "sparse": "_sparse_yqgmx8_28",
+  "short": "_short_yqgmx8_32",
+  "tabsContainer": "_tabsContainer_yqgmx8_36",
+  "indicator": "_indicator_yqgmx8_46",
+  "iconLeft": "_iconLeft_yqgmx8_61",
+  "iconRight": "_iconRight_yqgmx8_64",
+  "tab": "_tab_yqgmx8_36",
+  "selected": "_selected_yqgmx8_154",
+  "icon": "_icon_yqgmx8_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,67 +1,50 @@
-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, useCallback } from 'react';
-import { useResizeObserver } from './use-resize-observer.js';
+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
-  // Also on value changing the resize observer will reattach itself, which triggers the function
+  });
+  const [isSSR, setIsSSR] = useState(true); // Catch the resize of the container which is happening when the fonts downloads for example
 
-
-  var onResize = useCallback(function () {
+  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;
     }
 
     setIndicator(calculateIndicator(activeNodeRef.current, containerRef.current));
-  }, triggers);
-  useResizeObserver(containerRef, onResize);
+  };
+
+  useResizeObserver(containerRef, onResize, {
+    ignoreFirstCall: true
+  }); // Also trigger it on value change for example
+
+  useEffect(onResize, triggers);
   return indicator;
 };