@yamada-ui/react/dist/types/components/resizable/use-resizable.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { Orientation } from "../../core/system/index.types.js";
import { HTMLProps, HTMLRefAttributes, PropGetter } from "../../core/components/index.types.js";
import "../../core/index.js";
import * as react88 from "react";
import { RefObject } from "react";
import { ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelProps, PanelResizeHandleProps } from "react-resizable-panels";

//#region src/components/resizable/use-resizable.d.ts
interface ResizableContext extends Omit<UseResizableReturn, "getGroupProps" | "getRootProps"> {}
declare const ResizableContext: react88.Context<ResizableContext>, useResizableContext: () => ResizableContext;
interface ResizableStorage extends PanelGroupStorage {}
interface ResizableGroupControl extends ImperativePanelGroupHandle {}
interface ResizableItemControl extends ImperativePanelHandle {}
interface ResizableGroupProps extends Omit<Partial<PanelGroupProps>, "tagName"> {
  /**
   * Ref of the resizable group callback.
   */
  ref?: RefObject<ResizableGroupControl>;
  /**
   * The HTML element to render.
   */
  as?: keyof HTMLElementTagNameMap;
}
interface ResizableItemProps extends Omit<PanelProps, "tagName"> {
  /**
   * Ref of the resizable item callback.
   */
  ref?: RefObject<ResizableItemControl>;
  /**
   * The HTML element to render.
   */
  as?: keyof HTMLElementTagNameMap;
}
interface ResizableTriggerProps extends Omit<PanelResizeHandleProps, "tagName">, HTMLRefAttributes {
  /**
   * The HTML element to render.
   */
  as?: keyof HTMLElementTagNameMap;
}
interface UseResizableProps extends HTMLProps {
  /**
   * Ref of the resizable item callback.
   */
  controlRef?: RefObject<null | ResizableGroupControl>;
  /**
   * If `true`, the resizable trigger will be disabled.
   */
  disabled?: boolean;
  /**
   * Unit to resize by keyboard operation.
   *
   * @default 10
   */
  keyboardStep?: number;
  /**
   * The orientation of the resizable.
   *
   * @default 'horizontal'
   */
  orientation?: Orientation;
  /**
   * A callback that gets and sets a value in custom storage.
   */
  storage?: PanelGroupStorage;
  /**
   * Key of value saved in storage.
   * By default, it is saved to `local storage`.
   */
  storageKey?: string;
  /**
   * Props for resizable component.
   */
  groupProps?: ResizableGroupProps;
  /**
   * The callback invoked when resizable items are resized.
   */
  onLayout?: PanelGroupOnLayout;
}
declare const useResizable: ({
  id,
  ref,
  controlRef: controlRefProp,
  disabled,
  keyboardStep,
  orientation,
  storage,
  storageKey,
  groupProps,
  onLayout,
  ...rest
}?: UseResizableProps) => {
  controlRef: RefObject<ResizableGroupControl | null>;
  disabled: boolean | undefined;
  orientation: Orientation;
  getGroupProps: PropGetter<ResizableGroupProps, undefined, PanelGroupProps>;
  getRootProps: PropGetter<"div", undefined, undefined>;
};
type UseResizableReturn = ReturnType<typeof useResizable>;
interface UseResizableItemProps extends HTMLProps, Pick<ResizableItemProps, "as"> {
  /**
   * The collapsed size of the resizable item.
   */
  collapsedSize?: number;
  /**
   * If `true`, the resizable item can be collapsed.
   *
   * @default false
   */
  collapsible?: boolean;
  /**
   * Ref of the resizable item callback.
   */
  controlRef?: RefObject<null | ResizableItemControl>;
  /**
   * The initial size of the resizable item.
   */
  defaultSize?: number;
  /**
   * The maximum allowed value of the resizable item.
   */
  maxSize?: number;
  /**
   * The minimum allowed value of the resizable item.
   */
  minSize?: number;
  /**
   * Order for the resizable item.
   */
  order?: number;
  /**
   * The callback invoked when resizable item are collapsed.
   */
  onCollapse?: () => void;
  /**
   * The callback invoked when resizable item are expanded.
   */
  onExpand?: () => void;
  /**
   * The callback invoked when resizable item are resized.
   */
  onResize?: (size: number, prevSize: number | undefined) => void;
}
declare const useResizableItem: ({
  id,
  ref,
  as,
  controlRef,
  onCollapse,
  onExpand,
  onResize,
  ...rest
}: UseResizableItemProps) => {
  getItemProps: PropGetter<ResizableItemProps, undefined, PanelProps>;
};
type UseResizableItemReturn = ReturnType<typeof useResizableItem>;
interface UseResizableTriggerProps extends HTMLProps, Pick<ResizableTriggerProps, "as"> {
  /**
   * If `true`, the resizable trigger will be disabled.
   *
   * @default false
   */
  disabled?: boolean;
  /**
   * The callback invoked when resizable trigger are dragged.
   */
  onDragging?: (dragging: boolean) => void;
}
declare const useResizableTrigger: ({
  id,
  ref,
  as,
  disabled,
  onDragging,
  ...rest
}: UseResizableTriggerProps) => {
  getIconProps: PropGetter<"div", undefined, undefined>;
  getTriggerProps: PropGetter<ResizableTriggerProps, undefined, PanelResizeHandleProps>;
};
type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>;
//#endregion
export { ResizableContext, ResizableGroupControl, ResizableItemControl, ResizableStorage, UseResizableItemProps, UseResizableItemReturn, UseResizableProps, UseResizableReturn, UseResizableTriggerProps, UseResizableTriggerReturn, useResizable, useResizableContext, useResizableItem, useResizableTrigger };
//# sourceMappingURL=use-resizable.d.ts.map