@yamada-ui/resizable 1.0.1 → 1.0.2-dev-20240201052923

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 (16) hide show
  1. package/dist/{chunk-DVZSQNDW.mjs → chunk-DTRCWMPS.mjs} +3 -3
  2. package/dist/{chunk-OSM43TND.mjs → chunk-HBNQ2Q6Y.mjs} +1 -1
  3. package/dist/chunk-NFVI5AHG.mjs +72 -0
  4. package/dist/{chunk-VSORTT66.mjs → chunk-Z6HNBICR.mjs} +1 -1
  5. package/dist/index.js +49 -10
  6. package/dist/index.mjs +4 -4
  7. package/dist/resizable-item.js +49 -10
  8. package/dist/resizable-item.mjs +2 -2
  9. package/dist/resizable-trigger.mjs +2 -2
  10. package/dist/resizable.mjs +2 -2
  11. package/dist/use-resizable.d.mts +4 -4
  12. package/dist/use-resizable.d.ts +4 -4
  13. package/dist/use-resizable.js +3 -3
  14. package/dist/use-resizable.mjs +1 -1
  15. package/package.json +1 -1
  16. package/dist/chunk-PA5IMAOA.mjs +0 -33
package/dist/{chunk-DVZSQNDW.mjs → chunk-DTRCWMPS.mjs} RENAMED
@@ -70,13 +70,13 @@ var useResizableItem = ({
70
70
  onResize,
71
71
  order,
72
72
  controlRef,
73
- itemProps,
73
+ containerProps,
74
74
  ...innerProps
75
75
  }) => {
76
76
  id != null ? id : id = useId();
77
77
  const getPanelProps = useCallback(
78
78
  (props = {}) => {
79
- const { as, ...rest } = itemProps != null ? itemProps : {};
79
+ const { as, ...rest } = containerProps != null ? containerProps : {};
80
80
  return {
81
81
  ...props,
82
82
  ref: controlRef,
@@ -97,7 +97,7 @@ var useResizableItem = ({
97
97
  [
98
98
  id,
99
99
  controlRef,
100
- itemProps,
100
+ containerProps,
101
101
  collapsedSize,
102
102
  collapsible,
103
103
  defaultSize,
package/dist/{chunk-OSM43TND.mjs → chunk-HBNQ2Q6Y.mjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  ResizableProvider,
3
3
  useResizable
4
- } from "./chunk-DVZSQNDW.mjs";
4
+ } from "./chunk-DTRCWMPS.mjs";
5
5
 
6
6
  // src/resizable.tsx
7
7
  import {
package/dist/chunk-NFVI5AHG.mjs ADDED
@@ -0,0 +1,72 @@
1
+ import {
2
+ useResizableContext,
3
+ useResizableItem
4
+ } from "./chunk-DTRCWMPS.mjs";
5
+
6
+ // src/resizable-item.tsx
7
+ import { ui, forwardRef } from "@yamada-ui/core";
8
+ import { cx } from "@yamada-ui/utils";
9
+ import { Panel } from "react-resizable-panels";
10
+ import { jsx } from "react/jsx-runtime";
11
+ var ResizableItem = forwardRef(
12
+ ({
13
+ className,
14
+ children,
15
+ innerRef,
16
+ w,
17
+ width,
18
+ minW,
19
+ minWidth,
20
+ maxW,
21
+ maxWidth,
22
+ h,
23
+ height,
24
+ minH,
25
+ minHeight,
26
+ maxH,
27
+ maxHeight,
28
+ boxSize,
29
+ ...rest
30
+ }, ref) => {
31
+ const { styles } = useResizableContext();
32
+ const { getPanelProps, getItemProps } = useResizableItem({
33
+ ref,
34
+ ...rest
35
+ });
36
+ const css = { boxSize: "full", ...styles.item };
37
+ return /* @__PURE__ */ jsx(
38
+ ui.div,
39
+ {
40
+ as: Panel,
41
+ ...getPanelProps({
42
+ w,
43
+ width,
44
+ minW,
45
+ minWidth,
46
+ maxW,
47
+ maxWidth,
48
+ h,
49
+ height,
50
+ minH,
51
+ minHeight,
52
+ maxH,
53
+ maxHeight,
54
+ boxSize
55
+ }),
56
+ children: /* @__PURE__ */ jsx(
57
+ ui.div,
58
+ {
59
+ className: cx("ui-resizable__item", className),
60
+ __css: css,
61
+ ...getItemProps({}, innerRef),
62
+ children
63
+ }
64
+ )
65
+ }
66
+ );
67
+ }
68
+ );
69
+
70
+ export {
71
+ ResizableItem
72
+ };
package/dist/{chunk-VSORTT66.mjs → chunk-Z6HNBICR.mjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  useResizableContext,
3
3
  useResizableTrigger
4
- } from "./chunk-DVZSQNDW.mjs";
4
+ } from "./chunk-DTRCWMPS.mjs";
5
5
 
6
6
  // src/resizable-trigger.tsx
7
7
  import { ui, forwardRef } from "@yamada-ui/core";
package/dist/index.js CHANGED
@@ -100,13 +100,13 @@ var useResizableItem = ({
100
100
  onResize,
101
101
  order,
102
102
  controlRef,
103
- itemProps,
103
+ containerProps,
104
104
  ...innerProps
105
105
  }) => {
106
106
  id != null ? id : id = (0, import_react.useId)();
107
107
  const getPanelProps = (0, import_react.useCallback)(
108
108
  (props = {}) => {
109
- const { as, ...rest } = itemProps != null ? itemProps : {};
109
+ const { as, ...rest } = containerProps != null ? containerProps : {};
110
110
  return {
111
111
  ...props,
112
112
  ref: controlRef,
@@ -127,7 +127,7 @@ var useResizableItem = ({
127
127
  [
128
128
  id,
129
129
  controlRef,
130
- itemProps,
130
+ containerProps,
131
131
  collapsedSize,
132
132
  collapsible,
133
133
  defaultSize,
@@ -238,22 +238,61 @@ var import_utils3 = require("@yamada-ui/utils");
238
238
  var import_react_resizable_panels3 = require("react-resizable-panels");
239
239
  var import_jsx_runtime2 = require("react/jsx-runtime");
240
240
  var ResizableItem = (0, import_core2.forwardRef)(
241
- ({ className, children, innerRef, ...rest }, ref) => {
241
+ ({
242
+ className,
243
+ children,
244
+ innerRef,
245
+ w,
246
+ width,
247
+ minW,
248
+ minWidth,
249
+ maxW,
250
+ maxWidth,
251
+ h,
252
+ height,
253
+ minH,
254
+ minHeight,
255
+ maxH,
256
+ maxHeight,
257
+ boxSize,
258
+ ...rest
259
+ }, ref) => {
242
260
  const { styles } = useResizableContext();
243
261
  const { getPanelProps, getItemProps } = useResizableItem({
244
262
  ref,
245
263
  ...rest
246
264
  });
247
265
  const css = { boxSize: "full", ...styles.item };
248
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_resizable_panels3.Panel, { ...getPanelProps(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
266
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
249
267
  import_core2.ui.div,
250
268
  {
251
- className: (0, import_utils3.cx)("ui-resizable__item", className),
252
- __css: css,
253
- ...getItemProps({}, innerRef),
254
- children
269
+ as: import_react_resizable_panels3.Panel,
270
+ ...getPanelProps({
271
+ w,
272
+ width,
273
+ minW,
274
+ minWidth,
275
+ maxW,
276
+ maxWidth,
277
+ h,
278
+ height,
279
+ minH,
280
+ minHeight,
281
+ maxH,
282
+ maxHeight,
283
+ boxSize
284
+ }),
285
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
286
+ import_core2.ui.div,
287
+ {
288
+ className: (0, import_utils3.cx)("ui-resizable__item", className),
289
+ __css: css,
290
+ ...getItemProps({}, innerRef),
291
+ children
292
+ }
293
+ )
255
294
  }
256
- ) });
295
+ );
257
296
  }
258
297
  );
259
298
 
package/dist/index.mjs CHANGED
@@ -1,14 +1,14 @@
1
1
  import {
2
2
  ResizableItem
3
- } from "./chunk-PA5IMAOA.mjs";
3
+ } from "./chunk-NFVI5AHG.mjs";
4
4
  import {
5
5
  ResizableTrigger,
6
6
  ResizableTriggerIcon
7
- } from "./chunk-VSORTT66.mjs";
7
+ } from "./chunk-Z6HNBICR.mjs";
8
8
  import {
9
9
  Resizable
10
- } from "./chunk-OSM43TND.mjs";
11
- import "./chunk-DVZSQNDW.mjs";
10
+ } from "./chunk-HBNQ2Q6Y.mjs";
11
+ import "./chunk-DTRCWMPS.mjs";
12
12
  export {
13
13
  Resizable,
14
14
  ResizableItem,
package/dist/resizable-item.js CHANGED
@@ -48,13 +48,13 @@ var useResizableItem = ({
48
48
  onResize,
49
49
  order,
50
50
  controlRef,
51
- itemProps,
51
+ containerProps,
52
52
  ...innerProps
53
53
  }) => {
54
54
  id != null ? id : id = (0, import_react.useId)();
55
55
  const getPanelProps = (0, import_react.useCallback)(
56
56
  (props = {}) => {
57
- const { as, ...rest } = itemProps != null ? itemProps : {};
57
+ const { as, ...rest } = containerProps != null ? containerProps : {};
58
58
  return {
59
59
  ...props,
60
60
  ref: controlRef,
@@ -75,7 +75,7 @@ var useResizableItem = ({
75
75
  [
76
76
  id,
77
77
  controlRef,
78
- itemProps,
78
+ containerProps,
79
79
  collapsedSize,
80
80
  collapsible,
81
81
  defaultSize,
@@ -107,22 +107,61 @@ var useResizableItem = ({
107
107
  // src/resizable-item.tsx
108
108
  var import_jsx_runtime = require("react/jsx-runtime");
109
109
  var ResizableItem = (0, import_core.forwardRef)(
110
- ({ className, children, innerRef, ...rest }, ref) => {
110
+ ({
111
+ className,
112
+ children,
113
+ innerRef,
114
+ w,
115
+ width,
116
+ minW,
117
+ minWidth,
118
+ maxW,
119
+ maxWidth,
120
+ h,
121
+ height,
122
+ minH,
123
+ minHeight,
124
+ maxH,
125
+ maxHeight,
126
+ boxSize,
127
+ ...rest
128
+ }, ref) => {
111
129
  const { styles } = useResizableContext();
112
130
  const { getPanelProps, getItemProps } = useResizableItem({
113
131
  ref,
114
132
  ...rest
115
133
  });
116
134
  const css = { boxSize: "full", ...styles.item };
117
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels2.Panel, { ...getPanelProps(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
135
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
118
136
  import_core.ui.div,
119
137
  {
120
- className: (0, import_utils2.cx)("ui-resizable__item", className),
121
- __css: css,
122
- ...getItemProps({}, innerRef),
123
- children
138
+ as: import_react_resizable_panels2.Panel,
139
+ ...getPanelProps({
140
+ w,
141
+ width,
142
+ minW,
143
+ minWidth,
144
+ maxW,
145
+ maxWidth,
146
+ h,
147
+ height,
148
+ minH,
149
+ minHeight,
150
+ maxH,
151
+ maxHeight,
152
+ boxSize
153
+ }),
154
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
155
+ import_core.ui.div,
156
+ {
157
+ className: (0, import_utils2.cx)("ui-resizable__item", className),
158
+ __css: css,
159
+ ...getItemProps({}, innerRef),
160
+ children
161
+ }
162
+ )
124
163
  }
125
- ) });
164
+ );
126
165
  }
127
166
  );
128
167
  // Annotate the CommonJS export names for ESM import in node:
package/dist/resizable-item.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  ResizableItem
3
- } from "./chunk-PA5IMAOA.mjs";
4
- import "./chunk-DVZSQNDW.mjs";
3
+ } from "./chunk-NFVI5AHG.mjs";
4
+ import "./chunk-DTRCWMPS.mjs";
5
5
  export {
6
6
  ResizableItem
7
7
  };
package/dist/resizable-trigger.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  ResizableTrigger,
3
3
  ResizableTriggerIcon
4
- } from "./chunk-VSORTT66.mjs";
5
- import "./chunk-DVZSQNDW.mjs";
4
+ } from "./chunk-Z6HNBICR.mjs";
5
+ import "./chunk-DTRCWMPS.mjs";
6
6
  export {
7
7
  ResizableTrigger,
8
8
  ResizableTriggerIcon
package/dist/resizable.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  Resizable
3
- } from "./chunk-OSM43TND.mjs";
4
- import "./chunk-DVZSQNDW.mjs";
3
+ } from "./chunk-HBNQ2Q6Y.mjs";
4
+ import "./chunk-DTRCWMPS.mjs";
5
5
  export {
6
6
  Resizable
7
7
  };
package/dist/use-resizable.d.mts CHANGED
@@ -5,7 +5,7 @@ import { PropGetter } from '@yamada-ui/utils';
5
5
  import { PanelGroupStorage, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelProps, PanelResizeHandleProps } from 'react-resizable-panels';
6
6
 
7
7
  type GroupPropGetter = (props?: Partial<PanelGroupProps>) => PanelGroupProps;
8
- type ItemPropGetter = (props?: PanelProps) => PanelProps;
8
+ type ItemPropGetter = (props?: HTMLUIProps<"div"> & PanelProps) => PanelProps;
9
9
  type TriggerPropGetter = (props?: PanelResizeHandleProps) => PanelResizeHandleProps;
10
10
  type As = {
11
11
  as?: keyof HTMLElementTagNameMap;
@@ -122,12 +122,12 @@ type UseResizableItemOptions = {
122
122
  */
123
123
  controlRef?: RefObject<ResizableItemControl>;
124
124
  /**
125
- * Props for resizable item component.
125
+ * Props for resizable item container element.
126
126
  */
127
- itemProps?: ResizableItemProps;
127
+ containerProps?: Omit<HTMLUIProps<"div">, "as"> & ResizableItemProps;
128
128
  };
129
129
  type UseResizableItemProps = Omit<HTMLUIProps<"div">, keyof UseResizableItemOptions> & UseResizableItemOptions;
130
- declare const useResizableItem: ({ id, ref, collapsedSize, collapsible, defaultSize, maxSize, minSize, onCollapse, onExpand, onResize, order, controlRef, itemProps, ...innerProps }: UseResizableItemProps) => {
130
+ declare const useResizableItem: ({ id, ref, collapsedSize, collapsible, defaultSize, maxSize, minSize, onCollapse, onExpand, onResize, order, controlRef, containerProps, ...innerProps }: UseResizableItemProps) => {
131
131
  getPanelProps: ItemPropGetter;
132
132
  getItemProps: UIPropGetter;
133
133
  };
package/dist/use-resizable.d.ts CHANGED
@@ -5,7 +5,7 @@ import { PropGetter } from '@yamada-ui/utils';
5
5
  import { PanelGroupStorage, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelProps, PanelResizeHandleProps } from 'react-resizable-panels';
6
6
 
7
7
  type GroupPropGetter = (props?: Partial<PanelGroupProps>) => PanelGroupProps;
8
- type ItemPropGetter = (props?: PanelProps) => PanelProps;
8
+ type ItemPropGetter = (props?: HTMLUIProps<"div"> & PanelProps) => PanelProps;
9
9
  type TriggerPropGetter = (props?: PanelResizeHandleProps) => PanelResizeHandleProps;
10
10
  type As = {
11
11
  as?: keyof HTMLElementTagNameMap;
@@ -122,12 +122,12 @@ type UseResizableItemOptions = {
122
122
  */
123
123
  controlRef?: RefObject<ResizableItemControl>;
124
124
  /**
125
- * Props for resizable item component.
125
+ * Props for resizable item container element.
126
126
  */
127
- itemProps?: ResizableItemProps;
127
+ containerProps?: Omit<HTMLUIProps<"div">, "as"> & ResizableItemProps;
128
128
  };
129
129
  type UseResizableItemProps = Omit<HTMLUIProps<"div">, keyof UseResizableItemOptions> & UseResizableItemOptions;
130
- declare const useResizableItem: ({ id, ref, collapsedSize, collapsible, defaultSize, maxSize, minSize, onCollapse, onExpand, onResize, order, controlRef, itemProps, ...innerProps }: UseResizableItemProps) => {
130
+ declare const useResizableItem: ({ id, ref, collapsedSize, collapsible, defaultSize, maxSize, minSize, onCollapse, onExpand, onResize, order, controlRef, containerProps, ...innerProps }: UseResizableItemProps) => {
131
131
  getPanelProps: ItemPropGetter;
132
132
  getItemProps: UIPropGetter;
133
133
  };
package/dist/use-resizable.js CHANGED
@@ -94,13 +94,13 @@ var useResizableItem = ({
94
94
  onResize,
95
95
  order,
96
96
  controlRef,
97
- itemProps,
97
+ containerProps,
98
98
  ...innerProps
99
99
  }) => {
100
100
  id != null ? id : id = (0, import_react.useId)();
101
101
  const getPanelProps = (0, import_react.useCallback)(
102
102
  (props = {}) => {
103
- const { as, ...rest } = itemProps != null ? itemProps : {};
103
+ const { as, ...rest } = containerProps != null ? containerProps : {};
104
104
  return {
105
105
  ...props,
106
106
  ref: controlRef,
@@ -121,7 +121,7 @@ var useResizableItem = ({
121
121
  [
122
122
  id,
123
123
  controlRef,
124
- itemProps,
124
+ containerProps,
125
125
  collapsedSize,
126
126
  collapsible,
127
127
  defaultSize,
package/dist/use-resizable.mjs CHANGED
@@ -4,7 +4,7 @@ import {
4
4
  useResizableContext,
5
5
  useResizableItem,
6
6
  useResizableTrigger
7
- } from "./chunk-DVZSQNDW.mjs";
7
+ } from "./chunk-DTRCWMPS.mjs";
8
8
  export {
9
9
  ResizableProvider,
10
10
  useResizable,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/resizable",
3
- "version": "1.0.1",
3
+ "version": "1.0.2-dev-20240201052923",
4
4
  "description": "Yamada UI resizable component",
5
5
  "keywords": [
6
6
  "yamada",
package/dist/chunk-PA5IMAOA.mjs DELETED
@@ -1,33 +0,0 @@
1
- import {
2
- useResizableContext,
3
- useResizableItem
4
- } from "./chunk-DVZSQNDW.mjs";
5
-
6
- // src/resizable-item.tsx
7
- import { ui, forwardRef } from "@yamada-ui/core";
8
- import { cx } from "@yamada-ui/utils";
9
- import { Panel } from "react-resizable-panels";
10
- import { jsx } from "react/jsx-runtime";
11
- var ResizableItem = forwardRef(
12
- ({ className, children, innerRef, ...rest }, ref) => {
13
- const { styles } = useResizableContext();
14
- const { getPanelProps, getItemProps } = useResizableItem({
15
- ref,
16
- ...rest
17
- });
18
- const css = { boxSize: "full", ...styles.item };
19
- return /* @__PURE__ */ jsx(Panel, { ...getPanelProps(), children: /* @__PURE__ */ jsx(
20
- ui.div,
21
- {
22
- className: cx("ui-resizable__item", className),
23
- __css: css,
24
- ...getItemProps({}, innerRef),
25
- children
26
- }
27
- ) });
28
- }
29
- );
30
-
31
- export {
32
- ResizableItem
33
- };