@yamada-ui/resizable 1.2.4-dev-20241212101624 → 1.3.0-dev-20241213204523

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 (27) hide show
  1. package/dist/{chunk-ECNT6LJV.mjs → chunk-KGV3GLXC.mjs} +2 -2
  2. package/dist/{chunk-G6HLTSUK.mjs → chunk-KTGBOEYI.mjs} +14 -13
  3. package/dist/chunk-KTGBOEYI.mjs.map +1 -0
  4. package/dist/{chunk-62N65DW7.mjs → chunk-VGX275YX.mjs} +4 -3
  5. package/dist/chunk-VGX275YX.mjs.map +1 -0
  6. package/dist/{chunk-P6HFD7WR.mjs → chunk-W4YKVFWF.mjs} +2 -2
  7. package/dist/index.js +15 -13
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.mjs +4 -4
  10. package/dist/resizable-item.js.map +1 -1
  11. package/dist/resizable-item.mjs +2 -2
  12. package/dist/resizable-trigger.js +7 -7
  13. package/dist/resizable-trigger.js.map +1 -1
  14. package/dist/resizable-trigger.mjs +2 -2
  15. package/dist/resizable.js +8 -6
  16. package/dist/resizable.js.map +1 -1
  17. package/dist/resizable.mjs +2 -2
  18. package/dist/use-resizable.d.mts +41 -33
  19. package/dist/use-resizable.d.ts +41 -33
  20. package/dist/use-resizable.js +13 -12
  21. package/dist/use-resizable.js.map +1 -1
  22. package/dist/use-resizable.mjs +1 -1
  23. package/package.json +4 -4
  24. package/dist/chunk-62N65DW7.mjs.map +0 -1
  25. package/dist/chunk-G6HLTSUK.mjs.map +0 -1
  26. /package/dist/{chunk-ECNT6LJV.mjs.map → chunk-KGV3GLXC.mjs.map} +0 -0
  27. /package/dist/{chunk-P6HFD7WR.mjs.map → chunk-W4YKVFWF.mjs.map} +0 -0
package/dist/use-resizable.d.ts CHANGED
@@ -4,7 +4,7 @@ import { PropGetter, HTMLUIProps, HTMLUIPropsWithoutAs, CSSUIObject } from '@yam
4
4
  import { Merge } from '@yamada-ui/utils';
5
5
  import { PanelGroupStorage, ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelProps, PanelResizeHandleProps } from 'react-resizable-panels';
6
6
 
7
- type ResizableDirection = "horizontal" | "vertical";
7
+ type ResizableOrientation = "horizontal" | "vertical";
8
8
  type As = keyof HTMLElementTagNameMap;
9
9
  interface ResizableGroupProps extends Omit<Partial<PanelGroupProps>, "children" | "id" | "tagName"> {
10
10
  as?: As;
@@ -23,8 +23,8 @@ interface ResizableItemControl extends ImperativePanelHandle {
23
23
  }
24
24
  interface ResizableContext {
25
25
  controlRef: RefObject<ResizableGroupControl>;
26
- direction: ResizableDirection;
27
26
  disabled: boolean;
27
+ orientation: ResizableOrientation;
28
28
  styles: {
29
29
  [key: string]: CSSUIObject | undefined;
30
30
  };
@@ -48,8 +48,10 @@ interface UseResizableProps {
48
48
  * The direction of the resizable.
49
49
  *
50
50
  * @default "horizontal"
51
+ *
52
+ * @deprecated Use `orientation` instead.
51
53
  */
52
- direction?: ResizableDirection;
54
+ direction?: ResizableOrientation;
53
55
  /**
54
56
  * If `true`, the resizable trigger will be disabled.
55
57
  */
@@ -66,6 +68,12 @@ interface UseResizableProps {
66
68
  * @default 10
67
69
  */
68
70
  keyboardStep?: number;
71
+ /**
72
+ * The orientation of the resizable.
73
+ *
74
+ * @default "horizontal"
75
+ */
76
+ orientation?: ResizableOrientation;
69
77
  /**
70
78
  * A callback that gets and sets a value in custom storage.
71
79
  */
@@ -84,45 +92,41 @@ interface UseResizableProps {
84
92
  */
85
93
  onLayout?: PanelGroupOnLayout;
86
94
  }
87
- declare const useResizable: ({ id, ref, controlRef: controlRefProp, direction, disabled, isDisabled, keyboardStep, storage, storageKey, groupProps, onLayout, ...rest }: UseResizableProps) => {
95
+ declare const useResizable: ({ id, ref, controlRef: controlRefProp, direction, isDisabled, disabled, keyboardStep, orientation, storage, storageKey, groupProps, onLayout, ...rest }: UseResizableProps) => {
88
96
  controlRef: RefObject<ResizableGroupControl>;
89
- direction: ResizableDirection;
90
97
  disabled: boolean;
98
+ orientation: ResizableOrientation;
91
99
  getContainerProps: PropGetter<"div", undefined>;
92
100
  getGroupProps: (props?: Partial<PanelGroupProps>) => {
93
- "aria-disabled"?: (boolean | "false" | "true") | undefined;
94
- slot?: string | undefined;
95
101
  style?: react.CSSProperties | undefined;
102
+ slot?: string | undefined;
96
103
  title?: string | undefined;
97
- dir?: "ltr" | "rtl" | "auto" | undefined;
98
- defaultValue?: string | number | readonly string[] | undefined;
99
104
  color?: string | undefined;
100
- direction: "vertical" | "horizontal";
101
- nonce?: string | undefined;
102
- onAnimationStart?: react.AnimationEventHandler<keyof HTMLElementTagNameMap> | undefined;
103
- onDragStart?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
104
- onDragEnd?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
105
- onDrag?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
105
+ content?: string | undefined;
106
+ direction: "horizontal" | "vertical";
107
+ translate?: "yes" | "no" | undefined;
108
+ onResize?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
106
109
  defaultChecked?: boolean | undefined;
110
+ defaultValue?: string | number | readonly string[] | undefined;
107
111
  suppressContentEditableWarning?: boolean | undefined;
108
112
  suppressHydrationWarning?: boolean | undefined;
109
113
  accessKey?: string | undefined;
110
114
  autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
111
115
  autoFocus?: boolean | undefined;
112
116
  className?: string | undefined;
113
- contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
117
+ contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
114
118
  contextMenu?: string | undefined;
115
- draggable?: (boolean | "false" | "true") | undefined;
119
+ dir?: "auto" | "ltr" | "rtl" | undefined;
120
+ draggable?: (boolean | "true" | "false") | undefined;
116
121
  enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
117
122
  hidden?: boolean | undefined;
118
123
  lang?: string | undefined;
119
- spellCheck?: (boolean | "false" | "true") | undefined;
124
+ nonce?: string | undefined;
125
+ spellCheck?: (boolean | "true" | "false") | undefined;
120
126
  tabIndex?: number | undefined;
121
- translate?: "yes" | "no" | undefined;
122
127
  radioGroup?: string | undefined;
123
128
  role?: react.AriaRole | undefined;
124
129
  about?: string | undefined;
125
- content?: string | undefined;
126
130
  datatype?: string | undefined;
127
131
  inlist?: any;
128
132
  prefix?: string | undefined;
@@ -145,11 +149,11 @@ declare const useResizable: ({ id, ref, controlRef: controlRefProp, direction, d
145
149
  inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
146
150
  is?: string | undefined;
147
151
  "aria-activedescendant"?: string | undefined;
148
- "aria-atomic"?: (boolean | "false" | "true") | undefined;
152
+ "aria-atomic"?: (boolean | "true" | "false") | undefined;
149
153
  "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
150
154
  "aria-braillelabel"?: string | undefined;
151
155
  "aria-brailleroledescription"?: string | undefined;
152
- "aria-busy"?: (boolean | "false" | "true") | undefined;
156
+ "aria-busy"?: (boolean | "true" | "false") | undefined;
153
157
  "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
154
158
  "aria-colcount"?: number | undefined;
155
159
  "aria-colindex"?: number | undefined;
@@ -160,36 +164,37 @@ declare const useResizable: ({ id, ref, controlRef: controlRefProp, direction, d
160
164
  "aria-describedby"?: string | undefined;
161
165
  "aria-description"?: string | undefined;
162
166
  "aria-details"?: string | undefined;
167
+ "aria-disabled"?: (boolean | "true" | "false") | undefined;
163
168
  "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
164
169
  "aria-errormessage"?: string | undefined;
165
- "aria-expanded"?: (boolean | "false" | "true") | undefined;
170
+ "aria-expanded"?: (boolean | "true" | "false") | undefined;
166
171
  "aria-flowto"?: string | undefined;
167
- "aria-grabbed"?: (boolean | "false" | "true") | undefined;
172
+ "aria-grabbed"?: (boolean | "true" | "false") | undefined;
168
173
  "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
169
- "aria-hidden"?: (boolean | "false" | "true") | undefined;
174
+ "aria-hidden"?: (boolean | "true" | "false") | undefined;
170
175
  "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
171
176
  "aria-keyshortcuts"?: string | undefined;
172
177
  "aria-label"?: string | undefined;
173
178
  "aria-labelledby"?: string | undefined;
174
179
  "aria-level"?: number | undefined;
175
180
  "aria-live"?: "off" | "assertive" | "polite" | undefined;
176
- "aria-modal"?: (boolean | "false" | "true") | undefined;
177
- "aria-multiline"?: (boolean | "false" | "true") | undefined;
178
- "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
181
+ "aria-modal"?: (boolean | "true" | "false") | undefined;
182
+ "aria-multiline"?: (boolean | "true" | "false") | undefined;
183
+ "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
179
184
  "aria-orientation"?: "horizontal" | "vertical" | undefined;
180
185
  "aria-owns"?: string | undefined;
181
186
  "aria-placeholder"?: string | undefined;
182
187
  "aria-posinset"?: number | undefined;
183
188
  "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
184
- "aria-readonly"?: (boolean | "false" | "true") | undefined;
189
+ "aria-readonly"?: (boolean | "true" | "false") | undefined;
185
190
  "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
186
- "aria-required"?: (boolean | "false" | "true") | undefined;
191
+ "aria-required"?: (boolean | "true" | "false") | undefined;
187
192
  "aria-roledescription"?: string | undefined;
188
193
  "aria-rowcount"?: number | undefined;
189
194
  "aria-rowindex"?: number | undefined;
190
195
  "aria-rowindextext"?: string | undefined;
191
196
  "aria-rowspan"?: number | undefined;
192
- "aria-selected"?: (boolean | "false" | "true") | undefined;
197
+ "aria-selected"?: (boolean | "true" | "false") | undefined;
193
198
  "aria-setsize"?: number | undefined;
194
199
  "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
195
200
  "aria-valuemax"?: number | undefined;
@@ -267,7 +272,6 @@ declare const useResizable: ({ id, ref, controlRef: controlRefProp, direction, d
267
272
  onProgressCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
268
273
  onRateChange?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
269
274
  onRateChangeCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
270
- onResize?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
271
275
  onResizeCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
272
276
  onSeeked?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
273
277
  onSeekedCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
@@ -291,7 +295,9 @@ declare const useResizable: ({ id, ref, controlRef: controlRefProp, direction, d
291
295
  onContextMenuCapture?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
292
296
  onDoubleClick?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
293
297
  onDoubleClickCapture?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
298
+ onDrag?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
294
299
  onDragCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
300
+ onDragEnd?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
295
301
  onDragEndCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
296
302
  onDragEnter?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
297
303
  onDragEnterCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
@@ -301,6 +307,7 @@ declare const useResizable: ({ id, ref, controlRef: controlRefProp, direction, d
301
307
  onDragLeaveCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
302
308
  onDragOver?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
303
309
  onDragOverCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
310
+ onDragStart?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
304
311
  onDragStartCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
305
312
  onDrop?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
306
313
  onDropCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
@@ -348,6 +355,7 @@ declare const useResizable: ({ id, ref, controlRef: controlRefProp, direction, d
348
355
  onScrollCapture?: react.UIEventHandler<keyof HTMLElementTagNameMap> | undefined;
349
356
  onWheel?: react.WheelEventHandler<keyof HTMLElementTagNameMap> | undefined;
350
357
  onWheelCapture?: react.WheelEventHandler<keyof HTMLElementTagNameMap> | undefined;
358
+ onAnimationStart?: react.AnimationEventHandler<keyof HTMLElementTagNameMap> | undefined;
351
359
  onAnimationStartCapture?: react.AnimationEventHandler<keyof HTMLElementTagNameMap> | undefined;
352
360
  onAnimationEnd?: react.AnimationEventHandler<keyof HTMLElementTagNameMap> | undefined;
353
361
  onAnimationEndCapture?: react.AnimationEventHandler<keyof HTMLElementTagNameMap> | undefined;
@@ -459,7 +467,7 @@ interface UseResizableTriggerOptions {
459
467
  }
460
468
  interface UseResizableTriggerProps extends Merge<ResizableTriggerProps, Omit<HTMLUIPropsWithoutAs, "id" | "onBlur" | "onFocus">>, UseResizableTriggerOptions {
461
469
  }
462
- declare const useResizableTrigger: ({ id, ref, as, disabled, isDisabled, ...rest }: UseResizableTriggerProps) => {
470
+ declare const useResizableTrigger: ({ id, ref, as, isDisabled, disabled, ...rest }: UseResizableTriggerProps) => {
463
471
  getIconProps: PropGetter<"div", undefined>;
464
472
  getTriggerProps: PropGetter<PanelResizeHandleProps, PanelResizeHandleProps>;
465
473
  };
package/dist/use-resizable.js CHANGED
@@ -40,9 +40,10 @@ var useResizable = ({
40
40
  ref,
41
41
  controlRef: controlRefProp,
42
42
  direction = "horizontal",
43
- disabled = false,
44
43
  isDisabled = false,
44
+ disabled = isDisabled,
45
45
  keyboardStep,
46
+ orientation = direction,
46
47
  storage,
47
48
  storageKey,
48
49
  groupProps,
@@ -64,7 +65,7 @@ var useResizable = ({
64
65
  id,
65
66
  ref: (0, import_utils.mergeRefs)(controlRefProp, controlRef),
66
67
  autoSaveId: storageKey,
67
- direction,
68
+ direction: orientation,
68
69
  keyboardResizeBy: keyboardStep,
69
70
  storage,
70
71
  tagName: as,
@@ -74,7 +75,7 @@ var useResizable = ({
74
75
  },
75
76
  [
76
77
  id,
77
- direction,
78
+ orientation,
78
79
  groupProps,
79
80
  controlRefProp,
80
81
  storageKey,
@@ -90,8 +91,8 @@ var useResizable = ({
90
91
  }, [ref, id]);
91
92
  return {
92
93
  controlRef,
93
- direction,
94
- disabled: disabled || isDisabled,
94
+ disabled,
95
+ orientation,
95
96
  getContainerProps,
96
97
  getGroupProps
97
98
  };
@@ -167,19 +168,19 @@ var useResizableTrigger = ({
167
168
  id,
168
169
  ref,
169
170
  as,
170
- disabled,
171
171
  isDisabled,
172
+ disabled = isDisabled,
172
173
  ...rest
173
174
  }) => {
174
175
  const uuid = (0, import_react.useId)();
175
- id != null ? id : id = uuid;
176
176
  const {
177
177
  controlRef,
178
- direction,
179
- disabled: groupDisabled
178
+ disabled: groupDisabled,
179
+ orientation
180
180
  } = useResizableContext();
181
+ id != null ? id : id = uuid;
181
182
  const [active, setActive] = (0, import_react.useState)(false);
182
- const trulyDisabled = disabled || isDisabled || groupDisabled;
183
+ const trulyDisabled = disabled || groupDisabled;
183
184
  const onDoubleClick = (0, import_react.useCallback)(
184
185
  (ev) => {
185
186
  var _a, _b;
@@ -197,7 +198,7 @@ var useResizableTrigger = ({
197
198
  (props = {}) => ({
198
199
  ...props,
199
200
  id,
200
- "aria-orientation": direction,
201
+ "aria-orientation": orientation,
201
202
  disabled: trulyDisabled,
202
203
  tagName: as,
203
204
  ...rest,
@@ -213,7 +214,7 @@ var useResizableTrigger = ({
213
214
  ),
214
215
  onDragging: (0, import_utils.handlerAll)(rest.onDragging, (active2) => setActive(active2))
215
216
  }),
216
- [id, as, direction, trulyDisabled, rest, onDoubleClick, active]
217
+ [id, as, orientation, trulyDisabled, rest, onDoubleClick, active]
217
218
  );
218
219
  const getIconProps = (0, import_react.useCallback)(
219
220
  (props = {}, ref2 = null) => ({
package/dist/use-resizable.js.map CHANGED
@@ -1 +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 {\n ForwardedRef,\n MouseEvent,\n MouseEventHandler,\n RefObject,\n} from \"react\"\nimport type {\n ImperativePanelGroupHandle,\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 mergeRefs,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport {\n getPanelElement,\n getPanelGroupElement,\n getResizeHandleElement,\n} from \"react-resizable-panels\"\n\ntype ResizableDirection = \"horizontal\" | \"vertical\"\n\nexport type As = keyof HTMLElementTagNameMap\n\ninterface ResizableGroupProps\n extends Omit<Partial<PanelGroupProps>, \"children\" | \"id\" | \"tagName\"> {\n as?: As\n}\ninterface ResizableItemProps\n extends Omit<PanelProps, \"children\" | \"id\" | \"tagName\"> {\n as?: As\n}\ninterface ResizableTriggerProps\n extends Omit<PanelResizeHandleProps, \"children\" | \"id\" | \"tagName\"> {\n as?: As\n}\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableGroupControl extends ImperativePanelGroupHandle {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableContext {\n controlRef: RefObject<ResizableGroupControl>\n direction: ResizableDirection\n disabled: 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 * Ref of the resizable item callback.\n */\n controlRef?: RefObject<ResizableGroupControl>\n /**\n * The direction of the resizable.\n *\n * @default \"horizontal\"\n */\n direction?: ResizableDirection\n /**\n * If `true`, the resizable trigger will be disabled.\n */\n disabled?: boolean\n /**\n * If `true`, the resizable trigger will be disabled.\n *\n * @deprecated Use `Disabled` instead.\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 controlRef: controlRefProp,\n direction = \"horizontal\",\n disabled = false,\n isDisabled = false,\n keyboardStep,\n storage,\n storageKey,\n groupProps,\n onLayout,\n ...rest\n}: UseResizableProps) => {\n const controlRef = useRef<ResizableGroupControl>(null)\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> = {}) => {\n const { as, ...rest } = groupProps ?? {}\n\n return {\n ...props,\n id,\n ref: mergeRefs(controlRefProp, controlRef),\n autoSaveId: storageKey,\n direction,\n keyboardResizeBy: keyboardStep,\n storage,\n tagName: as,\n onLayout,\n ...rest,\n }\n },\n [\n id,\n direction,\n groupProps,\n controlRefProp,\n storageKey,\n keyboardStep,\n onLayout,\n storage,\n ],\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 controlRef,\n direction,\n disabled: disabled || 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 ...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 disabled?: boolean\n /**\n * If `true`, the resizable trigger will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\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 ...rest\n}: UseResizableTriggerProps) => {\n const uuid = useId()\n\n id ??= uuid\n\n const {\n controlRef,\n direction,\n disabled: groupDisabled,\n } = useResizableContext()\n const [active, setActive] = useState<boolean>(false)\n\n const trulyDisabled = disabled || isDisabled || groupDisabled\n\n const onDoubleClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n ev.preventDefault()\n\n const layout = controlRef.current?.getLayout()\n\n if (!layout) return\n\n const count = layout.length\n const size = 100 / count\n const nextLayout = layout.map(() => size)\n\n controlRef.current?.setLayout(nextLayout)\n },\n [controlRef],\n )\n\n const getTriggerProps: PropGetter<\n PanelResizeHandleProps,\n PanelResizeHandleProps\n > = useCallback(\n (props = {}) =>\n ({\n ...props,\n id,\n \"aria-orientation\": direction,\n disabled: trulyDisabled,\n tagName: as,\n ...rest,\n style: {\n ...props.style,\n ...rest.style,\n ...(trulyDisabled ? { cursor: \"default\" } : {}),\n },\n \"data-active\": dataAttr(active),\n onDoubleClick: handlerAll(\n rest.onDoubleClick as MouseEventHandler<keyof typeof as>,\n onDoubleClick,\n ),\n onDragging: handlerAll(rest.onDragging, (active) => setActive(active)),\n }) as PanelResizeHandleProps,\n [id, as, direction, trulyDisabled, rest, onDoubleClick, active],\n )\n\n const getIconProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n \"data-active\": dataAttr(active),\n }),\n [active],\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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA,mBAMO;AACP,mBAAgE;AAChE,oCAIO;AA8BA,IAAM,CAAC,mBAAmB,mBAAmB,QAClD,4BAAgC;AAAA,EAC9B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAwDI,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyB;AACvB,QAAM,iBAAa,qBAA8B,IAAI;AACrD,QAAM,WAAO,oBAAM;AAEnB,yBAAO;AAEP,QAAM,wBAAgC;AAAA,IACpC,CAAC,QAAQ,CAAC,GAAGA,OAAM,UAAU,EAAE,GAAG,OAAO,KAAAA,MAAK,GAAG,KAAK;AAAA,IACtD,CAAC,IAAI;AAAA,EACP;AAEA,QAAM,oBAAgB;AAAA,IACpB,CAAC,QAAkC,CAAC,MAAM;AACxC,YAAM,EAAE,IAAI,GAAGC,MAAK,IAAI,kCAAc,CAAC;AAEvC,aAAO;AAAA,QACL,GAAG;AAAA,QACH;AAAA,QACA,SAAK,wBAAU,gBAAgB,UAAU;AAAA,QACzC,YAAY;AAAA,QACZ;AAAA,QACA,kBAAkB;AAAA,QAClB;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,GAAGA;AAAA,MACL;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC,GAAI;AAET,UAAM,SAAK,oDAAqB,EAAE;AAElC,YAAI,0BAAY,GAAG,EAAG,KAAI,UAAU;AAAA,EACtC,GAAG,CAAC,KAAK,EAAE,CAAC;AAEZ,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU,YAAY;AAAA,IACtB;AAAA,IACA;AAAA,EACF;AACF;AAiEO,IAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA6B;AAC3B,QAAM,WAAO,oBAAM;AAEnB,yBAAO;AAEP,QAAM,oBAGF;AAAA,IACF,CAAC,QAAQ,CAAC,MAAM;AACd,YAAM,EAAE,IAAI,GAAG,KAAK,IAAI,0CAAkB,CAAC;AAE3C,aAAO;AAAA,QACL,GAAG;AAAA,QACH;AAAA,QACA,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,mBAA2B;AAAA,IAC/B,CAAC,QAAQ,CAAC,GAAGD,OAAM,UAAU,EAAE,GAAG,OAAO,KAAAA,MAAK,GAAG,WAAW;AAAA,IAC5D,CAAC,UAAU;AAAA,EACb;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC,GAAI;AAET,UAAM,SAAK,+CAAgB,EAAE;AAE7B,YAAI,0BAAY,GAAG,EAAG,KAAI,UAAU;AAAA,EACtC,GAAG,CAAC,KAAK,EAAE,CAAC;AAEZ,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAwCO,IAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AAC9B,QAAM,WAAO,oBAAM;AAEnB,yBAAO;AAEP,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EACZ,IAAI,oBAAoB;AACxB,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AAEnD,QAAM,gBAAgB,YAAY,cAAc;AAEhD,QAAM,oBAAgB;AAAA,IACpB,CAAC,OAAmC;AA5YxC;AA6YM,SAAG,eAAe;AAElB,YAAM,UAAS,gBAAW,YAAX,mBAAoB;AAEnC,UAAI,CAAC,OAAQ;AAEb,YAAM,QAAQ,OAAO;AACrB,YAAM,OAAO,MAAM;AACnB,YAAM,aAAa,OAAO,IAAI,MAAM,IAAI;AAExC,uBAAW,YAAX,mBAAoB,UAAU;AAAA,IAChC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,sBAGF;AAAA,IACF,CAAC,QAAQ,CAAC,OACP;AAAA,MACC,GAAG;AAAA,MACH;AAAA,MACA,oBAAoB;AAAA,MACpB,UAAU;AAAA,MACV,SAAS;AAAA,MACT,GAAG;AAAA,MACH,OAAO;AAAA,QACL,GAAG,MAAM;AAAA,QACT,GAAG,KAAK;AAAA,QACR,GAAI,gBAAgB,EAAE,QAAQ,UAAU,IAAI,CAAC;AAAA,MAC/C;AAAA,MACA,mBAAe,uBAAS,MAAM;AAAA,MAC9B,mBAAe;AAAA,QACb,KAAK;AAAA,QACL;AAAA,MACF;AAAA,MACA,gBAAY,yBAAW,KAAK,YAAY,CAACE,YAAW,UAAUA,OAAM,CAAC;AAAA,IACvE;AAAA,IACF,CAAC,IAAI,IAAI,WAAW,eAAe,MAAM,eAAe,MAAM;AAAA,EAChE;AAEA,QAAM,mBAA2B;AAAA,IAC/B,CAAC,QAAQ,CAAC,GAAGF,OAAM,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,KAAAA;AAAA,MACA,mBAAe,uBAAS,MAAM;AAAA,IAChC;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC,GAAI;AAET,UAAM,SAAK,sDAAuB,EAAE;AAEpC,YAAI,0BAAY,GAAG,EAAG,KAAI,UAAU;AAAA,EACtC,GAAG,CAAC,KAAK,EAAE,CAAC;AAEZ,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":["ref","rest","active"]}
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 {\n ForwardedRef,\n MouseEvent,\n MouseEventHandler,\n RefObject,\n} from \"react\"\nimport type {\n ImperativePanelGroupHandle,\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 mergeRefs,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport {\n getPanelElement,\n getPanelGroupElement,\n getResizeHandleElement,\n} from \"react-resizable-panels\"\n\ntype ResizableOrientation = \"horizontal\" | \"vertical\"\n\nexport type As = keyof HTMLElementTagNameMap\n\ninterface ResizableGroupProps\n extends Omit<Partial<PanelGroupProps>, \"children\" | \"id\" | \"tagName\"> {\n as?: As\n}\ninterface ResizableItemProps\n extends Omit<PanelProps, \"children\" | \"id\" | \"tagName\"> {\n as?: As\n}\ninterface ResizableTriggerProps\n extends Omit<PanelResizeHandleProps, \"children\" | \"id\" | \"tagName\"> {\n as?: As\n}\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableGroupControl extends ImperativePanelGroupHandle {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableContext {\n controlRef: RefObject<ResizableGroupControl>\n disabled: boolean\n orientation: ResizableOrientation\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 * Ref of the resizable item callback.\n */\n controlRef?: RefObject<ResizableGroupControl>\n /**\n * The direction of the resizable.\n *\n * @default \"horizontal\"\n *\n * @deprecated Use `orientation` instead.\n */\n direction?: ResizableOrientation\n /**\n * If `true`, the resizable trigger will be disabled.\n */\n disabled?: boolean\n /**\n * If `true`, the resizable trigger will be disabled.\n *\n * @deprecated Use `Disabled` instead.\n */\n isDisabled?: boolean\n /**\n * Unit to resize by keyboard operation.\n *\n * @default 10\n */\n keyboardStep?: number\n /**\n * The orientation of the resizable.\n *\n * @default \"horizontal\"\n */\n orientation?: ResizableOrientation\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 controlRef: controlRefProp,\n direction = \"horizontal\",\n isDisabled = false,\n disabled = isDisabled,\n keyboardStep,\n orientation = direction,\n storage,\n storageKey,\n groupProps,\n onLayout,\n ...rest\n}: UseResizableProps) => {\n const controlRef = useRef<ResizableGroupControl>(null)\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> = {}) => {\n const { as, ...rest } = groupProps ?? {}\n\n return {\n ...props,\n id,\n ref: mergeRefs(controlRefProp, controlRef),\n autoSaveId: storageKey,\n direction: orientation,\n keyboardResizeBy: keyboardStep,\n storage,\n tagName: as,\n onLayout,\n ...rest,\n }\n },\n [\n id,\n orientation,\n groupProps,\n controlRefProp,\n storageKey,\n keyboardStep,\n onLayout,\n storage,\n ],\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 controlRef,\n disabled,\n orientation,\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 ...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 disabled?: boolean\n /**\n * If `true`, the resizable trigger will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\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 isDisabled,\n disabled = isDisabled,\n ...rest\n}: UseResizableTriggerProps) => {\n const uuid = useId()\n const {\n controlRef,\n disabled: groupDisabled,\n orientation,\n } = useResizableContext()\n\n id ??= uuid\n\n const [active, setActive] = useState<boolean>(false)\n\n const trulyDisabled = disabled || groupDisabled\n\n const onDoubleClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n ev.preventDefault()\n\n const layout = controlRef.current?.getLayout()\n\n if (!layout) return\n\n const count = layout.length\n const size = 100 / count\n const nextLayout = layout.map(() => size)\n\n controlRef.current?.setLayout(nextLayout)\n },\n [controlRef],\n )\n\n const getTriggerProps: PropGetter<\n PanelResizeHandleProps,\n PanelResizeHandleProps\n > = useCallback(\n (props = {}) =>\n ({\n ...props,\n id,\n \"aria-orientation\": orientation,\n disabled: trulyDisabled,\n tagName: as,\n ...rest,\n style: {\n ...props.style,\n ...rest.style,\n ...(trulyDisabled ? { cursor: \"default\" } : {}),\n },\n \"data-active\": dataAttr(active),\n onDoubleClick: handlerAll(\n rest.onDoubleClick as MouseEventHandler<keyof typeof as>,\n onDoubleClick,\n ),\n onDragging: handlerAll(rest.onDragging, (active) => setActive(active)),\n }) as PanelResizeHandleProps,\n [id, as, orientation, trulyDisabled, rest, onDoubleClick, active],\n )\n\n const getIconProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n \"data-active\": dataAttr(active),\n }),\n [active],\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","active"]}
package/dist/use-resizable.mjs CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  useResizableContext,
6
6
  useResizableItem,
7
7
  useResizableTrigger
8
- } from "./chunk-G6HLTSUK.mjs";
8
+ } from "./chunk-KTGBOEYI.mjs";
9
9
  export {
10
10
  ResizableProvider,
11
11
  useResizable,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/resizable",
3
- "version": "1.2.4-dev-20241212101624",
3
+ "version": "1.3.0-dev-20241213204523",
4
4
  "description": "Yamada UI resizable component",
5
5
  "keywords": [
6
6
  "yamada",
@@ -37,9 +37,9 @@
37
37
  },
38
38
  "dependencies": {
39
39
  "react-resizable-panels": "^2.1.7",
40
- "@yamada-ui/core": "1.16.2-dev-20241212101624",
41
- "@yamada-ui/icon": "1.1.17-dev-20241212101624",
42
- "@yamada-ui/utils": "1.6.2-dev-20241212101624"
40
+ "@yamada-ui/core": "1.16.2-dev-20241213204523",
41
+ "@yamada-ui/icon": "1.1.17-dev-20241213204523",
42
+ "@yamada-ui/utils": "1.6.2-dev-20241213204523"
43
43
  },
44
44
  "devDependencies": {
45
45
  "clean-package": "2.2.0",
package/dist/chunk-62N65DW7.mjs.map DELETED
@@ -1 +0,0 @@
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\nResizable.displayName = \"Resizable\"\nResizable.__ui__ = \"Resizable\"\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;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;","names":[]}
package/dist/chunk-G6HLTSUK.mjs.map DELETED
@@ -1 +0,0 @@
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 {\n ForwardedRef,\n MouseEvent,\n MouseEventHandler,\n RefObject,\n} from \"react\"\nimport type {\n ImperativePanelGroupHandle,\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 mergeRefs,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport {\n getPanelElement,\n getPanelGroupElement,\n getResizeHandleElement,\n} from \"react-resizable-panels\"\n\ntype ResizableDirection = \"horizontal\" | \"vertical\"\n\nexport type As = keyof HTMLElementTagNameMap\n\ninterface ResizableGroupProps\n extends Omit<Partial<PanelGroupProps>, \"children\" | \"id\" | \"tagName\"> {\n as?: As\n}\ninterface ResizableItemProps\n extends Omit<PanelProps, \"children\" | \"id\" | \"tagName\"> {\n as?: As\n}\ninterface ResizableTriggerProps\n extends Omit<PanelResizeHandleProps, \"children\" | \"id\" | \"tagName\"> {\n as?: As\n}\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableGroupControl extends ImperativePanelGroupHandle {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableContext {\n controlRef: RefObject<ResizableGroupControl>\n direction: ResizableDirection\n disabled: 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 * Ref of the resizable item callback.\n */\n controlRef?: RefObject<ResizableGroupControl>\n /**\n * The direction of the resizable.\n *\n * @default \"horizontal\"\n */\n direction?: ResizableDirection\n /**\n * If `true`, the resizable trigger will be disabled.\n */\n disabled?: boolean\n /**\n * If `true`, the resizable trigger will be disabled.\n *\n * @deprecated Use `Disabled` instead.\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 controlRef: controlRefProp,\n direction = \"horizontal\",\n disabled = false,\n isDisabled = false,\n keyboardStep,\n storage,\n storageKey,\n groupProps,\n onLayout,\n ...rest\n}: UseResizableProps) => {\n const controlRef = useRef<ResizableGroupControl>(null)\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> = {}) => {\n const { as, ...rest } = groupProps ?? {}\n\n return {\n ...props,\n id,\n ref: mergeRefs(controlRefProp, controlRef),\n autoSaveId: storageKey,\n direction,\n keyboardResizeBy: keyboardStep,\n storage,\n tagName: as,\n onLayout,\n ...rest,\n }\n },\n [\n id,\n direction,\n groupProps,\n controlRefProp,\n storageKey,\n keyboardStep,\n onLayout,\n storage,\n ],\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 controlRef,\n direction,\n disabled: disabled || 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 ...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 disabled?: boolean\n /**\n * If `true`, the resizable trigger will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\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 ...rest\n}: UseResizableTriggerProps) => {\n const uuid = useId()\n\n id ??= uuid\n\n const {\n controlRef,\n direction,\n disabled: groupDisabled,\n } = useResizableContext()\n const [active, setActive] = useState<boolean>(false)\n\n const trulyDisabled = disabled || isDisabled || groupDisabled\n\n const onDoubleClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n ev.preventDefault()\n\n const layout = controlRef.current?.getLayout()\n\n if (!layout) return\n\n const count = layout.length\n const size = 100 / count\n const nextLayout = layout.map(() => size)\n\n controlRef.current?.setLayout(nextLayout)\n },\n [controlRef],\n )\n\n const getTriggerProps: PropGetter<\n PanelResizeHandleProps,\n PanelResizeHandleProps\n > = useCallback(\n (props = {}) =>\n ({\n ...props,\n id,\n \"aria-orientation\": direction,\n disabled: trulyDisabled,\n tagName: as,\n ...rest,\n style: {\n ...props.style,\n ...rest.style,\n ...(trulyDisabled ? { cursor: \"default\" } : {}),\n },\n \"data-active\": dataAttr(active),\n onDoubleClick: handlerAll(\n rest.onDoubleClick as MouseEventHandler<keyof typeof as>,\n onDoubleClick,\n ),\n onDragging: handlerAll(rest.onDragging, (active) => setActive(active)),\n }) as PanelResizeHandleProps,\n [id, as, direction, trulyDisabled, rest, onDoubleClick, active],\n )\n\n const getIconProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n \"data-active\": dataAttr(active),\n }),\n [active],\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","active"]}