@plesk/ui-library 3.42.0 → 3.43.0

package/esm/components/Tabs/Tabs.js

@@ -1,21 +1,14 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
 import classNames from 'classnames';
-import { Children, cloneElement, Component, Fragment, isValidElement } from 'react';
-import Measure from 'react-measure';
+import { Children, cloneElement, useRef, useState } from 'react';
 import { CLS_PREFIX } from '../../constants';
-import Dropdown from '../Dropdown';
-import Icon, { ICON_SIZE_16 } from '../Icon';
-import Label from '../Label';
-import Menu, { MenuItem } from '../Menu';
 import ResponsiveContext from '../ResponsiveContext';
-import { wrapFunction } from '../utils';
-import Tab from './Tab';
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-const ADDON_LEFT_PADDING = 5;
-const MIN_ADDON_WIDTH_DEFAULT = 150;
-const COLLAPSED_SEARCH_WIDTH = 60;
+import FakeTabs from './FakeTabs';
+import TabList from './TabList';
+import { useActive } from './useActive';
+import { useWidths } from './useWidths';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * `Tabs` component is a content area with a group of individual [Tab](#!/Tab) elements, each displaying different content
  * in the same screen area. `Tabs` are used when you have too much content to display in one place at the same time, so
@@ -23,430 +16,65 @@ const COLLAPSED_SEARCH_WIDTH = 60;
  * group name and a navigation button.
  * @since 0.0.35
  */
-class Tabs extends Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      active: this.props.active || 1,
-      collapsedLength: 0,
-      compact: false,
-      searching: false,
-      monospacedWidth: 0
-    });
-    _defineProperty(this, "widths", void 0);
-    _defineProperty(this, "addon", void 0);
-    _defineProperty(this, "tabsnavRef", void 0);
-    _defineProperty(this, "moreTabsRef", null);
-    _defineProperty(this, "checkAdaptive", () => {
-      let {
-        compact,
-        searching,
-        collapsedLength
-      } = this.state;
-      const {
-        addonMinWidth: addonMinWidthProp,
-        search,
-        monospaced
-      } = this.props;
-      const {
-        widths,
-        addon
-      } = this;
-      let monospacedWidth = 0;
-      const getMonospacedWidth = () => monospacedWidth;
-      if (!widths) {
-        return;
-      }
-      const addonMinWidth = ADDON_LEFT_PADDING + (addonMinWidthProp || (search?.props.minWidth ?? MIN_ADDON_WIDTH_DEFAULT));
-      const searchWidth = compact && search ? COLLAPSED_SEARCH_WIDTH + ADDON_LEFT_PADDING : 0;
-      const {
-        more,
-        container,
-        margin
-      } = widths;
-      let tabs = widths.tabs.slice();
-      const tabsNumber = tabs.length;
-      let lastTabIndex = tabsNumber - 1 - collapsedLength;
-      if (monospaced) {
-        monospacedWidth = Math.max(...tabs.slice(0, lastTabIndex + 1));
-        tabs = tabs.map(getMonospacedWidth);
-      }
-      const getListWidth = () => {
-        let listWidth = monospaced ? margin * Math.max(0, tabsNumber - 1 - Math.max(0, collapsedLength - 1)) : 0;
-        for (let i = 0; i <= lastTabIndex; ++i) {
-          listWidth += tabs[i];
-        }
-        if (collapsedLength) {
-          listWidth += more;
-        }
-        return listWidth;
-      };
-      let spaceForAddon = container - getListWidth();
-      if (addon && !collapsedLength && !compact && spaceForAddon <= addonMinWidth) {
-        compact = true;
-      }
-      let freeSpace = spaceForAddon - searchWidth;
-      if (freeSpace <= 0) {
-        // collapse
-        for (let i = lastTabIndex; i >= 0; --i) {
-          let width = tabs[i];
-          if (monospaced && widths.tabs[i] === monospacedWidth) {
-            monospacedWidth = widths.tabs.slice(0, lastTabIndex).reduce((max, tab) => tab > max ? tab : max, 0);
-            tabs = tabs.map(getMonospacedWidth);
-            width += (widths.tabs[i] - monospacedWidth) * lastTabIndex;
-          }
-          if (collapsedLength === 0) {
-            width -= more;
-          }
-          freeSpace += width;
-          ++collapsedLength;
-          --lastTabIndex;
-          if (freeSpace > 0) {
-            break;
-          }
-        }
-      } else {
-        // expand
-        for (let i = lastTabIndex + 1; i < tabsNumber; ++i) {
-          let width = tabs[i];
-          if (monospaced && widths.tabs[i] > monospacedWidth) {
-            monospacedWidth = widths.tabs[i];
-            tabs = tabs.map(getMonospacedWidth);
-            width = monospacedWidth + (monospacedWidth - width) * (lastTabIndex + 1);
-          }
-          if (collapsedLength === 1) {
-            width -= more;
-          }
-          if (freeSpace <= width) {
-            break;
-          }
-          freeSpace -= width;
-          --collapsedLength;
-          ++lastTabIndex;
-        }
-      }
-      if (collapsedLength || compact) {
-        spaceForAddon = container - getListWidth();
-        if (collapsedLength) {
-          compact = true;
-        } else if (spaceForAddon >= addonMinWidth) {
-          compact = false;
-          searching = false;
-        }
-      }
-      const newState = {
-        compact,
-        searching,
-        collapsedLength,
-        monospacedWidth
-      };
-      for (const key of Object.keys(newState)) {
-        if (JSON.stringify(newState[key]) === JSON.stringify(this.state[key])) {
-          delete newState[key];
-        }
-      }
-      if (Object.keys(newState).length) {
-        this.setState(newState, () => {
-          if (typeof newState.collapsedLength !== 'undefined' && this.state.collapsedLength !== newState.collapsedLength) {
-            this.checkAdaptive();
-          }
-        });
-      }
-    });
-    _defineProperty(this, "handleStartSearching", () => {
-      this.setState({
-        searching: true
-      });
-    });
-    _defineProperty(this, "handleCancelSearching", () => {
-      this.setState({
-        searching: false
-      }, this.checkAdaptive);
-    });
-    _defineProperty(this, "handleResize", () => {
-      const {
-        baseClassName
-      } = this.props;
-      if (this.tabsnavRef) {
-        const tabElements = this.tabsnavRef.querySelectorAll(`.${baseClassName}__tab-list--fake .${baseClassName}__tab`);
-        const more = tabElements[tabElements.length - 1];
-        const tabs = Array.prototype.slice.call(tabElements, 0, -1).map(el => el.offsetWidth);
-        this.widths = {
-          tabs,
-          more: more.offsetWidth,
-          container: this.tabsnavRef.offsetWidth,
-          margin: more.offsetWidth - (more.querySelector(`.${baseClassName}__link`)?.offsetWidth ?? 0)
-        };
-      }
-      this.checkAdaptive();
-    });
-    _defineProperty(this, "handleAddonResize", contentRect => {
-      this.addon = contentRect.bounds;
-      this.checkAdaptive();
-    });
-    _defineProperty(this, "renderTabItem", (tab, index, tabMode) => {
-      const {
-        baseClassName
-      } = this.props;
-      const {
-        monospacedWidth,
-        active
-      } = this.state;
-      if (!tab || tab.type !== Tab) {
-        return null;
-      }
-      const {
-        title,
-        label,
-        icon,
-        onActivate,
-        onClose,
-        component: Tag = 'a',
-        ...tabProps
-      } = tab.props;
-      const selected = index + 1 === active;
-      const key = index.toString();
-      const tabIcon = Icon.create(icon, {
-        size: ICON_SIZE_16,
-        className: `${baseClassName}__tab-icon`
-      });
-      const tabLabel = this.renderTabLabel(tabMode, label);
-      const tabClose = this.renderTabClose(tabMode, onClose);
-      const handleClick = () => this.onClick(index + 1);
-      tabProps.tabIndex = tabProps.tabIndex || 0;
-      tabProps.onKeyDown = wrapFunction(tabProps.onKeyDown, e => {
-        if (e.key === 'Enter') {
-          e.currentTarget.click();
-        }
-      });
-      if (tabMode === 'menu-item') {
-        return /*#__PURE__*/_jsx(MenuItem, {
-          icon: tabIcon,
-          label: /*#__PURE__*/_jsxs(Fragment, {
-            children: [tabLabel, tabClose]
-          }),
-          active: selected,
-          onClick: handleClick,
-          className: `${baseClassName}__menu-item`,
-          component: Tag,
-          ...tabProps,
-          children: title
-        }, key);
-      }
-      return /*#__PURE__*/_jsx("li", {
-        className: classNames(`${baseClassName}__tab`, selected && `${baseClassName}__tab--selected`, tabClose && `${baseClassName}__tab--closable`),
-        role: "presentation",
-        children: /*#__PURE__*/_jsxs(Tag, {
-          className: `${baseClassName}__link`,
-          role: "tab",
-          "aria-selected": selected || undefined,
-          style: {
-            width: monospacedWidth || undefined
-          },
-          onClick: handleClick,
-          ...tabProps,
-          children: [tabIcon, /*#__PURE__*/_jsx("span", {
-            className: `${baseClassName}__tab-title`,
-            children: title
-          }), tabLabel, tabClose]
-        })
-      }, key);
-    });
-  }
-  static getDerivedStateFromProps(props, state) {
-    const {
-      active
-    } = props;
-    const {
-      prevActive
-    } = state;
-    const nextState = {};
-    if (active && active !== prevActive) {
-      nextState.active = active;
-    }
-    nextState.prevActive = active;
-    return nextState;
-  }
-  componentDidUpdate() {
-    if (!this.widths || Children.count(this.props.children) !== this.widths.tabs.length) {
-      setTimeout(() => this.handleResize());
-    }
-  }
-  onClick(active) {
-    this.setState({
-      active
-    });
-    const tab = Array.isArray(this.props.children) ? this.props.children[active - 1] : this.props.children;
+const Tabs = _ref => {
+  let {
+    baseClassName = `${CLS_PREFIX}tabs`,
+    className,
+    addon,
+    placeholder,
+    children,
+    active: externalActive,
+    addonMinWidth,
+    monospaced,
+    search,
+    ...props
+  } = _ref;
+  const addonElement = addon || placeholder;
+  const tabNavRef = useRef(null);
+  const tabListRef = useRef(null);
+  const fakeAddonRef = useRef(null);
+  const childrenCount = Children.count(children);
+  const [active, setActive] = useActive(externalActive);
+  const {
+    monospacedWidth,
+    recalculateWidths,
+    compact,
+    visibleLength
+  } = useWidths({
+    monospaced,
+    tabNavRef,
+    tabListRef,
+    fakeAddonRef,
+    baseClassName,
+    childrenCount
+  });
+  const handleTabClick = active => {
+    setActive(active);
+    const tab = Array.isArray(children) ? children[active - 1] : children;
     tab?.props?.onActivate?.();
-  }
-  renderTabLabel(tabMode, label) {
-    const {
-      baseClassName
-    } = this.props;
-    if (typeof label === 'string') {
-      return /*#__PURE__*/_jsx(Label, {
-        className: `${baseClassName}__${tabMode}-label`,
-        intent: "danger",
-        children: label
-      });
-    }
-    if (/*#__PURE__*/isValidElement(label)) {
-      return /*#__PURE__*/cloneElement(label, {
-        className: classNames(`${baseClassName}__${tabMode}-label`, label.props.className)
-      });
-    }
-    return null;
-  }
-  renderTabClose(tabMode, onClose) {
-    const {
-      baseClassName
-    } = this.props;
-    if (typeof onClose === 'function') {
-      return /*#__PURE__*/_jsx("button", {
-        className: `${baseClassName}__${tabMode}-close`,
-        type: "button",
-        onClick: e => {
-          e.preventDefault();
-          e.stopPropagation();
-          onClose(e);
-        },
-        children: /*#__PURE__*/_jsx(Icon, {
-          className: `${baseClassName}__${tabMode}-close-icon`,
-          name: "cross-mark"
-        })
-      });
-    }
+  };
+  const [searching, setSearching] = useState(false);
+  if (!childrenCount) {
     return null;
   }
-  renderFakeTabs() {
-    const {
-      baseClassName,
-      children
-    } = this.props;
-    const childrenCount = Children.count(children);
-    if (!childrenCount || !children) {
-      return null;
-    }
-    return /*#__PURE__*/_jsxs("ul", {
-      className: classNames(`${baseClassName}__tab-list`, `${baseClassName}__tab-list--fake`),
-      children: [Children.map(children, tab => {
-        if (!tab || tab.type !== Tab) {
-          return null;
-        }
-        const {
-          title,
-          label,
-          icon,
-          onActivate,
-          onClose,
-          ...tabProps
-        } = tab.props;
-        const iconBlock = Icon.create(icon, {
-          size: ICON_SIZE_16,
-          className: `${baseClassName}__tab-icon`
-        });
-        const closeBlock = this.renderTabClose('tab', onClose);
-        return /*#__PURE__*/_jsxs("li", {
-          className: classNames(`${baseClassName}__tab`, closeBlock && `${baseClassName}__tab--closable`),
-          children: [/*#__PURE__*/_jsxs("a", {
-            className: `${baseClassName}__link`,
-            tabIndex: -1,
-            style: tabProps.style,
-            children: [iconBlock, /*#__PURE__*/_jsx("span", {
-              className: `${baseClassName}__tab-title`,
-              children: title
-            }), this.renderTabLabel('tab', label)]
-          }), closeBlock]
-        }, `${title}`);
-      }), /*#__PURE__*/_jsx("li", {
-        className: classNames(`${baseClassName}__tab`, `${baseClassName}__tab--more`),
-        children: /*#__PURE__*/_jsx("a", {
-          className: `${baseClassName}__link`,
-          tabIndex: -1,
-          children: /*#__PURE__*/_jsx(Icon, {
-            name: "three-dots-horizontal"
-          })
-        })
-      })]
-    });
-  }
-  createTabItems() {
-    const {
-      children
-    } = this.props;
-    const {
-      collapsedLength
-    } = this.state;
-    const visibleItems = [];
-    const hiddenItems = [];
-    const lastTabIndex = Children.count(children) - 1 - collapsedLength;
-    Children.forEach(children, (child, index) => {
-      const hidden = index > lastTabIndex;
-      const tabMode = hidden ? 'menu-item' : 'tab';
-      const renderedTab = this.renderTabItem(child, index, tabMode);
-      if (renderedTab) {
-        (hidden ? hiddenItems : visibleItems).push(renderedTab);
-      }
-    });
-    return {
-      visibleItems,
-      hiddenItems
-    };
-  }
-  renderTabList() {
-    const {
-      baseClassName,
-      children
-    } = this.props;
-    const {
-      active
-    } = this.state;
-    if (!Children.toArray(children).length) {
-      return null;
-    }
-    const {
-      visibleItems,
-      hiddenItems
-    } = this.createTabItems();
-    const moreSelected = active > visibleItems.length;
-    return /*#__PURE__*/_jsxs("ul", {
-      className: `${baseClassName}__tab-list`,
-      role: "tablist",
-      children: [visibleItems, hiddenItems.length > 0 && /*#__PURE__*/_jsx("li", {
-        ref: ref => this.moreTabsRef = ref,
-        className: classNames(`${baseClassName}__tab`, moreSelected && `${baseClassName}__tab--selected`, `${baseClassName}__tab--more`),
-        role: "presentation",
-        "aria-selected": moreSelected || undefined,
-        children: /*#__PURE__*/_jsx(Dropdown, {
-          className: `${baseClassName}__dropdown`,
-          menu: /*#__PURE__*/_jsx(Menu, {
-            children: hiddenItems
-          }),
-          menuPlacement: "bottom-end",
-          children: /*#__PURE__*/_jsx("a", {
-            className: `${baseClassName}__link`,
-            role: "tab",
-            tabIndex: 0,
-            "aria-selected": moreSelected || undefined,
-            children: /*#__PURE__*/_jsx(Icon, {
-              name: "three-dots-horizontal"
-            })
-          })
-        })
-      })]
-    });
-  }
-  renderSearchBar(searchProps) {
-    const {
-      baseClassName,
-      search
-    } = this.props;
+  const renderSearchBar = () => {
     if (!search) {
       return null;
     }
-    const {
-      compact
-    } = this.state;
+    const handleStartSearching = () => setSearching(true);
+    const handleCancelSearching = () => setSearching(false);
+    const searchProps = {
+      className: `${baseClassName}__search-bar`,
+      collapsable: compact,
+      onExpand: handleStartSearching,
+      onCollapse: handleCancelSearching,
+      ...(searching ? {
+        autoFocus: true,
+        responsive: false,
+        maxWidth: 'none',
+        minWidth: 'unset'
+      } : {})
+    };
     const clone = /*#__PURE__*/cloneElement(search, searchProps);
     if (compact) {
       return /*#__PURE__*/_jsx(ResponsiveContext.Provider, {
@@ -458,112 +86,47 @@ class Tabs extends Component {
       });
     }
     return clone;
+  };
+  const addonStyle = {};
+  if (search && !compact) {
+    addonStyle.maxWidth = search.props.maxWidth;
   }
-  render() {
-    const {
-      baseClassName,
-      className,
-      addon,
-      placeholder,
-      children,
-      active,
-      addonMinWidth,
-      monospaced,
-      search,
-      ...props
-    } = this.props;
-    const {
-      compact,
-      searching
-    } = this.state;
-    const childrenCount = Children.count(children);
-    if (!childrenCount) {
-      return null;
-    }
-    const addonElement = addon || placeholder;
-    let addonBlock = addonElement;
-    const addonProps = {};
-    let searchBlock = null;
-    if (search) {
-      const searchProps = {
-        collapsable: compact,
-        onExpand: this.handleStartSearching,
-        onCollapse: this.handleCancelSearching
-      };
-      if (compact) {
-        if (searching) {
-          searchProps.maxWidth = undefined;
-          searchProps.minWidth = undefined;
-          searchProps.autoFocus = true;
-          searchProps.responsive = false;
-        } else {
-          searchProps.onSearch = this.handleStartSearching;
-        }
-        searchBlock = this.renderSearchBar(searchProps);
-      } else if (addonElement) {
-        searchProps.key = 1;
-        addonBlock = /*#__PURE__*/_jsxs(_Fragment, {
-          children: [this.renderSearchBar(searchProps), /*#__PURE__*/cloneElement(addonElement, {
-            key: 2
-          })]
-        });
-      } else {
-        addonProps.style = {
-          maxWidth: search.props.maxWidth
-        };
-        addonBlock = this.renderSearchBar(searchProps);
-      }
-    }
-    return /*#__PURE__*/_jsxs("div", {
-      className: classNames(baseClassName, className),
-      ...props,
-      children: [/*#__PURE__*/_jsx(Measure, {
-        onResize: this.handleResize,
-        innerRef: ref => this.tabsnavRef = ref,
-        children: _ref => {
-          let {
-            measureRef
-          } = _ref;
-          return /*#__PURE__*/_jsxs("div", {
-            className: classNames(`${baseClassName}__nav`, compact && `${baseClassName}__nav--compact`, searching && `${baseClassName}__nav--searching`, search && `${baseClassName}__nav--search`),
-            ref: measureRef,
-            children: [this.renderTabList(), /*#__PURE__*/_jsx(Measure, {
-              onResize: this.handleResize,
-              children: _ref2 => {
-                let {
-                  measureRef: ref
-                } = _ref2;
-                const fakeTabs = this.renderFakeTabs();
-                return fakeTabs ? /*#__PURE__*/cloneElement(fakeTabs, {
-                  ref
-                }) : null;
-              }
-            }), searchBlock, addonBlock && /*#__PURE__*/_jsx(Measure, {
-              onResize: this.handleAddonResize,
-              bounds: true,
-              children: _ref3 => {
-                let {
-                  measureRef: ref
-                } = _ref3;
-                return /*#__PURE__*/_jsx("div", {
-                  className: `${baseClassName}__addon`,
-                  ref: ref,
-                  ...addonProps,
-                  children: addonBlock
-                });
-              }
-            })]
-          });
-        }
-      }), /*#__PURE__*/_jsx("div", {
-        className: `${baseClassName}__tab-panel`,
-        role: "tabpanel",
-        children: Children.map(children, (tab, index) => index + 1 === this.state.active ? tab : null)
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames(baseClassName, className),
+    ...props,
+    children: [compact && addonElement && /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__addon ${baseClassName}__addon--compact`,
+      children: addonElement
+    }), /*#__PURE__*/_jsxs("div", {
+      className: classNames(`${baseClassName}__nav`, compact && `${baseClassName}__nav--compact`, searching && `${baseClassName}__nav--searching`, search && `${baseClassName}__nav--search`),
+      ref: tabNavRef,
+      children: [/*#__PURE__*/_jsx(TabList, {
+        tabListRef: tabListRef,
+        active: active,
+        onTabClick: handleTabClick,
+        visibleLength: visibleLength,
+        monospacedWidth: monospacedWidth,
+        baseClassName: baseClassName,
+        children: children
+      }), compact && renderSearchBar(), !compact && (addonElement || search) && /*#__PURE__*/_jsxs("div", {
+        className: `${baseClassName}__addon`,
+        style: addonStyle,
+        children: [renderSearchBar(), addonElement]
+      }), /*#__PURE__*/_jsx(FakeTabs, {
+        onResize: recalculateWidths,
+        baseClassName: baseClassName,
+        children: children
+      }), addonElement && /*#__PURE__*/_jsx("div", {
+        ref: fakeAddonRef,
+        className: `${baseClassName}__addon-fake-wrapper`,
+        "aria-hidden": true,
+        children: addonElement
       })]
-    });
-  }
-}
-_defineProperty(Tabs, "defaultProps", {
-  baseClassName: `${CLS_PREFIX}tabs`
-});
+    }), /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__tab-panel`,
+      role: "tabpanel",
+      children: Children.map(children, (tab, index) => index + 1 === active ? tab : null)
+    })]
+  });
+};
 export default Tabs;

package/esm/components/Tabs/useActive.js

@@ -0,0 +1,12 @@
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+import { useState } from 'react';
+export const useActive = externalActive => {
+  const [active, setActive] = useState(externalActive || 1);
+  const [prevExternalActive, setPrevExternalActive] = useState(externalActive);
+  if (externalActive && externalActive !== prevExternalActive) {
+    setPrevExternalActive(externalActive);
+    setActive(externalActive);
+  }
+  return [active, setActive];
+};