@plesk/ui-library 3.42.0 → 3.43.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/cjs/components/CodeEditor/CodeEditor.js +1 -2
  2. package/cjs/components/Icon/constants.js +0 -1
  3. package/cjs/components/List/List.js +6 -3
  4. package/cjs/components/Tabs/FakeTabs.js +58 -0
  5. package/cjs/components/Tabs/Tab.js +0 -1
  6. package/cjs/components/Tabs/TabClose.js +35 -0
  7. package/cjs/components/Tabs/TabIcon.js +22 -0
  8. package/cjs/components/Tabs/TabLabel.js +34 -0
  9. package/cjs/components/Tabs/TabList.js +120 -0
  10. package/cjs/components/Tabs/TabListItem.js +79 -0
  11. package/cjs/components/Tabs/Tabs.js +98 -537
  12. package/cjs/components/Tabs/useActive.js +19 -0
  13. package/cjs/components/Tabs/useWidths.js +102 -0
  14. package/cjs/components/Toaster/PanelView.js +15 -13
  15. package/cjs/components/Toolbar/ToolbarMenu.js +0 -1
  16. package/cjs/components/Toolbar/index.js +1 -8
  17. package/cjs/components/index.js +0 -7
  18. package/cjs/index.js +1 -1
  19. package/dist/plesk-ui-library-rtl.css +1 -1
  20. package/dist/plesk-ui-library-rtl.css.map +1 -1
  21. package/dist/plesk-ui-library.css +1 -1
  22. package/dist/plesk-ui-library.css.map +1 -1
  23. package/dist/plesk-ui-library.js +672 -608
  24. package/dist/plesk-ui-library.js.map +1 -1
  25. package/dist/plesk-ui-library.min.js +5 -5
  26. package/dist/plesk-ui-library.min.js.map +1 -1
  27. package/esm/components/CodeEditor/CodeEditor.js +1 -2
  28. package/esm/components/Icon/constants.js +0 -1
  29. package/esm/components/List/List.js +6 -3
  30. package/esm/components/Tabs/FakeTabs.js +51 -0
  31. package/esm/components/Tabs/Tab.js +0 -1
  32. package/esm/components/Tabs/TabClose.js +28 -0
  33. package/esm/components/Tabs/TabIcon.js +14 -0
  34. package/esm/components/Tabs/TabLabel.js +27 -0
  35. package/esm/components/Tabs/TabList.js +111 -0
  36. package/esm/components/Tabs/TabListItem.js +72 -0
  37. package/esm/components/Tabs/Tabs.js +100 -537
  38. package/esm/components/Tabs/useActive.js +12 -0
  39. package/esm/components/Tabs/useWidths.js +95 -0
  40. package/esm/components/Toaster/PanelView.js +15 -13
  41. package/esm/components/Toolbar/ToolbarMenu.js +0 -1
  42. package/esm/components/Toolbar/index.js +1 -2
  43. package/esm/components/index.js +1 -1
  44. package/esm/index.js +1 -1
  45. package/package.json +9 -10
  46. package/styleguide/build/bundle.06c6ee6c.js +2 -0
  47. package/styleguide/index.html +2 -2
  48. package/types/components/Carousel/Carousel.d.ts +1 -1
  49. package/types/components/Label/Label.d.ts +1 -1
  50. package/types/components/List/List.d.ts +8 -2
  51. package/types/components/Tabs/FakeTabs.d.ts +9 -0
  52. package/types/components/Tabs/SearchBar.d.ts +3 -3
  53. package/types/components/Tabs/TabClose.d.ts +9 -0
  54. package/types/components/Tabs/TabIcon.d.ts +7 -0
  55. package/types/components/Tabs/TabLabel.d.ts +9 -0
  56. package/types/components/Tabs/TabList.d.ts +14 -0
  57. package/types/components/Tabs/TabListItem.d.ts +12 -0
  58. package/types/components/Tabs/Tabs.d.ts +2 -52
  59. package/types/components/Tabs/useActive.d.ts +1 -0
  60. package/types/components/Tabs/useWidths.d.ts +16 -0
  61. package/types/components/Toolbar/index.d.ts +0 -1
  62. package/types/components/index.d.ts +1 -1
  63. package/types/utils/types/ComponentProps.d.ts +1 -1
  64. package/types/utils/types/PolymorphicComponent.d.ts +2 -2
  65. package/cjs/components/Toolbar/ToolbarBetaProvider.js +0 -23
  66. package/esm/components/Toolbar/ToolbarBetaProvider.js +0 -16
  67. package/styleguide/build/bundle.7ac8a2af.js +0 -2
  68. package/types/components/Toolbar/ToolbarBetaProvider.d.ts +0 -5
  69. /package/styleguide/build/{bundle.7ac8a2af.js.LICENSE.txt → bundle.06c6ee6c.js.LICENSE.txt} +0 -0
@@ -58886,7 +58886,7 @@ function useFocusVisible() {
58886
58886
  /***/ ((module) => {
58887
58887
 
58888
58888
  "use strict";
58889
- module.exports = /*#__PURE__*/JSON.parse('{"name":"@plesk/ui-library","version":"3.42.0","description":"Plesk UI Library","main":"index.js","module":"esm/index.js","types":"./types","sideEffects":["cjs/index.js","esm/index.js","dist/*.js","dist/*.css"],"scripts":{"pretest":"yarn lint","test":"jest --ci --coverage --coverageReporters text-summary","test:vr":"cross-env VISUAL_REGRESSION=true jest","build":"yarn build:types && yarn build:umd && yarn build:esm && yarn build:cjs","build:umd":"webpack --config ./configs/build.config.js","build:esm":"cross-env NODE_ENV=esm node ./scripts/build.js","build:cjs":"cross-env NODE_ENV=cjs node ./scripts/build.js","build:types":"rimraf ./types && tsc --project ./configs/types-generator.config.json","create-svg-sprite":"node ./scripts/create-svg-sprite.js","lint":"yarn lint:es && yarn lint:types && yarn lint:style && yarn format:check","lint:es":"eslint --ext js,md,tsx src configs scripts styleguidist","lint:types":"tsc","lint:style":"stylelint \\"{src,styleguidist}/**/*.less\\"","format:check":"prettier --check src styleguidist","format":"prettier --write src styleguidist","styleguide":"styleguidist server --config ./configs/styleguide.config.js","styleguide:build":"rimraf ./styleguide && styleguidist build --config ./configs/styleguide.config.js","prepublishOnly":"yarn install && yarn test && yarn build && yarn styleguide:build","storybook":"webpack serve --config ./configs/storybook.config.js --allowed-hosts all","postinstall":"node ./scripts/postinstall.js"},"files":["esm","cjs","dist","styleguide","types","/scripts/postinstall.js","/index.js"],"dependencies":{"@babel/runtime":"^7.25.6","@plesk/react-movable":"^2.7.1","classnames":"^2.5.1","codemirror":"5.65.18","marked":"15.0.7","memoize-one":"^6.0.0","popper.js":"1.16.1","prop-types":"^15.8.1","react-measure":"2.5.2","react-sortable-hoc":"2.0.0","react-transition-group":"^4.4.5","scroll-into-view-if-needed":"^3.1.0","svg4everybody":"2.1.9","use-focus-visible":"^1.0.2"},"devDependencies":{"@babel/core":"^7.25.2","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.25.4","@babel/preset-env":"^7.25.4","@babel/preset-react":"^7.24.7","@babel/preset-typescript":"^7.24.7","@babel/types":"^7.25.6","@csstools/postcss-logical-float-and-clear":"^3.0.0","@plesk/eslint-config":"^3.0.0","@plesk/stylelint-config":"^3.0.0","@testing-library/dom":"^10.4.0","@testing-library/jest-dom":"^6.5.0","@testing-library/react":"^16.1.0","@testing-library/user-event":"^14.5.2","@types/buble":"^0.20.5","@types/classnames":"2.3.4","@types/codemirror":"^5.60.15","@types/doctrine":"^0.0.9","@types/jest":"^29.5.13","@types/jest-image-snapshot":"^6.4.0","@types/marked":"^6.0.0","@types/node":"^22.5.5","@types/react":"^18.3.8","@types/react-dom":"^18.3.0","@types/react-measure":"2.0.12","@types/react-transition-group":"^4.4.11","@types/svg4everybody":"2.1.5","@types/webpack-env":"^1.18.5","@typescript-eslint/eslint-plugin":"^8.17.0","@typescript-eslint/parser":"^8.17.0","autoprefixer":"^10.4.20","babel-loader":"^9.2.1","babel-plugin-transform-require-ignore":"^0.1.1","cross-env":"^7.0.3","css-loader":"^7.1.2","css-minimizer-webpack-plugin":"^7.0.0","eslint":"^8.57.1","eslint-config-prettier":"^10.0.1","eslint-plugin-markdown":"^5.1.0","html-webpack-plugin":"^5.6.0","jest":"^29.7.0","jest-dev-server":"^11.0.0","jest-environment-jsdom":"^29.7.0","jest-image-snapshot":"^6.4.0","less":"^4.2.0","less-loader":"^12.2.0","mini-css-extract-plugin":"^2.9.1","postcss":"^8.4.47","postcss-less":"^6.0.0","postcss-loader":"^8.1.1","postcss-logical":"^8.0.0","prettier":"^3.4.1","puppeteer-core":"22.15.0","react":"^18.3.1","react-docgen-typescript":"^2.2.2","react-dom":"^18.3.1","react-styleguidist":"^13.1.3","rimraf":"^6.0.1","rtlcss":"^4.3.0","style-loader":"^4.0.0","stylelint":"^16.11.0","stylelint-declaration-block-no-ignored-properties":"^2.8.0","stylelint-no-unsupported-browser-features":"^8.0.2","stylelint-prettier":"^5.0.2","stylelint-use-logical-spec":"^5.0.1","svg-mixer":"^2.3.14","terser-webpack-plugin":"^5.3.10","typescript":"5.7.3","webpack":"^5.94.0","webpack-cli":"^6.0.1"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"resolutions":{"trim":">=0.0.3"},"browserslist":["defaults","not op_mini all","not kaios > 0"],"author":"Plesk Developers <plesk-dev-leads@plesk.com> (https://www.plesk.com/)","license":"Apache-2.0"}');
58889
+ module.exports = /*#__PURE__*/JSON.parse('{"name":"@plesk/ui-library","version":"3.43.1","description":"Plesk UI Library","main":"index.js","module":"esm/index.js","types":"./types","sideEffects":["cjs/index.js","esm/index.js","dist/*.js","dist/*.css"],"scripts":{"pretest":"yarn lint","test":"jest --ci --coverage --coverageReporters text-summary","test:vr":"cross-env VISUAL_REGRESSION=true jest","build":"yarn build:types && yarn build:umd && yarn build:esm && yarn build:cjs","build:umd":"webpack --config ./configs/build.config.js","build:esm":"cross-env NODE_ENV=esm node ./scripts/build.js","build:cjs":"cross-env NODE_ENV=cjs node ./scripts/build.js","build:types":"rimraf ./types && tsc --project ./configs/types-generator.config.json","create-svg-sprite":"node ./scripts/create-svg-sprite.js","lint":"yarn lint:es && yarn lint:types && yarn lint:style && yarn format:check","lint:es":"eslint --ext js,md,tsx src configs scripts styleguidist","lint:types":"tsc","lint:style":"stylelint \\"{src,styleguidist}/**/*.(less|css)\\"","format:check":"prettier --check src styleguidist","format":"prettier --write src styleguidist","styleguide":"styleguidist server --config ./configs/styleguide.config.js","styleguide:build":"rimraf ./styleguide && styleguidist build --config ./configs/styleguide.config.js","prepublishOnly":"yarn install && yarn test && yarn build && yarn styleguide:build","storybook":"webpack serve --config ./configs/storybook.config.js --allowed-hosts all","postinstall":"node ./scripts/postinstall.js"},"files":["esm","cjs","dist","styleguide","types","/scripts/postinstall.js","/index.js"],"dependencies":{"@babel/runtime":"^7.25.6","@plesk/react-movable":"^2.7.1","classnames":"^2.5.1","codemirror":"5.65.18","marked":"15.0.7","memoize-one":"^6.0.0","popper.js":"1.16.1","prop-types":"^15.8.1","react-measure":"2.5.2","react-sortable-hoc":"2.0.0","react-transition-group":"^4.4.5","scroll-into-view-if-needed":"^3.1.0","svg4everybody":"2.1.9","use-focus-visible":"^1.0.2"},"devDependencies":{"@babel/core":"^7.25.2","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.25.4","@babel/preset-env":"^7.25.4","@babel/preset-react":"^7.24.7","@babel/preset-typescript":"^7.24.7","@babel/types":"^7.25.6","@csstools/postcss-logical-float-and-clear":"^3.0.0","@plesk/eslint-config":"^4.0.0","@plesk/stylelint-config":"^3.0.1","@testing-library/dom":"^10.4.0","@testing-library/jest-dom":"^6.5.0","@testing-library/react":"^16.1.0","@testing-library/user-event":"^14.5.2","@types/buble":"^0.20.5","@types/classnames":"2.3.4","@types/codemirror":"^5.60.15","@types/doctrine":"^0.0.9","@types/jest":"^29.5.13","@types/jest-image-snapshot":"^6.4.0","@types/marked":"^6.0.0","@types/node":"^22.5.5","@types/react":"^18.3.8","@types/react-dom":"^18.3.0","@types/react-measure":"2.0.12","@types/react-transition-group":"^4.4.11","@types/svg4everybody":"2.1.5","@types/webpack-env":"^1.18.5","autoprefixer":"^10.4.20","babel-loader":"^10.0.0","babel-plugin-transform-require-ignore":"^0.1.1","cross-env":"^7.0.3","css-loader":"^7.1.2","css-minimizer-webpack-plugin":"^7.0.0","eslint":"^9.21.0","eslint-config-prettier":"^10.0.2","eslint-plugin-markdown":"^5.1.0","html-webpack-plugin":"^5.6.0","jest":"^29.7.0","jest-dev-server":"^11.0.0","jest-environment-jsdom":"^29.7.0","jest-image-snapshot":"^6.4.0","less":"^4.2.0","less-loader":"^12.2.0","mini-css-extract-plugin":"^2.9.1","postcss":"^8.4.47","postcss-less":"^6.0.0","postcss-loader":"^8.1.1","postcss-logical":"^8.0.0","prettier":"^3.4.1","puppeteer-core":"22.15.0","react":"^18.3.1","react-docgen-typescript":"^2.2.2","react-dom":"^18.3.1","react-styleguidist":"^13.1.3","rimraf":"^6.0.1","rtlcss":"^4.3.0","style-loader":"^4.0.0","stylelint":"^16.11.0","stylelint-declaration-block-no-ignored-properties":"^2.8.0","stylelint-no-unsupported-browser-features":"^8.0.2","stylelint-prettier":"^5.0.2","stylelint-use-logical-spec":"^5.0.1","svg-mixer":"^2.3.14","terser-webpack-plugin":"^5.3.10","typescript":"5.8.2","typescript-eslint":"^8.26.0","webpack":"^5.94.0","webpack-cli":"^6.0.1"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"resolutions":{"trim":">=0.0.3"},"browserslist":["defaults","not op_mini all","not kaios > 0"],"author":"Plesk Developers <plesk-dev-leads@plesk.com> (https://www.plesk.com/)","license":"Apache-2.0"}');
58890
58890
 
58891
58891
  /***/ }),
58892
58892
 
@@ -62089,8 +62089,7 @@ class CodeEditor extends _react.Component {
62089
62089
  this.codeMirror.scrollTo(scrollPosition.left, scrollPosition.top);
62090
62090
  }
62091
62091
  this.updateMode(this.props);
62092
- // Save fn typing is missed by some reason.
62093
- // @ts-ignore
62092
+ // @ts-expect-error save fn typing is missed by some reason
62094
62093
  CodeMirror.commands.save = this.props.onSave;
62095
62094
  CodeMirror.commands.find = CodeMirror.commands.findPersistent;
62096
62095
  CodeMirror.commands.findNext = CodeMirror.commands.findPersistentNext;
@@ -68106,7 +68105,6 @@ Object.defineProperty(exports, "__esModule", ({
68106
68105
  }));
68107
68106
  exports.NAMES_12 = exports.NAMES = void 0;
68108
68107
  // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
68109
- /* eslint-disable max-len */
68110
68108
  // This file is generated by create-svg-sprite. Do not edit.
68111
68109
 
68112
68110
  const NAMES_12 = exports.NAMES_12 = ['advisor', 'archive', 'arrow-back', 'arrow-diagonal-out', 'arrow-down', 'arrow-down-circle-filled', 'arrow-down-in', 'arrow-down-out', 'arrow-down-tray', 'arrow-left', 'arrow-left-circle-filled', 'arrow-right', 'arrow-right-circle-filled', 'arrow-right-in', 'arrow-right-out', 'arrow-up', 'arrow-up-circle', 'arrow-up-circle-filled', 'arrow-up-in', 'arrow-up-in-cloud', 'arrow-up-out', 'arrow-up-tray', 'arrows-four-directions', 'arrows-inward', 'arrows-loop', 'arrows-opposite', 'arrows-outward', 'backup', 'backup2', 'bar-chart-vertical', 'bar-chart-vertical-arrow-up', 'bar-chart-vertical-lock', 'bell', 'book-email', 'boost', 'boundary', 'box-diagonal-bottom-in', 'box-diagonal-top-in', 'brush', 'bug', 'calendar', 'calendar-clock', 'camera', 'card', 'card-ribbon', 'card-row', 'card-tile', 'cd', 'cd-up-in-cloud', 'chain', 'chain-broken', 'chat', 'check-list', 'check-mark', 'check-mark-circle', 'check-mark-circle-filled', 'chevron-double-down', 'chevron-double-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'circle-diagonal', 'clean', 'clip', 'clock', 'clone', 'cloud', 'cloud-checkmark', 'cloud-crossed', 'cloud-graph', 'code', 'connection', 'console', 'console-filled', 'copy', 'copy-indicator', 'cpu', 'crane', 'credit-cards', 'cross-mark', 'cross-mark-circle', 'cross-mark-circle-filled', 'crown-transfer', 'dashboard', 'database', 'database-box', 'database-filled', 'database-plus', 'deploy', 'docker-filled', 'dollar', 'dollar-filled', 'dot', 'dot-big', 'emoticon-confused', 'emoticon-dead', 'emoticon-excited', 'emoticon-happy', 'emoticon-neutral', 'emoticon-sad', 'emoticon-smile', 'enter', 'exclamation-mark-circle', 'exclamation-mark-circle-filled', 'eye', 'eye-closed', 'facebook', 'facebook-filled', 'feedback', 'file', 'filter', 'filter-check-mark', 'fire', 'flag', 'flag-filled', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'forward-circle-filled', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'joomla', 'kebab', 'key', 'label', 'label-plus', 'laravel', 'lifebuoy', 'lightbulb', 'limit', 'linux', 'list', 'list-check-mark', 'location', 'lock-closed', 'lock-closed-check', 'lock-closed-filled', 'lock-open', 'lock-open-cross', 'lock-open-filled', 'mail', 'mail-circle-filled', 'mail-settings', 'megaphone', 'menu', 'menu-thin', 'microsoft', 'minimize', 'minus', 'minus-circle', 'minus-circle-filled', 'monitoring', 'monitoring-off', 'my-little-admin', 'net', 'nine-dots', 'node-js', 'package', 'panel', 'panel-check', 'panel-eye', 'panel-key', 'panel-settings', 'panels', 'pause-circle', 'pencil', 'pencil-dialog', 'php', 'phpmyadmin', 'pin', 'pipette', 'plans', 'plugins', 'plus', 'plus-circle', 'plus-circle-filled', 'power', 'projects', 'puzzle', 'python', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'redirect-circle-filled', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'server', 'servers', 'share', 'shield', 'shield-attention-filled', 'shield-chain', 'shield-filled', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'ssl-it', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'start-filled', 'stop', 'stop-circle', 'storage', 'themes', 'three-dots-horizontal', 'three-dots-vertical', 'tools', 'transfer', 'triangle-exclamation-mark', 'triangle-exclamation-mark-filled', 'unarchive', 'user', 'volume', 'web', 'web-plus', 'web-settings', 'windows', 'woocommerce', 'wordpress', 'wordpress-minus', 'zero-circle-filled'];
@@ -70784,7 +70782,8 @@ class List extends _react.Component {
70784
70782
  vertical,
70785
70783
  rowKey,
70786
70784
  totalRows,
70787
- filtered
70785
+ filtered,
70786
+ autoExpandSingleItem
70788
70787
  } = _ref5;
70789
70788
  let {
70790
70789
  prevSortColumn,
@@ -70808,7 +70807,7 @@ class List extends _react.Component {
70808
70807
  const isSingleElementInCurrentExpanded = () => data && state.expandedRows.includes(getRowKey(data[0], {
70809
70808
  rowKey
70810
70809
  }));
70811
- if (renderRowBody && data?.length === 1 && (!pagination || totalRows === 1) && (!prevData || prevData?.length === 0 || isSingleElementInCurrentExpanded()) && (!filtered || isSingleElementInCurrentExpanded())) {
70810
+ if (renderRowBody && data?.length === 1 && (!pagination || totalRows === 1) && (!prevData || prevData?.length === 0 || isSingleElementInCurrentExpanded()) && (!filtered || isSingleElementInCurrentExpanded()) && autoExpandSingleItem) {
70812
70811
  const key = getRowKey(data[0], {
70813
70812
  rowKey
70814
70813
  });
@@ -71485,6 +71484,7 @@ class List extends _react.Component {
71485
71484
  rowProps,
71486
71485
  reorderable,
71487
71486
  onReorderEnd,
71487
+ autoExpandSingleItem,
71488
71488
  ...props
71489
71489
  } = this.props;
71490
71490
  const {
@@ -71860,7 +71860,8 @@ _defineProperty(List, "defaultProps", {
71860
71860
  loading: false,
71861
71861
  rowProps: undefined,
71862
71862
  reorderable: false,
71863
- onReorderEnd: undefined
71863
+ onReorderEnd: undefined,
71864
+ autoExpandSingleItem: true
71864
71865
  });
71865
71866
  var _default = exports["default"] = List;
71866
71867
 
@@ -79112,6 +79113,74 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
79112
79113
 
79113
79114
  /***/ }),
79114
79115
 
79116
+ /***/ "./components/Tabs/FakeTabs.tsx":
79117
+ /*!**************************************!*\
79118
+ !*** ./components/Tabs/FakeTabs.tsx ***!
79119
+ \**************************************/
79120
+ /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
79121
+
79122
+ "use strict";
79123
+
79124
+
79125
+ Object.defineProperty(exports, "__esModule", ({
79126
+ value: true
79127
+ }));
79128
+ exports["default"] = void 0;
79129
+ var _react = __webpack_require__(/*! react */ "react");
79130
+ var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"));
79131
+ var _hooks = __webpack_require__(/*! ../../hooks */ "./hooks/index.tsx");
79132
+ var _Icon = _interopRequireDefault(__webpack_require__(/*! ../Icon */ "./components/Icon/index.tsx"));
79133
+ var _Tab = _interopRequireDefault(__webpack_require__(/*! ./Tab */ "./components/Tabs/Tab.tsx"));
79134
+ var _TabListItem = _interopRequireDefault(__webpack_require__(/*! ./TabListItem */ "./components/Tabs/TabListItem.tsx"));
79135
+ var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/react/jsx-runtime.js");
79136
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
79137
+ // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
79138
+
79139
+ const FakeTabs = _ref => {
79140
+ let {
79141
+ children,
79142
+ onResize,
79143
+ baseClassName
79144
+ } = _ref;
79145
+ const tabsRef = (0, _react.useRef)(null);
79146
+ (0, _hooks.useResizeObserver)({
79147
+ ref: tabsRef,
79148
+ onResize
79149
+ });
79150
+ const list = /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
79151
+ ref: tabsRef,
79152
+ className: (0, _classnames.default)(`${baseClassName}__tab-list`, `${baseClassName}__tab-list--fake`),
79153
+ children: [_react.Children.map(children, (tab, index) => {
79154
+ if (!tab || tab.type !== _Tab.default) {
79155
+ return null;
79156
+ }
79157
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabListItem.default, {
79158
+ // eslint-disable-line react/no-array-index-key
79159
+ tab: tab,
79160
+ baseClassName: baseClassName,
79161
+ isFake: true
79162
+ }, index);
79163
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
79164
+ className: (0, _classnames.default)(`${baseClassName}__tab`, `${baseClassName}__tab--more`),
79165
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
79166
+ className: `${baseClassName}__link`,
79167
+ tabIndex: -1,
79168
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
79169
+ name: "three-dots-horizontal"
79170
+ })
79171
+ })
79172
+ })]
79173
+ });
79174
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
79175
+ className: `${baseClassName}__fake-list-wrapper`,
79176
+ "aria-hidden": true,
79177
+ children: list
79178
+ });
79179
+ };
79180
+ var _default = exports["default"] = FakeTabs;
79181
+
79182
+ /***/ }),
79183
+
79115
79184
  /***/ "./components/Tabs/SearchBar.less":
79116
79185
  /*!****************************************!*\
79117
79186
  !*** ./components/Tabs/SearchBar.less ***!
@@ -79571,7 +79640,6 @@ Object.defineProperty(exports, "__esModule", ({
79571
79640
  exports["default"] = void 0;
79572
79641
  var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/react/jsx-runtime.js");
79573
79642
  // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
79574
- /* eslint-disable react/no-unused-prop-types */
79575
79643
 
79576
79644
  /**
79577
79645
  * `Tab` is an individual element of the [Tabs](#!/Tabs) component.
@@ -79593,6 +79661,346 @@ var _default = exports["default"] = Tab;
79593
79661
 
79594
79662
  /***/ }),
79595
79663
 
79664
+ /***/ "./components/Tabs/TabClose.tsx":
79665
+ /*!**************************************!*\
79666
+ !*** ./components/Tabs/TabClose.tsx ***!
79667
+ \**************************************/
79668
+ /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
79669
+
79670
+ "use strict";
79671
+
79672
+
79673
+ Object.defineProperty(exports, "__esModule", ({
79674
+ value: true
79675
+ }));
79676
+ exports["default"] = void 0;
79677
+ var _Icon = _interopRequireDefault(__webpack_require__(/*! ../Icon */ "./components/Icon/index.tsx"));
79678
+ var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/react/jsx-runtime.js");
79679
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
79680
+ // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
79681
+
79682
+ const TabClose = _ref => {
79683
+ let {
79684
+ tabMode,
79685
+ onClose,
79686
+ baseClassName
79687
+ } = _ref;
79688
+ if (typeof onClose !== 'function') {
79689
+ return null;
79690
+ }
79691
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
79692
+ className: `${baseClassName}__${tabMode}-close`,
79693
+ type: "button",
79694
+ onClick: e => {
79695
+ e.preventDefault();
79696
+ e.stopPropagation();
79697
+ onClose(e);
79698
+ },
79699
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
79700
+ className: `${baseClassName}__${tabMode}-close-icon`,
79701
+ name: "cross-mark"
79702
+ })
79703
+ });
79704
+ };
79705
+ var _default = exports["default"] = TabClose;
79706
+
79707
+ /***/ }),
79708
+
79709
+ /***/ "./components/Tabs/TabIcon.tsx":
79710
+ /*!*************************************!*\
79711
+ !*** ./components/Tabs/TabIcon.tsx ***!
79712
+ \*************************************/
79713
+ /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
79714
+
79715
+ "use strict";
79716
+
79717
+
79718
+ Object.defineProperty(exports, "__esModule", ({
79719
+ value: true
79720
+ }));
79721
+ exports["default"] = void 0;
79722
+ var _Icon = _interopRequireWildcard(__webpack_require__(/*! ../Icon */ "./components/Icon/index.tsx"));
79723
+ 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); }
79724
+ 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; }
79725
+ // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
79726
+
79727
+ const TabIcon = _ref => {
79728
+ let {
79729
+ icon,
79730
+ baseClassName
79731
+ } = _ref;
79732
+ return _Icon.default.create(icon, {
79733
+ size: _Icon.ICON_SIZE_16,
79734
+ className: `${baseClassName}__tab-icon`
79735
+ });
79736
+ };
79737
+ var _default = exports["default"] = TabIcon;
79738
+
79739
+ /***/ }),
79740
+
79741
+ /***/ "./components/Tabs/TabLabel.tsx":
79742
+ /*!**************************************!*\
79743
+ !*** ./components/Tabs/TabLabel.tsx ***!
79744
+ \**************************************/
79745
+ /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
79746
+
79747
+ "use strict";
79748
+
79749
+
79750
+ Object.defineProperty(exports, "__esModule", ({
79751
+ value: true
79752
+ }));
79753
+ exports["default"] = void 0;
79754
+ var _react = __webpack_require__(/*! react */ "react");
79755
+ var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"));
79756
+ var _Label = _interopRequireDefault(__webpack_require__(/*! ../Label */ "./components/Label/index.tsx"));
79757
+ var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/react/jsx-runtime.js");
79758
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
79759
+ // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
79760
+
79761
+ const TabLabel = _ref => {
79762
+ let {
79763
+ label,
79764
+ tabMode,
79765
+ baseClassName
79766
+ } = _ref;
79767
+ if (typeof label === 'string') {
79768
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.default, {
79769
+ className: `${baseClassName}__${tabMode}-label`,
79770
+ intent: "danger",
79771
+ children: label
79772
+ });
79773
+ }
79774
+ if (/*#__PURE__*/(0, _react.isValidElement)(label)) {
79775
+ return /*#__PURE__*/(0, _react.cloneElement)(label, {
79776
+ className: (0, _classnames.default)(`${baseClassName}__${tabMode}-label`, label.props.className)
79777
+ });
79778
+ }
79779
+ return null;
79780
+ };
79781
+ var _default = exports["default"] = TabLabel;
79782
+
79783
+ /***/ }),
79784
+
79785
+ /***/ "./components/Tabs/TabList.tsx":
79786
+ /*!*************************************!*\
79787
+ !*** ./components/Tabs/TabList.tsx ***!
79788
+ \*************************************/
79789
+ /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
79790
+
79791
+ "use strict";
79792
+
79793
+
79794
+ Object.defineProperty(exports, "__esModule", ({
79795
+ value: true
79796
+ }));
79797
+ exports["default"] = void 0;
79798
+ var _react = __webpack_require__(/*! react */ "react");
79799
+ var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"));
79800
+ var _Dropdown = _interopRequireDefault(__webpack_require__(/*! ../Dropdown */ "./components/Dropdown/index.tsx"));
79801
+ var _Icon = _interopRequireDefault(__webpack_require__(/*! ../Icon */ "./components/Icon/index.tsx"));
79802
+ var _Menu = _interopRequireWildcard(__webpack_require__(/*! ../Menu */ "./components/Menu/index.tsx"));
79803
+ var _Tab = _interopRequireDefault(__webpack_require__(/*! ./Tab */ "./components/Tabs/Tab.tsx"));
79804
+ var _TabClose = _interopRequireDefault(__webpack_require__(/*! ./TabClose */ "./components/Tabs/TabClose.tsx"));
79805
+ var _TabIcon = _interopRequireDefault(__webpack_require__(/*! ./TabIcon */ "./components/Tabs/TabIcon.tsx"));
79806
+ var _TabLabel = _interopRequireDefault(__webpack_require__(/*! ./TabLabel */ "./components/Tabs/TabLabel.tsx"));
79807
+ var _TabListItem = _interopRequireDefault(__webpack_require__(/*! ./TabListItem */ "./components/Tabs/TabListItem.tsx"));
79808
+ var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/react/jsx-runtime.js");
79809
+ 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); }
79810
+ 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; }
79811
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
79812
+ // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
79813
+
79814
+ const TabList = _ref => {
79815
+ let {
79816
+ children,
79817
+ tabListRef,
79818
+ active,
79819
+ onTabClick,
79820
+ visibleLength,
79821
+ monospacedWidth,
79822
+ baseClassName
79823
+ } = _ref;
79824
+ if (!_react.Children.toArray(children).length) {
79825
+ return null;
79826
+ }
79827
+ let tabs = _react.Children.toArray(children);
79828
+ tabs = tabs.filter(child => child?.type === _Tab.default);
79829
+ const listChildren = tabs.slice(0, visibleLength);
79830
+ const menuChildren = tabs.slice(visibleLength);
79831
+ const listItems = _react.Children.map(listChildren, (tab, index) => {
79832
+ const position = index + 1;
79833
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabListItem.default, {
79834
+ // eslint-disable-line react/no-array-index-key
79835
+ tab: tab,
79836
+ baseClassName: baseClassName,
79837
+ selected: position === active,
79838
+ onClick: () => onTabClick(position),
79839
+ monospacedWidth: monospacedWidth
79840
+ }, index);
79841
+ });
79842
+ const menuItems = _react.Children.map(menuChildren, (tab, index) => {
79843
+ const position = listChildren.length + index + 1;
79844
+ const {
79845
+ title,
79846
+ label,
79847
+ icon,
79848
+ onActivate,
79849
+ onClose,
79850
+ component: Tag = 'a',
79851
+ ...tabProps
79852
+ } = tab.props;
79853
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.MenuItem, {
79854
+ // eslint-disable-line react/no-array-index-key
79855
+ icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabIcon.default, {
79856
+ icon: icon,
79857
+ baseClassName: baseClassName
79858
+ }),
79859
+ label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
79860
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLabel.default, {
79861
+ label: label,
79862
+ tabMode: "menu-item",
79863
+ baseClassName: baseClassName
79864
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabClose.default, {
79865
+ onClose: onClose,
79866
+ tabMode: "menu-item",
79867
+ baseClassName: baseClassName
79868
+ })]
79869
+ }),
79870
+ active: active === position,
79871
+ onClick: () => onTabClick(position),
79872
+ className: `${baseClassName}__menu-item`,
79873
+ component: Tag,
79874
+ ...tabProps,
79875
+ children: title
79876
+ }, index);
79877
+ });
79878
+ const moreSelected = active > listChildren.length;
79879
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
79880
+ ref: tabListRef,
79881
+ className: `${baseClassName}__tab-list`,
79882
+ role: "tablist",
79883
+ children: [listItems, menuItems.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
79884
+ className: (0, _classnames.default)(`${baseClassName}__tab`, moreSelected && `${baseClassName}__tab--selected`, `${baseClassName}__tab--more`),
79885
+ role: "presentation",
79886
+ "aria-selected": moreSelected || undefined,
79887
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default, {
79888
+ className: `${baseClassName}__dropdown`,
79889
+ menu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
79890
+ children: menuItems
79891
+ }),
79892
+ menuPlacement: "bottom-end",
79893
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
79894
+ className: `${baseClassName}__link`,
79895
+ role: "tab",
79896
+ tabIndex: 0,
79897
+ "aria-selected": moreSelected || undefined,
79898
+ onKeyDown: e => {
79899
+ if (e.key === 'Enter') {
79900
+ e.currentTarget.click();
79901
+ }
79902
+ },
79903
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
79904
+ name: "three-dots-horizontal"
79905
+ })
79906
+ })
79907
+ })
79908
+ })]
79909
+ });
79910
+ };
79911
+ var _default = exports["default"] = TabList;
79912
+
79913
+ /***/ }),
79914
+
79915
+ /***/ "./components/Tabs/TabListItem.tsx":
79916
+ /*!*****************************************!*\
79917
+ !*** ./components/Tabs/TabListItem.tsx ***!
79918
+ \*****************************************/
79919
+ /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
79920
+
79921
+ "use strict";
79922
+
79923
+
79924
+ Object.defineProperty(exports, "__esModule", ({
79925
+ value: true
79926
+ }));
79927
+ exports["default"] = void 0;
79928
+ var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"));
79929
+ var _utils = __webpack_require__(/*! ../utils */ "./components/utils.tsx");
79930
+ var _TabClose = _interopRequireDefault(__webpack_require__(/*! ./TabClose */ "./components/Tabs/TabClose.tsx"));
79931
+ var _TabIcon = _interopRequireDefault(__webpack_require__(/*! ./TabIcon */ "./components/Tabs/TabIcon.tsx"));
79932
+ var _TabLabel = _interopRequireDefault(__webpack_require__(/*! ./TabLabel */ "./components/Tabs/TabLabel.tsx"));
79933
+ var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/react/jsx-runtime.js");
79934
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
79935
+ // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
79936
+
79937
+ const TabListItem = _ref => {
79938
+ let {
79939
+ tab,
79940
+ selected,
79941
+ onClick,
79942
+ monospacedWidth,
79943
+ baseClassName,
79944
+ isFake = false
79945
+ } = _ref;
79946
+ const {
79947
+ title,
79948
+ label,
79949
+ icon,
79950
+ onActivate,
79951
+ onClose,
79952
+ component = 'a',
79953
+ style = {},
79954
+ ...tabProps
79955
+ } = tab.props;
79956
+ const closable = typeof onClose === 'function';
79957
+ const linkProps = isFake ? {
79958
+ tabIndex: -1
79959
+ } : {
79960
+ tabIndex: tabProps.tabIndex || 0,
79961
+ onClick,
79962
+ onKeyDown: (0, _utils.wrapFunction)(tabProps.onKeyDown, e => {
79963
+ if (e.key === 'Enter') {
79964
+ e.currentTarget.click();
79965
+ }
79966
+ }),
79967
+ role: 'tab',
79968
+ 'aria-selected': selected || undefined,
79969
+ ...tabProps
79970
+ };
79971
+ const Tag = isFake ? 'a' : component;
79972
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
79973
+ className: (0, _classnames.default)(`${baseClassName}__tab`, selected && `${baseClassName}__tab--selected`, closable && `${baseClassName}__tab--closable`),
79974
+ role: isFake ? undefined : 'presentation',
79975
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tag, {
79976
+ className: `${baseClassName}__link`,
79977
+ style: {
79978
+ width: monospacedWidth || undefined,
79979
+ ...style
79980
+ },
79981
+ ...linkProps,
79982
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabIcon.default, {
79983
+ icon: icon,
79984
+ baseClassName: baseClassName
79985
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
79986
+ className: `${baseClassName}__tab-title`,
79987
+ children: title
79988
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLabel.default, {
79989
+ label: label,
79990
+ tabMode: "tab",
79991
+ baseClassName: baseClassName
79992
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabClose.default, {
79993
+ onClose: onClose,
79994
+ tabMode: "tab",
79995
+ baseClassName: baseClassName
79996
+ })]
79997
+ })
79998
+ });
79999
+ };
80000
+ var _default = exports["default"] = TabListItem;
80001
+
80002
+ /***/ }),
80003
+
79596
80004
  /***/ "./components/Tabs/Tabs.less":
79597
80005
  /*!***********************************!*\
79598
80006
  !*** ./components/Tabs/Tabs.less ***!
@@ -79621,27 +80029,18 @@ Object.defineProperty(exports, "__esModule", ({
79621
80029
  exports["default"] = void 0;
79622
80030
  var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"));
79623
80031
  var _react = __webpack_require__(/*! react */ "react");
79624
- var _reactMeasure = _interopRequireDefault(__webpack_require__(/*! react-measure */ "../node_modules/react-measure/dist/index.esm.js"));
79625
80032
  var _constants = __webpack_require__(/*! ../../constants */ "./constants.js");
79626
- var _Dropdown = _interopRequireDefault(__webpack_require__(/*! ../Dropdown */ "./components/Dropdown/index.tsx"));
79627
- var _Icon = _interopRequireWildcard(__webpack_require__(/*! ../Icon */ "./components/Icon/index.tsx"));
79628
- var _Label = _interopRequireDefault(__webpack_require__(/*! ../Label */ "./components/Label/index.tsx"));
79629
- var _Menu = _interopRequireWildcard(__webpack_require__(/*! ../Menu */ "./components/Menu/index.tsx"));
79630
80033
  var _ResponsiveContext = _interopRequireDefault(__webpack_require__(/*! ../ResponsiveContext */ "./components/ResponsiveContext/index.tsx"));
79631
- var _utils = __webpack_require__(/*! ../utils */ "./components/utils.tsx");
79632
- var _Tab = _interopRequireDefault(__webpack_require__(/*! ./Tab */ "./components/Tabs/Tab.tsx"));
80034
+ var _FakeTabs = _interopRequireDefault(__webpack_require__(/*! ./FakeTabs */ "./components/Tabs/FakeTabs.tsx"));
80035
+ var _TabList = _interopRequireDefault(__webpack_require__(/*! ./TabList */ "./components/Tabs/TabList.tsx"));
80036
+ var _useActive = __webpack_require__(/*! ./useActive */ "./components/Tabs/useActive.tsx");
80037
+ var _useWidths = __webpack_require__(/*! ./useWidths */ "./components/Tabs/useWidths.tsx");
79633
80038
  __webpack_require__(/*! ../../helpers/base.less */ "./helpers/base.less");
79634
80039
  __webpack_require__(/*! ./Tabs.less */ "./components/Tabs/Tabs.less");
79635
80040
  var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/react/jsx-runtime.js");
79636
- 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); }
79637
- 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; }
79638
80041
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
79639
- function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
79640
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
79641
- function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
79642
- const ADDON_LEFT_PADDING = 5;
79643
- const MIN_ADDON_WIDTH_DEFAULT = 150;
79644
- const COLLAPSED_SEARCH_WIDTH = 60;
80042
+ // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
80043
+
79645
80044
  /**
79646
80045
  * `Tabs` component is a content area with a group of individual [Tab](#!/Tab) elements, each displaying different content
79647
80046
  * in the same screen area. `Tabs` are used when you have too much content to display in one place at the same time, so
@@ -79649,430 +80048,65 @@ const COLLAPSED_SEARCH_WIDTH = 60;
79649
80048
  * group name and a navigation button.
79650
80049
  * @since 0.0.35
79651
80050
  */
79652
- class Tabs extends _react.Component {
79653
- constructor() {
79654
- super(...arguments);
79655
- _defineProperty(this, "state", {
79656
- active: this.props.active || 1,
79657
- collapsedLength: 0,
79658
- compact: false,
79659
- searching: false,
79660
- monospacedWidth: 0
79661
- });
79662
- _defineProperty(this, "widths", void 0);
79663
- _defineProperty(this, "addon", void 0);
79664
- _defineProperty(this, "tabsnavRef", void 0);
79665
- _defineProperty(this, "moreTabsRef", null);
79666
- _defineProperty(this, "checkAdaptive", () => {
79667
- let {
79668
- compact,
79669
- searching,
79670
- collapsedLength
79671
- } = this.state;
79672
- const {
79673
- addonMinWidth: addonMinWidthProp,
79674
- search,
79675
- monospaced
79676
- } = this.props;
79677
- const {
79678
- widths,
79679
- addon
79680
- } = this;
79681
- let monospacedWidth = 0;
79682
- const getMonospacedWidth = () => monospacedWidth;
79683
- if (!widths) {
79684
- return;
79685
- }
79686
- const addonMinWidth = ADDON_LEFT_PADDING + (addonMinWidthProp || (search?.props.minWidth ?? MIN_ADDON_WIDTH_DEFAULT));
79687
- const searchWidth = compact && search ? COLLAPSED_SEARCH_WIDTH + ADDON_LEFT_PADDING : 0;
79688
- const {
79689
- more,
79690
- container,
79691
- margin
79692
- } = widths;
79693
- let tabs = widths.tabs.slice();
79694
- const tabsNumber = tabs.length;
79695
- let lastTabIndex = tabsNumber - 1 - collapsedLength;
79696
- if (monospaced) {
79697
- monospacedWidth = Math.max(...tabs.slice(0, lastTabIndex + 1));
79698
- tabs = tabs.map(getMonospacedWidth);
79699
- }
79700
- const getListWidth = () => {
79701
- let listWidth = monospaced ? margin * Math.max(0, tabsNumber - 1 - Math.max(0, collapsedLength - 1)) : 0;
79702
- for (let i = 0; i <= lastTabIndex; ++i) {
79703
- listWidth += tabs[i];
79704
- }
79705
- if (collapsedLength) {
79706
- listWidth += more;
79707
- }
79708
- return listWidth;
79709
- };
79710
- let spaceForAddon = container - getListWidth();
79711
- if (addon && !collapsedLength && !compact && spaceForAddon <= addonMinWidth) {
79712
- compact = true;
79713
- }
79714
- let freeSpace = spaceForAddon - searchWidth;
79715
- if (freeSpace <= 0) {
79716
- // collapse
79717
- for (let i = lastTabIndex; i >= 0; --i) {
79718
- let width = tabs[i];
79719
- if (monospaced && widths.tabs[i] === monospacedWidth) {
79720
- monospacedWidth = widths.tabs.slice(0, lastTabIndex).reduce((max, tab) => tab > max ? tab : max, 0);
79721
- tabs = tabs.map(getMonospacedWidth);
79722
- width += (widths.tabs[i] - monospacedWidth) * lastTabIndex;
79723
- }
79724
- if (collapsedLength === 0) {
79725
- width -= more;
79726
- }
79727
- freeSpace += width;
79728
- ++collapsedLength;
79729
- --lastTabIndex;
79730
- if (freeSpace > 0) {
79731
- break;
79732
- }
79733
- }
79734
- } else {
79735
- // expand
79736
- for (let i = lastTabIndex + 1; i < tabsNumber; ++i) {
79737
- let width = tabs[i];
79738
- if (monospaced && widths.tabs[i] > monospacedWidth) {
79739
- monospacedWidth = widths.tabs[i];
79740
- tabs = tabs.map(getMonospacedWidth);
79741
- width = monospacedWidth + (monospacedWidth - width) * (lastTabIndex + 1);
79742
- }
79743
- if (collapsedLength === 1) {
79744
- width -= more;
79745
- }
79746
- if (freeSpace <= width) {
79747
- break;
79748
- }
79749
- freeSpace -= width;
79750
- --collapsedLength;
79751
- ++lastTabIndex;
79752
- }
79753
- }
79754
- if (collapsedLength || compact) {
79755
- spaceForAddon = container - getListWidth();
79756
- if (collapsedLength) {
79757
- compact = true;
79758
- } else if (spaceForAddon >= addonMinWidth) {
79759
- compact = false;
79760
- searching = false;
79761
- }
79762
- }
79763
- const newState = {
79764
- compact,
79765
- searching,
79766
- collapsedLength,
79767
- monospacedWidth
79768
- };
79769
- for (const key of Object.keys(newState)) {
79770
- if (JSON.stringify(newState[key]) === JSON.stringify(this.state[key])) {
79771
- delete newState[key];
79772
- }
79773
- }
79774
- if (Object.keys(newState).length) {
79775
- this.setState(newState, () => {
79776
- if (typeof newState.collapsedLength !== 'undefined' && this.state.collapsedLength !== newState.collapsedLength) {
79777
- this.checkAdaptive();
79778
- }
79779
- });
79780
- }
79781
- });
79782
- _defineProperty(this, "handleStartSearching", () => {
79783
- this.setState({
79784
- searching: true
79785
- });
79786
- });
79787
- _defineProperty(this, "handleCancelSearching", () => {
79788
- this.setState({
79789
- searching: false
79790
- }, this.checkAdaptive);
79791
- });
79792
- _defineProperty(this, "handleResize", () => {
79793
- const {
79794
- baseClassName
79795
- } = this.props;
79796
- if (this.tabsnavRef) {
79797
- const tabElements = this.tabsnavRef.querySelectorAll(`.${baseClassName}__tab-list--fake .${baseClassName}__tab`);
79798
- const more = tabElements[tabElements.length - 1];
79799
- const tabs = Array.prototype.slice.call(tabElements, 0, -1).map(el => el.offsetWidth);
79800
- this.widths = {
79801
- tabs,
79802
- more: more.offsetWidth,
79803
- container: this.tabsnavRef.offsetWidth,
79804
- margin: more.offsetWidth - (more.querySelector(`.${baseClassName}__link`)?.offsetWidth ?? 0)
79805
- };
79806
- }
79807
- this.checkAdaptive();
79808
- });
79809
- _defineProperty(this, "handleAddonResize", contentRect => {
79810
- this.addon = contentRect.bounds;
79811
- this.checkAdaptive();
79812
- });
79813
- _defineProperty(this, "renderTabItem", (tab, index, tabMode) => {
79814
- const {
79815
- baseClassName
79816
- } = this.props;
79817
- const {
79818
- monospacedWidth,
79819
- active
79820
- } = this.state;
79821
- if (!tab || tab.type !== _Tab.default) {
79822
- return null;
79823
- }
79824
- const {
79825
- title,
79826
- label,
79827
- icon,
79828
- onActivate,
79829
- onClose,
79830
- component: Tag = 'a',
79831
- ...tabProps
79832
- } = tab.props;
79833
- const selected = index + 1 === active;
79834
- const key = index.toString();
79835
- const tabIcon = _Icon.default.create(icon, {
79836
- size: _Icon.ICON_SIZE_16,
79837
- className: `${baseClassName}__tab-icon`
79838
- });
79839
- const tabLabel = this.renderTabLabel(tabMode, label);
79840
- const tabClose = this.renderTabClose(tabMode, onClose);
79841
- const handleClick = () => this.onClick(index + 1);
79842
- tabProps.tabIndex = tabProps.tabIndex || 0;
79843
- tabProps.onKeyDown = (0, _utils.wrapFunction)(tabProps.onKeyDown, e => {
79844
- if (e.key === 'Enter') {
79845
- e.currentTarget.click();
79846
- }
79847
- });
79848
- if (tabMode === 'menu-item') {
79849
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.MenuItem, {
79850
- icon: tabIcon,
79851
- label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
79852
- children: [tabLabel, tabClose]
79853
- }),
79854
- active: selected,
79855
- onClick: handleClick,
79856
- className: `${baseClassName}__menu-item`,
79857
- component: Tag,
79858
- ...tabProps,
79859
- children: title
79860
- }, key);
79861
- }
79862
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
79863
- className: (0, _classnames.default)(`${baseClassName}__tab`, selected && `${baseClassName}__tab--selected`, tabClose && `${baseClassName}__tab--closable`),
79864
- role: "presentation",
79865
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tag, {
79866
- className: `${baseClassName}__link`,
79867
- role: "tab",
79868
- "aria-selected": selected || undefined,
79869
- style: {
79870
- width: monospacedWidth || undefined
79871
- },
79872
- onClick: handleClick,
79873
- ...tabProps,
79874
- children: [tabIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
79875
- className: `${baseClassName}__tab-title`,
79876
- children: title
79877
- }), tabLabel, tabClose]
79878
- })
79879
- }, key);
79880
- });
79881
- }
79882
- static getDerivedStateFromProps(props, state) {
79883
- const {
79884
- active
79885
- } = props;
79886
- const {
79887
- prevActive
79888
- } = state;
79889
- const nextState = {};
79890
- if (active && active !== prevActive) {
79891
- nextState.active = active;
79892
- }
79893
- nextState.prevActive = active;
79894
- return nextState;
79895
- }
79896
- componentDidUpdate() {
79897
- if (!this.widths || _react.Children.count(this.props.children) !== this.widths.tabs.length) {
79898
- setTimeout(() => this.handleResize());
79899
- }
79900
- }
79901
- onClick(active) {
79902
- this.setState({
79903
- active
79904
- });
79905
- const tab = Array.isArray(this.props.children) ? this.props.children[active - 1] : this.props.children;
80051
+ const Tabs = _ref => {
80052
+ let {
80053
+ baseClassName = `${_constants.CLS_PREFIX}tabs`,
80054
+ className,
80055
+ addon,
80056
+ placeholder,
80057
+ children,
80058
+ active: externalActive,
80059
+ addonMinWidth,
80060
+ monospaced,
80061
+ search,
80062
+ ...props
80063
+ } = _ref;
80064
+ const addonElement = addon || placeholder;
80065
+ const tabNavRef = (0, _react.useRef)(null);
80066
+ const tabListRef = (0, _react.useRef)(null);
80067
+ const fakeAddonRef = (0, _react.useRef)(null);
80068
+ const childrenCount = _react.Children.count(children);
80069
+ const [active, setActive] = (0, _useActive.useActive)(externalActive);
80070
+ const {
80071
+ monospacedWidth,
80072
+ recalculateWidths,
80073
+ compact,
80074
+ visibleLength
80075
+ } = (0, _useWidths.useWidths)({
80076
+ monospaced,
80077
+ tabNavRef,
80078
+ tabListRef,
80079
+ fakeAddonRef,
80080
+ baseClassName,
80081
+ childrenCount
80082
+ });
80083
+ const handleTabClick = active => {
80084
+ setActive(active);
80085
+ const tab = Array.isArray(children) ? children[active - 1] : children;
79906
80086
  tab?.props?.onActivate?.();
79907
- }
79908
- renderTabLabel(tabMode, label) {
79909
- const {
79910
- baseClassName
79911
- } = this.props;
79912
- if (typeof label === 'string') {
79913
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.default, {
79914
- className: `${baseClassName}__${tabMode}-label`,
79915
- intent: "danger",
79916
- children: label
79917
- });
79918
- }
79919
- if (/*#__PURE__*/(0, _react.isValidElement)(label)) {
79920
- return /*#__PURE__*/(0, _react.cloneElement)(label, {
79921
- className: (0, _classnames.default)(`${baseClassName}__${tabMode}-label`, label.props.className)
79922
- });
79923
- }
79924
- return null;
79925
- }
79926
- renderTabClose(tabMode, onClose) {
79927
- const {
79928
- baseClassName
79929
- } = this.props;
79930
- if (typeof onClose === 'function') {
79931
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
79932
- className: `${baseClassName}__${tabMode}-close`,
79933
- type: "button",
79934
- onClick: e => {
79935
- e.preventDefault();
79936
- e.stopPropagation();
79937
- onClose(e);
79938
- },
79939
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
79940
- className: `${baseClassName}__${tabMode}-close-icon`,
79941
- name: "cross-mark"
79942
- })
79943
- });
79944
- }
80087
+ };
80088
+ const [searching, setSearching] = (0, _react.useState)(false);
80089
+ if (!childrenCount) {
79945
80090
  return null;
79946
80091
  }
79947
- renderFakeTabs() {
79948
- const {
79949
- baseClassName,
79950
- children
79951
- } = this.props;
79952
- const childrenCount = _react.Children.count(children);
79953
- if (!childrenCount || !children) {
79954
- return null;
79955
- }
79956
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
79957
- className: (0, _classnames.default)(`${baseClassName}__tab-list`, `${baseClassName}__tab-list--fake`),
79958
- children: [_react.Children.map(children, tab => {
79959
- if (!tab || tab.type !== _Tab.default) {
79960
- return null;
79961
- }
79962
- const {
79963
- title,
79964
- label,
79965
- icon,
79966
- onActivate,
79967
- onClose,
79968
- ...tabProps
79969
- } = tab.props;
79970
- const iconBlock = _Icon.default.create(icon, {
79971
- size: _Icon.ICON_SIZE_16,
79972
- className: `${baseClassName}__tab-icon`
79973
- });
79974
- const closeBlock = this.renderTabClose('tab', onClose);
79975
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
79976
- className: (0, _classnames.default)(`${baseClassName}__tab`, closeBlock && `${baseClassName}__tab--closable`),
79977
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
79978
- className: `${baseClassName}__link`,
79979
- tabIndex: -1,
79980
- style: tabProps.style,
79981
- children: [iconBlock, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
79982
- className: `${baseClassName}__tab-title`,
79983
- children: title
79984
- }), this.renderTabLabel('tab', label)]
79985
- }), closeBlock]
79986
- }, `${title}`);
79987
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
79988
- className: (0, _classnames.default)(`${baseClassName}__tab`, `${baseClassName}__tab--more`),
79989
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
79990
- className: `${baseClassName}__link`,
79991
- tabIndex: -1,
79992
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
79993
- name: "three-dots-horizontal"
79994
- })
79995
- })
79996
- })]
79997
- });
79998
- }
79999
- createTabItems() {
80000
- const {
80001
- children
80002
- } = this.props;
80003
- const {
80004
- collapsedLength
80005
- } = this.state;
80006
- const visibleItems = [];
80007
- const hiddenItems = [];
80008
- const lastTabIndex = _react.Children.count(children) - 1 - collapsedLength;
80009
- _react.Children.forEach(children, (child, index) => {
80010
- const hidden = index > lastTabIndex;
80011
- const tabMode = hidden ? 'menu-item' : 'tab';
80012
- const renderedTab = this.renderTabItem(child, index, tabMode);
80013
- if (renderedTab) {
80014
- (hidden ? hiddenItems : visibleItems).push(renderedTab);
80015
- }
80016
- });
80017
- return {
80018
- visibleItems,
80019
- hiddenItems
80020
- };
80021
- }
80022
- renderTabList() {
80023
- const {
80024
- baseClassName,
80025
- children
80026
- } = this.props;
80027
- const {
80028
- active
80029
- } = this.state;
80030
- if (!_react.Children.toArray(children).length) {
80031
- return null;
80032
- }
80033
- const {
80034
- visibleItems,
80035
- hiddenItems
80036
- } = this.createTabItems();
80037
- const moreSelected = active > visibleItems.length;
80038
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
80039
- className: `${baseClassName}__tab-list`,
80040
- role: "tablist",
80041
- children: [visibleItems, hiddenItems.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
80042
- ref: ref => this.moreTabsRef = ref,
80043
- className: (0, _classnames.default)(`${baseClassName}__tab`, moreSelected && `${baseClassName}__tab--selected`, `${baseClassName}__tab--more`),
80044
- role: "presentation",
80045
- "aria-selected": moreSelected || undefined,
80046
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default, {
80047
- className: `${baseClassName}__dropdown`,
80048
- menu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
80049
- children: hiddenItems
80050
- }),
80051
- menuPlacement: "bottom-end",
80052
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
80053
- className: `${baseClassName}__link`,
80054
- role: "tab",
80055
- tabIndex: 0,
80056
- "aria-selected": moreSelected || undefined,
80057
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
80058
- name: "three-dots-horizontal"
80059
- })
80060
- })
80061
- })
80062
- })]
80063
- });
80064
- }
80065
- renderSearchBar(searchProps) {
80066
- const {
80067
- baseClassName,
80068
- search
80069
- } = this.props;
80092
+ const renderSearchBar = () => {
80070
80093
  if (!search) {
80071
80094
  return null;
80072
80095
  }
80073
- const {
80074
- compact
80075
- } = this.state;
80096
+ const handleStartSearching = () => setSearching(true);
80097
+ const handleCancelSearching = () => setSearching(false);
80098
+ const searchProps = {
80099
+ className: `${baseClassName}__search-bar`,
80100
+ collapsable: compact,
80101
+ onExpand: handleStartSearching,
80102
+ onCollapse: handleCancelSearching,
80103
+ ...(searching ? {
80104
+ autoFocus: true,
80105
+ responsive: false,
80106
+ maxWidth: 'none',
80107
+ minWidth: 'unset'
80108
+ } : {})
80109
+ };
80076
80110
  const clone = /*#__PURE__*/(0, _react.cloneElement)(search, searchProps);
80077
80111
  if (compact) {
80078
80112
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveContext.default.Provider, {
@@ -80084,114 +80118,49 @@ class Tabs extends _react.Component {
80084
80118
  });
80085
80119
  }
80086
80120
  return clone;
80121
+ };
80122
+ const addonStyle = {};
80123
+ if (search && !compact) {
80124
+ addonStyle.maxWidth = search.props.maxWidth;
80087
80125
  }
80088
- render() {
80089
- const {
80090
- baseClassName,
80091
- className,
80092
- addon,
80093
- placeholder,
80094
- children,
80095
- active,
80096
- addonMinWidth,
80097
- monospaced,
80098
- search,
80099
- ...props
80100
- } = this.props;
80101
- const {
80102
- compact,
80103
- searching
80104
- } = this.state;
80105
- const childrenCount = _react.Children.count(children);
80106
- if (!childrenCount) {
80107
- return null;
80108
- }
80109
- const addonElement = addon || placeholder;
80110
- let addonBlock = addonElement;
80111
- const addonProps = {};
80112
- let searchBlock = null;
80113
- if (search) {
80114
- const searchProps = {
80115
- collapsable: compact,
80116
- onExpand: this.handleStartSearching,
80117
- onCollapse: this.handleCancelSearching
80118
- };
80119
- if (compact) {
80120
- if (searching) {
80121
- searchProps.maxWidth = undefined;
80122
- searchProps.minWidth = undefined;
80123
- searchProps.autoFocus = true;
80124
- searchProps.responsive = false;
80125
- } else {
80126
- searchProps.onSearch = this.handleStartSearching;
80127
- }
80128
- searchBlock = this.renderSearchBar(searchProps);
80129
- } else if (addonElement) {
80130
- searchProps.key = 1;
80131
- addonBlock = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
80132
- children: [this.renderSearchBar(searchProps), /*#__PURE__*/(0, _react.cloneElement)(addonElement, {
80133
- key: 2
80134
- })]
80135
- });
80136
- } else {
80137
- addonProps.style = {
80138
- maxWidth: search.props.maxWidth
80139
- };
80140
- addonBlock = this.renderSearchBar(searchProps);
80141
- }
80142
- }
80143
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
80144
- className: (0, _classnames.default)(baseClassName, className),
80145
- ...props,
80146
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
80147
- onResize: this.handleResize,
80148
- innerRef: ref => this.tabsnavRef = ref,
80149
- children: _ref => {
80150
- let {
80151
- measureRef
80152
- } = _ref;
80153
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
80154
- className: (0, _classnames.default)(`${baseClassName}__nav`, compact && `${baseClassName}__nav--compact`, searching && `${baseClassName}__nav--searching`, search && `${baseClassName}__nav--search`),
80155
- ref: measureRef,
80156
- children: [this.renderTabList(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
80157
- onResize: this.handleResize,
80158
- children: _ref2 => {
80159
- let {
80160
- measureRef: ref
80161
- } = _ref2;
80162
- const fakeTabs = this.renderFakeTabs();
80163
- return fakeTabs ? /*#__PURE__*/(0, _react.cloneElement)(fakeTabs, {
80164
- ref
80165
- }) : null;
80166
- }
80167
- }), searchBlock, addonBlock && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
80168
- onResize: this.handleAddonResize,
80169
- bounds: true,
80170
- children: _ref3 => {
80171
- let {
80172
- measureRef: ref
80173
- } = _ref3;
80174
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
80175
- className: `${baseClassName}__addon`,
80176
- ref: ref,
80177
- ...addonProps,
80178
- children: addonBlock
80179
- });
80180
- }
80181
- })]
80182
- });
80183
- }
80184
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
80185
- className: `${baseClassName}__tab-panel`,
80186
- role: "tabpanel",
80187
- children: _react.Children.map(children, (tab, index) => index + 1 === this.state.active ? tab : null)
80126
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
80127
+ className: (0, _classnames.default)(baseClassName, className),
80128
+ ...props,
80129
+ children: [compact && addonElement && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
80130
+ className: `${baseClassName}__addon ${baseClassName}__addon--compact`,
80131
+ children: addonElement
80132
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
80133
+ className: (0, _classnames.default)(`${baseClassName}__nav`, compact && `${baseClassName}__nav--compact`, searching && `${baseClassName}__nav--searching`, search && `${baseClassName}__nav--search`),
80134
+ ref: tabNavRef,
80135
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabList.default, {
80136
+ tabListRef: tabListRef,
80137
+ active: active,
80138
+ onTabClick: handleTabClick,
80139
+ visibleLength: visibleLength,
80140
+ monospacedWidth: monospacedWidth,
80141
+ baseClassName: baseClassName,
80142
+ children: children
80143
+ }), compact && renderSearchBar(), !compact && (addonElement || search) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
80144
+ className: `${baseClassName}__addon`,
80145
+ style: addonStyle,
80146
+ children: [renderSearchBar(), addonElement]
80147
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FakeTabs.default, {
80148
+ onResize: recalculateWidths,
80149
+ baseClassName: baseClassName,
80150
+ children: children
80151
+ }), addonElement && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
80152
+ ref: fakeAddonRef,
80153
+ className: `${baseClassName}__addon-fake-wrapper`,
80154
+ "aria-hidden": true,
80155
+ children: addonElement
80188
80156
  })]
80189
- });
80190
- }
80191
- }
80192
- _defineProperty(Tabs, "defaultProps", {
80193
- baseClassName: `${_constants.CLS_PREFIX}tabs`
80194
- });
80157
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
80158
+ className: `${baseClassName}__tab-panel`,
80159
+ role: "tabpanel",
80160
+ children: _react.Children.map(children, (tab, index) => index + 1 === active ? tab : null)
80161
+ })]
80162
+ });
80163
+ };
80195
80164
  var _default = exports["default"] = Tabs;
80196
80165
 
80197
80166
  /***/ }),
@@ -80233,6 +80202,147 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
80233
80202
 
80234
80203
  /***/ }),
80235
80204
 
80205
+ /***/ "./components/Tabs/useActive.tsx":
80206
+ /*!***************************************!*\
80207
+ !*** ./components/Tabs/useActive.tsx ***!
80208
+ \***************************************/
80209
+ /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
80210
+
80211
+ "use strict";
80212
+
80213
+
80214
+ Object.defineProperty(exports, "__esModule", ({
80215
+ value: true
80216
+ }));
80217
+ exports.useActive = void 0;
80218
+ var _react = __webpack_require__(/*! react */ "react");
80219
+ // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
80220
+
80221
+ const useActive = externalActive => {
80222
+ const [active, setActive] = (0, _react.useState)(externalActive || 1);
80223
+ const [prevExternalActive, setPrevExternalActive] = (0, _react.useState)(externalActive);
80224
+ if (externalActive && externalActive !== prevExternalActive) {
80225
+ setPrevExternalActive(externalActive);
80226
+ setActive(externalActive);
80227
+ }
80228
+ return [active, setActive];
80229
+ };
80230
+ exports.useActive = useActive;
80231
+
80232
+ /***/ }),
80233
+
80234
+ /***/ "./components/Tabs/useWidths.tsx":
80235
+ /*!***************************************!*\
80236
+ !*** ./components/Tabs/useWidths.tsx ***!
80237
+ \***************************************/
80238
+ /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
80239
+
80240
+ "use strict";
80241
+
80242
+
80243
+ Object.defineProperty(exports, "__esModule", ({
80244
+ value: true
80245
+ }));
80246
+ exports.useWidths = void 0;
80247
+ var _react = __webpack_require__(/*! react */ "react");
80248
+ var _hooks = __webpack_require__(/*! ../../hooks */ "./hooks/index.tsx");
80249
+ // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
80250
+
80251
+ const useWidths = _ref => {
80252
+ let {
80253
+ tabNavRef,
80254
+ tabListRef,
80255
+ fakeAddonRef,
80256
+ baseClassName,
80257
+ monospaced = false,
80258
+ childrenCount
80259
+ } = _ref;
80260
+ const [compact, setCompact] = (0, _react.useState)(false);
80261
+ const [monospacedWidth, setMonospacedWidth] = (0, _react.useState)(undefined);
80262
+ const [visibleLength, setVisibleLength] = (0, _react.useState)(childrenCount);
80263
+ const lastCollapsedKey = (0, _react.useRef)('');
80264
+ const recalculateWidths = (0, _react.useCallback)(() => {
80265
+ if (!tabNavRef.current || !tabListRef.current) {
80266
+ return;
80267
+ }
80268
+ const fakeTabElements = tabNavRef.current.querySelectorAll(`.${baseClassName}__tab-list--fake .${baseClassName}__tab`);
80269
+ const moreElement = fakeTabElements[fakeTabElements.length - 1];
80270
+ const tabLength = fakeTabElements.length - 1;
80271
+ const fakeTabWidths = Array.from(fakeTabElements).slice(0, -1).map(el => el.getBoundingClientRect().width);
80272
+ let tabWidths = fakeTabWidths;
80273
+ let monospacedWidth = undefined;
80274
+ if (monospaced) {
80275
+ const linkElements = tabNavRef.current.querySelectorAll(`.${baseClassName}__tab-list--fake .${baseClassName}__link`);
80276
+ const linkWidths = Array.from(linkElements).slice(0, -1).map(el => el.getBoundingClientRect().width);
80277
+ monospacedWidth = linkWidths.length ? Math.max(...linkWidths) : undefined;
80278
+ tabWidths = fakeTabWidths.map((width, index) => (monospacedWidth ?? 0) + width - linkWidths[index]);
80279
+ }
80280
+ setMonospacedWidth(monospacedWidth);
80281
+ const tabsWidth = tabWidths.reduce((acc, width) => acc + width, 0);
80282
+ const tabNavWidth = tabNavRef.current.getBoundingClientRect().width;
80283
+ const addon = tabNavRef.current.querySelector(`.${baseClassName}__addon`) ?? tabNavRef.current.querySelector(`.${baseClassName}__search`);
80284
+ const addonWidth = addon ? addon.getBoundingClientRect().width : 0;
80285
+ let availableSpace = tabNavWidth - addonWidth;
80286
+ const allTabsFit = availableSpace >= tabsWidth;
80287
+ const getContentKey = () => {
80288
+ const fakeAddonWidth = fakeAddonRef.current?.getBoundingClientRect().width ?? 0;
80289
+ return `${fakeTabWidths.join('-')}-${tabNavWidth}-${fakeAddonWidth}-${monospacedWidth}`;
80290
+ };
80291
+ if (allTabsFit) {
80292
+ setVisibleLength(tabLength);
80293
+ if (!compact) {
80294
+ return;
80295
+ }
80296
+ if (lastCollapsedKey.current !== getContentKey()) {
80297
+ setCompact(false);
80298
+ }
80299
+ return;
80300
+ }
80301
+ if (!allTabsFit && !compact) {
80302
+ setCompact(true);
80303
+ lastCollapsedKey.current = getContentKey();
80304
+ return;
80305
+ }
80306
+ const moreWidth = moreElement ? moreElement.getBoundingClientRect().width : 0;
80307
+ availableSpace -= moreWidth;
80308
+ const calculateVisibleLength = () => {
80309
+ let totalWidth = 0;
80310
+ for (let i = 0; i < tabWidths.length; i++) {
80311
+ totalWidth += tabWidths[i];
80312
+ if (totalWidth > availableSpace) {
80313
+ return i;
80314
+ }
80315
+ }
80316
+ return 0;
80317
+ };
80318
+ setVisibleLength(calculateVisibleLength());
80319
+ }, [tabNavRef, tabListRef, fakeAddonRef, baseClassName, monospaced, compact]);
80320
+ (0, _react.useLayoutEffect)(() => {
80321
+ recalculateWidths();
80322
+ }, [recalculateWidths]);
80323
+ (0, _hooks.useResizeObserver)({
80324
+ ref: tabNavRef,
80325
+ onResize: recalculateWidths
80326
+ });
80327
+ (0, _hooks.useResizeObserver)({
80328
+ ref: tabListRef,
80329
+ onResize: recalculateWidths
80330
+ });
80331
+ (0, _hooks.useResizeObserver)({
80332
+ ref: fakeAddonRef,
80333
+ onResize: recalculateWidths
80334
+ });
80335
+ return {
80336
+ recalculateWidths,
80337
+ monospacedWidth,
80338
+ compact,
80339
+ visibleLength
80340
+ };
80341
+ };
80342
+ exports.useWidths = useWidths;
80343
+
80344
+ /***/ }),
80345
+
80236
80346
  /***/ "./components/Text/Text.less":
80237
80347
  /*!***********************************!*\
80238
80348
  !*** ./components/Text/Text.less ***!
@@ -80910,6 +81020,20 @@ const PanelView = _ref => {
80910
81020
  if (isEmpty && isCollapsed) {
80911
81021
  onCollapseStateChange?.(false);
80912
81022
  }
81023
+ const panelHeaderLabels = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
81024
+ className: `${baseClassName}__header-labels`,
81025
+ children: notEmptyGroups.map(group => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupLabel.default, {
81026
+ group: group,
81027
+ onClose: () => onToastGroupClose?.(group.keys)
81028
+ }, group.groupKey))
81029
+ });
81030
+ const panelHeaderCollapseButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
81031
+ ghost: true,
81032
+ icon: isCollapsed ? 'chevron-up' : 'chevron-down',
81033
+ onClick: () => onCollapseStateChange?.(!isCollapsed),
81034
+ className: `${baseClassName}__header-collapse`,
81035
+ "aria-label": "Collapse"
81036
+ });
80913
81037
  const panelHeader = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
80914
81038
  nodeRef: headerRef,
80915
81039
  in: isHeaderVisible,
@@ -80926,19 +81050,7 @@ const PanelView = _ref => {
80926
81050
  '--_pul-toaster--panel-header-enter-delay': isSingleNonClosableToast ? '300ms' : 0,
80927
81051
  '--_pul-toaster--panel-header-exit-delay': isEmpty ? '300ms' : undefined
80928
81052
  },
80929
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
80930
- className: `${baseClassName}__header-labels`,
80931
- children: notEmptyGroups.map(group => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupLabel.default, {
80932
- group: group,
80933
- onClose: () => onToastGroupClose?.(group.keys)
80934
- }, group.groupKey))
80935
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
80936
- ghost: true,
80937
- icon: isCollapsed ? 'chevron-up' : 'chevron-down',
80938
- onClick: () => onCollapseStateChange?.(!isCollapsed),
80939
- className: `${baseClassName}__header-collapse`,
80940
- "aria-label": "Collapse"
80941
- })]
81053
+ children: [panelHeaderLabels, panelHeaderCollapseButton]
80942
81054
  })
80943
81055
  });
80944
81056
  const panelContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -81542,39 +81654,6 @@ var _default = exports["default"] = Toolbar;
81542
81654
 
81543
81655
  /***/ }),
81544
81656
 
81545
- /***/ "./components/Toolbar/ToolbarBetaProvider.tsx":
81546
- /*!****************************************************!*\
81547
- !*** ./components/Toolbar/ToolbarBetaProvider.tsx ***!
81548
- \****************************************************/
81549
- /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
81550
-
81551
- "use strict";
81552
-
81553
-
81554
- Object.defineProperty(exports, "__esModule", ({
81555
- value: true
81556
- }));
81557
- exports.useToolbarBetaContext = exports["default"] = void 0;
81558
- var _react = __webpack_require__(/*! react */ "react");
81559
- var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "../node_modules/react/jsx-runtime.js");
81560
- // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
81561
-
81562
- const ToolbarBetaContext = /*#__PURE__*/(0, _react.createContext)(false);
81563
- const useToolbarBetaContext = () => (0, _react.useContext)(ToolbarBetaContext);
81564
- exports.useToolbarBetaContext = useToolbarBetaContext;
81565
- const ToolbarBetaProvider = _ref => {
81566
- let {
81567
- children
81568
- } = _ref;
81569
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarBetaContext.Provider, {
81570
- value: true,
81571
- children: children
81572
- });
81573
- };
81574
- var _default = exports["default"] = ToolbarBetaProvider;
81575
-
81576
- /***/ }),
81577
-
81578
81657
  /***/ "./components/Toolbar/ToolbarExpander.tsx":
81579
81658
  /*!************************************************!*\
81580
81659
  !*** ./components/Toolbar/ToolbarExpander.tsx ***!
@@ -81817,7 +81896,6 @@ const toMenuItem = (child, isLast, onItemClick) => {
81817
81896
  ...props,
81818
81897
  children: props.children
81819
81898
  });
81820
- /* eslint-enable react/prop-types */
81821
81899
  }
81822
81900
  case _ToolbarGroup.default:
81823
81901
  {
@@ -81909,12 +81987,6 @@ var _default = exports["default"] = ToolbarMenu;
81909
81987
  Object.defineProperty(exports, "__esModule", ({
81910
81988
  value: true
81911
81989
  }));
81912
- Object.defineProperty(exports, "ToolbarBetaProvider", ({
81913
- enumerable: true,
81914
- get: function () {
81915
- return _ToolbarBetaProvider.default;
81916
- }
81917
- }));
81918
81990
  Object.defineProperty(exports, "ToolbarExpander", ({
81919
81991
  enumerable: true,
81920
81992
  get: function () {
@@ -81936,7 +82008,6 @@ Object.defineProperty(exports, "default", ({
81936
82008
  var _Toolbar = _interopRequireDefault(__webpack_require__(/*! ./Toolbar */ "./components/Toolbar/Toolbar.tsx"));
81937
82009
  var _ToolbarGroup = _interopRequireDefault(__webpack_require__(/*! ./ToolbarGroup */ "./components/Toolbar/ToolbarGroup.tsx"));
81938
82010
  var _ToolbarExpander = _interopRequireDefault(__webpack_require__(/*! ./ToolbarExpander */ "./components/Toolbar/ToolbarExpander.tsx"));
81939
- var _ToolbarBetaProvider = _interopRequireDefault(__webpack_require__(/*! ./ToolbarBetaProvider */ "./components/Toolbar/ToolbarBetaProvider.tsx"));
81940
82011
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
81941
82012
 
81942
82013
  /***/ }),
@@ -82584,7 +82655,6 @@ var _exportNames = {
82584
82655
  Toolbar: true,
82585
82656
  ToolbarGroup: true,
82586
82657
  ToolbarExpander: true,
82587
- ToolbarBetaProvider: true,
82588
82658
  Tooltip: true,
82589
82659
  Tour: true,
82590
82660
  Translate: true,
@@ -83225,12 +83295,6 @@ Object.defineProperty(exports, "Toolbar", ({
83225
83295
  return _Toolbar.default;
83226
83296
  }
83227
83297
  }));
83228
- Object.defineProperty(exports, "ToolbarBetaProvider", ({
83229
- enumerable: true,
83230
- get: function () {
83231
- return _Toolbar.ToolbarBetaProvider;
83232
- }
83233
- }));
83234
83298
  Object.defineProperty(exports, "ToolbarExpander", ({
83235
83299
  enumerable: true,
83236
83300
  get: function () {