@plesk/ui-library 3.43.2 → 3.44.0

package/esm/components/Section/useVertical.js

@@ -0,0 +1,30 @@
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+import { useContext, useState, useLayoutEffect } from 'react';
+import { useResizeObserver } from '../../hooks';
+import VerticalContext, { VERTICAL_BREAKPOINT } from '../VerticalContext';
+const isVertical = containerRef => {
+  if (!containerRef.current) {
+    return false;
+  }
+  const {
+    width
+  } = containerRef.current.getBoundingClientRect();
+  return width < VERTICAL_BREAKPOINT;
+};
+export const useVertical = (externalVertical, containerRef) => {
+  const verticalContext = useContext(VerticalContext);
+  const [internalVertical, setInternalVertical] = useState(false);
+  useLayoutEffect(() => {
+    setInternalVertical(isVertical(containerRef));
+  }, [containerRef]);
+  useResizeObserver({
+    ref: containerRef,
+    onResize: () => {
+      setInternalVertical(isVertical(containerRef));
+    },
+    callOnInit: false
+  });
+  const vertical = [externalVertical, verticalContext, internalVertical].find(v => typeof v === 'boolean');
+  return vertical;
+};

package/esm/components/SegmentedControl/SegmentedControl.js

@@ -80,6 +80,7 @@ const SegmentedControl = _ref => {
       [`${baseClassName}--collapsed`]: isResponsive,
       [`${baseClassName}--vertical`]: label && labelPlacement === 'top'
     }, className),
+    role: "list",
     ...props,
     children: [label && /*#__PURE__*/_jsx("div", {
       className: `${baseClassName}__label`,

package/esm/components/Select/Select.js

@@ -1,16 +1,15 @@
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
-import { Children, useState, useRef, isValidElement } from 'react';
+import { Children, useState, useRef, isValidElement, useId } from 'react';
 import classNames from 'classnames';
 import { safeInvoke, EventEmitter } from '../utils';
 import { CLS_PREFIX } from '../../constants';
 import ComboBoxDropdown, { findNextSafeIndex } from '../ComboBoxDropdown';
-import Translate from '../Translate';
+import { InternalTranslate } from '../Translate';
 import SelectControl from './SelectControl';
 import SelectOptionGroup from './SelectOptionGroup';
 import SelectOption from './SelectOption';
 import { jsx as _jsx } from "react/jsx-runtime";
-// eslint-disable-next-line default-param-last
 const collect = function (children) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   let group = arguments.length > 2 ? arguments[2] : undefined;
@@ -111,6 +110,8 @@ const Select = _ref => {
   const [opened, setOpened] = useState(false);
   const controlRef = useRef(null);
   const emitterRef = useRef(new EventEmitter());
+  const uid = useId();
+  const listboxId = `${baseClassName}-listbox-${id || uid}`;
   let [value, setValue] = useState(() => {
     if (typeof defaultValue === 'undefined') {
       return multiple ? [] : undefined;
@@ -143,6 +144,7 @@ const Select = _ref => {
   }
   const groupFns = [];
   const optionFns = [];
+
   // eslint-disable-next-line func-style
   function createInclude(fns) {
     return item => fns.every(fn => fn(item));
@@ -286,6 +288,8 @@ const Select = _ref => {
     onClear: handleClear,
     onValueRemove: handleValueRemove,
     placeholder: placeholder,
+    opened: opened,
+    listboxId: listboxId,
     ref: controlRef
   });
   return /*#__PURE__*/_jsx(ComboBoxDropdown, {
@@ -302,12 +306,12 @@ const Select = _ref => {
     highlightedIndex: highlightedIndex,
     onHighlightedIndexChange: handleHighlightedIndexChange,
     onClose: handleClose,
-    noOptions: /*#__PURE__*/_jsx(Translate, {
-      content: "Select.noOptions",
-      fallback: "No options"
+    noOptions: /*#__PURE__*/_jsx(InternalTranslate, {
+      content: "Select.noOptions"
     }),
     emitter: emitterRef.current,
     value: value,
+    listboxId: listboxId,
     ...props
   });
 };

package/esm/components/Select/SelectControl.js

@@ -2,7 +2,7 @@
 
 import classNames from 'classnames';
 import { Fragment, useRef, useState, useLayoutEffect, forwardRef } from 'react';
-import { useTranslate } from '../LocaleProvider';
+import { useInternalTranslate } from '../LocaleProvider';
 import { CLS_PREFIX } from '../../constants';
 import Icon from '../Icon';
 import MultiValue from './MultiValue';
@@ -50,6 +50,8 @@ const SelectControl = /*#__PURE__*/forwardRef(function SelectControl(_ref, ref)
     onClear,
     onValueRemove,
     placeholder,
+    opened = false,
+    listboxId,
     ...props
   } = _ref;
   const inputRef = useRef(null);
@@ -57,9 +59,9 @@ const SelectControl = /*#__PURE__*/forwardRef(function SelectControl(_ref, ref)
   const searchBufferTimer = useRef(0);
   const [inputWidth, setInputWidth] = useState(DEFAULT_INPUT_WIDTH);
   const [focused, setFocused] = useState(false);
-  const translate = useTranslate();
+  const translate = useInternalTranslate('Select');
   if (placeholder === undefined) {
-    placeholder = translate('Select.placeholder', undefined, 'Select...');
+    placeholder = translate('placeholder');
   }
   let values = [];
   if (Array.isArray(current)) {
@@ -190,7 +192,13 @@ const SelectControl = /*#__PURE__*/forwardRef(function SelectControl(_ref, ref)
         ref: inputRef,
         style: {
           width: inputWidth
-        }
+        },
+        role: searchable ? 'combobox' : undefined,
+        "aria-autocomplete": searchable ? 'list' : undefined,
+        "aria-haspopup": searchable ? 'listbox' : 'listbox',
+        "aria-expanded": opened,
+        "aria-controls": listboxId,
+        autoComplete: "off"
       }), !filterValue && /*#__PURE__*/_jsxs(Fragment, {
         children: [!Array.isArray(current) && current && /*#__PURE__*/_jsx("span", {
           className: `${baseClassName}__value`,
@@ -227,6 +235,8 @@ const SelectControl = /*#__PURE__*/forwardRef(function SelectControl(_ref, ref)
         type: "button",
         className: classNames(`${baseClassName}__indicator`, `${baseClassName}__indicator--dropdown`),
         tabIndex: -1,
+        "aria-haspopup": "listbox",
+        "aria-expanded": opened,
         children: /*#__PURE__*/_jsx(Icon, {
           className: `${baseClassName}__indicator-icon`,
           children: /*#__PURE__*/_jsx("svg", {

package/esm/components/Spot/SpotPopup.js

@@ -5,7 +5,7 @@ import { useEffect, useState, useRef } from 'react';
 import { CLS_PREFIX } from '../../constants';
 import Popover from '../Popover';
 import Text from '../Text';
-import Translate from '../Translate';
+import { InternalTranslate } from '../Translate';
 import Focuser from '../Overlay/Focuser';
 import { safeInvoke } from '../utils';
 
@@ -70,15 +70,14 @@ const SpotPopup = _ref => {
       children: [meta && meta.total > 1 ? /*#__PURE__*/_jsx(Text, {
         intent: "muted",
         fontSize: "sm",
-        children: /*#__PURE__*/_jsx(Translate, {
+        children: /*#__PURE__*/_jsx(InternalTranslate, {
           namespace: "SpotPopup",
           content: "total",
           params: {
             current: meta.current + 1,
             total: meta.total
           },
-          translators: locale,
-          fallback: "%%current%% of %%total%%"
+          translators: locale
         })
       }) : /*#__PURE__*/_jsx("span", {}), /*#__PURE__*/_jsx("div", {
         className: `${baseClassName}__actions`,

package/esm/components/Status/Status.js

@@ -47,6 +47,7 @@ const Status = _ref => {
       [`${baseClassName}--${intent}`]: intent && !progress,
       [`${baseClassName}--on-dark`]: useContext(OnDarkContext)
     }, className),
+    role: intent === 'warning' || intent === 'danger' ? 'alert' : 'status',
     outerProps: {
       ...outerProps,
       className: classNames({

package/esm/components/Tabs/TabList.js

@@ -19,29 +19,46 @@ const TabList = _ref => {
     onTabClick,
     visibleLength,
     monospacedWidth,
-    baseClassName
+    baseClassName,
+    tabPanelId,
+    idPrefix
   } = _ref;
   const handleTabClick = (tab, position) => {
     onTabClick(position);
     tab?.props?.onActivate?.();
   };
-  let tabs = Children.toArray(children);
-  tabs = tabs.filter(child => child?.type === Tab);
+  const childArray = Children.map(children, (child, index) => ({
+    child,
+    position: index + 1
+  }));
+  const tabs = childArray.filter(_ref2 => {
+    let {
+      child
+    } = _ref2;
+    return child?.type === Tab;
+  });
   const listChildren = tabs.slice(0, visibleLength);
   const menuChildren = tabs.slice(visibleLength);
-  const listItems = listChildren.map((tab, index) => {
-    const position = index + 1;
+  const listItems = listChildren.map(_ref3 => {
+    let {
+      child: tab,
+      position
+    } = _ref3;
     return /*#__PURE__*/_jsx(TabListItem, {
-      // eslint-disable-line react/no-array-index-key
       tab: tab,
       baseClassName: baseClassName,
       selected: position === active,
       onClick: () => handleTabClick(tab, position),
-      monospacedWidth: monospacedWidth
-    }, index);
+      monospacedWidth: monospacedWidth,
+      tabPanelId: tabPanelId,
+      id: idPrefix ? `${idPrefix}-${position}` : undefined
+    }, position);
   });
-  const menuItems = menuChildren.map((tab, index) => {
-    const position = listChildren.length + index + 1;
+  const menuItems = menuChildren.map(_ref4 => {
+    let {
+      child: tab,
+      position
+    } = _ref4;
     const {
       title,
       label,
@@ -52,7 +69,6 @@ const TabList = _ref => {
       ...tabProps
     } = tab.props;
     return /*#__PURE__*/_jsx(MenuItem, {
-      // eslint-disable-line react/no-array-index-key
       icon: /*#__PURE__*/_jsx(TabIcon, {
         icon: icon,
         baseClassName: baseClassName
@@ -74,13 +90,14 @@ const TabList = _ref => {
       component: Tag,
       ...tabProps,
       children: title
-    }, index);
+    }, position);
   });
   const moreSelected = active > listChildren.length;
   return /*#__PURE__*/_jsxs("ul", {
     ref: tabListRef,
     className: `${baseClassName}__tab-list`,
     role: "tablist",
+    "aria-labelledby": tabPanelId,
     children: [listItems, menuItems.length > 0 && /*#__PURE__*/_jsx("li", {
       className: classNames(`${baseClassName}__tab`, moreSelected && `${baseClassName}__tab--selected`, `${baseClassName}__tab--more`),
       role: "presentation",

package/esm/components/Tabs/TabListItem.js

@@ -13,7 +13,9 @@ const TabListItem = _ref => {
     onClick,
     monospacedWidth,
     baseClassName,
-    isFake = false
+    isFake = false,
+    tabPanelId,
+    id
   } = _ref;
   const {
     title,
@@ -37,7 +39,9 @@ const TabListItem = _ref => {
       }
     }),
     role: 'tab',
+    'aria-controls': selected ? tabPanelId : undefined,
     'aria-selected': selected || undefined,
+    id,
     ...tabProps
   };
   const Tag = isFake ? 'a' : component;

package/esm/components/Tabs/Tabs.js

@@ -1,7 +1,7 @@
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
 import classNames from 'classnames';
-import { Children, cloneElement, useRef, useState } from 'react';
+import { Children, cloneElement, useId, useRef, useState } from 'react';
 import { CLS_PREFIX } from '../../constants';
 import ResponsiveContext from '../ResponsiveContext';
 import FakeTabs from './FakeTabs';
@@ -32,8 +32,12 @@ const Tabs = _ref => {
   const addonElement = addon || placeholder;
   const tabNavRef = useRef(null);
   const tabListRef = useRef(null);
-  const fakeAddonRef = useRef(null);
+  const addonRef = useRef(null);
   const childrenCount = Children.toArray(children).length;
+  const wrappedAddonElement = addonElement ? /*#__PURE__*/_jsx("div", {
+    ref: addonRef,
+    children: addonElement
+  }) : null;
   const [active, setActive] = useActive(externalActive);
   const {
     monospacedWidth,
@@ -44,11 +48,12 @@ const Tabs = _ref => {
     monospaced,
     tabNavRef,
     tabListRef,
-    fakeAddonRef,
+    addonRef,
     baseClassName,
     childrenCount
   });
   const [searching, setSearching] = useState(false);
+  const id = useId();
   if (!childrenCount) {
     return null;
   }
@@ -86,12 +91,13 @@ const Tabs = _ref => {
   if (search && !compact) {
     addonStyle.maxWidth = search.props.maxWidth;
   }
+  const tabPanelId = `${id}-tabpanel`;
   return /*#__PURE__*/_jsxs("div", {
     className: classNames(baseClassName, className),
     ...props,
-    children: [compact && addonElement && /*#__PURE__*/_jsx("div", {
+    children: [compact && wrappedAddonElement && /*#__PURE__*/_jsx("div", {
       className: `${baseClassName}__addon ${baseClassName}__addon--compact`,
-      children: addonElement
+      children: wrappedAddonElement
     }), /*#__PURE__*/_jsxs("div", {
       className: classNames(`${baseClassName}__nav`, compact && `${baseClassName}__nav--compact`, searching && `${baseClassName}__nav--searching`, search && `${baseClassName}__nav--search`),
       ref: tabNavRef,
@@ -102,25 +108,23 @@ const Tabs = _ref => {
         visibleLength: visibleLength,
         monospacedWidth: monospacedWidth,
         baseClassName: baseClassName,
+        tabPanelId: tabPanelId,
         children: children
-      }), compact && renderSearchBar(), !compact && (addonElement || search) && /*#__PURE__*/_jsxs("div", {
+      }), compact && renderSearchBar(), !compact && (wrappedAddonElement || search) && /*#__PURE__*/_jsxs("div", {
         className: `${baseClassName}__addon`,
         style: addonStyle,
-        children: [renderSearchBar(), addonElement]
+        children: [renderSearchBar(), wrappedAddonElement]
       }), /*#__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
       })]
     }), /*#__PURE__*/_jsx("div", {
+      id: tabPanelId,
       className: `${baseClassName}__tab-panel`,
       role: "tabpanel",
-      children: Children.toArray(children).map((tab, index) => index + 1 === active ? tab : null)
+      "aria-labelledby": `${id}-${active}`,
+      children: Children.map(children, (tab, index) => index + 1 === active ? tab : null)
     })]
   });
 };

package/esm/components/Tabs/useWidths.js

@@ -6,7 +6,7 @@ export const useWidths = _ref => {
   let {
     tabNavRef,
     tabListRef,
-    fakeAddonRef,
+    addonRef,
     baseClassName,
     monospaced = false,
     childrenCount
@@ -39,8 +39,8 @@ export const useWidths = _ref => {
     let availableSpace = tabNavWidth - addonWidth;
     const allTabsFit = availableSpace >= tabsWidth;
     const getContentKey = () => {
-      const fakeAddonWidth = fakeAddonRef.current?.getBoundingClientRect().width ?? 0;
-      return `${fakeTabWidths.join('-')}-${tabNavWidth}-${fakeAddonWidth}-${monospacedWidth}`;
+      const addonWrapperWidth = addonRef.current?.getBoundingClientRect().width ?? 0;
+      return `${fakeTabWidths.join('-')}-${tabNavWidth}-${addonWrapperWidth}-${monospacedWidth}`;
     };
     if (allTabsFit) {
       setVisibleLength(tabLength);
@@ -70,7 +70,7 @@ export const useWidths = _ref => {
       return 0;
     };
     setVisibleLength(calculateVisibleLength());
-  }, [tabNavRef, tabListRef, fakeAddonRef, baseClassName, monospaced, compact]);
+  }, [tabNavRef, tabListRef, addonRef, baseClassName, monospaced, compact]);
   useLayoutEffect(() => {
     recalculateWidths();
   }, [recalculateWidths]);
@@ -83,7 +83,7 @@ export const useWidths = _ref => {
     onResize: recalculateWidths
   });
   useResizeObserver({
-    ref: fakeAddonRef,
+    ref: addonRef,
     onResize: recalculateWidths
   });
   return {

package/esm/components/Toast/Toast.js

@@ -33,6 +33,7 @@ const Toast = _ref => {
   });
   const result = /*#__PURE__*/_jsxs("div", {
     tabIndex: 0,
+    role: "status",
     className: classNames(baseClassName, intent && `${baseClassName}--${intent}`, accent && `${baseClassName}--accent`, className),
     ...props,
     ref: innerRef,

package/esm/components/Toaster/GroupLabel.js

@@ -2,6 +2,7 @@
 
 import Label from '../Label';
 import Tooltip from '../Tooltip';
+import { useInternalTranslate } from '../LocaleProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 const GroupLabel = _ref => {
   let {
@@ -12,9 +13,10 @@ const GroupLabel = _ref => {
     renderHeaderLabel,
     renderHeaderLabelTitle,
     closable = false,
-    renderHeaderLabelTooltip = closable ? () => 'Close group' : undefined,
+    renderHeaderLabelTooltip,
     intent
   } = group;
+  const translate = useInternalTranslate('Toaster');
   if (!renderHeaderLabel && !renderHeaderLabelTitle) {
     return null;
   }
@@ -31,8 +33,8 @@ const GroupLabel = _ref => {
     return renderHeaderLabel(group, labelProps);
   }
   const wrapInTooltip = content => {
-    if (!renderHeaderLabelTooltip) return content;
-    const title = renderHeaderLabelTooltip(group);
+    if (!renderHeaderLabelTooltip && !closable) return content;
+    const title = renderHeaderLabelTooltip?.(group) ?? translate('closeGroup');
     if (!title) return content;
     return /*#__PURE__*/_jsx(Tooltip, {
       title: title,

package/esm/components/Tooltip/Tooltip.js

@@ -14,6 +14,8 @@ const createRectFactory = (width, height) => (left, top) => ({
   bottom: top + height
 });
 const isInside = (r1, r2) => r1.left >= r2.left && r1.right <= r2.right && r1.top >= r2.top && r1.bottom <= r2.bottom;
+let tooltipId = 0;
+const generateTooltipId = () => `tooltip-${tooltipId++}`;
 const determinePosition = _ref => {
   let {
     clientX,
@@ -94,7 +96,8 @@ class Tooltip extends Component {
       left: 0,
       top: 0,
       ready: false,
-      visible: false
+      visible: false,
+      id: generateTooltipId()
     });
     _defineProperty(this, "timer", null);
     _defineProperty(this, "tooltipRef", /*#__PURE__*/createRef());
@@ -154,7 +157,8 @@ class Tooltip extends Component {
     const {
       left,
       top,
-      visible
+      visible,
+      id
     } = this.state;
     const {
       baseClassName,
@@ -169,6 +173,7 @@ class Tooltip extends Component {
       level: Z_INDEX_TOOLTIP,
       children: /*#__PURE__*/_jsx("span", {
         ref: this.tooltipRef,
+        id: id,
         className: classNames(baseClassName, className),
         style: {
           ...style,
@@ -183,7 +188,8 @@ class Tooltip extends Component {
   }
   render() {
     const {
-      ready
+      ready,
+      id
     } = this.state;
     const {
       children
@@ -193,7 +199,8 @@ class Tooltip extends Component {
         onMouseEnter: wrapFunction(children.props.onMouseEnter, this.handleMouseEnter),
         onMouseMove: wrapFunction(children.props.onMouseMove, this.handleMouseMove),
         onMouseLeave: wrapFunction(children.props.onMouseLeave, this.handleHide),
-        onMouseDown: wrapFunction(children.props.onMouseDown, this.handleHide)
+        onMouseDown: wrapFunction(children.props.onMouseDown, this.handleHide),
+        'aria-labelledby': id
       }), ready && this.renderTooltip()]
     });
   }

package/esm/components/Translate/Translate.js

@@ -1,6 +1,7 @@
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
 import { useTranslate } from '../LocaleProvider';
+import { getLocaleMessages } from './locale';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `Translate` component.
@@ -16,6 +17,7 @@ const Translate = _ref => {
     fallback,
     namespace,
     translators,
+    defaultMessages,
     ...props
   } = _ref;
   const Tag = component || 'span';
@@ -28,7 +30,7 @@ const Translate = _ref => {
     }
     return translator;
   }
-  const message = translate(key, params, fallback);
+  const message = translate(key, params, fallback, defaultMessages);
   const tagProps = {
     ...props
   };
@@ -43,4 +45,11 @@ const Translate = _ref => {
     ...tagProps
   });
 };
-export default Translate;
+export default Translate;
+export const InternalTranslate = props => {
+  const defaultMessages = getLocaleMessages();
+  return /*#__PURE__*/_jsx(Translate, {
+    ...props,
+    defaultMessages: defaultMessages
+  });
+};

package/esm/components/Translate/index.js

@@ -1,4 +1,5 @@
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
-export { default } from './Translate';
-export { isLikeText } from './isLikeText';
+export { default, InternalTranslate } from './Translate';
+export { isLikeText } from './isLikeText';
+export { setLocale, getLocale, getLocaleMessages } from './locale';

package/esm/components/Translate/locale.js

@@ -0,0 +1,15 @@
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+import locales from '../../locales';
+const DEFAULT_LOCALE = 'en-US';
+let currenLocale = DEFAULT_LOCALE;
+export const setLocale = locale => {
+  currenLocale = locale;
+};
+export const getLocale = () => currenLocale;
+export const getLocaleMessages = () => (locales[currenLocale] ?? Object.values(locales).find(_ref => {
+  let {
+    language
+  } = _ref;
+  return language === `${currenLocale}`.toLocaleLowerCase();
+}) ?? locales[DEFAULT_LOCALE])?.messages;

package/esm/components/index.js

@@ -88,7 +88,7 @@ export { default as Toaster } from './Toaster';
 export { default as Toolbar, ToolbarGroup, ToolbarExpander } from './Toolbar';
 export { default as Tooltip } from './Tooltip';
 export { default as Tour } from './Tour';
-export { default as Translate } from './Translate';
+export { default as Translate, setLocale, getLocale } from './Translate';
 export { default as Link } from './Link';
 export { default as Skeleton, SkeletonTabs, SkeletonText } from './Skeleton';
 export { default as Spinner } from './Spinner';

package/esm/hooks/useResizeObserver.js

@@ -4,19 +4,25 @@ import { useEffect, useRef } from 'react';
 export const useResizeObserver = _ref => {
   let {
     ref,
-    onResize
+    onResize,
+    callOnInit = true
   } = _ref;
+  const isInitial = useRef(true);
   const onResizeRef = useRef(undefined);
   onResizeRef.current = onResize;
   useEffect(() => {
     if (!ref.current) return undefined;
     if (typeof window === 'undefined' || !('ResizeObserver' in window)) return undefined;
     const observer = new ResizeObserver(() => {
+      if (!callOnInit && isInitial.current) {
+        isInitial.current = false;
+        return;
+      }
       onResizeRef.current?.();
     });
     observer.observe(ref.current);
     return () => {
       observer.disconnect();
     };
-  }, [ref]);
+  }, [ref, callOnInit]);
 };

package/esm/index.js

@@ -1,6 +1,6 @@
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 import svg4everybody from 'svg4everybody';
-const version = "3.43.2";
+const version = "3.44.0";
 export * from './publicPath';
 export { version };
 export * from './utils';