@plesk/ui-library 3.43.2 → 3.44.0

package/cjs/components/Menu/Menu.js

@@ -42,6 +42,7 @@ const Menu = /*#__PURE__*/(0, _react.forwardRef)(function Menu(_ref, ref) {
     onFocus,
     autoFocus,
     overlay = false,
+    role: menuRole = 'menu',
     baseClassName = `${_constants.CLS_PREFIX}menu`,
     ...props
   } = _ref;
@@ -51,7 +52,7 @@ const Menu = /*#__PURE__*/(0, _react.forwardRef)(function Menu(_ref, ref) {
     focusPrev,
     focusFirst,
     focusLast
-  } = (0, _react.useMemo)(() => (0, _utils.createFocusManager)(rootRef, node => (node.getAttribute('role') === 'menuitem' || node.getAttribute('role') === 'menuitemcheckbox') && node.getAttribute('aria-disabled') !== 'true'), []);
+  } = (0, _react.useMemo)(() => (0, _utils.createFocusManager)(rootRef, node => (menuRole === 'menu' && (node.getAttribute('role') === 'menuitem' || node.getAttribute('role') === 'menuitemcheckbox') || menuRole === 'listbox' && node.getAttribute('role') === 'option') && node.getAttribute('aria-disabled') !== 'true'), [menuRole]);
   const handleKeyDown = e => {
     switch (e.key) {
       case 'ArrowUp':
@@ -86,26 +87,27 @@ const Menu = /*#__PURE__*/(0, _react.forwardRef)(function Menu(_ref, ref) {
     if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
       return child;
     }
-    const props = {
+    const itemProps = {
       tabIndex: -1
     };
     if (onItemClick) {
-      props.onClick = (0, _utils.wrapFunction)(child.props.onClick, onItemClick.bind(null, child, index));
+      itemProps.onClick = (0, _utils.wrapFunction)(child.props.onClick, onItemClick.bind(null, child, index));
     }
     if (!hasTabIndex && (child.type === _MenuItem.default || child.type === _MenuSelectableItem.default) && !child.props.disabled) {
-      props.tabIndex = 0;
+      itemProps.tabIndex = 0;
       hasTabIndex = true;
-    } else {
-      props.tabIndex = -1;
     }
-    return /*#__PURE__*/(0, _react.cloneElement)(child, props);
+    if (menuRole === 'listbox' && (child.type === _MenuItem.default || child.type === _MenuSelectableItem.default)) {
+      itemProps.role = 'option';
+    }
+    return /*#__PURE__*/(0, _react.cloneElement)(child, itemProps);
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classnames.default)(baseClassName, className, {
       [`${baseClassName}--icons`]: hasIconItem(children),
       [`${baseClassName}--overlay`]: overlay
     }),
-    role: "menu",
+    role: menuRole,
     ...props,
     ref: el => {
       rootRef.current = el;

package/cjs/components/Menu/MenuBaseItem.js

@@ -9,8 +9,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
 var _Icon = _interopRequireWildcard(require("../Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
 /**

package/cjs/components/Menu/MenuItem.js

@@ -26,6 +26,7 @@ const MenuItem = _ref => {
     icon,
     label,
     tooltip,
+    menuRole = 'menu',
     baseClassName = `${_constants.CLS_PREFIX}menu__item`,
     disabled = false,
     active = false,
@@ -41,7 +42,7 @@ const MenuItem = _ref => {
         onClick(e);
       }
     },
-    role: "menuitem",
+    role: menuRole === 'listbox' ? 'option' : 'menuitem',
     "aria-disabled": disabled ? 'true' : undefined,
     tabIndex: disabled ? -1 : 0,
     icon: icon,

package/cjs/components/Overlay/Overlay.js

@@ -35,6 +35,7 @@ const OverlayCore = _ref => {
     canCloseOnBackdropClick = true,
     canCloseOnEscapePress = true,
     style = {},
+    containerProps = {},
     onAnimationExited,
     ...props
   } = _ref;
@@ -131,6 +132,7 @@ const OverlayCore = _ref => {
           ref: contentRef,
           role: "dialog",
           "aria-modal": "true",
+          ...containerProps,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: `${baseClassName}__body`,
             children: children

package/cjs/components/Pagination/Pagination.js

@@ -13,7 +13,7 @@ var _Link = _interopRequireDefault(require("../Link"));
 var _Popover = _interopRequireDefault(require("../Popover"));
 var _SegmentedControl = _interopRequireDefault(require("../SegmentedControl"));
 var _Text = _interopRequireDefault(require("../Text"));
-var _Translate = _interopRequireDefault(require("../Translate"));
+var _Translate = require("../Translate");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
@@ -65,9 +65,8 @@ const Pagination = _ref => {
           incrementIcon: "arrow-right",
           className: `${baseClassName}__input`
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
         content: "Pagination.totalShort",
-        fallback: "of %%total%%",
         params: {
           total
         },
@@ -75,18 +74,16 @@ const Pagination = _ref => {
       })]
     }), onItemsPerPageChange ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: `${baseClassName}__options`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
         content: "Pagination.itemsPerPage",
-        fallback: "Items per page",
         className: `${baseClassName}__text`
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SegmentedControl.default, {
         ghost: true,
         buttons: itemsPerPageOptions.map(value => {
           let title = value;
           if (value === 'all') {
-            title = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
-              content: "Pagination.all",
-              fallback: "All"
+            title = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
+              content: "Pagination.all"
             });
           }
           return {
@@ -106,9 +103,8 @@ const Pagination = _ref => {
         fontSize: "sm",
         component: _Link.default,
         nowrap: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
           content: "Pagination.total",
-          fallback: "Page %%current%% of %%total%%",
           params: {
             current,
             total

package/cjs/components/Pagination/index.js

@@ -16,5 +16,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _Pagination = _interopRequireWildcard(require("./Pagination"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }

package/cjs/components/Popover/Popover.js

@@ -144,7 +144,7 @@ class Popover extends _react.Component {
         targetRef
       } = this.props;
       if (targetRef || this.targetRef.current) {
-        return [targetRef, this.targetRef];
+        return [targetRef?.current ?? null, this.targetRef.current ?? null];
       }
       return [(0, _reactDom.findDOMNode)(this)];
     });

package/cjs/components/Popper/index.js

@@ -22,5 +22,4 @@ Object.keys(_Popper).forEach(function (key) {
     }
   });
 });
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }

package/cjs/components/ProgressDialog/ProgressDialog.js

@@ -10,7 +10,7 @@ var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Dialog = _interopRequireDefault(require("../Dialog"));
 var _constants = require("../../constants");
-var _Translate = _interopRequireDefault(require("../Translate"));
+var _Translate = require("../Translate");
 var _utils = require("../utils");
 var _ProgressStep = require("../ProgressStep");
 var _Progress = _interopRequireDefault(require("../Progress"));
@@ -125,12 +125,10 @@ class ProgressDialog extends _react.Component {
     } = this.state;
     const canClose = isFinished || isFinishedWithWarnings || isFailed;
     const canCancel = cancelable && !canClose;
-    const cancelTitle = canClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
-      content: "ProgressDialog.closeButton",
-      fallback: "Close"
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
-      content: "ProgressDialog.cancelButton",
-      fallback: "Cancel"
+    const cancelTitle = canClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
+      content: "ProgressDialog.closeButton"
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.InternalTranslate, {
+      content: "ProgressDialog.cancelButton"
     });
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
       className: (0, _classnames.default)(baseClassName, className),

package/cjs/components/ProgressStep/ProgressStep.js

@@ -13,8 +13,7 @@ var _constants = require("../../constants");
 var _ProgressBar = _interopRequireDefault(require("../ProgressBar"));
 var _OnDarkContext = _interopRequireDefault(require("../OnDarkContext"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
 const STATUS_NOT_STARTED = exports.STATUS_NOT_STARTED = 'not_started';

package/cjs/components/ProgressStep/index.js

@@ -52,5 +52,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _ProgressStep = _interopRequireWildcard(require("./ProgressStep"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }

package/cjs/components/Section/Section.js

@@ -5,249 +5,111 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SECTION_BASE_CLASS_NAME = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _reactMeasure = _interopRequireDefault(require("react-measure"));
 var _constants = require("../../constants");
 var _Button = _interopRequireDefault(require("../Button"));
-var _FormContext = _interopRequireDefault(require("../Form/FormContext"));
 var _InPlaceEdit = _interopRequireDefault(require("../InPlaceEdit"));
 var _utils = require("../utils");
-var _VerticalContext = _interopRequireWildcard(require("../VerticalContext"));
+var _VerticalContext = _interopRequireDefault(require("../VerticalContext"));
+var _SectionContext = _interopRequireDefault(require("./SectionContext"));
+var _useCollapsed = require("./useCollapsed");
+var _useVertical = require("./useVertical");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
-const getErrorsForChildren = (form, children) => {
-  let errors = {};
-  _react.Children.forEach(children, child => {
-    if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
-      return;
-    }
-    if (child.props.name) {
-      errors = {
-        ...errors,
-        ...form.getErrors(child.props.name)
-      };
-    }
-    if (child.props.children) {
-      errors = {
-        ...errors,
-        ...getErrorsForChildren(form, child.props.children)
-      };
-    }
-  });
-  return errors;
-};
 const SECTION_BASE_CLASS_NAME = exports.SECTION_BASE_CLASS_NAME = `${_constants.CLS_PREFIX}section`;
-class Section extends _react.Component {
-  constructor() {
-    super(...arguments);
-    (0, _defineProperty2.default)(this, "state", {
-      vertical: false
-    });
-    (0, _defineProperty2.default)(this, "handleResize", _ref => {
-      let {
-        bounds
-      } = _ref;
-      if (this.props.vertical !== undefined || !bounds) {
-        return;
-      }
-      this.setState({
-        vertical: bounds.width < _VerticalContext.VERTICAL_BREAKPOINT
-      });
-    });
-    (0, _defineProperty2.default)(this, "handleCollapse", e => {
-      if ((0, _utils.isClickable)(e)) {
-        return;
-      }
-      this.setState(_ref2 => {
-        let {
-          collapsed
-        } = _ref2;
-        return {
-          collapsed: !collapsed
-        };
-      }, () => {
-        this.props.onToggle?.(this.state.collapsed ?? false);
-      });
-    });
-  }
-  static getDerivedStateFromProps(props, state) {
-    const {
-      collapsible,
-      collapsed,
-      form,
-      children
-    } = props;
-    const {
-      prevCollapsed,
-      prevErrors
-    } = state;
-    const nextState = {};
-    if (collapsed !== prevCollapsed) {
-      nextState.collapsed = collapsed;
-    }
-    nextState.prevCollapsed = collapsed;
-    if (collapsible && form) {
-      const errors = getErrorsForChildren(form, children);
-      if (JSON.stringify(errors) !== JSON.stringify(prevErrors) && Object.keys(errors).length > 0) {
-        nextState.collapsed = false;
-      }
-      nextState.prevErrors = errors;
-    }
-    return nextState;
-  }
-  renderCollapseButton(_ref3) {
-    let {
-      baseClassName,
-      collapsible
-    } = _ref3;
-    const {
-      collapsed
-    } = this.state;
-    return collapsible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-      ghost: true,
-      className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--collapse`),
-      icon: {
-        name: 'chevron-up',
-        flipVertical: collapsed
-      },
-      onClick: this.handleCollapse
-    });
-  }
-  renderCloseButton(_ref4) {
-    let {
-      baseClassName,
-      onClose,
-      buttons
-    } = _ref4;
-    return (onClose || buttons) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: `${baseClassName}__header-buttons`,
-      children: [buttons, onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        ghost: true,
-        className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--close`),
-        onClick: onClose,
-        icon: "cross-mark"
-      })]
-    });
-  }
-  renderTitle(_ref5) {
-    let {
-      baseClassName,
-      title,
-      onTitleChange
-    } = _ref5;
-    return title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InPlaceEdit.default, {
-      className: `${baseClassName}__title`,
-      value: title,
-      onChange: onTitleChange,
-      onClick: e => {
-        const button = e.target?.closest(`.${baseClassName}__header`)?.querySelector(`.${baseClassName}__control-button`);
-        button?.click();
-      }
-    });
-  }
-  renderContent(_ref6) {
-    let {
-      collapsible,
-      children
-    } = _ref6;
-    const {
-      collapsed
-    } = this.state;
-    if (collapsible && collapsed) {
-      return null;
-    }
-    return children;
-  }
-  render() {
-    const {
-      baseClassName = SECTION_BASE_CLASS_NAME,
-      className,
-      intent,
-      collapsible = false,
-      title,
-      collapsed,
-      onTitleChange,
-      onClose,
-      onToggle,
-      buttons,
-      vertical: verticalProp,
-      children,
-      form,
-      ...props
-    } = this.props;
-    const vertical = verticalProp === undefined ? this.state.vertical : verticalProp;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_VerticalContext.default.Provider, {
-      value: vertical,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
-        onResize: this.handleResize,
-        bounds: true,
-        children: _ref7 => {
-          let {
-            measureRef
-          } = _ref7;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            ref: measureRef,
-            className: (0, _classnames.default)(baseClassName, {
-              [`${baseClassName}--${intent}`]: intent,
-              [`${baseClassName}--collapsible`]: collapsible,
-              [`${baseClassName}--collapsed`]: this.state.collapsed,
-              [`${baseClassName}--vertical`]: vertical
-            }, className),
-            ...props,
-            children: [title && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: `${baseClassName}__header`,
-              children: [this.renderCollapseButton({
-                baseClassName,
-                collapsible
-              }), this.renderTitle({
-                baseClassName,
-                title,
-                onTitleChange
-              }), this.renderCloseButton({
-                baseClassName,
-                onClose,
-                buttons
-              })]
-            }), this.renderContent({
-              collapsible,
-              children
-            })]
-          });
-        }
-      })
-    });
-  }
-}
 
 /**
  * `Section` component is used for dividing of complex content into groups for better readability
  * and comprehension of the presented information.
  * @since 0.0.54
  */
-const SectionWrapper = _ref8 => {
+const Section = _ref => {
   let {
-    collapsible = false,
-    collapsed = false,
     baseClassName = SECTION_BASE_CLASS_NAME,
+    className,
+    intent,
+    collapsible = false,
+    collapsed: externalCollapsed = false,
+    onToggle,
+    title,
+    onTitleChange,
+    onClose,
+    buttons,
+    vertical: externalVertical,
+    children,
     ...props
-  } = _ref8;
-  const form = (0, _react.useContext)(_FormContext.default);
-  const verticalContext = (0, _react.useContext)(_VerticalContext.default);
-  const vertical = props.vertical === undefined ? verticalContext : props.vertical;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Section, {
-    ...props,
-    form: form,
-    vertical: vertical,
-    collapsible: collapsible,
-    collapsed: collapsed,
-    baseClassName: baseClassName
+  } = _ref;
+  const containerRef = (0, _react.useRef)(null);
+  const collapseButtonRef = (0, _react.useRef)(null);
+  const vertical = (0, _useVertical.useVertical)(externalVertical, containerRef);
+  const [collapsed, setCollapsed] = (0, _useCollapsed.useCollapsed)(externalCollapsed);
+  const toggleCollapsed = () => {
+    setCollapsed(prevCollapsed => {
+      onToggle?.(!prevCollapsed);
+      return !prevCollapsed;
+    });
+  };
+  const parentSectionContext = (0, _react.useContext)(_SectionContext.default);
+  const sectionContextValue = (0, _react.useMemo)(() => ({
+    expand: () => {
+      parentSectionContext?.expand();
+      setCollapsed(false);
+    }
+  }), [setCollapsed, parentSectionContext]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SectionContext.default.Provider, {
+    value: sectionContextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VerticalContext.default.Provider, {
+      value: vertical,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        ref: containerRef,
+        className: (0, _classnames.default)(baseClassName, {
+          [`${baseClassName}--${intent}`]: intent,
+          [`${baseClassName}--collapsible`]: collapsible,
+          [`${baseClassName}--collapsed`]: collapsed,
+          [`${baseClassName}--vertical`]: vertical
+        }, className),
+        ...props,
+        children: [title && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: `${baseClassName}__header`,
+          children: [collapsible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            ref: collapseButtonRef,
+            ghost: true,
+            className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--collapse`),
+            icon: {
+              name: 'chevron-up',
+              flipVertical: collapsed
+            },
+            onClick: toggleCollapsed,
+            "aria-expanded": !collapsed
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InPlaceEdit.default, {
+            className: `${baseClassName}__title`,
+            value: title,
+            onChange: onTitleChange,
+            onClick: e => {
+              if (!collapsible || (0, _utils.isClickable)(e)) {
+                return;
+              }
+              collapseButtonRef.current?.click();
+            }
+          }), (onClose || buttons) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: `${baseClassName}__header-buttons`,
+            children: [buttons, onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+              ghost: true,
+              className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--close`),
+              onClick: onClose,
+              icon: "cross-mark"
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            display: collapsed ? 'none' : undefined
+          },
+          children: children
+        })]
+      })
+    })
   });
 };
-SectionWrapper.displayName = 'Section';
-SectionWrapper.WrappedComponent = Section;
-var _default = exports.default = SectionWrapper;
+var _default = exports.default = Section;

package/cjs/components/{Dropdown/locale/en-US.js → Section/SectionContext.js}

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _react = require("react");
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
-var _default = exports.default = {
-  close: 'Close'
-};
+
+const SectionContext = /*#__PURE__*/(0, _react.createContext)(null);
+var _default = exports.default = SectionContext;

package/cjs/components/Section/index.js

@@ -29,5 +29,4 @@ Object.defineProperty(exports, "default", {
 });
 var _Section = _interopRequireWildcard(require("./Section"));
 var _SectionItem = _interopRequireWildcard(require("./SectionItem"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }

package/cjs/components/Section/useCollapsed.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCollapsed = void 0;
+var _react = require("react");
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+const useCollapsed = externalCollapsed => {
+  const [collapsed, setCollapsed] = (0, _react.useState)(externalCollapsed ?? false);
+  const [prevExternalCollapsed, setPrevExternalCollapsed] = (0, _react.useState)(externalCollapsed);
+  if (externalCollapsed !== prevExternalCollapsed) {
+    setPrevExternalCollapsed(externalCollapsed);
+    setCollapsed(externalCollapsed ?? false);
+  }
+  return [collapsed, setCollapsed];
+};
+exports.useCollapsed = useCollapsed;

package/cjs/components/Section/useVertical.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useVertical = void 0;
+var _react = require("react");
+var _hooks = require("../../hooks");
+var _VerticalContext = _interopRequireWildcard(require("../VerticalContext"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+const isVertical = containerRef => {
+  if (!containerRef.current) {
+    return false;
+  }
+  const {
+    width
+  } = containerRef.current.getBoundingClientRect();
+  return width < _VerticalContext.VERTICAL_BREAKPOINT;
+};
+const useVertical = (externalVertical, containerRef) => {
+  const verticalContext = (0, _react.useContext)(_VerticalContext.default);
+  const [internalVertical, setInternalVertical] = (0, _react.useState)(false);
+  (0, _react.useLayoutEffect)(() => {
+    setInternalVertical(isVertical(containerRef));
+  }, [containerRef]);
+  (0, _hooks.useResizeObserver)({
+    ref: containerRef,
+    onResize: () => {
+      setInternalVertical(isVertical(containerRef));
+    },
+    callOnInit: false
+  });
+  const vertical = [externalVertical, verticalContext, internalVertical].find(v => typeof v === 'boolean');
+  return vertical;
+};
+exports.useVertical = useVertical;