@yamada-ui/react 2.2.6-dev-20260730045651 → 2.2.6-dev-20260730065117

package/dist/cjs/components/editable/use-editable.cjs

@@ -65,8 +65,8 @@ const useEditable = (props = {}) => {
 	}, [onCancel]);
 	const onBlur = (0, react.useCallback)((ev) => {
 		if (!editing) return;
-		const ownerDocument = ev.currentTarget.ownerDocument;
-		const relatedTarget = ev.relatedTarget ?? ownerDocument.activeElement;
+		const rootNode = ev.currentTarget.getRootNode();
+		const relatedTarget = (0, require_utils_index.utils_exports.isShadowRoot)(rootNode) ? rootNode.activeElement ?? ev.relatedTarget : ev.relatedTarget ?? rootNode.activeElement;
 		const targetIsCancel = (0, require_utils_index.utils_exports.contains)(cancelRef.current, relatedTarget);
 		const targetIsSubmit = (0, require_utils_index.utils_exports.contains)(submitRef.current, relatedTarget);
 		if (!(!targetIsCancel && !targetIsSubmit)) return;
@@ -102,9 +102,8 @@ const useEditable = (props = {}) => {
 		selectAllOnFocus
 	]);
 	(0, react.useEffect)(() => {
-		if (editing) return;
-		const el = inputRef.current;
-		if (el?.ownerDocument.activeElement === el) el?.blur();
+		if (editing || !inputRef.current) return;
+		if ((0, require_utils_index.utils_exports.isActiveElement)(inputRef.current, inputRef.current.getRootNode())) inputRef.current.blur();
 	}, [editing]);
 	const getRootProps = (0, react.useCallback)((props) => ({
 		...rest,

package/dist/cjs/components/editable/use-editable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-editable.cjs","names":["createContext","useFieldProps","useCallbackRef","useControllableState","mergeRefs"],"sources":["../../../../src/components/editable/use-editable.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\"\nimport type { PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useFocusOnPointerDown } from \"../../hooks/use-focus\"\nimport {\n  contains,\n  createContext,\n  handlerAll,\n  mergeRefs,\n  useCallbackRef,\n  useSafeLayoutEffect,\n  useUpdateEffect,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface EditableContext extends Omit<\n  UseEditableReturn,\n  \"getRootProps\" | \"onCancel\" | \"onEdit\" | \"onSubmit\" | \"value\"\n> {}\n\nconst [EditableContext, useEditableContext] = createContext<EditableContext>({\n  name: \"EditableContext\",\n})\n\nexport { EditableContext, useEditableContext }\n\nexport interface UseEditableProps extends FieldProps {\n  /**\n   * The initial value of the Editable in both edit & preview mode.\n   */\n  defaultValue?: string\n  /**\n   * The placeholder text when the value is empty.\n   */\n  placeholder?: string\n  /**\n   * If `true`, the read only view, has a `tabIndex` set to `0`\n   * so it can receive focus via the keyboard or click.\n   *\n   * @default true\n   */\n  previewFocusable?: boolean\n  /**\n   * If `true`, the input's text will be highlighted on focus.\n   *\n   * @default true\n   */\n  selectAllOnFocus?: boolean\n  /**\n   * If `true`, the Editable will start with edit mode by default.\n   */\n  startWithEditView?: boolean\n  /**\n   * If `true`, it'll update the value onBlur and turn off the edit mode.\n   *\n   * @default true\n   */\n  submitOnBlur?: boolean\n  /**\n   * The value of the Editable in both edit & preview mode.\n   */\n  value?: string\n  /**\n   * Callback invoked when user cancels input with the `Esc` key.\n   * It provides the last confirmed value as argument.\n   */\n  onCancel?: (preValue: string) => void\n  /**\n   * A callback invoked when user changes input.\n   */\n  onChange?: (value: string) => void\n  /**\n   * A callback invoked once the user enters edit mode.\n   */\n  onEdit?: () => void\n  /**\n   * A callback invoked when user confirms value with `enter` key or by blurring input.\n   */\n  onSubmit?: (value: string) => void\n}\n\nexport const useEditable = (props: UseEditableProps = {}) => {\n  const {\n    props: {\n      id,\n      defaultValue,\n      disabled,\n      placeholder,\n      previewFocusable = true,\n      readOnly,\n      required,\n      selectAllOnFocus = true,\n      startWithEditView,\n      submitOnBlur = true,\n      value: valueProp,\n      onCancel: onCancelProp,\n      onChange: onChangeProp,\n      onEdit: onEditProp,\n      onSubmit: onSubmitProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const onEditRef = useCallbackRef(onEditProp)\n  const [editing, setEditing] = useState<boolean>(\n    !!startWithEditView && !disabled,\n  )\n  const [value, setValue] = useControllableState({\n    defaultValue: defaultValue || \"\",\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const interactive = !editing && !disabled\n  const emptyValue = value.length === 0\n  const [prevValue, setPrevValue] = useState(value)\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)\n  const previewRef = useRef<HTMLElement>(null)\n  const editRef = useRef<HTMLButtonElement>(null)\n  const cancelRef = useRef<HTMLButtonElement>(null)\n  const submitRef = useRef<HTMLButtonElement>(null)\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>\n      setValue(ev.currentTarget.value),\n    [setValue],\n  )\n\n  const onUpdatePrevValue = useCallback(() => setPrevValue(value), [value])\n\n  const onEdit = useCallback(() => {\n    if (interactive) setEditing(true)\n  }, [interactive])\n\n  const onCancel = useCallback(() => {\n    setEditing(false)\n    setValue(prevValue)\n    onCancelProp?.(prevValue)\n  }, [prevValue, onCancelProp, setValue])\n\n  const onSubmit = useCallback(() => {\n    setEditing(false)\n    setPrevValue(value)\n    onSubmitProp?.(value)\n  }, [onSubmitProp, value])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent) => {\n      if (ev.key !== \"Escape\" && ev.key !== \"Enter\") return\n\n      if (ev.key === \"Escape\") {\n        ev.preventDefault()\n        onCancel()\n      } else {\n        const { metaKey, shiftKey } = ev\n\n        if (!shiftKey && !metaKey) {\n          ev.preventDefault()\n          onSubmit()\n        }\n      }\n    },\n    [onCancel, onSubmit],\n  )\n\n  const onKeyDownWithoutSubmit = useCallback(\n    (ev: KeyboardEvent) => {\n      if (ev.key !== \"Escape\") return\n\n      ev.preventDefault()\n      onCancel()\n    },\n    [onCancel],\n  )\n\n  const onBlur = useCallback(\n    (ev: FocusEvent) => {\n      if (!editing) return\n\n      const ownerDocument = ev.currentTarget.ownerDocument\n      const relatedTarget = (ev.relatedTarget ??\n        ownerDocument.activeElement) as HTMLElement\n      const targetIsCancel = contains(cancelRef.current, relatedTarget)\n      const targetIsSubmit = contains(submitRef.current, relatedTarget)\n      const validBlur = !targetIsCancel && !targetIsSubmit\n\n      if (!validBlur) return\n\n      if (submitOnBlur) onSubmit()\n      else onCancel()\n    },\n    [editing, submitOnBlur, onSubmit, onCancel],\n  )\n\n  useFocusOnPointerDown({\n    ref: inputRef,\n    elements: [cancelRef, submitRef],\n    enabled: editing,\n  })\n\n  useSafeLayoutEffect(() => {\n    if (!editing) return\n\n    inputRef.current?.focus()\n\n    if (selectAllOnFocus) inputRef.current?.select()\n  }, [])\n\n  useUpdateEffect(() => {\n    if (!editing) {\n      editRef.current?.focus()\n\n      return\n    }\n\n    inputRef.current?.focus()\n\n    if (selectAllOnFocus) inputRef.current?.select()\n\n    onEditRef()\n  }, [editing, onEditRef, selectAllOnFocus])\n\n  useEffect(() => {\n    if (editing) return\n\n    const el = inputRef.current\n    const activeEl = el?.ownerDocument.activeElement\n\n    if (activeEl === el) el?.blur()\n  }, [editing])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      ...rest,\n      ...dataProps,\n      ...props,\n    }),\n    [rest, dataProps],\n  )\n\n  const getPreviewProps: PropGetter<\"span\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(previewRef, ref),\n      children: emptyValue ? placeholder : value,\n      hidden: editing,\n      tabIndex: interactive && previewFocusable ? 0 : undefined,\n      onFocus: handlerAll(props.onFocus, onEdit, onUpdatePrevValue),\n    }),\n    [\n      dataProps,\n      editing,\n      interactive,\n      previewFocusable,\n      emptyValue,\n      onEdit,\n      onUpdatePrevValue,\n      placeholder,\n      value,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...ariaProps,\n      ...props,\n      id,\n      ref: mergeRefs(inputRef, ref),\n      disabled,\n      hidden: !editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      dataProps,\n      ariaProps,\n      id,\n      disabled,\n      editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      eventProps.onBlur,\n      eventProps.onFocus,\n      onBlur,\n      onChange,\n      onUpdatePrevValue,\n      onKeyDown,\n    ],\n  )\n\n  const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...ariaProps,\n      ...props,\n      id,\n      ref: mergeRefs(inputRef, ref),\n      disabled,\n      hidden: !editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n    }),\n    [\n      dataProps,\n      ariaProps,\n      id,\n      disabled,\n      editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      eventProps.onBlur,\n      eventProps.onFocus,\n      onBlur,\n      onChange,\n      onUpdatePrevValue,\n      onKeyDownWithoutSubmit,\n    ],\n  )\n\n  const getControlProps: PropGetter = useCallback(\n    (props) => ({\n      ...dataProps,\n      role: \"group\",\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  const getEditProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(editRef, ref),\n      disabled,\n      hidden: editing,\n      onClick: handlerAll(props.onClick, onEdit),\n    }),\n    [dataProps, disabled, editing, onEdit],\n  )\n\n  const getSubmitProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(submitRef, ref),\n      disabled,\n      hidden: !editing,\n      onClick: handlerAll(props.onClick, onSubmit),\n    }),\n    [dataProps, disabled, editing, onSubmit],\n  )\n\n  const getCancelProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(cancelRef, ref),\n      disabled,\n      hidden: !editing,\n      onClick: handlerAll(props.onClick, onCancel),\n    }),\n    [dataProps, disabled, editing, onCancel],\n  )\n\n  return {\n    editing,\n    value,\n    getCancelProps,\n    getControlProps,\n    getEditProps,\n    getInputProps,\n    getPreviewProps,\n    getRootProps,\n    getSubmitProps,\n    getTextareaProps,\n    onCancel,\n    onEdit,\n    onSubmit,\n  }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n"],"mappings":"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"}
+{"version":3,"file":"use-editable.cjs","names":["createContext","useFieldProps","useCallbackRef","useControllableState","mergeRefs"],"sources":["../../../../src/components/editable/use-editable.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\"\nimport type { PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useFocusOnPointerDown } from \"../../hooks/use-focus\"\nimport {\n  contains,\n  createContext,\n  handlerAll,\n  isActiveElement,\n  isShadowRoot,\n  mergeRefs,\n  useCallbackRef,\n  useSafeLayoutEffect,\n  useUpdateEffect,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface EditableContext extends Omit<\n  UseEditableReturn,\n  \"getRootProps\" | \"onCancel\" | \"onEdit\" | \"onSubmit\" | \"value\"\n> {}\n\nconst [EditableContext, useEditableContext] = createContext<EditableContext>({\n  name: \"EditableContext\",\n})\n\nexport { EditableContext, useEditableContext }\n\nexport interface UseEditableProps extends FieldProps {\n  /**\n   * The initial value of the Editable in both edit & preview mode.\n   */\n  defaultValue?: string\n  /**\n   * The placeholder text when the value is empty.\n   */\n  placeholder?: string\n  /**\n   * If `true`, the read only view, has a `tabIndex` set to `0`\n   * so it can receive focus via the keyboard or click.\n   *\n   * @default true\n   */\n  previewFocusable?: boolean\n  /**\n   * If `true`, the input's text will be highlighted on focus.\n   *\n   * @default true\n   */\n  selectAllOnFocus?: boolean\n  /**\n   * If `true`, the Editable will start with edit mode by default.\n   */\n  startWithEditView?: boolean\n  /**\n   * If `true`, it'll update the value onBlur and turn off the edit mode.\n   *\n   * @default true\n   */\n  submitOnBlur?: boolean\n  /**\n   * The value of the Editable in both edit & preview mode.\n   */\n  value?: string\n  /**\n   * Callback invoked when user cancels input with the `Esc` key.\n   * It provides the last confirmed value as argument.\n   */\n  onCancel?: (preValue: string) => void\n  /**\n   * A callback invoked when user changes input.\n   */\n  onChange?: (value: string) => void\n  /**\n   * A callback invoked once the user enters edit mode.\n   */\n  onEdit?: () => void\n  /**\n   * A callback invoked when user confirms value with `enter` key or by blurring input.\n   */\n  onSubmit?: (value: string) => void\n}\n\nexport const useEditable = (props: UseEditableProps = {}) => {\n  const {\n    props: {\n      id,\n      defaultValue,\n      disabled,\n      placeholder,\n      previewFocusable = true,\n      readOnly,\n      required,\n      selectAllOnFocus = true,\n      startWithEditView,\n      submitOnBlur = true,\n      value: valueProp,\n      onCancel: onCancelProp,\n      onChange: onChangeProp,\n      onEdit: onEditProp,\n      onSubmit: onSubmitProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const onEditRef = useCallbackRef(onEditProp)\n  const [editing, setEditing] = useState<boolean>(\n    !!startWithEditView && !disabled,\n  )\n  const [value, setValue] = useControllableState({\n    defaultValue: defaultValue || \"\",\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const interactive = !editing && !disabled\n  const emptyValue = value.length === 0\n  const [prevValue, setPrevValue] = useState(value)\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)\n  const previewRef = useRef<HTMLElement>(null)\n  const editRef = useRef<HTMLButtonElement>(null)\n  const cancelRef = useRef<HTMLButtonElement>(null)\n  const submitRef = useRef<HTMLButtonElement>(null)\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>\n      setValue(ev.currentTarget.value),\n    [setValue],\n  )\n\n  const onUpdatePrevValue = useCallback(() => setPrevValue(value), [value])\n\n  const onEdit = useCallback(() => {\n    if (interactive) setEditing(true)\n  }, [interactive])\n\n  const onCancel = useCallback(() => {\n    setEditing(false)\n    setValue(prevValue)\n    onCancelProp?.(prevValue)\n  }, [prevValue, onCancelProp, setValue])\n\n  const onSubmit = useCallback(() => {\n    setEditing(false)\n    setPrevValue(value)\n    onSubmitProp?.(value)\n  }, [onSubmitProp, value])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent) => {\n      if (ev.key !== \"Escape\" && ev.key !== \"Enter\") return\n\n      if (ev.key === \"Escape\") {\n        ev.preventDefault()\n        onCancel()\n      } else {\n        const { metaKey, shiftKey } = ev\n\n        if (!shiftKey && !metaKey) {\n          ev.preventDefault()\n          onSubmit()\n        }\n      }\n    },\n    [onCancel, onSubmit],\n  )\n\n  const onKeyDownWithoutSubmit = useCallback(\n    (ev: KeyboardEvent) => {\n      if (ev.key !== \"Escape\") return\n\n      ev.preventDefault()\n      onCancel()\n    },\n    [onCancel],\n  )\n\n  const onBlur = useCallback(\n    (ev: FocusEvent) => {\n      if (!editing) return\n\n      const rootNode = ev.currentTarget.getRootNode() as Document | ShadowRoot\n      const relatedTarget = (\n        isShadowRoot(rootNode)\n          ? (rootNode.activeElement ?? ev.relatedTarget)\n          : (ev.relatedTarget ?? rootNode.activeElement)\n      ) as HTMLElement\n      const targetIsCancel = contains(cancelRef.current, relatedTarget)\n      const targetIsSubmit = contains(submitRef.current, relatedTarget)\n      const validBlur = !targetIsCancel && !targetIsSubmit\n\n      if (!validBlur) return\n\n      if (submitOnBlur) onSubmit()\n      else onCancel()\n    },\n    [editing, submitOnBlur, onSubmit, onCancel],\n  )\n\n  useFocusOnPointerDown({\n    ref: inputRef,\n    elements: [cancelRef, submitRef],\n    enabled: editing,\n  })\n\n  useSafeLayoutEffect(() => {\n    if (!editing) return\n\n    inputRef.current?.focus()\n\n    if (selectAllOnFocus) inputRef.current?.select()\n  }, [])\n\n  useUpdateEffect(() => {\n    if (!editing) {\n      editRef.current?.focus()\n\n      return\n    }\n\n    inputRef.current?.focus()\n\n    if (selectAllOnFocus) inputRef.current?.select()\n\n    onEditRef()\n  }, [editing, onEditRef, selectAllOnFocus])\n\n  useEffect(() => {\n    if (editing || !inputRef.current) return\n    if (isActiveElement(inputRef.current, inputRef.current.getRootNode()))\n      inputRef.current.blur()\n  }, [editing])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      ...rest,\n      ...dataProps,\n      ...props,\n    }),\n    [rest, dataProps],\n  )\n\n  const getPreviewProps: PropGetter<\"span\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(previewRef, ref),\n      children: emptyValue ? placeholder : value,\n      hidden: editing,\n      tabIndex: interactive && previewFocusable ? 0 : undefined,\n      onFocus: handlerAll(props.onFocus, onEdit, onUpdatePrevValue),\n    }),\n    [\n      dataProps,\n      editing,\n      interactive,\n      previewFocusable,\n      emptyValue,\n      onEdit,\n      onUpdatePrevValue,\n      placeholder,\n      value,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...ariaProps,\n      ...props,\n      id,\n      ref: mergeRefs(inputRef, ref),\n      disabled,\n      hidden: !editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      dataProps,\n      ariaProps,\n      id,\n      disabled,\n      editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      eventProps.onBlur,\n      eventProps.onFocus,\n      onBlur,\n      onChange,\n      onUpdatePrevValue,\n      onKeyDown,\n    ],\n  )\n\n  const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...ariaProps,\n      ...props,\n      id,\n      ref: mergeRefs(inputRef, ref),\n      disabled,\n      hidden: !editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n    }),\n    [\n      dataProps,\n      ariaProps,\n      id,\n      disabled,\n      editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      eventProps.onBlur,\n      eventProps.onFocus,\n      onBlur,\n      onChange,\n      onUpdatePrevValue,\n      onKeyDownWithoutSubmit,\n    ],\n  )\n\n  const getControlProps: PropGetter = useCallback(\n    (props) => ({\n      ...dataProps,\n      role: \"group\",\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  const getEditProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(editRef, ref),\n      disabled,\n      hidden: editing,\n      onClick: handlerAll(props.onClick, onEdit),\n    }),\n    [dataProps, disabled, editing, onEdit],\n  )\n\n  const getSubmitProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(submitRef, ref),\n      disabled,\n      hidden: !editing,\n      onClick: handlerAll(props.onClick, onSubmit),\n    }),\n    [dataProps, disabled, editing, onSubmit],\n  )\n\n  const getCancelProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(cancelRef, ref),\n      disabled,\n      hidden: !editing,\n      onClick: handlerAll(props.onClick, onCancel),\n    }),\n    [dataProps, disabled, editing, onCancel],\n  )\n\n  return {\n    editing,\n    value,\n    getCancelProps,\n    getControlProps,\n    getEditProps,\n    getInputProps,\n    getPreviewProps,\n    getRootProps,\n    getSubmitProps,\n    getTextareaProps,\n    onCancel,\n    onEdit,\n    onSubmit,\n  }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n"],"mappings":"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"}

package/dist/cjs/components/tooltip/tooltip.cjs

@@ -16,7 +16,7 @@ const { PropsContext: TooltipPropsContext, StyleContext, usePropsContext: useToo
 * @see https://yamada-ui.com/docs/components/tooltip
 */
 const Tooltip = (props) => {
-	const [context, { animationScheme = "scale", children, content, duration = .1, contentProps, portalProps, ...rest }] = useRootComponentProps(props);
+	const [context, { animationScheme = "scale", children, content, duration = .1, contentProps, portalProps, positionerProps, ...rest }] = useRootComponentProps(props);
 	const { open, getContentProps, getPositionerProps, getTriggerProps } = require_use_tooltip.useTooltip(rest);
 	const popupAnimationProps = require_popover.usePopupAnimationProps({
 		animationScheme,
@@ -32,7 +32,7 @@ const Tooltip = (props) => {
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, { children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_portal.Portal, {
 			...portalProps,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipPositioner, {
-				...getPositionerProps(),
+				...getPositionerProps(positionerProps),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, {
 					...popupAnimationProps,
 					...(0, require_utils_index.utils_exports.cast)(getContentProps((0, require_utils_index.utils_exports.cast)(contentProps))),

package/dist/cjs/components/tooltip/tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.cjs","names":["createSlotComponent","tooltipStyle","useTooltip","usePopupAnimationProps","AnimatePresence","Portal","motion"],"sources":["../../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { TooltipStyle } from \"./tooltip.style\"\nimport type { UseTooltipProps } from \"./use-tooltip\"\nimport { AnimatePresence } from \"motion/react\"\nimport { createSlotComponent } from \"../../core\"\nimport { cast } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { tooltipStyle } from \"./tooltip.style\"\nimport { useTooltip } from \"./use-tooltip\"\n\nexport interface TooltipProps\n  extends\n    UseTooltipProps,\n    PropsWithChildren,\n    UsePopupAnimationProps,\n    ThemeProps<TooltipStyle> {\n  /**\n   * The content of the tooltip.\n   */\n  content?: ReactNode\n  /**\n   * The animation duration.\n   *\n   * @default 0.1\n   */\n  duration?: UsePopupAnimationProps[\"duration\"]\n  /**\n   * Props for content element.\n   */\n  contentProps?: HTMLMotionProps\n  /**\n   * Props for portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n}\n\nconst {\n  PropsContext: TooltipPropsContext,\n  StyleContext,\n  usePropsContext: useTooltipPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<TooltipProps, TooltipStyle>(\"tooltip\", tooltipStyle)\n\nexport { TooltipPropsContext, useTooltipPropsContext }\n\n/**\n * `Tooltip` is a component that displays short information, such as supplementary details for an element.\n *\n * @see https://yamada-ui.com/docs/components/tooltip\n */\nexport const Tooltip: FC<TooltipProps> = (props) => {\n  const [\n    context,\n    {\n      animationScheme = \"scale\",\n      children,\n      content,\n      duration = 0.1,\n      contentProps,\n      portalProps,\n      ...rest\n    },\n  ] = useRootComponentProps(props)\n  const { open, getContentProps, getPositionerProps, getTriggerProps } =\n    useTooltip(rest)\n  const popupAnimationProps = usePopupAnimationProps({\n    animationScheme,\n    duration,\n  })\n\n  if (!content) return children\n\n  return (\n    <StyleContext value={context}>\n      <TooltipTrigger asChild {...getTriggerProps()}>\n        {children}\n      </TooltipTrigger>\n\n      <AnimatePresence>\n        {open ? (\n          <Portal {...portalProps}>\n            <TooltipPositioner {...getPositionerProps()}>\n              <TooltipContent\n                {...popupAnimationProps}\n                {...cast<HTMLMotionProps>(\n                  getContentProps(cast<HTMLProps>(contentProps)),\n                )}\n              >\n                {content}\n              </TooltipContent>\n            </TooltipPositioner>\n          </Portal>\n        ) : null}\n      </AnimatePresence>\n    </StyleContext>\n  )\n}\n\ninterface TooltipPositionerProps extends HTMLStyledProps {}\n\nconst TooltipPositioner = withContext<\"div\", TooltipPositionerProps>(\n  \"div\",\n  \"positioner\",\n)()\n\ninterface TooltipTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nconst TooltipTrigger = withContext<\"button\", TooltipTriggerProps>(\n  \"button\",\n  \"trigger\",\n)()\n\ninterface TooltipContentProps extends Omit<\n  HTMLMotionProps,\n  \"children\" | \"offset\" | \"transform\"\n> {}\n\nconst TooltipContent = withContext<\"div\", TooltipContentProps>(\n  motion.div,\n  \"content\",\n)()\n"],"mappings":";;;;;;;;;;;AA4CA,MAAM,EACJ,cAAc,qBACd,cACA,iBAAiB,wBACjB,aACA,0BACEA,yBAAAA,oBAAgD,WAAWC,sBAAAA,YAAY;;;;;;AAS3E,MAAa,WAA6B,UAAU;CAClD,MAAM,CACJ,SACA,EACE,kBAAkB,SAClB,UACA,SACA,WAAW,IACX,cACA,aACA,GAAG,UAEH,sBAAsB,KAAK;CAC/B,MAAM,EAAE,MAAM,iBAAiB,oBAAoB,oBACjDC,oBAAAA,WAAW,IAAI;CACjB,MAAM,sBAAsBC,gBAAAA,uBAAuB;EACjD;EACA;CACF,CAAC;CAED,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,cAAD;EAAc,OAAO;EAArB,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAD;GAAgB,SAAA;GAAQ,GAAI,gBAAgB;GACzC;EACa,CAAA,GAEhB,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,iBAAD,EAAA,UACG,OACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;GAAQ,GAAI;GACV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;IAAmB,GAAI,mBAAmB;IACxC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAD;KACE,GAAI;KACJ,IAAA,GAAA,oBAAA,cAAA,KAAA,CACE,iBAAA,GAAA,oBAAA,cAAA,KAAA,CAAgC,YAAY,CAAC,CAC/C;KAEC,UAAA;IACa,CAAA;GACC,CAAA;EACb,CAAA,IACN,KACW,CAAA,CACL;;AAElB;AAIA,MAAM,oBAAoB,YACxB,OACA,YACF,CAAC,CAAC;AAIF,MAAM,iBAAiB,YACrB,UACA,SACF,CAAC,CAAC;AAOF,MAAM,iBAAiB,YACrBC,gBAAAA,OAAO,KACP,SACF,CAAC,CAAC"}
+{"version":3,"file":"tooltip.cjs","names":["createSlotComponent","tooltipStyle","useTooltip","usePopupAnimationProps","AnimatePresence","Portal","motion"],"sources":["../../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { TooltipStyle } from \"./tooltip.style\"\nimport type { UseTooltipProps } from \"./use-tooltip\"\nimport { AnimatePresence } from \"motion/react\"\nimport { createSlotComponent } from \"../../core\"\nimport { cast } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { tooltipStyle } from \"./tooltip.style\"\nimport { useTooltip } from \"./use-tooltip\"\n\nexport interface TooltipProps\n  extends\n    UseTooltipProps,\n    PropsWithChildren,\n    UsePopupAnimationProps,\n    ThemeProps<TooltipStyle> {\n  /**\n   * The content of the tooltip.\n   */\n  content?: ReactNode\n  /**\n   * The animation duration.\n   *\n   * @default 0.1\n   */\n  duration?: UsePopupAnimationProps[\"duration\"]\n  /**\n   * Props for content element.\n   */\n  contentProps?: TooltipContentProps\n  /**\n   * Props for portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Props for positioner element.\n   */\n  positionerProps?: Omit<TooltipPositionerProps, \"children\">\n}\n\nconst {\n  PropsContext: TooltipPropsContext,\n  StyleContext,\n  usePropsContext: useTooltipPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<TooltipProps, TooltipStyle>(\"tooltip\", tooltipStyle)\n\nexport { TooltipPropsContext, useTooltipPropsContext }\n\n/**\n * `Tooltip` is a component that displays short information, such as supplementary details for an element.\n *\n * @see https://yamada-ui.com/docs/components/tooltip\n */\nexport const Tooltip: FC<TooltipProps> = (props) => {\n  const [\n    context,\n    {\n      animationScheme = \"scale\",\n      children,\n      content,\n      duration = 0.1,\n      contentProps,\n      portalProps,\n      positionerProps,\n      ...rest\n    },\n  ] = useRootComponentProps(props)\n  const { open, getContentProps, getPositionerProps, getTriggerProps } =\n    useTooltip(rest)\n  const popupAnimationProps = usePopupAnimationProps({\n    animationScheme,\n    duration,\n  })\n\n  if (!content) return children\n\n  return (\n    <StyleContext value={context}>\n      <TooltipTrigger asChild {...getTriggerProps()}>\n        {children}\n      </TooltipTrigger>\n\n      <AnimatePresence>\n        {open ? (\n          <Portal {...portalProps}>\n            <TooltipPositioner {...getPositionerProps(positionerProps)}>\n              <TooltipContent\n                {...popupAnimationProps}\n                {...cast<HTMLMotionProps>(\n                  getContentProps(cast<HTMLProps>(contentProps)),\n                )}\n              >\n                {content}\n              </TooltipContent>\n            </TooltipPositioner>\n          </Portal>\n        ) : null}\n      </AnimatePresence>\n    </StyleContext>\n  )\n}\n\ninterface TooltipPositionerProps extends HTMLStyledProps {}\n\nconst TooltipPositioner = withContext<\"div\", TooltipPositionerProps>(\n  \"div\",\n  \"positioner\",\n)()\n\ninterface TooltipTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nconst TooltipTrigger = withContext<\"button\", TooltipTriggerProps>(\n  \"button\",\n  \"trigger\",\n)()\n\ninterface TooltipContentProps extends Omit<\n  HTMLMotionProps,\n  \"children\" | \"offset\" | \"transform\"\n> {}\n\nconst TooltipContent = withContext<\"div\", TooltipContentProps>(\n  motion.div,\n  \"content\",\n)()\n"],"mappings":";;;;;;;;;;;AAgDA,MAAM,EACJ,cAAc,qBACd,cACA,iBAAiB,wBACjB,aACA,0BACEA,yBAAAA,oBAAgD,WAAWC,sBAAAA,YAAY;;;;;;AAS3E,MAAa,WAA6B,UAAU;CAClD,MAAM,CACJ,SACA,EACE,kBAAkB,SAClB,UACA,SACA,WAAW,IACX,cACA,aACA,iBACA,GAAG,UAEH,sBAAsB,KAAK;CAC/B,MAAM,EAAE,MAAM,iBAAiB,oBAAoB,oBACjDC,oBAAAA,WAAW,IAAI;CACjB,MAAM,sBAAsBC,gBAAAA,uBAAuB;EACjD;EACA;CACF,CAAC;CAED,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,cAAD;EAAc,OAAO;EAArB,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAD;GAAgB,SAAA;GAAQ,GAAI,gBAAgB;GACzC;EACa,CAAA,GAEhB,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,iBAAD,EAAA,UACG,OACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;GAAQ,GAAI;GACV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;IAAmB,GAAI,mBAAmB,eAAe;IACvD,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAD;KACE,GAAI;KACJ,IAAA,GAAA,oBAAA,cAAA,KAAA,CACE,iBAAA,GAAA,oBAAA,cAAA,KAAA,CAAgC,YAAY,CAAC,CAC/C;KAEC,UAAA;IACa,CAAA;GACC,CAAA;EACb,CAAA,IACN,KACW,CAAA,CACL;;AAElB;AAIA,MAAM,oBAAoB,YACxB,OACA,YACF,CAAC,CAAC;AAIF,MAAM,iBAAiB,YACrB,UACA,SACF,CAAC,CAAC;AAOF,MAAM,iBAAiB,YACrBC,gBAAAA,OAAO,KACP,SACF,CAAC,CAAC"}

package/dist/cjs/hooks/use-focus/index.cjs

@@ -26,7 +26,8 @@ const useFocusOnShow = (refOrEl, { focusTarget: focusRefOrEl, preventScroll, sho
 	const onFocus = (0, react.useCallback)(() => {
 		const target = getTarget();
 		if (!target || !trulyShouldFocus || focused.current) return;
-		if (target.contains(document.activeElement)) return;
+		const rootNode = target.getRootNode();
+		if ((0, require_utils_index.utils_exports.contains)(target, (0, require_utils_index.utils_exports.getActiveElement)((0, require_utils_index.utils_exports.isShadowRoot)(rootNode) ? rootNode : (0, require_utils_index.utils_exports.getDocument)(target)))) return;
 		const focusTarget = getFocusTarget();
 		if (focusTarget) requestAnimationFrame(() => {
 			focusTarget.focus({ preventScroll });
@@ -63,14 +64,17 @@ const useFocusOnShow = (refOrEl, { focusTarget: focusRefOrEl, preventScroll, sho
 * @see https://yamada-ui.com/docs/hooks/use-focus-on-pointer-down
 */
 const useFocusOnPointerDown = ({ ref, elements, enabled }) => {
-	require_hooks_use_event_listener_index.useEventListener(() => (0, require_utils_index.utils_exports.getDocument)(ref.current), "pointerdown", (ev) => {
+	require_hooks_use_event_listener_index.useEventListener(() => ref.current?.getRootNode() ?? (0, require_utils_index.utils_exports.getDocument)(ref.current), "pointerdown", (ev) => {
 		if (!(0, require_utils_index.utils_exports.isSafari)() || !enabled) return;
 		const target = ev.target;
-		const validTarget = (elements ?? [ref]).some((elOrRef) => {
+		const els = elements ?? [ref];
+		const rootNode = ref.current?.getRootNode();
+		const root = (0, require_utils_index.utils_exports.isShadowRoot)(rootNode) ? rootNode : (0, require_utils_index.utils_exports.getDocument)(ref.current);
+		const validTarget = els.some((elOrRef) => {
 			const el = require_ref.isRefObject(elOrRef) ? elOrRef.current : elOrRef;
 			return el?.contains(target) || el === target;
 		});
-		if ((0, require_utils_index.utils_exports.getActiveElement)((0, require_utils_index.utils_exports.getDocument)(ref.current)) !== target && validTarget) {
+		if ((0, require_utils_index.utils_exports.getActiveElement)(root) !== target && validTarget) {
 			ev.preventDefault();
 			target.focus();
 		}

package/dist/cjs/hooks/use-focus/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["isRefObject"],"sources":["../../../../src/hooks/use-focus/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport { useCallback, useRef } from \"react\"\nimport {\n  getActiveElement,\n  getDocument,\n  getFirstFocusableElement,\n  isRefObject,\n  isSafari,\n  useUpdateEffect,\n} from \"../../utils\"\nimport { useEventListener } from \"../use-event-listener\"\n\nexport interface UseFocusOnShowProps {\n  focusTarget?: HTMLElement | null | RefObject<HTMLElement | null>\n  preventScroll?: boolean\n  shouldFocus?: boolean\n  visible?: boolean\n}\n\n/**\n * `useFocusOnShow` is a custom hook that focuses on the target element when it is shown.\n *\n * @see https://yamada-ui.com/docs/hooks/use-focus-on-show\n */\nexport const useFocusOnShow = <Y extends HTMLElement>(\n  refOrEl: RefObject<null | Y> | Y,\n  {\n    focusTarget: focusRefOrEl,\n    preventScroll,\n    shouldFocus,\n    visible,\n  }: UseFocusOnShowProps = {\n    preventScroll: true,\n    shouldFocus: false,\n  },\n) => {\n  const trulyShouldFocus = shouldFocus && visible\n  const focused = useRef(false)\n\n  const getTarget = useCallback(() => {\n    return isRefObject(refOrEl) ? refOrEl.current : refOrEl\n  }, [refOrEl])\n\n  const getFocusTarget = useCallback(() => {\n    return isRefObject(focusRefOrEl) ? focusRefOrEl.current : focusRefOrEl\n  }, [focusRefOrEl])\n\n  const onFocus = useCallback(() => {\n    const target = getTarget()\n\n    if (!target || !trulyShouldFocus || focused.current) return\n    if (target.contains(document.activeElement)) return\n\n    const focusTarget = getFocusTarget()\n\n    if (focusTarget) {\n      requestAnimationFrame(() => {\n        focusTarget.focus({ preventScroll })\n\n        focused.current = true\n      })\n    } else {\n      const firstFocusable = getFirstFocusableElement(target)\n\n      if (firstFocusable)\n        requestAnimationFrame(() => {\n          firstFocusable.focus({ preventScroll })\n\n          focused.current = true\n        })\n      else\n        requestAnimationFrame(() => {\n          target.focus({ preventScroll })\n\n          focused.current = true\n        })\n    }\n  }, [getTarget, trulyShouldFocus, getFocusTarget, preventScroll])\n\n  useUpdateEffect(() => {\n    focused.current = !trulyShouldFocus\n  }, [trulyShouldFocus])\n\n  useUpdateEffect(() => {\n    requestAnimationFrame(onFocus)\n  }, [onFocus])\n\n  useEventListener(getTarget, \"transitionend\", onFocus)\n}\n\nexport interface UseFocusOnMouseDownProps {\n  ref: RefObject<HTMLElement | null>\n  elements?: (HTMLElement | null | RefObject<HTMLElement | null>)[]\n  enabled?: boolean\n}\n\n/**\n * `useFocusOnPointerDown` is a custom hook that focuses on the target element when it is clicked.\n *\n * @see https://yamada-ui.com/docs/hooks/use-focus-on-pointer-down\n */\nexport const useFocusOnPointerDown = ({\n  ref,\n  elements,\n  enabled,\n}: UseFocusOnMouseDownProps) => {\n  useEventListener(\n    () => getDocument(ref.current),\n    \"pointerdown\",\n    (ev) => {\n      if (!isSafari() || !enabled) return\n      const target = ev.target as HTMLElement\n\n      const els = elements ?? [ref]\n\n      const validTarget = els.some((elOrRef) => {\n        const el = isRefObject(elOrRef) ? elOrRef.current : elOrRef\n\n        return el?.contains(target) || el === target\n      })\n\n      if (\n        getActiveElement(getDocument(ref.current)) !== target &&\n        validTarget\n      ) {\n        ev.preventDefault()\n\n        target.focus()\n      }\n    },\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AA0BA,MAAa,kBACX,SACA,EACE,aAAa,cACb,eACA,aACA,YACuB;CACvB,eAAe;CACf,aAAa;AACf,MACG;CACH,MAAM,mBAAmB,eAAe;CACxC,MAAM,WAAA,GAAA,MAAA,OAAA,CAAiB,KAAK;CAE5B,MAAM,aAAA,GAAA,MAAA,YAAA,OAA8B;EAClC,OAAOA,YAAAA,YAAY,OAAO,IAAI,QAAQ,UAAU;CAClD,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,kBAAA,GAAA,MAAA,YAAA,OAAmC;EACvC,OAAOA,YAAAA,YAAY,YAAY,IAAI,aAAa,UAAU;CAC5D,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,WAAA,GAAA,MAAA,YAAA,OAA4B;EAChC,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,UAAU,CAAC,oBAAoB,QAAQ,SAAS;EACrD,IAAI,OAAO,SAAS,SAAS,aAAa,GAAG;EAE7C,MAAM,cAAc,eAAe;EAEnC,IAAI,aACF,4BAA4B;GAC1B,YAAY,MAAM,EAAE,cAAc,CAAC;GAEnC,QAAQ,UAAU;EACpB,CAAC;OACI;GACL,MAAM,kBAAA,GAAA,oBAAA,cAAA,yBAAA,CAA0C,MAAM;GAEtD,IAAI,gBACF,4BAA4B;IAC1B,eAAe,MAAM,EAAE,cAAc,CAAC;IAEtC,QAAQ,UAAU;GACpB,CAAC;QAED,4BAA4B;IAC1B,OAAO,MAAM,EAAE,cAAc,CAAC;IAE9B,QAAQ,UAAU;GACpB,CAAC;EACL;CACF,GAAG;EAAC;EAAW;EAAkB;EAAgB;CAAa,CAAC;CAE/D,eAAA,sBAAsB;EACpB,QAAQ,UAAU,CAAC;CACrB,GAAG,CAAC,gBAAgB,CAAC;CAErB,eAAA,sBAAsB;EACpB,sBAAsB,OAAO;CAC/B,GAAG,CAAC,OAAO,CAAC;CAEZ,uCAAA,iBAAiB,WAAW,iBAAiB,OAAO;AACtD;;;;;;AAaA,MAAa,yBAAyB,EACpC,KACA,UACA,cAC8B;CAC9B,uCAAA,wBAAA,GAAA,oBAAA,cAAA,YAAA,CACoB,IAAI,OAAO,GAC7B,gBACC,OAAO;EACN,IAAI,EAAA,GAAA,oBAAA,cAAA,SAAA,CAAU,KAAK,CAAC,SAAS;EAC7B,MAAM,SAAS,GAAG;EAIlB,MAAM,eAFM,YAAY,CAAC,GAAG,EAAA,CAEJ,MAAM,YAAY;GACxC,MAAM,KAAKA,YAAAA,YAAY,OAAO,IAAI,QAAQ,UAAU;GAEpD,OAAO,IAAI,SAAS,MAAM,KAAK,OAAO;EACxC,CAAC;EAED,KAAA,GAAA,oBAAA,cAAA,iBAAA,EAAA,GAAA,oBAAA,cAAA,YAAA,CAC+B,IAAI,OAAO,CAAC,MAAM,UAC/C,aACA;GACA,GAAG,eAAe;GAElB,OAAO,MAAM;EACf;CACF,CACF;AACF"}
+{"version":3,"file":"index.cjs","names":["isRefObject"],"sources":["../../../../src/hooks/use-focus/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport { useCallback, useRef } from \"react\"\nimport {\n  contains,\n  getActiveElement,\n  getDocument,\n  getFirstFocusableElement,\n  isRefObject,\n  isSafari,\n  isShadowRoot,\n  useUpdateEffect,\n} from \"../../utils\"\nimport { useEventListener } from \"../use-event-listener\"\n\nexport interface UseFocusOnShowProps {\n  focusTarget?: HTMLElement | null | RefObject<HTMLElement | null>\n  preventScroll?: boolean\n  shouldFocus?: boolean\n  visible?: boolean\n}\n\n/**\n * `useFocusOnShow` is a custom hook that focuses on the target element when it is shown.\n *\n * @see https://yamada-ui.com/docs/hooks/use-focus-on-show\n */\nexport const useFocusOnShow = <Y extends HTMLElement>(\n  refOrEl: RefObject<null | Y> | Y,\n  {\n    focusTarget: focusRefOrEl,\n    preventScroll,\n    shouldFocus,\n    visible,\n  }: UseFocusOnShowProps = {\n    preventScroll: true,\n    shouldFocus: false,\n  },\n) => {\n  const trulyShouldFocus = shouldFocus && visible\n  const focused = useRef(false)\n\n  const getTarget = useCallback(() => {\n    return isRefObject(refOrEl) ? refOrEl.current : refOrEl\n  }, [refOrEl])\n\n  const getFocusTarget = useCallback(() => {\n    return isRefObject(focusRefOrEl) ? focusRefOrEl.current : focusRefOrEl\n  }, [focusRefOrEl])\n\n  const onFocus = useCallback(() => {\n    const target = getTarget()\n\n    if (!target || !trulyShouldFocus || focused.current) return\n    const rootNode = target.getRootNode()\n    const root = isShadowRoot(rootNode) ? rootNode : getDocument(target)\n    if (contains(target, getActiveElement(root))) return\n\n    const focusTarget = getFocusTarget()\n\n    if (focusTarget) {\n      requestAnimationFrame(() => {\n        focusTarget.focus({ preventScroll })\n\n        focused.current = true\n      })\n    } else {\n      const firstFocusable = getFirstFocusableElement(target)\n\n      if (firstFocusable)\n        requestAnimationFrame(() => {\n          firstFocusable.focus({ preventScroll })\n\n          focused.current = true\n        })\n      else\n        requestAnimationFrame(() => {\n          target.focus({ preventScroll })\n\n          focused.current = true\n        })\n    }\n  }, [getTarget, trulyShouldFocus, getFocusTarget, preventScroll])\n\n  useUpdateEffect(() => {\n    focused.current = !trulyShouldFocus\n  }, [trulyShouldFocus])\n\n  useUpdateEffect(() => {\n    requestAnimationFrame(onFocus)\n  }, [onFocus])\n\n  useEventListener(getTarget, \"transitionend\", onFocus)\n}\n\nexport interface UseFocusOnMouseDownProps {\n  ref: RefObject<HTMLElement | null>\n  elements?: (HTMLElement | null | RefObject<HTMLElement | null>)[]\n  enabled?: boolean\n}\n\n/**\n * `useFocusOnPointerDown` is a custom hook that focuses on the target element when it is clicked.\n *\n * @see https://yamada-ui.com/docs/hooks/use-focus-on-pointer-down\n */\nexport const useFocusOnPointerDown = ({\n  ref,\n  elements,\n  enabled,\n}: UseFocusOnMouseDownProps) => {\n  useEventListener(\n    () => ref.current?.getRootNode() ?? getDocument(ref.current),\n    \"pointerdown\",\n    (ev) => {\n      if (!isSafari() || !enabled) return\n\n      const target = ev.target as HTMLElement\n      const els = elements ?? [ref]\n      const rootNode = ref.current?.getRootNode()\n      const root = isShadowRoot(rootNode) ? rootNode : getDocument(ref.current)\n      const validTarget = els.some((elOrRef) => {\n        const el = isRefObject(elOrRef) ? elOrRef.current : elOrRef\n\n        return el?.contains(target) || el === target\n      })\n\n      if (getActiveElement(root) !== target && validTarget) {\n        ev.preventDefault()\n\n        target.focus()\n      }\n    },\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AA4BA,MAAa,kBACX,SACA,EACE,aAAa,cACb,eACA,aACA,YACuB;CACvB,eAAe;CACf,aAAa;AACf,MACG;CACH,MAAM,mBAAmB,eAAe;CACxC,MAAM,WAAA,GAAA,MAAA,OAAA,CAAiB,KAAK;CAE5B,MAAM,aAAA,GAAA,MAAA,YAAA,OAA8B;EAClC,OAAOA,YAAAA,YAAY,OAAO,IAAI,QAAQ,UAAU;CAClD,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,kBAAA,GAAA,MAAA,YAAA,OAAmC;EACvC,OAAOA,YAAAA,YAAY,YAAY,IAAI,aAAa,UAAU;CAC5D,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,WAAA,GAAA,MAAA,YAAA,OAA4B;EAChC,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,UAAU,CAAC,oBAAoB,QAAQ,SAAS;EACrD,MAAM,WAAW,OAAO,YAAY;EAEpC,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,SAAA,GAAA,oBAAA,cAAA,iBAAA,EAAA,GAAA,oBAAA,cAAA,aAAA,CADa,QAAQ,IAAI,YAAA,GAAA,oBAAA,cAAA,YAAA,CAAuB,MAAM,CACzB,CAAC,GAAG;EAE9C,MAAM,cAAc,eAAe;EAEnC,IAAI,aACF,4BAA4B;GAC1B,YAAY,MAAM,EAAE,cAAc,CAAC;GAEnC,QAAQ,UAAU;EACpB,CAAC;OACI;GACL,MAAM,kBAAA,GAAA,oBAAA,cAAA,yBAAA,CAA0C,MAAM;GAEtD,IAAI,gBACF,4BAA4B;IAC1B,eAAe,MAAM,EAAE,cAAc,CAAC;IAEtC,QAAQ,UAAU;GACpB,CAAC;QAED,4BAA4B;IAC1B,OAAO,MAAM,EAAE,cAAc,CAAC;IAE9B,QAAQ,UAAU;GACpB,CAAC;EACL;CACF,GAAG;EAAC;EAAW;EAAkB;EAAgB;CAAa,CAAC;CAE/D,eAAA,sBAAsB;EACpB,QAAQ,UAAU,CAAC;CACrB,GAAG,CAAC,gBAAgB,CAAC;CAErB,eAAA,sBAAsB;EACpB,sBAAsB,OAAO;CAC/B,GAAG,CAAC,OAAO,CAAC;CAEZ,uCAAA,iBAAiB,WAAW,iBAAiB,OAAO;AACtD;;;;;;AAaA,MAAa,yBAAyB,EACpC,KACA,UACA,cAC8B;CAC9B,uCAAA,uBACQ,IAAI,SAAS,YAAY,MAAA,GAAA,oBAAA,cAAA,YAAA,CAAiB,IAAI,OAAO,GAC3D,gBACC,OAAO;EACN,IAAI,EAAA,GAAA,oBAAA,cAAA,SAAA,CAAU,KAAK,CAAC,SAAS;EAE7B,MAAM,SAAS,GAAG;EAClB,MAAM,MAAM,YAAY,CAAC,GAAG;EAC5B,MAAM,WAAW,IAAI,SAAS,YAAY;EAC1C,MAAM,QAAA,GAAA,oBAAA,cAAA,aAAA,CAAoB,QAAQ,IAAI,YAAA,GAAA,oBAAA,cAAA,YAAA,CAAuB,IAAI,OAAO;EACxE,MAAM,cAAc,IAAI,MAAM,YAAY;GACxC,MAAM,KAAKA,YAAAA,YAAY,OAAO,IAAI,QAAQ,UAAU;GAEpD,OAAO,IAAI,SAAS,MAAM,KAAK,OAAO;EACxC,CAAC;EAED,KAAA,GAAA,oBAAA,cAAA,iBAAA,CAAqB,IAAI,MAAM,UAAU,aAAa;GACpD,GAAG,eAAe;GAElB,OAAO,MAAM;EACf;CACF,CACF;AACF"}

package/dist/cjs/utils/dom.cjs

@@ -1,6 +1,7 @@
 const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);
+let _yamada_ui_utils = require("@yamada-ui/utils");
 //#region src/utils/dom.ts
 function runKeyAction(ev, actions, { preventDefault = true } = {}) {
 	if (ev.key === " ") ev.key = ev.code;
@@ -32,7 +33,9 @@ function useAttributeObserver(ref, attributeFilter, enabled, func) {
 	});
 }
 function getEventRelatedTarget(ev) {
-	return ev.relatedTarget ?? ev.currentTarget.ownerDocument.activeElement;
+	if (ev.relatedTarget) return ev.relatedTarget;
+	const root = ev.currentTarget.getRootNode?.call(ev.currentTarget);
+	return (root && (0, _yamada_ui_utils.getActiveElement)(root)) ?? ev.currentTarget.ownerDocument.activeElement;
 }
 const visuallyHiddenAttributes = {
 	style: {

package/dist/cjs/utils/dom.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"dom.cjs","names":["React"],"sources":["../../../src/utils/dom.ts"],"sourcesContent":["import type { AnyString } from \"@yamada-ui/utils\"\nimport * as React from \"react\"\n\ntype KeyboardNavigationKey =\n  | \"ArrowDown\"\n  | \"ArrowLeft\"\n  | \"ArrowRight\"\n  | \"ArrowUp\"\n  | \"End\"\n  | \"Home\"\n  | \"PageDown\"\n  | \"PageUp\"\n\ntype KeyboardControlKey =\n  | \"Alt\"\n  | \"Backspace\"\n  | \"CapsLock\"\n  | \"Control\"\n  | \"Delete\"\n  | \"Enter\"\n  | \"Escape\"\n  | \"Insert\"\n  | \"Meta\"\n  | \"NumLock\"\n  | \"Pause\"\n  | \"PrintScreen\"\n  | \"ScrollLock\"\n  | \"Shift\"\n  | \"Space\"\n  | \"Tab\"\n\ntype KeyboardFunctionKey = \"Fn\" | \"FnLock\" | `F${number}`\n\ntype KeyboardKey =\n  | AnyString\n  | KeyboardControlKey\n  | KeyboardFunctionKey\n  | KeyboardNavigationKey\n\nexport function runKeyAction<Y>(\n  ev: React.KeyboardEvent<Y>,\n  actions: { [key in KeyboardKey]?: React.KeyboardEventHandler<Y> },\n  { preventDefault = true }: { preventDefault?: boolean } = {},\n) {\n  if (ev.key === \" \") ev.key = ev.code\n  const action = actions[ev.key]\n\n  if (!action) return\n\n  if (preventDefault) ev.preventDefault()\n\n  action(ev)\n}\n\nexport function isComposing(\n  ev: React.ChangeEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n): boolean {\n  if (\"keyCode\" in ev) return ev.nativeEvent.isComposing || ev.keyCode === 229\n  else if (ev.nativeEvent instanceof InputEvent)\n    return ev.nativeEvent.isComposing\n  else return false\n}\n\nexport function useAttributeObserver(\n  ref: React.RefObject<HTMLElement | null>,\n  attributeFilter: string[],\n  enabled: boolean,\n  func: () => void,\n) {\n  React.useEffect(() => {\n    if (!ref.current || !enabled) return\n\n    const ownerDocument = ref.current.ownerDocument.defaultView ?? window\n\n    const observer = new ownerDocument.MutationObserver((changes) => {\n      for (const { type, attributeName } of changes) {\n        if (type !== \"attributes\") continue\n        if (!attributeName) continue\n\n        if (attributeFilter.includes(attributeName)) func()\n      }\n    })\n\n    observer.observe(ref.current, { attributeFilter, attributes: true })\n\n    return () => observer.disconnect()\n  })\n}\n\nexport function getEventRelatedTarget(ev: React.FocusEvent | React.MouseEvent) {\n  return (ev.relatedTarget ??\n    ev.currentTarget.ownerDocument.activeElement) as HTMLElement | null\n}\n\nconst visuallyHiddenStyle = {\n  border: \"0px\",\n  clipPath: \"rect(0px 0px 0px 0px)\",\n  height: \"1px\",\n  margin: \"-1px\",\n  overflow: \"hidden\",\n  padding: \"0px\",\n  position: \"absolute\",\n  whiteSpace: \"nowrap\",\n  width: \"1px\",\n} satisfies React.CSSProperties\n\nexport const visuallyHiddenAttributes = {\n  style: visuallyHiddenStyle,\n  \"aria-hidden\": true,\n  tabIndex: -1,\n} satisfies React.HTMLAttributes<HTMLElement>\n\nexport function* useIds() {\n  const id = React.useId()\n\n  for (let i = 0; ; i++) yield `${id}-${i}`\n}\n"],"mappings":";;;;AAuCA,SAAgB,aACd,IACA,SACA,EAAE,iBAAiB,SAAuC,CAAC,GAC3D;CACA,IAAI,GAAG,QAAQ,KAAK,GAAG,MAAM,GAAG;CAChC,MAAM,SAAS,QAAQ,GAAG;CAE1B,IAAI,CAAC,QAAQ;CAEb,IAAI,gBAAgB,GAAG,eAAe;CAEtC,OAAO,EAAE;AACX;AAEA,SAAgB,YACd,IACS;CACT,IAAI,aAAa,IAAI,OAAO,GAAG,YAAY,eAAe,GAAG,YAAY;MACpE,IAAI,GAAG,uBAAuB,YACjC,OAAO,GAAG,YAAY;MACnB,OAAO;AACd;AAEA,SAAgB,qBACd,KACA,iBACA,SACA,MACA;CACA,MAAM,gBAAgB;EACpB,IAAI,CAAC,IAAI,WAAW,CAAC,SAAS;EAI9B,MAAM,WAAW,KAFK,IAAI,QAAQ,cAAc,eAAe,OAAA,CAE5B,kBAAkB,YAAY;GAC/D,KAAK,MAAM,EAAE,MAAM,mBAAmB,SAAS;IAC7C,IAAI,SAAS,cAAc;IAC3B,IAAI,CAAC,eAAe;IAEpB,IAAI,gBAAgB,SAAS,aAAa,GAAG,KAAK;GACpD;EACF,CAAC;EAED,SAAS,QAAQ,IAAI,SAAS;GAAE;GAAiB,YAAY;EAAK,CAAC;EAEnE,aAAa,SAAS,WAAW;CACnC,CAAC;AACH;AAEA,SAAgB,sBAAsB,IAAyC;CAC7E,OAAQ,GAAG,iBACT,GAAG,cAAc,cAAc;AACnC;AAcA,MAAa,2BAA2B;CACtC,OAAO;EAZP,QAAQ;EACR,UAAU;EACV,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,SAAS;EACT,UAAU;EACV,YAAY;EACZ,OAAO;CAIA;CACP,eAAe;CACf,UAAU;AACZ;AAEA,UAAiB,SAAS;CACxB,MAAM,KAAKA,MAAM,MAAM;CAEvB,KAAK,IAAI,IAAI,IAAK,KAAK,MAAM,GAAG,GAAG,GAAG;AACxC"}
+{"version":3,"file":"dom.cjs","names":["React"],"sources":["../../../src/utils/dom.ts"],"sourcesContent":["import { type AnyString, getActiveElement } from \"@yamada-ui/utils\"\nimport * as React from \"react\"\n\ntype KeyboardNavigationKey =\n  | \"ArrowDown\"\n  | \"ArrowLeft\"\n  | \"ArrowRight\"\n  | \"ArrowUp\"\n  | \"End\"\n  | \"Home\"\n  | \"PageDown\"\n  | \"PageUp\"\n\ntype KeyboardControlKey =\n  | \"Alt\"\n  | \"Backspace\"\n  | \"CapsLock\"\n  | \"Control\"\n  | \"Delete\"\n  | \"Enter\"\n  | \"Escape\"\n  | \"Insert\"\n  | \"Meta\"\n  | \"NumLock\"\n  | \"Pause\"\n  | \"PrintScreen\"\n  | \"ScrollLock\"\n  | \"Shift\"\n  | \"Space\"\n  | \"Tab\"\n\ntype KeyboardFunctionKey = \"Fn\" | \"FnLock\" | `F${number}`\n\ntype KeyboardKey =\n  | AnyString\n  | KeyboardControlKey\n  | KeyboardFunctionKey\n  | KeyboardNavigationKey\n\nexport function runKeyAction<Y>(\n  ev: React.KeyboardEvent<Y>,\n  actions: { [key in KeyboardKey]?: React.KeyboardEventHandler<Y> },\n  { preventDefault = true }: { preventDefault?: boolean } = {},\n) {\n  if (ev.key === \" \") ev.key = ev.code\n  const action = actions[ev.key]\n\n  if (!action) return\n\n  if (preventDefault) ev.preventDefault()\n\n  action(ev)\n}\n\nexport function isComposing(\n  ev: React.ChangeEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n): boolean {\n  if (\"keyCode\" in ev) return ev.nativeEvent.isComposing || ev.keyCode === 229\n  else if (ev.nativeEvent instanceof InputEvent)\n    return ev.nativeEvent.isComposing\n  else return false\n}\n\nexport function useAttributeObserver(\n  ref: React.RefObject<HTMLElement | null>,\n  attributeFilter: string[],\n  enabled: boolean,\n  func: () => void,\n) {\n  React.useEffect(() => {\n    if (!ref.current || !enabled) return\n\n    const ownerDocument = ref.current.ownerDocument.defaultView ?? window\n\n    const observer = new ownerDocument.MutationObserver((changes) => {\n      for (const { type, attributeName } of changes) {\n        if (type !== \"attributes\") continue\n        if (!attributeName) continue\n\n        if (attributeFilter.includes(attributeName)) func()\n      }\n    })\n\n    observer.observe(ref.current, { attributeFilter, attributes: true })\n\n    return () => observer.disconnect()\n  })\n}\n\nexport function getEventRelatedTarget(ev: React.FocusEvent | React.MouseEvent) {\n  if (ev.relatedTarget) return ev.relatedTarget as HTMLElement\n\n  const getRootNode = (\n    ev.currentTarget as unknown as {\n      getRootNode?: () => Document | ShadowRoot\n    }\n  ).getRootNode\n  const root = getRootNode?.call(ev.currentTarget)\n\n  return ((root && getActiveElement(root)) ??\n    ev.currentTarget.ownerDocument.activeElement) as HTMLElement | null\n}\n\nconst visuallyHiddenStyle = {\n  border: \"0px\",\n  clipPath: \"rect(0px 0px 0px 0px)\",\n  height: \"1px\",\n  margin: \"-1px\",\n  overflow: \"hidden\",\n  padding: \"0px\",\n  position: \"absolute\",\n  whiteSpace: \"nowrap\",\n  width: \"1px\",\n} satisfies React.CSSProperties\n\nexport const visuallyHiddenAttributes = {\n  style: visuallyHiddenStyle,\n  \"aria-hidden\": true,\n  tabIndex: -1,\n} satisfies React.HTMLAttributes<HTMLElement>\n\nexport function* useIds() {\n  const id = React.useId()\n\n  for (let i = 0; ; i++) yield `${id}-${i}`\n}\n"],"mappings":";;;;;AAuCA,SAAgB,aACd,IACA,SACA,EAAE,iBAAiB,SAAuC,CAAC,GAC3D;CACA,IAAI,GAAG,QAAQ,KAAK,GAAG,MAAM,GAAG;CAChC,MAAM,SAAS,QAAQ,GAAG;CAE1B,IAAI,CAAC,QAAQ;CAEb,IAAI,gBAAgB,GAAG,eAAe;CAEtC,OAAO,EAAE;AACX;AAEA,SAAgB,YACd,IACS;CACT,IAAI,aAAa,IAAI,OAAO,GAAG,YAAY,eAAe,GAAG,YAAY;MACpE,IAAI,GAAG,uBAAuB,YACjC,OAAO,GAAG,YAAY;MACnB,OAAO;AACd;AAEA,SAAgB,qBACd,KACA,iBACA,SACA,MACA;CACA,MAAM,gBAAgB;EACpB,IAAI,CAAC,IAAI,WAAW,CAAC,SAAS;EAI9B,MAAM,WAAW,KAFK,IAAI,QAAQ,cAAc,eAAe,OAAA,CAE5B,kBAAkB,YAAY;GAC/D,KAAK,MAAM,EAAE,MAAM,mBAAmB,SAAS;IAC7C,IAAI,SAAS,cAAc;IAC3B,IAAI,CAAC,eAAe;IAEpB,IAAI,gBAAgB,SAAS,aAAa,GAAG,KAAK;GACpD;EACF,CAAC;EAED,SAAS,QAAQ,IAAI,SAAS;GAAE;GAAiB,YAAY;EAAK,CAAC;EAEnE,aAAa,SAAS,WAAW;CACnC,CAAC;AACH;AAEA,SAAgB,sBAAsB,IAAyC;CAC7E,IAAI,GAAG,eAAe,OAAO,GAAG;CAOhC,MAAM,OAJJ,GAAG,cAGH,aACwB,KAAK,GAAG,aAAa;CAE/C,QAAS,SAAA,GAAA,iBAAA,iBAAA,CAAyB,IAAI,MACpC,GAAG,cAAc,cAAc;AACnC;AAcA,MAAa,2BAA2B;CACtC,OAAO;EAZP,QAAQ;EACR,UAAU;EACV,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,SAAS;EACT,UAAU;EACV,YAAY;EACZ,OAAO;CAIA;CACP,eAAe;CACf,UAAU;AACZ;AAEA,UAAiB,SAAS;CACxB,MAAM,KAAKA,MAAM,MAAM;CAEvB,KAAK,IAAI,IAAI,IAAK,KAAK,MAAM,GAAG,GAAG,GAAG;AACxC"}

package/dist/esm/components/editable/use-editable.js

@@ -65,8 +65,8 @@ const useEditable = (props = {}) => {
 	}, [onCancel]);
 	const onBlur = useCallback((ev) => {
 		if (!editing) return;
-		const ownerDocument = ev.currentTarget.ownerDocument;
-		const relatedTarget = ev.relatedTarget ?? ownerDocument.activeElement;
+		const rootNode = ev.currentTarget.getRootNode();
+		const relatedTarget = (0, utils_exports.isShadowRoot)(rootNode) ? rootNode.activeElement ?? ev.relatedTarget : ev.relatedTarget ?? rootNode.activeElement;
 		const targetIsCancel = (0, utils_exports.contains)(cancelRef.current, relatedTarget);
 		const targetIsSubmit = (0, utils_exports.contains)(submitRef.current, relatedTarget);
 		if (!(!targetIsCancel && !targetIsSubmit)) return;
@@ -102,9 +102,8 @@ const useEditable = (props = {}) => {
 		selectAllOnFocus
 	]);
 	useEffect(() => {
-		if (editing) return;
-		const el = inputRef.current;
-		if (el?.ownerDocument.activeElement === el) el?.blur();
+		if (editing || !inputRef.current) return;
+		if ((0, utils_exports.isActiveElement)(inputRef.current, inputRef.current.getRootNode())) inputRef.current.blur();
 	}, [editing]);
 	const getRootProps = useCallback((props) => ({
 		...rest,

package/dist/esm/components/editable/use-editable.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-editable.js","names":["createContext"],"sources":["../../../../src/components/editable/use-editable.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\"\nimport type { PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useFocusOnPointerDown } from \"../../hooks/use-focus\"\nimport {\n  contains,\n  createContext,\n  handlerAll,\n  mergeRefs,\n  useCallbackRef,\n  useSafeLayoutEffect,\n  useUpdateEffect,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface EditableContext extends Omit<\n  UseEditableReturn,\n  \"getRootProps\" | \"onCancel\" | \"onEdit\" | \"onSubmit\" | \"value\"\n> {}\n\nconst [EditableContext, useEditableContext] = createContext<EditableContext>({\n  name: \"EditableContext\",\n})\n\nexport { EditableContext, useEditableContext }\n\nexport interface UseEditableProps extends FieldProps {\n  /**\n   * The initial value of the Editable in both edit & preview mode.\n   */\n  defaultValue?: string\n  /**\n   * The placeholder text when the value is empty.\n   */\n  placeholder?: string\n  /**\n   * If `true`, the read only view, has a `tabIndex` set to `0`\n   * so it can receive focus via the keyboard or click.\n   *\n   * @default true\n   */\n  previewFocusable?: boolean\n  /**\n   * If `true`, the input's text will be highlighted on focus.\n   *\n   * @default true\n   */\n  selectAllOnFocus?: boolean\n  /**\n   * If `true`, the Editable will start with edit mode by default.\n   */\n  startWithEditView?: boolean\n  /**\n   * If `true`, it'll update the value onBlur and turn off the edit mode.\n   *\n   * @default true\n   */\n  submitOnBlur?: boolean\n  /**\n   * The value of the Editable in both edit & preview mode.\n   */\n  value?: string\n  /**\n   * Callback invoked when user cancels input with the `Esc` key.\n   * It provides the last confirmed value as argument.\n   */\n  onCancel?: (preValue: string) => void\n  /**\n   * A callback invoked when user changes input.\n   */\n  onChange?: (value: string) => void\n  /**\n   * A callback invoked once the user enters edit mode.\n   */\n  onEdit?: () => void\n  /**\n   * A callback invoked when user confirms value with `enter` key or by blurring input.\n   */\n  onSubmit?: (value: string) => void\n}\n\nexport const useEditable = (props: UseEditableProps = {}) => {\n  const {\n    props: {\n      id,\n      defaultValue,\n      disabled,\n      placeholder,\n      previewFocusable = true,\n      readOnly,\n      required,\n      selectAllOnFocus = true,\n      startWithEditView,\n      submitOnBlur = true,\n      value: valueProp,\n      onCancel: onCancelProp,\n      onChange: onChangeProp,\n      onEdit: onEditProp,\n      onSubmit: onSubmitProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const onEditRef = useCallbackRef(onEditProp)\n  const [editing, setEditing] = useState<boolean>(\n    !!startWithEditView && !disabled,\n  )\n  const [value, setValue] = useControllableState({\n    defaultValue: defaultValue || \"\",\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const interactive = !editing && !disabled\n  const emptyValue = value.length === 0\n  const [prevValue, setPrevValue] = useState(value)\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)\n  const previewRef = useRef<HTMLElement>(null)\n  const editRef = useRef<HTMLButtonElement>(null)\n  const cancelRef = useRef<HTMLButtonElement>(null)\n  const submitRef = useRef<HTMLButtonElement>(null)\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>\n      setValue(ev.currentTarget.value),\n    [setValue],\n  )\n\n  const onUpdatePrevValue = useCallback(() => setPrevValue(value), [value])\n\n  const onEdit = useCallback(() => {\n    if (interactive) setEditing(true)\n  }, [interactive])\n\n  const onCancel = useCallback(() => {\n    setEditing(false)\n    setValue(prevValue)\n    onCancelProp?.(prevValue)\n  }, [prevValue, onCancelProp, setValue])\n\n  const onSubmit = useCallback(() => {\n    setEditing(false)\n    setPrevValue(value)\n    onSubmitProp?.(value)\n  }, [onSubmitProp, value])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent) => {\n      if (ev.key !== \"Escape\" && ev.key !== \"Enter\") return\n\n      if (ev.key === \"Escape\") {\n        ev.preventDefault()\n        onCancel()\n      } else {\n        const { metaKey, shiftKey } = ev\n\n        if (!shiftKey && !metaKey) {\n          ev.preventDefault()\n          onSubmit()\n        }\n      }\n    },\n    [onCancel, onSubmit],\n  )\n\n  const onKeyDownWithoutSubmit = useCallback(\n    (ev: KeyboardEvent) => {\n      if (ev.key !== \"Escape\") return\n\n      ev.preventDefault()\n      onCancel()\n    },\n    [onCancel],\n  )\n\n  const onBlur = useCallback(\n    (ev: FocusEvent) => {\n      if (!editing) return\n\n      const ownerDocument = ev.currentTarget.ownerDocument\n      const relatedTarget = (ev.relatedTarget ??\n        ownerDocument.activeElement) as HTMLElement\n      const targetIsCancel = contains(cancelRef.current, relatedTarget)\n      const targetIsSubmit = contains(submitRef.current, relatedTarget)\n      const validBlur = !targetIsCancel && !targetIsSubmit\n\n      if (!validBlur) return\n\n      if (submitOnBlur) onSubmit()\n      else onCancel()\n    },\n    [editing, submitOnBlur, onSubmit, onCancel],\n  )\n\n  useFocusOnPointerDown({\n    ref: inputRef,\n    elements: [cancelRef, submitRef],\n    enabled: editing,\n  })\n\n  useSafeLayoutEffect(() => {\n    if (!editing) return\n\n    inputRef.current?.focus()\n\n    if (selectAllOnFocus) inputRef.current?.select()\n  }, [])\n\n  useUpdateEffect(() => {\n    if (!editing) {\n      editRef.current?.focus()\n\n      return\n    }\n\n    inputRef.current?.focus()\n\n    if (selectAllOnFocus) inputRef.current?.select()\n\n    onEditRef()\n  }, [editing, onEditRef, selectAllOnFocus])\n\n  useEffect(() => {\n    if (editing) return\n\n    const el = inputRef.current\n    const activeEl = el?.ownerDocument.activeElement\n\n    if (activeEl === el) el?.blur()\n  }, [editing])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      ...rest,\n      ...dataProps,\n      ...props,\n    }),\n    [rest, dataProps],\n  )\n\n  const getPreviewProps: PropGetter<\"span\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(previewRef, ref),\n      children: emptyValue ? placeholder : value,\n      hidden: editing,\n      tabIndex: interactive && previewFocusable ? 0 : undefined,\n      onFocus: handlerAll(props.onFocus, onEdit, onUpdatePrevValue),\n    }),\n    [\n      dataProps,\n      editing,\n      interactive,\n      previewFocusable,\n      emptyValue,\n      onEdit,\n      onUpdatePrevValue,\n      placeholder,\n      value,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...ariaProps,\n      ...props,\n      id,\n      ref: mergeRefs(inputRef, ref),\n      disabled,\n      hidden: !editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      dataProps,\n      ariaProps,\n      id,\n      disabled,\n      editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      eventProps.onBlur,\n      eventProps.onFocus,\n      onBlur,\n      onChange,\n      onUpdatePrevValue,\n      onKeyDown,\n    ],\n  )\n\n  const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...ariaProps,\n      ...props,\n      id,\n      ref: mergeRefs(inputRef, ref),\n      disabled,\n      hidden: !editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n    }),\n    [\n      dataProps,\n      ariaProps,\n      id,\n      disabled,\n      editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      eventProps.onBlur,\n      eventProps.onFocus,\n      onBlur,\n      onChange,\n      onUpdatePrevValue,\n      onKeyDownWithoutSubmit,\n    ],\n  )\n\n  const getControlProps: PropGetter = useCallback(\n    (props) => ({\n      ...dataProps,\n      role: \"group\",\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  const getEditProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(editRef, ref),\n      disabled,\n      hidden: editing,\n      onClick: handlerAll(props.onClick, onEdit),\n    }),\n    [dataProps, disabled, editing, onEdit],\n  )\n\n  const getSubmitProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(submitRef, ref),\n      disabled,\n      hidden: !editing,\n      onClick: handlerAll(props.onClick, onSubmit),\n    }),\n    [dataProps, disabled, editing, onSubmit],\n  )\n\n  const getCancelProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(cancelRef, ref),\n      disabled,\n      hidden: !editing,\n      onClick: handlerAll(props.onClick, onCancel),\n    }),\n    [dataProps, disabled, editing, onCancel],\n  )\n\n  return {\n    editing,\n    value,\n    getCancelProps,\n    getControlProps,\n    getEditProps,\n    getInputProps,\n    getPreviewProps,\n    getRootProps,\n    getSubmitProps,\n    getTextareaProps,\n    onCancel,\n    onEdit,\n    onSubmit,\n  }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n"],"mappings":"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"}
+{"version":3,"file":"use-editable.js","names":["createContext"],"sources":["../../../../src/components/editable/use-editable.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\"\nimport type { PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useFocusOnPointerDown } from \"../../hooks/use-focus\"\nimport {\n  contains,\n  createContext,\n  handlerAll,\n  isActiveElement,\n  isShadowRoot,\n  mergeRefs,\n  useCallbackRef,\n  useSafeLayoutEffect,\n  useUpdateEffect,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface EditableContext extends Omit<\n  UseEditableReturn,\n  \"getRootProps\" | \"onCancel\" | \"onEdit\" | \"onSubmit\" | \"value\"\n> {}\n\nconst [EditableContext, useEditableContext] = createContext<EditableContext>({\n  name: \"EditableContext\",\n})\n\nexport { EditableContext, useEditableContext }\n\nexport interface UseEditableProps extends FieldProps {\n  /**\n   * The initial value of the Editable in both edit & preview mode.\n   */\n  defaultValue?: string\n  /**\n   * The placeholder text when the value is empty.\n   */\n  placeholder?: string\n  /**\n   * If `true`, the read only view, has a `tabIndex` set to `0`\n   * so it can receive focus via the keyboard or click.\n   *\n   * @default true\n   */\n  previewFocusable?: boolean\n  /**\n   * If `true`, the input's text will be highlighted on focus.\n   *\n   * @default true\n   */\n  selectAllOnFocus?: boolean\n  /**\n   * If `true`, the Editable will start with edit mode by default.\n   */\n  startWithEditView?: boolean\n  /**\n   * If `true`, it'll update the value onBlur and turn off the edit mode.\n   *\n   * @default true\n   */\n  submitOnBlur?: boolean\n  /**\n   * The value of the Editable in both edit & preview mode.\n   */\n  value?: string\n  /**\n   * Callback invoked when user cancels input with the `Esc` key.\n   * It provides the last confirmed value as argument.\n   */\n  onCancel?: (preValue: string) => void\n  /**\n   * A callback invoked when user changes input.\n   */\n  onChange?: (value: string) => void\n  /**\n   * A callback invoked once the user enters edit mode.\n   */\n  onEdit?: () => void\n  /**\n   * A callback invoked when user confirms value with `enter` key or by blurring input.\n   */\n  onSubmit?: (value: string) => void\n}\n\nexport const useEditable = (props: UseEditableProps = {}) => {\n  const {\n    props: {\n      id,\n      defaultValue,\n      disabled,\n      placeholder,\n      previewFocusable = true,\n      readOnly,\n      required,\n      selectAllOnFocus = true,\n      startWithEditView,\n      submitOnBlur = true,\n      value: valueProp,\n      onCancel: onCancelProp,\n      onChange: onChangeProp,\n      onEdit: onEditProp,\n      onSubmit: onSubmitProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const onEditRef = useCallbackRef(onEditProp)\n  const [editing, setEditing] = useState<boolean>(\n    !!startWithEditView && !disabled,\n  )\n  const [value, setValue] = useControllableState({\n    defaultValue: defaultValue || \"\",\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const interactive = !editing && !disabled\n  const emptyValue = value.length === 0\n  const [prevValue, setPrevValue] = useState(value)\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)\n  const previewRef = useRef<HTMLElement>(null)\n  const editRef = useRef<HTMLButtonElement>(null)\n  const cancelRef = useRef<HTMLButtonElement>(null)\n  const submitRef = useRef<HTMLButtonElement>(null)\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>\n      setValue(ev.currentTarget.value),\n    [setValue],\n  )\n\n  const onUpdatePrevValue = useCallback(() => setPrevValue(value), [value])\n\n  const onEdit = useCallback(() => {\n    if (interactive) setEditing(true)\n  }, [interactive])\n\n  const onCancel = useCallback(() => {\n    setEditing(false)\n    setValue(prevValue)\n    onCancelProp?.(prevValue)\n  }, [prevValue, onCancelProp, setValue])\n\n  const onSubmit = useCallback(() => {\n    setEditing(false)\n    setPrevValue(value)\n    onSubmitProp?.(value)\n  }, [onSubmitProp, value])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent) => {\n      if (ev.key !== \"Escape\" && ev.key !== \"Enter\") return\n\n      if (ev.key === \"Escape\") {\n        ev.preventDefault()\n        onCancel()\n      } else {\n        const { metaKey, shiftKey } = ev\n\n        if (!shiftKey && !metaKey) {\n          ev.preventDefault()\n          onSubmit()\n        }\n      }\n    },\n    [onCancel, onSubmit],\n  )\n\n  const onKeyDownWithoutSubmit = useCallback(\n    (ev: KeyboardEvent) => {\n      if (ev.key !== \"Escape\") return\n\n      ev.preventDefault()\n      onCancel()\n    },\n    [onCancel],\n  )\n\n  const onBlur = useCallback(\n    (ev: FocusEvent) => {\n      if (!editing) return\n\n      const rootNode = ev.currentTarget.getRootNode() as Document | ShadowRoot\n      const relatedTarget = (\n        isShadowRoot(rootNode)\n          ? (rootNode.activeElement ?? ev.relatedTarget)\n          : (ev.relatedTarget ?? rootNode.activeElement)\n      ) as HTMLElement\n      const targetIsCancel = contains(cancelRef.current, relatedTarget)\n      const targetIsSubmit = contains(submitRef.current, relatedTarget)\n      const validBlur = !targetIsCancel && !targetIsSubmit\n\n      if (!validBlur) return\n\n      if (submitOnBlur) onSubmit()\n      else onCancel()\n    },\n    [editing, submitOnBlur, onSubmit, onCancel],\n  )\n\n  useFocusOnPointerDown({\n    ref: inputRef,\n    elements: [cancelRef, submitRef],\n    enabled: editing,\n  })\n\n  useSafeLayoutEffect(() => {\n    if (!editing) return\n\n    inputRef.current?.focus()\n\n    if (selectAllOnFocus) inputRef.current?.select()\n  }, [])\n\n  useUpdateEffect(() => {\n    if (!editing) {\n      editRef.current?.focus()\n\n      return\n    }\n\n    inputRef.current?.focus()\n\n    if (selectAllOnFocus) inputRef.current?.select()\n\n    onEditRef()\n  }, [editing, onEditRef, selectAllOnFocus])\n\n  useEffect(() => {\n    if (editing || !inputRef.current) return\n    if (isActiveElement(inputRef.current, inputRef.current.getRootNode()))\n      inputRef.current.blur()\n  }, [editing])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      ...rest,\n      ...dataProps,\n      ...props,\n    }),\n    [rest, dataProps],\n  )\n\n  const getPreviewProps: PropGetter<\"span\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(previewRef, ref),\n      children: emptyValue ? placeholder : value,\n      hidden: editing,\n      tabIndex: interactive && previewFocusable ? 0 : undefined,\n      onFocus: handlerAll(props.onFocus, onEdit, onUpdatePrevValue),\n    }),\n    [\n      dataProps,\n      editing,\n      interactive,\n      previewFocusable,\n      emptyValue,\n      onEdit,\n      onUpdatePrevValue,\n      placeholder,\n      value,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...ariaProps,\n      ...props,\n      id,\n      ref: mergeRefs(inputRef, ref),\n      disabled,\n      hidden: !editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      dataProps,\n      ariaProps,\n      id,\n      disabled,\n      editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      eventProps.onBlur,\n      eventProps.onFocus,\n      onBlur,\n      onChange,\n      onUpdatePrevValue,\n      onKeyDown,\n    ],\n  )\n\n  const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...ariaProps,\n      ...props,\n      id,\n      ref: mergeRefs(inputRef, ref),\n      disabled,\n      hidden: !editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n    }),\n    [\n      dataProps,\n      ariaProps,\n      id,\n      disabled,\n      editing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      eventProps.onBlur,\n      eventProps.onFocus,\n      onBlur,\n      onChange,\n      onUpdatePrevValue,\n      onKeyDownWithoutSubmit,\n    ],\n  )\n\n  const getControlProps: PropGetter = useCallback(\n    (props) => ({\n      ...dataProps,\n      role: \"group\",\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  const getEditProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(editRef, ref),\n      disabled,\n      hidden: editing,\n      onClick: handlerAll(props.onClick, onEdit),\n    }),\n    [dataProps, disabled, editing, onEdit],\n  )\n\n  const getSubmitProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(submitRef, ref),\n      disabled,\n      hidden: !editing,\n      onClick: handlerAll(props.onClick, onSubmit),\n    }),\n    [dataProps, disabled, editing, onSubmit],\n  )\n\n  const getCancelProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...dataProps,\n      ...props,\n      ref: mergeRefs(cancelRef, ref),\n      disabled,\n      hidden: !editing,\n      onClick: handlerAll(props.onClick, onCancel),\n    }),\n    [dataProps, disabled, editing, onCancel],\n  )\n\n  return {\n    editing,\n    value,\n    getCancelProps,\n    getControlProps,\n    getEditProps,\n    getInputProps,\n    getPreviewProps,\n    getRootProps,\n    getSubmitProps,\n    getTextareaProps,\n    onCancel,\n    onEdit,\n    onSubmit,\n  }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n"],"mappings":"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"}

package/dist/esm/components/tooltip/tooltip.js

@@ -16,7 +16,7 @@ const { PropsContext: TooltipPropsContext, StyleContext, usePropsContext: useToo
 * @see https://yamada-ui.com/docs/components/tooltip
 */
 const Tooltip = (props) => {
-	const [context, { animationScheme = "scale", children, content, duration = .1, contentProps, portalProps, ...rest }] = useRootComponentProps(props);
+	const [context, { animationScheme = "scale", children, content, duration = .1, contentProps, portalProps, positionerProps, ...rest }] = useRootComponentProps(props);
 	const { open, getContentProps, getPositionerProps, getTriggerProps } = useTooltip(rest);
 	const popupAnimationProps = usePopupAnimationProps({
 		animationScheme,
@@ -32,7 +32,7 @@ const Tooltip = (props) => {
 		}), /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(Portal, {
 			...portalProps,
 			children: /* @__PURE__ */ jsx(TooltipPositioner, {
-				...getPositionerProps(),
+				...getPositionerProps(positionerProps),
 				children: /* @__PURE__ */ jsx(TooltipContent, {
 					...popupAnimationProps,
 					...(0, utils_exports.cast)(getContentProps((0, utils_exports.cast)(contentProps))),

package/dist/esm/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["motion"],"sources":["../../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { TooltipStyle } from \"./tooltip.style\"\nimport type { UseTooltipProps } from \"./use-tooltip\"\nimport { AnimatePresence } from \"motion/react\"\nimport { createSlotComponent } from \"../../core\"\nimport { cast } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { tooltipStyle } from \"./tooltip.style\"\nimport { useTooltip } from \"./use-tooltip\"\n\nexport interface TooltipProps\n  extends\n    UseTooltipProps,\n    PropsWithChildren,\n    UsePopupAnimationProps,\n    ThemeProps<TooltipStyle> {\n  /**\n   * The content of the tooltip.\n   */\n  content?: ReactNode\n  /**\n   * The animation duration.\n   *\n   * @default 0.1\n   */\n  duration?: UsePopupAnimationProps[\"duration\"]\n  /**\n   * Props for content element.\n   */\n  contentProps?: HTMLMotionProps\n  /**\n   * Props for portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n}\n\nconst {\n  PropsContext: TooltipPropsContext,\n  StyleContext,\n  usePropsContext: useTooltipPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<TooltipProps, TooltipStyle>(\"tooltip\", tooltipStyle)\n\nexport { TooltipPropsContext, useTooltipPropsContext }\n\n/**\n * `Tooltip` is a component that displays short information, such as supplementary details for an element.\n *\n * @see https://yamada-ui.com/docs/components/tooltip\n */\nexport const Tooltip: FC<TooltipProps> = (props) => {\n  const [\n    context,\n    {\n      animationScheme = \"scale\",\n      children,\n      content,\n      duration = 0.1,\n      contentProps,\n      portalProps,\n      ...rest\n    },\n  ] = useRootComponentProps(props)\n  const { open, getContentProps, getPositionerProps, getTriggerProps } =\n    useTooltip(rest)\n  const popupAnimationProps = usePopupAnimationProps({\n    animationScheme,\n    duration,\n  })\n\n  if (!content) return children\n\n  return (\n    <StyleContext value={context}>\n      <TooltipTrigger asChild {...getTriggerProps()}>\n        {children}\n      </TooltipTrigger>\n\n      <AnimatePresence>\n        {open ? (\n          <Portal {...portalProps}>\n            <TooltipPositioner {...getPositionerProps()}>\n              <TooltipContent\n                {...popupAnimationProps}\n                {...cast<HTMLMotionProps>(\n                  getContentProps(cast<HTMLProps>(contentProps)),\n                )}\n              >\n                {content}\n              </TooltipContent>\n            </TooltipPositioner>\n          </Portal>\n        ) : null}\n      </AnimatePresence>\n    </StyleContext>\n  )\n}\n\ninterface TooltipPositionerProps extends HTMLStyledProps {}\n\nconst TooltipPositioner = withContext<\"div\", TooltipPositionerProps>(\n  \"div\",\n  \"positioner\",\n)()\n\ninterface TooltipTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nconst TooltipTrigger = withContext<\"button\", TooltipTriggerProps>(\n  \"button\",\n  \"trigger\",\n)()\n\ninterface TooltipContentProps extends Omit<\n  HTMLMotionProps,\n  \"children\" | \"offset\" | \"transform\"\n> {}\n\nconst TooltipContent = withContext<\"div\", TooltipContentProps>(\n  motion.div,\n  \"content\",\n)()\n"],"mappings":";;;;;;;;;;;AA4CA,MAAM,EACJ,cAAc,qBACd,cACA,iBAAiB,wBACjB,aACA,0BACE,oBAAgD,WAAW,YAAY;;;;;;AAS3E,MAAa,WAA6B,UAAU;CAClD,MAAM,CACJ,SACA,EACE,kBAAkB,SAClB,UACA,SACA,WAAW,IACX,cACA,aACA,GAAG,UAEH,sBAAsB,KAAK;CAC/B,MAAM,EAAE,MAAM,iBAAiB,oBAAoB,oBACjD,WAAW,IAAI;CACjB,MAAM,sBAAsB,uBAAuB;EACjD;EACA;CACF,CAAC;CAED,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,qBAAC,cAAD;EAAc,OAAO;EAArB,UAAA,CACE,oBAAC,gBAAD;GAAgB,SAAA;GAAQ,GAAI,gBAAgB;GACzC;EACa,CAAA,GAEhB,oBAAC,iBAAD,EAAA,UACG,OACC,oBAAC,QAAD;GAAQ,GAAI;GACV,UAAA,oBAAC,mBAAD;IAAmB,GAAI,mBAAmB;IACxC,UAAA,oBAAC,gBAAD;KACE,GAAI;KACJ,IAAA,GAAA,cAAA,KAAA,CACE,iBAAA,GAAA,cAAA,KAAA,CAAgC,YAAY,CAAC,CAC/C;KAEC,UAAA;IACa,CAAA;GACC,CAAA;EACb,CAAA,IACN,KACW,CAAA,CACL;;AAElB;AAIA,MAAM,oBAAoB,YACxB,OACA,YACF,CAAC,CAAC;AAIF,MAAM,iBAAiB,YACrB,UACA,SACF,CAAC,CAAC;AAOF,MAAM,iBAAiB,YACrBA,SAAO,KACP,SACF,CAAC,CAAC"}
+{"version":3,"file":"tooltip.js","names":["motion"],"sources":["../../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { TooltipStyle } from \"./tooltip.style\"\nimport type { UseTooltipProps } from \"./use-tooltip\"\nimport { AnimatePresence } from \"motion/react\"\nimport { createSlotComponent } from \"../../core\"\nimport { cast } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { tooltipStyle } from \"./tooltip.style\"\nimport { useTooltip } from \"./use-tooltip\"\n\nexport interface TooltipProps\n  extends\n    UseTooltipProps,\n    PropsWithChildren,\n    UsePopupAnimationProps,\n    ThemeProps<TooltipStyle> {\n  /**\n   * The content of the tooltip.\n   */\n  content?: ReactNode\n  /**\n   * The animation duration.\n   *\n   * @default 0.1\n   */\n  duration?: UsePopupAnimationProps[\"duration\"]\n  /**\n   * Props for content element.\n   */\n  contentProps?: TooltipContentProps\n  /**\n   * Props for portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Props for positioner element.\n   */\n  positionerProps?: Omit<TooltipPositionerProps, \"children\">\n}\n\nconst {\n  PropsContext: TooltipPropsContext,\n  StyleContext,\n  usePropsContext: useTooltipPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<TooltipProps, TooltipStyle>(\"tooltip\", tooltipStyle)\n\nexport { TooltipPropsContext, useTooltipPropsContext }\n\n/**\n * `Tooltip` is a component that displays short information, such as supplementary details for an element.\n *\n * @see https://yamada-ui.com/docs/components/tooltip\n */\nexport const Tooltip: FC<TooltipProps> = (props) => {\n  const [\n    context,\n    {\n      animationScheme = \"scale\",\n      children,\n      content,\n      duration = 0.1,\n      contentProps,\n      portalProps,\n      positionerProps,\n      ...rest\n    },\n  ] = useRootComponentProps(props)\n  const { open, getContentProps, getPositionerProps, getTriggerProps } =\n    useTooltip(rest)\n  const popupAnimationProps = usePopupAnimationProps({\n    animationScheme,\n    duration,\n  })\n\n  if (!content) return children\n\n  return (\n    <StyleContext value={context}>\n      <TooltipTrigger asChild {...getTriggerProps()}>\n        {children}\n      </TooltipTrigger>\n\n      <AnimatePresence>\n        {open ? (\n          <Portal {...portalProps}>\n            <TooltipPositioner {...getPositionerProps(positionerProps)}>\n              <TooltipContent\n                {...popupAnimationProps}\n                {...cast<HTMLMotionProps>(\n                  getContentProps(cast<HTMLProps>(contentProps)),\n                )}\n              >\n                {content}\n              </TooltipContent>\n            </TooltipPositioner>\n          </Portal>\n        ) : null}\n      </AnimatePresence>\n    </StyleContext>\n  )\n}\n\ninterface TooltipPositionerProps extends HTMLStyledProps {}\n\nconst TooltipPositioner = withContext<\"div\", TooltipPositionerProps>(\n  \"div\",\n  \"positioner\",\n)()\n\ninterface TooltipTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nconst TooltipTrigger = withContext<\"button\", TooltipTriggerProps>(\n  \"button\",\n  \"trigger\",\n)()\n\ninterface TooltipContentProps extends Omit<\n  HTMLMotionProps,\n  \"children\" | \"offset\" | \"transform\"\n> {}\n\nconst TooltipContent = withContext<\"div\", TooltipContentProps>(\n  motion.div,\n  \"content\",\n)()\n"],"mappings":";;;;;;;;;;;AAgDA,MAAM,EACJ,cAAc,qBACd,cACA,iBAAiB,wBACjB,aACA,0BACE,oBAAgD,WAAW,YAAY;;;;;;AAS3E,MAAa,WAA6B,UAAU;CAClD,MAAM,CACJ,SACA,EACE,kBAAkB,SAClB,UACA,SACA,WAAW,IACX,cACA,aACA,iBACA,GAAG,UAEH,sBAAsB,KAAK;CAC/B,MAAM,EAAE,MAAM,iBAAiB,oBAAoB,oBACjD,WAAW,IAAI;CACjB,MAAM,sBAAsB,uBAAuB;EACjD;EACA;CACF,CAAC;CAED,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,qBAAC,cAAD;EAAc,OAAO;EAArB,UAAA,CACE,oBAAC,gBAAD;GAAgB,SAAA;GAAQ,GAAI,gBAAgB;GACzC;EACa,CAAA,GAEhB,oBAAC,iBAAD,EAAA,UACG,OACC,oBAAC,QAAD;GAAQ,GAAI;GACV,UAAA,oBAAC,mBAAD;IAAmB,GAAI,mBAAmB,eAAe;IACvD,UAAA,oBAAC,gBAAD;KACE,GAAI;KACJ,IAAA,GAAA,cAAA,KAAA,CACE,iBAAA,GAAA,cAAA,KAAA,CAAgC,YAAY,CAAC,CAC/C;KAEC,UAAA;IACa,CAAA;GACC,CAAA;EACb,CAAA,IACN,KACW,CAAA,CACL;;AAElB;AAIA,MAAM,oBAAoB,YACxB,OACA,YACF,CAAC,CAAC;AAIF,MAAM,iBAAiB,YACrB,UACA,SACF,CAAC,CAAC;AAOF,MAAM,iBAAiB,YACrBA,SAAO,KACP,SACF,CAAC,CAAC"}

package/dist/esm/hooks/use-focus/index.js

@@ -25,7 +25,8 @@ const useFocusOnShow = (refOrEl, { focusTarget: focusRefOrEl, preventScroll, sho
 	const onFocus = useCallback(() => {
 		const target = getTarget();
 		if (!target || !trulyShouldFocus || focused.current) return;
-		if (target.contains(document.activeElement)) return;
+		const rootNode = target.getRootNode();
+		if ((0, utils_exports.contains)(target, (0, utils_exports.getActiveElement)((0, utils_exports.isShadowRoot)(rootNode) ? rootNode : (0, utils_exports.getDocument)(target)))) return;
 		const focusTarget = getFocusTarget();
 		if (focusTarget) requestAnimationFrame(() => {
 			focusTarget.focus({ preventScroll });
@@ -62,14 +63,17 @@ const useFocusOnShow = (refOrEl, { focusTarget: focusRefOrEl, preventScroll, sho
 * @see https://yamada-ui.com/docs/hooks/use-focus-on-pointer-down
 */
 const useFocusOnPointerDown = ({ ref, elements, enabled }) => {
-	useEventListener(() => (0, utils_exports.getDocument)(ref.current), "pointerdown", (ev) => {
+	useEventListener(() => ref.current?.getRootNode() ?? (0, utils_exports.getDocument)(ref.current), "pointerdown", (ev) => {
 		if (!(0, utils_exports.isSafari)() || !enabled) return;
 		const target = ev.target;
-		const validTarget = (elements ?? [ref]).some((elOrRef) => {
+		const els = elements ?? [ref];
+		const rootNode = ref.current?.getRootNode();
+		const root = (0, utils_exports.isShadowRoot)(rootNode) ? rootNode : (0, utils_exports.getDocument)(ref.current);
+		const validTarget = els.some((elOrRef) => {
 			const el = isRefObject(elOrRef) ? elOrRef.current : elOrRef;
 			return el?.contains(target) || el === target;
 		});
-		if ((0, utils_exports.getActiveElement)((0, utils_exports.getDocument)(ref.current)) !== target && validTarget) {
+		if ((0, utils_exports.getActiveElement)(root) !== target && validTarget) {
 			ev.preventDefault();
 			target.focus();
 		}

package/dist/esm/hooks/use-focus/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/hooks/use-focus/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport { useCallback, useRef } from \"react\"\nimport {\n  getActiveElement,\n  getDocument,\n  getFirstFocusableElement,\n  isRefObject,\n  isSafari,\n  useUpdateEffect,\n} from \"../../utils\"\nimport { useEventListener } from \"../use-event-listener\"\n\nexport interface UseFocusOnShowProps {\n  focusTarget?: HTMLElement | null | RefObject<HTMLElement | null>\n  preventScroll?: boolean\n  shouldFocus?: boolean\n  visible?: boolean\n}\n\n/**\n * `useFocusOnShow` is a custom hook that focuses on the target element when it is shown.\n *\n * @see https://yamada-ui.com/docs/hooks/use-focus-on-show\n */\nexport const useFocusOnShow = <Y extends HTMLElement>(\n  refOrEl: RefObject<null | Y> | Y,\n  {\n    focusTarget: focusRefOrEl,\n    preventScroll,\n    shouldFocus,\n    visible,\n  }: UseFocusOnShowProps = {\n    preventScroll: true,\n    shouldFocus: false,\n  },\n) => {\n  const trulyShouldFocus = shouldFocus && visible\n  const focused = useRef(false)\n\n  const getTarget = useCallback(() => {\n    return isRefObject(refOrEl) ? refOrEl.current : refOrEl\n  }, [refOrEl])\n\n  const getFocusTarget = useCallback(() => {\n    return isRefObject(focusRefOrEl) ? focusRefOrEl.current : focusRefOrEl\n  }, [focusRefOrEl])\n\n  const onFocus = useCallback(() => {\n    const target = getTarget()\n\n    if (!target || !trulyShouldFocus || focused.current) return\n    if (target.contains(document.activeElement)) return\n\n    const focusTarget = getFocusTarget()\n\n    if (focusTarget) {\n      requestAnimationFrame(() => {\n        focusTarget.focus({ preventScroll })\n\n        focused.current = true\n      })\n    } else {\n      const firstFocusable = getFirstFocusableElement(target)\n\n      if (firstFocusable)\n        requestAnimationFrame(() => {\n          firstFocusable.focus({ preventScroll })\n\n          focused.current = true\n        })\n      else\n        requestAnimationFrame(() => {\n          target.focus({ preventScroll })\n\n          focused.current = true\n        })\n    }\n  }, [getTarget, trulyShouldFocus, getFocusTarget, preventScroll])\n\n  useUpdateEffect(() => {\n    focused.current = !trulyShouldFocus\n  }, [trulyShouldFocus])\n\n  useUpdateEffect(() => {\n    requestAnimationFrame(onFocus)\n  }, [onFocus])\n\n  useEventListener(getTarget, \"transitionend\", onFocus)\n}\n\nexport interface UseFocusOnMouseDownProps {\n  ref: RefObject<HTMLElement | null>\n  elements?: (HTMLElement | null | RefObject<HTMLElement | null>)[]\n  enabled?: boolean\n}\n\n/**\n * `useFocusOnPointerDown` is a custom hook that focuses on the target element when it is clicked.\n *\n * @see https://yamada-ui.com/docs/hooks/use-focus-on-pointer-down\n */\nexport const useFocusOnPointerDown = ({\n  ref,\n  elements,\n  enabled,\n}: UseFocusOnMouseDownProps) => {\n  useEventListener(\n    () => getDocument(ref.current),\n    \"pointerdown\",\n    (ev) => {\n      if (!isSafari() || !enabled) return\n      const target = ev.target as HTMLElement\n\n      const els = elements ?? [ref]\n\n      const validTarget = els.some((elOrRef) => {\n        const el = isRefObject(elOrRef) ? elOrRef.current : elOrRef\n\n        return el?.contains(target) || el === target\n      })\n\n      if (\n        getActiveElement(getDocument(ref.current)) !== target &&\n        validTarget\n      ) {\n        ev.preventDefault()\n\n        target.focus()\n      }\n    },\n  )\n}\n"],"mappings":";;;;;;;;;;;;AA0BA,MAAa,kBACX,SACA,EACE,aAAa,cACb,eACA,aACA,YACuB;CACvB,eAAe;CACf,aAAa;AACf,MACG;CACH,MAAM,mBAAmB,eAAe;CACxC,MAAM,UAAU,OAAO,KAAK;CAE5B,MAAM,YAAY,kBAAkB;EAClC,OAAO,YAAY,OAAO,IAAI,QAAQ,UAAU;CAClD,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,iBAAiB,kBAAkB;EACvC,OAAO,YAAY,YAAY,IAAI,aAAa,UAAU;CAC5D,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,UAAU,kBAAkB;EAChC,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,UAAU,CAAC,oBAAoB,QAAQ,SAAS;EACrD,IAAI,OAAO,SAAS,SAAS,aAAa,GAAG;EAE7C,MAAM,cAAc,eAAe;EAEnC,IAAI,aACF,4BAA4B;GAC1B,YAAY,MAAM,EAAE,cAAc,CAAC;GAEnC,QAAQ,UAAU;EACpB,CAAC;OACI;GACL,MAAM,kBAAA,GAAA,cAAA,yBAAA,CAA0C,MAAM;GAEtD,IAAI,gBACF,4BAA4B;IAC1B,eAAe,MAAM,EAAE,cAAc,CAAC;IAEtC,QAAQ,UAAU;GACpB,CAAC;QAED,4BAA4B;IAC1B,OAAO,MAAM,EAAE,cAAc,CAAC;IAE9B,QAAQ,UAAU;GACpB,CAAC;EACL;CACF,GAAG;EAAC;EAAW;EAAkB;EAAgB;CAAa,CAAC;CAE/D,sBAAsB;EACpB,QAAQ,UAAU,CAAC;CACrB,GAAG,CAAC,gBAAgB,CAAC;CAErB,sBAAsB;EACpB,sBAAsB,OAAO;CAC/B,GAAG,CAAC,OAAO,CAAC;CAEZ,iBAAiB,WAAW,iBAAiB,OAAO;AACtD;;;;;;AAaA,MAAa,yBAAyB,EACpC,KACA,UACA,cAC8B;CAC9B,wBAAA,GAAA,cAAA,YAAA,CACoB,IAAI,OAAO,GAC7B,gBACC,OAAO;EACN,IAAI,EAAA,GAAA,cAAA,SAAA,CAAU,KAAK,CAAC,SAAS;EAC7B,MAAM,SAAS,GAAG;EAIlB,MAAM,eAFM,YAAY,CAAC,GAAG,EAAA,CAEJ,MAAM,YAAY;GACxC,MAAM,KAAK,YAAY,OAAO,IAAI,QAAQ,UAAU;GAEpD,OAAO,IAAI,SAAS,MAAM,KAAK,OAAO;EACxC,CAAC;EAED,KAAA,GAAA,cAAA,iBAAA,EAAA,GAAA,cAAA,YAAA,CAC+B,IAAI,OAAO,CAAC,MAAM,UAC/C,aACA;GACA,GAAG,eAAe;GAElB,OAAO,MAAM;EACf;CACF,CACF;AACF"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/hooks/use-focus/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport { useCallback, useRef } from \"react\"\nimport {\n  contains,\n  getActiveElement,\n  getDocument,\n  getFirstFocusableElement,\n  isRefObject,\n  isSafari,\n  isShadowRoot,\n  useUpdateEffect,\n} from \"../../utils\"\nimport { useEventListener } from \"../use-event-listener\"\n\nexport interface UseFocusOnShowProps {\n  focusTarget?: HTMLElement | null | RefObject<HTMLElement | null>\n  preventScroll?: boolean\n  shouldFocus?: boolean\n  visible?: boolean\n}\n\n/**\n * `useFocusOnShow` is a custom hook that focuses on the target element when it is shown.\n *\n * @see https://yamada-ui.com/docs/hooks/use-focus-on-show\n */\nexport const useFocusOnShow = <Y extends HTMLElement>(\n  refOrEl: RefObject<null | Y> | Y,\n  {\n    focusTarget: focusRefOrEl,\n    preventScroll,\n    shouldFocus,\n    visible,\n  }: UseFocusOnShowProps = {\n    preventScroll: true,\n    shouldFocus: false,\n  },\n) => {\n  const trulyShouldFocus = shouldFocus && visible\n  const focused = useRef(false)\n\n  const getTarget = useCallback(() => {\n    return isRefObject(refOrEl) ? refOrEl.current : refOrEl\n  }, [refOrEl])\n\n  const getFocusTarget = useCallback(() => {\n    return isRefObject(focusRefOrEl) ? focusRefOrEl.current : focusRefOrEl\n  }, [focusRefOrEl])\n\n  const onFocus = useCallback(() => {\n    const target = getTarget()\n\n    if (!target || !trulyShouldFocus || focused.current) return\n    const rootNode = target.getRootNode()\n    const root = isShadowRoot(rootNode) ? rootNode : getDocument(target)\n    if (contains(target, getActiveElement(root))) return\n\n    const focusTarget = getFocusTarget()\n\n    if (focusTarget) {\n      requestAnimationFrame(() => {\n        focusTarget.focus({ preventScroll })\n\n        focused.current = true\n      })\n    } else {\n      const firstFocusable = getFirstFocusableElement(target)\n\n      if (firstFocusable)\n        requestAnimationFrame(() => {\n          firstFocusable.focus({ preventScroll })\n\n          focused.current = true\n        })\n      else\n        requestAnimationFrame(() => {\n          target.focus({ preventScroll })\n\n          focused.current = true\n        })\n    }\n  }, [getTarget, trulyShouldFocus, getFocusTarget, preventScroll])\n\n  useUpdateEffect(() => {\n    focused.current = !trulyShouldFocus\n  }, [trulyShouldFocus])\n\n  useUpdateEffect(() => {\n    requestAnimationFrame(onFocus)\n  }, [onFocus])\n\n  useEventListener(getTarget, \"transitionend\", onFocus)\n}\n\nexport interface UseFocusOnMouseDownProps {\n  ref: RefObject<HTMLElement | null>\n  elements?: (HTMLElement | null | RefObject<HTMLElement | null>)[]\n  enabled?: boolean\n}\n\n/**\n * `useFocusOnPointerDown` is a custom hook that focuses on the target element when it is clicked.\n *\n * @see https://yamada-ui.com/docs/hooks/use-focus-on-pointer-down\n */\nexport const useFocusOnPointerDown = ({\n  ref,\n  elements,\n  enabled,\n}: UseFocusOnMouseDownProps) => {\n  useEventListener(\n    () => ref.current?.getRootNode() ?? getDocument(ref.current),\n    \"pointerdown\",\n    (ev) => {\n      if (!isSafari() || !enabled) return\n\n      const target = ev.target as HTMLElement\n      const els = elements ?? [ref]\n      const rootNode = ref.current?.getRootNode()\n      const root = isShadowRoot(rootNode) ? rootNode : getDocument(ref.current)\n      const validTarget = els.some((elOrRef) => {\n        const el = isRefObject(elOrRef) ? elOrRef.current : elOrRef\n\n        return el?.contains(target) || el === target\n      })\n\n      if (getActiveElement(root) !== target && validTarget) {\n        ev.preventDefault()\n\n        target.focus()\n      }\n    },\n  )\n}\n"],"mappings":";;;;;;;;;;;;AA4BA,MAAa,kBACX,SACA,EACE,aAAa,cACb,eACA,aACA,YACuB;CACvB,eAAe;CACf,aAAa;AACf,MACG;CACH,MAAM,mBAAmB,eAAe;CACxC,MAAM,UAAU,OAAO,KAAK;CAE5B,MAAM,YAAY,kBAAkB;EAClC,OAAO,YAAY,OAAO,IAAI,QAAQ,UAAU;CAClD,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,iBAAiB,kBAAkB;EACvC,OAAO,YAAY,YAAY,IAAI,aAAa,UAAU;CAC5D,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,UAAU,kBAAkB;EAChC,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,UAAU,CAAC,oBAAoB,QAAQ,SAAS;EACrD,MAAM,WAAW,OAAO,YAAY;EAEpC,KAAA,GAAA,cAAA,SAAA,CAAa,SAAA,GAAA,cAAA,iBAAA,EAAA,GAAA,cAAA,aAAA,CADa,QAAQ,IAAI,YAAA,GAAA,cAAA,YAAA,CAAuB,MAAM,CACzB,CAAC,GAAG;EAE9C,MAAM,cAAc,eAAe;EAEnC,IAAI,aACF,4BAA4B;GAC1B,YAAY,MAAM,EAAE,cAAc,CAAC;GAEnC,QAAQ,UAAU;EACpB,CAAC;OACI;GACL,MAAM,kBAAA,GAAA,cAAA,yBAAA,CAA0C,MAAM;GAEtD,IAAI,gBACF,4BAA4B;IAC1B,eAAe,MAAM,EAAE,cAAc,CAAC;IAEtC,QAAQ,UAAU;GACpB,CAAC;QAED,4BAA4B;IAC1B,OAAO,MAAM,EAAE,cAAc,CAAC;IAE9B,QAAQ,UAAU;GACpB,CAAC;EACL;CACF,GAAG;EAAC;EAAW;EAAkB;EAAgB;CAAa,CAAC;CAE/D,sBAAsB;EACpB,QAAQ,UAAU,CAAC;CACrB,GAAG,CAAC,gBAAgB,CAAC;CAErB,sBAAsB;EACpB,sBAAsB,OAAO;CAC/B,GAAG,CAAC,OAAO,CAAC;CAEZ,iBAAiB,WAAW,iBAAiB,OAAO;AACtD;;;;;;AAaA,MAAa,yBAAyB,EACpC,KACA,UACA,cAC8B;CAC9B,uBACQ,IAAI,SAAS,YAAY,MAAA,GAAA,cAAA,YAAA,CAAiB,IAAI,OAAO,GAC3D,gBACC,OAAO;EACN,IAAI,EAAA,GAAA,cAAA,SAAA,CAAU,KAAK,CAAC,SAAS;EAE7B,MAAM,SAAS,GAAG;EAClB,MAAM,MAAM,YAAY,CAAC,GAAG;EAC5B,MAAM,WAAW,IAAI,SAAS,YAAY;EAC1C,MAAM,QAAA,GAAA,cAAA,aAAA,CAAoB,QAAQ,IAAI,YAAA,GAAA,cAAA,YAAA,CAAuB,IAAI,OAAO;EACxE,MAAM,cAAc,IAAI,MAAM,YAAY;GACxC,MAAM,KAAK,YAAY,OAAO,IAAI,QAAQ,UAAU;GAEpD,OAAO,IAAI,SAAS,MAAM,KAAK,OAAO;EACxC,CAAC;EAED,KAAA,GAAA,cAAA,iBAAA,CAAqB,IAAI,MAAM,UAAU,aAAa;GACpD,GAAG,eAAe;GAElB,OAAO,MAAM;EACf;CACF,CACF;AACF"}

package/dist/esm/utils/dom.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { getActiveElement } from "@yamada-ui/utils";
 //#region src/utils/dom.ts
 function runKeyAction(ev, actions, { preventDefault = true } = {}) {
 	if (ev.key === " ") ev.key = ev.code;
@@ -30,7 +31,9 @@ function useAttributeObserver(ref, attributeFilter, enabled, func) {
 	});
 }
 function getEventRelatedTarget(ev) {
-	return ev.relatedTarget ?? ev.currentTarget.ownerDocument.activeElement;
+	if (ev.relatedTarget) return ev.relatedTarget;
+	const root = ev.currentTarget.getRootNode?.call(ev.currentTarget);
+	return (root && getActiveElement(root)) ?? ev.currentTarget.ownerDocument.activeElement;
 }
 const visuallyHiddenAttributes = {
 	style: {

package/dist/esm/utils/dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom.js","names":[],"sources":["../../../src/utils/dom.ts"],"sourcesContent":["import type { AnyString } from \"@yamada-ui/utils\"\nimport * as React from \"react\"\n\ntype KeyboardNavigationKey =\n  | \"ArrowDown\"\n  | \"ArrowLeft\"\n  | \"ArrowRight\"\n  | \"ArrowUp\"\n  | \"End\"\n  | \"Home\"\n  | \"PageDown\"\n  | \"PageUp\"\n\ntype KeyboardControlKey =\n  | \"Alt\"\n  | \"Backspace\"\n  | \"CapsLock\"\n  | \"Control\"\n  | \"Delete\"\n  | \"Enter\"\n  | \"Escape\"\n  | \"Insert\"\n  | \"Meta\"\n  | \"NumLock\"\n  | \"Pause\"\n  | \"PrintScreen\"\n  | \"ScrollLock\"\n  | \"Shift\"\n  | \"Space\"\n  | \"Tab\"\n\ntype KeyboardFunctionKey = \"Fn\" | \"FnLock\" | `F${number}`\n\ntype KeyboardKey =\n  | AnyString\n  | KeyboardControlKey\n  | KeyboardFunctionKey\n  | KeyboardNavigationKey\n\nexport function runKeyAction<Y>(\n  ev: React.KeyboardEvent<Y>,\n  actions: { [key in KeyboardKey]?: React.KeyboardEventHandler<Y> },\n  { preventDefault = true }: { preventDefault?: boolean } = {},\n) {\n  if (ev.key === \" \") ev.key = ev.code\n  const action = actions[ev.key]\n\n  if (!action) return\n\n  if (preventDefault) ev.preventDefault()\n\n  action(ev)\n}\n\nexport function isComposing(\n  ev: React.ChangeEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n): boolean {\n  if (\"keyCode\" in ev) return ev.nativeEvent.isComposing || ev.keyCode === 229\n  else if (ev.nativeEvent instanceof InputEvent)\n    return ev.nativeEvent.isComposing\n  else return false\n}\n\nexport function useAttributeObserver(\n  ref: React.RefObject<HTMLElement | null>,\n  attributeFilter: string[],\n  enabled: boolean,\n  func: () => void,\n) {\n  React.useEffect(() => {\n    if (!ref.current || !enabled) return\n\n    const ownerDocument = ref.current.ownerDocument.defaultView ?? window\n\n    const observer = new ownerDocument.MutationObserver((changes) => {\n      for (const { type, attributeName } of changes) {\n        if (type !== \"attributes\") continue\n        if (!attributeName) continue\n\n        if (attributeFilter.includes(attributeName)) func()\n      }\n    })\n\n    observer.observe(ref.current, { attributeFilter, attributes: true })\n\n    return () => observer.disconnect()\n  })\n}\n\nexport function getEventRelatedTarget(ev: React.FocusEvent | React.MouseEvent) {\n  return (ev.relatedTarget ??\n    ev.currentTarget.ownerDocument.activeElement) as HTMLElement | null\n}\n\nconst visuallyHiddenStyle = {\n  border: \"0px\",\n  clipPath: \"rect(0px 0px 0px 0px)\",\n  height: \"1px\",\n  margin: \"-1px\",\n  overflow: \"hidden\",\n  padding: \"0px\",\n  position: \"absolute\",\n  whiteSpace: \"nowrap\",\n  width: \"1px\",\n} satisfies React.CSSProperties\n\nexport const visuallyHiddenAttributes = {\n  style: visuallyHiddenStyle,\n  \"aria-hidden\": true,\n  tabIndex: -1,\n} satisfies React.HTMLAttributes<HTMLElement>\n\nexport function* useIds() {\n  const id = React.useId()\n\n  for (let i = 0; ; i++) yield `${id}-${i}`\n}\n"],"mappings":";;AAuCA,SAAgB,aACd,IACA,SACA,EAAE,iBAAiB,SAAuC,CAAC,GAC3D;CACA,IAAI,GAAG,QAAQ,KAAK,GAAG,MAAM,GAAG;CAChC,MAAM,SAAS,QAAQ,GAAG;CAE1B,IAAI,CAAC,QAAQ;CAEb,IAAI,gBAAgB,GAAG,eAAe;CAEtC,OAAO,EAAE;AACX;AAEA,SAAgB,YACd,IACS;CACT,IAAI,aAAa,IAAI,OAAO,GAAG,YAAY,eAAe,GAAG,YAAY;MACpE,IAAI,GAAG,uBAAuB,YACjC,OAAO,GAAG,YAAY;MACnB,OAAO;AACd;AAEA,SAAgB,qBACd,KACA,iBACA,SACA,MACA;CACA,MAAM,gBAAgB;EACpB,IAAI,CAAC,IAAI,WAAW,CAAC,SAAS;EAI9B,MAAM,WAAW,KAFK,IAAI,QAAQ,cAAc,eAAe,OAAA,CAE5B,kBAAkB,YAAY;GAC/D,KAAK,MAAM,EAAE,MAAM,mBAAmB,SAAS;IAC7C,IAAI,SAAS,cAAc;IAC3B,IAAI,CAAC,eAAe;IAEpB,IAAI,gBAAgB,SAAS,aAAa,GAAG,KAAK;GACpD;EACF,CAAC;EAED,SAAS,QAAQ,IAAI,SAAS;GAAE;GAAiB,YAAY;EAAK,CAAC;EAEnE,aAAa,SAAS,WAAW;CACnC,CAAC;AACH;AAEA,SAAgB,sBAAsB,IAAyC;CAC7E,OAAQ,GAAG,iBACT,GAAG,cAAc,cAAc;AACnC;AAcA,MAAa,2BAA2B;CACtC,OAAO;EAZP,QAAQ;EACR,UAAU;EACV,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,SAAS;EACT,UAAU;EACV,YAAY;EACZ,OAAO;CAIA;CACP,eAAe;CACf,UAAU;AACZ;AAEA,UAAiB,SAAS;CACxB,MAAM,KAAK,MAAM,MAAM;CAEvB,KAAK,IAAI,IAAI,IAAK,KAAK,MAAM,GAAG,GAAG,GAAG;AACxC"}
+{"version":3,"file":"dom.js","names":[],"sources":["../../../src/utils/dom.ts"],"sourcesContent":["import { type AnyString, getActiveElement } from \"@yamada-ui/utils\"\nimport * as React from \"react\"\n\ntype KeyboardNavigationKey =\n  | \"ArrowDown\"\n  | \"ArrowLeft\"\n  | \"ArrowRight\"\n  | \"ArrowUp\"\n  | \"End\"\n  | \"Home\"\n  | \"PageDown\"\n  | \"PageUp\"\n\ntype KeyboardControlKey =\n  | \"Alt\"\n  | \"Backspace\"\n  | \"CapsLock\"\n  | \"Control\"\n  | \"Delete\"\n  | \"Enter\"\n  | \"Escape\"\n  | \"Insert\"\n  | \"Meta\"\n  | \"NumLock\"\n  | \"Pause\"\n  | \"PrintScreen\"\n  | \"ScrollLock\"\n  | \"Shift\"\n  | \"Space\"\n  | \"Tab\"\n\ntype KeyboardFunctionKey = \"Fn\" | \"FnLock\" | `F${number}`\n\ntype KeyboardKey =\n  | AnyString\n  | KeyboardControlKey\n  | KeyboardFunctionKey\n  | KeyboardNavigationKey\n\nexport function runKeyAction<Y>(\n  ev: React.KeyboardEvent<Y>,\n  actions: { [key in KeyboardKey]?: React.KeyboardEventHandler<Y> },\n  { preventDefault = true }: { preventDefault?: boolean } = {},\n) {\n  if (ev.key === \" \") ev.key = ev.code\n  const action = actions[ev.key]\n\n  if (!action) return\n\n  if (preventDefault) ev.preventDefault()\n\n  action(ev)\n}\n\nexport function isComposing(\n  ev: React.ChangeEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n): boolean {\n  if (\"keyCode\" in ev) return ev.nativeEvent.isComposing || ev.keyCode === 229\n  else if (ev.nativeEvent instanceof InputEvent)\n    return ev.nativeEvent.isComposing\n  else return false\n}\n\nexport function useAttributeObserver(\n  ref: React.RefObject<HTMLElement | null>,\n  attributeFilter: string[],\n  enabled: boolean,\n  func: () => void,\n) {\n  React.useEffect(() => {\n    if (!ref.current || !enabled) return\n\n    const ownerDocument = ref.current.ownerDocument.defaultView ?? window\n\n    const observer = new ownerDocument.MutationObserver((changes) => {\n      for (const { type, attributeName } of changes) {\n        if (type !== \"attributes\") continue\n        if (!attributeName) continue\n\n        if (attributeFilter.includes(attributeName)) func()\n      }\n    })\n\n    observer.observe(ref.current, { attributeFilter, attributes: true })\n\n    return () => observer.disconnect()\n  })\n}\n\nexport function getEventRelatedTarget(ev: React.FocusEvent | React.MouseEvent) {\n  if (ev.relatedTarget) return ev.relatedTarget as HTMLElement\n\n  const getRootNode = (\n    ev.currentTarget as unknown as {\n      getRootNode?: () => Document | ShadowRoot\n    }\n  ).getRootNode\n  const root = getRootNode?.call(ev.currentTarget)\n\n  return ((root && getActiveElement(root)) ??\n    ev.currentTarget.ownerDocument.activeElement) as HTMLElement | null\n}\n\nconst visuallyHiddenStyle = {\n  border: \"0px\",\n  clipPath: \"rect(0px 0px 0px 0px)\",\n  height: \"1px\",\n  margin: \"-1px\",\n  overflow: \"hidden\",\n  padding: \"0px\",\n  position: \"absolute\",\n  whiteSpace: \"nowrap\",\n  width: \"1px\",\n} satisfies React.CSSProperties\n\nexport const visuallyHiddenAttributes = {\n  style: visuallyHiddenStyle,\n  \"aria-hidden\": true,\n  tabIndex: -1,\n} satisfies React.HTMLAttributes<HTMLElement>\n\nexport function* useIds() {\n  const id = React.useId()\n\n  for (let i = 0; ; i++) yield `${id}-${i}`\n}\n"],"mappings":";;;AAuCA,SAAgB,aACd,IACA,SACA,EAAE,iBAAiB,SAAuC,CAAC,GAC3D;CACA,IAAI,GAAG,QAAQ,KAAK,GAAG,MAAM,GAAG;CAChC,MAAM,SAAS,QAAQ,GAAG;CAE1B,IAAI,CAAC,QAAQ;CAEb,IAAI,gBAAgB,GAAG,eAAe;CAEtC,OAAO,EAAE;AACX;AAEA,SAAgB,YACd,IACS;CACT,IAAI,aAAa,IAAI,OAAO,GAAG,YAAY,eAAe,GAAG,YAAY;MACpE,IAAI,GAAG,uBAAuB,YACjC,OAAO,GAAG,YAAY;MACnB,OAAO;AACd;AAEA,SAAgB,qBACd,KACA,iBACA,SACA,MACA;CACA,MAAM,gBAAgB;EACpB,IAAI,CAAC,IAAI,WAAW,CAAC,SAAS;EAI9B,MAAM,WAAW,KAFK,IAAI,QAAQ,cAAc,eAAe,OAAA,CAE5B,kBAAkB,YAAY;GAC/D,KAAK,MAAM,EAAE,MAAM,mBAAmB,SAAS;IAC7C,IAAI,SAAS,cAAc;IAC3B,IAAI,CAAC,eAAe;IAEpB,IAAI,gBAAgB,SAAS,aAAa,GAAG,KAAK;GACpD;EACF,CAAC;EAED,SAAS,QAAQ,IAAI,SAAS;GAAE;GAAiB,YAAY;EAAK,CAAC;EAEnE,aAAa,SAAS,WAAW;CACnC,CAAC;AACH;AAEA,SAAgB,sBAAsB,IAAyC;CAC7E,IAAI,GAAG,eAAe,OAAO,GAAG;CAOhC,MAAM,OAJJ,GAAG,cAGH,aACwB,KAAK,GAAG,aAAa;CAE/C,QAAS,QAAQ,iBAAiB,IAAI,MACpC,GAAG,cAAc,cAAc;AACnC;AAcA,MAAa,2BAA2B;CACtC,OAAO;EAZP,QAAQ;EACR,UAAU;EACV,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,SAAS;EACT,UAAU;EACV,YAAY;EACZ,OAAO;CAIA;CACP,eAAe;CACf,UAAU;AACZ;AAEA,UAAiB,SAAS;CACxB,MAAM,KAAK,MAAM,MAAM;CAEvB,KAAK,IAAI,IAAI,IAAK,KAAK,MAAM,GAAG,GAAG,GAAG;AACxC"}

package/dist/types/components/chart/polar-chart.style.d.ts

@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 import "../../index.js";
 //#region src/components/chart/polar-chart.style.d.ts
-declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
+declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
 type PolarChartStyle = typeof polarChartStyle;
 //#endregion
 export { PolarChartStyle, polarChartStyle };

package/dist/types/components/tooltip/tooltip.d.ts

@@ -1,4 +1,5 @@
 import { ThemeProps } from "../../core/system/index.types.js";
+import { HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { HTMLMotionProps } from "../motion/index.types.js";
 import "../motion/index.js";
@@ -24,11 +25,15 @@ interface TooltipProps extends UseTooltipProps, PropsWithChildren, UsePopupAnima
   /**
    * Props for content element.
    */
-  contentProps?: HTMLMotionProps;
+  contentProps?: TooltipContentProps;
   /**
    * Props for portal component.
    */
   portalProps?: Omit<PortalProps, "children">;
+  /**
+   * Props for positioner element.
+   */
+  positionerProps?: Omit<TooltipPositionerProps, "children">;
 }
 declare const TooltipPropsContext: import("react").Context<Partial<TooltipProps> | undefined>, useTooltipPropsContext: () => Partial<TooltipProps> | undefined;
 /**
@@ -37,6 +42,8 @@ declare const TooltipPropsContext: import("react").Context<Partial<TooltipProps>
  * @see https://yamada-ui.com/docs/components/tooltip
  */
 declare const Tooltip: FC<TooltipProps>;
+interface TooltipPositionerProps extends HTMLStyledProps {}
+interface TooltipContentProps extends Omit<HTMLMotionProps, "children" | "offset" | "transform"> {}
 //#endregion
 export { Tooltip, TooltipProps, TooltipPropsContext, useTooltipPropsContext };
 //# sourceMappingURL=tooltip.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yamada-ui/react",
   "type": "module",
-  "version": "2.2.6-dev-20260730045651",
+  "version": "2.2.6-dev-20260730065117",
   "description": "React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion",
   "keywords": [
     "yamada",
@@ -147,7 +147,7 @@
     "scroll-into-view-if-needed": "^3.1.0",
     "sonner": "^2.0.7",
     "uqr": "^0.1.3",
-    "@yamada-ui/utils": "2.1.6-dev-20260730045651"
+    "@yamada-ui/utils": "2.1.6-dev-20260730065117"
   },
   "devDependencies": {
     "@babel/parser": "^7.29.7",