@hitachivantara/uikit-react-pentaho 6.0.13 → 6.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/LICENSE +201 -0
  2. package/dist/Canvas/BottomPanel/BottomPanel.js +116 -179
  3. package/dist/Canvas/BottomPanel/BottomPanel.styles.js +43 -55
  4. package/dist/Canvas/CanvasContext.js +39 -43
  5. package/dist/Canvas/PanelTab/PanelTab.js +31 -39
  6. package/dist/Canvas/PanelTab/PanelTab.styles.js +39 -46
  7. package/dist/Canvas/PanelTabs/PanelTabs.js +22 -27
  8. package/dist/Canvas/PanelTabs/PanelTabs.styles.js +11 -15
  9. package/dist/Canvas/SidePanel/SidePanel.js +102 -148
  10. package/dist/Canvas/SidePanel/SidePanel.styles.js +55 -73
  11. package/dist/Canvas/SidePanel/useResizable.js +67 -66
  12. package/dist/Canvas/Toolbar/Toolbar.js +51 -58
  13. package/dist/Canvas/Toolbar/Toolbar.styles.js +37 -38
  14. package/dist/Canvas/ToolbarTabs/ToolbarTabEditor.js +126 -151
  15. package/dist/Canvas/ToolbarTabs/ToolbarTabs.js +174 -228
  16. package/dist/Canvas/ToolbarTabs/ToolbarTabs.styles.js +98 -129
  17. package/dist/index.js +8 -24
  18. package/package.json +24 -12
package/dist/Canvas/SidePanel/SidePanel.styles.js CHANGED
@@ -1,74 +1,56 @@
1
1
  import { createClasses, theme } from "@hitachivantara/uikit-react-core";
2
- const boxShadow = `4px 0px 8px -4px ${theme.alpha("textDark", "12%")}`;
3
- const { staticClasses, useClasses } = createClasses(
4
- "HvCanvasSidePanel",
5
- {
6
- root: {
7
- height: "100%",
8
- position: "absolute",
9
- top: 0,
10
- left: 0,
11
- boxShadow,
12
- backgroundColor: "transparent",
13
- transition: "visibility 0.3s ease, width 0.3s ease",
14
- overflow: "hidden"
15
- },
16
- open: {
17
- width: 320,
18
- visibility: "visible"
19
- },
20
- close: {
21
- width: 0,
22
- visibility: "hidden",
23
- "&+$separator": {
24
- display: "none"
25
- }
26
- },
27
- tabs: {},
28
- content: {
29
- height: "100%"
30
- },
31
- separator: {
32
- position: "absolute",
33
- top: 0,
34
- bottom: 0,
35
- width: 8,
36
- cursor: "col-resize",
37
- borderLeftWidth: 2,
38
- borderColor: "transparent",
39
- ":hover": {
40
- borderColor: theme.colors.bgHover
41
- },
42
- "&[data-resizing]": {
43
- borderColor: theme.colors.primarySubtle
44
- }
45
- },
46
- handle: {
47
- height: 44,
48
- display: "flex",
49
- justifyContent: "center",
50
- boxShadow,
51
- borderRadius: `0px ${theme.radii.large} ${theme.radii.large} 0px`,
52
- position: "absolute",
53
- transition: "left 0.3s ease",
54
- "&&": {
55
- // override action state styles
56
- backgroundColor: theme.colors.bgContainer
57
- },
58
- top: "calc(50% - 44px)",
59
- // subtract handle's full height
60
- left: 0,
61
- "&[aria-expanded=true]": {
62
- left: 320
63
- }
64
- },
65
- /** @deprecated use [aria-expanded] instead */
66
- handleOpen: {},
67
- /** @deprecated use [aria-expanded] instead */
68
- handleClose: {}
69
- }
70
- );
71
- export {
72
- staticClasses,
73
- useClasses
74
- };
2
+ //#region src/Canvas/SidePanel/SidePanel.styles.tsx
3
+ var boxShadow = `4px 0px 8px -4px ${theme.alpha("textDark", "12%")}`;
4
+ var { staticClasses, useClasses } = createClasses("HvCanvasSidePanel", {
5
+ root: {
6
+ height: "100%",
7
+ position: "absolute",
8
+ top: 0,
9
+ left: 0,
10
+ boxShadow,
11
+ backgroundColor: "transparent",
12
+ transition: "visibility 0.3s ease, width 0.3s ease",
13
+ overflow: "hidden"
14
+ },
15
+ open: {
16
+ width: 320,
17
+ visibility: "visible"
18
+ },
19
+ close: {
20
+ width: 0,
21
+ visibility: "hidden",
22
+ "&+$separator": { display: "none" }
23
+ },
24
+ tabs: {},
25
+ content: { height: "100%" },
26
+ separator: {
27
+ position: "absolute",
28
+ top: 0,
29
+ bottom: 0,
30
+ width: 8,
31
+ cursor: "col-resize",
32
+ borderLeftWidth: 2,
33
+ borderColor: "transparent",
34
+ ":hover": { borderColor: theme.colors.bgHover },
35
+ "&[data-resizing]": { borderColor: theme.colors.primarySubtle }
36
+ },
37
+ handle: {
38
+ height: 44,
39
+ display: "flex",
40
+ justifyContent: "center",
41
+ boxShadow,
42
+ borderRadius: `0px ${theme.radii.large} ${theme.radii.large} 0px`,
43
+ position: "absolute",
44
+ transition: "left 0.3s ease",
45
+ "&&": { backgroundColor: theme.colors.bgContainer },
46
+ top: "calc(50% - 44px)",
47
+ left: 0,
48
+ "&[aria-expanded=true]": { left: 320 }
49
+ },
50
+ /** @deprecated use [aria-expanded] instead */
51
+ handleOpen: {},
52
+ /** @deprecated use [aria-expanded] instead */
53
+ handleClose: {}
54
+ });
55
+ //#endregion
56
+ export { staticClasses, useClasses };
package/dist/Canvas/SidePanel/useResizable.js CHANGED
@@ -1,68 +1,69 @@
1
- import { useState, useRef } from "react";
1
+ import { useRef, useState } from "react";
2
2
  import { useForkRef } from "@hitachivantara/uikit-react-core";
3
- const useResizable = (resizableOptions) => {
4
- const { ref, initialWidth, minWidth, maxWidth, onResize } = resizableOptions;
5
- const [width, setWidth] = useState(initialWidth);
6
- const [isHover, setIsHover] = useState(false);
7
- const [isDragging, setIsDragging] = useState(false);
8
- const panelRef = useRef(null);
9
- const forkedRef = useForkRef(ref, panelRef);
10
- const mouseMove = (event) => {
11
- if (panelRef.current) {
12
- const rect = panelRef.current.getBoundingClientRect();
13
- const newWidth = event.clientX - rect.left;
14
- if (newWidth >= minWidth && newWidth <= maxWidth) {
15
- setWidth(newWidth);
16
- onResize?.(newWidth);
17
- }
18
- }
19
- };
20
- const handleMouseMove = (event) => {
21
- if (panelRef.current) {
22
- const rect = panelRef.current.getBoundingClientRect();
23
- const isHoverBorder = event.clientX >= rect.right - 5 && event.clientX <= rect.right + 5;
24
- setIsHover(isHoverBorder);
25
- }
26
- };
27
- const handleMouseUp = () => {
28
- if (!panelRef.current) return;
29
- panelRef.current.style.userSelect = "";
30
- panelRef.current?.parentElement?.removeEventListener(
31
- "mousemove",
32
- mouseMove
33
- );
34
- panelRef.current?.parentElement?.removeEventListener(
35
- "mouseup",
36
- handleMouseUp
37
- );
38
- setIsDragging(false);
39
- };
40
- const startResizing = () => {
41
- if (!panelRef.current) return;
42
- panelRef.current.style.userSelect = "none";
43
- panelRef.current.parentElement?.addEventListener("mousemove", mouseMove);
44
- panelRef.current.parentElement?.addEventListener("mouseup", handleMouseUp);
45
- setIsDragging(true);
46
- };
47
- const getContainerProps = (overrides = {}) => ({
48
- ref: forkedRef,
49
- style: {
50
- width,
51
- transition: isDragging ? "none" : void 0,
52
- ...overrides.style
53
- }
54
- });
55
- const getSeparatorProps = (overrides = {}) => ({
56
- style: { left: width - 2, ...overrides.style },
57
- onMouseMove: handleMouseMove,
58
- onMouseLeave: () => setIsHover(false),
59
- onMouseDown: () => {
60
- if (isHover) startResizing();
61
- },
62
- role: "separator"
63
- });
64
- return { width, isDragging, getContainerProps, getSeparatorProps };
65
- };
66
- export {
67
- useResizable
3
+ //#region src/Canvas/SidePanel/useResizable.tsx
4
+ var useResizable = (resizableOptions) => {
5
+ const { ref, initialWidth, minWidth, maxWidth, onResize } = resizableOptions;
6
+ const [width, setWidth] = useState(initialWidth);
7
+ const [isHover, setIsHover] = useState(false);
8
+ const [isDragging, setIsDragging] = useState(false);
9
+ const panelRef = useRef(null);
10
+ const forkedRef = useForkRef(ref, panelRef);
11
+ const mouseMove = (event) => {
12
+ if (panelRef.current) {
13
+ const rect = panelRef.current.getBoundingClientRect();
14
+ const newWidth = event.clientX - rect.left;
15
+ if (newWidth >= minWidth && newWidth <= maxWidth) {
16
+ setWidth(newWidth);
17
+ onResize?.(newWidth);
18
+ }
19
+ }
20
+ };
21
+ const handleMouseMove = (event) => {
22
+ if (panelRef.current) {
23
+ const rect = panelRef.current.getBoundingClientRect();
24
+ setIsHover(event.clientX >= rect.right - 5 && event.clientX <= rect.right + 5);
25
+ }
26
+ };
27
+ const handleMouseUp = () => {
28
+ if (!panelRef.current) return;
29
+ panelRef.current.style.userSelect = "";
30
+ panelRef.current?.parentElement?.removeEventListener("mousemove", mouseMove);
31
+ panelRef.current?.parentElement?.removeEventListener("mouseup", handleMouseUp);
32
+ setIsDragging(false);
33
+ };
34
+ const startResizing = () => {
35
+ if (!panelRef.current) return;
36
+ panelRef.current.style.userSelect = "none";
37
+ panelRef.current.parentElement?.addEventListener("mousemove", mouseMove);
38
+ panelRef.current.parentElement?.addEventListener("mouseup", handleMouseUp);
39
+ setIsDragging(true);
40
+ };
41
+ const getContainerProps = (overrides = {}) => ({
42
+ ref: forkedRef,
43
+ style: {
44
+ width,
45
+ transition: isDragging ? "none" : void 0,
46
+ ...overrides.style
47
+ }
48
+ });
49
+ const getSeparatorProps = (overrides = {}) => ({
50
+ style: {
51
+ left: width - 2,
52
+ ...overrides.style
53
+ },
54
+ onMouseMove: handleMouseMove,
55
+ onMouseLeave: () => setIsHover(false),
56
+ onMouseDown: () => {
57
+ if (isHover) startResizing();
58
+ },
59
+ role: "separator"
60
+ });
61
+ return {
62
+ width,
63
+ isDragging,
64
+ getContainerProps,
65
+ getSeparatorProps
66
+ };
68
67
  };
68
+ //#endregion
69
+ export { useResizable };
package/dist/Canvas/Toolbar/Toolbar.js CHANGED
@@ -1,60 +1,53 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
2
- import { forwardRef } from "react";
3
- import { useDefaultProps, useLabels, HvIconButton, HvTypography } from "@hitachivantara/uikit-react-core";
4
- import { Previous } from "@hitachivantara/uikit-react-icons";
5
- import { mergeStyles } from "@hitachivantara/uikit-react-utils";
6
1
  import { useCanvasContext } from "../CanvasContext.js";
7
2
  import { useClasses } from "./Toolbar.styles.js";
8
- import { staticClasses } from "./Toolbar.styles.js";
9
- const DEFAULT_LABELS = {
10
- back: "Back"
11
- };
12
- const HvCanvasToolbar = forwardRef(
13
- function HvCanvasToolbar2(props, ref) {
14
- const {
15
- title: titleProp,
16
- backButton,
17
- labels: labelsProp,
18
- className,
19
- style,
20
- children,
21
- backButtonProps,
22
- classes: classesProp,
23
- ...others
24
- } = useDefaultProps("HvCanvasToolbar", props);
25
- const { classes, cx } = useClasses(classesProp);
26
- const labels = useLabels(DEFAULT_LABELS, labelsProp);
27
- const canvasContext = useCanvasContext();
28
- const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;
29
- const title = typeof titleProp === "string" ? /* @__PURE__ */ jsx(HvTypography, { variant: "title4", children: titleProp }) : titleProp;
30
- return /* @__PURE__ */ jsxs(
31
- "div",
32
- {
33
- ref,
34
- className: cx(classes.root, className),
35
- style: mergeStyles(style, {
36
- "--sidepanel-width": `${sidePanelWidth}px`,
37
- transition: canvasContext?.sidePanelDragging ? void 0 : "width 0.3s ease"
38
- }),
39
- ...others,
40
- children: [
41
- /* @__PURE__ */ jsx("div", { className: classes.back, children: backButton ?? /* @__PURE__ */ jsx(
42
- HvIconButton,
43
- {
44
- title: labels.back,
45
- variant: "primaryGhost",
46
- ...backButtonProps,
47
- children: /* @__PURE__ */ jsx(Previous, {})
48
- }
49
- ) }),
50
- /* @__PURE__ */ jsx("div", { className: classes.title, children: title }),
51
- children && /* @__PURE__ */ jsx("div", { className: classes.actions, children })
52
- ]
53
- }
54
- );
55
- }
56
- );
57
- export {
58
- HvCanvasToolbar,
59
- staticClasses as canvasToolbarClasses
60
- };
3
+ import { forwardRef } from "react";
4
+ import { HvIconButton, HvTypography, useDefaultProps, useLabels } from "@hitachivantara/uikit-react-core";
5
+ import { mergeStyles } from "@hitachivantara/uikit-react-utils";
6
+ import { jsx, jsxs } from "react/jsx-runtime";
7
+ import { Previous } from "@hitachivantara/uikit-react-icons";
8
+ //#region src/Canvas/Toolbar/Toolbar.tsx
9
+ var DEFAULT_LABELS = { back: "Back" };
10
+ /**
11
+ * A toolbar component to use in a canvas context.
12
+ */
13
+ var HvCanvasToolbar = forwardRef(function HvCanvasToolbar(props, ref) {
14
+ const { title: titleProp, backButton, labels: labelsProp, className, style, children, backButtonProps, classes: classesProp, ...others } = useDefaultProps("HvCanvasToolbar", props);
15
+ const { classes, cx } = useClasses(classesProp);
16
+ const labels = useLabels(DEFAULT_LABELS, labelsProp);
17
+ const canvasContext = useCanvasContext();
18
+ const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;
19
+ const title = typeof titleProp === "string" ? /* @__PURE__ */ jsx(HvTypography, {
20
+ variant: "title4",
21
+ children: titleProp
22
+ }) : titleProp;
23
+ return /* @__PURE__ */ jsxs("div", {
24
+ ref,
25
+ className: cx(classes.root, className),
26
+ style: mergeStyles(style, {
27
+ "--sidepanel-width": `${sidePanelWidth}px`,
28
+ transition: canvasContext?.sidePanelDragging ? void 0 : "width 0.3s ease"
29
+ }),
30
+ ...others,
31
+ children: [
32
+ /* @__PURE__ */ jsx("div", {
33
+ className: classes.back,
34
+ children: backButton ?? /* @__PURE__ */ jsx(HvIconButton, {
35
+ title: labels.back,
36
+ variant: "primaryGhost",
37
+ ...backButtonProps,
38
+ children: /* @__PURE__ */ jsx(Previous, {})
39
+ })
40
+ }),
41
+ /* @__PURE__ */ jsx("div", {
42
+ className: classes.title,
43
+ children: title
44
+ }),
45
+ children && /* @__PURE__ */ jsx("div", {
46
+ className: classes.actions,
47
+ children
48
+ })
49
+ ]
50
+ });
51
+ });
52
+ //#endregion
53
+ export { HvCanvasToolbar };
package/dist/Canvas/Toolbar/Toolbar.styles.js CHANGED
@@ -1,40 +1,39 @@
1
1
  import { createClasses, theme } from "@hitachivantara/uikit-react-core";
2
- const { staticClasses, useClasses } = createClasses("HvCanvasToolbar", {
3
- root: {
4
- width: `calc(100% - var(--sidepanel-width) - 2 * ${theme.space.sm})`,
5
- height: 54,
6
- display: "flex",
7
- alignItems: "center",
8
- borderRadius: theme.radii.full,
9
- backgroundColor: theme.colors.bgContainer,
10
- position: "absolute",
11
- right: theme.space.sm,
12
- top: 0
13
- },
14
- back: {
15
- borderRadius: `${theme.radii.full} 0 0 ${theme.radii.full}`,
16
- minWidth: 68,
17
- backgroundColor: theme.colors.bgHover,
18
- height: "100%",
19
- display: "flex",
20
- alignItems: "center",
21
- justifyContent: "center"
22
- },
23
- title: {
24
- display: "flex",
25
- alignItems: "center",
26
- padding: theme.spacing(0, "md"),
27
- height: "100%",
28
- flexGrow: 1
29
- },
30
- actions: {
31
- display: "flex",
32
- flexWrap: "nowrap",
33
- overflow: "auto",
34
- paddingRight: theme.space.md
35
- }
2
+ //#region src/Canvas/Toolbar/Toolbar.styles.tsx
3
+ var { staticClasses, useClasses } = createClasses("HvCanvasToolbar", {
4
+ root: {
5
+ width: `calc(100% - var(--sidepanel-width) - 2 * ${theme.space.sm})`,
6
+ height: 54,
7
+ display: "flex",
8
+ alignItems: "center",
9
+ borderRadius: theme.radii.full,
10
+ backgroundColor: theme.colors.bgContainer,
11
+ position: "absolute",
12
+ right: theme.space.sm,
13
+ top: 0
14
+ },
15
+ back: {
16
+ borderRadius: `${theme.radii.full} 0 0 ${theme.radii.full}`,
17
+ minWidth: 68,
18
+ backgroundColor: theme.colors.bgHover,
19
+ height: "100%",
20
+ display: "flex",
21
+ alignItems: "center",
22
+ justifyContent: "center"
23
+ },
24
+ title: {
25
+ display: "flex",
26
+ alignItems: "center",
27
+ padding: theme.spacing(0, "md"),
28
+ height: "100%",
29
+ flexGrow: 1
30
+ },
31
+ actions: {
32
+ display: "flex",
33
+ flexWrap: "nowrap",
34
+ overflow: "auto",
35
+ paddingRight: theme.space.md
36
+ }
36
37
  });
37
- export {
38
- staticClasses,
39
- useClasses
40
- };
38
+ //#endregion
39
+ export { staticClasses, useClasses };