@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.
- package/cjs/components/CodeEditor/CodeEditor.js +1 -2
- package/cjs/components/Icon/constants.js +0 -1
- package/cjs/components/List/List.js +6 -3
- package/cjs/components/Tabs/FakeTabs.js +58 -0
- package/cjs/components/Tabs/Tab.js +0 -1
- package/cjs/components/Tabs/TabClose.js +35 -0
- package/cjs/components/Tabs/TabIcon.js +22 -0
- package/cjs/components/Tabs/TabLabel.js +34 -0
- package/cjs/components/Tabs/TabList.js +120 -0
- package/cjs/components/Tabs/TabListItem.js +79 -0
- package/cjs/components/Tabs/Tabs.js +98 -537
- package/cjs/components/Tabs/useActive.js +19 -0
- package/cjs/components/Tabs/useWidths.js +102 -0
- package/cjs/components/Toaster/PanelView.js +15 -13
- package/cjs/components/Toolbar/ToolbarMenu.js +0 -1
- package/cjs/components/Toolbar/index.js +1 -8
- package/cjs/components/index.js +0 -7
- package/cjs/index.js +1 -1
- package/dist/plesk-ui-library-rtl.css +1 -1
- package/dist/plesk-ui-library-rtl.css.map +1 -1
- package/dist/plesk-ui-library.css +1 -1
- package/dist/plesk-ui-library.css.map +1 -1
- package/dist/plesk-ui-library.js +672 -608
- package/dist/plesk-ui-library.js.map +1 -1
- package/dist/plesk-ui-library.min.js +5 -5
- package/dist/plesk-ui-library.min.js.map +1 -1
- package/esm/components/CodeEditor/CodeEditor.js +1 -2
- package/esm/components/Icon/constants.js +0 -1
- package/esm/components/List/List.js +6 -3
- package/esm/components/Tabs/FakeTabs.js +51 -0
- package/esm/components/Tabs/Tab.js +0 -1
- package/esm/components/Tabs/TabClose.js +28 -0
- package/esm/components/Tabs/TabIcon.js +14 -0
- package/esm/components/Tabs/TabLabel.js +27 -0
- package/esm/components/Tabs/TabList.js +111 -0
- package/esm/components/Tabs/TabListItem.js +72 -0
- package/esm/components/Tabs/Tabs.js +100 -537
- package/esm/components/Tabs/useActive.js +12 -0
- package/esm/components/Tabs/useWidths.js +95 -0
- package/esm/components/Toaster/PanelView.js +15 -13
- package/esm/components/Toolbar/ToolbarMenu.js +0 -1
- package/esm/components/Toolbar/index.js +1 -2
- package/esm/components/index.js +1 -1
- package/esm/index.js +1 -1
- package/package.json +9 -10
- package/styleguide/build/bundle.06c6ee6c.js +2 -0
- package/styleguide/index.html +2 -2
- package/types/components/Carousel/Carousel.d.ts +1 -1
- package/types/components/Label/Label.d.ts +1 -1
- package/types/components/List/List.d.ts +8 -2
- package/types/components/Tabs/FakeTabs.d.ts +9 -0
- package/types/components/Tabs/SearchBar.d.ts +3 -3
- package/types/components/Tabs/TabClose.d.ts +9 -0
- package/types/components/Tabs/TabIcon.d.ts +7 -0
- package/types/components/Tabs/TabLabel.d.ts +9 -0
- package/types/components/Tabs/TabList.d.ts +14 -0
- package/types/components/Tabs/TabListItem.d.ts +12 -0
- package/types/components/Tabs/Tabs.d.ts +2 -52
- package/types/components/Tabs/useActive.d.ts +1 -0
- package/types/components/Tabs/useWidths.d.ts +16 -0
- package/types/components/Toolbar/index.d.ts +0 -1
- package/types/components/index.d.ts +1 -1
- package/types/utils/types/ComponentProps.d.ts +1 -1
- package/types/utils/types/PolymorphicComponent.d.ts +2 -2
- package/cjs/components/Toolbar/ToolbarBetaProvider.js +0 -23
- package/esm/components/Toolbar/ToolbarBetaProvider.js +0 -16
- package/styleguide/build/bundle.7ac8a2af.js +0 -2
- package/types/components/Toolbar/ToolbarBetaProvider.d.ts +0 -5
- /package/styleguide/build/{bundle.7ac8a2af.js.LICENSE.txt → bundle.06c6ee6c.js.LICENSE.txt} +0 -0
package/dist/plesk-ui-library.js
CHANGED
|
@@ -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.
|
|
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
|
-
//
|
|
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
|
|
79632
|
-
var
|
|
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
|
-
|
|
79640
|
-
|
|
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
|
-
|
|
79653
|
-
|
|
79654
|
-
|
|
79655
|
-
|
|
79656
|
-
|
|
79657
|
-
|
|
79658
|
-
|
|
79659
|
-
|
|
79660
|
-
|
|
79661
|
-
|
|
79662
|
-
|
|
79663
|
-
|
|
79664
|
-
|
|
79665
|
-
|
|
79666
|
-
|
|
79667
|
-
|
|
79668
|
-
|
|
79669
|
-
|
|
79670
|
-
|
|
79671
|
-
|
|
79672
|
-
|
|
79673
|
-
|
|
79674
|
-
|
|
79675
|
-
|
|
79676
|
-
|
|
79677
|
-
|
|
79678
|
-
|
|
79679
|
-
|
|
79680
|
-
|
|
79681
|
-
|
|
79682
|
-
|
|
79683
|
-
|
|
79684
|
-
|
|
79685
|
-
|
|
79686
|
-
|
|
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
|
-
|
|
79909
|
-
|
|
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
|
-
|
|
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
|
-
|
|
80075
|
-
|
|
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
|
-
|
|
80089
|
-
|
|
80090
|
-
|
|
80091
|
-
|
|
80092
|
-
|
|
80093
|
-
|
|
80094
|
-
|
|
80095
|
-
|
|
80096
|
-
|
|
80097
|
-
|
|
80098
|
-
|
|
80099
|
-
|
|
80100
|
-
|
|
80101
|
-
|
|
80102
|
-
|
|
80103
|
-
|
|
80104
|
-
|
|
80105
|
-
|
|
80106
|
-
|
|
80107
|
-
|
|
80108
|
-
|
|
80109
|
-
|
|
80110
|
-
|
|
80111
|
-
|
|
80112
|
-
|
|
80113
|
-
|
|
80114
|
-
|
|
80115
|
-
|
|
80116
|
-
|
|
80117
|
-
|
|
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
|
-
|
|
80193
|
-
|
|
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: [
|
|
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 () {
|