@yamada-ui/react/dist/cjs/components/resizable/use-resizable.cjs.map

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

{"version":3,"file":"use-resizable.cjs","names":["createContext","getRootProps: PropGetter","getGroupProps: PropGetter<\n    ResizableGroupProps,\n    undefined,\n    PanelGroupProps\n  >","mergeRefs","ref","getItemProps: PropGetter<ResizableItemProps, undefined, PanelProps>","getTriggerProps: PropGetter<\n    ResizableTriggerProps,\n    undefined,\n    PanelResizeHandleProps\n  >","getIconProps: PropGetter"],"sources":["../../../../src/components/resizable/use-resizable.ts"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, MouseEventHandler, RefObject } from \"react\"\nimport type {\n  ImperativePanelGroupHandle,\n  ImperativePanelHandle,\n  PanelGroupOnLayout,\n  PanelGroupProps,\n  PanelGroupStorage,\n  PanelProps,\n  PanelResizeHandleProps,\n} from \"react-resizable-panels\"\nimport type {\n  HTMLProps,\n  HTMLRefAttributes,\n  Orientation,\n  PropGetter,\n} from \"../../core\"\nimport { useCallback, useId, useLayoutEffect, useRef, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\nimport {\n  assignRef,\n  createContext,\n  dataAttr,\n  fnAll,\n  handlerAll,\n  mergeRefs,\n} from \"../../utils\"\n\ninterface ResizableContext\n  extends Omit<UseResizableReturn, \"getGroupProps\" | \"getRootProps\"> {}\n\nconst [ResizableContext, useResizableContext] = createContext<ResizableContext>(\n  {\n    name: \"ResizableContext\",\n  },\n)\n\nexport { ResizableContext, useResizableContext }\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableGroupControl extends ImperativePanelGroupHandle {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableGroupProps\n  extends Omit<Partial<PanelGroupProps>, \"tagName\"> {\n  /**\n   * Ref of the resizable group callback.\n   */\n  ref?: RefObject<ResizableGroupControl>\n  /**\n   * The HTML element to render.\n   */\n  as?: keyof HTMLElementTagNameMap\n}\ninterface ResizableItemProps extends Omit<PanelProps, \"tagName\"> {\n  /**\n   * Ref of the resizable item callback.\n   */\n  ref?: RefObject<ResizableItemControl>\n  /**\n   * The HTML element to render.\n   */\n  as?: keyof HTMLElementTagNameMap\n}\ninterface ResizableTriggerProps\n  extends Omit<PanelResizeHandleProps, \"tagName\">,\n    HTMLRefAttributes {\n  /**\n   * The HTML element to render.\n   */\n  as?: keyof HTMLElementTagNameMap\n}\n\nexport interface UseResizableProps extends HTMLProps {\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<null | ResizableGroupControl>\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  disabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * The orientation of the resizable.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\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  disabled,\n  keyboardStep,\n  orientation = \"horizontal\",\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 getRootProps: PropGetter = useCallback(\n    (props = {}) => ({ ...rest, ...props }),\n    [rest],\n  )\n\n  const getGroupProps: PropGetter<\n    ResizableGroupProps,\n    undefined,\n    PanelGroupProps\n  > = useCallback(\n    ({ ref, ...props } = {}) => ({\n      id,\n      autoSaveId: storageKey,\n      direction: orientation,\n      keyboardResizeBy: keyboardStep,\n      storage,\n      ...groupProps,\n      ...props,\n      ref: mergeRefs(ref, controlRefProp, controlRef),\n      tagName: props.as ?? groupProps.as,\n      onLayout: fnAll(props.onLayout, groupProps.onLayout, onLayout),\n    }),\n    [\n      id,\n      orientation,\n      groupProps,\n      controlRefProp,\n      storageKey,\n      keyboardStep,\n      onLayout,\n      storage,\n    ],\n  )\n\n  useLayoutEffect(() => {\n    const el = getPanelGroupElement(id) as HTMLDivElement | null\n\n    assignRef(ref, el)\n  }, [ref, id])\n\n  return {\n    controlRef,\n    disabled,\n    orientation,\n    getGroupProps,\n    getRootProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\nexport interface UseResizableItemProps\n  extends HTMLProps,\n    Pick<ResizableItemProps, \"as\"> {\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<null | 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   * 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 const useResizableItem = ({\n  id,\n  ref,\n  as,\n  controlRef,\n  onCollapse,\n  onExpand,\n  onResize,\n  ...rest\n}: UseResizableItemProps) => {\n  const uuid = useId()\n\n  id ??= uuid\n\n  const getItemProps: PropGetter<ResizableItemProps, undefined, PanelProps> =\n    useCallback(\n      ({ ref, ...props } = {}) => ({\n        id,\n        ref: mergeRefs(ref, controlRef),\n        tagName: props.as ?? as,\n        ...props,\n        ...rest,\n        onCollapse: fnAll(props.onCollapse, onCollapse),\n        onExpand: fnAll(props.onExpand, onExpand),\n        onResize: fnAll(props.onResize, onResize),\n      }),\n      [as, controlRef, id, onCollapse, onExpand, onResize, rest],\n    )\n\n  useLayoutEffect(() => {\n    const el = getPanelElement(id) as HTMLDivElement | null\n\n    assignRef(ref, el)\n  }, [ref, id])\n\n  return {\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\nexport interface UseResizableTriggerProps\n  extends HTMLProps,\n    Pick<ResizableTriggerProps, \"as\"> {\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The callback invoked when resizable trigger are dragged.\n   */\n  onDragging?: (dragging: boolean) => void\n}\n\nexport const useResizableTrigger = ({\n  id,\n  ref,\n  as,\n  disabled,\n  onDragging,\n  ...rest\n}: UseResizableTriggerProps) => {\n  const uuid = useId()\n  const {\n    controlRef,\n    disabled: groupDisabled,\n    orientation,\n  } = useResizableContext()\n  const [active, setActive] = useState<boolean>(false)\n  const trulyDisabled = disabled || groupDisabled\n\n  id ??= uuid\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    ResizableTriggerProps,\n    undefined,\n    PanelResizeHandleProps\n  > = useCallback(\n    (props = {}) =>\n      ({\n        id,\n        \"aria-orientation\": orientation,\n        \"data-active\": dataAttr(active),\n        \"data-disabled\": dataAttr(trulyDisabled),\n        disabled: trulyDisabled,\n        tabIndex: trulyDisabled ? -1 : 0,\n        tagName: props.as ?? as,\n        ...rest,\n        ...props,\n        onDoubleClick: handlerAll(\n          props.onDoubleClick as MouseEventHandler<HTMLDivElement> | undefined,\n          rest.onDoubleClick,\n          onDoubleClick,\n        ),\n        onDragging: fnAll(props.onDragging, onDragging, setActive),\n      }) as unknown as PanelResizeHandleProps,\n    [\n      id,\n      as,\n      orientation,\n      trulyDisabled,\n      rest,\n      onDoubleClick,\n      onDragging,\n      active,\n    ],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-active\": dataAttr(active),\n      \"data-icon\": \"\",\n      ...props,\n    }),\n    [active],\n  )\n\n  useLayoutEffect(() => {\n    const el = getResizeHandleElement(id) as HTMLDivElement | null\n\n    assignRef(ref, 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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"}