@yamada-ui/resizable 1.1.18 → 1.2.0-dev-20241114143508

package/dist/use-resizable.d.ts

@@ -1,8 +1,9 @@
+import * as react_resizable_panels_dist_declarations_src_types from 'react-resizable-panels/dist/declarations/src/types';
 import * as react from 'react';
-import { ForwardedRef, RefObject } from 'react';
+import { ForwardedRef, RefObject, MouseEventHandler } from 'react';
 import { PropGetter, HTMLUIProps, HTMLUIPropsWithoutAs, CSSUIObject } from '@yamada-ui/core';
 import { Merge } from '@yamada-ui/utils';
-import { PanelGroupStorage, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelProps, PanelResizeHandleProps } from 'react-resizable-panels';
+import { PanelGroupStorage, ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelProps, PanelResizeHandleProps } from 'react-resizable-panels';
 
 type As = keyof HTMLElementTagNameMap;
 interface ResizableGroupProps extends Omit<Partial<PanelGroupProps>, "children" | "id" | "tagName"> {
@@ -16,9 +17,12 @@ interface ResizableTriggerProps extends Omit<PanelResizeHandleProps, "children"
 }
 interface ResizableStorage extends PanelGroupStorage {
 }
+interface ResizableGroupControl extends ImperativePanelGroupHandle {
+}
 interface ResizableItemControl extends ImperativePanelHandle {
 }
 interface ResizableContext {
+    controlRef: RefObject<ResizableGroupControl>;
     isDisabled: boolean;
     styles: {
         [key: string]: CSSUIObject | undefined;
@@ -35,6 +39,10 @@ interface UseResizableProps {
      * Ref for resizable element.
      */
     ref?: ForwardedRef<HTMLElement>;
+    /**
+     * Ref of the resizable item callback.
+     */
+    controlRef?: RefObject<ResizableGroupControl>;
     /**
      * The direction of the resizable.
      *
@@ -69,10 +77,285 @@ interface UseResizableProps {
      */
     onLayout?: PanelGroupOnLayout;
 }
-declare const useResizable: ({ id, ref, direction, isDisabled, keyboardStep, storage, storageKey, groupProps, onLayout, ...rest }: UseResizableProps) => {
+declare const useResizable: ({ id, ref, controlRef: controlRefProp, direction, isDisabled, keyboardStep, storage, storageKey, groupProps, onLayout, ...rest }: UseResizableProps) => {
+    controlRef: RefObject<ResizableGroupControl>;
     isDisabled: boolean;
     getContainerProps: PropGetter<"div", undefined>;
-    getGroupProps: (props?: Partial<PanelGroupProps>) => PanelGroupProps;
+    getGroupProps: (props?: Partial<PanelGroupProps>) => {
+        "aria-disabled"?: (boolean | "false" | "true") | undefined;
+        slot?: string | undefined;
+        style?: react.CSSProperties | undefined;
+        title?: string | undefined;
+        dir?: "auto" | "ltr" | "rtl" | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        color?: string | undefined;
+        direction: react_resizable_panels_dist_declarations_src_types.Direction;
+        nonce?: string | undefined;
+        onAnimationStart?: react.AnimationEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDragStart?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDragEnd?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDrag?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        defaultChecked?: boolean | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+        autoFocus?: boolean | undefined;
+        className?: string | undefined;
+        contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        hidden?: boolean | undefined;
+        lang?: string | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
+        tabIndex?: number | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        role?: react.AriaRole | undefined;
+        about?: string | undefined;
+        content?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        rel?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        "aria-activedescendant"?: string | undefined;
+        "aria-atomic"?: (boolean | "false" | "true") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        "aria-braillelabel"?: string | undefined;
+        "aria-brailleroledescription"?: string | undefined;
+        "aria-busy"?: (boolean | "false" | "true") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | undefined;
+        "aria-colindextext"?: string | undefined;
+        "aria-colspan"?: number | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-description"?: string | undefined;
+        "aria-details"?: string | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
+        "aria-expanded"?: (boolean | "false" | "true") | undefined;
+        "aria-flowto"?: string | undefined;
+        "aria-grabbed"?: (boolean | "false" | "true") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-hidden"?: (boolean | "false" | "true") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-modal"?: (boolean | "false" | "true") | undefined;
+        "aria-multiline"?: (boolean | "false" | "true") | undefined;
+        "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-readonly"?: (boolean | "false" | "true") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: (boolean | "false" | "true") | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowindextext"?: string | undefined;
+        "aria-rowspan"?: number | undefined;
+        "aria-selected"?: (boolean | "false" | "true") | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        "aria-valuetext"?: string | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined;
+        onCopy?: react.ClipboardEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onCopyCapture?: react.ClipboardEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onCut?: react.ClipboardEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onCutCapture?: react.ClipboardEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPaste?: react.ClipboardEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPasteCapture?: react.ClipboardEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onCompositionEnd?: react.CompositionEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onCompositionEndCapture?: react.CompositionEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onCompositionStart?: react.CompositionEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onCompositionStartCapture?: react.CompositionEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onCompositionUpdate?: react.CompositionEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onCompositionUpdateCapture?: react.CompositionEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onFocus?: react.FocusEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onFocusCapture?: react.FocusEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onBlur?: react.FocusEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onBlurCapture?: react.FocusEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onChange?: react.FormEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onChangeCapture?: react.FormEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onBeforeInput?: react.FormEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onBeforeInputCapture?: react.FormEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onInput?: react.FormEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onInputCapture?: react.FormEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onReset?: react.FormEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onResetCapture?: react.FormEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onSubmit?: react.FormEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onSubmitCapture?: react.FormEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onInvalid?: react.FormEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onInvalidCapture?: react.FormEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onLoad?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onLoadCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onError?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onErrorCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onKeyDown?: react.KeyboardEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onKeyDownCapture?: react.KeyboardEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onKeyPress?: react.KeyboardEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onKeyPressCapture?: react.KeyboardEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onKeyUp?: react.KeyboardEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onKeyUpCapture?: react.KeyboardEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onAbort?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onAbortCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onCanPlay?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onCanPlayCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onCanPlayThrough?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onCanPlayThroughCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDurationChange?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDurationChangeCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onEmptied?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onEmptiedCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onEncrypted?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onEncryptedCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onEnded?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onEndedCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onLoadedData?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onLoadedDataCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onLoadedMetadata?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onLoadedMetadataCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onLoadStart?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onLoadStartCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPause?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPauseCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPlay?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPlayCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPlaying?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPlayingCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onProgress?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onProgressCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onRateChange?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onRateChangeCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onResize?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onResizeCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onSeeked?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onSeekedCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onSeeking?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onSeekingCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onStalled?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onStalledCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onSuspend?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onSuspendCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onTimeUpdate?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onTimeUpdateCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onVolumeChange?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onVolumeChangeCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onWaiting?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onWaitingCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onAuxClick?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onAuxClickCapture?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onClick?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onClickCapture?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onContextMenu?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onContextMenuCapture?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDoubleClick?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDoubleClickCapture?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDragCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDragEndCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDragEnter?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDragEnterCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDragExit?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDragExitCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDragLeave?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDragLeaveCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDragOver?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDragOverCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDragStartCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDrop?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDropCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onMouseDown?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onMouseDownCapture?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onMouseEnter?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onMouseLeave?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onMouseMove?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onMouseMoveCapture?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onMouseOut?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onMouseOutCapture?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onMouseOver?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onMouseOverCapture?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onMouseUp?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onMouseUpCapture?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onSelect?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onSelectCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onTouchCancel?: react.TouchEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onTouchCancelCapture?: react.TouchEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onTouchEnd?: react.TouchEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onTouchEndCapture?: react.TouchEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onTouchMove?: react.TouchEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onTouchMoveCapture?: react.TouchEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onTouchStart?: react.TouchEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onTouchStartCapture?: react.TouchEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPointerDown?: react.PointerEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPointerDownCapture?: react.PointerEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPointerMove?: react.PointerEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPointerMoveCapture?: react.PointerEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPointerUp?: react.PointerEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPointerUpCapture?: react.PointerEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPointerCancel?: react.PointerEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPointerCancelCapture?: react.PointerEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPointerEnter?: react.PointerEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPointerLeave?: react.PointerEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPointerOver?: react.PointerEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPointerOverCapture?: react.PointerEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPointerOut?: react.PointerEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onPointerOutCapture?: react.PointerEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onGotPointerCapture?: react.PointerEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onGotPointerCaptureCapture?: react.PointerEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onLostPointerCapture?: react.PointerEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onLostPointerCaptureCapture?: react.PointerEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onScroll?: react.UIEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onScrollCapture?: react.UIEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onWheel?: react.WheelEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onWheelCapture?: react.WheelEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onAnimationStartCapture?: react.AnimationEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onAnimationEnd?: react.AnimationEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onAnimationEndCapture?: react.AnimationEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onAnimationIteration?: react.AnimationEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onAnimationIterationCapture?: react.AnimationEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onTransitionEnd?: react.TransitionEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onTransitionEndCapture?: react.TransitionEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        autoSaveId: string | null;
+        keyboardResizeBy: number | null;
+        onLayout: PanelGroupOnLayout | null;
+        storage: PanelGroupStorage;
+        id: string;
+        ref: (node: ResizableGroupControl | null) => void;
+        tagName: keyof HTMLElementTagNameMap | undefined;
+        children?: react.ReactNode | undefined;
+    };
 };
 type UseResizableReturn = ReturnType<typeof useResizable>;
 interface UseResizableItemOptions {
@@ -160,10 +443,10 @@ interface UseResizableTriggerOptions {
 }
 interface UseResizableTriggerProps extends Merge<ResizableTriggerProps, Omit<HTMLUIPropsWithoutAs, "id" | "onBlur" | "onFocus">>, UseResizableTriggerOptions {
 }
-declare const useResizableTrigger: ({ id, ref, as, disabled, isDisabled, onDragging, ...rest }: UseResizableTriggerProps) => {
+declare const useResizableTrigger: ({ id, ref, as, disabled, isDisabled, ...rest }: UseResizableTriggerProps) => {
     getIconProps: PropGetter<"div", undefined>;
     getTriggerProps: PropGetter<PanelResizeHandleProps, PanelResizeHandleProps>;
 };
 type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>;
 
-export { type As, type ResizableItemControl, ResizableProvider, type ResizableStorage, type UseResizableItemProps, type UseResizableItemReturn, type UseResizableProps, type UseResizableReturn, type UseResizableTriggerProps, type UseResizableTriggerReturn, useResizable, useResizableContext, useResizableItem, useResizableTrigger };
+export { type As, type ResizableGroupControl, type ResizableItemControl, ResizableProvider, type ResizableStorage, type UseResizableItemProps, type UseResizableItemReturn, type UseResizableProps, type UseResizableReturn, type UseResizableTriggerProps, type UseResizableTriggerReturn, useResizable, useResizableContext, useResizableItem, useResizableTrigger };

package/dist/use-resizable.js

@@ -38,6 +38,7 @@ var [ResizableProvider, useResizableContext] = (0, import_utils.createContext)({
 var useResizable = ({
   id,
   ref,
+  controlRef: controlRefProp,
   direction = "horizontal",
   isDisabled = false,
   keyboardStep,
@@ -47,6 +48,7 @@ var useResizable = ({
   onLayout,
   ...rest
 }) => {
+  const controlRef = (0, import_react.useRef)(null);
   const uuid = (0, import_react.useId)();
   id != null ? id : id = uuid;
   const getContainerProps = (0, import_react.useCallback)(
@@ -59,6 +61,7 @@ var useResizable = ({
       return {
         ...props,
         id,
+        ref: (0, import_utils.mergeRefs)(controlRefProp, controlRef),
         autoSaveId: storageKey,
         direction,
         keyboardResizeBy: keyboardStep,
@@ -68,7 +71,16 @@ var useResizable = ({
         ...rest2
       };
     },
-    [id, direction, groupProps, storageKey, keyboardStep, onLayout, storage]
+    [
+      id,
+      direction,
+      groupProps,
+      controlRefProp,
+      storageKey,
+      keyboardStep,
+      onLayout,
+      storage
+    ]
   );
   (0, import_react.useEffect)(() => {
     if (!id) return;
@@ -76,6 +88,7 @@ var useResizable = ({
     if ((0, import_utils.isRefObject)(ref)) ref.current = el;
   }, [ref, id]);
   return {
+    controlRef,
     isDisabled,
     getContainerProps,
     getGroupProps
@@ -116,7 +129,6 @@ var useResizableItem = ({
         onCollapse,
         onExpand,
         onResize,
-        ...collapsible ? { "aria-labelledby": id } : { "aria-label": id },
         ...rest
       };
     },
@@ -155,30 +167,49 @@ var useResizableTrigger = ({
   as,
   disabled,
   isDisabled,
-  onDragging,
   ...rest
 }) => {
   const uuid = (0, import_react.useId)();
   id != null ? id : id = uuid;
-  const { isDisabled: isGroupDisabled } = useResizableContext();
+  const { controlRef, isDisabled: isGroupDisabled } = useResizableContext();
   const [isActive, setIsActive] = (0, import_react.useState)(false);
   const trulyDisabled = disabled || isDisabled || isGroupDisabled;
+  const onDoubleClick = (0, import_react.useCallback)(
+    (ev) => {
+      var _a, _b;
+      ev.preventDefault();
+      const layout = (_a = controlRef.current) == null ? void 0 : _a.getLayout();
+      if (!layout) return;
+      const count = layout.length;
+      const size = 100 / count;
+      const nextLayout = layout.map(() => size);
+      (_b = controlRef.current) == null ? void 0 : _b.setLayout(nextLayout);
+    },
+    [controlRef]
+  );
   const getTriggerProps = (0, import_react.useCallback)(
     (props = {}) => ({
       ...props,
       id,
       disabled: trulyDisabled,
       tagName: as,
-      onDragging: (0, import_utils.handlerAll)(onDragging, (isActive2) => setIsActive(isActive2)),
       ...rest,
       style: {
         ...props.style,
         ...rest.style,
         ...trulyDisabled ? { cursor: "default" } : {}
       },
-      "data-active": (0, import_utils.dataAttr)(isActive)
+      "data-active": (0, import_utils.dataAttr)(isActive),
+      onDoubleClick: (0, import_utils.handlerAll)(
+        rest.onDoubleClick,
+        onDoubleClick
+      ),
+      onDragging: (0, import_utils.handlerAll)(
+        rest.onDragging,
+        (isActive2) => setIsActive(isActive2)
+      )
     }),
-    [id, as, trulyDisabled, onDragging, rest, isActive]
+    [id, as, trulyDisabled, rest, onDoubleClick, isActive]
   );
   const getIconProps = (0, import_react.useCallback)(
     (props = {}, ref2 = null) => ({

package/dist/use-resizable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/use-resizable.ts"],"sourcesContent":["import type {\n  CSSUIObject,\n  HTMLUIProps,\n  HTMLUIPropsWithoutAs,\n  PropGetter,\n} from \"@yamada-ui/core\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, RefObject } from \"react\"\nimport type {\n  ImperativePanelHandle,\n  PanelGroupOnLayout,\n  PanelGroupProps,\n  PanelGroupStorage,\n  PanelProps,\n  PanelResizeHandleProps,\n} from \"react-resizable-panels\"\nimport {\n  createContext,\n  dataAttr,\n  handlerAll,\n  isRefObject,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\n\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 ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableContext {\n  isDisabled: boolean\n  styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [ResizableProvider, useResizableContext] =\n  createContext<ResizableContext>({\n    name: \"ResizableContext\",\n    errorMessage: `useResizableContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Resizable />\"`,\n  })\n\nexport interface UseResizableProps {\n  /**\n   * id assigned to resizable element.\n   */\n  id?: string\n  /**\n   * Ref for resizable element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * The direction of the resizable.\n   *\n   * @default \"horizontal\"\n   */\n  direction?: \"horizontal\" | \"vertical\"\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  isDisabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n}\n\nexport const useResizable = ({\n  id,\n  ref,\n  direction = \"horizontal\",\n  isDisabled = false,\n  keyboardStep,\n  storage,\n  storageKey,\n  groupProps,\n  onLayout,\n  ...rest\n}: UseResizableProps) => {\n  const uuid = useId()\n\n  id ??= uuid\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...rest }),\n    [rest],\n  )\n\n  const getGroupProps = useCallback(\n    (props: Partial<PanelGroupProps> = {}): PanelGroupProps => {\n      const { as, ...rest } = groupProps ?? {}\n\n      return {\n        ...props,\n        id,\n        autoSaveId: storageKey,\n        direction,\n        keyboardResizeBy: keyboardStep,\n        storage,\n        tagName: as,\n        onLayout,\n        ...rest,\n      }\n    },\n    [id, direction, groupProps, storageKey, keyboardStep, onLayout, storage],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelGroupElement(id)\n\n    if (isRefObject(ref)) ref.current = el\n  }, [ref, id])\n\n  return {\n    isDisabled,\n    getContainerProps,\n    getGroupProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\ninterface UseResizableItemOptions {\n  /**\n   * id assigned to resizable item element.\n   */\n  id?: string\n  /**\n   * Ref for resizable item element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableItemControl>\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * Props for resizable item container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"as\"> & ResizableItemProps\n  /**\n   * The callback invoked when resizable item are collapsed.\n   */\n  onCollapse?: () => void\n  /**\n   * The callback invoked when resizable item are expanded.\n   */\n  onExpand?: () => void\n  /**\n   * The callback invoked when resizable item are resized.\n   */\n  onResize?: (size: number, prevSize: number | undefined) => void\n}\n\nexport interface UseResizableItemProps\n  extends Omit<HTMLUIProps, keyof UseResizableItemOptions>,\n    UseResizableItemOptions {}\n\nexport const useResizableItem = ({\n  id,\n  ref,\n  collapsedSize,\n  collapsible,\n  controlRef,\n  defaultSize,\n  maxSize,\n  minSize,\n  order,\n  containerProps,\n  onCollapse,\n  onExpand,\n  onResize,\n  ...innerProps\n}: UseResizableItemProps) => {\n  const uuid = useId()\n\n  id ??= uuid\n\n  const getPanelProps: PropGetter<\n    Merge<HTMLUIProps, PanelProps>,\n    PanelProps\n  > = useCallback(\n    (props = {}) => {\n      const { as, ...rest } = containerProps ?? {}\n\n      return {\n        ...props,\n        id,\n        ref: controlRef,\n        collapsedSize,\n        collapsible,\n        defaultSize,\n        maxSize,\n        minSize,\n        order,\n        tagName: as,\n        onCollapse,\n        onExpand,\n        onResize,\n        ...(collapsible ? { \"aria-labelledby\": id } : { \"aria-label\": id }),\n        ...rest,\n      }\n    },\n    [\n      id,\n      controlRef,\n      containerProps,\n      collapsedSize,\n      collapsible,\n      defaultSize,\n      maxSize,\n      minSize,\n      onCollapse,\n      onExpand,\n      onResize,\n      order,\n    ],\n  )\n\n  const getItemProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...innerProps }),\n    [innerProps],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelElement(id)\n\n    if (isRefObject(ref)) ref.current = el\n  }, [ref, id])\n\n  return {\n    getItemProps,\n    getPanelProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\ninterface UseResizableTriggerOptions {\n  /**\n   * id assigned to resizable trigger element.\n   */\n  id?: string\n  /**\n   * Ref for resizable trigger element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * The callback invoked when resizable trigger are dragged.\n   */\n  onDragging?: (isDragging: boolean) => void\n}\n\nexport interface UseResizableTriggerProps\n  extends Merge<\n      ResizableTriggerProps,\n      Omit<HTMLUIPropsWithoutAs, \"id\" | \"onBlur\" | \"onFocus\">\n    >,\n    UseResizableTriggerOptions {}\n\nexport const useResizableTrigger = ({\n  id,\n  ref,\n  as,\n  disabled,\n  isDisabled,\n  onDragging,\n  ...rest\n}: UseResizableTriggerProps) => {\n  const uuid = useId()\n\n  id ??= uuid\n\n  const { isDisabled: isGroupDisabled } = useResizableContext()\n  const [isActive, setIsActive] = useState<boolean>(false)\n\n  const trulyDisabled = disabled || isDisabled || isGroupDisabled\n\n  const getTriggerProps: PropGetter<\n    PanelResizeHandleProps,\n    PanelResizeHandleProps\n  > = useCallback(\n    (props = {}) =>\n      ({\n        ...props,\n        id,\n        disabled: trulyDisabled,\n        tagName: as,\n        onDragging: handlerAll(onDragging, (isActive) => setIsActive(isActive)),\n        ...rest,\n        style: {\n          ...props.style,\n          ...rest.style,\n          ...(trulyDisabled ? { cursor: \"default\" } : {}),\n        },\n        \"data-active\": dataAttr(isActive),\n      }) as PanelResizeHandleProps,\n    [id, as, trulyDisabled, onDragging, rest, isActive],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      \"data-active\": dataAttr(isActive),\n    }),\n    [isActive],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getResizeHandleElement(id)\n\n    if (isRefObject(ref)) ref.current = el\n  }, [ref, id])\n\n  return {\n    getIconProps,\n    getTriggerProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":"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","names":["ref","rest","isActive"]}
+{"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\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  isDisabled: boolean\n  styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [ResizableProvider, useResizableContext] =\n  createContext<ResizableContext>({\n    name: \"ResizableContext\",\n    errorMessage: `useResizableContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Resizable />\"`,\n  })\n\nexport interface UseResizableProps {\n  /**\n   * id assigned to resizable element.\n   */\n  id?: string\n  /**\n   * Ref for resizable element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * 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?: \"horizontal\" | \"vertical\"\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  isDisabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n}\n\nexport const useResizable = ({\n  id,\n  ref,\n  controlRef: controlRefProp,\n  direction = \"horizontal\",\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    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  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 { controlRef, isDisabled: isGroupDisabled } = useResizableContext()\n  const [isActive, setIsActive] = useState<boolean>(false)\n\n  const trulyDisabled = disabled || isDisabled || isGroupDisabled\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        disabled: trulyDisabled,\n        tagName: as,\n        ...rest,\n        style: {\n          ...props.style,\n          ...rest.style,\n          ...(trulyDisabled ? { cursor: \"default\" } : {}),\n        },\n        \"data-active\": dataAttr(isActive),\n        onDoubleClick: handlerAll(\n          rest.onDoubleClick as MouseEventHandler<keyof typeof as>,\n          onDoubleClick,\n        ),\n        onDragging: handlerAll(rest.onDragging, (isActive) =>\n          setIsActive(isActive),\n        ),\n      }) as PanelResizeHandleProps,\n    [id, as, trulyDisabled, rest, onDoubleClick, isActive],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      \"data-active\": dataAttr(isActive),\n    }),\n    [isActive],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getResizeHandleElement(id)\n\n    if (isRefObject(ref)) ref.current = el\n  }, [ref, id])\n\n  return {\n    getIconProps,\n    getTriggerProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":"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","names":["ref","rest","isActive"]}

package/dist/use-resizable.mjs

@@ -5,7 +5,7 @@ import {
   useResizableContext,
   useResizableItem,
   useResizableTrigger
-} from "./chunk-HAROVF4B.mjs";
+} from "./chunk-WCMBVV3R.mjs";
 export {
   ResizableProvider,
   useResizable,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/resizable",
-  "version": "1.1.18",
+  "version": "1.2.0-dev-20241114143508",
   "description": "Yamada UI resizable component",
   "keywords": [
     "yamada",
@@ -37,8 +37,8 @@
   },
   "dependencies": {
     "react-resizable-panels": "^2.1.6",
-    "@yamada-ui/core": "1.15.5",
     "@yamada-ui/icon": "1.1.12",
+    "@yamada-ui/core": "1.15.5",
     "@yamada-ui/utils": "1.5.4"
   },
   "devDependencies": {

package/dist/chunk-HAROVF4B.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/use-resizable.ts"],"sourcesContent":["import type {\n  CSSUIObject,\n  HTMLUIProps,\n  HTMLUIPropsWithoutAs,\n  PropGetter,\n} from \"@yamada-ui/core\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, RefObject } from \"react\"\nimport type {\n  ImperativePanelHandle,\n  PanelGroupOnLayout,\n  PanelGroupProps,\n  PanelGroupStorage,\n  PanelProps,\n  PanelResizeHandleProps,\n} from \"react-resizable-panels\"\nimport {\n  createContext,\n  dataAttr,\n  handlerAll,\n  isRefObject,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\n\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 ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableContext {\n  isDisabled: boolean\n  styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [ResizableProvider, useResizableContext] =\n  createContext<ResizableContext>({\n    name: \"ResizableContext\",\n    errorMessage: `useResizableContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Resizable />\"`,\n  })\n\nexport interface UseResizableProps {\n  /**\n   * id assigned to resizable element.\n   */\n  id?: string\n  /**\n   * Ref for resizable element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * The direction of the resizable.\n   *\n   * @default \"horizontal\"\n   */\n  direction?: \"horizontal\" | \"vertical\"\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  isDisabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n}\n\nexport const useResizable = ({\n  id,\n  ref,\n  direction = \"horizontal\",\n  isDisabled = false,\n  keyboardStep,\n  storage,\n  storageKey,\n  groupProps,\n  onLayout,\n  ...rest\n}: UseResizableProps) => {\n  const uuid = useId()\n\n  id ??= uuid\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...rest }),\n    [rest],\n  )\n\n  const getGroupProps = useCallback(\n    (props: Partial<PanelGroupProps> = {}): PanelGroupProps => {\n      const { as, ...rest } = groupProps ?? {}\n\n      return {\n        ...props,\n        id,\n        autoSaveId: storageKey,\n        direction,\n        keyboardResizeBy: keyboardStep,\n        storage,\n        tagName: as,\n        onLayout,\n        ...rest,\n      }\n    },\n    [id, direction, groupProps, storageKey, keyboardStep, onLayout, storage],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelGroupElement(id)\n\n    if (isRefObject(ref)) ref.current = el\n  }, [ref, id])\n\n  return {\n    isDisabled,\n    getContainerProps,\n    getGroupProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\ninterface UseResizableItemOptions {\n  /**\n   * id assigned to resizable item element.\n   */\n  id?: string\n  /**\n   * Ref for resizable item element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableItemControl>\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * Props for resizable item container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"as\"> & ResizableItemProps\n  /**\n   * The callback invoked when resizable item are collapsed.\n   */\n  onCollapse?: () => void\n  /**\n   * The callback invoked when resizable item are expanded.\n   */\n  onExpand?: () => void\n  /**\n   * The callback invoked when resizable item are resized.\n   */\n  onResize?: (size: number, prevSize: number | undefined) => void\n}\n\nexport interface UseResizableItemProps\n  extends Omit<HTMLUIProps, keyof UseResizableItemOptions>,\n    UseResizableItemOptions {}\n\nexport const useResizableItem = ({\n  id,\n  ref,\n  collapsedSize,\n  collapsible,\n  controlRef,\n  defaultSize,\n  maxSize,\n  minSize,\n  order,\n  containerProps,\n  onCollapse,\n  onExpand,\n  onResize,\n  ...innerProps\n}: UseResizableItemProps) => {\n  const uuid = useId()\n\n  id ??= uuid\n\n  const getPanelProps: PropGetter<\n    Merge<HTMLUIProps, PanelProps>,\n    PanelProps\n  > = useCallback(\n    (props = {}) => {\n      const { as, ...rest } = containerProps ?? {}\n\n      return {\n        ...props,\n        id,\n        ref: controlRef,\n        collapsedSize,\n        collapsible,\n        defaultSize,\n        maxSize,\n        minSize,\n        order,\n        tagName: as,\n        onCollapse,\n        onExpand,\n        onResize,\n        ...(collapsible ? { \"aria-labelledby\": id } : { \"aria-label\": id }),\n        ...rest,\n      }\n    },\n    [\n      id,\n      controlRef,\n      containerProps,\n      collapsedSize,\n      collapsible,\n      defaultSize,\n      maxSize,\n      minSize,\n      onCollapse,\n      onExpand,\n      onResize,\n      order,\n    ],\n  )\n\n  const getItemProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...innerProps }),\n    [innerProps],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelElement(id)\n\n    if (isRefObject(ref)) ref.current = el\n  }, [ref, id])\n\n  return {\n    getItemProps,\n    getPanelProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\ninterface UseResizableTriggerOptions {\n  /**\n   * id assigned to resizable trigger element.\n   */\n  id?: string\n  /**\n   * Ref for resizable trigger element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * The callback invoked when resizable trigger are dragged.\n   */\n  onDragging?: (isDragging: boolean) => void\n}\n\nexport interface UseResizableTriggerProps\n  extends Merge<\n      ResizableTriggerProps,\n      Omit<HTMLUIPropsWithoutAs, \"id\" | \"onBlur\" | \"onFocus\">\n    >,\n    UseResizableTriggerOptions {}\n\nexport const useResizableTrigger = ({\n  id,\n  ref,\n  as,\n  disabled,\n  isDisabled,\n  onDragging,\n  ...rest\n}: UseResizableTriggerProps) => {\n  const uuid = useId()\n\n  id ??= uuid\n\n  const { isDisabled: isGroupDisabled } = useResizableContext()\n  const [isActive, setIsActive] = useState<boolean>(false)\n\n  const trulyDisabled = disabled || isDisabled || isGroupDisabled\n\n  const getTriggerProps: PropGetter<\n    PanelResizeHandleProps,\n    PanelResizeHandleProps\n  > = useCallback(\n    (props = {}) =>\n      ({\n        ...props,\n        id,\n        disabled: trulyDisabled,\n        tagName: as,\n        onDragging: handlerAll(onDragging, (isActive) => setIsActive(isActive)),\n        ...rest,\n        style: {\n          ...props.style,\n          ...rest.style,\n          ...(trulyDisabled ? { cursor: \"default\" } : {}),\n        },\n        \"data-active\": dataAttr(isActive),\n      }) as PanelResizeHandleProps,\n    [id, as, trulyDisabled, onDragging, rest, isActive],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      \"data-active\": dataAttr(isActive),\n    }),\n    [isActive],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getResizeHandleElement(id)\n\n    if (isRefObject(ref)) ref.current = el\n  }, [ref, id])\n\n  return {\n    getIconProps,\n    getTriggerProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":"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","names":["ref","rest","isActive"]}