@hitachivantara/uikit-react-pentaho 6.0.13 → 6.0.14

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 (17) hide show
  1. package/dist/Canvas/BottomPanel/BottomPanel.js +116 -179
  2. package/dist/Canvas/BottomPanel/BottomPanel.styles.js +43 -55
  3. package/dist/Canvas/CanvasContext.js +39 -43
  4. package/dist/Canvas/PanelTab/PanelTab.js +31 -39
  5. package/dist/Canvas/PanelTab/PanelTab.styles.js +39 -46
  6. package/dist/Canvas/PanelTabs/PanelTabs.js +22 -27
  7. package/dist/Canvas/PanelTabs/PanelTabs.styles.js +11 -15
  8. package/dist/Canvas/SidePanel/SidePanel.js +102 -148
  9. package/dist/Canvas/SidePanel/SidePanel.styles.js +55 -73
  10. package/dist/Canvas/SidePanel/useResizable.js +67 -66
  11. package/dist/Canvas/Toolbar/Toolbar.js +51 -58
  12. package/dist/Canvas/Toolbar/Toolbar.styles.js +37 -38
  13. package/dist/Canvas/ToolbarTabs/ToolbarTabEditor.js +126 -151
  14. package/dist/Canvas/ToolbarTabs/ToolbarTabs.js +174 -228
  15. package/dist/Canvas/ToolbarTabs/ToolbarTabs.styles.js +98 -129
  16. package/dist/index.js +8 -24
  17. package/package.json +5 -5
package/dist/Canvas/PanelTabs/PanelTabs.js CHANGED
@@ -1,30 +1,25 @@
1
- import { jsx } from "react/jsx-runtime";
1
+ import { useClasses } from "./PanelTabs.styles.js";
2
2
  import { forwardRef } from "react";
3
- import { Tabs, TabsList } from "@mui/base";
4
3
  import { useDefaultProps } from "@hitachivantara/uikit-react-core";
5
- import { useClasses } from "./PanelTabs.styles.js";
6
- import { staticClasses } from "./PanelTabs.styles.js";
7
- const HvCanvasPanelTabs = forwardRef(function HvCanvasPanelTabs2(props, ref) {
8
- const {
9
- selectionFollowsFocus = true,
10
- children,
11
- className,
12
- classes: classesProp,
13
- ...others
14
- } = useDefaultProps("HvCanvasPanelTabs", props);
15
- const { classes, cx } = useClasses(classesProp);
16
- return /* @__PURE__ */ jsx(
17
- Tabs,
18
- {
19
- ref,
20
- className: cx(classes.root, className),
21
- selectionFollowsFocus,
22
- ...others,
23
- children: /* @__PURE__ */ jsx(TabsList, { className: classes.list, children })
24
- }
25
- );
4
+ import { jsx } from "react/jsx-runtime";
5
+ import { Tabs, TabsList } from "@mui/base";
6
+ //#region src/Canvas/PanelTabs/PanelTabs.tsx
7
+ /**
8
+ * A tabs component to use in a canvas context.
9
+ */
10
+ var HvCanvasPanelTabs = forwardRef(function HvCanvasPanelTabs(props, ref) {
11
+ const { selectionFollowsFocus = true, children, className, classes: classesProp, ...others } = useDefaultProps("HvCanvasPanelTabs", props);
12
+ const { classes, cx } = useClasses(classesProp);
13
+ return /* @__PURE__ */ jsx(Tabs, {
14
+ ref,
15
+ className: cx(classes.root, className),
16
+ selectionFollowsFocus,
17
+ ...others,
18
+ children: /* @__PURE__ */ jsx(TabsList, {
19
+ className: classes.list,
20
+ children
21
+ })
22
+ });
26
23
  });
27
- export {
28
- HvCanvasPanelTabs,
29
- staticClasses as canvasPanelTabsClasses
30
- };
24
+ //#endregion
25
+ export { HvCanvasPanelTabs };
package/dist/Canvas/PanelTabs/PanelTabs.styles.js CHANGED
@@ -1,16 +1,12 @@
1
1
  import { createClasses } from "@hitachivantara/uikit-react-core";
2
- const { staticClasses, useClasses } = createClasses(
3
- "HvCanvasPanelTabs",
4
- {
5
- root: {},
6
- list: {
7
- display: "flex",
8
- width: "100%",
9
- height: 48
10
- }
11
- }
12
- );
13
- export {
14
- staticClasses,
15
- useClasses
16
- };
2
+ //#region src/Canvas/PanelTabs/PanelTabs.styles.tsx
3
+ var { staticClasses, useClasses } = createClasses("HvCanvasPanelTabs", {
4
+ root: {},
5
+ list: {
6
+ display: "flex",
7
+ width: "100%",
8
+ height: 48
9
+ }
10
+ });
11
+ //#endregion
12
+ export { staticClasses, useClasses };
package/dist/Canvas/SidePanel/SidePanel.js CHANGED
@@ -1,153 +1,107 @@
1
- import { jsxs, Fragment, jsx } from "react/jsx-runtime";
2
- import { forwardRef, useId, useEffect } from "react";
3
- import { useDefaultProps, useUniqueId, useLabels, useControlled, HvPanel, HvButton } from "@hitachivantara/uikit-react-core";
4
- import { End } from "@hitachivantara/uikit-react-icons";
5
1
  import { useCanvasContext } from "../CanvasContext.js";
2
+ import { HvCanvasPanelTab } from "../PanelTab/PanelTab.js";
3
+ import { HvCanvasPanelTabs } from "../PanelTabs/PanelTabs.js";
6
4
  import { useClasses } from "./SidePanel.styles.js";
7
- import { staticClasses } from "./SidePanel.styles.js";
8
5
  import { useResizable } from "./useResizable.js";
9
- import { HvCanvasPanelTabs } from "../PanelTabs/PanelTabs.js";
10
- import { HvCanvasPanelTab } from "../PanelTab/PanelTab.js";
11
- const DEFAULT_LABELS = {
12
- open: "Open",
13
- close: "Close"
6
+ import { forwardRef, useEffect, useId } from "react";
7
+ import { HvButton, HvPanel, useControlled, useDefaultProps, useLabels, useUniqueId } from "@hitachivantara/uikit-react-core";
8
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
9
+ import { End } from "@hitachivantara/uikit-react-icons";
10
+ //#region src/Canvas/SidePanel/SidePanel.tsx
11
+ var DEFAULT_LABELS = {
12
+ open: "Open",
13
+ close: "Close"
14
14
  };
15
- const HvCanvasSidePanel = forwardRef(function HvCanvasSidePanel2(props, ref) {
16
- const {
17
- id: idProp,
18
- tab: tabProp,
19
- open: openProp,
20
- defaultOpen = false,
21
- tabs,
22
- onToggle,
23
- onTabChange,
24
- labels: labelsProp,
25
- minWidth = 100,
26
- maxWidth = 500,
27
- initialWidth = 320,
28
- onResize,
29
- className,
30
- children,
31
- classes: classesProp,
32
- ...others
33
- } = useDefaultProps("HvCanvasSidePanel", props);
34
- const id = useUniqueId(idProp);
35
- const panelId = useId();
36
- const {
37
- handleSidePanelWidth,
38
- sidePanelOpen,
39
- handleSidePanelOpen,
40
- handleSidePanelDragging
41
- } = useCanvasContext() || {};
42
- const { classes, cx } = useClasses(classesProp);
43
- const labels = useLabels(DEFAULT_LABELS, labelsProp);
44
- const [open, setOpen] = useControlled(openProp, defaultOpen);
45
- const [selectedTab, setSelectedTab] = useControlled(
46
- tabProp,
47
- tabs?.[0]?.id ?? "none"
48
- );
49
- useEffect(() => {
50
- handleSidePanelOpen?.(open);
51
- }, [handleSidePanelOpen, open]);
52
- useEffect(() => {
53
- handleSidePanelWidth?.(initialWidth);
54
- }, [handleSidePanelWidth, initialWidth]);
55
- const updateWidth = (width2) => {
56
- handleSidePanelWidth?.(width2);
57
- onResize?.(width2);
58
- };
59
- const { width, isDragging, getContainerProps, getSeparatorProps } = useResizable({
60
- ref,
61
- initialWidth,
62
- minWidth,
63
- maxWidth,
64
- onResize: updateWidth
65
- });
66
- useEffect(() => {
67
- handleSidePanelDragging?.(isDragging);
68
- }, [handleSidePanelDragging, isDragging]);
69
- const handleTogglePanel = (event) => {
70
- setOpen((prev) => !prev);
71
- handleSidePanelOpen?.(!sidePanelOpen);
72
- onToggle?.(event, !open);
73
- };
74
- const handleTabChange = (event, tabId) => {
75
- setSelectedTab(tabId);
76
- onTabChange?.(event, tabId);
77
- };
78
- return /* @__PURE__ */ jsxs(Fragment, { children: [
79
- /* @__PURE__ */ jsxs(
80
- "div",
81
- {
82
- id,
83
- className: cx(classes.root, className, {
84
- [classes.open]: open,
85
- [classes.close]: !open
86
- }),
87
- ...getContainerProps({ style: { ...!open && { width: 0 } } }),
88
- ...others,
89
- children: [
90
- tabs && /* @__PURE__ */ jsx(
91
- HvCanvasPanelTabs,
92
- {
93
- className: classes.tabs,
94
- value: selectedTab,
95
- onChange: handleTabChange,
96
- children: tabs.map((tab) => /* @__PURE__ */ jsx(
97
- HvCanvasPanelTab,
98
- {
99
- id: `${id}-${tab.id}`,
100
- value: tab.id,
101
- children: tab.content
102
- },
103
- tab.id
104
- ))
105
- }
106
- ),
107
- /* @__PURE__ */ jsx(
108
- HvPanel,
109
- {
110
- role: tabs ? "tabpanel" : void 0,
111
- id: panelId,
112
- "aria-labelledby": tabs ? `${id}-${selectedTab}` : void 0,
113
- className: classes.content,
114
- children
115
- }
116
- )
117
- ]
118
- }
119
- ),
120
- /* @__PURE__ */ jsx(
121
- "div",
122
- {
123
- "data-resizing": isDragging || void 0,
124
- className: classes.separator,
125
- ...getSeparatorProps()
126
- }
127
- ),
128
- /* @__PURE__ */ jsx(
129
- HvButton,
130
- {
131
- icon: true,
132
- variant: "primaryGhost",
133
- "aria-label": open ? labels.close : labels.open,
134
- onClick: handleTogglePanel,
135
- "aria-expanded": open,
136
- "aria-controls": panelId,
137
- className: cx(classes.handle, {
138
- [classes.handleOpen]: open,
139
- [classes.handleClose]: !open
140
- }),
141
- style: {
142
- left: open ? width : 0,
143
- transition: isDragging ? "none" : void 0
144
- },
145
- children: /* @__PURE__ */ jsx(End, { rotate: open })
146
- }
147
- )
148
- ] });
15
+ /**
16
+ * A side panel component to use in a canvas context.
17
+ */
18
+ var HvCanvasSidePanel = forwardRef(function HvCanvasSidePanel(props, ref) {
19
+ const { id: idProp, tab: tabProp, open: openProp, defaultOpen = false, tabs, onToggle, onTabChange, labels: labelsProp, minWidth = 100, maxWidth = 500, initialWidth = 320, onResize, className, children, classes: classesProp, ...others } = useDefaultProps("HvCanvasSidePanel", props);
20
+ const id = useUniqueId(idProp);
21
+ const panelId = useId();
22
+ const { handleSidePanelWidth, sidePanelOpen, handleSidePanelOpen, handleSidePanelDragging } = useCanvasContext() || {};
23
+ const { classes, cx } = useClasses(classesProp);
24
+ const labels = useLabels(DEFAULT_LABELS, labelsProp);
25
+ const [open, setOpen] = useControlled(openProp, defaultOpen);
26
+ const [selectedTab, setSelectedTab] = useControlled(tabProp, tabs?.[0]?.id ?? "none");
27
+ useEffect(() => {
28
+ handleSidePanelOpen?.(open);
29
+ }, [handleSidePanelOpen, open]);
30
+ useEffect(() => {
31
+ handleSidePanelWidth?.(initialWidth);
32
+ }, [handleSidePanelWidth, initialWidth]);
33
+ const updateWidth = (width) => {
34
+ handleSidePanelWidth?.(width);
35
+ onResize?.(width);
36
+ };
37
+ const { width, isDragging, getContainerProps, getSeparatorProps } = useResizable({
38
+ ref,
39
+ initialWidth,
40
+ minWidth,
41
+ maxWidth,
42
+ onResize: updateWidth
43
+ });
44
+ useEffect(() => {
45
+ handleSidePanelDragging?.(isDragging);
46
+ }, [handleSidePanelDragging, isDragging]);
47
+ const handleTogglePanel = (event) => {
48
+ setOpen((prev) => !prev);
49
+ handleSidePanelOpen?.(!sidePanelOpen);
50
+ onToggle?.(event, !open);
51
+ };
52
+ const handleTabChange = (event, tabId) => {
53
+ setSelectedTab(tabId);
54
+ onTabChange?.(event, tabId);
55
+ };
56
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
57
+ /* @__PURE__ */ jsxs("div", {
58
+ id,
59
+ className: cx(classes.root, className, {
60
+ [classes.open]: open,
61
+ [classes.close]: !open
62
+ }),
63
+ ...getContainerProps({ style: { ...!open && { width: 0 } } }),
64
+ ...others,
65
+ children: [tabs && /* @__PURE__ */ jsx(HvCanvasPanelTabs, {
66
+ className: classes.tabs,
67
+ value: selectedTab,
68
+ onChange: handleTabChange,
69
+ children: tabs.map((tab) => /* @__PURE__ */ jsx(HvCanvasPanelTab, {
70
+ id: `${id}-${tab.id}`,
71
+ value: tab.id,
72
+ children: tab.content
73
+ }, tab.id))
74
+ }), /* @__PURE__ */ jsx(HvPanel, {
75
+ role: tabs ? "tabpanel" : void 0,
76
+ id: panelId,
77
+ "aria-labelledby": tabs ? `${id}-${selectedTab}` : void 0,
78
+ className: classes.content,
79
+ children
80
+ })]
81
+ }),
82
+ /* @__PURE__ */ jsx("div", {
83
+ "data-resizing": isDragging || void 0,
84
+ className: classes.separator,
85
+ ...getSeparatorProps()
86
+ }),
87
+ /* @__PURE__ */ jsx(HvButton, {
88
+ icon: true,
89
+ variant: "primaryGhost",
90
+ "aria-label": open ? labels.close : labels.open,
91
+ onClick: handleTogglePanel,
92
+ "aria-expanded": open,
93
+ "aria-controls": panelId,
94
+ className: cx(classes.handle, {
95
+ [classes.handleOpen]: open,
96
+ [classes.handleClose]: !open
97
+ }),
98
+ style: {
99
+ left: open ? width : 0,
100
+ transition: isDragging ? "none" : void 0
101
+ },
102
+ children: /* @__PURE__ */ jsx(End, { rotate: open })
103
+ })
104
+ ] });
149
105
  });
150
- export {
151
- HvCanvasSidePanel,
152
- staticClasses as canvasSidePanelClasses
153
- };
106
+ //#endregion
107
+ export { HvCanvasSidePanel };
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 };