@patternfly/patternfly-doc-core 1.10.0 → 1.11.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/astro.config.mjs +3 -4
- package/cli/cli.ts +60 -19
- package/dist/.assetsignore +2 -0
- package/dist/{client/_astro/Button.BQCwQ5pE.js → _astro/Button.BVfR1y85.js} +1 -1
- package/dist/_astro/CSSTable.E6iSHjec.js +1 -0
- package/dist/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CtSceO8m.js +1 -0
- package/dist/{client/_astro/Content.B4M2qzJY.js → _astro/Content.CYLxURqU.js} +1 -1
- package/dist/{client/_astro/DropdownList.cxp03sS4.js → _astro/DropdownList.-xE7qrND.js} +1 -1
- package/dist/{client/_astro/LiveExample.DjPiO80i.js → _astro/LiveExample.CVVccYEB.js} +3 -3
- package/dist/{client/_astro/Navigation.kbLxctIo.js → _astro/Navigation.CONcolRR.js} +1 -1
- package/dist/{client/_astro/PageContext.miTsIqVo.js → _astro/PageContext.BUbWpNW2.js} +1 -1
- package/dist/{client/_astro/PageSidebarBody.B0AJe8Hg.js → _astro/PageSidebarBody.CDWZuFeK.js} +1 -1
- package/dist/{client/_astro/PageToggle.CMZ3C1v1.js → _astro/PageToggle.Dnbvoa7R.js} +1 -1
- package/dist/{client/_astro/SearchInput.DhHo7yPx.js → _astro/SearchInput.BNt7BTX_.js} +1 -1
- package/dist/{client/_astro/SectionGallery.3ABpQwE4.js → _astro/SectionGallery.Dwb-QA5z.js} +1 -1
- package/dist/{client/_astro/Toolbar.CroDQcyv.js → _astro/Toolbar.DNd68Ck-.js} +1 -1
- package/dist/{client/_astro/ToolbarContent.UH3ZRlHp.js → _astro/ToolbarContent.C58gpKLu.js} +1 -1
- package/dist/{client/_astro/angle-left-icon.teo8GC0v.js → _astro/angle-left-icon.CfKwuSCS.js} +1 -1
- package/dist/{client/_astro/bars-icon.Dk6ua1rr.js → _astro/bars-icon.wdJgEs3A.js} +1 -1
- package/dist/_astro/client.DN8ES6L5.js +1 -0
- package/dist/{client/_astro/divider.tlrBPkzg.js → _astro/divider.BLVh3KnH.js} +1 -1
- package/dist/{client/_astro/github-icon.ByC5XEPt.js → _astro/github-icon.DzpohUp_.js} +1 -1
- package/dist/{client/_astro/index.DYVB4vTo.js → _astro/index.jm6QVFFy.js} +1 -1
- package/dist/{client/_astro/link-icon.BNHnRn73.js → _astro/patternfly_charts.Dp3KzAU6.js} +24 -24
- package/dist/_routes.json +20 -0
- package/dist/_worker.js/_@astrojs-ssr-adapter.mjs +2 -0
- package/dist/_worker.js/_astro-internal_middleware.mjs +21 -0
- package/dist/_worker.js/_noop-actions.mjs +4 -0
- package/dist/{server/chunks/AutoLinkHeader_C2GD0g-K.mjs → _worker.js/chunks/AutoLinkHeader_DLgn_YRm.mjs} +13 -14
- package/dist/{server/chunks/Button_BKhHR-ak.mjs → _worker.js/chunks/Button_CBcC0ViE.mjs} +83 -13
- package/dist/{server/chunks/CSSTable_B8tlH3gz.mjs → _worker.js/chunks/CSSTable_C1dV02qV.mjs} +3 -3
- package/dist/_worker.js/chunks/DocsTables_Br4g5x5_.mjs +20 -0
- package/dist/_worker.js/chunks/PropsTables_Dcd7znAq.mjs +6628 -0
- package/dist/_worker.js/chunks/_@astrojs-ssr-adapter_IMtcR503.mjs +1082 -0
- package/dist/_worker.js/chunks/angle-down-icon_VyCXUC7F.mjs +3686 -0
- package/dist/_worker.js/chunks/astro/server_YsSSp7Ny.mjs +7278 -0
- package/dist/_worker.js/chunks/astro-designed-error-pages_MEt0E9xn.mjs +928 -0
- package/dist/_worker.js/chunks/cloudflare-kv-binding_DMly_2Gl.mjs +107 -0
- package/dist/{server/chunks/_@astrojs-ssr-adapter_CbICuCdt.mjs → _worker.js/chunks/index_BE2AHcwI.mjs} +1295 -1817
- package/dist/_worker.js/chunks/index_CBCp_CJ0.mjs +57 -0
- package/dist/_worker.js/chunks/noop-middleware_CMUpAQ6F.mjs +10 -0
- package/dist/_worker.js/chunks/parse_EttCPxrw.mjs +271 -0
- package/dist/{server/chunks/path_Cvt6sEOY.mjs → _worker.js/chunks/path_C-ZOwaTP.mjs} +2 -1
- package/dist/{server/entry.mjs → _worker.js/index.js} +13 -19
- package/dist/_worker.js/manifest_0KWZohUX.mjs +100 -0
- package/dist/_worker.js/pages/_image.astro.mjs +24 -0
- package/dist/_worker.js/pages/_section_/_page_/_---tab_.astro.mjs +1 -0
- package/dist/_worker.js/pages/index.astro.mjs +1 -0
- package/dist/{server → _worker.js}/pages/props.astro.mjs +3 -2
- package/dist/_worker.js/renderers.mjs +484 -0
- package/dist/cli/cli.js +46 -12
- package/dist/{client/components/accordion/react → components/accordion}/index.html +14 -64
- package/dist/{client/components/accordion → components/accordion/react}/index.html +14 -64
- package/dist/components/all-components/index.html +47 -0
- package/dist/design-foundations/typography/index.html +198 -0
- package/dist/{client/design-foundations → design-foundations}/usage-and-behavior/index.html +4 -54
- package/dist/get-started/contribute/index.html +94 -0
- package/dist/index.html +43 -0
- package/package.json +12 -8
- package/public/.assetsignore +2 -0
- package/src/components/DocsTables.astro +28 -0
- package/src/pages/[section]/[...page].astro +7 -11
- package/src/pages/[section]/[page]/[...tab].astro +3 -11
- package/src/pages/props.ts +2 -2
- package/wrangler.jsonc +14 -0
- package/dist/client/_astro/CSSTable.DC79W1Ct.js +0 -1
- package/dist/client/_astro/ClientRouter.astro_astro_type_script_index_0_lang.Cainpjm5.js +0 -1
- package/dist/client/_astro/client.zs76E0tG.js +0 -1
- package/dist/client/components/all-components/index.html +0 -97
- package/dist/client/design-foundations/typography/index.html +0 -248
- package/dist/client/get-started/contribute/index.html +0 -144
- package/dist/client/index.html +0 -43
- package/dist/server/_@astrojs-ssr-adapter.mjs +0 -1
- package/dist/server/_noop-middleware.mjs +0 -3
- package/dist/server/chunks/PropsTables_PVzRHJNB.mjs +0 -1750
- package/dist/server/chunks/_astro_assets_DaYumpRZ.mjs +0 -1507
- package/dist/server/chunks/angle-down-icon_BO1Ed-9Z.mjs +0 -3288
- package/dist/server/chunks/astro/server_Cl9jPh4p.mjs +0 -2859
- package/dist/server/chunks/astro-designed-error-pages_BFveJFnQ.mjs +0 -282
- package/dist/server/chunks/consts_BmVDRGlB.mjs +0 -32
- package/dist/server/chunks/sharp_CbOL3WDk.mjs +0 -88
- package/dist/server/manifest_DsbMfV1U.mjs +0 -102
- package/dist/server/pages/_image.astro.mjs +0 -132
- package/dist/server/renderers.mjs +0 -308
- /package/dist/{client/PF-HorizontalLogo-Color.svg → PF-HorizontalLogo-Color.svg} +0 -0
- /package/dist/{client/PF-HorizontalLogo-Reverse.svg → PF-HorizontalLogo-Reverse.svg} +0 -0
- /package/dist/{client/_astro → _astro}/LiveExample.CxJsMvEq.css +0 -0
- /package/dist/{client/_astro → _astro}/RedHatDisplayVF-Italic.CRpusWc8.woff2 +0 -0
- /package/dist/{client/_astro → _astro}/RedHatDisplayVF.CYDHf1NI.woff2 +0 -0
- /package/dist/{client/_astro → _astro}/RedHatMonoVF-Italic.DGQo2ogW.woff2 +0 -0
- /package/dist/{client/_astro → _astro}/RedHatMonoVF.C4fMH6Vz.woff2 +0 -0
- /package/dist/{client/_astro → _astro}/RedHatTextVF-Italic.Dkj_WqbA.woff2 +0 -0
- /package/dist/{client/_astro → _astro}/RedHatTextVF.wYvZ7prR.woff2 +0 -0
- /package/dist/{client/_astro → _astro}/_page_.Chv_bGyU.css +0 -0
- /package/dist/{client/_astro → _astro}/_page_.CtheD08_.css +0 -0
- /package/dist/{client/_astro → _astro}/_page_.D1z73Byz.css +0 -0
- /package/dist/{client/_astro → _astro}/_page_.DxJDkZPc.css +0 -0
- /package/dist/{client/_astro → _astro}/fa-solid-900.DguXoeIz.woff2 +0 -0
- /package/dist/{client/_astro → _astro}/index.BQFV5hT1.js +0 -0
- /package/dist/{client/_astro → _astro}/index.CAChmxYj.js +0 -0
- /package/dist/{client/_astro → _astro}/index.eCxJ45ll.js +0 -0
- /package/dist/{client/_astro → _astro}/page.BTC3Kf3x.js +0 -0
- /package/dist/{client/_astro → _astro}/pf-v6-pficon.Dy6oiu9u.woff2 +0 -0
- /package/dist/{server/chunks/Accordion_BJka4Qvb.mjs → _worker.js/chunks/Accordion_CQUal4ef.mjs} +0 -0
- /package/dist/{server/chunks/Accordion_BQIphkaZ.mjs → _worker.js/chunks/Accordion_R7bP3pwr.mjs} +0 -0
- /package/dist/{server/chunks/AllComponents_CRhgTsiT.mjs → _worker.js/chunks/AllComponents_BDKlE-WJ.mjs} +0 -0
- /package/dist/{server/chunks/AllComponents_CjOtwUH6.mjs → _worker.js/chunks/AllComponents_DWDph25H.mjs} +0 -0
- /package/dist/{server/chunks/_astro_data-layer-content_D4Ib_RjR.mjs → _worker.js/chunks/_astro_assets_CfTVyruF.mjs} +0 -0
- /package/dist/{server/chunks/content-assets_DleWbedO.mjs → _worker.js/chunks/_astro_data-layer-content_CgXoS6Mm.mjs} +0 -0
- /package/dist/{server/chunks/content-modules_fX1c2JRG.mjs → _worker.js/chunks/content-assets_XqCgPAV2.mjs} +0 -0
- /package/dist/{server/pages/_section_/_---page_.astro.mjs → _worker.js/chunks/content-modules_BbCqcGJp.mjs} +0 -0
- /package/dist/{server/pages/_section_/_page_/_---tab_.astro.mjs → _worker.js/chunks/sharp_MEdXG7Td.mjs} +0 -0
- /package/dist/{server/pages/index.astro.mjs → _worker.js/pages/_section_/_---page_.astro.mjs} +0 -0
- /package/dist/{client/avatarImg.svg → avatarImg.svg} +0 -0
- /package/dist/{client/avatarImgDark.svg → avatarImgDark.svg} +0 -0
- /package/dist/{client/content → content}/typography/line-height.png +0 -0
- /package/dist/{client/favicon.svg → favicon.svg} +0 -0
|
@@ -1,1750 +0,0 @@
|
|
|
1
|
-
import { c as createComponent, a as createAstro, r as renderComponent, b as renderTemplate } from './astro/server_Cl9jPh4p.mjs';
|
|
2
|
-
import 'kleur/colors';
|
|
3
|
-
import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
|
|
4
|
-
import { c as css, b as createIcon, B as Button, r as getUniqueId, K as KeyTypes, v as BellIcon, I as InfoCircleIcon, d as ExclamationCircleIcon, E as ExclamationTriangleIcon, C as CheckCircleIcon, u as useOUIAProps } from './Button_BKhHR-ak.mjs';
|
|
5
|
-
/* empty css */
|
|
6
|
-
import { C as Content, S as Stack, a as StackItem, A as AutoLinkHeader } from './AutoLinkHeader_C2GD0g-K.mjs';
|
|
7
|
-
import { __rest } from 'tslib';
|
|
8
|
-
import { useRef, useEffect, forwardRef, useImperativeHandle, createContext, useState, createRef, Fragment, createElement, cloneElement, useContext } from 'react';
|
|
9
|
-
import { T as TimesIcon, P as Popper, u as useIsomorphicLayoutEffect, e as Tooltip, b as Dropdown, M as MenuToggle, c as DropdownList, D as Divider, d as DropdownItem, a as AngleDownIcon, f as checkStyles, S as StarIcon, g as Checkbox, s as setTabIndex, h as handleArrows } from './angle-down-icon_BO1Ed-9Z.mjs';
|
|
10
|
-
import mergeWith from 'lodash/mergeWith.js';
|
|
11
|
-
/* empty css */
|
|
12
|
-
import { createFocusTrap } from 'focus-trap';
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* A `useEffect`-like hook that only triggers when a component unmounts. Does not require a dependency list, as the effect callback will always be kept up to date.
|
|
16
|
-
*/
|
|
17
|
-
function useUnmountEffect(effect) {
|
|
18
|
-
// Always use the latest effect callback so that it can reference the latest props and state.
|
|
19
|
-
const effectRef = useRef(effect);
|
|
20
|
-
effectRef.current = effect;
|
|
21
|
-
// Trigger the effect callback when the component unmounts.
|
|
22
|
-
useEffect(() => () => {
|
|
23
|
-
effectRef.current();
|
|
24
|
-
}, []);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
const FocusTrap = forwardRef(function FocusTrap(_a, forwardedRef) {
|
|
28
|
-
var { active = true, paused = false, focusTrapOptions = {}, preventScrollOnDeactivate = false } = _a, props = __rest(_a, ["active", "paused", "focusTrapOptions", "preventScrollOnDeactivate"]);
|
|
29
|
-
// Fall back to internal ref if no forwarded ref is provided.
|
|
30
|
-
const ref = useRef(null);
|
|
31
|
-
useImperativeHandle(forwardedRef, () => ref.current);
|
|
32
|
-
// Create focus trap instance after rendering DOM.
|
|
33
|
-
const focusTrapRef = useRef(null);
|
|
34
|
-
useEffect(() => {
|
|
35
|
-
const focusTrap = createFocusTrap(ref.current, Object.assign(Object.assign({}, focusTrapOptions), { returnFocusOnDeactivate: false }));
|
|
36
|
-
focusTrapRef.current = focusTrap;
|
|
37
|
-
// Deactivate focus trap on cleanup.
|
|
38
|
-
return () => {
|
|
39
|
-
focusTrap.deactivate();
|
|
40
|
-
};
|
|
41
|
-
}, []);
|
|
42
|
-
// Handle activation status based on 'active' prop.
|
|
43
|
-
useEffect(() => {
|
|
44
|
-
const focusTrap = focusTrapRef.current;
|
|
45
|
-
active ? focusTrap === null || focusTrap === void 0 ? void 0 : focusTrap.activate() : focusTrap === null || focusTrap === void 0 ? void 0 : focusTrap.deactivate();
|
|
46
|
-
}, [active]);
|
|
47
|
-
// Handle pause status based on 'pause' prop.
|
|
48
|
-
useEffect(() => {
|
|
49
|
-
const focusTrap = focusTrapRef.current;
|
|
50
|
-
paused ? focusTrap === null || focusTrap === void 0 ? void 0 : focusTrap.pause() : focusTrap === null || focusTrap === void 0 ? void 0 : focusTrap.unpause();
|
|
51
|
-
}, [paused]);
|
|
52
|
-
// Store the currently active element to restore focus to later.
|
|
53
|
-
const previousElementRef = useRef(typeof document !== 'undefined' ? document.activeElement : null);
|
|
54
|
-
// Restore focus to the previously active element on unmount.
|
|
55
|
-
useUnmountEffect(() => {
|
|
56
|
-
if (focusTrapOptions.returnFocusOnDeactivate !== false && previousElementRef.current instanceof HTMLElement) {
|
|
57
|
-
previousElementRef.current.focus({
|
|
58
|
-
preventScroll: preventScrollOnDeactivate
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
});
|
|
62
|
-
return jsx("div", Object.assign({ ref: ref }, props));
|
|
63
|
-
});
|
|
64
|
-
FocusTrap.displayName = 'FocusTrap';
|
|
65
|
-
|
|
66
|
-
const styles$4 = {
|
|
67
|
-
"actionList": "pf-v6-c-action-list",
|
|
68
|
-
"modifiers": {
|
|
69
|
-
"icons": "pf-m-icons"
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
const ActionList = (_a) => {
|
|
74
|
-
var { children, isIconList, className } = _a, props = __rest(_a, ["children", "isIconList", "className"]);
|
|
75
|
-
return (jsx("div", Object.assign({ className: css(styles$4.actionList, isIconList && styles$4.modifiers.icons, className) }, props, { children: children })));
|
|
76
|
-
};
|
|
77
|
-
ActionList.displayName = 'ActionList';
|
|
78
|
-
|
|
79
|
-
const ActionListItem = (_a) => {
|
|
80
|
-
var { children, className } = _a, props = __rest(_a, ["children", "className"]);
|
|
81
|
-
return (jsx("div", Object.assign({ className: css(`${styles$4.actionList}__item`, className) }, props, { children: children })));
|
|
82
|
-
};
|
|
83
|
-
ActionListItem.displayName = 'ActionListItem';
|
|
84
|
-
|
|
85
|
-
const GripVerticalIconConfig = {
|
|
86
|
-
name: 'GripVerticalIcon',
|
|
87
|
-
height: 512,
|
|
88
|
-
width: 320,
|
|
89
|
-
svgPath: 'M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z',
|
|
90
|
-
yOffset: 0,
|
|
91
|
-
xOffset: 0,
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
const GripVerticalIcon = createIcon(GripVerticalIconConfig);
|
|
95
|
-
|
|
96
|
-
const styles$3 = {
|
|
97
|
-
"modifiers": {
|
|
98
|
-
"noPadding": "pf-m-no-padding",
|
|
99
|
-
"widthAuto": "pf-m-width-auto",
|
|
100
|
-
"top": "pf-m-top",
|
|
101
|
-
"topLeft": "pf-m-top-left",
|
|
102
|
-
"topRight": "pf-m-top-right",
|
|
103
|
-
"bottom": "pf-m-bottom",
|
|
104
|
-
"bottomLeft": "pf-m-bottom-left",
|
|
105
|
-
"bottomRight": "pf-m-bottom-right",
|
|
106
|
-
"left": "pf-m-left",
|
|
107
|
-
"leftTop": "pf-m-left-top",
|
|
108
|
-
"leftBottom": "pf-m-left-bottom",
|
|
109
|
-
"right": "pf-m-right",
|
|
110
|
-
"rightTop": "pf-m-right-top",
|
|
111
|
-
"rightBottom": "pf-m-right-bottom",
|
|
112
|
-
"danger": "pf-m-danger",
|
|
113
|
-
"warning": "pf-m-warning",
|
|
114
|
-
"success": "pf-m-success",
|
|
115
|
-
"custom": "pf-m-custom",
|
|
116
|
-
"info": "pf-m-info"
|
|
117
|
-
},
|
|
118
|
-
"popover": "pf-v6-c-popover",
|
|
119
|
-
"popoverArrow": "pf-v6-c-popover__arrow",
|
|
120
|
-
"popoverBody": "pf-v6-c-popover__body",
|
|
121
|
-
"popoverClose": "pf-v6-c-popover__close",
|
|
122
|
-
"popoverContent": "pf-v6-c-popover__content",
|
|
123
|
-
"popoverFooter": "pf-v6-c-popover__footer",
|
|
124
|
-
"popoverHeader": "pf-v6-c-popover__header",
|
|
125
|
-
"popoverTitle": "pf-v6-c-popover__title",
|
|
126
|
-
"popoverTitleIcon": "pf-v6-c-popover__title-icon",
|
|
127
|
-
"popoverTitleText": "pf-v6-c-popover__title-text"
|
|
128
|
-
};
|
|
129
|
-
|
|
130
|
-
const PopoverContext = createContext({});
|
|
131
|
-
|
|
132
|
-
const PopoverContent = (_a) => {
|
|
133
|
-
var { className = null, children } = _a, props = __rest(_a, ["className", "children"]);
|
|
134
|
-
return (jsx("div", Object.assign({ className: css(styles$3.popoverContent, className) }, props, { children: children })));
|
|
135
|
-
};
|
|
136
|
-
PopoverContent.displayName = 'PopoverContent';
|
|
137
|
-
|
|
138
|
-
const PopoverBody = (_a) => {
|
|
139
|
-
var { children, id, className } = _a, props = __rest(_a, ["children", "id", "className"]);
|
|
140
|
-
return (jsx("div", Object.assign({ className: css(styles$3.popoverBody, className), id: id }, props, { children: children })));
|
|
141
|
-
};
|
|
142
|
-
PopoverBody.displayName = 'PopoverBody';
|
|
143
|
-
|
|
144
|
-
const PopoverHeaderIcon = (_a) => {
|
|
145
|
-
var { children, className } = _a, props = __rest(_a, ["children", "className"]);
|
|
146
|
-
return (jsx("span", Object.assign({ className: css(styles$3.popoverTitleIcon, className) }, props, { children: children })));
|
|
147
|
-
};
|
|
148
|
-
PopoverHeaderIcon.displayName = 'PopoverHeaderIcon';
|
|
149
|
-
|
|
150
|
-
const PopoverHeaderText = (_a) => {
|
|
151
|
-
var { children, className, headingLevel } = _a, props = __rest(_a, ["children", "className", "headingLevel"]);
|
|
152
|
-
const HeadingLevel = headingLevel;
|
|
153
|
-
return (jsx(HeadingLevel, Object.assign({ className: css(styles$3.popoverTitleText, className) }, props, { children: children })));
|
|
154
|
-
};
|
|
155
|
-
PopoverHeaderText.displayName = 'PopoverHeaderText';
|
|
156
|
-
|
|
157
|
-
const PopoverHeader = (_a) => {
|
|
158
|
-
var { children, icon, className, titleHeadingLevel = 'h6', alertSeverityVariant, id, alertSeverityScreenReaderText } = _a, props = __rest(_a, ["children", "icon", "className", "titleHeadingLevel", "alertSeverityVariant", "id", "alertSeverityScreenReaderText"]);
|
|
159
|
-
return (jsx("header", Object.assign({ className: css(styles$3.popoverHeader, className) }, props, { children: jsxs("div", { className: css(styles$3.popoverTitle), id: id, children: [icon && jsx(PopoverHeaderIcon, { children: icon }), jsxs(PopoverHeaderText, { headingLevel: titleHeadingLevel, children: [alertSeverityVariant && alertSeverityScreenReaderText && (jsx("span", { className: "pf-v6-screen-reader", children: alertSeverityScreenReaderText })), children] })] }) })));
|
|
160
|
-
};
|
|
161
|
-
PopoverHeader.displayName = 'PopoverHeader';
|
|
162
|
-
|
|
163
|
-
const PopoverFooter = (_a) => {
|
|
164
|
-
var { children, className = '' } = _a, props = __rest(_a, ["children", "className"]);
|
|
165
|
-
return (jsx("footer", Object.assign({ className: css(styles$3.popoverFooter, className) }, props, { children: children })));
|
|
166
|
-
};
|
|
167
|
-
PopoverFooter.displayName = 'PopoverFooter';
|
|
168
|
-
|
|
169
|
-
const PopoverCloseButton = (_a) => {
|
|
170
|
-
var { onClose = () => undefined } = _a, props = __rest(_a, ["onClose"]);
|
|
171
|
-
return (jsx("div", { className: css(styles$3.popoverClose), children: jsx(Button, Object.assign({ onClick: onClose, variant: "plain", "aria-label": true }, props, { style: { pointerEvents: 'auto' }, icon: jsx(TimesIcon, {}) })) }));
|
|
172
|
-
};
|
|
173
|
-
PopoverCloseButton.displayName = 'PopoverCloseButton';
|
|
174
|
-
|
|
175
|
-
const PopoverArrow = (_a) => {
|
|
176
|
-
var { className = '' } = _a, props = __rest(_a, ["className"]);
|
|
177
|
-
return jsx("div", Object.assign({ className: css(styles$3.popoverArrow, className) }, props));
|
|
178
|
-
};
|
|
179
|
-
PopoverArrow.displayName = 'PopoverArrow';
|
|
180
|
-
|
|
181
|
-
const c_popover_MaxWidth = {
|
|
182
|
-
"name": "--pf-v6-c-popover--MaxWidth",
|
|
183
|
-
"value": "none",
|
|
184
|
-
"var": "var(--pf-v6-c-popover--MaxWidth)"
|
|
185
|
-
};
|
|
186
|
-
|
|
187
|
-
const c_popover_MinWidth = {
|
|
188
|
-
"name": "--pf-v6-c-popover--MinWidth",
|
|
189
|
-
"value": "auto",
|
|
190
|
-
"var": "var(--pf-v6-c-popover--MinWidth)"
|
|
191
|
-
};
|
|
192
|
-
|
|
193
|
-
var PopoverPosition;
|
|
194
|
-
(function (PopoverPosition) {
|
|
195
|
-
PopoverPosition["auto"] = "auto";
|
|
196
|
-
PopoverPosition["top"] = "top";
|
|
197
|
-
PopoverPosition["bottom"] = "bottom";
|
|
198
|
-
PopoverPosition["left"] = "left";
|
|
199
|
-
PopoverPosition["right"] = "right";
|
|
200
|
-
PopoverPosition["topStart"] = "top-start";
|
|
201
|
-
PopoverPosition["topEnd"] = "top-end";
|
|
202
|
-
PopoverPosition["bottomStart"] = "bottom-start";
|
|
203
|
-
PopoverPosition["bottomEnd"] = "bottom-end";
|
|
204
|
-
PopoverPosition["leftStart"] = "left-start";
|
|
205
|
-
PopoverPosition["leftEnd"] = "left-end";
|
|
206
|
-
PopoverPosition["rightStart"] = "right-start";
|
|
207
|
-
PopoverPosition["rightEnd"] = "right-end";
|
|
208
|
-
})(PopoverPosition || (PopoverPosition = {}));
|
|
209
|
-
const alertStyle = {
|
|
210
|
-
custom: styles$3.modifiers.custom,
|
|
211
|
-
info: styles$3.modifiers.info,
|
|
212
|
-
success: styles$3.modifiers.success,
|
|
213
|
-
warning: styles$3.modifiers.warning,
|
|
214
|
-
danger: styles$3.modifiers.danger
|
|
215
|
-
};
|
|
216
|
-
const Popover = (_a) => {
|
|
217
|
-
var { children, position = 'top', enableFlip = true, className = '', isVisible = null, shouldClose = () => null, shouldOpen = () => null, 'aria-label': ariaLabel = '', bodyContent, headerContent = null, headerComponent = 'h6', headerIcon = null, alertSeverityVariant, alertSeverityScreenReaderText, footerContent = null, appendTo = () => document.body, hideOnOutsideClick = true, onHide = () => null, onHidden = () => null, onShow = () => null, onShown = () => null, onMount = () => null, zIndex = 9999, triggerAction = 'click', minWidth = c_popover_MinWidth && c_popover_MinWidth.value, maxWidth = c_popover_MaxWidth && c_popover_MaxWidth.value, closeBtnAriaLabel = 'Close', showClose = true, distance = 25, flipBehavior = [
|
|
218
|
-
'top',
|
|
219
|
-
'bottom',
|
|
220
|
-
'left',
|
|
221
|
-
'right',
|
|
222
|
-
'top-start',
|
|
223
|
-
'top-end',
|
|
224
|
-
'bottom-start',
|
|
225
|
-
'bottom-end',
|
|
226
|
-
'left-start',
|
|
227
|
-
'left-end',
|
|
228
|
-
'right-start',
|
|
229
|
-
'right-end'
|
|
230
|
-
], animationDuration = 300, id, withFocusTrap: propWithFocusTrap, triggerRef, hasNoPadding = false, hasAutoWidth = false, elementToFocus } = _a, rest = __rest(_a, ["children", "position", "enableFlip", "className", "isVisible", "shouldClose", "shouldOpen", 'aria-label', "bodyContent", "headerContent", "headerComponent", "headerIcon", "alertSeverityVariant", "alertSeverityScreenReaderText", "footerContent", "appendTo", "hideOnOutsideClick", "onHide", "onHidden", "onShow", "onShown", "onMount", "zIndex", "triggerAction", "minWidth", "maxWidth", "closeBtnAriaLabel", "showClose", "distance", "flipBehavior", "animationDuration", "id", "withFocusTrap", "triggerRef", "hasNoPadding", "hasAutoWidth", "elementToFocus"]);
|
|
231
|
-
// could make this a prop in the future (true | false | 'toggle')
|
|
232
|
-
// const hideOnClick = true;
|
|
233
|
-
const uniqueId = id || getUniqueId();
|
|
234
|
-
const triggerManually = isVisible !== null;
|
|
235
|
-
const [visible, setVisible] = useState(false);
|
|
236
|
-
const [focusTrapActive, setFocusTrapActive] = useState(Boolean(propWithFocusTrap));
|
|
237
|
-
const popoverRef = useRef(null);
|
|
238
|
-
useEffect(() => {
|
|
239
|
-
onMount();
|
|
240
|
-
}, []);
|
|
241
|
-
useEffect(() => {
|
|
242
|
-
if (triggerManually) {
|
|
243
|
-
if (isVisible) {
|
|
244
|
-
show(undefined, true);
|
|
245
|
-
}
|
|
246
|
-
else {
|
|
247
|
-
hide();
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
}, [isVisible, triggerManually]);
|
|
251
|
-
const show = (event, withFocusTrap) => {
|
|
252
|
-
event && onShow(event);
|
|
253
|
-
setVisible(true);
|
|
254
|
-
propWithFocusTrap !== false && withFocusTrap && setFocusTrapActive(true);
|
|
255
|
-
};
|
|
256
|
-
const hide = (event) => {
|
|
257
|
-
event && onHide(event);
|
|
258
|
-
setVisible(false);
|
|
259
|
-
};
|
|
260
|
-
const positionModifiers = {
|
|
261
|
-
top: styles$3.modifiers.top,
|
|
262
|
-
bottom: styles$3.modifiers.bottom,
|
|
263
|
-
left: styles$3.modifiers.left,
|
|
264
|
-
right: styles$3.modifiers.right,
|
|
265
|
-
'top-start': styles$3.modifiers.topLeft,
|
|
266
|
-
'top-end': styles$3.modifiers.topRight,
|
|
267
|
-
'bottom-start': styles$3.modifiers.bottomLeft,
|
|
268
|
-
'bottom-end': styles$3.modifiers.bottomRight,
|
|
269
|
-
'left-start': styles$3.modifiers.leftTop,
|
|
270
|
-
'left-end': styles$3.modifiers.leftBottom,
|
|
271
|
-
'right-start': styles$3.modifiers.rightTop,
|
|
272
|
-
'right-end': styles$3.modifiers.rightBottom
|
|
273
|
-
};
|
|
274
|
-
const hasCustomMinWidth = minWidth !== c_popover_MinWidth.value;
|
|
275
|
-
const hasCustomMaxWidth = maxWidth !== c_popover_MaxWidth.value;
|
|
276
|
-
const onDocumentKeyDown = (event) => {
|
|
277
|
-
if (event.key === KeyTypes.Escape && visible) {
|
|
278
|
-
if (triggerManually) {
|
|
279
|
-
shouldClose(event, hide);
|
|
280
|
-
}
|
|
281
|
-
else {
|
|
282
|
-
hide(event);
|
|
283
|
-
}
|
|
284
|
-
}
|
|
285
|
-
};
|
|
286
|
-
const onDocumentClick = (event, triggerElement, popperElement) => {
|
|
287
|
-
if (hideOnOutsideClick && visible) {
|
|
288
|
-
const isFromChild = popperElement && popperElement.contains(event.target);
|
|
289
|
-
const isFromTrigger = triggerElement && triggerElement.contains(event.target);
|
|
290
|
-
if (isFromChild || isFromTrigger) {
|
|
291
|
-
// if clicked within the popper or on the trigger, ignore this event
|
|
292
|
-
return;
|
|
293
|
-
}
|
|
294
|
-
if (triggerManually) {
|
|
295
|
-
shouldClose(event, hide);
|
|
296
|
-
}
|
|
297
|
-
else {
|
|
298
|
-
hide(event);
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
|
-
};
|
|
302
|
-
const onTriggerClick = (event) => {
|
|
303
|
-
if (triggerManually) {
|
|
304
|
-
if (visible) {
|
|
305
|
-
shouldClose(event, hide);
|
|
306
|
-
}
|
|
307
|
-
else {
|
|
308
|
-
shouldOpen(event, show);
|
|
309
|
-
}
|
|
310
|
-
}
|
|
311
|
-
else {
|
|
312
|
-
if (visible) {
|
|
313
|
-
hide(event);
|
|
314
|
-
}
|
|
315
|
-
else {
|
|
316
|
-
show(event, true);
|
|
317
|
-
}
|
|
318
|
-
}
|
|
319
|
-
};
|
|
320
|
-
const onContentMouseDown = () => {
|
|
321
|
-
if (focusTrapActive) {
|
|
322
|
-
setFocusTrapActive(false);
|
|
323
|
-
}
|
|
324
|
-
};
|
|
325
|
-
const onMouseEnter = (event) => {
|
|
326
|
-
if (triggerManually) {
|
|
327
|
-
shouldOpen(event, show);
|
|
328
|
-
}
|
|
329
|
-
else {
|
|
330
|
-
show(event, false);
|
|
331
|
-
}
|
|
332
|
-
};
|
|
333
|
-
const onMouseLeave = (event) => {
|
|
334
|
-
if (triggerManually) {
|
|
335
|
-
shouldClose(event, hide);
|
|
336
|
-
}
|
|
337
|
-
else {
|
|
338
|
-
hide(event);
|
|
339
|
-
}
|
|
340
|
-
};
|
|
341
|
-
const onFocus = (event) => {
|
|
342
|
-
if (triggerManually) {
|
|
343
|
-
shouldOpen(event, show);
|
|
344
|
-
}
|
|
345
|
-
else {
|
|
346
|
-
show(event, false);
|
|
347
|
-
}
|
|
348
|
-
};
|
|
349
|
-
const onBlur = (event) => {
|
|
350
|
-
if (triggerManually) {
|
|
351
|
-
shouldClose(event, hide);
|
|
352
|
-
}
|
|
353
|
-
else {
|
|
354
|
-
hide(event);
|
|
355
|
-
}
|
|
356
|
-
};
|
|
357
|
-
const closePopover = (event) => {
|
|
358
|
-
event.stopPropagation();
|
|
359
|
-
if (triggerManually) {
|
|
360
|
-
shouldClose(event, hide);
|
|
361
|
-
}
|
|
362
|
-
else {
|
|
363
|
-
hide(event);
|
|
364
|
-
}
|
|
365
|
-
};
|
|
366
|
-
const content = (jsxs(FocusTrap, Object.assign({ ref: popoverRef, active: focusTrapActive, focusTrapOptions: {
|
|
367
|
-
returnFocusOnDeactivate: propWithFocusTrap !== false,
|
|
368
|
-
clickOutsideDeactivates: true,
|
|
369
|
-
// FocusTrap's initialFocus can accept false as a value to prevent initial focus.
|
|
370
|
-
// We want to prevent this in case false is ever passed in.
|
|
371
|
-
initialFocus: elementToFocus || undefined,
|
|
372
|
-
checkCanFocusTrap: (containers) => new Promise((resolve) => {
|
|
373
|
-
const interval = setInterval(() => {
|
|
374
|
-
if (containers.every((container) => getComputedStyle(container).visibility !== 'hidden')) {
|
|
375
|
-
resolve();
|
|
376
|
-
clearInterval(interval);
|
|
377
|
-
}
|
|
378
|
-
}, 10);
|
|
379
|
-
}),
|
|
380
|
-
tabbableOptions: { displayCheck: 'none' },
|
|
381
|
-
fallbackFocus: () => {
|
|
382
|
-
// If the popover's trigger is focused but scrolled out of view,
|
|
383
|
-
// FocusTrap will throw an error when the Enter button is used on the trigger.
|
|
384
|
-
// That is because the Popover is hidden when its trigger is out of view.
|
|
385
|
-
// Provide a fallback in that case.
|
|
386
|
-
let node = null;
|
|
387
|
-
if (document && document.activeElement) {
|
|
388
|
-
node = document.activeElement;
|
|
389
|
-
}
|
|
390
|
-
return node;
|
|
391
|
-
}
|
|
392
|
-
}, preventScrollOnDeactivate: true, className: css(styles$3.popover, alertSeverityVariant && alertStyle[alertSeverityVariant], hasNoPadding && styles$3.modifiers.noPadding, hasAutoWidth && styles$3.modifiers.widthAuto, className), role: "dialog", "aria-modal": "true", "aria-label": headerContent ? undefined : ariaLabel, "aria-labelledby": headerContent ? `popover-${uniqueId}-header` : undefined, "aria-describedby": `popover-${uniqueId}-body`, onMouseDown: onContentMouseDown, style: {
|
|
393
|
-
minWidth: hasCustomMinWidth ? minWidth : null,
|
|
394
|
-
maxWidth: hasCustomMaxWidth ? maxWidth : null
|
|
395
|
-
} }, rest, { children: [jsx(PopoverArrow, {}), jsxs(PopoverContent, { children: [showClose && triggerAction === 'click' && (jsx(PopoverCloseButton, { onClose: closePopover, "aria-label": closeBtnAriaLabel })), headerContent && (jsx(PopoverHeader, { id: `popover-${uniqueId}-header`, icon: headerIcon, alertSeverityVariant: alertSeverityVariant, alertSeverityScreenReaderText: alertSeverityScreenReaderText || `${alertSeverityVariant} alert:`, titleHeadingLevel: headerComponent, children: typeof headerContent === 'function' ? headerContent(hide) : headerContent })), jsx(PopoverBody, { id: `popover-${uniqueId}-body`, children: typeof bodyContent === 'function' ? bodyContent(hide) : bodyContent }), footerContent && (jsx(PopoverFooter, { id: `popover-${uniqueId}-footer`, children: typeof footerContent === 'function' ? footerContent(hide) : footerContent }))] })] })));
|
|
396
|
-
return (jsx(PopoverContext.Provider, { value: { headerComponent }, children: jsx(Popper, { trigger: children, triggerRef: triggerRef, popper: content, popperRef: popoverRef, minWidth: minWidth, appendTo: appendTo, isVisible: visible, onMouseEnter: triggerAction === 'hover' && onMouseEnter, onMouseLeave: triggerAction === 'hover' && onMouseLeave, onPopperMouseEnter: triggerAction === 'hover' && onMouseEnter, onPopperMouseLeave: triggerAction === 'hover' && onMouseLeave, onFocus: triggerAction === 'hover' && onFocus, onBlur: triggerAction === 'hover' && onBlur, positionModifiers: positionModifiers, distance: distance, placement: position, onTriggerClick: triggerAction === 'click' && onTriggerClick, onDocumentClick: onDocumentClick, onDocumentKeyDown: onDocumentKeyDown, enableFlip: enableFlip, zIndex: zIndex, flipBehavior: flipBehavior, animationDuration: animationDuration, onHidden: onHidden, onShown: onShown, onHide: () => setFocusTrapActive(false) }) }));
|
|
397
|
-
};
|
|
398
|
-
Popover.displayName = 'Popover';
|
|
399
|
-
|
|
400
|
-
const labelStyles = {
|
|
401
|
-
"label": "pf-v6-c-label",
|
|
402
|
-
"labelActions": "pf-v6-c-label__actions",
|
|
403
|
-
"labelContent": "pf-v6-c-label__content",
|
|
404
|
-
"labelIcon": "pf-v6-c-label__icon",
|
|
405
|
-
"labelText": "pf-v6-c-label__text",
|
|
406
|
-
"modifiers": {
|
|
407
|
-
"blue": "pf-m-blue",
|
|
408
|
-
"red": "pf-m-red",
|
|
409
|
-
"orange": "pf-m-orange",
|
|
410
|
-
"orangered": "pf-m-orangered",
|
|
411
|
-
"yellow": "pf-m-yellow",
|
|
412
|
-
"green": "pf-m-green",
|
|
413
|
-
"teal": "pf-m-teal",
|
|
414
|
-
"purple": "pf-m-purple",
|
|
415
|
-
"success": "pf-m-success",
|
|
416
|
-
"warning": "pf-m-warning",
|
|
417
|
-
"danger": "pf-m-danger",
|
|
418
|
-
"info": "pf-m-info",
|
|
419
|
-
"custom": "pf-m-custom",
|
|
420
|
-
"compact": "pf-m-compact",
|
|
421
|
-
"filled": "pf-m-filled",
|
|
422
|
-
"outline": "pf-m-outline",
|
|
423
|
-
"editable": "pf-m-editable",
|
|
424
|
-
"editableActive": "pf-m-editable-active",
|
|
425
|
-
"overflow": "pf-m-overflow",
|
|
426
|
-
"add": "pf-m-add",
|
|
427
|
-
"clickable": "pf-m-clickable",
|
|
428
|
-
"disabled": "pf-m-disabled"
|
|
429
|
-
}
|
|
430
|
-
};
|
|
431
|
-
|
|
432
|
-
const styles$2 = {
|
|
433
|
-
"modifiers": {
|
|
434
|
-
"editable": "pf-m-editable"}
|
|
435
|
-
};
|
|
436
|
-
|
|
437
|
-
const c_label__text_MaxWidth = {
|
|
438
|
-
"name": "--pf-v6-c-label__text--MaxWidth"};
|
|
439
|
-
|
|
440
|
-
const colorStyles = {
|
|
441
|
-
blue: labelStyles.modifiers.blue,
|
|
442
|
-
teal: labelStyles.modifiers.teal,
|
|
443
|
-
green: labelStyles.modifiers.green,
|
|
444
|
-
orange: labelStyles.modifiers.orange,
|
|
445
|
-
purple: labelStyles.modifiers.purple,
|
|
446
|
-
red: labelStyles.modifiers.red,
|
|
447
|
-
orangered: labelStyles.modifiers.orangered,
|
|
448
|
-
yellow: labelStyles.modifiers.yellow,
|
|
449
|
-
grey: ''
|
|
450
|
-
};
|
|
451
|
-
const statusIcons = {
|
|
452
|
-
success: jsx(CheckCircleIcon, {}),
|
|
453
|
-
warning: jsx(ExclamationTriangleIcon, {}),
|
|
454
|
-
danger: jsx(ExclamationCircleIcon, {}),
|
|
455
|
-
info: jsx(InfoCircleIcon, {}),
|
|
456
|
-
custom: jsx(BellIcon, {})
|
|
457
|
-
};
|
|
458
|
-
const Label = (_a) => {
|
|
459
|
-
var { children, className = '', color = 'grey', variant = 'filled', status, isCompact = false, isDisabled = false, isEditable = false, isClickable: isClickableProp = false, editableProps, textMaxWidth, tooltipPosition, icon, onClose, onClick: onLabelClick, onEditCancel, onEditComplete, closeBtn, closeBtnAriaLabel, closeBtnProps, href, render } = _a, props = __rest(_a, ["children", "className", "color", "variant", "status", "isCompact", "isDisabled", "isEditable", "isClickable", "editableProps", "textMaxWidth", "tooltipPosition", "icon", "onClose", "onClick", "onEditCancel", "onEditComplete", "closeBtn", "closeBtnAriaLabel", "closeBtnProps", "href", "render"]);
|
|
460
|
-
const [isEditableActive, setIsEditableActive] = useState(false);
|
|
461
|
-
const [currValue, setCurrValue] = useState(children);
|
|
462
|
-
const editableButtonRef = useRef(undefined);
|
|
463
|
-
const editableInputRef = useRef(undefined);
|
|
464
|
-
const isOverflowLabel = variant === 'overflow';
|
|
465
|
-
const isAddLabel = variant === 'add';
|
|
466
|
-
const isClickable = isClickableProp || (onLabelClick && !isOverflowLabel && !isAddLabel) || href;
|
|
467
|
-
let _icon;
|
|
468
|
-
if (status) {
|
|
469
|
-
_icon = statusIcons[status];
|
|
470
|
-
}
|
|
471
|
-
if (icon) {
|
|
472
|
-
_icon = icon;
|
|
473
|
-
}
|
|
474
|
-
useEffect(() => {
|
|
475
|
-
document.addEventListener('mousedown', onDocMouseDown);
|
|
476
|
-
document.addEventListener('keydown', onKeyDown);
|
|
477
|
-
return () => {
|
|
478
|
-
document.removeEventListener('mousedown', onDocMouseDown);
|
|
479
|
-
document.removeEventListener('keydown', onKeyDown);
|
|
480
|
-
};
|
|
481
|
-
});
|
|
482
|
-
useEffect(() => {
|
|
483
|
-
if (onLabelClick && href) {
|
|
484
|
-
// eslint-disable-next-line no-console
|
|
485
|
-
console.warn('Link labels cannot have onClick passed, this results in invalid HTML. Please remove either the href or onClick prop.');
|
|
486
|
-
}
|
|
487
|
-
else if (onLabelClick && isEditable) {
|
|
488
|
-
// eslint-disable-next-line no-console
|
|
489
|
-
console.warn('Editable labels cannot have onClick passed, clicking starts the label edit process. Please remove either the isEditable or onClick prop.');
|
|
490
|
-
}
|
|
491
|
-
}, [onLabelClick, href, isEditable]);
|
|
492
|
-
const onDocMouseDown = (event) => {
|
|
493
|
-
if (isEditableActive &&
|
|
494
|
-
editableInputRef &&
|
|
495
|
-
editableInputRef.current &&
|
|
496
|
-
!editableInputRef.current.contains(event.target)) {
|
|
497
|
-
if (editableInputRef.current.value) {
|
|
498
|
-
onEditComplete && onEditComplete(event, editableInputRef.current.value);
|
|
499
|
-
}
|
|
500
|
-
setIsEditableActive(false);
|
|
501
|
-
}
|
|
502
|
-
};
|
|
503
|
-
const onKeyDown = (event) => {
|
|
504
|
-
var _a, _b;
|
|
505
|
-
const key = event.key;
|
|
506
|
-
if ((!isEditableActive &&
|
|
507
|
-
(!editableButtonRef ||
|
|
508
|
-
!editableButtonRef.current ||
|
|
509
|
-
!editableButtonRef.current.contains(event.target))) ||
|
|
510
|
-
(isEditableActive &&
|
|
511
|
-
(!editableInputRef || !editableInputRef.current || !editableInputRef.current.contains(event.target)))) {
|
|
512
|
-
return;
|
|
513
|
-
}
|
|
514
|
-
if (isEditableActive && (key === 'Enter' || key === 'Tab')) {
|
|
515
|
-
event.preventDefault();
|
|
516
|
-
event.stopImmediatePropagation();
|
|
517
|
-
if (editableInputRef.current.value) {
|
|
518
|
-
onEditComplete && onEditComplete(event, editableInputRef.current.value);
|
|
519
|
-
}
|
|
520
|
-
setIsEditableActive(false);
|
|
521
|
-
(_a = editableButtonRef === null || editableButtonRef === void 0 ? void 0 : editableButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
522
|
-
}
|
|
523
|
-
if (isEditableActive && key === 'Escape') {
|
|
524
|
-
event.preventDefault();
|
|
525
|
-
event.stopImmediatePropagation();
|
|
526
|
-
// Reset div text to initial children prop - pre-edit
|
|
527
|
-
if (editableInputRef.current.value) {
|
|
528
|
-
editableInputRef.current.value = children;
|
|
529
|
-
onEditCancel && onEditCancel(event, children);
|
|
530
|
-
}
|
|
531
|
-
setIsEditableActive(false);
|
|
532
|
-
(_b = editableButtonRef === null || editableButtonRef === void 0 ? void 0 : editableButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
|
|
533
|
-
}
|
|
534
|
-
if (!isEditableActive && key === 'Enter') {
|
|
535
|
-
event.preventDefault();
|
|
536
|
-
event.stopImmediatePropagation();
|
|
537
|
-
setIsEditableActive(true);
|
|
538
|
-
// Set cursor position to end of text
|
|
539
|
-
const el = event.target;
|
|
540
|
-
const range = document.createRange();
|
|
541
|
-
const sel = window.getSelection();
|
|
542
|
-
range.selectNodeContents(el);
|
|
543
|
-
range.collapse(false);
|
|
544
|
-
sel.removeAllRanges();
|
|
545
|
-
sel.addRange(range);
|
|
546
|
-
}
|
|
547
|
-
};
|
|
548
|
-
const isClickableDisabled = (href || onLabelClick) && isDisabled;
|
|
549
|
-
const defaultCloseButton = (jsx(Button, Object.assign({ type: "button", variant: "plain", hasNoPadding: true, onClick: onClose, "aria-label": closeBtnAriaLabel || `Close ${children}` }, (isClickableDisabled && { isDisabled: true }), closeBtnProps, { icon: jsx(TimesIcon, {}) })));
|
|
550
|
-
const closeButton = jsx("span", { className: css(labelStyles.labelActions), children: closeBtn || defaultCloseButton });
|
|
551
|
-
const textRef = createRef();
|
|
552
|
-
// ref to apply tooltip when rendered is used
|
|
553
|
-
const componentRef = useRef(undefined);
|
|
554
|
-
const [isTooltipVisible, setIsTooltipVisible] = useState(false);
|
|
555
|
-
useIsomorphicLayoutEffect(() => {
|
|
556
|
-
const currTextRef = isEditable ? editableButtonRef : textRef;
|
|
557
|
-
if (!isEditableActive) {
|
|
558
|
-
setIsTooltipVisible(currTextRef.current && currTextRef.current.offsetWidth < currTextRef.current.scrollWidth);
|
|
559
|
-
}
|
|
560
|
-
}, [isEditableActive]);
|
|
561
|
-
const content = (jsxs(Fragment, { children: [_icon && jsx("span", { className: css(labelStyles.labelIcon), children: _icon }), jsx("span", Object.assign({ ref: textRef, className: css(labelStyles.labelText) }, (textMaxWidth && {
|
|
562
|
-
style: {
|
|
563
|
-
[c_label__text_MaxWidth.name]: textMaxWidth
|
|
564
|
-
}
|
|
565
|
-
}), { children: children }))] }));
|
|
566
|
-
useEffect(() => {
|
|
567
|
-
if (isEditableActive && editableInputRef) {
|
|
568
|
-
editableInputRef.current && editableInputRef.current.focus();
|
|
569
|
-
}
|
|
570
|
-
}, [editableInputRef, isEditableActive]);
|
|
571
|
-
const updateVal = () => {
|
|
572
|
-
setCurrValue(editableInputRef.current.value);
|
|
573
|
-
};
|
|
574
|
-
let LabelComponentChildElement = 'span';
|
|
575
|
-
if (href) {
|
|
576
|
-
LabelComponentChildElement = 'a';
|
|
577
|
-
}
|
|
578
|
-
else if (isEditable || (onLabelClick && !isOverflowLabel && !isAddLabel)) {
|
|
579
|
-
LabelComponentChildElement = 'button';
|
|
580
|
-
}
|
|
581
|
-
const clickableLabelProps = {
|
|
582
|
-
type: 'button',
|
|
583
|
-
onClick: onLabelClick
|
|
584
|
-
};
|
|
585
|
-
const isButton = LabelComponentChildElement === 'button';
|
|
586
|
-
const labelComponentChildProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ className: css(labelStyles.labelContent, isClickable && labelStyles.modifiers.clickable) }, (isTooltipVisible && { tabIndex: 0 })), (href && { href })), (href && isDisabled && { onClick: (event) => event.preventDefault() })), (isButton && clickableLabelProps)), (isEditable && Object.assign({ ref: editableButtonRef, onClick: (e) => {
|
|
587
|
-
setIsEditableActive(true);
|
|
588
|
-
e.stopPropagation();
|
|
589
|
-
} }, editableProps))), (isClickableDisabled && isButton && { disabled: true })), (isClickableDisabled && href && { tabIndex: -1, 'aria-disabled': true }));
|
|
590
|
-
let labelComponentChild = (jsx(LabelComponentChildElement, Object.assign({}, labelComponentChildProps, { children: content })));
|
|
591
|
-
if (render) {
|
|
592
|
-
labelComponentChild = (jsxs(Fragment, { children: [isTooltipVisible && jsx(Tooltip, { triggerRef: componentRef, content: children, position: tooltipPosition }), render({
|
|
593
|
-
className: labelStyles.labelContent,
|
|
594
|
-
content,
|
|
595
|
-
componentRef
|
|
596
|
-
})] }));
|
|
597
|
-
}
|
|
598
|
-
else if (isTooltipVisible) {
|
|
599
|
-
labelComponentChild = (jsx(Tooltip, { content: children, position: tooltipPosition, children: labelComponentChild }));
|
|
600
|
-
}
|
|
601
|
-
const LabelComponent = (isOverflowLabel ? 'button' : 'span');
|
|
602
|
-
return (jsxs(LabelComponent, Object.assign({}, props, { className: css(labelStyles.label, isClickableDisabled && labelStyles.modifiers.disabled, colorStyles[color], variant === 'filled' && labelStyles.modifiers.filled, variant === 'outline' && labelStyles.modifiers.outline, status && labelStyles.modifiers[status], isOverflowLabel && labelStyles.modifiers.overflow, isCompact && labelStyles.modifiers.compact, isEditable && styles$2.modifiers.editable, isEditableActive && labelStyles.modifiers.editableActive, isClickable && labelStyles.modifiers.clickable, isAddLabel && labelStyles.modifiers.add, className), onClick: isOverflowLabel || isAddLabel ? onLabelClick : undefined }, (LabelComponent === 'button' && { type: 'button' }), { children: [!isEditableActive && labelComponentChild, !isEditableActive && onClose && closeButton, isEditableActive && (jsx("input", Object.assign({ className: css(labelStyles.labelContent), type: "text", id: "editable-input", ref: editableInputRef, value: currValue, onChange: updateVal }, editableProps)))] })));
|
|
603
|
-
};
|
|
604
|
-
Label.displayName = 'Label';
|
|
605
|
-
|
|
606
|
-
const EllipsisVIconConfig = {
|
|
607
|
-
name: 'EllipsisVIcon',
|
|
608
|
-
height: 512,
|
|
609
|
-
width: 192,
|
|
610
|
-
svgPath: 'M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z',
|
|
611
|
-
yOffset: 0,
|
|
612
|
-
xOffset: 0,
|
|
613
|
-
};
|
|
614
|
-
|
|
615
|
-
const EllipsisVIcon = createIcon(EllipsisVIconConfig);
|
|
616
|
-
|
|
617
|
-
const ActionsColumnBase = (_a) => {
|
|
618
|
-
var { items, isDisabled, rowData, extraData, actionsToggle, popperProps = {
|
|
619
|
-
position: 'end',
|
|
620
|
-
direction: 'down'
|
|
621
|
-
}, innerRef, firstActionItemRef, isOnOpenChangeDisabled = false } = _a, props = __rest(_a, ["items", "isDisabled", "rowData", "extraData", "actionsToggle", "popperProps", "innerRef", "firstActionItemRef", "isOnOpenChangeDisabled"]);
|
|
622
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
623
|
-
const onToggle = () => {
|
|
624
|
-
setIsOpen(!isOpen);
|
|
625
|
-
};
|
|
626
|
-
const onActionClick = (event, onClick) => {
|
|
627
|
-
// Only prevent default if onClick is provided. This allows href support.
|
|
628
|
-
if (onClick) {
|
|
629
|
-
event.preventDefault();
|
|
630
|
-
// tslint:disable-next-line:no-unused-expression
|
|
631
|
-
onClick(event, extraData && extraData.rowIndex, rowData, extraData);
|
|
632
|
-
}
|
|
633
|
-
};
|
|
634
|
-
return (jsxs(Fragment, { children: [items
|
|
635
|
-
.filter((item) => item.isOutsideDropdown)
|
|
636
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
637
|
-
.map((_a, key) => {
|
|
638
|
-
var { title, itemKey, onClick, isOutsideDropdown } = _a, props = __rest(_a, ["title", "itemKey", "onClick", "isOutsideDropdown"]);
|
|
639
|
-
return typeof title === 'string' ? (createElement(Button, Object.assign({ onClick: (event) => onActionClick(event, onClick) }, props, { isDisabled: isDisabled, key: itemKey || `outside_dropdown_${key}`, "data-key": itemKey || `outside_dropdown_${key}` }), title)) : (cloneElement(title, Object.assign({ onClick, isDisabled }, props)));
|
|
640
|
-
}), jsx(Dropdown, Object.assign({ isOpen: isOpen, onOpenChange: !isOnOpenChangeDisabled ? (isOpen) => setIsOpen(isOpen) : undefined, toggle: (toggleRef) => actionsToggle ? (actionsToggle({ onToggle, isOpen, isDisabled, toggleRef })) : (jsx(MenuToggle, { "aria-label": "Kebab toggle", ref: toggleRef, onClick: onToggle, isExpanded: isOpen, isDisabled: isDisabled, variant: "plain", icon: jsx(EllipsisVIcon, {}) })) }, (rowData && rowData.actionProps), { ref: innerRef }, props, { popperProps: popperProps, children: jsx(DropdownList, { children: items
|
|
641
|
-
.filter((item) => !item.isOutsideDropdown)
|
|
642
|
-
.map((_a, index) => {
|
|
643
|
-
var { title, itemKey, onClick, tooltipProps, isSeparator, shouldCloseOnClick = true } = _a, props = __rest(_a, ["title", "itemKey", "onClick", "tooltipProps", "isSeparator", "shouldCloseOnClick"]);
|
|
644
|
-
if (isSeparator) {
|
|
645
|
-
return jsx(Divider, { "data-key": itemKey || index }, itemKey || index);
|
|
646
|
-
}
|
|
647
|
-
const item = (createElement(DropdownItem, Object.assign({ onClick: (event) => {
|
|
648
|
-
onActionClick(event, onClick);
|
|
649
|
-
shouldCloseOnClick && onToggle();
|
|
650
|
-
} }, props, { key: itemKey || index, "data-key": itemKey || index, ref: index === 0 ? firstActionItemRef : undefined }), title));
|
|
651
|
-
if (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content) {
|
|
652
|
-
return (jsx(Tooltip, Object.assign({}, tooltipProps, { children: item }), itemKey || index));
|
|
653
|
-
}
|
|
654
|
-
else {
|
|
655
|
-
return item;
|
|
656
|
-
}
|
|
657
|
-
}) }) }))] }));
|
|
658
|
-
};
|
|
659
|
-
const ActionsColumn = forwardRef((props, ref) => (jsx(ActionsColumnBase, Object.assign({}, props, { innerRef: ref }))));
|
|
660
|
-
ActionsColumn.displayName = 'ActionsColumn';
|
|
661
|
-
|
|
662
|
-
const styles$1 = {
|
|
663
|
-
"modifiers": {
|
|
664
|
-
"fixed": "pf-m-fixed",
|
|
665
|
-
"stickyHeader": "pf-m-sticky-header",
|
|
666
|
-
"nestedColumnHeader": "pf-m-nested-column-header",
|
|
667
|
-
"striped": "pf-m-striped",
|
|
668
|
-
"expandable": "pf-m-expandable",
|
|
669
|
-
"stripedEven": "pf-m-striped-even",
|
|
670
|
-
"ghostRow": "pf-m-ghost-row",
|
|
671
|
-
"hidden": "pf-m-hidden",
|
|
672
|
-
"hiddenOnSm": "pf-m-hidden-on-sm",
|
|
673
|
-
"visibleOnSm": "pf-m-visible-on-sm",
|
|
674
|
-
"hiddenOnMd": "pf-m-hidden-on-md",
|
|
675
|
-
"visibleOnMd": "pf-m-visible-on-md",
|
|
676
|
-
"hiddenOnLg": "pf-m-hidden-on-lg",
|
|
677
|
-
"visibleOnLg": "pf-m-visible-on-lg",
|
|
678
|
-
"hiddenOnXl": "pf-m-hidden-on-xl",
|
|
679
|
-
"visibleOnXl": "pf-m-visible-on-xl",
|
|
680
|
-
"hiddenOn_2xl": "pf-m-hidden-on-2xl",
|
|
681
|
-
"visibleOn_2xl": "pf-m-visible-on-2xl",
|
|
682
|
-
"center": "pf-m-center",
|
|
683
|
-
"help": "pf-m-help",
|
|
684
|
-
"favorite": "pf-m-favorite",
|
|
685
|
-
"borderRight": "pf-m-border-right",
|
|
686
|
-
"borderLeft": "pf-m-border-left",
|
|
687
|
-
"noBorderRows": "pf-m-no-border-rows",
|
|
688
|
-
"expanded": "pf-m-expanded",
|
|
689
|
-
"clickable": "pf-m-clickable",
|
|
690
|
-
"selected": "pf-m-selected",
|
|
691
|
-
"firstCellOffsetReset": "pf-m-first-cell-offset-reset",
|
|
692
|
-
"dragOver": "pf-m-drag-over",
|
|
693
|
-
"truncate": "pf-m-truncate",
|
|
694
|
-
"wrap": "pf-m-wrap",
|
|
695
|
-
"nowrap": "pf-m-nowrap",
|
|
696
|
-
"fitContent": "pf-m-fit-content",
|
|
697
|
-
"breakWord": "pf-m-break-word",
|
|
698
|
-
"standalone": "pf-m-standalone",
|
|
699
|
-
"favorited": "pf-m-favorited",
|
|
700
|
-
"noPadding": "pf-m-no-padding",
|
|
701
|
-
"compact": "pf-m-compact",
|
|
702
|
-
"borderRow": "pf-m-border-row",
|
|
703
|
-
"width_10": "pf-m-width-10",
|
|
704
|
-
"width_15": "pf-m-width-15",
|
|
705
|
-
"width_20": "pf-m-width-20",
|
|
706
|
-
"width_25": "pf-m-width-25",
|
|
707
|
-
"width_30": "pf-m-width-30",
|
|
708
|
-
"width_35": "pf-m-width-35",
|
|
709
|
-
"width_40": "pf-m-width-40",
|
|
710
|
-
"width_45": "pf-m-width-45",
|
|
711
|
-
"width_50": "pf-m-width-50",
|
|
712
|
-
"width_60": "pf-m-width-60",
|
|
713
|
-
"width_70": "pf-m-width-70",
|
|
714
|
-
"width_80": "pf-m-width-80",
|
|
715
|
-
"width_90": "pf-m-width-90",
|
|
716
|
-
"width_100": "pf-m-width-100"
|
|
717
|
-
},
|
|
718
|
-
"table": "pf-v6-c-table",
|
|
719
|
-
"tableAction": "pf-v6-c-table__action",
|
|
720
|
-
"tableButton": "pf-v6-c-table__button",
|
|
721
|
-
"tableButtonContent": "pf-v6-c-table__button-content",
|
|
722
|
-
"tableCheck": "pf-v6-c-table__check",
|
|
723
|
-
"tableColumnHelp": "pf-v6-c-table__column-help",
|
|
724
|
-
"tableColumnHelpAction": "pf-v6-c-table__column-help-action",
|
|
725
|
-
"tableCompoundExpansionToggle": "pf-v6-c-table__compound-expansion-toggle",
|
|
726
|
-
"tableControlRow": "pf-v6-c-table__control-row",
|
|
727
|
-
"tableDraggable": "pf-v6-c-table__draggable",
|
|
728
|
-
"tableExpandableRow": "pf-v6-c-table__expandable-row",
|
|
729
|
-
"tableFavorite": "pf-v6-c-table__favorite",
|
|
730
|
-
"tableSort": "pf-v6-c-table__sort",
|
|
731
|
-
"tableSortIndicator": "pf-v6-c-table__sort-indicator",
|
|
732
|
-
"tableSubhead": "pf-v6-c-table__subhead",
|
|
733
|
-
"tableTbody": "pf-v6-c-table__tbody",
|
|
734
|
-
"tableTd": "pf-v6-c-table__td",
|
|
735
|
-
"tableText": "pf-v6-c-table__text",
|
|
736
|
-
"tableTh": "pf-v6-c-table__th",
|
|
737
|
-
"tableThead": "pf-v6-c-table__thead",
|
|
738
|
-
"tableToggle": "pf-v6-c-table__toggle",
|
|
739
|
-
"tableToggleIcon": "pf-v6-c-table__toggle-icon",
|
|
740
|
-
"tableTr": "pf-v6-c-table__tr"
|
|
741
|
-
};
|
|
742
|
-
|
|
743
|
-
const CollapseColumn = (_a) => {
|
|
744
|
-
var { className = '', children = null, isOpen, onToggle } = _a, props = __rest(_a, ["className", "children", "isOpen", "onToggle"]);
|
|
745
|
-
return (jsxs(Fragment, { children: [isOpen !== undefined && (jsx(Button, Object.assign({ className: css(className, isOpen && styles$1.modifiers.expanded) }, props, { variant: "plain", "aria-label": props['aria-label'] || 'Details', onClick: onToggle, "aria-expanded": isOpen, icon: jsx("div", { className: css(styles$1.tableToggleIcon), children: jsx(AngleDownIcon, {}) }) }))), children] }));
|
|
746
|
-
};
|
|
747
|
-
CollapseColumn.displayName = 'CollapseColumn';
|
|
748
|
-
|
|
749
|
-
const DraggableCell = (_a) => {
|
|
750
|
-
var { className, onClick, 'aria-label': ariaLabel, id } = _a, props = __rest(_a, ["className", "onClick", 'aria-label', "id"]);
|
|
751
|
-
return (jsx(Button, Object.assign({ id: id, variant: "plain", className: className, type: "button", "aria-label": ariaLabel || `Draggable row draggable button`, onClick: onClick }, props, { icon: jsx(GripVerticalIcon, {}) })));
|
|
752
|
-
};
|
|
753
|
-
DraggableCell.displayName = 'DraggableCell';
|
|
754
|
-
|
|
755
|
-
const inlineStyles = {
|
|
756
|
-
"modifiers": {
|
|
757
|
-
"inlineEditable": "pf-m-inline-editable"}
|
|
758
|
-
};
|
|
759
|
-
|
|
760
|
-
const HelpIconConfig = {
|
|
761
|
-
name: 'HelpIcon',
|
|
762
|
-
height: 1024,
|
|
763
|
-
width: 1024,
|
|
764
|
-
svgPath: 'M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0',
|
|
765
|
-
yOffset: 0,
|
|
766
|
-
xOffset: 0,
|
|
767
|
-
};
|
|
768
|
-
|
|
769
|
-
const HelpIcon = createIcon(HelpIconConfig);
|
|
770
|
-
|
|
771
|
-
var TableTextVariant;
|
|
772
|
-
(function (TableTextVariant) {
|
|
773
|
-
TableTextVariant["div"] = "div";
|
|
774
|
-
TableTextVariant["nav"] = "nav";
|
|
775
|
-
})(TableTextVariant || (TableTextVariant = {}));
|
|
776
|
-
var WrapModifier;
|
|
777
|
-
(function (WrapModifier) {
|
|
778
|
-
WrapModifier["wrap"] = "wrap";
|
|
779
|
-
WrapModifier["nowrap"] = "nowrap";
|
|
780
|
-
WrapModifier["truncate"] = "truncate";
|
|
781
|
-
WrapModifier["breakWord"] = "breakWord";
|
|
782
|
-
WrapModifier["fitContent"] = "fitContent";
|
|
783
|
-
})(WrapModifier || (WrapModifier = {}));
|
|
784
|
-
const TableText = (_a) => {
|
|
785
|
-
var { children = null, className = '', variant = 'span', wrapModifier = null, tooltip: tooltipProp = '', tooltipProps = {}, onMouseEnter: onMouseEnterProp = () => { }, focused = false, tooltipHasDefaultBehavior = false } = _a, props = __rest(_a, ["children", "className", "variant", "wrapModifier", "tooltip", "tooltipProps", "onMouseEnter", "focused", "tooltipHasDefaultBehavior"]);
|
|
786
|
-
const Component = variant;
|
|
787
|
-
const textRef = createRef();
|
|
788
|
-
const [tooltip, setTooltip] = useState(tooltipProp);
|
|
789
|
-
const onMouseEnter = (event) => {
|
|
790
|
-
if (event.target.offsetWidth < event.target.scrollWidth) {
|
|
791
|
-
setTooltip(tooltipProp || event.target.innerText);
|
|
792
|
-
}
|
|
793
|
-
else {
|
|
794
|
-
setTooltip('');
|
|
795
|
-
}
|
|
796
|
-
onMouseEnterProp(event);
|
|
797
|
-
};
|
|
798
|
-
const onFocus = (element) => {
|
|
799
|
-
if (element.offsetWidth < element.scrollWidth) {
|
|
800
|
-
setTooltip(tooltipProp || element.innerText);
|
|
801
|
-
}
|
|
802
|
-
else {
|
|
803
|
-
setTooltip('');
|
|
804
|
-
}
|
|
805
|
-
};
|
|
806
|
-
const text = (jsx(Component, Object.assign({ ref: textRef, onMouseEnter: !tooltipHasDefaultBehavior ? onMouseEnter : undefined, className: css(className, wrapModifier && styles$1.modifiers[wrapModifier], styles$1.tableText) }, props, { children: children })));
|
|
807
|
-
useEffect(() => {
|
|
808
|
-
if (!tooltipHasDefaultBehavior) {
|
|
809
|
-
if (focused) {
|
|
810
|
-
onFocus(textRef.current);
|
|
811
|
-
}
|
|
812
|
-
else {
|
|
813
|
-
setTooltip('');
|
|
814
|
-
}
|
|
815
|
-
}
|
|
816
|
-
}, [focused, tooltipHasDefaultBehavior]);
|
|
817
|
-
return tooltip !== '' ? (jsx(Tooltip, Object.assign({ triggerRef: textRef, content: tooltip }, (!tooltipHasDefaultBehavior && { isVisible: true }), tooltipProps, { children: text }))) : (text);
|
|
818
|
-
};
|
|
819
|
-
TableText.displayName = 'TableText';
|
|
820
|
-
|
|
821
|
-
const HeaderCellInfoWrapper = ({ children, info, className, variant = 'tooltip', popoverProps, tooltipProps, ariaLabel }) => (jsxs("div", { className: css(styles$1.tableColumnHelp, className), children: [typeof children === 'string' ? jsx(TableText, { children: children }) : children, jsx("span", { className: css(styles$1.tableColumnHelpAction), children: variant === 'tooltip' ? (jsx(Tooltip, Object.assign({ content: info }, tooltipProps, { children: jsx(Button, { variant: "plain", hasNoPadding: true, "aria-label": ariaLabel || (typeof info === 'string' && info) || 'More info', icon: jsx(HelpIcon, {}) }) }))) : (jsx(Popover, Object.assign({ bodyContent: info }, popoverProps, { children: jsx(Button, { variant: "plain", hasNoPadding: true, "aria-label": ariaLabel || (typeof info === 'string' && info) || 'More info', icon: jsx(HelpIcon, {}) }) }))) })] }));
|
|
822
|
-
HeaderCellInfoWrapper.displayName = 'HeaderCellInfoWrapper';
|
|
823
|
-
|
|
824
|
-
const stylesGrid = {
|
|
825
|
-
"modifiers": {
|
|
826
|
-
"grid": "pf-m-grid",
|
|
827
|
-
"expandable": "pf-m-expandable",
|
|
828
|
-
"expanded": "pf-m-expanded",
|
|
829
|
-
"selected": "pf-m-selected",
|
|
830
|
-
"compact": "pf-m-compact",
|
|
831
|
-
"noPadding": "pf-m-no-padding",
|
|
832
|
-
"hoverable": "pf-m-hoverable",
|
|
833
|
-
"nowrap": "pf-m-nowrap",
|
|
834
|
-
"fitContent": "pf-m-fit-content",
|
|
835
|
-
"truncate": "pf-m-truncate",
|
|
836
|
-
"gridMd": "pf-m-grid-md",
|
|
837
|
-
"gridLg": "pf-m-grid-lg",
|
|
838
|
-
"gridXl": "pf-m-grid-xl",
|
|
839
|
-
"grid_2xl": "pf-m-grid-2xl"
|
|
840
|
-
}};
|
|
841
|
-
|
|
842
|
-
const treeViewStyles = {
|
|
843
|
-
"modifiers": {
|
|
844
|
-
"treeView": "pf-m-tree-view",
|
|
845
|
-
"noInset": "pf-m-no-inset",
|
|
846
|
-
"treeViewGrid": "pf-m-tree-view-grid",
|
|
847
|
-
"borderRight": "pf-m-border-right",
|
|
848
|
-
"treeViewDetailsExpanded": "pf-m-tree-view-details-expanded",
|
|
849
|
-
"treeViewGridMd": "pf-m-tree-view-grid-md",
|
|
850
|
-
"treeViewGridLg": "pf-m-tree-view-grid-lg",
|
|
851
|
-
"treeViewGridXl": "pf-m-tree-view-grid-xl",
|
|
852
|
-
"treeViewGrid_2xl": "pf-m-tree-view-grid-2xl"
|
|
853
|
-
},
|
|
854
|
-
"tableCheck": "pf-v6-c-table__check",
|
|
855
|
-
"tableToggle": "pf-v6-c-table__toggle",
|
|
856
|
-
"tableToggleIcon": "pf-v6-c-table__toggle-icon",
|
|
857
|
-
"tableTreeViewDetailsToggle": "pf-v6-c-table__tree-view-details-toggle",
|
|
858
|
-
"tableTreeViewIcon": "pf-v6-c-table__tree-view-icon",
|
|
859
|
-
"tableTreeViewMain": "pf-v6-c-table__tree-view-main",
|
|
860
|
-
"tableTreeViewText": "pf-v6-c-table__tree-view-text",
|
|
861
|
-
"tableTreeViewTitleCell": "pf-v6-c-table__tree-view-title-cell"
|
|
862
|
-
};
|
|
863
|
-
|
|
864
|
-
var RowSelectVariant;
|
|
865
|
-
(function (RowSelectVariant) {
|
|
866
|
-
RowSelectVariant["radio"] = "radio";
|
|
867
|
-
RowSelectVariant["checkbox"] = "checkbox";
|
|
868
|
-
})(RowSelectVariant || (RowSelectVariant = {}));
|
|
869
|
-
const SelectColumn = (_a) => {
|
|
870
|
-
var { children = null,
|
|
871
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
872
|
-
className, onSelect = null, selectVariant, tooltip, tooltipProps } = _a, props = __rest(_a, ["children", "className", "onSelect", "selectVariant", "tooltip", "tooltipProps"]);
|
|
873
|
-
const inputRef = createRef();
|
|
874
|
-
const content = (jsxs(Fragment, { children: [jsx("label", { children: jsx("input", Object.assign({}, props, { ref: inputRef, type: selectVariant, onChange: onSelect })) }), children] }));
|
|
875
|
-
return tooltip ? (jsx(Tooltip, Object.assign({ triggerRef: inputRef, content: tooltip }, tooltipProps, { children: content }))) : (content);
|
|
876
|
-
};
|
|
877
|
-
SelectColumn.displayName = 'SelectColumn';
|
|
878
|
-
|
|
879
|
-
const selectable = (label, { rowIndex, columnIndex, rowData, column, property, tooltip }) => {
|
|
880
|
-
const { extraParams: { onSelect, selectVariant, allRowsSelected, isHeaderSelectDisabled } } = column;
|
|
881
|
-
const extraData = {
|
|
882
|
-
rowIndex,
|
|
883
|
-
columnIndex,
|
|
884
|
-
column,
|
|
885
|
-
property
|
|
886
|
-
};
|
|
887
|
-
if (rowData && rowData.hasOwnProperty('parent') && !rowData.showSelect && !rowData.fullWidth) {
|
|
888
|
-
return {
|
|
889
|
-
component: 'td',
|
|
890
|
-
isVisible: true
|
|
891
|
-
};
|
|
892
|
-
}
|
|
893
|
-
const rowId = rowIndex !== undefined ? rowIndex : -1;
|
|
894
|
-
/**
|
|
895
|
-
* @param {React.FormEvent} event - React form event
|
|
896
|
-
*/
|
|
897
|
-
function selectClick(event) {
|
|
898
|
-
const selected = rowIndex === undefined ? event.currentTarget.checked : rowData && !rowData.selected;
|
|
899
|
-
// tslint:disable-next-line:no-unused-expression
|
|
900
|
-
onSelect && onSelect(event, selected, rowId, rowData, extraData);
|
|
901
|
-
}
|
|
902
|
-
const customProps = Object.assign(Object.assign(Object.assign({}, (rowId !== -1
|
|
903
|
-
? {
|
|
904
|
-
checked: rowData && !!rowData.selected,
|
|
905
|
-
'aria-label': `Select row ${rowIndex}`
|
|
906
|
-
}
|
|
907
|
-
: {
|
|
908
|
-
checked: allRowsSelected,
|
|
909
|
-
'aria-label': 'Select all rows'
|
|
910
|
-
})), (rowData &&
|
|
911
|
-
(rowData.disableCheckbox || rowData.disableSelection) && {
|
|
912
|
-
disabled: true,
|
|
913
|
-
className: checkStyles.checkInput
|
|
914
|
-
})), (!rowData && isHeaderSelectDisabled && { disabled: true }));
|
|
915
|
-
let selectName = 'check-all';
|
|
916
|
-
if (rowId !== -1 && selectVariant === RowSelectVariant.checkbox) {
|
|
917
|
-
selectName = `checkrow${rowIndex}`;
|
|
918
|
-
}
|
|
919
|
-
else if (rowId !== -1) {
|
|
920
|
-
selectName = 'radioGroup';
|
|
921
|
-
}
|
|
922
|
-
return {
|
|
923
|
-
className: css(styles$1.tableCheck),
|
|
924
|
-
component: rowId !== -1 ? 'td' : 'th',
|
|
925
|
-
isVisible: !rowData || !rowData.fullWidth,
|
|
926
|
-
children: (jsx(SelectColumn, Object.assign({}, customProps, { selectVariant: selectVariant, onSelect: selectClick, name: selectName, tooltip: tooltip, children: label })))
|
|
927
|
-
};
|
|
928
|
-
};
|
|
929
|
-
|
|
930
|
-
const LongArrowAltUpIconConfig = {
|
|
931
|
-
name: 'LongArrowAltUpIcon',
|
|
932
|
-
height: 512,
|
|
933
|
-
width: 256,
|
|
934
|
-
svgPath: 'M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z',
|
|
935
|
-
yOffset: 0,
|
|
936
|
-
xOffset: 0,
|
|
937
|
-
};
|
|
938
|
-
|
|
939
|
-
const LongArrowAltUpIcon = createIcon(LongArrowAltUpIconConfig);
|
|
940
|
-
|
|
941
|
-
const LongArrowAltDownIconConfig = {
|
|
942
|
-
name: 'LongArrowAltDownIcon',
|
|
943
|
-
height: 512,
|
|
944
|
-
width: 256,
|
|
945
|
-
svgPath: 'M168 345.941V44c0-6.627-5.373-12-12-12h-56c-6.627 0-12 5.373-12 12v301.941H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.569 9.373 33.941 0l86.059-86.059c15.119-15.119 4.411-40.971-16.971-40.971H168z',
|
|
946
|
-
yOffset: 0,
|
|
947
|
-
xOffset: 0,
|
|
948
|
-
};
|
|
949
|
-
|
|
950
|
-
const LongArrowAltDownIcon = createIcon(LongArrowAltDownIconConfig);
|
|
951
|
-
|
|
952
|
-
const ArrowsAltVIconConfig = {
|
|
953
|
-
name: 'ArrowsAltVIcon',
|
|
954
|
-
height: 512,
|
|
955
|
-
width: 256,
|
|
956
|
-
svgPath: 'M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z',
|
|
957
|
-
yOffset: 0,
|
|
958
|
-
xOffset: 0,
|
|
959
|
-
};
|
|
960
|
-
|
|
961
|
-
const ArrowsAltVIcon = createIcon(ArrowsAltVIconConfig);
|
|
962
|
-
|
|
963
|
-
var SortByDirection;
|
|
964
|
-
(function (SortByDirection) {
|
|
965
|
-
SortByDirection["asc"] = "asc";
|
|
966
|
-
SortByDirection["desc"] = "desc";
|
|
967
|
-
})(SortByDirection || (SortByDirection = {}));
|
|
968
|
-
const SortColumn = (_a) => {
|
|
969
|
-
var { children = null, className = '', isSortedBy = false, onSort = null, sortDirection = '', type = 'button', tooltip, tooltipProps, tooltipHasDefaultBehavior, favoriteButtonProps } = _a, props = __rest(_a, ["children", "className", "isSortedBy", "onSort", "sortDirection", "type", "tooltip", "tooltipProps", "tooltipHasDefaultBehavior", "favoriteButtonProps"]);
|
|
970
|
-
let SortedByIcon;
|
|
971
|
-
const [focused, setFocused] = useState(false);
|
|
972
|
-
if (isSortedBy) {
|
|
973
|
-
SortedByIcon = sortDirection === SortByDirection.asc ? LongArrowAltUpIcon : LongArrowAltDownIcon;
|
|
974
|
-
}
|
|
975
|
-
else {
|
|
976
|
-
SortedByIcon = ArrowsAltVIcon;
|
|
977
|
-
}
|
|
978
|
-
if (favoriteButtonProps) {
|
|
979
|
-
return (jsxs(ActionList, { isIconList: true, children: [jsx(ActionListItem, { children: jsx(Button, Object.assign({ variant: "plain", icon: jsx(StarIcon, {}) }, favoriteButtonProps)) }), jsx(ActionListItem, { children: jsx(Button, Object.assign({ variant: "plain", icon: jsx("span", { className: css(styles$1.tableSortIndicator), children: jsx(SortedByIcon, {}) }), onClick: (event) => onSort && onSort(event) }, props)) })] }));
|
|
980
|
-
}
|
|
981
|
-
return (jsx("button", Object.assign({}, props, { type: type, className: css(className, styles$1.tableButton), onClick: (event) => onSort && onSort(event), onFocus: () => setFocused(true), onBlur: () => setFocused(false), children: jsxs("div", { className: css(className, styles$1.tableButtonContent), children: [jsx(TableText, { tooltip: tooltip, tooltipProps: tooltipProps, tooltipHasDefaultBehavior: tooltipHasDefaultBehavior, focused: focused, children: children }), jsx("span", { className: css(styles$1.tableSortIndicator), children: jsx(SortedByIcon, {}) })] }) })));
|
|
982
|
-
};
|
|
983
|
-
SortColumn.displayName = 'SortColumn';
|
|
984
|
-
|
|
985
|
-
const sortableFavorites = (sort) => () => {
|
|
986
|
-
var _a;
|
|
987
|
-
return sortable(jsx(StarIcon, {}), {
|
|
988
|
-
columnIndex: sort.columnIndex,
|
|
989
|
-
className: styles$1.tableFavorite,
|
|
990
|
-
ariaLabel: (_a = sort.ariaLabel) !== null && _a !== void 0 ? _a : 'Sort favorites',
|
|
991
|
-
column: {
|
|
992
|
-
extraParams: {
|
|
993
|
-
sortBy: sort.sortBy,
|
|
994
|
-
onSort: sort.onSort,
|
|
995
|
-
favoriteButtonProps: sort.favoriteButtonProps
|
|
996
|
-
}
|
|
997
|
-
},
|
|
998
|
-
tooltip: sort.tooltip,
|
|
999
|
-
tooltipProps: sort.tooltipProps,
|
|
1000
|
-
tooltipHasDefaultBehavior: true
|
|
1001
|
-
});
|
|
1002
|
-
};
|
|
1003
|
-
const sortable = (label, { columnIndex, column, property, className, ariaLabel, tooltip, tooltipProps, tooltipHasDefaultBehavior }) => {
|
|
1004
|
-
const { extraParams: { sortBy, onSort, favoriteButtonProps } } = column;
|
|
1005
|
-
const extraData = {
|
|
1006
|
-
columnIndex,
|
|
1007
|
-
column,
|
|
1008
|
-
property
|
|
1009
|
-
};
|
|
1010
|
-
const isSortedBy = sortBy && columnIndex === sortBy.index;
|
|
1011
|
-
/**
|
|
1012
|
-
* @param {React.MouseEvent} event - React mouse event
|
|
1013
|
-
*/
|
|
1014
|
-
function sortClicked(event) {
|
|
1015
|
-
let reversedDirection;
|
|
1016
|
-
if (!isSortedBy) {
|
|
1017
|
-
reversedDirection = sortBy.defaultDirection ? sortBy.defaultDirection : SortByDirection.asc;
|
|
1018
|
-
}
|
|
1019
|
-
else {
|
|
1020
|
-
reversedDirection = sortBy.direction === SortByDirection.asc ? SortByDirection.desc : SortByDirection.asc;
|
|
1021
|
-
}
|
|
1022
|
-
// tslint:disable-next-line:no-unused-expression
|
|
1023
|
-
onSort && onSort(event, columnIndex, reversedDirection, extraData);
|
|
1024
|
-
}
|
|
1025
|
-
return Object.assign(Object.assign({ className: css(styles$1.tableSort, isSortedBy && styles$1.modifiers.selected, className) }, (isSortedBy && { 'aria-sort': `${sortBy.direction}ending` })), { children: (jsx(SortColumn, { isSortedBy: isSortedBy, sortDirection: isSortedBy ? sortBy.direction : '', onSort: sortClicked, "aria-label": ariaLabel, tooltip: tooltip, tooltipProps: tooltipProps, tooltipHasDefaultBehavior: tooltipHasDefaultBehavior, favoriteButtonProps: favoriteButtonProps, children: label })) });
|
|
1026
|
-
};
|
|
1027
|
-
|
|
1028
|
-
const resolveOrDefault = (resolver, defaultValue, rowData, extraData) => (defaultValue);
|
|
1029
|
-
const cellActions = (actions, actionResolver, areActionsDisabled) => (label, { rowData, column, rowIndex, columnIndex, column: { extraParams: { actionsToggle, actionsPopperProps } }, property }) => {
|
|
1030
|
-
const extraData = {
|
|
1031
|
-
rowIndex,
|
|
1032
|
-
columnIndex,
|
|
1033
|
-
column,
|
|
1034
|
-
property
|
|
1035
|
-
};
|
|
1036
|
-
const resolvedActions = resolveOrDefault(actionResolver, actions);
|
|
1037
|
-
const resolvedIsDisabled = resolveOrDefault(areActionsDisabled, rowData && rowData.disableActions);
|
|
1038
|
-
const renderProps = resolvedActions && resolvedActions.length > 0
|
|
1039
|
-
? {
|
|
1040
|
-
children: (jsx(ActionsColumn, { items: resolvedActions, isDisabled: resolvedIsDisabled, rowData: rowData, extraData: extraData, actionsToggle: actionsToggle, popperProps: actionsPopperProps, children: label }))
|
|
1041
|
-
}
|
|
1042
|
-
: {};
|
|
1043
|
-
return Object.assign({ className: css(styles$1.tableAction), style: { paddingRight: 0 }, isVisible: true }, renderProps);
|
|
1044
|
-
};
|
|
1045
|
-
|
|
1046
|
-
const camelize = (s) => s.toUpperCase().replace('-', '').replace('_', '');
|
|
1047
|
-
const toCamel = (s) => s.replace(/([-_][a-z])/gi, camelize);
|
|
1048
|
-
/**
|
|
1049
|
-
* @param {string} input - String to capitalize
|
|
1050
|
-
*/
|
|
1051
|
-
function capitalize(input) {
|
|
1052
|
-
return input[0].toUpperCase() + input.substring(1);
|
|
1053
|
-
}
|
|
1054
|
-
|
|
1055
|
-
const cellWidth = (width) => () => ({
|
|
1056
|
-
className: css(styles$1.modifiers[typeof width === 'number' ? `width_${width}` : `width${capitalize(width)}`])
|
|
1057
|
-
});
|
|
1058
|
-
|
|
1059
|
-
const collapsible = (value, { rowIndex, columnIndex, rowData, column, property }) => {
|
|
1060
|
-
const { extraParams: { onCollapse, rowLabeledBy = 'simple-node', expandId = 'expand-toggle', allRowsExpanded, collapseAllAriaLabel } } = column;
|
|
1061
|
-
const extraData = {
|
|
1062
|
-
rowIndex,
|
|
1063
|
-
columnIndex,
|
|
1064
|
-
column,
|
|
1065
|
-
property
|
|
1066
|
-
};
|
|
1067
|
-
const rowId = rowIndex !== undefined ? rowIndex : -1;
|
|
1068
|
-
const customProps = Object.assign({}, (rowId !== -1
|
|
1069
|
-
? {
|
|
1070
|
-
isOpen: rowData === null || rowData === void 0 ? void 0 : rowData.isOpen,
|
|
1071
|
-
'aria-labelledby': `${rowLabeledBy}${rowId} ${expandId}${rowId}`
|
|
1072
|
-
}
|
|
1073
|
-
: {
|
|
1074
|
-
isOpen: allRowsExpanded,
|
|
1075
|
-
'aria-label': collapseAllAriaLabel || 'Expand all rows'
|
|
1076
|
-
}));
|
|
1077
|
-
/**
|
|
1078
|
-
* @param {React.MouseEvent} event - Mouse event
|
|
1079
|
-
*/
|
|
1080
|
-
function onToggle(event) {
|
|
1081
|
-
const open = rowData ? !rowData.isOpen : !allRowsExpanded;
|
|
1082
|
-
// tslint:disable-next-line:no-unused-expression
|
|
1083
|
-
onCollapse && onCollapse(event, rowIndex, open, rowData, extraData);
|
|
1084
|
-
}
|
|
1085
|
-
return {
|
|
1086
|
-
className: ((rowData === null || rowData === void 0 ? void 0 : rowData.isOpen) !== undefined || rowId === -1) && css(styles$1.tableToggle),
|
|
1087
|
-
isVisible: !(rowData === null || rowData === void 0 ? void 0 : rowData.fullWidth),
|
|
1088
|
-
children: (jsx(CollapseColumn, Object.assign({ "aria-labelledby": `${rowLabeledBy}${rowId} ${expandId}${rowId}`, onToggle: onToggle, id: expandId + rowId }, customProps, { children: value })))
|
|
1089
|
-
};
|
|
1090
|
-
};
|
|
1091
|
-
|
|
1092
|
-
const compoundExpand = (value, { rowIndex, columnIndex, rowData, column, property }) => {
|
|
1093
|
-
if (!value) {
|
|
1094
|
-
return null;
|
|
1095
|
-
}
|
|
1096
|
-
const { title, props } = value;
|
|
1097
|
-
const { extraParams: { onExpand, expandId = 'expand-toggle' } } = column;
|
|
1098
|
-
const extraData = {
|
|
1099
|
-
rowIndex,
|
|
1100
|
-
columnIndex,
|
|
1101
|
-
column,
|
|
1102
|
-
property
|
|
1103
|
-
};
|
|
1104
|
-
/**
|
|
1105
|
-
* @param {React.MouseEvent} event - Mouse event
|
|
1106
|
-
*/
|
|
1107
|
-
function onToggle(event) {
|
|
1108
|
-
// tslint:disable-next-line:no-unused-expression
|
|
1109
|
-
onExpand && onExpand(event, rowIndex, columnIndex, props.isOpen, rowData, extraData);
|
|
1110
|
-
}
|
|
1111
|
-
return {
|
|
1112
|
-
className: css(styles$1.tableCompoundExpansionToggle, props.isOpen && styles$1.modifiers.expanded),
|
|
1113
|
-
children: props.isOpen !== undefined && (jsx("button", { type: "button", className: css(styles$1.tableButton), onClick: onToggle, "aria-expanded": props.isOpen, "aria-controls": props.ariaControls, id: `${expandId}-${rowIndex}-${columnIndex}`, children: jsx(TableText, { children: title }) }))
|
|
1114
|
-
};
|
|
1115
|
-
};
|
|
1116
|
-
|
|
1117
|
-
const visibilityModifiers = [
|
|
1118
|
-
'hidden',
|
|
1119
|
-
'hiddenOnSm',
|
|
1120
|
-
'hiddenOnMd',
|
|
1121
|
-
'hiddenOnLg',
|
|
1122
|
-
'hiddenOnXl',
|
|
1123
|
-
'hiddenOn_2xl',
|
|
1124
|
-
'visibleOnSm',
|
|
1125
|
-
'visibleOnMd',
|
|
1126
|
-
'visibleOnLg',
|
|
1127
|
-
'visibleOnXl',
|
|
1128
|
-
'visibleOn_2xl'
|
|
1129
|
-
];
|
|
1130
|
-
const Visibility = visibilityModifiers
|
|
1131
|
-
.filter((key) => styles$1.modifiers[key])
|
|
1132
|
-
.reduce((acc, curr) => {
|
|
1133
|
-
const key2 = curr.replace('_2xl', '2Xl');
|
|
1134
|
-
acc[key2] = styles$1.modifiers[curr];
|
|
1135
|
-
return acc;
|
|
1136
|
-
}, {});
|
|
1137
|
-
const classNames = (...classes) => () => ({
|
|
1138
|
-
className: css(...classes)
|
|
1139
|
-
});
|
|
1140
|
-
|
|
1141
|
-
const info = ({ tooltip, tooltipProps, popover, popoverProps, className, ariaLabel }) => {
|
|
1142
|
-
const infoObj = (value) => ({
|
|
1143
|
-
className: styles$1.modifiers.help,
|
|
1144
|
-
children: tooltip ? (jsx(HeaderCellInfoWrapper, { variant: "tooltip", info: tooltip, tooltipProps: tooltipProps, ariaLabel: ariaLabel, className: className, children: value })) : (jsx(HeaderCellInfoWrapper, { variant: "popover", info: popover, popoverProps: popoverProps, ariaLabel: ariaLabel, className: className, children: value }))
|
|
1145
|
-
});
|
|
1146
|
-
return infoObj;
|
|
1147
|
-
};
|
|
1148
|
-
|
|
1149
|
-
const FavoritesCell = (_a) => {
|
|
1150
|
-
var { className = '', onFavorite, isFavorited, rowIndex } = _a, props = __rest(_a, ["className", "onFavorite", "isFavorited", "rowIndex"]);
|
|
1151
|
-
const ariaProps = rowIndex === undefined
|
|
1152
|
-
? {}
|
|
1153
|
-
: {
|
|
1154
|
-
id: `favorites-button-${rowIndex}`,
|
|
1155
|
-
'aria-labelledby': `favorites-button-${rowIndex}`
|
|
1156
|
-
};
|
|
1157
|
-
return (jsx(Button, Object.assign({ variant: "plain", className: className, type: "button", "aria-label": isFavorited ? 'Starred' : 'Not starred', onClick: onFavorite }, ariaProps, props, { icon: jsx(StarIcon, {}) })));
|
|
1158
|
-
};
|
|
1159
|
-
FavoritesCell.displayName = 'FavoritesCell';
|
|
1160
|
-
|
|
1161
|
-
const favoritable = (value, { rowIndex, columnIndex, rowData, column, property }) => {
|
|
1162
|
-
const { extraParams: { onFavorite } } = column;
|
|
1163
|
-
const extraData = {
|
|
1164
|
-
rowIndex,
|
|
1165
|
-
columnIndex,
|
|
1166
|
-
column,
|
|
1167
|
-
property
|
|
1168
|
-
};
|
|
1169
|
-
// this is a child row which should not display the favorites icon
|
|
1170
|
-
if (rowData && rowData.hasOwnProperty('parent') && !rowData.fullWidth) {
|
|
1171
|
-
return {
|
|
1172
|
-
component: 'td',
|
|
1173
|
-
isVisible: true
|
|
1174
|
-
};
|
|
1175
|
-
}
|
|
1176
|
-
/**
|
|
1177
|
-
* @param {React.MouseEvent} event - Mouse event
|
|
1178
|
-
*/
|
|
1179
|
-
function favoritesClick(event) {
|
|
1180
|
-
// tslint:disable-next-line:no-unused-expression
|
|
1181
|
-
onFavorite && onFavorite(event, rowData && !rowData.favorited, rowIndex, rowData, extraData);
|
|
1182
|
-
}
|
|
1183
|
-
const additionalProps = rowData.favoritesProps || {};
|
|
1184
|
-
return {
|
|
1185
|
-
className: css(styles$1.tableFavorite, rowData && rowData.favorited && styles$1.modifiers.favorited),
|
|
1186
|
-
isVisible: !rowData || !rowData.fullWidth,
|
|
1187
|
-
children: (jsx(FavoritesCell, Object.assign({ rowIndex: rowIndex, onFavorite: favoritesClick, isFavorited: rowData && rowData.favorited }, additionalProps)))
|
|
1188
|
-
};
|
|
1189
|
-
};
|
|
1190
|
-
|
|
1191
|
-
const EllipsisHIconConfig = {
|
|
1192
|
-
name: 'EllipsisHIcon',
|
|
1193
|
-
height: 512,
|
|
1194
|
-
width: 512,
|
|
1195
|
-
svgPath: 'M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z',
|
|
1196
|
-
yOffset: 0,
|
|
1197
|
-
xOffset: 0,
|
|
1198
|
-
};
|
|
1199
|
-
|
|
1200
|
-
const EllipsisHIcon = createIcon(EllipsisHIconConfig);
|
|
1201
|
-
|
|
1202
|
-
const treeRow = (onCollapse, onCheckChange, onToggleRowDetails) => (value, { rowIndex, rowData }) => {
|
|
1203
|
-
const { isExpanded, isDetailsExpanded, 'aria-level': level, 'aria-setsize': setsize, toggleAriaLabel, checkAriaLabel, showDetailsAriaLabel, isChecked, checkboxId, icon } = rowData.props;
|
|
1204
|
-
const content = value.title || value;
|
|
1205
|
-
const text = (jsxs("div", { className: css(treeViewStyles.tableTreeViewText), children: [icon && (jsx("span", { className: css(treeViewStyles.tableTreeViewIcon), children: icon }, "tree-view-text-icon")), jsx("span", { className: styles$1.tableText, children: content }, "table-text")] }, "tree-view-text"));
|
|
1206
|
-
const onChange = (isChecked, event) => {
|
|
1207
|
-
onCheckChange(event, isChecked, rowIndex, content, rowData);
|
|
1208
|
-
};
|
|
1209
|
-
return {
|
|
1210
|
-
component: 'th',
|
|
1211
|
-
className: treeViewStyles.tableTreeViewTitleCell,
|
|
1212
|
-
children: level !== undefined ? (jsxs("div", { className: css(treeViewStyles.tableTreeViewMain), children: [setsize > 0 && (jsx("span", { className: css(treeViewStyles.tableToggle), children: jsx(Button, { variant: "plain", onClick: (event) => onCollapse && onCollapse(event, rowIndex, content, rowData), className: css(isExpanded && styles$1.modifiers.expanded), "aria-expanded": isExpanded, "aria-label": toggleAriaLabel || `${isExpanded ? 'Collapse' : 'Expand'} row ${rowIndex}`, icon: jsx("div", { className: css(treeViewStyles.tableToggleIcon), children: jsx(AngleDownIcon, {}) }) }) }, "table-toggle")), !!onCheckChange && (jsx("span", { className: css(treeViewStyles.tableCheck), children: jsx("label", { htmlFor: checkboxId || `checkbox_${rowIndex}`, children: jsx(Checkbox, { id: checkboxId || `checkbox_${rowIndex}`, "aria-label": checkAriaLabel || `Row ${rowIndex} checkbox`, isChecked: isChecked, onChange: (event, checked) => onChange(checked, event) }) }) }, "table-check")), text, !!onToggleRowDetails && (jsx("span", { className: css(treeViewStyles.tableTreeViewDetailsToggle), children: jsx(Button, { variant: "plain", "aria-expanded": isDetailsExpanded, "aria-label": showDetailsAriaLabel || 'Show row details', onClick: (event) => onToggleRowDetails && onToggleRowDetails(event, rowIndex, content, rowData), icon: jsx("span", { className: `${styles$1.table}__details-toggle-icon`, children: jsx(EllipsisHIcon, {}) }) }) }, "view-details-toggle"))] })) : (text)
|
|
1213
|
-
};
|
|
1214
|
-
};
|
|
1215
|
-
|
|
1216
|
-
var TableGridBreakpoint;
|
|
1217
|
-
(function (TableGridBreakpoint) {
|
|
1218
|
-
TableGridBreakpoint["none"] = "";
|
|
1219
|
-
TableGridBreakpoint["grid"] = "grid";
|
|
1220
|
-
TableGridBreakpoint["gridMd"] = "grid-md";
|
|
1221
|
-
TableGridBreakpoint["gridLg"] = "grid-lg";
|
|
1222
|
-
TableGridBreakpoint["gridXl"] = "grid-xl";
|
|
1223
|
-
TableGridBreakpoint["grid2xl"] = "grid-2xl";
|
|
1224
|
-
})(TableGridBreakpoint || (TableGridBreakpoint = {}));
|
|
1225
|
-
var TableVariant;
|
|
1226
|
-
(function (TableVariant) {
|
|
1227
|
-
TableVariant["compact"] = "compact";
|
|
1228
|
-
})(TableVariant || (TableVariant = {}));
|
|
1229
|
-
|
|
1230
|
-
const TableContext = createContext({
|
|
1231
|
-
registerSelectableRow: () => { }
|
|
1232
|
-
});
|
|
1233
|
-
const TableBase = (_a) => {
|
|
1234
|
-
var _b, _c;
|
|
1235
|
-
var { children, className, variant, borders = true, isStickyHeader = false, gridBreakPoint = TableGridBreakpoint.gridMd, 'aria-label': ariaLabel, role = 'grid', innerRef, ouiaId, ouiaSafe = true, isTreeTable = false, isNested = false, isStriped = false, isExpandable = false, hasNoInset = false,
|
|
1236
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1237
|
-
nestedHeaderColumnSpans, selectableRowCaptionText } = _a, props = __rest(_a, ["children", "className", "variant", "borders", "isStickyHeader", "gridBreakPoint", 'aria-label', "role", "innerRef", "ouiaId", "ouiaSafe", "isTreeTable", "isNested", "isStriped", "isExpandable", "hasNoInset", "nestedHeaderColumnSpans", "selectableRowCaptionText"]);
|
|
1238
|
-
const ref = useRef(null);
|
|
1239
|
-
const tableRef = innerRef || ref;
|
|
1240
|
-
const [hasSelectableRows, setHasSelectableRows] = useState(false);
|
|
1241
|
-
const [tableCaption, setTableCaption] = useState();
|
|
1242
|
-
useEffect(() => {
|
|
1243
|
-
document.addEventListener('keydown', handleKeys);
|
|
1244
|
-
// sets up roving tab-index to tree tables only
|
|
1245
|
-
if (tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) {
|
|
1246
|
-
const tbody = tableRef.current.querySelector('tbody');
|
|
1247
|
-
tbody && setTabIndex(Array.from(tbody.querySelectorAll('button, a, input')));
|
|
1248
|
-
}
|
|
1249
|
-
return function cleanup() {
|
|
1250
|
-
document.removeEventListener('keydown', handleKeys);
|
|
1251
|
-
};
|
|
1252
|
-
}, [tableRef, tableRef.current]);
|
|
1253
|
-
useEffect(() => {
|
|
1254
|
-
if (selectableRowCaptionText) {
|
|
1255
|
-
setTableCaption(jsxs("caption", { children: [selectableRowCaptionText, jsx("div", { className: "pf-v6-screen-reader", children: "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter." })] }));
|
|
1256
|
-
}
|
|
1257
|
-
else {
|
|
1258
|
-
setTableCaption(jsx("caption", { className: "pf-v6-screen-reader", children: "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter." }));
|
|
1259
|
-
}
|
|
1260
|
-
}, [selectableRowCaptionText]);
|
|
1261
|
-
const ouiaProps = useOUIAProps('Table', ouiaId, ouiaSafe);
|
|
1262
|
-
const grid = (_b = stylesGrid.modifiers) === null || _b === void 0 ? void 0 : _b[toCamel(gridBreakPoint || '').replace(/-?2xl/, '_2xl')];
|
|
1263
|
-
const breakPointPrefix = `treeView${gridBreakPoint.charAt(0).toUpperCase() + gridBreakPoint.slice(1)}`;
|
|
1264
|
-
const treeGrid = (_c = treeViewStyles.modifiers) === null || _c === void 0 ? void 0 : _c[toCamel(breakPointPrefix || '').replace(/-?2xl/, '_2xl')];
|
|
1265
|
-
const handleKeys = (event) => {
|
|
1266
|
-
if (isNested ||
|
|
1267
|
-
!(tableRef && tableRef.current && tableRef.current.classList.contains(treeViewStyles.modifiers.treeView)) || // implements roving tab-index to tree tables only
|
|
1268
|
-
(tableRef && tableRef.current !== event.target.closest(`.${styles$1.table}:not(.pf-m-nested)`))) {
|
|
1269
|
-
return;
|
|
1270
|
-
}
|
|
1271
|
-
const activeElement = document.activeElement;
|
|
1272
|
-
const key = event.key;
|
|
1273
|
-
const rows = Array.from(tableRef.current.querySelectorAll('tbody tr')).filter((el) => !el.classList.contains('pf-m-disabled') && !el.hidden);
|
|
1274
|
-
if (key === KeyTypes.Space || key === KeyTypes.Enter) {
|
|
1275
|
-
activeElement.click();
|
|
1276
|
-
event.preventDefault();
|
|
1277
|
-
}
|
|
1278
|
-
const getFocusableElement = (element) => element.querySelectorAll('button:not(:disabled), input:not(:disabled), a:not(:disabled)')[0];
|
|
1279
|
-
handleArrows(event, rows, (element) => element === activeElement.closest('tr'), getFocusableElement, ['button', 'input', 'a'], undefined, false, true, false);
|
|
1280
|
-
};
|
|
1281
|
-
const registerSelectableRow = () => {
|
|
1282
|
-
!hasSelectableRows && setHasSelectableRows(true);
|
|
1283
|
-
};
|
|
1284
|
-
return (jsx(TableContext.Provider, { value: { registerSelectableRow }, children: jsxs("table", Object.assign({ "aria-label": ariaLabel, role: role, className: css(className, styles$1.table, isTreeTable ? treeGrid : grid, styles$1.modifiers[variant], !borders && styles$1.modifiers.noBorderRows, isStickyHeader && styles$1.modifiers.stickyHeader, isTreeTable && treeViewStyles.modifiers.treeView, isStriped && styles$1.modifiers.striped, isExpandable && styles$1.modifiers.expandable, hasNoInset && treeViewStyles.modifiers.noInset, isNested && 'pf-m-nested'), ref: tableRef }, (isTreeTable && { role: 'treegrid' }), ouiaProps, props, { children: [hasSelectableRows && tableCaption, children] })) }));
|
|
1285
|
-
};
|
|
1286
|
-
const Table = forwardRef((props, ref) => (jsx(TableBase, Object.assign({}, props, { innerRef: ref }))));
|
|
1287
|
-
Table.displayName = 'Table';
|
|
1288
|
-
|
|
1289
|
-
const TrBase = (_a) => {
|
|
1290
|
-
var { children, className, isExpanded, isEditable, isHidden = false, isClickable = false, isRowSelected = false, isStriped = false, isBorderRow = false, isControlRow = false, innerRef, ouiaId, ouiaSafe = true, resetOffset = false, onRowClick, isSelectable, 'aria-label': passedAriaLabel } = _a, props = __rest(_a, ["children", "className", "isExpanded", "isEditable", "isHidden", "isClickable", "isRowSelected", "isStriped", "isBorderRow", "isControlRow", "innerRef", "ouiaId", "ouiaSafe", "resetOffset", "onRowClick", "isSelectable", 'aria-label']);
|
|
1291
|
-
const ouiaProps = useOUIAProps('TableRow', ouiaId, ouiaSafe);
|
|
1292
|
-
const [computedAriaLabel, setComputedAriaLabel] = useState('');
|
|
1293
|
-
let onKeyDown = null;
|
|
1294
|
-
if (onRowClick) {
|
|
1295
|
-
onKeyDown = (e) => {
|
|
1296
|
-
if (e.key === 'Enter' || e.key === ' ') {
|
|
1297
|
-
onRowClick(e);
|
|
1298
|
-
e.preventDefault();
|
|
1299
|
-
}
|
|
1300
|
-
};
|
|
1301
|
-
}
|
|
1302
|
-
const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded);
|
|
1303
|
-
const { registerSelectableRow } = useContext(TableContext);
|
|
1304
|
-
useEffect(() => {
|
|
1305
|
-
if (isSelectable && !rowIsHidden) {
|
|
1306
|
-
setComputedAriaLabel(`${isRowSelected ? 'Row selected' : ''}`);
|
|
1307
|
-
registerSelectableRow();
|
|
1308
|
-
}
|
|
1309
|
-
else {
|
|
1310
|
-
setComputedAriaLabel(undefined);
|
|
1311
|
-
}
|
|
1312
|
-
}, [isRowSelected, isSelectable, registerSelectableRow, rowIsHidden]);
|
|
1313
|
-
const ariaLabel = passedAriaLabel || computedAriaLabel;
|
|
1314
|
-
return (jsx(Fragment$1, { children: jsx("tr", Object.assign({ className: css(styles$1.tableTr, className, isExpanded !== undefined && styles$1.tableExpandableRow, isExpanded && styles$1.modifiers.expanded, isEditable && inlineStyles.modifiers.inlineEditable, isClickable && styles$1.modifiers.clickable, isRowSelected && styles$1.modifiers.selected, isStriped && styles$1.modifiers.striped, isBorderRow && styles$1.modifiers.borderRow, isControlRow && styles$1.tableControlRow, resetOffset && styles$1.modifiers.firstCellOffsetReset), hidden: rowIsHidden }, (isClickable && { tabIndex: 0 }), { "aria-label": ariaLabel, ref: innerRef }, (onRowClick && { onClick: onRowClick, onKeyDown }), ouiaProps, props, { children: children })) }));
|
|
1315
|
-
};
|
|
1316
|
-
const Tr = forwardRef((props, ref) => (jsx(TrBase, Object.assign({}, props, { innerRef: ref }))));
|
|
1317
|
-
Tr.displayName = 'Tr';
|
|
1318
|
-
|
|
1319
|
-
const TheadBase = (_a) => {
|
|
1320
|
-
var { children, className, noWrap = false, innerRef, hasNestedHeader } = _a, props = __rest(_a, ["children", "className", "noWrap", "innerRef", "hasNestedHeader"]);
|
|
1321
|
-
return (jsx("thead", Object.assign({ className: css(styles$1.tableThead, className, noWrap && styles$1.modifiers.nowrap, hasNestedHeader && styles$1.modifiers.nestedColumnHeader), ref: innerRef }, props, { children: children })));
|
|
1322
|
-
};
|
|
1323
|
-
const Thead = forwardRef((props, ref) => (jsx(TheadBase, Object.assign({}, props, { innerRef: ref }))));
|
|
1324
|
-
Thead.displayName = 'Thead';
|
|
1325
|
-
|
|
1326
|
-
const TbodyBase = (_a) => {
|
|
1327
|
-
var { children, className, isExpanded, innerRef, isEvenStriped = false, isOddStriped = false } = _a, props = __rest(_a, ["children", "className", "isExpanded", "innerRef", "isEvenStriped", "isOddStriped"]);
|
|
1328
|
-
return (jsx("tbody", Object.assign({ role: "rowgroup", className: css(styles$1.tableTbody, className, isExpanded && styles$1.modifiers.expanded, isOddStriped && styles$1.modifiers.striped, isEvenStriped && styles$1.modifiers.stripedEven), ref: innerRef }, props, { children: children })));
|
|
1329
|
-
};
|
|
1330
|
-
const Tbody = forwardRef((props, ref) => (jsx(TbodyBase, Object.assign({}, props, { innerRef: ref }))));
|
|
1331
|
-
Tbody.displayName = 'Tbody';
|
|
1332
|
-
|
|
1333
|
-
const styles = {
|
|
1334
|
-
"modifiers": {
|
|
1335
|
-
"borderRight": "pf-m-border-right",
|
|
1336
|
-
"borderLeft": "pf-m-border-left"},
|
|
1337
|
-
"tableStickyCell": "pf-v6-c-table__sticky-cell"
|
|
1338
|
-
};
|
|
1339
|
-
|
|
1340
|
-
const accessibleStyles = {
|
|
1341
|
-
"screenReader": "pf-v6-u-screen-reader"};
|
|
1342
|
-
|
|
1343
|
-
/**
|
|
1344
|
-
* merge-props.js
|
|
1345
|
-
*
|
|
1346
|
-
* Forked from reactabular-table version 8.14.0
|
|
1347
|
-
* https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src
|
|
1348
|
-
*/
|
|
1349
|
-
/**
|
|
1350
|
-
* @param {any} props - Props
|
|
1351
|
-
*/
|
|
1352
|
-
function mergeProps(...props) {
|
|
1353
|
-
const firstProps = props[0];
|
|
1354
|
-
const restProps = props.slice(1);
|
|
1355
|
-
if (!restProps.length) {
|
|
1356
|
-
return mergeWith({}, firstProps);
|
|
1357
|
-
}
|
|
1358
|
-
// Avoid mutating the first prop collection
|
|
1359
|
-
return mergeWith(mergeWith({}, firstProps), ...restProps, (a, b, key) => {
|
|
1360
|
-
if (key === 'children') {
|
|
1361
|
-
if (a && b) {
|
|
1362
|
-
// compose the two
|
|
1363
|
-
return cloneElement(a, {
|
|
1364
|
-
children: b
|
|
1365
|
-
});
|
|
1366
|
-
}
|
|
1367
|
-
// Children have to be merged in reverse order for Reactabular
|
|
1368
|
-
// logic to work.
|
|
1369
|
-
return Object.assign(Object.assign({}, b), a);
|
|
1370
|
-
}
|
|
1371
|
-
if (key === 'className') {
|
|
1372
|
-
// Process class names through classNames to merge properly
|
|
1373
|
-
// as a string.
|
|
1374
|
-
return css(a, b);
|
|
1375
|
-
}
|
|
1376
|
-
return undefined;
|
|
1377
|
-
});
|
|
1378
|
-
}
|
|
1379
|
-
|
|
1380
|
-
const c_table__sticky_cell_MinWidth = {
|
|
1381
|
-
"name": "--pf-v6-c-table__sticky-cell--MinWidth"};
|
|
1382
|
-
|
|
1383
|
-
const c_table__sticky_cell_InsetInlineStart = {
|
|
1384
|
-
"name": "--pf-v6-c-table__sticky-cell--InsetInlineStart"};
|
|
1385
|
-
|
|
1386
|
-
const c_table__sticky_cell_InsetInlineEnd = {
|
|
1387
|
-
"name": "--pf-v6-c-table__sticky-cell--InsetInlineEnd"};
|
|
1388
|
-
|
|
1389
|
-
const ThBase = (_a) => {
|
|
1390
|
-
var _b;
|
|
1391
|
-
var { children, className, component = 'th', dataLabel, scope = 'col', textCenter = false, sort = null, modifier, select = null, expand: collapse = null, tooltip = '', tooltipProps, onMouseEnter: onMouseEnterProp = () => { }, width, visibility, innerRef, info: infoProps, isStickyColumn = false, hasRightBorder = false, hasLeftBorder = false, stickyMinWidth = '120px', stickyLeftOffset, stickyRightOffset, isSubheader = false, screenReaderText, 'aria-label': ariaLabel } = _a, props = __rest(_a, ["children", "className", "component", "dataLabel", "scope", "textCenter", "sort", "modifier", "select", "expand", "tooltip", "tooltipProps", "onMouseEnter", "width", "visibility", "innerRef", "info", "isStickyColumn", "hasRightBorder", "hasLeftBorder", "stickyMinWidth", "stickyLeftOffset", "stickyRightOffset", "isSubheader", "screenReaderText", 'aria-label']);
|
|
1392
|
-
if (!children && !screenReaderText && !ariaLabel) {
|
|
1393
|
-
// eslint-disable-next-line no-console
|
|
1394
|
-
console.warn('Th: Table headers must have an accessible name. If the Th is intended to be visually empty, pass in screenReaderText. If the Th contains only non-text, interactive content such as a checkbox or expand toggle, pass in an aria-label.');
|
|
1395
|
-
}
|
|
1396
|
-
const [showTooltip, setShowTooltip] = useState(false);
|
|
1397
|
-
const [truncated, setTruncated] = useState(false);
|
|
1398
|
-
const cellRef = innerRef ? innerRef : createRef();
|
|
1399
|
-
const onMouseEnter = (event) => {
|
|
1400
|
-
if (event.target.offsetWidth < event.target.scrollWidth) {
|
|
1401
|
-
!showTooltip && setShowTooltip(true);
|
|
1402
|
-
}
|
|
1403
|
-
else {
|
|
1404
|
-
showTooltip && setShowTooltip(false);
|
|
1405
|
-
}
|
|
1406
|
-
onMouseEnterProp(event);
|
|
1407
|
-
};
|
|
1408
|
-
let sortParams = null;
|
|
1409
|
-
if (sort) {
|
|
1410
|
-
if (sort.isFavorites) {
|
|
1411
|
-
sortParams = sortableFavorites({
|
|
1412
|
-
onSort: sort.onSort,
|
|
1413
|
-
columnIndex: sort.columnIndex,
|
|
1414
|
-
sortBy: sort.sortBy,
|
|
1415
|
-
tooltip: tooltip,
|
|
1416
|
-
tooltipProps,
|
|
1417
|
-
ariaLabel: sort['aria-label'],
|
|
1418
|
-
favoriteButtonProps: sort.favoriteButtonProps
|
|
1419
|
-
})();
|
|
1420
|
-
}
|
|
1421
|
-
else {
|
|
1422
|
-
sortParams = sortable(children, {
|
|
1423
|
-
columnIndex: sort.columnIndex,
|
|
1424
|
-
column: {
|
|
1425
|
-
extraParams: {
|
|
1426
|
-
sortBy: sort.sortBy,
|
|
1427
|
-
onSort: sort === null || sort === void 0 ? void 0 : sort.onSort
|
|
1428
|
-
}
|
|
1429
|
-
},
|
|
1430
|
-
tooltip: tooltip,
|
|
1431
|
-
tooltipProps
|
|
1432
|
-
});
|
|
1433
|
-
}
|
|
1434
|
-
}
|
|
1435
|
-
const selectParams = select
|
|
1436
|
-
? selectable(children, {
|
|
1437
|
-
rowData: {
|
|
1438
|
-
selected: select.isSelected,
|
|
1439
|
-
disableSelection: select === null || select === void 0 ? void 0 : select.isDisabled,
|
|
1440
|
-
props: select === null || select === void 0 ? void 0 : select.props
|
|
1441
|
-
},
|
|
1442
|
-
column: {
|
|
1443
|
-
extraParams: {
|
|
1444
|
-
onSelect: select === null || select === void 0 ? void 0 : select.onSelect,
|
|
1445
|
-
selectVariant: 'checkbox',
|
|
1446
|
-
allRowsSelected: select.isSelected,
|
|
1447
|
-
isHeaderSelectDisabled: !!select.isHeaderSelectDisabled
|
|
1448
|
-
}
|
|
1449
|
-
},
|
|
1450
|
-
tooltip: tooltip})
|
|
1451
|
-
: null;
|
|
1452
|
-
const collapseParams = collapse
|
|
1453
|
-
? collapsible(children, {
|
|
1454
|
-
column: {
|
|
1455
|
-
extraParams: {
|
|
1456
|
-
onCollapse: collapse === null || collapse === void 0 ? void 0 : collapse.onToggle,
|
|
1457
|
-
allRowsExpanded: !collapse.areAllExpanded,
|
|
1458
|
-
collapseAllAriaLabel: ''
|
|
1459
|
-
}
|
|
1460
|
-
}
|
|
1461
|
-
})
|
|
1462
|
-
: null;
|
|
1463
|
-
const widthParams = width ? cellWidth(width)() : null;
|
|
1464
|
-
const visibilityParams = visibility
|
|
1465
|
-
? classNames(...visibility.map((vis) => Visibility[vis]))()
|
|
1466
|
-
: null;
|
|
1467
|
-
let transformedChildren = (sortParams === null || sortParams === void 0 ? void 0 : sortParams.children) || (selectParams === null || selectParams === void 0 ? void 0 : selectParams.children) || (collapseParams === null || collapseParams === void 0 ? void 0 : collapseParams.children) || children;
|
|
1468
|
-
// info can wrap other transformedChildren
|
|
1469
|
-
let infoParams = null;
|
|
1470
|
-
if (infoProps) {
|
|
1471
|
-
infoParams = info(infoProps)(transformedChildren);
|
|
1472
|
-
transformedChildren = infoParams.children;
|
|
1473
|
-
}
|
|
1474
|
-
const merged = mergeProps(sortParams, selectParams, collapseParams, widthParams, visibilityParams, infoParams);
|
|
1475
|
-
const {
|
|
1476
|
-
// ignore the merged children since we transform them ourselves so we can wrap it with info
|
|
1477
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1478
|
-
children: mergedChildren = null,
|
|
1479
|
-
// selectable adds this but we don't want it
|
|
1480
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1481
|
-
isVisible = null, className: mergedClassName = '', component: MergedComponent = component } = merged, mergedProps = __rest(merged, ["children", "isVisible", "className", "component"]);
|
|
1482
|
-
useEffect(() => {
|
|
1483
|
-
setTruncated(cellRef.current.offsetWidth <
|
|
1484
|
-
cellRef.current.scrollWidth);
|
|
1485
|
-
}, [cellRef]);
|
|
1486
|
-
const cell = (jsx(MergedComponent, Object.assign({ tabIndex: sort || select || !truncated ? -1 : 0, onFocus: tooltip !== null ? onMouseEnter : onMouseEnterProp, onBlur: () => setShowTooltip(false), "data-label": dataLabel, onMouseEnter: tooltip !== null ? onMouseEnter : onMouseEnterProp, scope: component === 'th' ? scope : null, ref: cellRef, "aria-label": ariaLabel, className: css(styles$1.tableTh, className, textCenter && styles$1.modifiers.center, isSubheader && styles$1.tableSubhead, isStickyColumn && styles.tableStickyCell, hasRightBorder && styles.modifiers.borderRight, hasLeftBorder && styles.modifiers.borderLeft, modifier && styles$1.modifiers[modifier], ((_b = sort === null || sort === void 0 ? void 0 : sort.favoriteButtonProps) === null || _b === void 0 ? void 0 : _b.favorited) && styles$1.modifiers.favorited, mergedClassName) }, mergedProps, props, (isStickyColumn && {
|
|
1487
|
-
style: Object.assign({ [c_table__sticky_cell_MinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined, [c_table__sticky_cell_InsetInlineStart.name]: stickyLeftOffset ? stickyLeftOffset : 0, [c_table__sticky_cell_InsetInlineEnd.name]: stickyRightOffset ? stickyRightOffset : 0 }, props.style)
|
|
1488
|
-
}), { children: transformedChildren ||
|
|
1489
|
-
(screenReaderText && jsx("span", { className: accessibleStyles.screenReader, children: screenReaderText })) })));
|
|
1490
|
-
const canMakeDefaultTooltip = tooltip === '' ? typeof transformedChildren === 'string' : true;
|
|
1491
|
-
const childControlsTooltip = sortParams || selectParams;
|
|
1492
|
-
return tooltip !== null && canMakeDefaultTooltip && !childControlsTooltip && showTooltip ? (jsxs(Fragment$1, { children: [cell, jsx(Tooltip, Object.assign({ triggerRef: cellRef, content: tooltip || (tooltip === '' && children), isVisible: true }, tooltipProps))] })) : (cell);
|
|
1493
|
-
};
|
|
1494
|
-
const Th = forwardRef((props, ref) => (jsx(ThBase, Object.assign({}, props, { innerRef: ref }))));
|
|
1495
|
-
Th.displayName = 'Th';
|
|
1496
|
-
|
|
1497
|
-
const draggable = (value, { rowData }) => {
|
|
1498
|
-
const { id } = rowData;
|
|
1499
|
-
return {
|
|
1500
|
-
className: '',
|
|
1501
|
-
children: jsx(DraggableCell, { id: id })
|
|
1502
|
-
};
|
|
1503
|
-
};
|
|
1504
|
-
|
|
1505
|
-
const TdBase = (_a) => {
|
|
1506
|
-
var { children, className, isActionCell = false, component = 'td', dataLabel, textCenter = false, modifier, select = null, actions = null, expand = null, treeRow: treeRowProp = null, compoundExpand: compoundExpandProp = null, noPadding, width, visibility, innerRef, favorites = null, draggableRow: draggableRowProp = null, tooltip = '', onMouseEnter: onMouseEnterProp = () => { }, isStickyColumn = false, hasRightBorder = false, hasLeftBorder = false, stickyMinWidth = '120px', stickyLeftOffset, stickyRightOffset } = _a, props = __rest(_a, ["children", "className", "isActionCell", "component", "dataLabel", "textCenter", "modifier", "select", "actions", "expand", "treeRow", "compoundExpand", "noPadding", "width", "visibility", "innerRef", "favorites", "draggableRow", "tooltip", "onMouseEnter", "isStickyColumn", "hasRightBorder", "hasLeftBorder", "stickyMinWidth", "stickyLeftOffset", "stickyRightOffset"]);
|
|
1507
|
-
const [showTooltip, setShowTooltip] = useState(false);
|
|
1508
|
-
const [truncated, setTruncated] = useState(false);
|
|
1509
|
-
const cellRef = innerRef ? innerRef : createRef();
|
|
1510
|
-
const onMouseEnter = (event) => {
|
|
1511
|
-
if (event.target.offsetWidth < event.target.scrollWidth) {
|
|
1512
|
-
!showTooltip && setShowTooltip(true);
|
|
1513
|
-
}
|
|
1514
|
-
else {
|
|
1515
|
-
showTooltip && setShowTooltip(false);
|
|
1516
|
-
}
|
|
1517
|
-
onMouseEnterProp(event);
|
|
1518
|
-
};
|
|
1519
|
-
const selectParams = select
|
|
1520
|
-
? selectable(children, {
|
|
1521
|
-
rowIndex: select.rowIndex,
|
|
1522
|
-
rowData: {
|
|
1523
|
-
selected: select.isSelected,
|
|
1524
|
-
disableSelection: select === null || select === void 0 ? void 0 : select.isDisabled,
|
|
1525
|
-
props: select === null || select === void 0 ? void 0 : select.props
|
|
1526
|
-
},
|
|
1527
|
-
column: {
|
|
1528
|
-
extraParams: {
|
|
1529
|
-
onSelect: select === null || select === void 0 ? void 0 : select.onSelect,
|
|
1530
|
-
selectVariant: select.variant || 'checkbox'
|
|
1531
|
-
}
|
|
1532
|
-
}
|
|
1533
|
-
})
|
|
1534
|
-
: null;
|
|
1535
|
-
const favoriteParams = favorites
|
|
1536
|
-
? favoritable(null, {
|
|
1537
|
-
rowIndex: favorites === null || favorites === void 0 ? void 0 : favorites.rowIndex,
|
|
1538
|
-
rowData: {
|
|
1539
|
-
favorited: favorites.isFavorited,
|
|
1540
|
-
favoritesProps: favorites === null || favorites === void 0 ? void 0 : favorites.props
|
|
1541
|
-
},
|
|
1542
|
-
column: {
|
|
1543
|
-
extraParams: {
|
|
1544
|
-
onFavorite: favorites === null || favorites === void 0 ? void 0 : favorites.onFavorite
|
|
1545
|
-
}
|
|
1546
|
-
}
|
|
1547
|
-
})
|
|
1548
|
-
: null;
|
|
1549
|
-
const draggableParams = draggableRowProp !== null
|
|
1550
|
-
? draggable(null, {
|
|
1551
|
-
rowData: {
|
|
1552
|
-
id: draggableRowProp.id
|
|
1553
|
-
}
|
|
1554
|
-
})
|
|
1555
|
-
: null;
|
|
1556
|
-
const actionParamsFunc = actions ? cellActions(actions.items, null, null) : null;
|
|
1557
|
-
const actionParams = actionParamsFunc
|
|
1558
|
-
? actionParamsFunc(null, {
|
|
1559
|
-
rowIndex: actions === null || actions === void 0 ? void 0 : actions.rowIndex,
|
|
1560
|
-
rowData: {
|
|
1561
|
-
disableActions: actions === null || actions === void 0 ? void 0 : actions.isDisabled
|
|
1562
|
-
},
|
|
1563
|
-
column: {
|
|
1564
|
-
extraParams: {
|
|
1565
|
-
dropdownPosition: actions === null || actions === void 0 ? void 0 : actions.dropdownPosition,
|
|
1566
|
-
dropdownDirection: actions === null || actions === void 0 ? void 0 : actions.dropdownDirection,
|
|
1567
|
-
menuAppendTo: actions === null || actions === void 0 ? void 0 : actions.menuAppendTo,
|
|
1568
|
-
actionsToggle: actions === null || actions === void 0 ? void 0 : actions.actionsToggle
|
|
1569
|
-
}
|
|
1570
|
-
}
|
|
1571
|
-
})
|
|
1572
|
-
: null;
|
|
1573
|
-
const expandableParams = expand !== null
|
|
1574
|
-
? collapsible(null, {
|
|
1575
|
-
rowIndex: expand.rowIndex,
|
|
1576
|
-
columnIndex: expand === null || expand === void 0 ? void 0 : expand.columnIndex,
|
|
1577
|
-
rowData: {
|
|
1578
|
-
isOpen: expand.isExpanded
|
|
1579
|
-
},
|
|
1580
|
-
column: {
|
|
1581
|
-
extraParams: {
|
|
1582
|
-
onCollapse: expand === null || expand === void 0 ? void 0 : expand.onToggle,
|
|
1583
|
-
expandId: expand === null || expand === void 0 ? void 0 : expand.expandId
|
|
1584
|
-
}
|
|
1585
|
-
}
|
|
1586
|
-
})
|
|
1587
|
-
: null;
|
|
1588
|
-
const compoundParams = compoundExpandProp !== null
|
|
1589
|
-
? compoundExpand({
|
|
1590
|
-
title: children,
|
|
1591
|
-
props: {
|
|
1592
|
-
isOpen: compoundExpandProp.isExpanded
|
|
1593
|
-
}
|
|
1594
|
-
}, {
|
|
1595
|
-
rowIndex: compoundExpandProp === null || compoundExpandProp === void 0 ? void 0 : compoundExpandProp.rowIndex,
|
|
1596
|
-
columnIndex: compoundExpandProp === null || compoundExpandProp === void 0 ? void 0 : compoundExpandProp.columnIndex,
|
|
1597
|
-
column: {
|
|
1598
|
-
extraParams: {
|
|
1599
|
-
onExpand: compoundExpandProp === null || compoundExpandProp === void 0 ? void 0 : compoundExpandProp.onToggle,
|
|
1600
|
-
expandId: compoundExpandProp === null || compoundExpandProp === void 0 ? void 0 : compoundExpandProp.expandId
|
|
1601
|
-
}
|
|
1602
|
-
}
|
|
1603
|
-
})
|
|
1604
|
-
: null;
|
|
1605
|
-
const widthParams = width ? cellWidth(width)() : null;
|
|
1606
|
-
const visibilityParams = visibility
|
|
1607
|
-
? classNames(...visibility.map((vis) => Visibility[vis]))()
|
|
1608
|
-
: null;
|
|
1609
|
-
const treeRowParams = treeRowProp !== null
|
|
1610
|
-
? treeRow(treeRowProp.onCollapse, treeRowProp.onCheckChange, treeRowProp.onToggleRowDetails)({
|
|
1611
|
-
title: children
|
|
1612
|
-
}, {
|
|
1613
|
-
rowIndex: treeRowProp.rowIndex,
|
|
1614
|
-
rowData: {
|
|
1615
|
-
props: treeRowProp.props
|
|
1616
|
-
}
|
|
1617
|
-
})
|
|
1618
|
-
: null;
|
|
1619
|
-
const merged = mergeProps(selectParams, actionParams, expandableParams, compoundParams, widthParams, visibilityParams, favoriteParams, treeRowParams, draggableParams);
|
|
1620
|
-
const {
|
|
1621
|
-
// selectable adds this but we don't want it
|
|
1622
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1623
|
-
isVisible = null, children: mergedChildren = null, className: mergedClassName = '', component: MergedComponent = component } = merged, mergedProps = __rest(merged, ["isVisible", "children", "className", "component"]);
|
|
1624
|
-
const treeTableTitleCell = (className && className.includes(treeViewStyles.tableTreeViewTitleCell)) ||
|
|
1625
|
-
(mergedClassName && mergedClassName.includes(treeViewStyles.tableTreeViewTitleCell));
|
|
1626
|
-
useEffect(() => {
|
|
1627
|
-
setTruncated(cellRef.current.offsetWidth <
|
|
1628
|
-
cellRef.current.scrollWidth);
|
|
1629
|
-
}, [cellRef]);
|
|
1630
|
-
const cell = (jsx(MergedComponent, Object.assign({ tabIndex: (select || !truncated) && modifier !== 'truncate' ? -1 : 0 }, (!treeTableTitleCell && { 'data-label': dataLabel }), { onFocus: tooltip !== null ? onMouseEnter : onMouseEnterProp, onBlur: () => setShowTooltip(false), onMouseEnter: tooltip !== null ? onMouseEnter : onMouseEnterProp, className: css(styles$1.tableTd, className, isActionCell && styles$1.tableAction, textCenter && styles$1.modifiers.center, noPadding && styles$1.modifiers.noPadding, isStickyColumn && styles.tableStickyCell, hasRightBorder && styles.modifiers.borderRight, hasLeftBorder && styles.modifiers.borderLeft, styles$1.modifiers[modifier], draggableParams && styles$1.tableDraggable, mergedClassName), ref: cellRef }, mergedProps, props, (isStickyColumn && {
|
|
1631
|
-
style: Object.assign({ [c_table__sticky_cell_MinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined, [c_table__sticky_cell_InsetInlineStart.name]: stickyLeftOffset ? stickyLeftOffset : 0, [c_table__sticky_cell_InsetInlineEnd.name]: stickyRightOffset ? stickyRightOffset : 0 }, props.style)
|
|
1632
|
-
}), { children: mergedChildren || children })));
|
|
1633
|
-
const canMakeDefaultTooltip = tooltip === '' ? typeof children === 'string' : true;
|
|
1634
|
-
return tooltip !== null && canMakeDefaultTooltip && showTooltip ? (jsxs(Fragment$1, { children: [cell, jsx(Tooltip, { triggerRef: cellRef, content: tooltip || (tooltip === '' && children), isVisible: true })] })) : (cell);
|
|
1635
|
-
};
|
|
1636
|
-
const Td = forwardRef((props, ref) => (jsx(TdBase, Object.assign({}, props, { innerRef: ref }))));
|
|
1637
|
-
Td.displayName = 'Td';
|
|
1638
|
-
|
|
1639
|
-
const textStyles = {
|
|
1640
|
-
"textColorRequired": "pf-v6-u-text-color-required",
|
|
1641
|
-
"textColorSubtle": "pf-v6-u-text-color-subtle"};
|
|
1642
|
-
|
|
1643
|
-
const PropsTable = ({
|
|
1644
|
-
componentName,
|
|
1645
|
-
headingLevel = "h3",
|
|
1646
|
-
componentDescription,
|
|
1647
|
-
componentProps
|
|
1648
|
-
}) => {
|
|
1649
|
-
const publicProps = componentProps?.filter((prop) => !prop.isHidden);
|
|
1650
|
-
const hasPropsToRender = !!publicProps?.length;
|
|
1651
|
-
const renderTagLabel = (componentProp) => {
|
|
1652
|
-
const { name, isBeta, isDeprecated } = componentProp;
|
|
1653
|
-
if (!isBeta && !isDeprecated) {
|
|
1654
|
-
return null;
|
|
1655
|
-
}
|
|
1656
|
-
if (isBeta && isDeprecated) {
|
|
1657
|
-
console.error(
|
|
1658
|
-
`The ${name} prop for ${componentName} has both the isBeta and isDeprecated tag.`
|
|
1659
|
-
);
|
|
1660
|
-
}
|
|
1661
|
-
return /* @__PURE__ */ jsx(Label, { color: `${isBeta ? "blue" : "grey"}`, isCompact: true, children: isBeta ? "Beta" : "Deprecated" });
|
|
1662
|
-
};
|
|
1663
|
-
const renderRequiredDescription = (isRequired) => {
|
|
1664
|
-
if (!isRequired) {
|
|
1665
|
-
return null;
|
|
1666
|
-
}
|
|
1667
|
-
return /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
1668
|
-
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: css(textStyles.textColorRequired), children: "*" }),
|
|
1669
|
-
/* @__PURE__ */ jsx("span", { className: css(accessibleStyles.screenReader), children: "required" })
|
|
1670
|
-
] });
|
|
1671
|
-
};
|
|
1672
|
-
return /* @__PURE__ */ jsxs("div", { children: [
|
|
1673
|
-
/* @__PURE__ */ jsx(Content, { component: headingLevel, children: componentName }),
|
|
1674
|
-
/* @__PURE__ */ jsxs(Stack, { hasGutter: true, children: [
|
|
1675
|
-
componentDescription && /* @__PURE__ */ jsx(
|
|
1676
|
-
"div",
|
|
1677
|
-
{
|
|
1678
|
-
"data-testid": "component-description",
|
|
1679
|
-
className: css(textStyles.textColorSubtle),
|
|
1680
|
-
children: componentDescription
|
|
1681
|
-
}
|
|
1682
|
-
),
|
|
1683
|
-
hasPropsToRender && /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
1684
|
-
/* @__PURE__ */ jsxs("div", { id: `${componentName}-required-description`, children: [
|
|
1685
|
-
/* @__PURE__ */ jsx("span", { className: css(textStyles.textColorRequired), children: "*" }),
|
|
1686
|
-
" ",
|
|
1687
|
-
/* @__PURE__ */ jsx("span", { className: css(textStyles.textColorSubtle), children: "indicates a required prop" })
|
|
1688
|
-
] }),
|
|
1689
|
-
/* @__PURE__ */ jsxs(
|
|
1690
|
-
Table,
|
|
1691
|
-
{
|
|
1692
|
-
variant: "compact",
|
|
1693
|
-
"aria-label": `Props for ${componentName}`,
|
|
1694
|
-
"aria-describedby": `${componentName}-required-description`,
|
|
1695
|
-
gridBreakPoint: "grid-lg",
|
|
1696
|
-
children: [
|
|
1697
|
-
/* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
|
|
1698
|
-
/* @__PURE__ */ jsx(Th, { width: 20, children: "Name" }),
|
|
1699
|
-
/* @__PURE__ */ jsx(Th, { width: 20, children: "Type" }),
|
|
1700
|
-
/* @__PURE__ */ jsx(Th, { width: 10, children: "Default" }),
|
|
1701
|
-
/* @__PURE__ */ jsx(Th, { children: "Description" })
|
|
1702
|
-
] }) }),
|
|
1703
|
-
/* @__PURE__ */ jsx(Tbody, { children: publicProps.map((prop) => /* @__PURE__ */ jsxs(Tr, { children: [
|
|
1704
|
-
/* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(TableText, { wrapModifier: "breakWord", children: [
|
|
1705
|
-
prop.name,
|
|
1706
|
-
renderRequiredDescription(prop.isRequired),
|
|
1707
|
-
" ",
|
|
1708
|
-
renderTagLabel(prop)
|
|
1709
|
-
] }) }),
|
|
1710
|
-
/* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(TableText, { wrapModifier: "breakWord", children: prop.type || "No type info available" }) }),
|
|
1711
|
-
/* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(TableText, { wrapModifier: "breakWord", children: prop.defaultValue || "-" }) }),
|
|
1712
|
-
/* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(TableText, { wrapModifier: "breakWord", children: prop.description || "No description available." }) })
|
|
1713
|
-
] }, prop.name)) })
|
|
1714
|
-
]
|
|
1715
|
-
}
|
|
1716
|
-
)
|
|
1717
|
-
] })
|
|
1718
|
-
] })
|
|
1719
|
-
] });
|
|
1720
|
-
};
|
|
1721
|
-
|
|
1722
|
-
const $$Astro = createAstro();
|
|
1723
|
-
const $$PropsTables = createComponent(async ($$result, $$props, $$slots) => {
|
|
1724
|
-
const Astro2 = $$result.createAstro($$Astro, $$props, $$slots);
|
|
1725
|
-
Astro2.self = $$PropsTables;
|
|
1726
|
-
async function getPropsData(propComponents2) {
|
|
1727
|
-
if (!propComponents2 || propComponents2.length === 0) {
|
|
1728
|
-
return [];
|
|
1729
|
-
}
|
|
1730
|
-
const url = new URL(`/props?components=${propComponents2}`, Astro2.url);
|
|
1731
|
-
try {
|
|
1732
|
-
const response = await fetch(url);
|
|
1733
|
-
const propsData2 = await response.json();
|
|
1734
|
-
return propsData2;
|
|
1735
|
-
} catch (e) {
|
|
1736
|
-
console.error(e);
|
|
1737
|
-
return [];
|
|
1738
|
-
}
|
|
1739
|
-
}
|
|
1740
|
-
const { propComponents } = Astro2.props;
|
|
1741
|
-
const propsData = await getPropsData(propComponents);
|
|
1742
|
-
return renderTemplate`${renderTemplate`${renderComponent($$result, "Stack", Stack, { "hasGutter": true }, { "default": ($$result2) => renderTemplate`${renderComponent($$result2, "StackItem", StackItem, {}, { "default": ($$result3) => renderTemplate`${renderComponent($$result3, "AutoLinkHeader", AutoLinkHeader, { "headingLevel": "h2", "className": "pf-v6-c-content--h2", "id": "props-table" }, { "default": ($$result4) => renderTemplate`
|
|
1743
|
-
Props
|
|
1744
|
-
` })}` })}${propsData.filter((comp) => !!comp).map((component) => renderTemplate`${renderComponent($$result2, "StackItem", StackItem, { "key": component.name }, { "default": ($$result3) => renderTemplate`${renderComponent($$result3, "PropsTable", PropsTable, { "componentName": component.name, "componentDescription": component.description, "componentProps": component.props })}` })}`)}` })}`}`;
|
|
1745
|
-
}, "/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/PropsTables.astro", void 0);
|
|
1746
|
-
|
|
1747
|
-
const $$file = "/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/PropsTables.astro";
|
|
1748
|
-
const $$url = undefined;
|
|
1749
|
-
|
|
1750
|
-
export { $$PropsTables as default, $$file as file, $$url as url };
|