@yamada-ui/resizable 1.1.14-dev-20241005220629 → 1.1.14-dev-20241006000212

package/dist/resizable.mjs

@@ -1,8 +1,8 @@
 "use client"
 import {
   Resizable
-} from "./chunk-YBL74RYZ.mjs";
-import "./chunk-E3WJJXQT.mjs";
+} from "./chunk-MV5OACWH.mjs";
+import "./chunk-VA7EJWLN.mjs";
 export {
   Resizable
 };

package/dist/use-resizable.d.mts

@@ -7,11 +7,11 @@ import { PanelGroupStorage, ImperativePanelHandle, PanelGroupOnLayout, PanelGrou
 interface As {
     as?: keyof HTMLElementTagNameMap;
 }
-interface ResizableGroupProps extends Omit<Partial<PanelGroupProps>, "id" | "tagName" | "children">, As {
+interface ResizableGroupProps extends Omit<Partial<PanelGroupProps>, "children" | "id" | "tagName">, As {
 }
-interface ResizableItemProps extends Omit<PanelProps, "id" | "tagName" | "children">, As {
+interface ResizableItemProps extends Omit<PanelProps, "children" | "id" | "tagName">, As {
 }
-interface ResizableTriggerProps extends Omit<PanelResizeHandleProps, "id" | "tagName" | "children">, As {
+interface ResizableTriggerProps extends Omit<PanelResizeHandleProps, "children" | "id" | "tagName">, As {
 }
 interface ResizableStorage extends PanelGroupStorage {
 }
@@ -20,7 +20,7 @@ interface ResizableItemControl extends ImperativePanelHandle {
 interface ResizableContext {
     isDisabled: boolean;
     styles: {
-        [key: string]: CSSUIObject;
+        [key: string]: CSSUIObject | undefined;
     };
 }
 declare const ResizableProvider: react.Provider<ResizableContext>;
@@ -50,25 +50,25 @@ interface UseResizableProps {
      * @default 10
      */
     keyboardStep?: number;
+    /**
+     * 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;
     /**
-     * A callback that gets and sets a value in custom storage.
+     * Props for resizable component.
      */
-    storage?: PanelGroupStorage;
+    groupProps?: ResizableGroupProps;
     /**
      * The callback invoked when resizable items are resized.
      */
     onLayout?: PanelGroupOnLayout;
-    /**
-     * Props for resizable component.
-     */
-    groupProps?: ResizableGroupProps;
 }
-declare const useResizable: ({ id, direction, storageKey, keyboardStep, isDisabled, onLayout, storage, ref, groupProps, ...rest }: UseResizableProps) => {
+declare const useResizable: ({ id, ref, direction, isDisabled, keyboardStep, storage, storageKey, groupProps, onLayout, ...rest }: UseResizableProps) => {
     isDisabled: boolean;
     getContainerProps: PropGetter<"div", undefined>;
     getGroupProps: (props?: Partial<PanelGroupProps>) => PanelGroupProps;
@@ -83,6 +83,10 @@ interface UseResizableItemOptions {
      * Ref for resizable item element.
      */
     ref?: ForwardedRef<HTMLElement>;
+    /**
+     * The collapsed size of the resizable item.
+     */
+    collapsedSize?: number;
     /**
      * If `true`, the resizable item can be collapsed.
      *
@@ -90,21 +94,29 @@ interface UseResizableItemOptions {
      */
     collapsible?: boolean;
     /**
-     * The collapsed size of the resizable item.
+     * Ref of the resizable item callback.
      */
-    collapsedSize?: number;
+    controlRef?: RefObject<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;
     /**
-     * The maximum allowed value of the resizable item.
+     * Order for the resizable item.
      */
-    maxSize?: number;
+    order?: number;
+    /**
+     * Props for resizable item container element.
+     */
+    containerProps?: Omit<HTMLUIProps, "as"> & ResizableItemProps;
     /**
      * The callback invoked when resizable item are collapsed.
      */
@@ -117,24 +129,12 @@ interface UseResizableItemOptions {
      * The callback invoked when resizable item are resized.
      */
     onResize?: (size: number, prevSize: number | undefined) => void;
-    /**
-     * Order for the resizable item.
-     */
-    order?: number;
-    /**
-     * Ref of the resizable item callback.
-     */
-    controlRef?: RefObject<ResizableItemControl>;
-    /**
-     * Props for resizable item container element.
-     */
-    containerProps?: Omit<HTMLUIProps, "as"> & ResizableItemProps;
 }
 interface UseResizableItemProps extends Omit<HTMLUIProps, keyof UseResizableItemOptions>, UseResizableItemOptions {
 }
-declare const useResizableItem: ({ id, ref, collapsedSize, collapsible, defaultSize, maxSize, minSize, onCollapse, onExpand, onResize, order, controlRef, containerProps, ...innerProps }: UseResizableItemProps) => {
-    getPanelProps: PropGetter<Merge<HTMLUIProps, PanelProps>, PanelProps>;
+declare const useResizableItem: ({ id, ref, collapsedSize, collapsible, controlRef, defaultSize, maxSize, minSize, order, containerProps, onCollapse, onExpand, onResize, ...innerProps }: UseResizableItemProps) => {
     getItemProps: PropGetter<"div", undefined>;
+    getPanelProps: PropGetter<Merge<HTMLUIProps, PanelProps>, PanelProps>;
 };
 type UseResizableItemReturn = ReturnType<typeof useResizableItem>;
 interface UseResizableTriggerOptions {
@@ -160,8 +160,8 @@ interface UseResizableTriggerOptions {
 interface UseResizableTriggerProps extends Merge<ResizableTriggerProps, Omit<HTMLUIPropsWithoutAs, "id" | "onBlur" | "onFocus">>, UseResizableTriggerOptions {
 }
 declare const useResizableTrigger: ({ id, ref, as, disabled, isDisabled, onDragging, ...rest }: UseResizableTriggerProps) => {
-    getTriggerProps: PropGetter<PanelResizeHandleProps, PanelResizeHandleProps>;
     getIconProps: PropGetter<"div", undefined>;
+    getTriggerProps: PropGetter<PanelResizeHandleProps, PanelResizeHandleProps>;
 };
 type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>;
 

package/dist/use-resizable.d.ts

@@ -7,11 +7,11 @@ import { PanelGroupStorage, ImperativePanelHandle, PanelGroupOnLayout, PanelGrou
 interface As {
     as?: keyof HTMLElementTagNameMap;
 }
-interface ResizableGroupProps extends Omit<Partial<PanelGroupProps>, "id" | "tagName" | "children">, As {
+interface ResizableGroupProps extends Omit<Partial<PanelGroupProps>, "children" | "id" | "tagName">, As {
 }
-interface ResizableItemProps extends Omit<PanelProps, "id" | "tagName" | "children">, As {
+interface ResizableItemProps extends Omit<PanelProps, "children" | "id" | "tagName">, As {
 }
-interface ResizableTriggerProps extends Omit<PanelResizeHandleProps, "id" | "tagName" | "children">, As {
+interface ResizableTriggerProps extends Omit<PanelResizeHandleProps, "children" | "id" | "tagName">, As {
 }
 interface ResizableStorage extends PanelGroupStorage {
 }
@@ -20,7 +20,7 @@ interface ResizableItemControl extends ImperativePanelHandle {
 interface ResizableContext {
     isDisabled: boolean;
     styles: {
-        [key: string]: CSSUIObject;
+        [key: string]: CSSUIObject | undefined;
     };
 }
 declare const ResizableProvider: react.Provider<ResizableContext>;
@@ -50,25 +50,25 @@ interface UseResizableProps {
      * @default 10
      */
     keyboardStep?: number;
+    /**
+     * 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;
     /**
-     * A callback that gets and sets a value in custom storage.
+     * Props for resizable component.
      */
-    storage?: PanelGroupStorage;
+    groupProps?: ResizableGroupProps;
     /**
      * The callback invoked when resizable items are resized.
      */
     onLayout?: PanelGroupOnLayout;
-    /**
-     * Props for resizable component.
-     */
-    groupProps?: ResizableGroupProps;
 }
-declare const useResizable: ({ id, direction, storageKey, keyboardStep, isDisabled, onLayout, storage, ref, groupProps, ...rest }: UseResizableProps) => {
+declare const useResizable: ({ id, ref, direction, isDisabled, keyboardStep, storage, storageKey, groupProps, onLayout, ...rest }: UseResizableProps) => {
     isDisabled: boolean;
     getContainerProps: PropGetter<"div", undefined>;
     getGroupProps: (props?: Partial<PanelGroupProps>) => PanelGroupProps;
@@ -83,6 +83,10 @@ interface UseResizableItemOptions {
      * Ref for resizable item element.
      */
     ref?: ForwardedRef<HTMLElement>;
+    /**
+     * The collapsed size of the resizable item.
+     */
+    collapsedSize?: number;
     /**
      * If `true`, the resizable item can be collapsed.
      *
@@ -90,21 +94,29 @@ interface UseResizableItemOptions {
      */
     collapsible?: boolean;
     /**
-     * The collapsed size of the resizable item.
+     * Ref of the resizable item callback.
      */
-    collapsedSize?: number;
+    controlRef?: RefObject<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;
     /**
-     * The maximum allowed value of the resizable item.
+     * Order for the resizable item.
      */
-    maxSize?: number;
+    order?: number;
+    /**
+     * Props for resizable item container element.
+     */
+    containerProps?: Omit<HTMLUIProps, "as"> & ResizableItemProps;
     /**
      * The callback invoked when resizable item are collapsed.
      */
@@ -117,24 +129,12 @@ interface UseResizableItemOptions {
      * The callback invoked when resizable item are resized.
      */
     onResize?: (size: number, prevSize: number | undefined) => void;
-    /**
-     * Order for the resizable item.
-     */
-    order?: number;
-    /**
-     * Ref of the resizable item callback.
-     */
-    controlRef?: RefObject<ResizableItemControl>;
-    /**
-     * Props for resizable item container element.
-     */
-    containerProps?: Omit<HTMLUIProps, "as"> & ResizableItemProps;
 }
 interface UseResizableItemProps extends Omit<HTMLUIProps, keyof UseResizableItemOptions>, UseResizableItemOptions {
 }
-declare const useResizableItem: ({ id, ref, collapsedSize, collapsible, defaultSize, maxSize, minSize, onCollapse, onExpand, onResize, order, controlRef, containerProps, ...innerProps }: UseResizableItemProps) => {
-    getPanelProps: PropGetter<Merge<HTMLUIProps, PanelProps>, PanelProps>;
+declare const useResizableItem: ({ id, ref, collapsedSize, collapsible, controlRef, defaultSize, maxSize, minSize, order, containerProps, onCollapse, onExpand, onResize, ...innerProps }: UseResizableItemProps) => {
     getItemProps: PropGetter<"div", undefined>;
+    getPanelProps: PropGetter<Merge<HTMLUIProps, PanelProps>, PanelProps>;
 };
 type UseResizableItemReturn = ReturnType<typeof useResizableItem>;
 interface UseResizableTriggerOptions {
@@ -160,8 +160,8 @@ interface UseResizableTriggerOptions {
 interface UseResizableTriggerProps extends Merge<ResizableTriggerProps, Omit<HTMLUIPropsWithoutAs, "id" | "onBlur" | "onFocus">>, UseResizableTriggerOptions {
 }
 declare const useResizableTrigger: ({ id, ref, as, disabled, isDisabled, onDragging, ...rest }: UseResizableTriggerProps) => {
-    getTriggerProps: PropGetter<PanelResizeHandleProps, PanelResizeHandleProps>;
     getIconProps: PropGetter<"div", undefined>;
+    getTriggerProps: PropGetter<PanelResizeHandleProps, PanelResizeHandleProps>;
 };
 type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>;
 

package/dist/use-resizable.js

@@ -37,14 +37,14 @@ var [ResizableProvider, useResizableContext] = (0, import_utils.createContext)({
 });
 var useResizable = ({
   id,
+  ref,
   direction = "horizontal",
-  storageKey,
-  keyboardStep,
   isDisabled = false,
-  onLayout,
+  keyboardStep,
   storage,
-  ref,
+  storageKey,
   groupProps,
+  onLayout,
   ...rest
 }) => {
   const uuid = (0, import_react.useId)();
@@ -59,12 +59,12 @@ var useResizable = ({
       return {
         ...props,
         id,
-        direction,
-        tagName: as,
         autoSaveId: storageKey,
+        direction,
         keyboardResizeBy: keyboardStep,
-        onLayout,
         storage,
+        tagName: as,
+        onLayout,
         ...rest2
       };
     },
@@ -73,7 +73,7 @@ var useResizable = ({
   (0, import_react.useEffect)(() => {
     if (!id) return;
     const el = (0, import_react_resizable_panels.getPanelGroupElement)(id);
-    if (ref) ref.current = el;
+    if ((0, import_utils.isRefObject)(ref)) ref.current = el;
   }, [ref, id]);
   return {
     isDisabled,
@@ -86,15 +86,15 @@ var useResizableItem = ({
   ref,
   collapsedSize,
   collapsible,
+  controlRef,
   defaultSize,
   maxSize,
   minSize,
+  order,
+  containerProps,
   onCollapse,
   onExpand,
   onResize,
-  order,
-  controlRef,
-  containerProps,
   ...innerProps
 }) => {
   const uuid = (0, import_react.useId)();
@@ -104,18 +104,18 @@ var useResizableItem = ({
       const { as, ...rest } = containerProps != null ? containerProps : {};
       return {
         ...props,
-        ref: controlRef,
         id,
-        tagName: as,
+        ref: controlRef,
+        collapsedSize,
         collapsible,
         defaultSize,
         maxSize,
         minSize,
-        collapsedSize,
+        order,
+        tagName: as,
         onCollapse,
         onExpand,
         onResize,
-        order,
         ...collapsible ? { "aria-labelledby": id } : { "aria-label": id },
         ...rest
       };
@@ -142,11 +142,11 @@ var useResizableItem = ({
   (0, import_react.useEffect)(() => {
     if (!id) return;
     const el = (0, import_react_resizable_panels.getPanelElement)(id);
-    if (ref) ref.current = el;
+    if ((0, import_utils.isRefObject)(ref)) ref.current = el;
   }, [ref, id]);
   return {
-    getPanelProps,
-    getItemProps
+    getItemProps,
+    getPanelProps
   };
 };
 var useResizableTrigger = ({
@@ -167,16 +167,16 @@ var useResizableTrigger = ({
     (props = {}) => ({
       ...props,
       id,
-      tagName: as,
       disabled: trulyDisabled,
+      tagName: as,
       onDragging: (0, import_utils.handlerAll)(onDragging, (isActive2) => setIsActive(isActive2)),
       ...rest,
-      "data-active": (0, import_utils.dataAttr)(isActive),
       style: {
         ...props.style,
         ...rest.style,
         ...trulyDisabled ? { cursor: "default" } : {}
-      }
+      },
+      "data-active": (0, import_utils.dataAttr)(isActive)
     }),
     [id, as, trulyDisabled, onDragging, rest, isActive]
   );
@@ -191,11 +191,11 @@ var useResizableTrigger = ({
   (0, import_react.useEffect)(() => {
     if (!id) return;
     const el = (0, import_react_resizable_panels.getResizeHandleElement)(id);
-    if (ref) ref.current = el;
+    if ((0, import_utils.isRefObject)(ref)) ref.current = el;
   }, [ref, id]);
   return {
-    getTriggerProps,
-    getIconProps
+    getIconProps,
+    getTriggerProps
   };
 };
 // Annotate the CommonJS export names for ESM import in node:

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 { createContext, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, RefObject } from \"react\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\nimport type {\n  PanelResizeHandleProps,\n  PanelGroupProps,\n  PanelProps,\n  PanelGroupOnLayout,\n  PanelGroupStorage,\n  ImperativePanelHandle,\n} from \"react-resizable-panels\"\n\ninterface As {\n  as?: keyof HTMLElementTagNameMap\n}\n\ninterface ResizableGroupProps\n  extends Omit<Partial<PanelGroupProps>, \"id\" | \"tagName\" | \"children\">,\n    As {}\ninterface ResizableItemProps\n  extends Omit<PanelProps, \"id\" | \"tagName\" | \"children\">,\n    As {}\ninterface ResizableTriggerProps\n  extends Omit<PanelResizeHandleProps, \"id\" | \"tagName\" | \"children\">,\n    As {}\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableContext {\n  isDisabled: boolean\n  styles: { [key: string]: CSSUIObject }\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   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n}\n\nexport const useResizable = ({\n  id,\n  direction = \"horizontal\",\n  storageKey,\n  keyboardStep,\n  isDisabled = false,\n  onLayout,\n  storage,\n  ref,\n  groupProps,\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        direction,\n        tagName: as,\n        autoSaveId: storageKey,\n        keyboardResizeBy: keyboardStep,\n        onLayout,\n        storage,\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    // @ts-expect-error\n    if (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   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: number\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   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableItemControl>\n  /**\n   * Props for resizable item container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"as\"> & ResizableItemProps\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  defaultSize,\n  maxSize,\n  minSize,\n  onCollapse,\n  onExpand,\n  onResize,\n  order,\n  controlRef,\n  containerProps,\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        ref: controlRef,\n        id,\n        tagName: as,\n        collapsible,\n        defaultSize,\n        maxSize,\n        minSize,\n        collapsedSize,\n        onCollapse,\n        onExpand,\n        onResize,\n        order,\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    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getPanelProps,\n    getItemProps,\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        tagName: as,\n        disabled: trulyDisabled,\n        onDragging: handlerAll(onDragging, (isActive) => setIsActive(isActive)),\n        ...rest,\n        \"data-active\": dataAttr(isActive),\n        style: {\n          ...props.style,\n          ...rest.style,\n          ...(trulyDisabled ? { cursor: \"default\" } : {}),\n        },\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    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getTriggerProps,\n    getIconProps,\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 { 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\ninterface As {\n  as?: keyof HTMLElementTagNameMap\n}\n\ninterface ResizableGroupProps\n  extends Omit<Partial<PanelGroupProps>, \"children\" | \"id\" | \"tagName\">,\n    As {}\ninterface ResizableItemProps\n  extends Omit<PanelProps, \"children\" | \"id\" | \"tagName\">,\n    As {}\ninterface ResizableTriggerProps\n  extends Omit<PanelResizeHandleProps, \"children\" | \"id\" | \"tagName\">,\n    As {}\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"]}

package/dist/use-resizable.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/resizable",
-  "version": "1.1.14-dev-20241005220629",
+  "version": "1.1.14-dev-20241006000212",
   "description": "Yamada UI resizable component",
   "keywords": [
     "yamada",
@@ -37,9 +37,9 @@
   },
   "dependencies": {
     "react-resizable-panels": "^2.1.3",
-    "@yamada-ui/core": "1.15.2-dev-20241005220629",
-    "@yamada-ui/icon": "1.1.8-dev-20241005220629",
-    "@yamada-ui/utils": "1.5.2"
+    "@yamada-ui/core": "1.15.2-dev-20241006000212",
+    "@yamada-ui/icon": "1.1.8-dev-20241006000212",
+    "@yamada-ui/utils": "1.5.3-dev-20241006000212"
   },
   "devDependencies": {
     "clean-package": "2.2.0",

package/dist/chunk-E3WJJXQT.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 { createContext, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, RefObject } from \"react\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\nimport type {\n  PanelResizeHandleProps,\n  PanelGroupProps,\n  PanelProps,\n  PanelGroupOnLayout,\n  PanelGroupStorage,\n  ImperativePanelHandle,\n} from \"react-resizable-panels\"\n\ninterface As {\n  as?: keyof HTMLElementTagNameMap\n}\n\ninterface ResizableGroupProps\n  extends Omit<Partial<PanelGroupProps>, \"id\" | \"tagName\" | \"children\">,\n    As {}\ninterface ResizableItemProps\n  extends Omit<PanelProps, \"id\" | \"tagName\" | \"children\">,\n    As {}\ninterface ResizableTriggerProps\n  extends Omit<PanelResizeHandleProps, \"id\" | \"tagName\" | \"children\">,\n    As {}\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableContext {\n  isDisabled: boolean\n  styles: { [key: string]: CSSUIObject }\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   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n}\n\nexport const useResizable = ({\n  id,\n  direction = \"horizontal\",\n  storageKey,\n  keyboardStep,\n  isDisabled = false,\n  onLayout,\n  storage,\n  ref,\n  groupProps,\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        direction,\n        tagName: as,\n        autoSaveId: storageKey,\n        keyboardResizeBy: keyboardStep,\n        onLayout,\n        storage,\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    // @ts-expect-error\n    if (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   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: number\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   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableItemControl>\n  /**\n   * Props for resizable item container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"as\"> & ResizableItemProps\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  defaultSize,\n  maxSize,\n  minSize,\n  onCollapse,\n  onExpand,\n  onResize,\n  order,\n  controlRef,\n  containerProps,\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        ref: controlRef,\n        id,\n        tagName: as,\n        collapsible,\n        defaultSize,\n        maxSize,\n        minSize,\n        collapsedSize,\n        onCollapse,\n        onExpand,\n        onResize,\n        order,\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    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getPanelProps,\n    getItemProps,\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        tagName: as,\n        disabled: trulyDisabled,\n        onDragging: handlerAll(onDragging, (isActive) => setIsActive(isActive)),\n        ...rest,\n        \"data-active\": dataAttr(isActive),\n        style: {\n          ...props.style,\n          ...rest.style,\n          ...(trulyDisabled ? { cursor: \"default\" } : {}),\n        },\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    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getTriggerProps,\n    getIconProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":"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","names":["ref","rest","isActive"]}

package/dist/chunk-GKF6QUMG.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/resizable-item.tsx"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ForwardedRef } from \"react\"\nimport { Panel } from \"react-resizable-panels\"\nimport type { UseResizableItemProps } from \"./use-resizable\"\nimport { useResizableContext, useResizableItem } from \"./use-resizable\"\n\nconst panelProps = new Set([\"order\"])\n\nconst UIPanel = ui(Panel, { disableStyleProp: (prop) => panelProps.has(prop) })\n\ninterface ResizableItemOptions {\n  /**\n   * Ref for resizable item inner element.\n   */\n  innerRef?: ForwardedRef<HTMLDivElement>\n}\n\nexport interface ResizableItemProps\n  extends Omit<UseResizableItemProps, \"ref\">,\n    ResizableItemOptions {}\n\nexport const ResizableItem = forwardRef<ResizableItemProps, \"div\">(\n  (\n    {\n      className,\n      children,\n      innerRef,\n      w,\n      width,\n      minW,\n      minWidth,\n      maxW,\n      maxWidth,\n      h,\n      height,\n      minH,\n      minHeight,\n      maxH,\n      maxHeight,\n      boxSize,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { styles } = useResizableContext()\n    const { getPanelProps, getItemProps } = useResizableItem({\n      ref,\n      ...rest,\n    })\n\n    const css: CSSUIObject = { boxSize: \"100%\", ...styles.item }\n\n    return (\n      <UIPanel\n        {...getPanelProps({\n          w,\n          width,\n          minW,\n          minWidth,\n          maxW,\n          maxWidth,\n          h,\n          height,\n          minH,\n          minHeight,\n          maxH,\n          maxHeight,\n          boxSize,\n        })}\n      >\n        <ui.div\n          className={cx(\"ui-resizable__item\", className)}\n          __css={css}\n          {...getItemProps({}, innerRef)}\n        >\n          {children}\n        </ui.div>\n      </UIPanel>\n    )\n  },\n)\n"],"mappings":";;;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AAEnB,SAAS,aAAa;AAoEd;AAhER,IAAM,aAAa,oBAAI,IAAI,CAAC,OAAO,CAAC;AAEpC,IAAM,UAAU,GAAG,OAAO,EAAE,kBAAkB,CAAC,SAAS,WAAW,IAAI,IAAI,EAAE,CAAC;AAavE,IAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,OAAO,IAAI,oBAAoB;AACvC,UAAM,EAAE,eAAe,aAAa,IAAI,iBAAiB;AAAA,MACvD;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAED,UAAM,MAAmB,EAAE,SAAS,QAAQ,GAAG,OAAO,KAAK;AAE3D,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,cAAc;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QAED;AAAA,UAAC,GAAG;AAAA,UAAH;AAAA,YACC,WAAW,GAAG,sBAAsB,SAAS;AAAA,YAC7C,OAAO;AAAA,YACN,GAAG,aAAa,CAAC,GAAG,QAAQ;AAAA,YAE5B;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":[]}