react-elegant-ui/esm/components/TabsMenu/TabsMenu@desktop.js

Elegant UI components, made by BEM best practices for react

var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
var __rest = this && this.__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
var __read = this && this.__read || function (o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m) return o;
  var i = m.call(o),
    r,
    ar = [],
    e;
  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
  } catch (error) {
    e = {
      error: error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"])) m.call(i);
    } finally {
      if (e) throw e.error;
    }
  }
  return ar;
};
import React, { createRef, useCallback, useMemo, useState } from 'react';
import { makeChain } from '../../lib/makeChain';
import { mergeRefsAsCallback } from '../../lib/mergeRefs';
import { withFocusVisible } from '../../hocs/withFocusVisible';
import { useKeyboardNavigation } from '../../hooks/behavior/useKeyboardNavigation';
import { TabsMenu as TabsMenuBase, cnTabsMenu } from './TabsMenu';
export * from './TabsMenu';
export var withKeyboardNavigation = function (BaseComponent) {
  return function (_a) {
    var loopSwitching = _a.loopSwitching,
      props = __rest(_a, ["loopSwitching"]);
    var tabs = props.tabs,
      activeTab = props.activeTab,
      setActiveTab = props.setActiveTab,
      _b = props.orientation,
      orientation = _b === void 0 ? 'vertical' : _b,
      tabsRefExternal = props.tabsRef,
      onFocusCaptureExternal = props.onFocusCapture,
      onBlurCaptureExternal = props.onBlurCapture;
    // Local refs
    var tabsRef = useMemo(function () {
      return tabs.map(function () {
        return /*#__PURE__*/createRef();
      });
    }, [tabs]);
    var activeTabIndex = useMemo(function () {
      for (var i = 0; i < tabs.length; i++) {
        if (tabs[i].id === activeTab) {
          return i;
        }
      }
      return -1;
    }, [tabs, activeTab]);
    var setActiveTabByIndex = useCallback(function (index) {
      var tab = tabs[index];
      // Skip when can't found tab by index
      if (tab === undefined) return;
      // Focus on tab
      var tabRef = tabsRef[index];
      if (tabRef !== undefined && tabRef.current !== null) {
        tabRef.current.focus();
      }
      if (tab.id !== undefined && setActiveTab !== undefined) {
        setActiveTab(tab.id);
      }
    }, [tabs, tabsRef, setActiveTab]);
    var _c = __read(useState(false), 2),
      isFocused = _c[0],
      setIsFocused = _c[1];
    useKeyboardNavigation({
      enabled: isFocused,
      items: tabs,
      cursor: activeTabIndex,
      setCursor: setActiveTabByIndex,
      direction: [orientation],
      loop: loopSwitching
    });
    // Merge local and external refs
    var tabsRefMix = useMemo(function () {
      return tabsRefExternal === undefined ? tabsRef : tabsRef.map(function (_, index) {
        return mergeRefsAsCallback(tabsRefExternal[index], tabsRef[index]);
      });
    }, [tabsRefExternal, tabsRef]);
    // Merge handlers
    var _d = useMemo(function () {
        return {
          onFocusCapture: makeChain(onFocusCaptureExternal, function () {
            return setIsFocused(true);
          }),
          onBlurCapture: makeChain(onBlurCaptureExternal, function () {
            return setIsFocused(false);
          })
        };
      }, [onFocusCaptureExternal, onBlurCaptureExternal, setIsFocused]),
      onFocusCapture = _d.onFocusCapture,
      onBlurCapture = _d.onBlurCapture;
    return /*#__PURE__*/React.createElement(BaseComponent, __assign({}, props, {
      tabsRef: tabsRefMix,
      onFocusCapture: onFocusCapture,
      onBlurCapture: onBlurCapture
    }));
  };
};
export var TabsMenuDesktop = withKeyboardNavigation(TabsMenuBase);
export var TabsMenu = withFocusVisible(cnTabsMenu())(TabsMenuDesktop);