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

Sign up to get free protection for your applications and to get access to all the features.
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":"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","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-20241212135810",
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-20241212135810",
41
- "@yamada-ui/icon": "1.1.17-dev-20241212135810",
42
- "@yamada-ui/utils": "1.6.2-dev-20241212135810"
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"]}