@hitachivantara/uikit-react-pentaho 0.3.0 → 0.4.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/dist/cjs/Canvas/ToolbarTabs/ToolbarTabs.cjs +262 -0
- package/dist/cjs/Canvas/ToolbarTabs/ToolbarTabs.styles.cjs +123 -0
- package/dist/cjs/index.cjs +4 -0
- package/dist/esm/Canvas/ToolbarTabs/ToolbarTabs.js +263 -0
- package/dist/esm/Canvas/ToolbarTabs/ToolbarTabs.js.map +1 -0
- package/dist/esm/Canvas/ToolbarTabs/ToolbarTabs.styles.js +123 -0
- package/dist/esm/Canvas/ToolbarTabs/ToolbarTabs.styles.js.map +1 -0
- package/dist/esm/index.js +10 -6
- package/dist/esm/index.js.map +1 -1
- package/dist/types/index.d.ts +83 -7
- package/package.json +4 -4
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const react = require("react");
|
|
5
|
+
const reactResizeDetector = require("react-resize-detector");
|
|
6
|
+
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
7
|
+
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
8
|
+
const ToolbarTabs_styles = require("./ToolbarTabs.styles.cjs");
|
|
9
|
+
const PanelTabs = require("../PanelTabs/PanelTabs.cjs");
|
|
10
|
+
const PanelTab = require("../PanelTab/PanelTab.cjs");
|
|
11
|
+
const DEFAULT_LABELS = {
|
|
12
|
+
create: "Create new",
|
|
13
|
+
undefined: "Undefined",
|
|
14
|
+
close: "Close",
|
|
15
|
+
dropdownMenu: "Dropdown menu"
|
|
16
|
+
};
|
|
17
|
+
const DROPDOWN_MENU_WIDTH = 64;
|
|
18
|
+
const BORDER_WIDTH = 2;
|
|
19
|
+
const HvCanvasToolbarTabs = react.forwardRef((props, ref) => {
|
|
20
|
+
const {
|
|
21
|
+
children,
|
|
22
|
+
className,
|
|
23
|
+
selectedTabId: selectedTabIdProp,
|
|
24
|
+
icon: iconProp,
|
|
25
|
+
tabs: tabsProp,
|
|
26
|
+
defaultTabs: defaultTabsProp = [],
|
|
27
|
+
labels: labelsProp,
|
|
28
|
+
classes: classesProp,
|
|
29
|
+
onTabChange: onTabChangeProp,
|
|
30
|
+
onChange: onChangeProp,
|
|
31
|
+
...others
|
|
32
|
+
} = uikitReactCore.useDefaultProps("HvCanvasToolbarTabs", props);
|
|
33
|
+
const { classes, cx } = ToolbarTabs_styles.useClasses(classesProp);
|
|
34
|
+
const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
|
|
35
|
+
const { width: tabWidth = 0, ref: tabRef } = reactResizeDetector.useResizeDetector({
|
|
36
|
+
handleHeight: false,
|
|
37
|
+
refreshMode: "debounce",
|
|
38
|
+
refreshOptions: {
|
|
39
|
+
leading: true
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
const { width: actionsWidth = 0, ref: actionsRef } = reactResizeDetector.useResizeDetector({
|
|
43
|
+
handleHeight: false
|
|
44
|
+
});
|
|
45
|
+
const { width: rootWidth = 0, ref: rootRef } = reactResizeDetector.useResizeDetector({
|
|
46
|
+
handleHeight: false
|
|
47
|
+
});
|
|
48
|
+
const [tabs, setTabs] = uikitReactCore.useControlled(tabsProp, defaultTabsProp);
|
|
49
|
+
const [selectedTab, setSelectedTab] = uikitReactCore.useControlled(
|
|
50
|
+
selectedTabIdProp,
|
|
51
|
+
tabs?.[0]?.id ?? "none"
|
|
52
|
+
);
|
|
53
|
+
const rootWidthLimitReached = react.useRef(false);
|
|
54
|
+
const groupTabs = react.useCallback(
|
|
55
|
+
(allTabs) => {
|
|
56
|
+
let fullTabWidth = ToolbarTabs_styles.MIN_TAB_WIDTH;
|
|
57
|
+
const rootScrollWidth = rootRef.current?.scrollWidth ?? 0;
|
|
58
|
+
if (rootScrollWidth - rootWidth >= 1 || rootWidthLimitReached.current) {
|
|
59
|
+
fullTabWidth = tabWidth + BORDER_WIDTH;
|
|
60
|
+
rootWidthLimitReached.current = true;
|
|
61
|
+
}
|
|
62
|
+
const totalWidth = allTabs.length * fullTabWidth + DROPDOWN_MENU_WIDTH;
|
|
63
|
+
if (tabWidth > 0 && totalWidth > rootWidth - actionsWidth) {
|
|
64
|
+
const visibleCount = Math.floor(
|
|
65
|
+
(rootWidth - actionsWidth - DROPDOWN_MENU_WIDTH) / fullTabWidth
|
|
66
|
+
);
|
|
67
|
+
const temporaryHiddenTabs = allTabs.slice(visibleCount);
|
|
68
|
+
const selectedTabHiddenIndex = temporaryHiddenTabs.findIndex(
|
|
69
|
+
(tab) => tab.id === selectedTab
|
|
70
|
+
);
|
|
71
|
+
const excludedTabIndex = visibleCount - 1;
|
|
72
|
+
const shouldShuffle = selectedTabHiddenIndex !== -1 && visibleCount > 0;
|
|
73
|
+
if (shouldShuffle) {
|
|
74
|
+
return {
|
|
75
|
+
visibleTabs: [
|
|
76
|
+
...tabs.slice(0, excludedTabIndex),
|
|
77
|
+
temporaryHiddenTabs[selectedTabHiddenIndex]
|
|
78
|
+
].filter((tab) => tab),
|
|
79
|
+
hiddenTabs: [
|
|
80
|
+
tabs[excludedTabIndex],
|
|
81
|
+
...temporaryHiddenTabs.filter(
|
|
82
|
+
(tab, i) => i !== selectedTabHiddenIndex
|
|
83
|
+
)
|
|
84
|
+
].filter((tab) => tab)
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
return {
|
|
88
|
+
visibleTabs: tabs.slice(0, visibleCount),
|
|
89
|
+
hiddenTabs: temporaryHiddenTabs
|
|
90
|
+
};
|
|
91
|
+
}
|
|
92
|
+
return {
|
|
93
|
+
visibleTabs: allTabs,
|
|
94
|
+
hiddenTabs: []
|
|
95
|
+
};
|
|
96
|
+
},
|
|
97
|
+
[actionsWidth, rootRef, rootWidth, selectedTab, tabWidth, tabs]
|
|
98
|
+
);
|
|
99
|
+
const { hiddenTabs, visibleTabs } = react.useMemo(
|
|
100
|
+
() => groupTabs(tabs),
|
|
101
|
+
[groupTabs, tabs]
|
|
102
|
+
);
|
|
103
|
+
const rootForkedRef = uikitReactCore.useForkRef(ref, rootRef);
|
|
104
|
+
const handleChangeTabs = (event, newTabs) => {
|
|
105
|
+
setTabs(newTabs);
|
|
106
|
+
onChangeProp?.(event, newTabs);
|
|
107
|
+
};
|
|
108
|
+
const handleChangeSelectedTab = (event, value) => {
|
|
109
|
+
setSelectedTab(String(value));
|
|
110
|
+
onTabChangeProp?.(event, String(value));
|
|
111
|
+
};
|
|
112
|
+
const handleCreateNew = (event) => {
|
|
113
|
+
const newTabs = [...tabs];
|
|
114
|
+
const newTab = {
|
|
115
|
+
id: uikitReactCore.uniqueId(),
|
|
116
|
+
label: `${labels.undefined} ${newTabs.length + 1}`,
|
|
117
|
+
icon: iconProp
|
|
118
|
+
};
|
|
119
|
+
newTabs.push(newTab);
|
|
120
|
+
handleChangeSelectedTab(event, newTab.id);
|
|
121
|
+
handleChangeTabs?.(event, newTabs);
|
|
122
|
+
};
|
|
123
|
+
const handleClose = (event, tabId) => {
|
|
124
|
+
const newTabs = tabs.filter((tab) => tab.id !== tabId);
|
|
125
|
+
if (tabId === selectedTab) {
|
|
126
|
+
const currentIndex = tabs.findIndex((tab) => tab.id === tabId);
|
|
127
|
+
const newIndex = currentIndex - 1 < 0 ? 0 : currentIndex - 1;
|
|
128
|
+
handleChangeSelectedTab(event, newTabs[newIndex]?.id ?? "none");
|
|
129
|
+
}
|
|
130
|
+
if (hiddenTabs.length === 1) rootWidthLimitReached.current = false;
|
|
131
|
+
handleChangeTabs(event, newTabs);
|
|
132
|
+
};
|
|
133
|
+
const handleEdit = (event, value, tabId) => handleChangeTabs(
|
|
134
|
+
event,
|
|
135
|
+
tabs.map((tab) => tab.id === tabId ? { ...tab, label: value } : tab)
|
|
136
|
+
);
|
|
137
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
138
|
+
"div",
|
|
139
|
+
{
|
|
140
|
+
ref: rootForkedRef,
|
|
141
|
+
className: cx(classes.root, className),
|
|
142
|
+
...others,
|
|
143
|
+
children: [
|
|
144
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.tabsContainer, children: [
|
|
145
|
+
visibleTabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
146
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
147
|
+
PanelTabs.HvCanvasPanelTabs,
|
|
148
|
+
{
|
|
149
|
+
classes: { list: classes.tabsList },
|
|
150
|
+
value: selectedTab,
|
|
151
|
+
onChange: handleChangeSelectedTab,
|
|
152
|
+
children: visibleTabs.map((tab, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
153
|
+
PanelTab.HvCanvasPanelTab,
|
|
154
|
+
{
|
|
155
|
+
ref: index === 0 ? tabRef : void 0,
|
|
156
|
+
id: String(tab.id),
|
|
157
|
+
className: classes.tab,
|
|
158
|
+
value: tab.id,
|
|
159
|
+
tabIndex: 0,
|
|
160
|
+
"aria-label": tab.label,
|
|
161
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.tabContent, children: [
|
|
162
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
163
|
+
"div",
|
|
164
|
+
{
|
|
165
|
+
className: cx({
|
|
166
|
+
[classes.tabIcon]: !!tab.icon
|
|
167
|
+
}),
|
|
168
|
+
children: tab.icon
|
|
169
|
+
}
|
|
170
|
+
),
|
|
171
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { role: "none", children: tab.label }),
|
|
172
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { role: "none", children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, {}) }),
|
|
173
|
+
selectedTab !== tab.id && visibleTabs[index + 1]?.id !== selectedTab && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.tabDivider })
|
|
174
|
+
] })
|
|
175
|
+
},
|
|
176
|
+
tab.id
|
|
177
|
+
))
|
|
178
|
+
}
|
|
179
|
+
),
|
|
180
|
+
visibleTabs.map((tab, index) => {
|
|
181
|
+
const btnDisabled = selectedTab !== tab.id;
|
|
182
|
+
const num = index + 1;
|
|
183
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
184
|
+
"div",
|
|
185
|
+
{
|
|
186
|
+
style: {
|
|
187
|
+
// @ts-ignore
|
|
188
|
+
"--full-tab-width": `calc(${tabWidth}px + ${BORDER_WIDTH}px)`,
|
|
189
|
+
"--right": `calc(${num} * var(--full-tab-width))`,
|
|
190
|
+
"--editor-width": `calc(var(--full-tab-width) - ${tab.icon ? 2 : 1} * ${ToolbarTabs_styles.ICON_WIDTH}px - ${uikitReactCore.theme.space.xs})`
|
|
191
|
+
},
|
|
192
|
+
children: [
|
|
193
|
+
btnDisabled ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
194
|
+
"button",
|
|
195
|
+
{
|
|
196
|
+
type: "button",
|
|
197
|
+
className: classes.tabLabel,
|
|
198
|
+
onClick: (event) => handleChangeSelectedTab(event, tab.id),
|
|
199
|
+
"aria-label": tab.label,
|
|
200
|
+
tabIndex: -1,
|
|
201
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvOverflowTooltip, { data: tab.label })
|
|
202
|
+
}
|
|
203
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
204
|
+
uikitReactCore.HvInlineEditor,
|
|
205
|
+
{
|
|
206
|
+
className: cx(classes.tabLabel, classes.activeTabLabel),
|
|
207
|
+
"aria-label": tab.label,
|
|
208
|
+
value: tab.label,
|
|
209
|
+
buttonProps: { size: "sm" },
|
|
210
|
+
onChange: (event, value) => handleEdit(event, value, tab.id)
|
|
211
|
+
}
|
|
212
|
+
),
|
|
213
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
214
|
+
uikitReactCore.HvIconButton,
|
|
215
|
+
{
|
|
216
|
+
style: {
|
|
217
|
+
// @ts-ignore
|
|
218
|
+
"--close-color": btnDisabled ? uikitReactCore.theme.colors.secondary_60 : uikitReactCore.theme.colors.primary
|
|
219
|
+
},
|
|
220
|
+
className: classes.closeButton,
|
|
221
|
+
title: labels.close,
|
|
222
|
+
variant: "primaryGhost",
|
|
223
|
+
onClick: (event) => handleClose(event, tab.id),
|
|
224
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CloseXS, {})
|
|
225
|
+
},
|
|
226
|
+
tab.id
|
|
227
|
+
)
|
|
228
|
+
]
|
|
229
|
+
},
|
|
230
|
+
tab.id
|
|
231
|
+
);
|
|
232
|
+
})
|
|
233
|
+
] }),
|
|
234
|
+
hiddenTabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
235
|
+
uikitReactCore.HvDropDownMenu,
|
|
236
|
+
{
|
|
237
|
+
className: classes.dropdownMenu,
|
|
238
|
+
dataList: hiddenTabs,
|
|
239
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsHorizontal, {}),
|
|
240
|
+
labels: { dropdownMenu: labels.dropdownMenu },
|
|
241
|
+
onClick: (event, value) => handleChangeSelectedTab(event, value.id ?? "none")
|
|
242
|
+
}
|
|
243
|
+
)
|
|
244
|
+
] }),
|
|
245
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { ref: actionsRef, className: classes.actionsContainer, children: [
|
|
246
|
+
children,
|
|
247
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
248
|
+
uikitReactCore.HvButton,
|
|
249
|
+
{
|
|
250
|
+
variant: "primaryGhost",
|
|
251
|
+
startIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.AddAlt, {}),
|
|
252
|
+
onClick: handleCreateNew,
|
|
253
|
+
children: labels.create
|
|
254
|
+
}
|
|
255
|
+
)
|
|
256
|
+
] })
|
|
257
|
+
]
|
|
258
|
+
}
|
|
259
|
+
);
|
|
260
|
+
});
|
|
261
|
+
exports.canvasToolbarTabsClasses = ToolbarTabs_styles.staticClasses;
|
|
262
|
+
exports.HvCanvasToolbarTabs = HvCanvasToolbarTabs;
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const Tab = require("@mui/base/Tab");
|
|
4
|
+
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
5
|
+
const ICON_WIDTH = 32;
|
|
6
|
+
const MIN_TAB_WIDTH = 120;
|
|
7
|
+
const MAX_TAB_WIDTH = 220;
|
|
8
|
+
const TAB_HEIGHT = 32;
|
|
9
|
+
const TAB_LABEL_HEIGHT = 24;
|
|
10
|
+
const { staticClasses, useClasses } = uikitReactCore.createClasses(
|
|
11
|
+
"HvCanvasToolbarTabs",
|
|
12
|
+
{
|
|
13
|
+
root: {
|
|
14
|
+
display: "flex",
|
|
15
|
+
justifyContent: "space-between",
|
|
16
|
+
alignItems: "center",
|
|
17
|
+
width: "100%",
|
|
18
|
+
backgroundColor: uikitReactCore.theme.colors.atmo1,
|
|
19
|
+
boxShadow: uikitReactCore.theme.colors.shadow,
|
|
20
|
+
borderRadius: `0px 0px ${uikitReactCore.theme.radii.base} ${uikitReactCore.theme.radii.base}`,
|
|
21
|
+
gap: uikitReactCore.theme.space.sm,
|
|
22
|
+
transition: "width 0.3s ease"
|
|
23
|
+
},
|
|
24
|
+
tabsContainer: {
|
|
25
|
+
position: "relative",
|
|
26
|
+
display: "flex"
|
|
27
|
+
},
|
|
28
|
+
tabsList: {
|
|
29
|
+
height: TAB_HEIGHT,
|
|
30
|
+
background: uikitReactCore.theme.colors.atmo1
|
|
31
|
+
},
|
|
32
|
+
tab: {
|
|
33
|
+
width: `clamp(${MIN_TAB_WIDTH}px, 100%, ${MAX_TAB_WIDTH}px)`,
|
|
34
|
+
border: `1px solid ${uikitReactCore.theme.colors.atmo1}`,
|
|
35
|
+
borderBottom: "none",
|
|
36
|
+
borderRadius: "10px 10px 0 0",
|
|
37
|
+
boxShadow: "none",
|
|
38
|
+
backgroundColor: uikitReactCore.theme.colors.atmo1,
|
|
39
|
+
[`&.${Tab.tabClasses.selected}`]: {
|
|
40
|
+
color: uikitReactCore.theme.colors.primary,
|
|
41
|
+
backgroundColor: uikitReactCore.theme.colors.containerBackgroundHover,
|
|
42
|
+
borderColor: uikitReactCore.theme.colors.atmo4
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
tabContent: {
|
|
46
|
+
height: TAB_HEIGHT,
|
|
47
|
+
display: "flex",
|
|
48
|
+
justifyContent: "space-between",
|
|
49
|
+
position: "relative",
|
|
50
|
+
width: "100%",
|
|
51
|
+
padding: uikitReactCore.theme.space.xs,
|
|
52
|
+
"& > div:first-of-type:not($tabIcon)": {
|
|
53
|
+
visibility: "hidden"
|
|
54
|
+
},
|
|
55
|
+
"& > div:nth-of-type(2)": {
|
|
56
|
+
visibility: "hidden",
|
|
57
|
+
minWidth: `calc(${MIN_TAB_WIDTH}px - ${uikitReactCore.theme.space.xs} - 2 * ${ICON_WIDTH}px)`,
|
|
58
|
+
maxWidth: `calc(${MAX_TAB_WIDTH}px - ${uikitReactCore.theme.space.xs} - 2 * ${ICON_WIDTH}px)`
|
|
59
|
+
},
|
|
60
|
+
"& > div:nth-of-type(3)": {
|
|
61
|
+
visibility: "hidden",
|
|
62
|
+
marginRight: `calc(-1 * ${uikitReactCore.theme.space.xs})`
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
tabIcon: {
|
|
66
|
+
display: "flex",
|
|
67
|
+
justifyContent: "center",
|
|
68
|
+
alignItems: "center"
|
|
69
|
+
},
|
|
70
|
+
closeButton: {
|
|
71
|
+
position: "absolute",
|
|
72
|
+
top: 0,
|
|
73
|
+
right: "calc(100% - var(--right))",
|
|
74
|
+
color: "var(--close-color)"
|
|
75
|
+
},
|
|
76
|
+
tabLabel: {
|
|
77
|
+
position: "absolute",
|
|
78
|
+
width: "var(--editor-width)",
|
|
79
|
+
right: `calc(100% - var(--right) + ${ICON_WIDTH}px)`,
|
|
80
|
+
height: TAB_LABEL_HEIGHT,
|
|
81
|
+
top: 4.5,
|
|
82
|
+
"&:not($activeTabLabel)": {
|
|
83
|
+
...uikitReactCore.theme.typography.body,
|
|
84
|
+
color: uikitReactCore.theme.colors.secondary_60,
|
|
85
|
+
background: "none",
|
|
86
|
+
cursor: "pointer"
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
activeTabLabel: {
|
|
90
|
+
"& button": {
|
|
91
|
+
height: TAB_LABEL_HEIGHT,
|
|
92
|
+
minHeight: TAB_LABEL_HEIGHT,
|
|
93
|
+
backgroundColor: "transparent",
|
|
94
|
+
"& p": { ...uikitReactCore.theme.typography.label, color: uikitReactCore.theme.colors.primary },
|
|
95
|
+
"& span": { display: "none" }
|
|
96
|
+
},
|
|
97
|
+
[`&& .${uikitReactCore.baseInputClasses.inputRoot}`]: {
|
|
98
|
+
height: TAB_LABEL_HEIGHT,
|
|
99
|
+
minHeight: TAB_LABEL_HEIGHT
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
tabDivider: {
|
|
103
|
+
position: "absolute",
|
|
104
|
+
height: 18,
|
|
105
|
+
width: 1,
|
|
106
|
+
backgroundColor: uikitReactCore.theme.colors.atmo3,
|
|
107
|
+
right: 0
|
|
108
|
+
},
|
|
109
|
+
actionsContainer: {
|
|
110
|
+
display: "flex",
|
|
111
|
+
justifyContent: "flex-end",
|
|
112
|
+
alignItems: "center",
|
|
113
|
+
gap: uikitReactCore.theme.space.sm
|
|
114
|
+
},
|
|
115
|
+
dropdownMenu: {
|
|
116
|
+
margin: uikitReactCore.theme.spacing(0, "sm")
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
);
|
|
120
|
+
exports.ICON_WIDTH = ICON_WIDTH;
|
|
121
|
+
exports.MIN_TAB_WIDTH = MIN_TAB_WIDTH;
|
|
122
|
+
exports.staticClasses = staticClasses;
|
|
123
|
+
exports.useClasses = useClasses;
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -10,6 +10,8 @@ const SidePanel_styles = require("./Canvas/SidePanel/SidePanel.styles.cjs");
|
|
|
10
10
|
const SidePanel = require("./Canvas/SidePanel/SidePanel.cjs");
|
|
11
11
|
const Toolbar_styles = require("./Canvas/Toolbar/Toolbar.styles.cjs");
|
|
12
12
|
const Toolbar = require("./Canvas/Toolbar/Toolbar.cjs");
|
|
13
|
+
const ToolbarTabs_styles = require("./Canvas/ToolbarTabs/ToolbarTabs.styles.cjs");
|
|
14
|
+
const ToolbarTabs = require("./Canvas/ToolbarTabs/ToolbarTabs.cjs");
|
|
13
15
|
const Card_styles = require("./Card/Card.styles.cjs");
|
|
14
16
|
const Card = require("./Card/Card.cjs");
|
|
15
17
|
const CardMedia_styles = require("./Card/CardMedia/CardMedia.styles.cjs");
|
|
@@ -26,6 +28,8 @@ exports.canvasSidePanelClasses = SidePanel_styles.staticClasses;
|
|
|
26
28
|
exports.HvCanvasSidePanel = SidePanel.HvCanvasSidePanel;
|
|
27
29
|
exports.canvasToolbarClasses = Toolbar_styles.staticClasses;
|
|
28
30
|
exports.HvCanvasToolbar = Toolbar.HvCanvasToolbar;
|
|
31
|
+
exports.canvasToolbarTabsClasses = ToolbarTabs_styles.staticClasses;
|
|
32
|
+
exports.HvCanvasToolbarTabs = ToolbarTabs.HvCanvasToolbarTabs;
|
|
29
33
|
exports.cardClasses = Card_styles.staticClasses;
|
|
30
34
|
exports.HvCard = Card.HvCard;
|
|
31
35
|
exports.cardMediaClasses = CardMedia_styles.staticClasses;
|
|
@@ -0,0 +1,263 @@
|
|
|
1
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useRef, useCallback, useMemo } from "react";
|
|
3
|
+
import { useResizeDetector } from "react-resize-detector";
|
|
4
|
+
import { useDefaultProps, useLabels, useControlled, useForkRef, theme, HvOverflowTooltip, HvInlineEditor, HvIconButton, HvDropDownMenu, HvButton, uniqueId } from "@hitachivantara/uikit-react-core";
|
|
5
|
+
import { Close, CloseXS, MoreOptionsHorizontal, AddAlt } from "@hitachivantara/uikit-react-icons";
|
|
6
|
+
import { useClasses, ICON_WIDTH, MIN_TAB_WIDTH } from "./ToolbarTabs.styles.js";
|
|
7
|
+
import { staticClasses } from "./ToolbarTabs.styles.js";
|
|
8
|
+
import { HvCanvasPanelTabs } from "../PanelTabs/PanelTabs.js";
|
|
9
|
+
import { HvCanvasPanelTab } from "../PanelTab/PanelTab.js";
|
|
10
|
+
const DEFAULT_LABELS = {
|
|
11
|
+
create: "Create new",
|
|
12
|
+
undefined: "Undefined",
|
|
13
|
+
close: "Close",
|
|
14
|
+
dropdownMenu: "Dropdown menu"
|
|
15
|
+
};
|
|
16
|
+
const DROPDOWN_MENU_WIDTH = 64;
|
|
17
|
+
const BORDER_WIDTH = 2;
|
|
18
|
+
const HvCanvasToolbarTabs = forwardRef((props, ref) => {
|
|
19
|
+
const {
|
|
20
|
+
children,
|
|
21
|
+
className,
|
|
22
|
+
selectedTabId: selectedTabIdProp,
|
|
23
|
+
icon: iconProp,
|
|
24
|
+
tabs: tabsProp,
|
|
25
|
+
defaultTabs: defaultTabsProp = [],
|
|
26
|
+
labels: labelsProp,
|
|
27
|
+
classes: classesProp,
|
|
28
|
+
onTabChange: onTabChangeProp,
|
|
29
|
+
onChange: onChangeProp,
|
|
30
|
+
...others
|
|
31
|
+
} = useDefaultProps("HvCanvasToolbarTabs", props);
|
|
32
|
+
const { classes, cx } = useClasses(classesProp);
|
|
33
|
+
const labels = useLabels(DEFAULT_LABELS, labelsProp);
|
|
34
|
+
const { width: tabWidth = 0, ref: tabRef } = useResizeDetector({
|
|
35
|
+
handleHeight: false,
|
|
36
|
+
refreshMode: "debounce",
|
|
37
|
+
refreshOptions: {
|
|
38
|
+
leading: true
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
const { width: actionsWidth = 0, ref: actionsRef } = useResizeDetector({
|
|
42
|
+
handleHeight: false
|
|
43
|
+
});
|
|
44
|
+
const { width: rootWidth = 0, ref: rootRef } = useResizeDetector({
|
|
45
|
+
handleHeight: false
|
|
46
|
+
});
|
|
47
|
+
const [tabs, setTabs] = useControlled(tabsProp, defaultTabsProp);
|
|
48
|
+
const [selectedTab, setSelectedTab] = useControlled(
|
|
49
|
+
selectedTabIdProp,
|
|
50
|
+
tabs?.[0]?.id ?? "none"
|
|
51
|
+
);
|
|
52
|
+
const rootWidthLimitReached = useRef(false);
|
|
53
|
+
const groupTabs = useCallback(
|
|
54
|
+
(allTabs) => {
|
|
55
|
+
let fullTabWidth = MIN_TAB_WIDTH;
|
|
56
|
+
const rootScrollWidth = rootRef.current?.scrollWidth ?? 0;
|
|
57
|
+
if (rootScrollWidth - rootWidth >= 1 || rootWidthLimitReached.current) {
|
|
58
|
+
fullTabWidth = tabWidth + BORDER_WIDTH;
|
|
59
|
+
rootWidthLimitReached.current = true;
|
|
60
|
+
}
|
|
61
|
+
const totalWidth = allTabs.length * fullTabWidth + DROPDOWN_MENU_WIDTH;
|
|
62
|
+
if (tabWidth > 0 && totalWidth > rootWidth - actionsWidth) {
|
|
63
|
+
const visibleCount = Math.floor(
|
|
64
|
+
(rootWidth - actionsWidth - DROPDOWN_MENU_WIDTH) / fullTabWidth
|
|
65
|
+
);
|
|
66
|
+
const temporaryHiddenTabs = allTabs.slice(visibleCount);
|
|
67
|
+
const selectedTabHiddenIndex = temporaryHiddenTabs.findIndex(
|
|
68
|
+
(tab) => tab.id === selectedTab
|
|
69
|
+
);
|
|
70
|
+
const excludedTabIndex = visibleCount - 1;
|
|
71
|
+
const shouldShuffle = selectedTabHiddenIndex !== -1 && visibleCount > 0;
|
|
72
|
+
if (shouldShuffle) {
|
|
73
|
+
return {
|
|
74
|
+
visibleTabs: [
|
|
75
|
+
...tabs.slice(0, excludedTabIndex),
|
|
76
|
+
temporaryHiddenTabs[selectedTabHiddenIndex]
|
|
77
|
+
].filter((tab) => tab),
|
|
78
|
+
hiddenTabs: [
|
|
79
|
+
tabs[excludedTabIndex],
|
|
80
|
+
...temporaryHiddenTabs.filter(
|
|
81
|
+
(tab, i) => i !== selectedTabHiddenIndex
|
|
82
|
+
)
|
|
83
|
+
].filter((tab) => tab)
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
return {
|
|
87
|
+
visibleTabs: tabs.slice(0, visibleCount),
|
|
88
|
+
hiddenTabs: temporaryHiddenTabs
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
return {
|
|
92
|
+
visibleTabs: allTabs,
|
|
93
|
+
hiddenTabs: []
|
|
94
|
+
};
|
|
95
|
+
},
|
|
96
|
+
[actionsWidth, rootRef, rootWidth, selectedTab, tabWidth, tabs]
|
|
97
|
+
);
|
|
98
|
+
const { hiddenTabs, visibleTabs } = useMemo(
|
|
99
|
+
() => groupTabs(tabs),
|
|
100
|
+
[groupTabs, tabs]
|
|
101
|
+
);
|
|
102
|
+
const rootForkedRef = useForkRef(ref, rootRef);
|
|
103
|
+
const handleChangeTabs = (event, newTabs) => {
|
|
104
|
+
setTabs(newTabs);
|
|
105
|
+
onChangeProp?.(event, newTabs);
|
|
106
|
+
};
|
|
107
|
+
const handleChangeSelectedTab = (event, value) => {
|
|
108
|
+
setSelectedTab(String(value));
|
|
109
|
+
onTabChangeProp?.(event, String(value));
|
|
110
|
+
};
|
|
111
|
+
const handleCreateNew = (event) => {
|
|
112
|
+
const newTabs = [...tabs];
|
|
113
|
+
const newTab = {
|
|
114
|
+
id: uniqueId(),
|
|
115
|
+
label: `${labels.undefined} ${newTabs.length + 1}`,
|
|
116
|
+
icon: iconProp
|
|
117
|
+
};
|
|
118
|
+
newTabs.push(newTab);
|
|
119
|
+
handleChangeSelectedTab(event, newTab.id);
|
|
120
|
+
handleChangeTabs?.(event, newTabs);
|
|
121
|
+
};
|
|
122
|
+
const handleClose = (event, tabId) => {
|
|
123
|
+
const newTabs = tabs.filter((tab) => tab.id !== tabId);
|
|
124
|
+
if (tabId === selectedTab) {
|
|
125
|
+
const currentIndex = tabs.findIndex((tab) => tab.id === tabId);
|
|
126
|
+
const newIndex = currentIndex - 1 < 0 ? 0 : currentIndex - 1;
|
|
127
|
+
handleChangeSelectedTab(event, newTabs[newIndex]?.id ?? "none");
|
|
128
|
+
}
|
|
129
|
+
if (hiddenTabs.length === 1) rootWidthLimitReached.current = false;
|
|
130
|
+
handleChangeTabs(event, newTabs);
|
|
131
|
+
};
|
|
132
|
+
const handleEdit = (event, value, tabId) => handleChangeTabs(
|
|
133
|
+
event,
|
|
134
|
+
tabs.map((tab) => tab.id === tabId ? { ...tab, label: value } : tab)
|
|
135
|
+
);
|
|
136
|
+
return /* @__PURE__ */ jsxs(
|
|
137
|
+
"div",
|
|
138
|
+
{
|
|
139
|
+
ref: rootForkedRef,
|
|
140
|
+
className: cx(classes.root, className),
|
|
141
|
+
...others,
|
|
142
|
+
children: [
|
|
143
|
+
/* @__PURE__ */ jsxs("div", { className: classes.tabsContainer, children: [
|
|
144
|
+
visibleTabs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
145
|
+
/* @__PURE__ */ jsx(
|
|
146
|
+
HvCanvasPanelTabs,
|
|
147
|
+
{
|
|
148
|
+
classes: { list: classes.tabsList },
|
|
149
|
+
value: selectedTab,
|
|
150
|
+
onChange: handleChangeSelectedTab,
|
|
151
|
+
children: visibleTabs.map((tab, index) => /* @__PURE__ */ jsx(
|
|
152
|
+
HvCanvasPanelTab,
|
|
153
|
+
{
|
|
154
|
+
ref: index === 0 ? tabRef : void 0,
|
|
155
|
+
id: String(tab.id),
|
|
156
|
+
className: classes.tab,
|
|
157
|
+
value: tab.id,
|
|
158
|
+
tabIndex: 0,
|
|
159
|
+
"aria-label": tab.label,
|
|
160
|
+
children: /* @__PURE__ */ jsxs("div", { className: classes.tabContent, children: [
|
|
161
|
+
/* @__PURE__ */ jsx(
|
|
162
|
+
"div",
|
|
163
|
+
{
|
|
164
|
+
className: cx({
|
|
165
|
+
[classes.tabIcon]: !!tab.icon
|
|
166
|
+
}),
|
|
167
|
+
children: tab.icon
|
|
168
|
+
}
|
|
169
|
+
),
|
|
170
|
+
/* @__PURE__ */ jsx("div", { role: "none", children: tab.label }),
|
|
171
|
+
/* @__PURE__ */ jsx("div", { role: "none", children: /* @__PURE__ */ jsx(Close, {}) }),
|
|
172
|
+
selectedTab !== tab.id && visibleTabs[index + 1]?.id !== selectedTab && /* @__PURE__ */ jsx("div", { className: classes.tabDivider })
|
|
173
|
+
] })
|
|
174
|
+
},
|
|
175
|
+
tab.id
|
|
176
|
+
))
|
|
177
|
+
}
|
|
178
|
+
),
|
|
179
|
+
visibleTabs.map((tab, index) => {
|
|
180
|
+
const btnDisabled = selectedTab !== tab.id;
|
|
181
|
+
const num = index + 1;
|
|
182
|
+
return /* @__PURE__ */ jsxs(
|
|
183
|
+
"div",
|
|
184
|
+
{
|
|
185
|
+
style: {
|
|
186
|
+
// @ts-ignore
|
|
187
|
+
"--full-tab-width": `calc(${tabWidth}px + ${BORDER_WIDTH}px)`,
|
|
188
|
+
"--right": `calc(${num} * var(--full-tab-width))`,
|
|
189
|
+
"--editor-width": `calc(var(--full-tab-width) - ${tab.icon ? 2 : 1} * ${ICON_WIDTH}px - ${theme.space.xs})`
|
|
190
|
+
},
|
|
191
|
+
children: [
|
|
192
|
+
btnDisabled ? /* @__PURE__ */ jsx(
|
|
193
|
+
"button",
|
|
194
|
+
{
|
|
195
|
+
type: "button",
|
|
196
|
+
className: classes.tabLabel,
|
|
197
|
+
onClick: (event) => handleChangeSelectedTab(event, tab.id),
|
|
198
|
+
"aria-label": tab.label,
|
|
199
|
+
tabIndex: -1,
|
|
200
|
+
children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: tab.label })
|
|
201
|
+
}
|
|
202
|
+
) : /* @__PURE__ */ jsx(
|
|
203
|
+
HvInlineEditor,
|
|
204
|
+
{
|
|
205
|
+
className: cx(classes.tabLabel, classes.activeTabLabel),
|
|
206
|
+
"aria-label": tab.label,
|
|
207
|
+
value: tab.label,
|
|
208
|
+
buttonProps: { size: "sm" },
|
|
209
|
+
onChange: (event, value) => handleEdit(event, value, tab.id)
|
|
210
|
+
}
|
|
211
|
+
),
|
|
212
|
+
/* @__PURE__ */ jsx(
|
|
213
|
+
HvIconButton,
|
|
214
|
+
{
|
|
215
|
+
style: {
|
|
216
|
+
// @ts-ignore
|
|
217
|
+
"--close-color": btnDisabled ? theme.colors.secondary_60 : theme.colors.primary
|
|
218
|
+
},
|
|
219
|
+
className: classes.closeButton,
|
|
220
|
+
title: labels.close,
|
|
221
|
+
variant: "primaryGhost",
|
|
222
|
+
onClick: (event) => handleClose(event, tab.id),
|
|
223
|
+
children: /* @__PURE__ */ jsx(CloseXS, {})
|
|
224
|
+
},
|
|
225
|
+
tab.id
|
|
226
|
+
)
|
|
227
|
+
]
|
|
228
|
+
},
|
|
229
|
+
tab.id
|
|
230
|
+
);
|
|
231
|
+
})
|
|
232
|
+
] }),
|
|
233
|
+
hiddenTabs.length > 0 && /* @__PURE__ */ jsx(
|
|
234
|
+
HvDropDownMenu,
|
|
235
|
+
{
|
|
236
|
+
className: classes.dropdownMenu,
|
|
237
|
+
dataList: hiddenTabs,
|
|
238
|
+
icon: /* @__PURE__ */ jsx(MoreOptionsHorizontal, {}),
|
|
239
|
+
labels: { dropdownMenu: labels.dropdownMenu },
|
|
240
|
+
onClick: (event, value) => handleChangeSelectedTab(event, value.id ?? "none")
|
|
241
|
+
}
|
|
242
|
+
)
|
|
243
|
+
] }),
|
|
244
|
+
/* @__PURE__ */ jsxs("div", { ref: actionsRef, className: classes.actionsContainer, children: [
|
|
245
|
+
children,
|
|
246
|
+
/* @__PURE__ */ jsx(
|
|
247
|
+
HvButton,
|
|
248
|
+
{
|
|
249
|
+
variant: "primaryGhost",
|
|
250
|
+
startIcon: /* @__PURE__ */ jsx(AddAlt, {}),
|
|
251
|
+
onClick: handleCreateNew,
|
|
252
|
+
children: labels.create
|
|
253
|
+
}
|
|
254
|
+
)
|
|
255
|
+
] })
|
|
256
|
+
]
|
|
257
|
+
}
|
|
258
|
+
);
|
|
259
|
+
});
|
|
260
|
+
export {
|
|
261
|
+
HvCanvasToolbarTabs,
|
|
262
|
+
staticClasses as canvasToolbarTabsClasses
|
|
263
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToolbarTabs.js","sources":["../../../../src/Canvas/ToolbarTabs/ToolbarTabs.tsx"],"sourcesContent":["import { forwardRef, useCallback, useMemo, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvButton,\n HvButtonProps,\n HvDropDownMenu,\n HvIconButton,\n HvInlineEditor,\n HvOverflowTooltip,\n theme,\n uniqueId,\n useControlled,\n useDefaultProps,\n useForkRef,\n useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n AddAlt,\n Close,\n CloseXS,\n MoreOptionsHorizontal,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport {\n ICON_WIDTH,\n MIN_TAB_WIDTH,\n staticClasses,\n useClasses,\n} from \"./ToolbarTabs.styles\";\n\nexport { staticClasses as canvasToolbarTabsClasses };\n\nexport type HvCanvasToolbarTabsClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n create: \"Create new\",\n undefined: \"Undefined\",\n close: \"Close\",\n dropdownMenu: \"Dropdown menu\",\n};\n\ninterface ToolbarTabsTab {\n id: string;\n label: string;\n icon?: React.ReactNode;\n}\n\nexport interface HvCanvasToolbarTabsProps\n extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n /** When controlled, defines the tabs. */\n tabs?: ToolbarTabsTab[];\n /** When uncontrolled, defines the initial tabs. */\n defaultTabs?: ToolbarTabsTab[];\n /** Id of the selected tab if it needs to be controlled. */\n selectedTabId?: string;\n /** Defines the icon to be placed before the label when a new tab is created. If not defined, no icon is used. */\n icon?: React.ReactNode;\n /** Callback triggered when a tab changes/is clicked. */\n onTabChange?: (\n event: React.SyntheticEvent | null,\n tabId: string | null,\n ) => void;\n /** Callback triggered when the tabs change: new tab added, tab removed, tab reorder, and label updated. */\n onChange?: (\n event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent,\n tabs: ToolbarTabsTab[],\n ) => void;\n /** An object containing all the labels. */\n labels?: Partial<typeof DEFAULT_LABELS>;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvCanvasToolbarTabsClasses;\n}\n\ninterface GroupedTabs {\n hiddenTabs: ToolbarTabsTab[];\n visibleTabs: ToolbarTabsTab[];\n}\n\nconst DROPDOWN_MENU_WIDTH = 64;\nconst BORDER_WIDTH = 2;\n\n/**\n * A toolbar tabs component to use in a canvas context.\n */\nexport const HvCanvasToolbarTabs = forwardRef<\n HTMLDivElement,\n HvCanvasToolbarTabsProps\n>((props, ref) => {\n const {\n children,\n className,\n selectedTabId: selectedTabIdProp,\n icon: iconProp,\n tabs: tabsProp,\n defaultTabs: defaultTabsProp = [],\n labels: labelsProp,\n classes: classesProp,\n onTabChange: onTabChangeProp,\n onChange: onChangeProp,\n ...others\n } = useDefaultProps(\"HvCanvasToolbarTabs\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n // Tab resize detector: to know when to use the dropdown menu\n const { width: tabWidth = 0, ref: tabRef } = useResizeDetector({\n handleHeight: false,\n refreshMode: \"debounce\",\n refreshOptions: {\n leading: true,\n },\n });\n\n // Actions resize detector: to know when to use the dropdown menu\n const { width: actionsWidth = 0, ref: actionsRef } = useResizeDetector({\n handleHeight: false,\n });\n\n // Root resize detector: to know when to use the dropdown menu\n const { width: rootWidth = 0, ref: rootRef } = useResizeDetector({\n handleHeight: false,\n });\n\n const [tabs, setTabs] = useControlled(tabsProp, defaultTabsProp);\n const [selectedTab, setSelectedTab] = useControlled<string | null>(\n selectedTabIdProp,\n tabs?.[0]?.id ?? \"none\",\n );\n\n const rootWidthLimitReached = useRef(false);\n\n const groupTabs = useCallback(\n (allTabs: ToolbarTabsTab[]): GroupedTabs => {\n let fullTabWidth = MIN_TAB_WIDTH;\n\n const rootScrollWidth = rootRef.current?.scrollWidth ?? 0;\n if (rootScrollWidth - rootWidth >= 1 || rootWidthLimitReached.current) {\n fullTabWidth = tabWidth + BORDER_WIDTH;\n rootWidthLimitReached.current = true;\n }\n\n const totalWidth = allTabs.length * fullTabWidth + DROPDOWN_MENU_WIDTH;\n\n if (tabWidth > 0 && totalWidth > rootWidth - actionsWidth) {\n const visibleCount = Math.floor(\n (rootWidth - actionsWidth - DROPDOWN_MENU_WIDTH) / fullTabWidth,\n );\n const temporaryHiddenTabs = allTabs.slice(visibleCount);\n const selectedTabHiddenIndex = temporaryHiddenTabs.findIndex(\n (tab) => tab.id === selectedTab,\n );\n const excludedTabIndex = visibleCount - 1;\n const shouldShuffle = selectedTabHiddenIndex !== -1 && visibleCount > 0;\n\n if (shouldShuffle) {\n return {\n visibleTabs: [\n ...tabs.slice(0, excludedTabIndex),\n temporaryHiddenTabs[selectedTabHiddenIndex],\n ].filter((tab) => tab),\n hiddenTabs: [\n tabs[excludedTabIndex],\n ...temporaryHiddenTabs.filter(\n (tab, i) => i !== selectedTabHiddenIndex,\n ),\n ].filter((tab) => tab),\n };\n }\n return {\n visibleTabs: tabs.slice(0, visibleCount),\n hiddenTabs: temporaryHiddenTabs,\n };\n }\n return {\n visibleTabs: allTabs,\n hiddenTabs: [],\n };\n },\n [actionsWidth, rootRef, rootWidth, selectedTab, tabWidth, tabs],\n );\n\n const { hiddenTabs, visibleTabs } = useMemo(\n () => groupTabs(tabs),\n [groupTabs, tabs],\n );\n\n const rootForkedRef = useForkRef(ref, rootRef);\n\n const handleChangeTabs = (\n event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent,\n newTabs: ToolbarTabsTab[],\n ) => {\n setTabs(newTabs);\n onChangeProp?.(event, newTabs);\n };\n\n const handleChangeSelectedTab: HvCanvasPanelTabsProps[\"onChange\"] = (\n event,\n value,\n ) => {\n setSelectedTab(String(value));\n onTabChangeProp?.(event, String(value));\n };\n\n const handleCreateNew: HvButtonProps[\"onClick\"] = (event) => {\n const newTabs: ToolbarTabsTab[] = [...tabs];\n const newTab: ToolbarTabsTab = {\n id: uniqueId(),\n label: `${labels.undefined} ${newTabs.length + 1}`,\n icon: iconProp,\n };\n newTabs.push(newTab);\n handleChangeSelectedTab(event, newTab.id);\n handleChangeTabs?.(event, newTabs);\n };\n\n const handleClose = (\n event: React.MouseEvent<HTMLButtonElement>,\n tabId: string,\n ) => {\n const newTabs = tabs.filter((tab) => tab.id !== tabId);\n\n if (tabId === selectedTab) {\n const currentIndex = tabs.findIndex((tab) => tab.id === tabId);\n const newIndex = currentIndex - 1 < 0 ? 0 : currentIndex - 1;\n handleChangeSelectedTab(event, newTabs[newIndex]?.id ?? \"none\");\n }\n\n if (hiddenTabs.length === 1) rootWidthLimitReached.current = false;\n\n handleChangeTabs(event, newTabs);\n };\n\n const handleEdit = (\n event: React.SyntheticEvent,\n value: string,\n tabId: string,\n ) =>\n handleChangeTabs(\n event,\n tabs.map((tab) => (tab.id === tabId ? { ...tab, label: value } : tab)),\n );\n\n return (\n <div\n ref={rootForkedRef}\n className={cx(classes.root, className)}\n {...others}\n >\n <div className={classes.tabsContainer}>\n {visibleTabs.length > 0 && (\n <>\n <HvCanvasPanelTabs\n classes={{ list: classes.tabsList }}\n value={selectedTab}\n onChange={handleChangeSelectedTab}\n >\n {visibleTabs.map((tab, index) => (\n <HvCanvasPanelTab\n key={tab.id}\n ref={index === 0 ? tabRef : undefined}\n id={String(tab.id)}\n className={classes.tab}\n value={tab.id}\n tabIndex={0}\n aria-label={tab.label}\n >\n <div className={classes.tabContent}>\n <div\n className={cx({\n [classes.tabIcon]: !!tab.icon,\n })}\n >\n {tab.icon}\n </div>\n\n {/* Invisible components added in order for the tab width to go between max/min as some inner components are absolutely positioned */}\n <div role=\"none\">{tab.label}</div>\n <div role=\"none\">\n <Close />\n </div>\n\n {selectedTab !== tab.id &&\n visibleTabs[index + 1]?.id !== selectedTab && (\n <div className={classes.tabDivider} />\n )}\n </div>\n </HvCanvasPanelTab>\n ))}\n </HvCanvasPanelTabs>\n {/* For accessibility purposes, interactive elements cannot be children of a tablist or tab so they are rendered as HvCanvasTabs sibling. */}\n {visibleTabs.map((tab, index) => {\n const btnDisabled = selectedTab !== tab.id;\n const num = index + 1;\n return (\n <div\n key={tab.id}\n style={{\n // @ts-ignore\n \"--full-tab-width\": `calc(${tabWidth}px + ${BORDER_WIDTH}px)`,\n \"--right\": `calc(${num} * var(--full-tab-width))`,\n \"--editor-width\": `calc(var(--full-tab-width) - ${tab.icon ? 2 : 1} * ${ICON_WIDTH}px - ${theme.space.xs})`,\n }}\n >\n {btnDisabled ? (\n <button\n type=\"button\"\n className={classes.tabLabel}\n onClick={(event) =>\n handleChangeSelectedTab(event, tab.id)\n }\n aria-label={tab.label}\n tabIndex={-1}\n >\n <HvOverflowTooltip data={tab.label} />\n </button>\n ) : (\n <HvInlineEditor\n className={cx(classes.tabLabel, classes.activeTabLabel)}\n aria-label={tab.label}\n value={tab.label}\n buttonProps={{ size: \"sm\" }}\n onChange={(event, value) =>\n handleEdit(event, value, tab.id)\n }\n />\n )}\n <HvIconButton\n key={tab.id}\n style={{\n // @ts-ignore\n \"--close-color\": btnDisabled\n ? theme.colors.secondary_60\n : theme.colors.primary,\n }}\n className={classes.closeButton}\n title={labels.close}\n variant=\"primaryGhost\"\n onClick={(event: React.MouseEvent<HTMLButtonElement>) =>\n handleClose(event, tab.id)\n }\n >\n <CloseXS />\n </HvIconButton>\n </div>\n );\n })}\n </>\n )}\n {hiddenTabs.length > 0 && (\n <HvDropDownMenu\n className={classes.dropdownMenu}\n dataList={hiddenTabs}\n icon={<MoreOptionsHorizontal />}\n labels={{ dropdownMenu: labels.dropdownMenu }}\n onClick={(event, value) =>\n handleChangeSelectedTab(event, value.id ?? \"none\")\n }\n />\n )}\n </div>\n <div ref={actionsRef} className={classes.actionsContainer}>\n {children}\n <HvButton\n variant=\"primaryGhost\"\n startIcon={<AddAlt />}\n onClick={handleCreateNew}\n >\n {labels.create}\n </HvButton>\n </div>\n </div>\n );\n});\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import { tabClasses } from "@mui/base/Tab";
|
|
2
|
+
import { createClasses, theme, baseInputClasses } from "@hitachivantara/uikit-react-core";
|
|
3
|
+
const ICON_WIDTH = 32;
|
|
4
|
+
const MIN_TAB_WIDTH = 120;
|
|
5
|
+
const MAX_TAB_WIDTH = 220;
|
|
6
|
+
const TAB_HEIGHT = 32;
|
|
7
|
+
const TAB_LABEL_HEIGHT = 24;
|
|
8
|
+
const { staticClasses, useClasses } = createClasses(
|
|
9
|
+
"HvCanvasToolbarTabs",
|
|
10
|
+
{
|
|
11
|
+
root: {
|
|
12
|
+
display: "flex",
|
|
13
|
+
justifyContent: "space-between",
|
|
14
|
+
alignItems: "center",
|
|
15
|
+
width: "100%",
|
|
16
|
+
backgroundColor: theme.colors.atmo1,
|
|
17
|
+
boxShadow: theme.colors.shadow,
|
|
18
|
+
borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,
|
|
19
|
+
gap: theme.space.sm,
|
|
20
|
+
transition: "width 0.3s ease"
|
|
21
|
+
},
|
|
22
|
+
tabsContainer: {
|
|
23
|
+
position: "relative",
|
|
24
|
+
display: "flex"
|
|
25
|
+
},
|
|
26
|
+
tabsList: {
|
|
27
|
+
height: TAB_HEIGHT,
|
|
28
|
+
background: theme.colors.atmo1
|
|
29
|
+
},
|
|
30
|
+
tab: {
|
|
31
|
+
width: `clamp(${MIN_TAB_WIDTH}px, 100%, ${MAX_TAB_WIDTH}px)`,
|
|
32
|
+
border: `1px solid ${theme.colors.atmo1}`,
|
|
33
|
+
borderBottom: "none",
|
|
34
|
+
borderRadius: "10px 10px 0 0",
|
|
35
|
+
boxShadow: "none",
|
|
36
|
+
backgroundColor: theme.colors.atmo1,
|
|
37
|
+
[`&.${tabClasses.selected}`]: {
|
|
38
|
+
color: theme.colors.primary,
|
|
39
|
+
backgroundColor: theme.colors.containerBackgroundHover,
|
|
40
|
+
borderColor: theme.colors.atmo4
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
tabContent: {
|
|
44
|
+
height: TAB_HEIGHT,
|
|
45
|
+
display: "flex",
|
|
46
|
+
justifyContent: "space-between",
|
|
47
|
+
position: "relative",
|
|
48
|
+
width: "100%",
|
|
49
|
+
padding: theme.space.xs,
|
|
50
|
+
"& > div:first-of-type:not($tabIcon)": {
|
|
51
|
+
visibility: "hidden"
|
|
52
|
+
},
|
|
53
|
+
"& > div:nth-of-type(2)": {
|
|
54
|
+
visibility: "hidden",
|
|
55
|
+
minWidth: `calc(${MIN_TAB_WIDTH}px - ${theme.space.xs} - 2 * ${ICON_WIDTH}px)`,
|
|
56
|
+
maxWidth: `calc(${MAX_TAB_WIDTH}px - ${theme.space.xs} - 2 * ${ICON_WIDTH}px)`
|
|
57
|
+
},
|
|
58
|
+
"& > div:nth-of-type(3)": {
|
|
59
|
+
visibility: "hidden",
|
|
60
|
+
marginRight: `calc(-1 * ${theme.space.xs})`
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
tabIcon: {
|
|
64
|
+
display: "flex",
|
|
65
|
+
justifyContent: "center",
|
|
66
|
+
alignItems: "center"
|
|
67
|
+
},
|
|
68
|
+
closeButton: {
|
|
69
|
+
position: "absolute",
|
|
70
|
+
top: 0,
|
|
71
|
+
right: "calc(100% - var(--right))",
|
|
72
|
+
color: "var(--close-color)"
|
|
73
|
+
},
|
|
74
|
+
tabLabel: {
|
|
75
|
+
position: "absolute",
|
|
76
|
+
width: "var(--editor-width)",
|
|
77
|
+
right: `calc(100% - var(--right) + ${ICON_WIDTH}px)`,
|
|
78
|
+
height: TAB_LABEL_HEIGHT,
|
|
79
|
+
top: 4.5,
|
|
80
|
+
"&:not($activeTabLabel)": {
|
|
81
|
+
...theme.typography.body,
|
|
82
|
+
color: theme.colors.secondary_60,
|
|
83
|
+
background: "none",
|
|
84
|
+
cursor: "pointer"
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
activeTabLabel: {
|
|
88
|
+
"& button": {
|
|
89
|
+
height: TAB_LABEL_HEIGHT,
|
|
90
|
+
minHeight: TAB_LABEL_HEIGHT,
|
|
91
|
+
backgroundColor: "transparent",
|
|
92
|
+
"& p": { ...theme.typography.label, color: theme.colors.primary },
|
|
93
|
+
"& span": { display: "none" }
|
|
94
|
+
},
|
|
95
|
+
[`&& .${baseInputClasses.inputRoot}`]: {
|
|
96
|
+
height: TAB_LABEL_HEIGHT,
|
|
97
|
+
minHeight: TAB_LABEL_HEIGHT
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
tabDivider: {
|
|
101
|
+
position: "absolute",
|
|
102
|
+
height: 18,
|
|
103
|
+
width: 1,
|
|
104
|
+
backgroundColor: theme.colors.atmo3,
|
|
105
|
+
right: 0
|
|
106
|
+
},
|
|
107
|
+
actionsContainer: {
|
|
108
|
+
display: "flex",
|
|
109
|
+
justifyContent: "flex-end",
|
|
110
|
+
alignItems: "center",
|
|
111
|
+
gap: theme.space.sm
|
|
112
|
+
},
|
|
113
|
+
dropdownMenu: {
|
|
114
|
+
margin: theme.spacing(0, "sm")
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
);
|
|
118
|
+
export {
|
|
119
|
+
ICON_WIDTH,
|
|
120
|
+
MIN_TAB_WIDTH,
|
|
121
|
+
staticClasses,
|
|
122
|
+
useClasses
|
|
123
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToolbarTabs.styles.js","sources":["../../../../src/Canvas/ToolbarTabs/ToolbarTabs.styles.tsx"],"sourcesContent":["import { tabClasses } from \"@mui/base/Tab\";\nimport {\n baseInputClasses,\n createClasses,\n theme,\n} from \"@hitachivantara/uikit-react-core\";\n\nexport const ICON_WIDTH = 32;\nexport const MIN_TAB_WIDTH = 120;\nconst MAX_TAB_WIDTH = 220;\nconst TAB_HEIGHT = 32;\nconst TAB_LABEL_HEIGHT = 24;\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvCanvasToolbarTabs\",\n {\n root: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n width: \"100%\",\n backgroundColor: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n gap: theme.space.sm,\n transition: \"width 0.3s ease\",\n },\n tabsContainer: {\n position: \"relative\",\n display: \"flex\",\n },\n tabsList: {\n height: TAB_HEIGHT,\n background: theme.colors.atmo1,\n },\n tab: {\n width: `clamp(${MIN_TAB_WIDTH}px, 100%, ${MAX_TAB_WIDTH}px)`,\n border: `1px solid ${theme.colors.atmo1}`,\n borderBottom: \"none\",\n borderRadius: \"10px 10px 0 0\",\n boxShadow: \"none\",\n backgroundColor: theme.colors.atmo1,\n [`&.${tabClasses.selected}`]: {\n color: theme.colors.primary,\n backgroundColor: theme.colors.containerBackgroundHover,\n borderColor: theme.colors.atmo4,\n },\n },\n tabContent: {\n height: TAB_HEIGHT,\n display: \"flex\",\n justifyContent: \"space-between\",\n position: \"relative\",\n width: \"100%\",\n padding: theme.space.xs,\n \"& > div:first-of-type:not($tabIcon)\": {\n visibility: \"hidden\",\n },\n \"& > div:nth-of-type(2)\": {\n visibility: \"hidden\",\n minWidth: `calc(${MIN_TAB_WIDTH}px - ${theme.space.xs} - 2 * ${ICON_WIDTH}px)`,\n maxWidth: `calc(${MAX_TAB_WIDTH}px - ${theme.space.xs} - 2 * ${ICON_WIDTH}px)`,\n },\n \"& > div:nth-of-type(3)\": {\n visibility: \"hidden\",\n marginRight: `calc(-1 * ${theme.space.xs})`,\n },\n },\n tabIcon: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n closeButton: {\n position: \"absolute\",\n top: 0,\n right: \"calc(100% - var(--right))\",\n color: \"var(--close-color)\",\n },\n tabLabel: {\n position: \"absolute\",\n width: \"var(--editor-width)\",\n right: `calc(100% - var(--right) + ${ICON_WIDTH}px)`,\n height: TAB_LABEL_HEIGHT,\n top: 4.5,\n \"&:not($activeTabLabel)\": {\n ...theme.typography.body,\n color: theme.colors.secondary_60,\n background: \"none\",\n cursor: \"pointer\",\n },\n },\n activeTabLabel: {\n \"& button\": {\n height: TAB_LABEL_HEIGHT,\n minHeight: TAB_LABEL_HEIGHT,\n backgroundColor: \"transparent\",\n \"& p\": { ...theme.typography.label, color: theme.colors.primary },\n \"& span\": { display: \"none\" },\n },\n [`&& .${baseInputClasses.inputRoot}`]: {\n height: TAB_LABEL_HEIGHT,\n minHeight: TAB_LABEL_HEIGHT,\n },\n },\n tabDivider: {\n position: \"absolute\",\n height: 18,\n width: 1,\n backgroundColor: theme.colors.atmo3,\n right: 0,\n },\n actionsContainer: {\n display: \"flex\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n gap: theme.space.sm,\n },\n dropdownMenu: {\n margin: theme.spacing(0, \"sm\"),\n },\n },\n);\n"],"names":[],"mappings":"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"}
|
package/dist/esm/index.js
CHANGED
|
@@ -8,11 +8,13 @@ import { staticClasses as staticClasses4 } from "./Canvas/SidePanel/SidePanel.st
|
|
|
8
8
|
import { HvCanvasSidePanel } from "./Canvas/SidePanel/SidePanel.js";
|
|
9
9
|
import { staticClasses as staticClasses5 } from "./Canvas/Toolbar/Toolbar.styles.js";
|
|
10
10
|
import { HvCanvasToolbar } from "./Canvas/Toolbar/Toolbar.js";
|
|
11
|
-
import { staticClasses as staticClasses6 } from "./
|
|
11
|
+
import { staticClasses as staticClasses6 } from "./Canvas/ToolbarTabs/ToolbarTabs.styles.js";
|
|
12
|
+
import { HvCanvasToolbarTabs } from "./Canvas/ToolbarTabs/ToolbarTabs.js";
|
|
13
|
+
import { staticClasses as staticClasses7 } from "./Card/Card.styles.js";
|
|
12
14
|
import { HvCard } from "./Card/Card.js";
|
|
13
|
-
import { staticClasses as
|
|
15
|
+
import { staticClasses as staticClasses8 } from "./Card/CardMedia/CardMedia.styles.js";
|
|
14
16
|
import { HvCardMedia } from "./Card/CardMedia/CardMedia.js";
|
|
15
|
-
import { staticClasses as
|
|
17
|
+
import { staticClasses as staticClasses9 } from "./Card/CardSection/CardSection.styles.js";
|
|
16
18
|
import { HvCardSection } from "./Card/CardSection/CardSection.js";
|
|
17
19
|
export {
|
|
18
20
|
HvCanvasBottomPanel,
|
|
@@ -20,6 +22,7 @@ export {
|
|
|
20
22
|
HvCanvasPanelTabs,
|
|
21
23
|
HvCanvasSidePanel,
|
|
22
24
|
HvCanvasToolbar,
|
|
25
|
+
HvCanvasToolbarTabs,
|
|
23
26
|
HvCard,
|
|
24
27
|
HvCardMedia,
|
|
25
28
|
HvCardSection,
|
|
@@ -28,7 +31,8 @@ export {
|
|
|
28
31
|
staticClasses3 as canvasPanelTabsClasses,
|
|
29
32
|
staticClasses4 as canvasSidePanelClasses,
|
|
30
33
|
staticClasses5 as canvasToolbarClasses,
|
|
31
|
-
staticClasses6 as
|
|
32
|
-
staticClasses7 as
|
|
33
|
-
staticClasses8 as
|
|
34
|
+
staticClasses6 as canvasToolbarTabsClasses,
|
|
35
|
+
staticClasses7 as cardClasses,
|
|
36
|
+
staticClasses8 as cardMediaClasses,
|
|
37
|
+
staticClasses9 as cardSectionClasses
|
|
34
38
|
};
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -56,6 +56,21 @@ export declare const canvasToolbarClasses: {
|
|
|
56
56
|
back: "HvCanvasToolbar-back";
|
|
57
57
|
};
|
|
58
58
|
|
|
59
|
+
export declare const canvasToolbarTabsClasses: {
|
|
60
|
+
root: "HvCanvasToolbarTabs-root";
|
|
61
|
+
actionsContainer: "HvCanvasToolbarTabs-actionsContainer";
|
|
62
|
+
tab: "HvCanvasToolbarTabs-tab";
|
|
63
|
+
dropdownMenu: "HvCanvasToolbarTabs-dropdownMenu";
|
|
64
|
+
closeButton: "HvCanvasToolbarTabs-closeButton";
|
|
65
|
+
tabsContainer: "HvCanvasToolbarTabs-tabsContainer";
|
|
66
|
+
tabsList: "HvCanvasToolbarTabs-tabsList";
|
|
67
|
+
tabContent: "HvCanvasToolbarTabs-tabContent";
|
|
68
|
+
tabIcon: "HvCanvasToolbarTabs-tabIcon";
|
|
69
|
+
tabLabel: "HvCanvasToolbarTabs-tabLabel";
|
|
70
|
+
activeTabLabel: "HvCanvasToolbarTabs-activeTabLabel";
|
|
71
|
+
tabDivider: "HvCanvasToolbarTabs-tabDivider";
|
|
72
|
+
};
|
|
73
|
+
|
|
59
74
|
export declare const cardClasses: {
|
|
60
75
|
root: "HvCard-root";
|
|
61
76
|
};
|
|
@@ -78,6 +93,13 @@ declare const DEFAULT_LABELS_2: {
|
|
|
78
93
|
back: string;
|
|
79
94
|
};
|
|
80
95
|
|
|
96
|
+
declare const DEFAULT_LABELS_3: {
|
|
97
|
+
create: string;
|
|
98
|
+
undefined: string;
|
|
99
|
+
close: string;
|
|
100
|
+
dropdownMenu: string;
|
|
101
|
+
};
|
|
102
|
+
|
|
81
103
|
/**
|
|
82
104
|
* A bottom panel component to use in a canvas context.
|
|
83
105
|
*/
|
|
@@ -198,6 +220,32 @@ export declare interface HvCanvasToolbarProps extends HvBaseProps<HTMLDivElement
|
|
|
198
220
|
classes?: HvCanvasToolbarClasses;
|
|
199
221
|
}
|
|
200
222
|
|
|
223
|
+
/**
|
|
224
|
+
* A toolbar tabs component to use in a canvas context.
|
|
225
|
+
*/
|
|
226
|
+
export declare const HvCanvasToolbarTabs: ForwardRefExoticComponent<HvCanvasToolbarTabsProps & RefAttributes<HTMLDivElement>>;
|
|
227
|
+
|
|
228
|
+
export declare type HvCanvasToolbarTabsClasses = ExtractNames<typeof useClasses_6>;
|
|
229
|
+
|
|
230
|
+
export declare interface HvCanvasToolbarTabsProps extends HvBaseProps<HTMLDivElement, "onChange"> {
|
|
231
|
+
/** When controlled, defines the tabs. */
|
|
232
|
+
tabs?: ToolbarTabsTab[];
|
|
233
|
+
/** When uncontrolled, defines the initial tabs. */
|
|
234
|
+
defaultTabs?: ToolbarTabsTab[];
|
|
235
|
+
/** Id of the selected tab if it needs to be controlled. */
|
|
236
|
+
selectedTabId?: string;
|
|
237
|
+
/** Defines the icon to be placed before the label when a new tab is created. If not defined, no icon is used. */
|
|
238
|
+
icon?: React.ReactNode;
|
|
239
|
+
/** Callback triggered when a tab changes/is clicked. */
|
|
240
|
+
onTabChange?: (event: React.SyntheticEvent | null, tabId: string | null) => void;
|
|
241
|
+
/** Callback triggered when the tabs change: new tab added, tab removed, tab reorder, and label updated. */
|
|
242
|
+
onChange?: (event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent, tabs: ToolbarTabsTab[]) => void;
|
|
243
|
+
/** An object containing all the labels. */
|
|
244
|
+
labels?: Partial<typeof DEFAULT_LABELS_3>;
|
|
245
|
+
/** A Jss Object used to override or extend the styles applied. */
|
|
246
|
+
classes?: HvCanvasToolbarTabsClasses;
|
|
247
|
+
}
|
|
248
|
+
|
|
201
249
|
/**
|
|
202
250
|
* The Pentaho Card component.
|
|
203
251
|
*/
|
|
@@ -210,16 +258,16 @@ export declare const HvCard: <C extends React.ElementType = "div">(props: {
|
|
|
210
258
|
children?: ReactNode | undefined;
|
|
211
259
|
} & (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "component"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "component"> ? T extends any ? T : never : never : never) & {
|
|
212
260
|
ref?: PolymorphicRef<C> | undefined;
|
|
213
|
-
} & RefAttributes<unknown>) => React.
|
|
261
|
+
} & RefAttributes<unknown>) => React.ReactElement | null;
|
|
214
262
|
|
|
215
|
-
export declare type HvCardClasses = ExtractNames<typeof
|
|
263
|
+
export declare type HvCardClasses = ExtractNames<typeof useClasses_7>;
|
|
216
264
|
|
|
217
265
|
/**
|
|
218
266
|
* A subcomponent to be used within the `HvCard` component. This component is used to display an image within the card.
|
|
219
267
|
*/
|
|
220
268
|
export declare const HvCardMedia: ForwardRefExoticComponent<HvCardMediaProps & RefAttributes<HTMLImageElement>>;
|
|
221
269
|
|
|
222
|
-
export declare type HvCardMediaClasses = ExtractNames<typeof
|
|
270
|
+
export declare type HvCardMediaClasses = ExtractNames<typeof useClasses_8>;
|
|
223
271
|
|
|
224
272
|
export declare interface HvCardMediaProps extends HvBaseProps<HTMLImageElement> {
|
|
225
273
|
/** The source for the image to use in the card. */
|
|
@@ -242,13 +290,19 @@ export declare type HvCardProps<C extends React.ElementType = "div"> = Polymorph
|
|
|
242
290
|
*/
|
|
243
291
|
export declare const HvCardSection: ForwardRefExoticComponent<HvCardSectionProps & RefAttributes<HTMLDivElement>>;
|
|
244
292
|
|
|
245
|
-
export declare type HvCardSectionClasses = ExtractNames<typeof
|
|
293
|
+
export declare type HvCardSectionClasses = ExtractNames<typeof useClasses_9>;
|
|
246
294
|
|
|
247
295
|
export declare interface HvCardSectionProps extends HvBaseProps {
|
|
248
296
|
/** A Jss Object used to override or extend the styles applied. */
|
|
249
297
|
classes?: HvCardSectionClasses;
|
|
250
298
|
}
|
|
251
299
|
|
|
300
|
+
declare interface ToolbarTabsTab {
|
|
301
|
+
id: string;
|
|
302
|
+
label: string;
|
|
303
|
+
icon?: React.ReactNode;
|
|
304
|
+
}
|
|
305
|
+
|
|
252
306
|
declare const useClasses: (classesProp?: Partial<Record<"content" | "root" | "tab" | "closed" | "actionsDisabled" | "minimized" | "multipleTabs" | "overflowing" | "tabTitle" | "tabsRoot" | "leftActions" | "rightActions", string>>, addStatic?: boolean) => {
|
|
253
307
|
classes: {
|
|
254
308
|
content: string;
|
|
@@ -326,7 +380,29 @@ declare const useClasses_5: (classesProp?: Partial<Record<"root" | "title" | "ac
|
|
|
326
380
|
cx: (...args: any) => string;
|
|
327
381
|
};
|
|
328
382
|
|
|
329
|
-
declare const useClasses_6: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
|
|
383
|
+
declare const useClasses_6: (classesProp?: Partial<Record<"root" | "actionsContainer" | "tab" | "dropdownMenu" | "closeButton" | "tabsContainer" | "tabsList" | "tabContent" | "tabIcon" | "tabLabel" | "activeTabLabel" | "tabDivider", string>>, addStatic?: boolean) => {
|
|
384
|
+
classes: {
|
|
385
|
+
root: string;
|
|
386
|
+
actionsContainer: string;
|
|
387
|
+
tab: string;
|
|
388
|
+
dropdownMenu: string;
|
|
389
|
+
closeButton: string;
|
|
390
|
+
tabsContainer: string;
|
|
391
|
+
tabsList: string;
|
|
392
|
+
tabContent: string;
|
|
393
|
+
tabIcon: string;
|
|
394
|
+
tabLabel: string;
|
|
395
|
+
activeTabLabel: string;
|
|
396
|
+
tabDivider: string;
|
|
397
|
+
};
|
|
398
|
+
css: {
|
|
399
|
+
(template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
|
|
400
|
+
(...args: CSSInterpolation[]): string;
|
|
401
|
+
};
|
|
402
|
+
cx: (...args: any) => string;
|
|
403
|
+
};
|
|
404
|
+
|
|
405
|
+
declare const useClasses_7: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
|
|
330
406
|
classes: {
|
|
331
407
|
root: string;
|
|
332
408
|
};
|
|
@@ -337,7 +413,7 @@ declare const useClasses_6: (classesProp?: Partial<Record<"root", string>>, addS
|
|
|
337
413
|
cx: (...args: any) => string;
|
|
338
414
|
};
|
|
339
415
|
|
|
340
|
-
declare const
|
|
416
|
+
declare const useClasses_8: (classesProp?: Partial<Record<"root" | "image", string>>, addStatic?: boolean) => {
|
|
341
417
|
classes: {
|
|
342
418
|
root: string;
|
|
343
419
|
image: string;
|
|
@@ -349,7 +425,7 @@ declare const useClasses_7: (classesProp?: Partial<Record<"root" | "image", stri
|
|
|
349
425
|
cx: (...args: any) => string;
|
|
350
426
|
};
|
|
351
427
|
|
|
352
|
-
declare const
|
|
428
|
+
declare const useClasses_9: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
|
|
353
429
|
classes: {
|
|
354
430
|
root: string;
|
|
355
431
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-pentaho",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "UI Kit Pentaho+ React components.",
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@emotion/css": "^11.11.0",
|
|
33
|
-
"@hitachivantara/uikit-react-core": "^5.
|
|
34
|
-
"@hitachivantara/uikit-react-icons": "^5.10.
|
|
33
|
+
"@hitachivantara/uikit-react-core": "^5.67.1",
|
|
34
|
+
"@hitachivantara/uikit-react-icons": "^5.10.7",
|
|
35
35
|
"@mui/base": "^5.0.0-beta.40",
|
|
36
36
|
"react-resize-detector": "^8.1.0"
|
|
37
37
|
},
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"access": "public",
|
|
43
43
|
"directory": "package"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "657262fc6de23b28f76b1b017a4c49ce78c78ab3",
|
|
46
46
|
"exports": {
|
|
47
47
|
".": {
|
|
48
48
|
"require": "./dist/cjs/index.cjs",
|