@yamada-ui/resizable 1.1.14-next-20241005220055 → 1.1.14-next-20241008193728
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{chunk-AWBXGQXB.mjs → chunk-GF5FUJZL.mjs} +10 -10
- package/dist/{chunk-AWBXGQXB.mjs.map → chunk-GF5FUJZL.mjs.map} +1 -1
- package/dist/{chunk-YBL74RYZ.mjs → chunk-MV5OACWH.mjs} +6 -6
- package/dist/{chunk-YBL74RYZ.mjs.map → chunk-MV5OACWH.mjs.map} +1 -1
- package/dist/{chunk-E3WJJXQT.mjs → chunk-VA7EJWLN.mjs} +31 -26
- package/dist/chunk-VA7EJWLN.mjs.map +1 -0
- package/dist/{chunk-GKF6QUMG.mjs → chunk-WFROFCPD.mjs} +22 -22
- package/dist/chunk-WFROFCPD.mjs.map +1 -0
- package/dist/index.js +52 -52
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +4 -4
- package/dist/resizable-item.js +29 -29
- package/dist/resizable-item.js.map +1 -1
- package/dist/resizable-item.mjs +2 -2
- package/dist/resizable-trigger.js +14 -14
- package/dist/resizable-trigger.js.map +1 -1
- package/dist/resizable-trigger.mjs +2 -2
- package/dist/resizable.js +9 -9
- package/dist/resizable.js.map +1 -1
- package/dist/resizable.mjs +2 -2
- package/dist/use-resizable.d.mts +30 -30
- package/dist/use-resizable.d.ts +30 -30
- package/dist/use-resizable.js +24 -24
- package/dist/use-resizable.js.map +1 -1
- package/dist/use-resizable.mjs +1 -1
- package/package.json +4 -4
- package/dist/chunk-E3WJJXQT.mjs.map +0 -1
- package/dist/chunk-GKF6QUMG.mjs.map +0 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import {
|
|
3
3
|
useResizableContext,
|
|
4
4
|
useResizableTrigger
|
|
5
|
-
} from "./chunk-
|
|
5
|
+
} from "./chunk-VA7EJWLN.mjs";
|
|
6
6
|
|
|
7
7
|
// src/resizable-trigger.tsx
|
|
8
8
|
import { ui } from "@yamada-ui/core";
|
|
@@ -12,9 +12,9 @@ import { forwardRef } from "react";
|
|
|
12
12
|
import { PanelResizeHandle } from "react-resizable-panels";
|
|
13
13
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
14
14
|
var ResizableTrigger = forwardRef(
|
|
15
|
-
({ className,
|
|
15
|
+
({ className, children, icon, iconProps, ...rest }, ref) => {
|
|
16
16
|
const { styles } = useResizableContext();
|
|
17
|
-
const {
|
|
17
|
+
const { getIconProps, getTriggerProps } = useResizableTrigger({
|
|
18
18
|
ref,
|
|
19
19
|
...rest
|
|
20
20
|
});
|
|
@@ -32,15 +32,15 @@ var ResizableTrigger = forwardRef(
|
|
|
32
32
|
{
|
|
33
33
|
className: "ui-resizable__trigger__icon",
|
|
34
34
|
__css: {
|
|
35
|
+
alignItems: "center",
|
|
36
|
+
display: "flex",
|
|
37
|
+
justifyContent: "center",
|
|
38
|
+
left: "50%",
|
|
35
39
|
position: "absolute",
|
|
36
40
|
top: "50%",
|
|
37
|
-
left: "50%",
|
|
38
41
|
transform: "auto",
|
|
39
|
-
translateY: "-50%",
|
|
40
42
|
translateX: "-50%",
|
|
41
|
-
|
|
42
|
-
justifyContent: "center",
|
|
43
|
-
alignItems: "center",
|
|
43
|
+
translateY: "-50%",
|
|
44
44
|
...styles.icon
|
|
45
45
|
},
|
|
46
46
|
...getIconProps(iconProps),
|
|
@@ -55,7 +55,7 @@ var ResizableTrigger = forwardRef(
|
|
|
55
55
|
);
|
|
56
56
|
ResizableTrigger.displayName = "ResizableTrigger";
|
|
57
57
|
var ResizableTriggerIcon = (rest) => {
|
|
58
|
-
return /* @__PURE__ */ jsxs(Icon, { viewBox: "0 0 23 39", w: "0.5rem",
|
|
58
|
+
return /* @__PURE__ */ jsxs(Icon, { h: "1rem", viewBox: "0 0 23 39", w: "0.5rem", ...rest, children: [
|
|
59
59
|
/* @__PURE__ */ jsx(
|
|
60
60
|
"path",
|
|
61
61
|
{
|
|
@@ -105,4 +105,4 @@ export {
|
|
|
105
105
|
ResizableTrigger,
|
|
106
106
|
ResizableTriggerIcon
|
|
107
107
|
};
|
|
108
|
-
//# sourceMappingURL=chunk-
|
|
108
|
+
//# sourceMappingURL=chunk-GF5FUJZL.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/resizable-trigger.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n HTMLUIPropsWithoutAs,\n} from \"@yamada-ui/core\"\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/resizable-trigger.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n HTMLUIPropsWithoutAs,\n} from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type { FC, ReactElement } from \"react\"\nimport type { UseResizableTriggerProps } from \"./use-resizable\"\nimport { ui } from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { forwardRef } from \"react\"\nimport { PanelResizeHandle } from \"react-resizable-panels\"\nimport { useResizableContext, useResizableTrigger } from \"./use-resizable\"\n\ninterface ResizableTriggerOptions {\n /**\n * The resizable trigger icon to use.\n */\n icon?: ReactElement\n /**\n * Props for resizable trigger icon component.\n */\n iconProps?: HTMLUIProps\n}\n\nexport interface ResizableTriggerProps\n extends Merge<\n Omit<UseResizableTriggerProps, \"ref\">,\n Omit<HTMLUIPropsWithoutAs, \"id\" | \"onBlur\" | \"onFocus\">\n >,\n ResizableTriggerOptions {}\n\nexport const ResizableTrigger = forwardRef<HTMLElement, ResizableTriggerProps>(\n ({ className, children, icon, iconProps, ...rest }, ref) => {\n const { styles } = useResizableContext()\n const { getIconProps, getTriggerProps } = useResizableTrigger({\n ref,\n ...rest,\n })\n\n const css: CSSUIObject = { position: \"relative\", ...styles.trigger }\n\n return (\n <ui.div\n as={PanelResizeHandle}\n className={cx(\"ui-resizable__trigger\", className)}\n __css={css}\n {...getTriggerProps()}\n >\n {icon ? (\n <ui.div\n className=\"ui-resizable__trigger__icon\"\n __css={{\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n left: \"50%\",\n position: \"absolute\",\n top: \"50%\",\n transform: \"auto\",\n translateX: \"-50%\",\n translateY: \"-50%\",\n ...styles.icon,\n }}\n {...getIconProps(iconProps)}\n >\n {icon}\n </ui.div>\n ) : null}\n\n {children}\n </ui.div>\n )\n },\n)\n\nResizableTrigger.displayName = \"ResizableTrigger\"\n\nexport type ResizableTriggerIconProps = IconProps\n\nexport const ResizableTriggerIcon: FC<ResizableTriggerIconProps> = (rest) => {\n return (\n <Icon h=\"1rem\" viewBox=\"0 0 23 39\" w=\"0.5rem\" {...rest}>\n <path\n d=\"M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z\"\n fill=\"currentColor\"\n />\n\n <path\n d=\"M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n"],"mappings":";;;;;;;AASA,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAgC5B,SAOI,KAPJ;AAXC,IAAM,mBAAmB;AAAA,EAC9B,CAAC,EAAE,WAAW,UAAU,MAAM,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC1D,UAAM,EAAE,OAAO,IAAI,oBAAoB;AACvC,UAAM,EAAE,cAAc,gBAAgB,IAAI,oBAAoB;AAAA,MAC5D;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAED,UAAM,MAAmB,EAAE,UAAU,YAAY,GAAG,OAAO,QAAQ;AAEnE,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,IAAI;AAAA,QACJ,WAAW,GAAG,yBAAyB,SAAS;AAAA,QAChD,OAAO;AAAA,QACN,GAAG,gBAAgB;AAAA,QAEnB;AAAA,iBACC;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,YAAY;AAAA,gBACZ,SAAS;AAAA,gBACT,gBAAgB;AAAA,gBAChB,MAAM;AAAA,gBACN,UAAU;AAAA,gBACV,KAAK;AAAA,gBACL,WAAW;AAAA,gBACX,YAAY;AAAA,gBACZ,YAAY;AAAA,gBACZ,GAAG,OAAO;AAAA,cACZ;AAAA,cACC,GAAG,aAAa,SAAS;AAAA,cAEzB;AAAA;AAAA,UACH,IACE;AAAA,UAEH;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;AAIxB,IAAM,uBAAsD,CAAC,SAAS;AAC3E,SACE,qBAAC,QAAK,GAAE,QAAO,SAAQ,aAAY,GAAE,UAAU,GAAG,MAChD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
import {
|
|
3
3
|
ResizableProvider,
|
|
4
4
|
useResizable
|
|
5
|
-
} from "./chunk-
|
|
5
|
+
} from "./chunk-VA7EJWLN.mjs";
|
|
6
6
|
|
|
7
7
|
// src/resizable.tsx
|
|
8
8
|
import {
|
|
9
|
-
ui,
|
|
10
9
|
forwardRef,
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
omitThemeProps,
|
|
11
|
+
ui,
|
|
12
|
+
useComponentMultiStyle
|
|
13
13
|
} from "@yamada-ui/core";
|
|
14
14
|
import { cx } from "@yamada-ui/utils";
|
|
15
15
|
import { PanelGroup } from "react-resizable-panels";
|
|
@@ -25,7 +25,7 @@ var Resizable = forwardRef(
|
|
|
25
25
|
ref,
|
|
26
26
|
...computedProps
|
|
27
27
|
});
|
|
28
|
-
const css = {
|
|
28
|
+
const css = { h: "100%", w: "100%", ...styles.container };
|
|
29
29
|
return /* @__PURE__ */ jsx(ResizableProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ jsx(
|
|
30
30
|
ui.div,
|
|
31
31
|
{
|
|
@@ -41,4 +41,4 @@ var Resizable = forwardRef(
|
|
|
41
41
|
export {
|
|
42
42
|
Resizable
|
|
43
43
|
};
|
|
44
|
-
//# sourceMappingURL=chunk-
|
|
44
|
+
//# sourceMappingURL=chunk-MV5OACWH.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/resizable.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n
|
|
1
|
+
{"version":3,"sources":["../src/resizable.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { ForwardedRef } from \"react\"\nimport type { UseResizableProps } from \"./use-resizable\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { PanelGroup } from \"react-resizable-panels\"\nimport { ResizableProvider, useResizable } from \"./use-resizable\"\n\ninterface ResizableOptions {\n /**\n * Ref for resizable container element.\n */\n containerRef?: ForwardedRef<HTMLDivElement>\n}\n\n/**\n * `Resizable` is accessible resizable panel groups and layouts with keyboard support.\n *\n * @see Docs https://yamada-ui.com/components/data-display/resizable\n */\nexport interface ResizableProps\n extends Omit<HTMLUIProps, \"direction\">,\n ThemeProps<\"Resizable\">,\n Omit<UseResizableProps, \"ref\">,\n ResizableOptions {}\n\nexport const Resizable = forwardRef<ResizableProps, \"div\">(\n ({ direction = \"horizontal\", ...props }, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Resizable\", {\n direction,\n ...props,\n })\n const { className, children, containerRef, ...computedProps } =\n omitThemeProps(mergedProps)\n const { getContainerProps, getGroupProps, ...rest } = useResizable({\n ref,\n ...computedProps,\n })\n\n const css: CSSUIObject = { h: \"100%\", w: \"100%\", ...styles.container }\n\n return (\n <ResizableProvider value={{ styles, ...rest }}>\n <ui.div\n className={cx(\"ui-resizable\", className)}\n __css={css}\n {...getContainerProps({}, containerRef)}\n >\n <PanelGroup {...getGroupProps()}>{children}</PanelGroup>\n </ui.div>\n </ResizableProvider>\n )\n },\n)\n"],"mappings":";;;;;;;AAGA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AACnB,SAAS,kBAAkB;AA2CjB;AAtBH,IAAM,YAAY;AAAA,EACvB,CAAC,EAAE,YAAY,cAAc,GAAG,MAAM,GAAG,QAAQ;AAC/C,UAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,aAAa;AAAA,MAChE;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AACD,UAAM,EAAE,WAAW,UAAU,cAAc,GAAG,cAAc,IAC1D,eAAe,WAAW;AAC5B,UAAM,EAAE,mBAAmB,eAAe,GAAG,KAAK,IAAI,aAAa;AAAA,MACjE;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAED,UAAM,MAAmB,EAAE,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,UAAU;AAErE,WACE,oBAAC,qBAAkB,OAAO,EAAE,QAAQ,GAAG,KAAK,GAC1C;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,gBAAgB,SAAS;AAAA,QACvC,OAAO;AAAA,QACN,GAAG,kBAAkB,CAAC,GAAG,YAAY;AAAA,QAEtC,8BAAC,cAAY,GAAG,cAAc,GAAI,UAAS;AAAA;AAAA,IAC7C,GACF;AAAA,EAEJ;AACF;","names":[]}
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
3
|
// src/use-resizable.ts
|
|
4
|
-
import {
|
|
4
|
+
import {
|
|
5
|
+
createContext,
|
|
6
|
+
dataAttr,
|
|
7
|
+
handlerAll,
|
|
8
|
+
isRefObject
|
|
9
|
+
} from "@yamada-ui/utils";
|
|
5
10
|
import { useCallback, useEffect, useId, useState } from "react";
|
|
6
11
|
import {
|
|
7
12
|
getPanelElement,
|
|
@@ -14,14 +19,14 @@ var [ResizableProvider, useResizableContext] = createContext({
|
|
|
14
19
|
});
|
|
15
20
|
var useResizable = ({
|
|
16
21
|
id,
|
|
22
|
+
ref,
|
|
17
23
|
direction = "horizontal",
|
|
18
|
-
storageKey,
|
|
19
|
-
keyboardStep,
|
|
20
24
|
isDisabled = false,
|
|
21
|
-
|
|
25
|
+
keyboardStep,
|
|
22
26
|
storage,
|
|
23
|
-
|
|
27
|
+
storageKey,
|
|
24
28
|
groupProps,
|
|
29
|
+
onLayout,
|
|
25
30
|
...rest
|
|
26
31
|
}) => {
|
|
27
32
|
const uuid = useId();
|
|
@@ -36,12 +41,12 @@ var useResizable = ({
|
|
|
36
41
|
return {
|
|
37
42
|
...props,
|
|
38
43
|
id,
|
|
39
|
-
direction,
|
|
40
|
-
tagName: as,
|
|
41
44
|
autoSaveId: storageKey,
|
|
45
|
+
direction,
|
|
42
46
|
keyboardResizeBy: keyboardStep,
|
|
43
|
-
onLayout,
|
|
44
47
|
storage,
|
|
48
|
+
tagName: as,
|
|
49
|
+
onLayout,
|
|
45
50
|
...rest2
|
|
46
51
|
};
|
|
47
52
|
},
|
|
@@ -50,7 +55,7 @@ var useResizable = ({
|
|
|
50
55
|
useEffect(() => {
|
|
51
56
|
if (!id) return;
|
|
52
57
|
const el = getPanelGroupElement(id);
|
|
53
|
-
if (ref) ref.current = el;
|
|
58
|
+
if (isRefObject(ref)) ref.current = el;
|
|
54
59
|
}, [ref, id]);
|
|
55
60
|
return {
|
|
56
61
|
isDisabled,
|
|
@@ -63,15 +68,15 @@ var useResizableItem = ({
|
|
|
63
68
|
ref,
|
|
64
69
|
collapsedSize,
|
|
65
70
|
collapsible,
|
|
71
|
+
controlRef,
|
|
66
72
|
defaultSize,
|
|
67
73
|
maxSize,
|
|
68
74
|
minSize,
|
|
75
|
+
order,
|
|
76
|
+
containerProps,
|
|
69
77
|
onCollapse,
|
|
70
78
|
onExpand,
|
|
71
79
|
onResize,
|
|
72
|
-
order,
|
|
73
|
-
controlRef,
|
|
74
|
-
containerProps,
|
|
75
80
|
...innerProps
|
|
76
81
|
}) => {
|
|
77
82
|
const uuid = useId();
|
|
@@ -81,18 +86,18 @@ var useResizableItem = ({
|
|
|
81
86
|
const { as, ...rest } = containerProps != null ? containerProps : {};
|
|
82
87
|
return {
|
|
83
88
|
...props,
|
|
84
|
-
ref: controlRef,
|
|
85
89
|
id,
|
|
86
|
-
|
|
90
|
+
ref: controlRef,
|
|
91
|
+
collapsedSize,
|
|
87
92
|
collapsible,
|
|
88
93
|
defaultSize,
|
|
89
94
|
maxSize,
|
|
90
95
|
minSize,
|
|
91
|
-
|
|
96
|
+
order,
|
|
97
|
+
tagName: as,
|
|
92
98
|
onCollapse,
|
|
93
99
|
onExpand,
|
|
94
100
|
onResize,
|
|
95
|
-
order,
|
|
96
101
|
...collapsible ? { "aria-labelledby": id } : { "aria-label": id },
|
|
97
102
|
...rest
|
|
98
103
|
};
|
|
@@ -119,11 +124,11 @@ var useResizableItem = ({
|
|
|
119
124
|
useEffect(() => {
|
|
120
125
|
if (!id) return;
|
|
121
126
|
const el = getPanelElement(id);
|
|
122
|
-
if (ref) ref.current = el;
|
|
127
|
+
if (isRefObject(ref)) ref.current = el;
|
|
123
128
|
}, [ref, id]);
|
|
124
129
|
return {
|
|
125
|
-
|
|
126
|
-
|
|
130
|
+
getItemProps,
|
|
131
|
+
getPanelProps
|
|
127
132
|
};
|
|
128
133
|
};
|
|
129
134
|
var useResizableTrigger = ({
|
|
@@ -144,16 +149,16 @@ var useResizableTrigger = ({
|
|
|
144
149
|
(props = {}) => ({
|
|
145
150
|
...props,
|
|
146
151
|
id,
|
|
147
|
-
tagName: as,
|
|
148
152
|
disabled: trulyDisabled,
|
|
153
|
+
tagName: as,
|
|
149
154
|
onDragging: handlerAll(onDragging, (isActive2) => setIsActive(isActive2)),
|
|
150
155
|
...rest,
|
|
151
|
-
"data-active": dataAttr(isActive),
|
|
152
156
|
style: {
|
|
153
157
|
...props.style,
|
|
154
158
|
...rest.style,
|
|
155
159
|
...trulyDisabled ? { cursor: "default" } : {}
|
|
156
|
-
}
|
|
160
|
+
},
|
|
161
|
+
"data-active": dataAttr(isActive)
|
|
157
162
|
}),
|
|
158
163
|
[id, as, trulyDisabled, onDragging, rest, isActive]
|
|
159
164
|
);
|
|
@@ -168,11 +173,11 @@ var useResizableTrigger = ({
|
|
|
168
173
|
useEffect(() => {
|
|
169
174
|
if (!id) return;
|
|
170
175
|
const el = getResizeHandleElement(id);
|
|
171
|
-
if (ref) ref.current = el;
|
|
176
|
+
if (isRefObject(ref)) ref.current = el;
|
|
172
177
|
}, [ref, id]);
|
|
173
178
|
return {
|
|
174
|
-
|
|
175
|
-
|
|
179
|
+
getIconProps,
|
|
180
|
+
getTriggerProps
|
|
176
181
|
};
|
|
177
182
|
};
|
|
178
183
|
|
|
@@ -183,4 +188,4 @@ export {
|
|
|
183
188
|
useResizableItem,
|
|
184
189
|
useResizableTrigger
|
|
185
190
|
};
|
|
186
|
-
//# sourceMappingURL=chunk-
|
|
191
|
+
//# sourceMappingURL=chunk-VA7EJWLN.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/use-resizable.ts"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n HTMLUIPropsWithoutAs,\n PropGetter,\n} from \"@yamada-ui/core\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, RefObject } from \"react\"\nimport type {\n ImperativePanelHandle,\n PanelGroupOnLayout,\n PanelGroupProps,\n PanelGroupStorage,\n PanelProps,\n PanelResizeHandleProps,\n} from \"react-resizable-panels\"\nimport {\n createContext,\n dataAttr,\n handlerAll,\n isRefObject,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport {\n getPanelElement,\n getPanelGroupElement,\n getResizeHandleElement,\n} from \"react-resizable-panels\"\n\ninterface As {\n as?: keyof HTMLElementTagNameMap\n}\n\ninterface ResizableGroupProps\n extends Omit<Partial<PanelGroupProps>, \"children\" | \"id\" | \"tagName\">,\n As {}\ninterface ResizableItemProps\n extends Omit<PanelProps, \"children\" | \"id\" | \"tagName\">,\n As {}\ninterface ResizableTriggerProps\n extends Omit<PanelResizeHandleProps, \"children\" | \"id\" | \"tagName\">,\n As {}\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableContext {\n isDisabled: boolean\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [ResizableProvider, useResizableContext] =\n createContext<ResizableContext>({\n name: \"ResizableContext\",\n errorMessage: `useResizableContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Resizable />\"`,\n })\n\nexport interface UseResizableProps {\n /**\n * id assigned to resizable element.\n */\n id?: string\n /**\n * Ref for resizable element.\n */\n ref?: ForwardedRef<HTMLElement>\n /**\n * The direction of the resizable.\n *\n * @default \"horizontal\"\n */\n direction?: \"horizontal\" | \"vertical\"\n /**\n * If `true`, the resizable trigger will be disabled.\n */\n isDisabled?: boolean\n /**\n * Unit to resize by keyboard operation.\n *\n * @default 10\n */\n keyboardStep?: number\n /**\n * A callback that gets and sets a value in custom storage.\n */\n storage?: PanelGroupStorage\n /**\n * Key of value saved in storage.\n * By default, it is saved to `local storage`.\n */\n storageKey?: string\n /**\n * Props for resizable component.\n */\n groupProps?: ResizableGroupProps\n /**\n * The callback invoked when resizable items are resized.\n */\n onLayout?: PanelGroupOnLayout\n}\n\nexport const useResizable = ({\n id,\n ref,\n direction = \"horizontal\",\n isDisabled = false,\n keyboardStep,\n storage,\n storageKey,\n groupProps,\n onLayout,\n ...rest\n}: UseResizableProps) => {\n const uuid = useId()\n\n id ??= uuid\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({ ...props, ref, ...rest }),\n [rest],\n )\n\n const getGroupProps = useCallback(\n (props: Partial<PanelGroupProps> = {}): PanelGroupProps => {\n const { as, ...rest } = groupProps ?? {}\n\n return {\n ...props,\n id,\n autoSaveId: storageKey,\n direction,\n keyboardResizeBy: keyboardStep,\n storage,\n tagName: as,\n onLayout,\n ...rest,\n }\n },\n [id, direction, groupProps, storageKey, keyboardStep, onLayout, storage],\n )\n\n useEffect(() => {\n if (!id) return\n\n const el = getPanelGroupElement(id)\n\n if (isRefObject(ref)) ref.current = el\n }, [ref, id])\n\n return {\n isDisabled,\n getContainerProps,\n getGroupProps,\n }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\ninterface UseResizableItemOptions {\n /**\n * id assigned to resizable item element.\n */\n id?: string\n /**\n * Ref for resizable item element.\n */\n ref?: ForwardedRef<HTMLElement>\n /**\n * The collapsed size of the resizable item.\n */\n collapsedSize?: number\n /**\n * If `true`, the resizable item can be collapsed.\n *\n * @default false\n */\n collapsible?: boolean\n /**\n * Ref of the resizable item callback.\n */\n controlRef?: RefObject<ResizableItemControl>\n /**\n * The initial size of the resizable item.\n */\n defaultSize?: number\n /**\n * The maximum allowed value of the resizable item.\n */\n maxSize?: number\n /**\n * The minimum allowed value of the resizable item.\n */\n minSize?: number\n /**\n * Order for the resizable item.\n */\n order?: number\n /**\n * Props for resizable item container element.\n */\n containerProps?: Omit<HTMLUIProps, \"as\"> & ResizableItemProps\n /**\n * The callback invoked when resizable item are collapsed.\n */\n onCollapse?: () => void\n /**\n * The callback invoked when resizable item are expanded.\n */\n onExpand?: () => void\n /**\n * The callback invoked when resizable item are resized.\n */\n onResize?: (size: number, prevSize: number | undefined) => void\n}\n\nexport interface UseResizableItemProps\n extends Omit<HTMLUIProps, keyof UseResizableItemOptions>,\n UseResizableItemOptions {}\n\nexport const useResizableItem = ({\n id,\n ref,\n collapsedSize,\n collapsible,\n controlRef,\n defaultSize,\n maxSize,\n minSize,\n order,\n containerProps,\n onCollapse,\n onExpand,\n onResize,\n ...innerProps\n}: UseResizableItemProps) => {\n const uuid = useId()\n\n id ??= uuid\n\n const getPanelProps: PropGetter<\n Merge<HTMLUIProps, PanelProps>,\n PanelProps\n > = useCallback(\n (props = {}) => {\n const { as, ...rest } = containerProps ?? {}\n\n return {\n ...props,\n id,\n ref: controlRef,\n collapsedSize,\n collapsible,\n defaultSize,\n maxSize,\n minSize,\n order,\n tagName: as,\n onCollapse,\n onExpand,\n onResize,\n ...(collapsible ? { \"aria-labelledby\": id } : { \"aria-label\": id }),\n ...rest,\n }\n },\n [\n id,\n controlRef,\n containerProps,\n collapsedSize,\n collapsible,\n defaultSize,\n maxSize,\n minSize,\n onCollapse,\n onExpand,\n onResize,\n order,\n ],\n )\n\n const getItemProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({ ...props, ref, ...innerProps }),\n [innerProps],\n )\n\n useEffect(() => {\n if (!id) return\n\n const el = getPanelElement(id)\n\n if (isRefObject(ref)) ref.current = el\n }, [ref, id])\n\n return {\n getItemProps,\n getPanelProps,\n }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\ninterface UseResizableTriggerOptions {\n /**\n * id assigned to resizable trigger element.\n */\n id?: string\n /**\n * Ref for resizable trigger element.\n */\n ref?: ForwardedRef<HTMLElement>\n /**\n * If `true`, the resizable trigger will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * The callback invoked when resizable trigger are dragged.\n */\n onDragging?: (isDragging: boolean) => void\n}\n\nexport interface UseResizableTriggerProps\n extends Merge<\n ResizableTriggerProps,\n Omit<HTMLUIPropsWithoutAs, \"id\" | \"onBlur\" | \"onFocus\">\n >,\n UseResizableTriggerOptions {}\n\nexport const useResizableTrigger = ({\n id,\n ref,\n as,\n disabled,\n isDisabled,\n onDragging,\n ...rest\n}: UseResizableTriggerProps) => {\n const uuid = useId()\n\n id ??= uuid\n\n const { isDisabled: isGroupDisabled } = useResizableContext()\n const [isActive, setIsActive] = useState<boolean>(false)\n\n const trulyDisabled = disabled || isDisabled || isGroupDisabled\n\n const getTriggerProps: PropGetter<\n PanelResizeHandleProps,\n PanelResizeHandleProps\n > = useCallback(\n (props = {}) =>\n ({\n ...props,\n id,\n disabled: trulyDisabled,\n tagName: as,\n onDragging: handlerAll(onDragging, (isActive) => setIsActive(isActive)),\n ...rest,\n style: {\n ...props.style,\n ...rest.style,\n ...(trulyDisabled ? { cursor: \"default\" } : {}),\n },\n \"data-active\": dataAttr(isActive),\n }) as PanelResizeHandleProps,\n [id, as, trulyDisabled, onDragging, rest, isActive],\n )\n\n const getIconProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n \"data-active\": dataAttr(isActive),\n }),\n [isActive],\n )\n\n useEffect(() => {\n if (!id) return\n\n const el = getResizeHandleElement(id)\n\n if (isRefObject(ref)) ref.current = el\n }, [ref, id])\n\n return {\n getIconProps,\n getTriggerProps,\n }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":"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","names":["ref","rest","isActive"]}
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
import {
|
|
3
3
|
useResizableContext,
|
|
4
4
|
useResizableItem
|
|
5
|
-
} from "./chunk-
|
|
5
|
+
} from "./chunk-VA7EJWLN.mjs";
|
|
6
6
|
|
|
7
7
|
// src/resizable-item.tsx
|
|
8
|
-
import {
|
|
8
|
+
import { forwardRef, ui } from "@yamada-ui/core";
|
|
9
9
|
import { cx } from "@yamada-ui/utils";
|
|
10
10
|
import { Panel } from "react-resizable-panels";
|
|
11
11
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -14,25 +14,25 @@ var UIPanel = ui(Panel, { disableStyleProp: (prop) => panelProps.has(prop) });
|
|
|
14
14
|
var ResizableItem = forwardRef(
|
|
15
15
|
({
|
|
16
16
|
className,
|
|
17
|
+
boxSize,
|
|
17
18
|
children,
|
|
19
|
+
h,
|
|
20
|
+
height,
|
|
18
21
|
innerRef,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
minW,
|
|
22
|
-
minWidth,
|
|
22
|
+
maxH,
|
|
23
|
+
maxHeight,
|
|
23
24
|
maxW,
|
|
24
25
|
maxWidth,
|
|
25
|
-
h,
|
|
26
|
-
height,
|
|
27
26
|
minH,
|
|
28
27
|
minHeight,
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
minW,
|
|
29
|
+
minWidth,
|
|
30
|
+
w,
|
|
31
|
+
width,
|
|
32
32
|
...rest
|
|
33
33
|
}, ref) => {
|
|
34
34
|
const { styles } = useResizableContext();
|
|
35
|
-
const {
|
|
35
|
+
const { getItemProps, getPanelProps } = useResizableItem({
|
|
36
36
|
ref,
|
|
37
37
|
...rest
|
|
38
38
|
});
|
|
@@ -41,19 +41,19 @@ var ResizableItem = forwardRef(
|
|
|
41
41
|
UIPanel,
|
|
42
42
|
{
|
|
43
43
|
...getPanelProps({
|
|
44
|
-
|
|
45
|
-
width,
|
|
46
|
-
minW,
|
|
47
|
-
minWidth,
|
|
48
|
-
maxW,
|
|
49
|
-
maxWidth,
|
|
44
|
+
boxSize,
|
|
50
45
|
h,
|
|
51
46
|
height,
|
|
52
|
-
minH,
|
|
53
|
-
minHeight,
|
|
54
47
|
maxH,
|
|
55
48
|
maxHeight,
|
|
56
|
-
|
|
49
|
+
maxW,
|
|
50
|
+
maxWidth,
|
|
51
|
+
minH,
|
|
52
|
+
minHeight,
|
|
53
|
+
minW,
|
|
54
|
+
minWidth,
|
|
55
|
+
w,
|
|
56
|
+
width
|
|
57
57
|
}),
|
|
58
58
|
children: /* @__PURE__ */ jsx(
|
|
59
59
|
ui.div,
|
|
@@ -72,4 +72,4 @@ var ResizableItem = forwardRef(
|
|
|
72
72
|
export {
|
|
73
73
|
ResizableItem
|
|
74
74
|
};
|
|
75
|
-
//# sourceMappingURL=chunk-
|
|
75
|
+
//# sourceMappingURL=chunk-WFROFCPD.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/resizable-item.tsx"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type { ForwardedRef } from \"react\"\nimport type { UseResizableItemProps } from \"./use-resizable\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { Panel } from \"react-resizable-panels\"\nimport { useResizableContext, useResizableItem } from \"./use-resizable\"\n\nconst panelProps = new Set([\"order\"])\n\nconst UIPanel = ui(Panel, { disableStyleProp: (prop) => panelProps.has(prop) })\n\ninterface ResizableItemOptions {\n /**\n * Ref for resizable item inner element.\n */\n innerRef?: ForwardedRef<HTMLDivElement>\n}\n\nexport interface ResizableItemProps\n extends Omit<UseResizableItemProps, \"ref\">,\n ResizableItemOptions {}\n\nexport const ResizableItem = forwardRef<ResizableItemProps, \"div\">(\n (\n {\n className,\n boxSize,\n children,\n h,\n height,\n innerRef,\n maxH,\n maxHeight,\n maxW,\n maxWidth,\n minH,\n minHeight,\n minW,\n minWidth,\n w,\n width,\n ...rest\n },\n ref,\n ) => {\n const { styles } = useResizableContext()\n const { getItemProps, getPanelProps } = useResizableItem({\n ref,\n ...rest,\n })\n\n const css: CSSUIObject = { boxSize: \"100%\", ...styles.item }\n\n return (\n <UIPanel\n {...getPanelProps({\n boxSize,\n h,\n height,\n maxH,\n maxHeight,\n maxW,\n maxWidth,\n minH,\n minHeight,\n minW,\n minWidth,\n w,\n width,\n })}\n >\n <ui.div\n className={cx(\"ui-resizable__item\", className)}\n __css={css}\n {...getItemProps({}, innerRef)}\n >\n {children}\n </ui.div>\n </UIPanel>\n )\n },\n)\n"],"mappings":";;;;;;;AAGA,SAAS,YAAY,UAAU;AAC/B,SAAS,UAAU;AACnB,SAAS,aAAa;AAmEd;AAhER,IAAM,aAAa,oBAAI,IAAI,CAAC,OAAO,CAAC;AAEpC,IAAM,UAAU,GAAG,OAAO,EAAE,kBAAkB,CAAC,SAAS,WAAW,IAAI,IAAI,EAAE,CAAC;AAavE,IAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,OAAO,IAAI,oBAAoB;AACvC,UAAM,EAAE,cAAc,cAAc,IAAI,iBAAiB;AAAA,MACvD;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAED,UAAM,MAAmB,EAAE,SAAS,QAAQ,GAAG,OAAO,KAAK;AAE3D,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,cAAc;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QAED;AAAA,UAAC,GAAG;AAAA,UAAH;AAAA,YACC,WAAW,GAAG,sBAAsB,SAAS;AAAA,YAC7C,OAAO;AAAA,YACN,GAAG,aAAa,CAAC,GAAG,QAAQ;AAAA,YAE5B;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -43,14 +43,14 @@ var [ResizableProvider, useResizableContext] = (0, import_utils.createContext)({
|
|
|
43
43
|
});
|
|
44
44
|
var useResizable = ({
|
|
45
45
|
id,
|
|
46
|
+
ref,
|
|
46
47
|
direction = "horizontal",
|
|
47
|
-
storageKey,
|
|
48
|
-
keyboardStep,
|
|
49
48
|
isDisabled = false,
|
|
50
|
-
|
|
49
|
+
keyboardStep,
|
|
51
50
|
storage,
|
|
52
|
-
|
|
51
|
+
storageKey,
|
|
53
52
|
groupProps,
|
|
53
|
+
onLayout,
|
|
54
54
|
...rest
|
|
55
55
|
}) => {
|
|
56
56
|
const uuid = (0, import_react.useId)();
|
|
@@ -65,12 +65,12 @@ var useResizable = ({
|
|
|
65
65
|
return {
|
|
66
66
|
...props,
|
|
67
67
|
id,
|
|
68
|
-
direction,
|
|
69
|
-
tagName: as,
|
|
70
68
|
autoSaveId: storageKey,
|
|
69
|
+
direction,
|
|
71
70
|
keyboardResizeBy: keyboardStep,
|
|
72
|
-
onLayout,
|
|
73
71
|
storage,
|
|
72
|
+
tagName: as,
|
|
73
|
+
onLayout,
|
|
74
74
|
...rest2
|
|
75
75
|
};
|
|
76
76
|
},
|
|
@@ -79,7 +79,7 @@ var useResizable = ({
|
|
|
79
79
|
(0, import_react.useEffect)(() => {
|
|
80
80
|
if (!id) return;
|
|
81
81
|
const el = (0, import_react_resizable_panels.getPanelGroupElement)(id);
|
|
82
|
-
if (ref) ref.current = el;
|
|
82
|
+
if ((0, import_utils.isRefObject)(ref)) ref.current = el;
|
|
83
83
|
}, [ref, id]);
|
|
84
84
|
return {
|
|
85
85
|
isDisabled,
|
|
@@ -92,15 +92,15 @@ var useResizableItem = ({
|
|
|
92
92
|
ref,
|
|
93
93
|
collapsedSize,
|
|
94
94
|
collapsible,
|
|
95
|
+
controlRef,
|
|
95
96
|
defaultSize,
|
|
96
97
|
maxSize,
|
|
97
98
|
minSize,
|
|
99
|
+
order,
|
|
100
|
+
containerProps,
|
|
98
101
|
onCollapse,
|
|
99
102
|
onExpand,
|
|
100
103
|
onResize,
|
|
101
|
-
order,
|
|
102
|
-
controlRef,
|
|
103
|
-
containerProps,
|
|
104
104
|
...innerProps
|
|
105
105
|
}) => {
|
|
106
106
|
const uuid = (0, import_react.useId)();
|
|
@@ -110,18 +110,18 @@ var useResizableItem = ({
|
|
|
110
110
|
const { as, ...rest } = containerProps != null ? containerProps : {};
|
|
111
111
|
return {
|
|
112
112
|
...props,
|
|
113
|
-
ref: controlRef,
|
|
114
113
|
id,
|
|
115
|
-
|
|
114
|
+
ref: controlRef,
|
|
115
|
+
collapsedSize,
|
|
116
116
|
collapsible,
|
|
117
117
|
defaultSize,
|
|
118
118
|
maxSize,
|
|
119
119
|
minSize,
|
|
120
|
-
|
|
120
|
+
order,
|
|
121
|
+
tagName: as,
|
|
121
122
|
onCollapse,
|
|
122
123
|
onExpand,
|
|
123
124
|
onResize,
|
|
124
|
-
order,
|
|
125
125
|
...collapsible ? { "aria-labelledby": id } : { "aria-label": id },
|
|
126
126
|
...rest
|
|
127
127
|
};
|
|
@@ -148,11 +148,11 @@ var useResizableItem = ({
|
|
|
148
148
|
(0, import_react.useEffect)(() => {
|
|
149
149
|
if (!id) return;
|
|
150
150
|
const el = (0, import_react_resizable_panels.getPanelElement)(id);
|
|
151
|
-
if (ref) ref.current = el;
|
|
151
|
+
if ((0, import_utils.isRefObject)(ref)) ref.current = el;
|
|
152
152
|
}, [ref, id]);
|
|
153
153
|
return {
|
|
154
|
-
|
|
155
|
-
|
|
154
|
+
getItemProps,
|
|
155
|
+
getPanelProps
|
|
156
156
|
};
|
|
157
157
|
};
|
|
158
158
|
var useResizableTrigger = ({
|
|
@@ -173,16 +173,16 @@ var useResizableTrigger = ({
|
|
|
173
173
|
(props = {}) => ({
|
|
174
174
|
...props,
|
|
175
175
|
id,
|
|
176
|
-
tagName: as,
|
|
177
176
|
disabled: trulyDisabled,
|
|
177
|
+
tagName: as,
|
|
178
178
|
onDragging: (0, import_utils.handlerAll)(onDragging, (isActive2) => setIsActive(isActive2)),
|
|
179
179
|
...rest,
|
|
180
|
-
"data-active": (0, import_utils.dataAttr)(isActive),
|
|
181
180
|
style: {
|
|
182
181
|
...props.style,
|
|
183
182
|
...rest.style,
|
|
184
183
|
...trulyDisabled ? { cursor: "default" } : {}
|
|
185
|
-
}
|
|
184
|
+
},
|
|
185
|
+
"data-active": (0, import_utils.dataAttr)(isActive)
|
|
186
186
|
}),
|
|
187
187
|
[id, as, trulyDisabled, onDragging, rest, isActive]
|
|
188
188
|
);
|
|
@@ -197,11 +197,11 @@ var useResizableTrigger = ({
|
|
|
197
197
|
(0, import_react.useEffect)(() => {
|
|
198
198
|
if (!id) return;
|
|
199
199
|
const el = (0, import_react_resizable_panels.getResizeHandleElement)(id);
|
|
200
|
-
if (ref) ref.current = el;
|
|
200
|
+
if ((0, import_utils.isRefObject)(ref)) ref.current = el;
|
|
201
201
|
}, [ref, id]);
|
|
202
202
|
return {
|
|
203
|
-
|
|
204
|
-
|
|
203
|
+
getIconProps,
|
|
204
|
+
getTriggerProps
|
|
205
205
|
};
|
|
206
206
|
};
|
|
207
207
|
|
|
@@ -218,7 +218,7 @@ var Resizable = (0, import_core.forwardRef)(
|
|
|
218
218
|
ref,
|
|
219
219
|
...computedProps
|
|
220
220
|
});
|
|
221
|
-
const css = {
|
|
221
|
+
const css = { h: "100%", w: "100%", ...styles.container };
|
|
222
222
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResizableProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
223
223
|
import_core.ui.div,
|
|
224
224
|
{
|
|
@@ -241,25 +241,25 @@ var UIPanel = (0, import_core2.ui)(import_react_resizable_panels3.Panel, { disab
|
|
|
241
241
|
var ResizableItem = (0, import_core2.forwardRef)(
|
|
242
242
|
({
|
|
243
243
|
className,
|
|
244
|
+
boxSize,
|
|
244
245
|
children,
|
|
246
|
+
h,
|
|
247
|
+
height,
|
|
245
248
|
innerRef,
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
minW,
|
|
249
|
-
minWidth,
|
|
249
|
+
maxH,
|
|
250
|
+
maxHeight,
|
|
250
251
|
maxW,
|
|
251
252
|
maxWidth,
|
|
252
|
-
h,
|
|
253
|
-
height,
|
|
254
253
|
minH,
|
|
255
254
|
minHeight,
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
255
|
+
minW,
|
|
256
|
+
minWidth,
|
|
257
|
+
w,
|
|
258
|
+
width,
|
|
259
259
|
...rest
|
|
260
260
|
}, ref) => {
|
|
261
261
|
const { styles } = useResizableContext();
|
|
262
|
-
const {
|
|
262
|
+
const { getItemProps, getPanelProps } = useResizableItem({
|
|
263
263
|
ref,
|
|
264
264
|
...rest
|
|
265
265
|
});
|
|
@@ -268,19 +268,19 @@ var ResizableItem = (0, import_core2.forwardRef)(
|
|
|
268
268
|
UIPanel,
|
|
269
269
|
{
|
|
270
270
|
...getPanelProps({
|
|
271
|
-
|
|
272
|
-
width,
|
|
273
|
-
minW,
|
|
274
|
-
minWidth,
|
|
275
|
-
maxW,
|
|
276
|
-
maxWidth,
|
|
271
|
+
boxSize,
|
|
277
272
|
h,
|
|
278
273
|
height,
|
|
279
|
-
minH,
|
|
280
|
-
minHeight,
|
|
281
274
|
maxH,
|
|
282
275
|
maxHeight,
|
|
283
|
-
|
|
276
|
+
maxW,
|
|
277
|
+
maxWidth,
|
|
278
|
+
minH,
|
|
279
|
+
minHeight,
|
|
280
|
+
minW,
|
|
281
|
+
minWidth,
|
|
282
|
+
w,
|
|
283
|
+
width
|
|
284
284
|
}),
|
|
285
285
|
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
286
286
|
import_core2.ui.div,
|
|
@@ -304,9 +304,9 @@ var import_react2 = require("react");
|
|
|
304
304
|
var import_react_resizable_panels4 = require("react-resizable-panels");
|
|
305
305
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
306
306
|
var ResizableTrigger = (0, import_react2.forwardRef)(
|
|
307
|
-
({ className,
|
|
307
|
+
({ className, children, icon, iconProps, ...rest }, ref) => {
|
|
308
308
|
const { styles } = useResizableContext();
|
|
309
|
-
const {
|
|
309
|
+
const { getIconProps, getTriggerProps } = useResizableTrigger({
|
|
310
310
|
ref,
|
|
311
311
|
...rest
|
|
312
312
|
});
|
|
@@ -324,15 +324,15 @@ var ResizableTrigger = (0, import_react2.forwardRef)(
|
|
|
324
324
|
{
|
|
325
325
|
className: "ui-resizable__trigger__icon",
|
|
326
326
|
__css: {
|
|
327
|
+
alignItems: "center",
|
|
328
|
+
display: "flex",
|
|
329
|
+
justifyContent: "center",
|
|
330
|
+
left: "50%",
|
|
327
331
|
position: "absolute",
|
|
328
332
|
top: "50%",
|
|
329
|
-
left: "50%",
|
|
330
333
|
transform: "auto",
|
|
331
|
-
translateY: "-50%",
|
|
332
334
|
translateX: "-50%",
|
|
333
|
-
|
|
334
|
-
justifyContent: "center",
|
|
335
|
-
alignItems: "center",
|
|
335
|
+
translateY: "-50%",
|
|
336
336
|
...styles.icon
|
|
337
337
|
},
|
|
338
338
|
...getIconProps(iconProps),
|
|
@@ -347,7 +347,7 @@ var ResizableTrigger = (0, import_react2.forwardRef)(
|
|
|
347
347
|
);
|
|
348
348
|
ResizableTrigger.displayName = "ResizableTrigger";
|
|
349
349
|
var ResizableTriggerIcon = (rest) => {
|
|
350
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_icon.Icon, { viewBox: "0 0 23 39", w: "0.5rem",
|
|
350
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_icon.Icon, { h: "1rem", viewBox: "0 0 23 39", w: "0.5rem", ...rest, children: [
|
|
351
351
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
352
352
|
"path",
|
|
353
353
|
{
|