smarthr-ui 96.1.0 → 96.1.2

package/lib/components/Tooltip/Tooltip.cjs

@@ -4,10 +4,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var ReactDOM = require('react-dom');
-var index$1 = require('../../_virtual/index3.cjs');
 var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 var hooks_useEnhancedEffect = require('../../hooks/useEnhancedEffect.cjs');
-var components_VisuallyHiddenText_VisuallyHiddenText = require('../VisuallyHiddenText/VisuallyHiddenText.cjs');
 var components_Tooltip_TooltipPortal = require('./TooltipPortal.cjs');
 
 const subscribeFullscreenChange = (callback) => {
@@ -18,6 +16,7 @@ const subscribeFullscreenChange = (callback) => {
 };
 const getFullscreenElement = () => document.fullscreenElement;
 const getFullscreenElementOnSSR = () => null;
+const FOCUSABLE_SELECTOR = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])';
 const classNameGenerator = index.tv({
     base: [
         'smarthr-ui-Tooltip',
@@ -36,21 +35,25 @@ const Tooltip = ({ message, children, type = 'description', triggerType, ellipsi
     const [isVisible, setIsVisible] = React.useState(false);
     const [rect, setRect] = React.useState(null);
     const ref = React.useRef(null);
+    const childrenWrapperRef = React.useRef(null);
     const messageId = React.useId();
     const fullscreenElement = React.useSyncExternalStore(subscribeFullscreenChange, getFullscreenElement, getFullscreenElementOnSSR);
     const [isFocusableChild, setIsFocusableChild] = React.useState(false);
     const [actualTabIndex, setActualTabIndex] = React.useState(tabIndex ?? 0);
+    const isLabel = type === 'label';
     hooks_useEnhancedEffect.useEnhancedEffect(() => {
         setPortalRoot(fullscreenElement ?? document.body);
     }, [fullscreenElement]);
     hooks_useEnhancedEffect.useEnhancedEffect(() => {
-        const childElement = ref.current?.querySelector(':scope > :not(.smarthr-ui-VisuallyHiddenText)');
-        const focusable = !!childElement &&
-            childElement.matches('a[href], button, input, select, textarea, [tabindex]') &&
-            !childElement.matches('[tabindex="-1"]');
+        const childElement = childrenWrapperRef.current?.firstElementChild;
+        const focusable = !!childElement && childElement.matches(FOCUSABLE_SELECTOR);
         setIsFocusableChild(focusable);
         setActualTabIndex(tabIndex !== undefined ? tabIndex : focusable ? undefined : 0);
-    }, [tabIndex]);
+        // focusableな要素に直接aria属性を設定
+        if (focusable) {
+            childElement.setAttribute(isLabel ? 'aria-labelledby' : 'aria-describedby', messageId);
+        }
+    }, [tabIndex, isLabel, messageId]);
     const toShowAction = React.useCallback((e) => {
         // Tooltipのtriggerの他の要素(Dropwdown menu buttonで開いたmenu contentとか)に移動されたらtooltipを表示しない
         if (!ref.current?.contains(e.target)) {
@@ -106,23 +109,11 @@ const Tooltip = ({ message, children, type = 'description', triggerType, ellipsi
         : toCloseAction, [onBlur, toCloseAction]);
     const isIcon = triggerType === 'icon';
     const actualClassName = React.useMemo(() => classNameGenerator({ isIcon, className }), [isIcon, className]);
-    const isLabel = type === 'label';
-    const isInnerTarget = isLabel || isFocusableChild || ariaDescribedbyTarget === 'inner';
-    const childrenWithProps = React.useMemo(() => isLabel
-        ? React.cloneElement(children, { 'aria-labelledby': messageId })
-        : isInnerTarget
-            ? React.cloneElement(children, { 'aria-describedby': messageId })
-            : children, [children, isLabel, isInnerTarget, messageId]);
-    const actualWrapperAriaDescribedby = React.useMemo(() => (!isInnerTarget ? messageId : undefined), [isInnerTarget, messageId]);
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsxRuntime.jsxs("span", { ...rest, ref: ref, tabIndex: actualTabIndex, "aria-describedby": actualWrapperAriaDescribedby, onPointerEnter: onDelegatePointerEnter, onTouchStart: onDelegateTouchStart, onFocus: onDelegateFocus, onPointerLeave: onDelegatePointerLeave, onTouchEnd: onDelegateTouchEnd, onBlur: onDelegateBlur, className: actualClassName, children: [portalRoot &&
-                ReactDOM.createPortal(jsxRuntime.jsx(components_Tooltip_TooltipPortal.TooltipPortal, { message: message, isVisible: isVisible, parentRect: rect, isIcon: isIcon }), portalRoot), childrenWithProps, jsxRuntime.jsx(MemoizedVisuallyHiddenText, { id: messageId, visible: isVisible, children: message })] }));
+    jsxRuntime.jsxs("span", { ...rest, ref: ref, tabIndex: actualTabIndex, "aria-describedby": isLabel || isFocusableChild || ariaDescribedbyTarget === 'inner' ? undefined : messageId, onPointerEnter: onDelegatePointerEnter, onTouchStart: onDelegateTouchStart, onFocus: onDelegateFocus, onPointerLeave: onDelegatePointerLeave, onTouchEnd: onDelegateTouchEnd, onBlur: onDelegateBlur, className: actualClassName, children: [portalRoot &&
+                ReactDOM.createPortal(jsxRuntime.jsx(components_Tooltip_TooltipPortal.TooltipPortal, { messageId: messageId, message: message, isVisible: isVisible, parentRect: rect, isIcon: isIcon }), portalRoot), jsxRuntime.jsx("span", { ref: childrenWrapperRef, className: "shr-contents", children: children })] }));
 };
-const MemoizedVisuallyHiddenText = React.memo(({ id, visible, children }) => {
-    const hiddenText = React.useMemo(() => index$1(children), [children]);
-    return (jsxRuntime.jsx(components_VisuallyHiddenText_VisuallyHiddenText.VisuallyHiddenText, { id: id, "aria-hidden": !visible, children: hiddenText }));
-});
 
 exports.Tooltip = Tooltip;
 //# sourceMappingURL=Tooltip.cjs.map

package/lib/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type BaseSyntheticEvent,\n  type ComponentProps,\n  type FC,\n  type FocusEvent,\n  type PointerEvent,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  type TouchEvent,\n  cloneElement,\n  memo,\n  useCallback,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useEnhancedEffect } from '../../hooks/useEnhancedEffect'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nimport { TooltipPortal } from './TooltipPortal'\n\nconst subscribeFullscreenChange = (callback: () => void) => {\n  window.addEventListener('fullscreenchange', callback)\n\n  return () => {\n    window.removeEventListener('fullscreenchange', callback)\n  }\n}\nconst getFullscreenElement = () => document.fullscreenElement\nconst getFullscreenElementOnSSR = () => null\n\ntype AbstractProps = PropsWithChildren<{\n  /** ツールチップ内に表示するメッセージ */\n  message: ReactNode\n  /** ツールチップの種類。`label` の場合は children の要素に `aria-labelledby` を付与しアクセシブルネームとして機能する。`description`（デフォルト）の場合は `aria-describedby` を付与し補足説明として機能する */\n  type?: 'label' | 'description'\n  /** ツールチップを表示する対象のタイプ。アイコンの場合は `icon` を指定する */\n  triggerType?: 'icon' | 'text'\n  /** `true` のとき、ツールチップを表示する対象が省略されている場合のみツールチップ表示を有効にする */\n  ellipsisOnly?: boolean\n  /** ツールチップを表示する対象の tabIndex 値 */\n  tabIndex?: number\n  /** `type` が `description` の場合に `aria-describedby` を付与する対象。children が focusable な場合は常に children に付与されるため無視される */\n  ariaDescribedbyTarget?: 'wrapper' | 'inner'\n}>\ntype Props = AbstractProps &\n  Omit<ComponentProps<'span'>, keyof AbstractProps | 'aria-describedby' | 'aria-labelledby'>\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-Tooltip',\n    'shr-relative',\n    'shr-inline-block shr-max-w-full shr-align-bottom',\n    'focus-visible:shr-focus-indicator--outer',\n  ],\n  variants: {\n    isIcon: {\n      true: 'shr-leading-[0]',\n    },\n  },\n})\n\nexport const Tooltip: FC<Props> = ({\n  message,\n  children,\n  type = 'description',\n  triggerType,\n  ellipsisOnly,\n  tabIndex,\n  ariaDescribedbyTarget = 'wrapper',\n  className,\n  onPointerEnter,\n  onPointerLeave,\n  onTouchStart,\n  onTouchEnd,\n  onFocus,\n  onBlur,\n  ...rest\n}) => {\n  const [portalRoot, setPortalRoot] = useState<Element | null>(null)\n  const [isVisible, setIsVisible] = useState(false)\n  const [rect, setRect] = useState<DOMRect | null>(null)\n  const ref = useRef<HTMLDivElement>(null)\n  const messageId = useId()\n  const fullscreenElement = useSyncExternalStore(\n    subscribeFullscreenChange,\n    getFullscreenElement,\n    getFullscreenElementOnSSR,\n  )\n\n  const [isFocusableChild, setIsFocusableChild] = useState(false)\n  const [actualTabIndex, setActualTabIndex] = useState<number | undefined>(tabIndex ?? 0)\n\n  useEnhancedEffect(() => {\n    setPortalRoot(fullscreenElement ?? document.body)\n  }, [fullscreenElement])\n\n  useEnhancedEffect(() => {\n    const childElement = ref.current?.querySelector<HTMLElement>(\n      ':scope > :not(.smarthr-ui-VisuallyHiddenText)',\n    )\n\n    const focusable =\n      !!childElement &&\n      childElement.matches('a[href], button, input, select, textarea, [tabindex]') &&\n      !childElement.matches('[tabindex=\"-1\"]')\n\n    setIsFocusableChild(focusable)\n    setActualTabIndex(tabIndex !== undefined ? tabIndex : focusable ? undefined : 0)\n  }, [tabIndex])\n\n  const toShowAction = useCallback(\n    (e: BaseSyntheticEvent) => {\n      // Tooltipのtriggerの他の要素(Dropwdown menu buttonで開いたmenu contentとか)に移動されたらtooltipを表示しない\n      if (!ref.current?.contains(e.target)) {\n        return\n      }\n\n      if (ellipsisOnly) {\n        const outerWidth = parseInt(\n          window\n            .getComputedStyle(ref.current.parentNode! as HTMLElement, null)\n            .width.match(/\\d+/)![0],\n          10,\n        )\n\n        if (outerWidth < 0 || outerWidth > ref.current.clientWidth) {\n          return\n        }\n      }\n\n      setRect(ref.current.getBoundingClientRect())\n      setIsVisible(true)\n    },\n    [ellipsisOnly],\n  )\n  const onDelegatePointerEnter = useMemo(\n    () =>\n      onPointerEnter\n        ? (e: PointerEvent<HTMLSpanElement>) => {\n            onPointerEnter(e)\n            toShowAction(e)\n          }\n        : toShowAction,\n    [onPointerEnter, toShowAction],\n  )\n  const onDelegateTouchStart = useMemo(\n    () =>\n      onTouchStart\n        ? (e: TouchEvent<HTMLSpanElement>) => {\n            onTouchStart(e)\n            toShowAction(e)\n          }\n        : toShowAction,\n    [onTouchStart, toShowAction],\n  )\n  const onDelegateFocus = useMemo(\n    () =>\n      onFocus\n        ? (e: FocusEvent<HTMLSpanElement>) => {\n            onFocus(e)\n            toShowAction(e)\n          }\n        : toShowAction,\n    [onFocus, toShowAction],\n  )\n\n  const toCloseAction = useCallback(() => setIsVisible(false), [])\n  const onDelegatePointerLeave = useMemo(\n    () =>\n      onPointerLeave\n        ? (e: PointerEvent<HTMLSpanElement>) => {\n            onPointerLeave(e)\n            toCloseAction()\n          }\n        : toCloseAction,\n    [onPointerLeave, toCloseAction],\n  )\n  const onDelegateTouchEnd = useMemo(\n    () =>\n      onTouchEnd\n        ? (e: TouchEvent<HTMLSpanElement>) => {\n            onTouchEnd(e)\n            toCloseAction()\n          }\n        : toCloseAction,\n    [onTouchEnd, toCloseAction],\n  )\n  const onDelegateBlur = useMemo(\n    () =>\n      onBlur\n        ? (e: FocusEvent<HTMLSpanElement>) => {\n            onBlur(e)\n            toCloseAction()\n          }\n        : toCloseAction,\n    [onBlur, toCloseAction],\n  )\n\n  const isIcon = triggerType === 'icon'\n  const actualClassName = useMemo(\n    () => classNameGenerator({ isIcon, className }),\n    [isIcon, className],\n  )\n  const isLabel = type === 'label'\n  const isInnerTarget = isLabel || isFocusableChild || ariaDescribedbyTarget === 'inner'\n  const childrenWithProps = useMemo(\n    () =>\n      isLabel\n        ? cloneElement(children as ReactElement, { 'aria-labelledby': messageId })\n        : isInnerTarget\n          ? cloneElement(children as ReactElement, { 'aria-describedby': messageId })\n          : children,\n    [children, isLabel, isInnerTarget, messageId],\n  )\n  const actualWrapperAriaDescribedby = useMemo(\n    () => (!isInnerTarget ? messageId : undefined),\n    [isInnerTarget, messageId],\n  )\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <span\n      {...rest}\n      ref={ref}\n      tabIndex={actualTabIndex}\n      aria-describedby={actualWrapperAriaDescribedby}\n      onPointerEnter={onDelegatePointerEnter}\n      onTouchStart={onDelegateTouchStart}\n      onFocus={onDelegateFocus}\n      onPointerLeave={onDelegatePointerLeave}\n      onTouchEnd={onDelegateTouchEnd}\n      onBlur={onDelegateBlur}\n      className={actualClassName}\n    >\n      {portalRoot &&\n        createPortal(\n          <TooltipPortal\n            message={message}\n            isVisible={isVisible}\n            parentRect={rect}\n            isIcon={isIcon}\n          />,\n          portalRoot,\n        )}\n      {childrenWithProps}\n      <MemoizedVisuallyHiddenText id={messageId} visible={isVisible}>\n        {message}\n      </MemoizedVisuallyHiddenText>\n    </span>\n  )\n}\n\nconst MemoizedVisuallyHiddenText = memo<PropsWithChildren<{ id: string; visible: boolean }>>(\n  ({ id, visible, children }) => {\n    const hiddenText = useMemo(() => innerText(children), [children])\n\n    return (\n      <VisuallyHiddenText id={id} aria-hidden={!visible}>\n        {hiddenText}\n      </VisuallyHiddenText>\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;AACE;AAEA;AACE;AACF;AACF;AACA;AACA;AAmBA;AACE;;;;;AAKC;AACD;AACE;AACE;AACD;AACF;AACF;AAEM;;;;AAoBL;AACA;;;AAQA;;AAGE;AACF;;;AAOE;AAEE;AACA;;;AAIJ;AAEA;;AAGI;;;;AAKE;;;AAOA;;;;;;AAOJ;AAGF;AAGM;;;;;AAON;AAGM;;;;;AAON;AAGM;;;;;AAQN;AACA;AAGM;;AAEI;;;AAKV;AAGM;;AAEI;;;AAKV;AAGM;;AAEI;;;AAMV;;AAKA;;AAEA;;AAIM;;AAEE;;;;AAUN;AAcI;AAeR;AAEA;AAEI;AAEA;AAKF;;"}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type BaseSyntheticEvent,\n  type ComponentProps,\n  type FC,\n  type FocusEvent,\n  type PointerEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  type TouchEvent,\n  useCallback,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { tv } from 'tailwind-variants'\n\nimport { useEnhancedEffect } from '../../hooks/useEnhancedEffect'\n\nimport { TooltipPortal } from './TooltipPortal'\n\nconst subscribeFullscreenChange = (callback: () => void) => {\n  window.addEventListener('fullscreenchange', callback)\n\n  return () => {\n    window.removeEventListener('fullscreenchange', callback)\n  }\n}\nconst getFullscreenElement = () => document.fullscreenElement\nconst getFullscreenElementOnSSR = () => null\n\nconst FOCUSABLE_SELECTOR =\n  'a[href], button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n\ntype AbstractProps = PropsWithChildren<{\n  /** ツールチップ内に表示するメッセージ */\n  message: ReactNode\n  /** ツールチップの種類。`label` の場合は children の要素に `aria-labelledby` を付与しアクセシブルネームとして機能する。`description`（デフォルト）の場合は `aria-describedby` を付与し補足説明として機能する */\n  type?: 'label' | 'description'\n  /** ツールチップを表示する対象のタイプ。アイコンの場合は `icon` を指定する */\n  triggerType?: 'icon' | 'text'\n  /** `true` のとき、ツールチップを表示する対象が省略されている場合のみツールチップ表示を有効にする */\n  ellipsisOnly?: boolean\n  /** ツールチップを表示する対象の tabIndex 値 */\n  tabIndex?: number\n  /** `type` が `description` の場合に `aria-describedby` を付与する対象。children が focusable な場合は常に children に付与されるため無視される */\n  ariaDescribedbyTarget?: 'wrapper' | 'inner'\n}>\ntype Props = AbstractProps &\n  Omit<ComponentProps<'span'>, keyof AbstractProps | 'aria-describedby' | 'aria-labelledby'>\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-Tooltip',\n    'shr-relative',\n    'shr-inline-block shr-max-w-full shr-align-bottom',\n    'focus-visible:shr-focus-indicator--outer',\n  ],\n  variants: {\n    isIcon: {\n      true: 'shr-leading-[0]',\n    },\n  },\n})\n\nexport const Tooltip: FC<Props> = ({\n  message,\n  children,\n  type = 'description',\n  triggerType,\n  ellipsisOnly,\n  tabIndex,\n  ariaDescribedbyTarget = 'wrapper',\n  className,\n  onPointerEnter,\n  onPointerLeave,\n  onTouchStart,\n  onTouchEnd,\n  onFocus,\n  onBlur,\n  ...rest\n}) => {\n  const [portalRoot, setPortalRoot] = useState<Element | null>(null)\n  const [isVisible, setIsVisible] = useState(false)\n  const [rect, setRect] = useState<DOMRect | null>(null)\n  const ref = useRef<HTMLDivElement>(null)\n  const childrenWrapperRef = useRef<HTMLSpanElement>(null)\n  const messageId = useId()\n  const fullscreenElement = useSyncExternalStore(\n    subscribeFullscreenChange,\n    getFullscreenElement,\n    getFullscreenElementOnSSR,\n  )\n\n  const [isFocusableChild, setIsFocusableChild] = useState(false)\n  const [actualTabIndex, setActualTabIndex] = useState<number | undefined>(tabIndex ?? 0)\n\n  const isLabel = type === 'label'\n\n  useEnhancedEffect(() => {\n    setPortalRoot(fullscreenElement ?? document.body)\n  }, [fullscreenElement])\n\n  useEnhancedEffect(() => {\n    const childElement = childrenWrapperRef.current?.firstElementChild as HTMLElement | undefined\n\n    const focusable = !!childElement && childElement.matches(FOCUSABLE_SELECTOR)\n\n    setIsFocusableChild(focusable)\n    setActualTabIndex(tabIndex !== undefined ? tabIndex : focusable ? undefined : 0)\n\n    // focusableな要素に直接aria属性を設定\n    if (focusable) {\n      childElement.setAttribute(isLabel ? 'aria-labelledby' : 'aria-describedby', messageId)\n    }\n  }, [tabIndex, isLabel, messageId])\n\n  const toShowAction = useCallback(\n    (e: BaseSyntheticEvent) => {\n      // Tooltipのtriggerの他の要素(Dropwdown menu buttonで開いたmenu contentとか)に移動されたらtooltipを表示しない\n      if (!ref.current?.contains(e.target)) {\n        return\n      }\n\n      if (ellipsisOnly) {\n        const outerWidth = parseInt(\n          window\n            .getComputedStyle(ref.current.parentNode! as HTMLElement, null)\n            .width.match(/\\d+/)![0],\n          10,\n        )\n\n        if (outerWidth < 0 || outerWidth > ref.current.clientWidth) {\n          return\n        }\n      }\n\n      setRect(ref.current.getBoundingClientRect())\n      setIsVisible(true)\n    },\n    [ellipsisOnly],\n  )\n  const onDelegatePointerEnter = useMemo(\n    () =>\n      onPointerEnter\n        ? (e: PointerEvent<HTMLSpanElement>) => {\n            onPointerEnter(e)\n            toShowAction(e)\n          }\n        : toShowAction,\n    [onPointerEnter, toShowAction],\n  )\n  const onDelegateTouchStart = useMemo(\n    () =>\n      onTouchStart\n        ? (e: TouchEvent<HTMLSpanElement>) => {\n            onTouchStart(e)\n            toShowAction(e)\n          }\n        : toShowAction,\n    [onTouchStart, toShowAction],\n  )\n  const onDelegateFocus = useMemo(\n    () =>\n      onFocus\n        ? (e: FocusEvent<HTMLSpanElement>) => {\n            onFocus(e)\n            toShowAction(e)\n          }\n        : toShowAction,\n    [onFocus, toShowAction],\n  )\n\n  const toCloseAction = useCallback(() => setIsVisible(false), [])\n  const onDelegatePointerLeave = useMemo(\n    () =>\n      onPointerLeave\n        ? (e: PointerEvent<HTMLSpanElement>) => {\n            onPointerLeave(e)\n            toCloseAction()\n          }\n        : toCloseAction,\n    [onPointerLeave, toCloseAction],\n  )\n  const onDelegateTouchEnd = useMemo(\n    () =>\n      onTouchEnd\n        ? (e: TouchEvent<HTMLSpanElement>) => {\n            onTouchEnd(e)\n            toCloseAction()\n          }\n        : toCloseAction,\n    [onTouchEnd, toCloseAction],\n  )\n  const onDelegateBlur = useMemo(\n    () =>\n      onBlur\n        ? (e: FocusEvent<HTMLSpanElement>) => {\n            onBlur(e)\n            toCloseAction()\n          }\n        : toCloseAction,\n    [onBlur, toCloseAction],\n  )\n\n  const isIcon = triggerType === 'icon'\n  const actualClassName = useMemo(\n    () => classNameGenerator({ isIcon, className }),\n    [isIcon, className],\n  )\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <span\n      {...rest}\n      ref={ref}\n      tabIndex={actualTabIndex}\n      aria-describedby={\n        isLabel || isFocusableChild || ariaDescribedbyTarget === 'inner' ? undefined : messageId\n      }\n      onPointerEnter={onDelegatePointerEnter}\n      onTouchStart={onDelegateTouchStart}\n      onFocus={onDelegateFocus}\n      onPointerLeave={onDelegatePointerLeave}\n      onTouchEnd={onDelegateTouchEnd}\n      onBlur={onDelegateBlur}\n      className={actualClassName}\n    >\n      {portalRoot &&\n        createPortal(\n          <TooltipPortal\n            messageId={messageId}\n            message={message}\n            isVisible={isVisible}\n            parentRect={rect}\n            isIcon={isIcon}\n          />,\n          portalRoot,\n        )}\n      <span ref={childrenWrapperRef} className=\"shr-contents\">\n        {children}\n      </span>\n    </span>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;AAyBA;AACE;AAEA;AACE;AACF;AACF;AACA;AACA;AAEA;AAoBA;AACE;;;;;AAKC;AACD;AACE;AACE;AACD;AACF;AACF;AAEM;;;;AAoBL;AACA;AACA;;;AAQA;AAEA;;AAGE;AACF;;AAGE;AAEA;;;;;AAOE;;;AAIJ;;AAGI;;;;AAKE;;;AAOA;;;;;;AAOJ;AAGF;AAGM;;;;;AAON;AAGM;;;;;AAON;AAGM;;;;;AAQN;AACA;AAGM;;AAEI;;;AAKV;AAGM;;AAEI;;;AAKV;AAGM;;AAEI;;;AAMV;;;;;AAwBM;AAeR;;"}

package/lib/components/Tooltip/Tooltip.js

@@ -1,11 +1,9 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { memo, useMemo, useState, useRef, useId, useSyncExternalStore, useCallback, cloneElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useId, useSyncExternalStore, useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
-import innerText from '../../_virtual/index3.js';
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import { useEnhancedEffect } from '../../hooks/useEnhancedEffect.js';
-import { VisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText.js';
 import { TooltipPortal } from './TooltipPortal.js';
 
 const subscribeFullscreenChange = (callback) => {
@@ -16,6 +14,7 @@ const subscribeFullscreenChange = (callback) => {
 };
 const getFullscreenElement = () => document.fullscreenElement;
 const getFullscreenElementOnSSR = () => null;
+const FOCUSABLE_SELECTOR = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])';
 const classNameGenerator = ce({
     base: [
         'smarthr-ui-Tooltip',
@@ -34,21 +33,25 @@ const Tooltip = ({ message, children, type = 'description', triggerType, ellipsi
     const [isVisible, setIsVisible] = useState(false);
     const [rect, setRect] = useState(null);
     const ref = useRef(null);
+    const childrenWrapperRef = useRef(null);
     const messageId = useId();
     const fullscreenElement = useSyncExternalStore(subscribeFullscreenChange, getFullscreenElement, getFullscreenElementOnSSR);
     const [isFocusableChild, setIsFocusableChild] = useState(false);
     const [actualTabIndex, setActualTabIndex] = useState(tabIndex ?? 0);
+    const isLabel = type === 'label';
     useEnhancedEffect(() => {
         setPortalRoot(fullscreenElement ?? document.body);
     }, [fullscreenElement]);
     useEnhancedEffect(() => {
-        const childElement = ref.current?.querySelector(':scope > :not(.smarthr-ui-VisuallyHiddenText)');
-        const focusable = !!childElement &&
-            childElement.matches('a[href], button, input, select, textarea, [tabindex]') &&
-            !childElement.matches('[tabindex="-1"]');
+        const childElement = childrenWrapperRef.current?.firstElementChild;
+        const focusable = !!childElement && childElement.matches(FOCUSABLE_SELECTOR);
         setIsFocusableChild(focusable);
         setActualTabIndex(tabIndex !== undefined ? tabIndex : focusable ? undefined : 0);
-    }, [tabIndex]);
+        // focusableな要素に直接aria属性を設定
+        if (focusable) {
+            childElement.setAttribute(isLabel ? 'aria-labelledby' : 'aria-describedby', messageId);
+        }
+    }, [tabIndex, isLabel, messageId]);
     const toShowAction = useCallback((e) => {
         // Tooltipのtriggerの他の要素(Dropwdown menu buttonで開いたmenu contentとか)に移動されたらtooltipを表示しない
         if (!ref.current?.contains(e.target)) {
@@ -104,23 +107,11 @@ const Tooltip = ({ message, children, type = 'description', triggerType, ellipsi
         : toCloseAction, [onBlur, toCloseAction]);
     const isIcon = triggerType === 'icon';
     const actualClassName = useMemo(() => classNameGenerator({ isIcon, className }), [isIcon, className]);
-    const isLabel = type === 'label';
-    const isInnerTarget = isLabel || isFocusableChild || ariaDescribedbyTarget === 'inner';
-    const childrenWithProps = useMemo(() => isLabel
-        ? cloneElement(children, { 'aria-labelledby': messageId })
-        : isInnerTarget
-            ? cloneElement(children, { 'aria-describedby': messageId })
-            : children, [children, isLabel, isInnerTarget, messageId]);
-    const actualWrapperAriaDescribedby = useMemo(() => (!isInnerTarget ? messageId : undefined), [isInnerTarget, messageId]);
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsxs("span", { ...rest, ref: ref, tabIndex: actualTabIndex, "aria-describedby": actualWrapperAriaDescribedby, onPointerEnter: onDelegatePointerEnter, onTouchStart: onDelegateTouchStart, onFocus: onDelegateFocus, onPointerLeave: onDelegatePointerLeave, onTouchEnd: onDelegateTouchEnd, onBlur: onDelegateBlur, className: actualClassName, children: [portalRoot &&
-                createPortal(jsx(TooltipPortal, { message: message, isVisible: isVisible, parentRect: rect, isIcon: isIcon }), portalRoot), childrenWithProps, jsx(MemoizedVisuallyHiddenText, { id: messageId, visible: isVisible, children: message })] }));
+    jsxs("span", { ...rest, ref: ref, tabIndex: actualTabIndex, "aria-describedby": isLabel || isFocusableChild || ariaDescribedbyTarget === 'inner' ? undefined : messageId, onPointerEnter: onDelegatePointerEnter, onTouchStart: onDelegateTouchStart, onFocus: onDelegateFocus, onPointerLeave: onDelegatePointerLeave, onTouchEnd: onDelegateTouchEnd, onBlur: onDelegateBlur, className: actualClassName, children: [portalRoot &&
+                createPortal(jsx(TooltipPortal, { messageId: messageId, message: message, isVisible: isVisible, parentRect: rect, isIcon: isIcon }), portalRoot), jsx("span", { ref: childrenWrapperRef, className: "shr-contents", children: children })] }));
 };
-const MemoizedVisuallyHiddenText = memo(({ id, visible, children }) => {
-    const hiddenText = useMemo(() => innerText(children), [children]);
-    return (jsx(VisuallyHiddenText, { id: id, "aria-hidden": !visible, children: hiddenText }));
-});
 
 export { Tooltip };
 //# sourceMappingURL=Tooltip.js.map

package/lib/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type BaseSyntheticEvent,\n  type ComponentProps,\n  type FC,\n  type FocusEvent,\n  type PointerEvent,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  type TouchEvent,\n  cloneElement,\n  memo,\n  useCallback,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useEnhancedEffect } from '../../hooks/useEnhancedEffect'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nimport { TooltipPortal } from './TooltipPortal'\n\nconst subscribeFullscreenChange = (callback: () => void) => {\n  window.addEventListener('fullscreenchange', callback)\n\n  return () => {\n    window.removeEventListener('fullscreenchange', callback)\n  }\n}\nconst getFullscreenElement = () => document.fullscreenElement\nconst getFullscreenElementOnSSR = () => null\n\ntype AbstractProps = PropsWithChildren<{\n  /** ツールチップ内に表示するメッセージ */\n  message: ReactNode\n  /** ツールチップの種類。`label` の場合は children の要素に `aria-labelledby` を付与しアクセシブルネームとして機能する。`description`（デフォルト）の場合は `aria-describedby` を付与し補足説明として機能する */\n  type?: 'label' | 'description'\n  /** ツールチップを表示する対象のタイプ。アイコンの場合は `icon` を指定する */\n  triggerType?: 'icon' | 'text'\n  /** `true` のとき、ツールチップを表示する対象が省略されている場合のみツールチップ表示を有効にする */\n  ellipsisOnly?: boolean\n  /** ツールチップを表示する対象の tabIndex 値 */\n  tabIndex?: number\n  /** `type` が `description` の場合に `aria-describedby` を付与する対象。children が focusable な場合は常に children に付与されるため無視される */\n  ariaDescribedbyTarget?: 'wrapper' | 'inner'\n}>\ntype Props = AbstractProps &\n  Omit<ComponentProps<'span'>, keyof AbstractProps | 'aria-describedby' | 'aria-labelledby'>\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-Tooltip',\n    'shr-relative',\n    'shr-inline-block shr-max-w-full shr-align-bottom',\n    'focus-visible:shr-focus-indicator--outer',\n  ],\n  variants: {\n    isIcon: {\n      true: 'shr-leading-[0]',\n    },\n  },\n})\n\nexport const Tooltip: FC<Props> = ({\n  message,\n  children,\n  type = 'description',\n  triggerType,\n  ellipsisOnly,\n  tabIndex,\n  ariaDescribedbyTarget = 'wrapper',\n  className,\n  onPointerEnter,\n  onPointerLeave,\n  onTouchStart,\n  onTouchEnd,\n  onFocus,\n  onBlur,\n  ...rest\n}) => {\n  const [portalRoot, setPortalRoot] = useState<Element | null>(null)\n  const [isVisible, setIsVisible] = useState(false)\n  const [rect, setRect] = useState<DOMRect | null>(null)\n  const ref = useRef<HTMLDivElement>(null)\n  const messageId = useId()\n  const fullscreenElement = useSyncExternalStore(\n    subscribeFullscreenChange,\n    getFullscreenElement,\n    getFullscreenElementOnSSR,\n  )\n\n  const [isFocusableChild, setIsFocusableChild] = useState(false)\n  const [actualTabIndex, setActualTabIndex] = useState<number | undefined>(tabIndex ?? 0)\n\n  useEnhancedEffect(() => {\n    setPortalRoot(fullscreenElement ?? document.body)\n  }, [fullscreenElement])\n\n  useEnhancedEffect(() => {\n    const childElement = ref.current?.querySelector<HTMLElement>(\n      ':scope > :not(.smarthr-ui-VisuallyHiddenText)',\n    )\n\n    const focusable =\n      !!childElement &&\n      childElement.matches('a[href], button, input, select, textarea, [tabindex]') &&\n      !childElement.matches('[tabindex=\"-1\"]')\n\n    setIsFocusableChild(focusable)\n    setActualTabIndex(tabIndex !== undefined ? tabIndex : focusable ? undefined : 0)\n  }, [tabIndex])\n\n  const toShowAction = useCallback(\n    (e: BaseSyntheticEvent) => {\n      // Tooltipのtriggerの他の要素(Dropwdown menu buttonで開いたmenu contentとか)に移動されたらtooltipを表示しない\n      if (!ref.current?.contains(e.target)) {\n        return\n      }\n\n      if (ellipsisOnly) {\n        const outerWidth = parseInt(\n          window\n            .getComputedStyle(ref.current.parentNode! as HTMLElement, null)\n            .width.match(/\\d+/)![0],\n          10,\n        )\n\n        if (outerWidth < 0 || outerWidth > ref.current.clientWidth) {\n          return\n        }\n      }\n\n      setRect(ref.current.getBoundingClientRect())\n      setIsVisible(true)\n    },\n    [ellipsisOnly],\n  )\n  const onDelegatePointerEnter = useMemo(\n    () =>\n      onPointerEnter\n        ? (e: PointerEvent<HTMLSpanElement>) => {\n            onPointerEnter(e)\n            toShowAction(e)\n          }\n        : toShowAction,\n    [onPointerEnter, toShowAction],\n  )\n  const onDelegateTouchStart = useMemo(\n    () =>\n      onTouchStart\n        ? (e: TouchEvent<HTMLSpanElement>) => {\n            onTouchStart(e)\n            toShowAction(e)\n          }\n        : toShowAction,\n    [onTouchStart, toShowAction],\n  )\n  const onDelegateFocus = useMemo(\n    () =>\n      onFocus\n        ? (e: FocusEvent<HTMLSpanElement>) => {\n            onFocus(e)\n            toShowAction(e)\n          }\n        : toShowAction,\n    [onFocus, toShowAction],\n  )\n\n  const toCloseAction = useCallback(() => setIsVisible(false), [])\n  const onDelegatePointerLeave = useMemo(\n    () =>\n      onPointerLeave\n        ? (e: PointerEvent<HTMLSpanElement>) => {\n            onPointerLeave(e)\n            toCloseAction()\n          }\n        : toCloseAction,\n    [onPointerLeave, toCloseAction],\n  )\n  const onDelegateTouchEnd = useMemo(\n    () =>\n      onTouchEnd\n        ? (e: TouchEvent<HTMLSpanElement>) => {\n            onTouchEnd(e)\n            toCloseAction()\n          }\n        : toCloseAction,\n    [onTouchEnd, toCloseAction],\n  )\n  const onDelegateBlur = useMemo(\n    () =>\n      onBlur\n        ? (e: FocusEvent<HTMLSpanElement>) => {\n            onBlur(e)\n            toCloseAction()\n          }\n        : toCloseAction,\n    [onBlur, toCloseAction],\n  )\n\n  const isIcon = triggerType === 'icon'\n  const actualClassName = useMemo(\n    () => classNameGenerator({ isIcon, className }),\n    [isIcon, className],\n  )\n  const isLabel = type === 'label'\n  const isInnerTarget = isLabel || isFocusableChild || ariaDescribedbyTarget === 'inner'\n  const childrenWithProps = useMemo(\n    () =>\n      isLabel\n        ? cloneElement(children as ReactElement, { 'aria-labelledby': messageId })\n        : isInnerTarget\n          ? cloneElement(children as ReactElement, { 'aria-describedby': messageId })\n          : children,\n    [children, isLabel, isInnerTarget, messageId],\n  )\n  const actualWrapperAriaDescribedby = useMemo(\n    () => (!isInnerTarget ? messageId : undefined),\n    [isInnerTarget, messageId],\n  )\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <span\n      {...rest}\n      ref={ref}\n      tabIndex={actualTabIndex}\n      aria-describedby={actualWrapperAriaDescribedby}\n      onPointerEnter={onDelegatePointerEnter}\n      onTouchStart={onDelegateTouchStart}\n      onFocus={onDelegateFocus}\n      onPointerLeave={onDelegatePointerLeave}\n      onTouchEnd={onDelegateTouchEnd}\n      onBlur={onDelegateBlur}\n      className={actualClassName}\n    >\n      {portalRoot &&\n        createPortal(\n          <TooltipPortal\n            message={message}\n            isVisible={isVisible}\n            parentRect={rect}\n            isIcon={isIcon}\n          />,\n          portalRoot,\n        )}\n      {childrenWithProps}\n      <MemoizedVisuallyHiddenText id={messageId} visible={isVisible}>\n        {message}\n      </MemoizedVisuallyHiddenText>\n    </span>\n  )\n}\n\nconst MemoizedVisuallyHiddenText = memo<PropsWithChildren<{ id: string; visible: boolean }>>(\n  ({ id, visible, children }) => {\n    const hiddenText = useMemo(() => innerText(children), [children])\n\n    return (\n      <VisuallyHiddenText id={id} aria-hidden={!visible}>\n        {hiddenText}\n      </VisuallyHiddenText>\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;AA8BA;AACE;AAEA;AACE;AACF;AACF;AACA;AACA;AAmBA;AACE;;;;;AAKC;AACD;AACE;AACE;AACD;AACF;AACF;AAEM;;;;AAoBL;AACA;;;AAQA;;AAGE;AACF;;;AAOE;AAEE;AACA;;;AAIJ;AAEA;;AAGI;;;;AAKE;;;AAOA;;;;;;AAOJ;AAGF;AAGM;;;;;AAON;AAGM;;;;;AAON;AAGM;;;;;AAQN;AACA;AAGM;;AAEI;;;AAKV;AAGM;;AAEI;;;AAKV;AAGM;;AAEI;;;AAMV;;AAKA;;AAEA;;AAIM;;AAEE;;;;AAUN;AAcI;AAeR;AAEA;AAEI;AAEA;AAKF;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type BaseSyntheticEvent,\n  type ComponentProps,\n  type FC,\n  type FocusEvent,\n  type PointerEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  type TouchEvent,\n  useCallback,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { tv } from 'tailwind-variants'\n\nimport { useEnhancedEffect } from '../../hooks/useEnhancedEffect'\n\nimport { TooltipPortal } from './TooltipPortal'\n\nconst subscribeFullscreenChange = (callback: () => void) => {\n  window.addEventListener('fullscreenchange', callback)\n\n  return () => {\n    window.removeEventListener('fullscreenchange', callback)\n  }\n}\nconst getFullscreenElement = () => document.fullscreenElement\nconst getFullscreenElementOnSSR = () => null\n\nconst FOCUSABLE_SELECTOR =\n  'a[href], button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n\ntype AbstractProps = PropsWithChildren<{\n  /** ツールチップ内に表示するメッセージ */\n  message: ReactNode\n  /** ツールチップの種類。`label` の場合は children の要素に `aria-labelledby` を付与しアクセシブルネームとして機能する。`description`（デフォルト）の場合は `aria-describedby` を付与し補足説明として機能する */\n  type?: 'label' | 'description'\n  /** ツールチップを表示する対象のタイプ。アイコンの場合は `icon` を指定する */\n  triggerType?: 'icon' | 'text'\n  /** `true` のとき、ツールチップを表示する対象が省略されている場合のみツールチップ表示を有効にする */\n  ellipsisOnly?: boolean\n  /** ツールチップを表示する対象の tabIndex 値 */\n  tabIndex?: number\n  /** `type` が `description` の場合に `aria-describedby` を付与する対象。children が focusable な場合は常に children に付与されるため無視される */\n  ariaDescribedbyTarget?: 'wrapper' | 'inner'\n}>\ntype Props = AbstractProps &\n  Omit<ComponentProps<'span'>, keyof AbstractProps | 'aria-describedby' | 'aria-labelledby'>\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-Tooltip',\n    'shr-relative',\n    'shr-inline-block shr-max-w-full shr-align-bottom',\n    'focus-visible:shr-focus-indicator--outer',\n  ],\n  variants: {\n    isIcon: {\n      true: 'shr-leading-[0]',\n    },\n  },\n})\n\nexport const Tooltip: FC<Props> = ({\n  message,\n  children,\n  type = 'description',\n  triggerType,\n  ellipsisOnly,\n  tabIndex,\n  ariaDescribedbyTarget = 'wrapper',\n  className,\n  onPointerEnter,\n  onPointerLeave,\n  onTouchStart,\n  onTouchEnd,\n  onFocus,\n  onBlur,\n  ...rest\n}) => {\n  const [portalRoot, setPortalRoot] = useState<Element | null>(null)\n  const [isVisible, setIsVisible] = useState(false)\n  const [rect, setRect] = useState<DOMRect | null>(null)\n  const ref = useRef<HTMLDivElement>(null)\n  const childrenWrapperRef = useRef<HTMLSpanElement>(null)\n  const messageId = useId()\n  const fullscreenElement = useSyncExternalStore(\n    subscribeFullscreenChange,\n    getFullscreenElement,\n    getFullscreenElementOnSSR,\n  )\n\n  const [isFocusableChild, setIsFocusableChild] = useState(false)\n  const [actualTabIndex, setActualTabIndex] = useState<number | undefined>(tabIndex ?? 0)\n\n  const isLabel = type === 'label'\n\n  useEnhancedEffect(() => {\n    setPortalRoot(fullscreenElement ?? document.body)\n  }, [fullscreenElement])\n\n  useEnhancedEffect(() => {\n    const childElement = childrenWrapperRef.current?.firstElementChild as HTMLElement | undefined\n\n    const focusable = !!childElement && childElement.matches(FOCUSABLE_SELECTOR)\n\n    setIsFocusableChild(focusable)\n    setActualTabIndex(tabIndex !== undefined ? tabIndex : focusable ? undefined : 0)\n\n    // focusableな要素に直接aria属性を設定\n    if (focusable) {\n      childElement.setAttribute(isLabel ? 'aria-labelledby' : 'aria-describedby', messageId)\n    }\n  }, [tabIndex, isLabel, messageId])\n\n  const toShowAction = useCallback(\n    (e: BaseSyntheticEvent) => {\n      // Tooltipのtriggerの他の要素(Dropwdown menu buttonで開いたmenu contentとか)に移動されたらtooltipを表示しない\n      if (!ref.current?.contains(e.target)) {\n        return\n      }\n\n      if (ellipsisOnly) {\n        const outerWidth = parseInt(\n          window\n            .getComputedStyle(ref.current.parentNode! as HTMLElement, null)\n            .width.match(/\\d+/)![0],\n          10,\n        )\n\n        if (outerWidth < 0 || outerWidth > ref.current.clientWidth) {\n          return\n        }\n      }\n\n      setRect(ref.current.getBoundingClientRect())\n      setIsVisible(true)\n    },\n    [ellipsisOnly],\n  )\n  const onDelegatePointerEnter = useMemo(\n    () =>\n      onPointerEnter\n        ? (e: PointerEvent<HTMLSpanElement>) => {\n            onPointerEnter(e)\n            toShowAction(e)\n          }\n        : toShowAction,\n    [onPointerEnter, toShowAction],\n  )\n  const onDelegateTouchStart = useMemo(\n    () =>\n      onTouchStart\n        ? (e: TouchEvent<HTMLSpanElement>) => {\n            onTouchStart(e)\n            toShowAction(e)\n          }\n        : toShowAction,\n    [onTouchStart, toShowAction],\n  )\n  const onDelegateFocus = useMemo(\n    () =>\n      onFocus\n        ? (e: FocusEvent<HTMLSpanElement>) => {\n            onFocus(e)\n            toShowAction(e)\n          }\n        : toShowAction,\n    [onFocus, toShowAction],\n  )\n\n  const toCloseAction = useCallback(() => setIsVisible(false), [])\n  const onDelegatePointerLeave = useMemo(\n    () =>\n      onPointerLeave\n        ? (e: PointerEvent<HTMLSpanElement>) => {\n            onPointerLeave(e)\n            toCloseAction()\n          }\n        : toCloseAction,\n    [onPointerLeave, toCloseAction],\n  )\n  const onDelegateTouchEnd = useMemo(\n    () =>\n      onTouchEnd\n        ? (e: TouchEvent<HTMLSpanElement>) => {\n            onTouchEnd(e)\n            toCloseAction()\n          }\n        : toCloseAction,\n    [onTouchEnd, toCloseAction],\n  )\n  const onDelegateBlur = useMemo(\n    () =>\n      onBlur\n        ? (e: FocusEvent<HTMLSpanElement>) => {\n            onBlur(e)\n            toCloseAction()\n          }\n        : toCloseAction,\n    [onBlur, toCloseAction],\n  )\n\n  const isIcon = triggerType === 'icon'\n  const actualClassName = useMemo(\n    () => classNameGenerator({ isIcon, className }),\n    [isIcon, className],\n  )\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <span\n      {...rest}\n      ref={ref}\n      tabIndex={actualTabIndex}\n      aria-describedby={\n        isLabel || isFocusableChild || ariaDescribedbyTarget === 'inner' ? undefined : messageId\n      }\n      onPointerEnter={onDelegatePointerEnter}\n      onTouchStart={onDelegateTouchStart}\n      onFocus={onDelegateFocus}\n      onPointerLeave={onDelegatePointerLeave}\n      onTouchEnd={onDelegateTouchEnd}\n      onBlur={onDelegateBlur}\n      className={actualClassName}\n    >\n      {portalRoot &&\n        createPortal(\n          <TooltipPortal\n            messageId={messageId}\n            message={message}\n            isVisible={isVisible}\n            parentRect={rect}\n            isIcon={isIcon}\n          />,\n          portalRoot,\n        )}\n      <span ref={childrenWrapperRef} className=\"shr-contents\">\n        {children}\n      </span>\n    </span>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AAyBA;AACE;AAEA;AACE;AACF;AACF;AACA;AACA;AAEA;AAoBA;AACE;;;;;AAKC;AACD;AACE;AACE;AACD;AACF;AACF;AAEM;;;;AAoBL;AACA;AACA;;;AAQA;AAEA;;AAGE;AACF;;AAGE;AAEA;;;;;AAOE;;;AAIJ;;AAGI;;;;AAKE;;;AAOA;;;;;;AAOJ;AAGF;AAGM;;;;;AAON;AAGM;;;;;AAON;AAGM;;;;;AAQN;AACA;AAGM;;AAEI;;;AAKV;AAGM;;AAEI;;;AAKV;AAGM;;AAEI;;;AAMV;;;;;AAwBM;AAeR;;"}

package/lib/components/Tooltip/TooltipPortal.cjs

@@ -17,7 +17,7 @@ const classNameGenerator = index.tv({
 });
 const OUTER_MARGIN = 10;
 const SPACING = 5;
-const TooltipPortal = ({ message, isVisible, parentRect, isIcon }) => {
+const TooltipPortal = ({ messageId, message, isVisible, parentRect, isIcon }) => {
     const theme = hooks_useTheme.useTheme();
     const portalRef = React.useRef(null);
     const [style, setStyle] = React.useState({});
@@ -56,7 +56,7 @@ const TooltipPortal = ({ message, isVisible, parentRect, isIcon }) => {
             balloonText: balloonText(),
         };
     }, []);
-    return (jsxRuntime.jsx("div", { ref: portalRef, role: "tooltip", "aria-hidden": !isVisible, className: classNames.container, style: style, children: jsxRuntime.jsx(components_Tooltip_ControlledTooltip.ControlledTooltip, { horizontal: actualHorizontal, vertical: actualVertical, triggerIcon: isIcon, className: classNames.balloon, children: jsxRuntime.jsx("div", { className: classNames.balloonText, children: message }) }) }));
+    return (jsxRuntime.jsx("div", { ref: portalRef, role: "tooltip", "aria-hidden": !isVisible, className: classNames.container, style: style, children: jsxRuntime.jsx(components_Tooltip_ControlledTooltip.ControlledTooltip, { horizontal: actualHorizontal, vertical: actualVertical, triggerIcon: isIcon, className: classNames.balloon, children: jsxRuntime.jsx("div", { id: messageId, className: classNames.balloonText, children: message }) }) }));
 };
 const calculateVertical = (portalHeight, parentRect) => {
     // トリガの上側の領域に収まる場合

package/lib/components/Tooltip/TooltipPortal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipPortal.cjs","sources":["../../../src/components/Tooltip/TooltipPortal.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type ReactNode, useEffect, useMemo, useRef, useState } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../hooks/useTheme'\nimport { debounce } from '../../libs/debounce'\n\nimport { ControlledTooltip } from './ControlledTooltip'\n\ntype Props = {\n  message: ReactNode\n  isVisible: boolean\n  parentRect: DOMRect | null\n  isIcon?: boolean\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    container: 'smarthr-ui-Tooltip-popup shr-absolute shr-z-overlap aria-hidden:shr-hidden',\n    balloon: 'shr-max-w-full [&&&]:shr-whitespace-normal',\n    balloonText: 'shr-m-0 shr-px-1 shr-py-0.5',\n  },\n})\n\nconst OUTER_MARGIN = 10\nconst SPACING = 5\n\ntype HorizontalType = 'left' | 'center' | 'right'\ntype VerticalType = 'top' | 'middle' | 'bottom'\n\nexport const TooltipPortal: FC<Props> = ({ message, isVisible, parentRect, isIcon }) => {\n  const theme = useTheme()\n  const portalRef = useRef<HTMLDivElement>(null)\n  const [style, setStyle] = useState<{ [key: string]: undefined | string }>({})\n  const [actualHorizontal, setActualHorizontal] = useState<HorizontalType>('center')\n  const [actualVertical, setActualVertical] = useState<VerticalType>('bottom')\n\n  useEffect(() => {\n    if (!portalRef.current || !parentRect) {\n      return\n    }\n\n    const portal = portalRef.current\n\n    const action = () => {\n      const vertical = calculateVertical(portal.offsetHeight, parentRect)\n      const horizontal = calculateHorizontal(portal.offsetWidth, parentRect, theme)\n\n      setStyle({\n        insetBlockStart: vertical.insetBlockStart,\n        insetInlineStart: horizontal.insetInlineStart,\n        insetInlineEnd: horizontal.insetInlineEnd,\n        maxWidth: horizontal.maxWidth,\n        maxHeight: vertical.maxHeight,\n      })\n      setActualVertical(vertical.alignment)\n      setActualHorizontal(horizontal.alignment)\n    }\n    const debouncedAction = debounce(action, 100)\n\n    action()\n\n    window.addEventListener('resize', debouncedAction)\n\n    return () => {\n      window.removeEventListener('resize', debouncedAction)\n    }\n  }, [parentRect, theme])\n\n  const classNames = useMemo(() => {\n    const { container, balloon, balloonText } = classNameGenerator()\n\n    return {\n      container: container(),\n      balloon: balloon(),\n      balloonText: balloonText(),\n    }\n  }, [])\n\n  return (\n    <div\n      ref={portalRef}\n      role=\"tooltip\"\n      aria-hidden={!isVisible}\n      className={classNames.container}\n      style={style}\n    >\n      <ControlledTooltip\n        horizontal={actualHorizontal}\n        vertical={actualVertical}\n        triggerIcon={isIcon}\n        className={classNames.balloon}\n      >\n        <div className={classNames.balloonText}>{message}</div>\n      </ControlledTooltip>\n    </div>\n  )\n}\n\nconst calculateVertical = (\n  portalHeight: number,\n  parentRect: DOMRect,\n): { insetBlockStart: string; maxHeight: string | undefined; alignment: VerticalType } => {\n  // トリガの上側の領域に収まる場合\n  if (parentRect.top - portalHeight >= 0) {\n    return {\n      insetBlockStart: `${scrollY + parentRect.top - portalHeight - SPACING}px`,\n      maxHeight: undefined,\n      alignment: 'bottom',\n    }\n  }\n\n  // トリガの下側の領域に収まる場合\n  if (parentRect.bottom + portalHeight <= innerHeight) {\n    return {\n      insetBlockStart: `${scrollY + parentRect.bottom + SPACING}px`,\n      maxHeight: undefined,\n      alignment: 'top',\n    }\n  }\n\n  const triggerHeight = parentRect.bottom - parentRect.top\n\n  // 上側の領域のほうが広い場合\n  if (parentRect.top + triggerHeight / 2 >= innerHeight / 2) {\n    return {\n      insetBlockStart: `${scrollY + OUTER_MARGIN - SPACING}px`,\n      maxHeight: `${parentRect.top - OUTER_MARGIN}px`,\n      alignment: 'bottom',\n    }\n  }\n\n  // 下側の領域のほうが広い場合\n  return {\n    insetBlockStart: `${scrollY + parentRect.bottom + SPACING}px`,\n    maxHeight: `${innerHeight - parentRect.bottom - OUTER_MARGIN}px`,\n    alignment: 'top',\n  }\n}\n\ntype ReturnCalculateHorizontalType = {\n  insetInlineStart: string | undefined\n  insetInlineEnd: string | undefined\n  maxWidth: string\n  alignment: HorizontalType\n}\nconst calculateHorizontal = (\n  portalWidth: number,\n  parentRect: DOMRect,\n  theme: ReturnType<typeof useTheme>,\n): ReturnCalculateHorizontalType => {\n  const triggerAlignCenter = parentRect.left + parentRect.width / 2\n  const portalHalfWidth = portalWidth / 2\n  const edgeSpacing = theme.spacingByChar(0.5)\n\n  // トリガを中心に左右に十分な余白がある場合\n  if (\n    triggerAlignCenter - portalHalfWidth > SPACING &&\n    triggerAlignCenter + portalHalfWidth < document.body.clientWidth - SPACING\n  ) {\n    const insetInlineStart = `${triggerAlignCenter - portalHalfWidth}px`\n\n    return {\n      insetInlineStart,\n      insetInlineEnd: undefined,\n      maxWidth: `calc(100% - max(${insetInlineStart}, 0px) - ${edgeSpacing})`,\n      alignment: 'center',\n    }\n  }\n\n  // トリガが画面左寄りの場合\n  if (triggerAlignCenter <= document.body.clientWidth / 2) {\n    const insetInlineStart = `${scrollX + parentRect.left - SPACING}px`\n\n    return {\n      insetInlineStart,\n      insetInlineEnd: undefined,\n      maxWidth: `calc(100% - max(${insetInlineStart}, 0px) - ${edgeSpacing})`,\n      alignment: 'left',\n    }\n  }\n\n  // トリガが画面右寄りの場合\n  const insetInlineEnd = `${document.body.clientWidth - parentRect.right - scrollX - SPACING}px`\n\n  return {\n    insetInlineStart: undefined,\n    insetInlineEnd,\n    maxWidth: `calc(100% - ${edgeSpacing} - max(${insetInlineEnd}, 0px))`,\n    alignment: 'right',\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;AAiBA;AACE;AACE;AACA;AACA;AACD;AACF;AAED;AACA;AAKO;AACL;AACA;;;;;;;;AAUE;;;AAIE;AAEA;;;;;;AAMC;AACD;AACA;AACF;;AAGA;AAEA;AAEA;AACE;AACF;AACF;AAEA;;;;;;;;;AA4BF;AAEA;;;;;AAQM;AACA;;;;;;;AAQA;AACA;;;;;AAOJ;;AAEI;AACA;AACA;;;;;;;AAQF;;AAEJ;AAQA;;AAME;;;AAIA;;AAIE;;;AAIE;AACA;AACA;;;;;;;;AAUA;AACA;AACA;;;;AAKJ;;AAGE;;AAEA;AACA;;AAEJ;;"}
+{"version":3,"file":"TooltipPortal.cjs","sources":["../../../src/components/Tooltip/TooltipPortal.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type ReactNode, useEffect, useMemo, useRef, useState } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../hooks/useTheme'\nimport { debounce } from '../../libs/debounce'\n\nimport { ControlledTooltip } from './ControlledTooltip'\n\ntype Props = {\n  messageId: string\n  message: ReactNode\n  isVisible: boolean\n  parentRect: DOMRect | null\n  isIcon?: boolean\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    container: 'smarthr-ui-Tooltip-popup shr-absolute shr-z-overlap aria-hidden:shr-hidden',\n    balloon: 'shr-max-w-full [&&&]:shr-whitespace-normal',\n    balloonText: 'shr-m-0 shr-px-1 shr-py-0.5',\n  },\n})\n\nconst OUTER_MARGIN = 10\nconst SPACING = 5\n\ntype HorizontalType = 'left' | 'center' | 'right'\ntype VerticalType = 'top' | 'middle' | 'bottom'\n\nexport const TooltipPortal: FC<Props> = ({ messageId, message, isVisible, parentRect, isIcon }) => {\n  const theme = useTheme()\n  const portalRef = useRef<HTMLDivElement>(null)\n  const [style, setStyle] = useState<{ [key: string]: undefined | string }>({})\n  const [actualHorizontal, setActualHorizontal] = useState<HorizontalType>('center')\n  const [actualVertical, setActualVertical] = useState<VerticalType>('bottom')\n\n  useEffect(() => {\n    if (!portalRef.current || !parentRect) {\n      return\n    }\n\n    const portal = portalRef.current\n\n    const action = () => {\n      const vertical = calculateVertical(portal.offsetHeight, parentRect)\n      const horizontal = calculateHorizontal(portal.offsetWidth, parentRect, theme)\n\n      setStyle({\n        insetBlockStart: vertical.insetBlockStart,\n        insetInlineStart: horizontal.insetInlineStart,\n        insetInlineEnd: horizontal.insetInlineEnd,\n        maxWidth: horizontal.maxWidth,\n        maxHeight: vertical.maxHeight,\n      })\n      setActualVertical(vertical.alignment)\n      setActualHorizontal(horizontal.alignment)\n    }\n    const debouncedAction = debounce(action, 100)\n\n    action()\n\n    window.addEventListener('resize', debouncedAction)\n\n    return () => {\n      window.removeEventListener('resize', debouncedAction)\n    }\n  }, [parentRect, theme])\n\n  const classNames = useMemo(() => {\n    const { container, balloon, balloonText } = classNameGenerator()\n\n    return {\n      container: container(),\n      balloon: balloon(),\n      balloonText: balloonText(),\n    }\n  }, [])\n\n  return (\n    <div\n      ref={portalRef}\n      role=\"tooltip\"\n      aria-hidden={!isVisible}\n      className={classNames.container}\n      style={style}\n    >\n      <ControlledTooltip\n        horizontal={actualHorizontal}\n        vertical={actualVertical}\n        triggerIcon={isIcon}\n        className={classNames.balloon}\n      >\n        <div id={messageId} className={classNames.balloonText}>\n          {message}\n        </div>\n      </ControlledTooltip>\n    </div>\n  )\n}\n\nconst calculateVertical = (\n  portalHeight: number,\n  parentRect: DOMRect,\n): { insetBlockStart: string; maxHeight: string | undefined; alignment: VerticalType } => {\n  // トリガの上側の領域に収まる場合\n  if (parentRect.top - portalHeight >= 0) {\n    return {\n      insetBlockStart: `${scrollY + parentRect.top - portalHeight - SPACING}px`,\n      maxHeight: undefined,\n      alignment: 'bottom',\n    }\n  }\n\n  // トリガの下側の領域に収まる場合\n  if (parentRect.bottom + portalHeight <= innerHeight) {\n    return {\n      insetBlockStart: `${scrollY + parentRect.bottom + SPACING}px`,\n      maxHeight: undefined,\n      alignment: 'top',\n    }\n  }\n\n  const triggerHeight = parentRect.bottom - parentRect.top\n\n  // 上側の領域のほうが広い場合\n  if (parentRect.top + triggerHeight / 2 >= innerHeight / 2) {\n    return {\n      insetBlockStart: `${scrollY + OUTER_MARGIN - SPACING}px`,\n      maxHeight: `${parentRect.top - OUTER_MARGIN}px`,\n      alignment: 'bottom',\n    }\n  }\n\n  // 下側の領域のほうが広い場合\n  return {\n    insetBlockStart: `${scrollY + parentRect.bottom + SPACING}px`,\n    maxHeight: `${innerHeight - parentRect.bottom - OUTER_MARGIN}px`,\n    alignment: 'top',\n  }\n}\n\ntype ReturnCalculateHorizontalType = {\n  insetInlineStart: string | undefined\n  insetInlineEnd: string | undefined\n  maxWidth: string\n  alignment: HorizontalType\n}\nconst calculateHorizontal = (\n  portalWidth: number,\n  parentRect: DOMRect,\n  theme: ReturnType<typeof useTheme>,\n): ReturnCalculateHorizontalType => {\n  const triggerAlignCenter = parentRect.left + parentRect.width / 2\n  const portalHalfWidth = portalWidth / 2\n  const edgeSpacing = theme.spacingByChar(0.5)\n\n  // トリガを中心に左右に十分な余白がある場合\n  if (\n    triggerAlignCenter - portalHalfWidth > SPACING &&\n    triggerAlignCenter + portalHalfWidth < document.body.clientWidth - SPACING\n  ) {\n    const insetInlineStart = `${triggerAlignCenter - portalHalfWidth}px`\n\n    return {\n      insetInlineStart,\n      insetInlineEnd: undefined,\n      maxWidth: `calc(100% - max(${insetInlineStart}, 0px) - ${edgeSpacing})`,\n      alignment: 'center',\n    }\n  }\n\n  // トリガが画面左寄りの場合\n  if (triggerAlignCenter <= document.body.clientWidth / 2) {\n    const insetInlineStart = `${scrollX + parentRect.left - SPACING}px`\n\n    return {\n      insetInlineStart,\n      insetInlineEnd: undefined,\n      maxWidth: `calc(100% - max(${insetInlineStart}, 0px) - ${edgeSpacing})`,\n      alignment: 'left',\n    }\n  }\n\n  // トリガが画面右寄りの場合\n  const insetInlineEnd = `${document.body.clientWidth - parentRect.right - scrollX - SPACING}px`\n\n  return {\n    insetInlineStart: undefined,\n    insetInlineEnd,\n    maxWidth: `calc(100% - ${edgeSpacing} - max(${insetInlineEnd}, 0px))`,\n    alignment: 'right',\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;AAkBA;AACE;AACE;AACA;AACA;AACD;AACF;AAED;AACA;AAKO;AACL;AACA;;;;;;;;AAUE;;;AAIE;AAEA;;;;;;AAMC;AACD;AACA;AACF;;AAGA;AAEA;AAEA;AACE;AACF;AACF;AAEA;;;;;;;;AAUA;AAoBF;AAEA;;;;;AAQM;AACA;;;;;;;AAQA;AACA;;;;;AAOJ;;AAEI;AACA;AACA;;;;;;;AAQF;;AAEJ;AAQA;;AAME;;;AAIA;;AAIE;;;AAIE;AACA;AACA;;;;;;;;AAUA;AACA;AACA;;;;AAKJ;;AAGE;;AAEA;AACA;;AAEJ;;"}

package/lib/components/Tooltip/TooltipPortal.d.ts

@@ -1,5 +1,6 @@
 import { type FC, type ReactNode } from 'react';
 type Props = {
+    messageId: string;
     message: ReactNode;
     isVisible: boolean;
     parentRect: DOMRect | null;

package/lib/components/Tooltip/TooltipPortal.js

@@ -15,7 +15,7 @@ const classNameGenerator = ce({
 });
 const OUTER_MARGIN = 10;
 const SPACING = 5;
-const TooltipPortal = ({ message, isVisible, parentRect, isIcon }) => {
+const TooltipPortal = ({ messageId, message, isVisible, parentRect, isIcon }) => {
     const theme = useTheme();
     const portalRef = useRef(null);
     const [style, setStyle] = useState({});
@@ -54,7 +54,7 @@ const TooltipPortal = ({ message, isVisible, parentRect, isIcon }) => {
             balloonText: balloonText(),
         };
     }, []);
-    return (jsx("div", { ref: portalRef, role: "tooltip", "aria-hidden": !isVisible, className: classNames.container, style: style, children: jsx(ControlledTooltip, { horizontal: actualHorizontal, vertical: actualVertical, triggerIcon: isIcon, className: classNames.balloon, children: jsx("div", { className: classNames.balloonText, children: message }) }) }));
+    return (jsx("div", { ref: portalRef, role: "tooltip", "aria-hidden": !isVisible, className: classNames.container, style: style, children: jsx(ControlledTooltip, { horizontal: actualHorizontal, vertical: actualVertical, triggerIcon: isIcon, className: classNames.balloon, children: jsx("div", { id: messageId, className: classNames.balloonText, children: message }) }) }));
 };
 const calculateVertical = (portalHeight, parentRect) => {
     // トリガの上側の領域に収まる場合

package/lib/components/Tooltip/TooltipPortal.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipPortal.js","sources":["../../../src/components/Tooltip/TooltipPortal.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type ReactNode, useEffect, useMemo, useRef, useState } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../hooks/useTheme'\nimport { debounce } from '../../libs/debounce'\n\nimport { ControlledTooltip } from './ControlledTooltip'\n\ntype Props = {\n  message: ReactNode\n  isVisible: boolean\n  parentRect: DOMRect | null\n  isIcon?: boolean\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    container: 'smarthr-ui-Tooltip-popup shr-absolute shr-z-overlap aria-hidden:shr-hidden',\n    balloon: 'shr-max-w-full [&&&]:shr-whitespace-normal',\n    balloonText: 'shr-m-0 shr-px-1 shr-py-0.5',\n  },\n})\n\nconst OUTER_MARGIN = 10\nconst SPACING = 5\n\ntype HorizontalType = 'left' | 'center' | 'right'\ntype VerticalType = 'top' | 'middle' | 'bottom'\n\nexport const TooltipPortal: FC<Props> = ({ message, isVisible, parentRect, isIcon }) => {\n  const theme = useTheme()\n  const portalRef = useRef<HTMLDivElement>(null)\n  const [style, setStyle] = useState<{ [key: string]: undefined | string }>({})\n  const [actualHorizontal, setActualHorizontal] = useState<HorizontalType>('center')\n  const [actualVertical, setActualVertical] = useState<VerticalType>('bottom')\n\n  useEffect(() => {\n    if (!portalRef.current || !parentRect) {\n      return\n    }\n\n    const portal = portalRef.current\n\n    const action = () => {\n      const vertical = calculateVertical(portal.offsetHeight, parentRect)\n      const horizontal = calculateHorizontal(portal.offsetWidth, parentRect, theme)\n\n      setStyle({\n        insetBlockStart: vertical.insetBlockStart,\n        insetInlineStart: horizontal.insetInlineStart,\n        insetInlineEnd: horizontal.insetInlineEnd,\n        maxWidth: horizontal.maxWidth,\n        maxHeight: vertical.maxHeight,\n      })\n      setActualVertical(vertical.alignment)\n      setActualHorizontal(horizontal.alignment)\n    }\n    const debouncedAction = debounce(action, 100)\n\n    action()\n\n    window.addEventListener('resize', debouncedAction)\n\n    return () => {\n      window.removeEventListener('resize', debouncedAction)\n    }\n  }, [parentRect, theme])\n\n  const classNames = useMemo(() => {\n    const { container, balloon, balloonText } = classNameGenerator()\n\n    return {\n      container: container(),\n      balloon: balloon(),\n      balloonText: balloonText(),\n    }\n  }, [])\n\n  return (\n    <div\n      ref={portalRef}\n      role=\"tooltip\"\n      aria-hidden={!isVisible}\n      className={classNames.container}\n      style={style}\n    >\n      <ControlledTooltip\n        horizontal={actualHorizontal}\n        vertical={actualVertical}\n        triggerIcon={isIcon}\n        className={classNames.balloon}\n      >\n        <div className={classNames.balloonText}>{message}</div>\n      </ControlledTooltip>\n    </div>\n  )\n}\n\nconst calculateVertical = (\n  portalHeight: number,\n  parentRect: DOMRect,\n): { insetBlockStart: string; maxHeight: string | undefined; alignment: VerticalType } => {\n  // トリガの上側の領域に収まる場合\n  if (parentRect.top - portalHeight >= 0) {\n    return {\n      insetBlockStart: `${scrollY + parentRect.top - portalHeight - SPACING}px`,\n      maxHeight: undefined,\n      alignment: 'bottom',\n    }\n  }\n\n  // トリガの下側の領域に収まる場合\n  if (parentRect.bottom + portalHeight <= innerHeight) {\n    return {\n      insetBlockStart: `${scrollY + parentRect.bottom + SPACING}px`,\n      maxHeight: undefined,\n      alignment: 'top',\n    }\n  }\n\n  const triggerHeight = parentRect.bottom - parentRect.top\n\n  // 上側の領域のほうが広い場合\n  if (parentRect.top + triggerHeight / 2 >= innerHeight / 2) {\n    return {\n      insetBlockStart: `${scrollY + OUTER_MARGIN - SPACING}px`,\n      maxHeight: `${parentRect.top - OUTER_MARGIN}px`,\n      alignment: 'bottom',\n    }\n  }\n\n  // 下側の領域のほうが広い場合\n  return {\n    insetBlockStart: `${scrollY + parentRect.bottom + SPACING}px`,\n    maxHeight: `${innerHeight - parentRect.bottom - OUTER_MARGIN}px`,\n    alignment: 'top',\n  }\n}\n\ntype ReturnCalculateHorizontalType = {\n  insetInlineStart: string | undefined\n  insetInlineEnd: string | undefined\n  maxWidth: string\n  alignment: HorizontalType\n}\nconst calculateHorizontal = (\n  portalWidth: number,\n  parentRect: DOMRect,\n  theme: ReturnType<typeof useTheme>,\n): ReturnCalculateHorizontalType => {\n  const triggerAlignCenter = parentRect.left + parentRect.width / 2\n  const portalHalfWidth = portalWidth / 2\n  const edgeSpacing = theme.spacingByChar(0.5)\n\n  // トリガを中心に左右に十分な余白がある場合\n  if (\n    triggerAlignCenter - portalHalfWidth > SPACING &&\n    triggerAlignCenter + portalHalfWidth < document.body.clientWidth - SPACING\n  ) {\n    const insetInlineStart = `${triggerAlignCenter - portalHalfWidth}px`\n\n    return {\n      insetInlineStart,\n      insetInlineEnd: undefined,\n      maxWidth: `calc(100% - max(${insetInlineStart}, 0px) - ${edgeSpacing})`,\n      alignment: 'center',\n    }\n  }\n\n  // トリガが画面左寄りの場合\n  if (triggerAlignCenter <= document.body.clientWidth / 2) {\n    const insetInlineStart = `${scrollX + parentRect.left - SPACING}px`\n\n    return {\n      insetInlineStart,\n      insetInlineEnd: undefined,\n      maxWidth: `calc(100% - max(${insetInlineStart}, 0px) - ${edgeSpacing})`,\n      alignment: 'left',\n    }\n  }\n\n  // トリガが画面右寄りの場合\n  const insetInlineEnd = `${document.body.clientWidth - parentRect.right - scrollX - SPACING}px`\n\n  return {\n    insetInlineStart: undefined,\n    insetInlineEnd,\n    maxWidth: `calc(100% - ${edgeSpacing} - max(${insetInlineEnd}, 0px))`,\n    alignment: 'right',\n  }\n}\n"],"names":[],"mappings":";;;;;;;;AAiBA;AACE;AACE;AACA;AACA;AACD;AACF;AAED;AACA;AAKO;AACL;AACA;;;;;;;;AAUE;;;AAIE;AAEA;;;;;;AAMC;AACD;AACA;AACF;;AAGA;AAEA;AAEA;AACE;AACF;AACF;AAEA;;;;;;;;;AA4BF;AAEA;;;;;AAQM;AACA;;;;;;;AAQA;AACA;;;;;AAOJ;;AAEI;AACA;AACA;;;;;;;AAQF;;AAEJ;AAQA;;AAME;;;AAIA;;AAIE;;;AAIE;AACA;AACA;;;;;;;;AAUA;AACA;AACA;;;;AAKJ;;AAGE;;AAEA;AACA;;AAEJ;;"}
+{"version":3,"file":"TooltipPortal.js","sources":["../../../src/components/Tooltip/TooltipPortal.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type ReactNode, useEffect, useMemo, useRef, useState } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../hooks/useTheme'\nimport { debounce } from '../../libs/debounce'\n\nimport { ControlledTooltip } from './ControlledTooltip'\n\ntype Props = {\n  messageId: string\n  message: ReactNode\n  isVisible: boolean\n  parentRect: DOMRect | null\n  isIcon?: boolean\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    container: 'smarthr-ui-Tooltip-popup shr-absolute shr-z-overlap aria-hidden:shr-hidden',\n    balloon: 'shr-max-w-full [&&&]:shr-whitespace-normal',\n    balloonText: 'shr-m-0 shr-px-1 shr-py-0.5',\n  },\n})\n\nconst OUTER_MARGIN = 10\nconst SPACING = 5\n\ntype HorizontalType = 'left' | 'center' | 'right'\ntype VerticalType = 'top' | 'middle' | 'bottom'\n\nexport const TooltipPortal: FC<Props> = ({ messageId, message, isVisible, parentRect, isIcon }) => {\n  const theme = useTheme()\n  const portalRef = useRef<HTMLDivElement>(null)\n  const [style, setStyle] = useState<{ [key: string]: undefined | string }>({})\n  const [actualHorizontal, setActualHorizontal] = useState<HorizontalType>('center')\n  const [actualVertical, setActualVertical] = useState<VerticalType>('bottom')\n\n  useEffect(() => {\n    if (!portalRef.current || !parentRect) {\n      return\n    }\n\n    const portal = portalRef.current\n\n    const action = () => {\n      const vertical = calculateVertical(portal.offsetHeight, parentRect)\n      const horizontal = calculateHorizontal(portal.offsetWidth, parentRect, theme)\n\n      setStyle({\n        insetBlockStart: vertical.insetBlockStart,\n        insetInlineStart: horizontal.insetInlineStart,\n        insetInlineEnd: horizontal.insetInlineEnd,\n        maxWidth: horizontal.maxWidth,\n        maxHeight: vertical.maxHeight,\n      })\n      setActualVertical(vertical.alignment)\n      setActualHorizontal(horizontal.alignment)\n    }\n    const debouncedAction = debounce(action, 100)\n\n    action()\n\n    window.addEventListener('resize', debouncedAction)\n\n    return () => {\n      window.removeEventListener('resize', debouncedAction)\n    }\n  }, [parentRect, theme])\n\n  const classNames = useMemo(() => {\n    const { container, balloon, balloonText } = classNameGenerator()\n\n    return {\n      container: container(),\n      balloon: balloon(),\n      balloonText: balloonText(),\n    }\n  }, [])\n\n  return (\n    <div\n      ref={portalRef}\n      role=\"tooltip\"\n      aria-hidden={!isVisible}\n      className={classNames.container}\n      style={style}\n    >\n      <ControlledTooltip\n        horizontal={actualHorizontal}\n        vertical={actualVertical}\n        triggerIcon={isIcon}\n        className={classNames.balloon}\n      >\n        <div id={messageId} className={classNames.balloonText}>\n          {message}\n        </div>\n      </ControlledTooltip>\n    </div>\n  )\n}\n\nconst calculateVertical = (\n  portalHeight: number,\n  parentRect: DOMRect,\n): { insetBlockStart: string; maxHeight: string | undefined; alignment: VerticalType } => {\n  // トリガの上側の領域に収まる場合\n  if (parentRect.top - portalHeight >= 0) {\n    return {\n      insetBlockStart: `${scrollY + parentRect.top - portalHeight - SPACING}px`,\n      maxHeight: undefined,\n      alignment: 'bottom',\n    }\n  }\n\n  // トリガの下側の領域に収まる場合\n  if (parentRect.bottom + portalHeight <= innerHeight) {\n    return {\n      insetBlockStart: `${scrollY + parentRect.bottom + SPACING}px`,\n      maxHeight: undefined,\n      alignment: 'top',\n    }\n  }\n\n  const triggerHeight = parentRect.bottom - parentRect.top\n\n  // 上側の領域のほうが広い場合\n  if (parentRect.top + triggerHeight / 2 >= innerHeight / 2) {\n    return {\n      insetBlockStart: `${scrollY + OUTER_MARGIN - SPACING}px`,\n      maxHeight: `${parentRect.top - OUTER_MARGIN}px`,\n      alignment: 'bottom',\n    }\n  }\n\n  // 下側の領域のほうが広い場合\n  return {\n    insetBlockStart: `${scrollY + parentRect.bottom + SPACING}px`,\n    maxHeight: `${innerHeight - parentRect.bottom - OUTER_MARGIN}px`,\n    alignment: 'top',\n  }\n}\n\ntype ReturnCalculateHorizontalType = {\n  insetInlineStart: string | undefined\n  insetInlineEnd: string | undefined\n  maxWidth: string\n  alignment: HorizontalType\n}\nconst calculateHorizontal = (\n  portalWidth: number,\n  parentRect: DOMRect,\n  theme: ReturnType<typeof useTheme>,\n): ReturnCalculateHorizontalType => {\n  const triggerAlignCenter = parentRect.left + parentRect.width / 2\n  const portalHalfWidth = portalWidth / 2\n  const edgeSpacing = theme.spacingByChar(0.5)\n\n  // トリガを中心に左右に十分な余白がある場合\n  if (\n    triggerAlignCenter - portalHalfWidth > SPACING &&\n    triggerAlignCenter + portalHalfWidth < document.body.clientWidth - SPACING\n  ) {\n    const insetInlineStart = `${triggerAlignCenter - portalHalfWidth}px`\n\n    return {\n      insetInlineStart,\n      insetInlineEnd: undefined,\n      maxWidth: `calc(100% - max(${insetInlineStart}, 0px) - ${edgeSpacing})`,\n      alignment: 'center',\n    }\n  }\n\n  // トリガが画面左寄りの場合\n  if (triggerAlignCenter <= document.body.clientWidth / 2) {\n    const insetInlineStart = `${scrollX + parentRect.left - SPACING}px`\n\n    return {\n      insetInlineStart,\n      insetInlineEnd: undefined,\n      maxWidth: `calc(100% - max(${insetInlineStart}, 0px) - ${edgeSpacing})`,\n      alignment: 'left',\n    }\n  }\n\n  // トリガが画面右寄りの場合\n  const insetInlineEnd = `${document.body.clientWidth - parentRect.right - scrollX - SPACING}px`\n\n  return {\n    insetInlineStart: undefined,\n    insetInlineEnd,\n    maxWidth: `calc(100% - ${edgeSpacing} - max(${insetInlineEnd}, 0px))`,\n    alignment: 'right',\n  }\n}\n"],"names":[],"mappings":";;;;;;;;AAkBA;AACE;AACE;AACA;AACA;AACD;AACF;AAED;AACA;AAKO;AACL;AACA;;;;;;;;AAUE;;;AAIE;AAEA;;;;;;AAMC;AACD;AACA;AACF;;AAGA;AAEA;AAEA;AACE;AACF;AACF;AAEA;;;;;;;;AAUA;AAoBF;AAEA;;;;;AAQM;AACA;;;;;;;AAQA;AACA;;;;;AAOJ;;AAEI;AACA;AACA;;;;;;;AAQF;;AAEJ;AAQA;;AAME;;;AAIA;;AAIE;;;AAIE;AACA;AACA;;;;;;;;AAUA;AACA;AACA;;;;AAKJ;;AAGE;;AAEA;AACA;;AAEJ;;"}

package/lib/components/Tooltip/tooltipHelper.cjs

@@ -32,6 +32,7 @@ function getTop({ parentRect, tooltipHeight, vertical, outerMargin, }) {
             return parentRect.top - tooltipHeight - outerMargin;
     }
 }
+const BALLOON_ARROW_POSITION = 29; // length between Balloon edge and center of arrow
 function getLeft({ parentRect, tooltipWidth, horizontal, vertical, isIcon, outerMargin, }) {
     switch (vertical) {
         case 'middle':
@@ -43,8 +44,7 @@ function getLeft({ parentRect, tooltipWidth, horizontal, vertical, isIcon, outer
             }
         case 'top':
         case 'bottom': {
-            const arrowPosition = 29; // length between Balloon edge and center of arrow
-            const iconGap = isIcon ? arrowPosition - parentRect.width / 2 : 0; // to align center of Balloon arrow and icon
+            const iconGap = isIcon ? BALLOON_ARROW_POSITION - parentRect.width / 2 : 0; // to align center of Balloon arrow and icon
             switch (horizontal) {
                 case 'right':
                     return parentRect.left + parentRect.width - tooltipWidth + iconGap;

package/lib/components/Tooltip/tooltipHelper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltipHelper.cjs","sources":["../../../src/components/Tooltip/tooltipHelper.ts"],"sourcesContent":["export function getTooltipRect({\n  parentRect,\n  scrollOffset,\n  tooltipSize,\n  vertical,\n  horizontal,\n  isIcon = false,\n  outerMargin,\n}: {\n  parentRect: DOMRect\n  scrollOffset: { top: number; left: number }\n  tooltipSize: { width: number; height: number }\n  vertical: 'top' | 'middle' | 'bottom'\n  horizontal: 'left' | 'center' | 'right'\n  isIcon: boolean\n  outerMargin: number\n}): { top: number; left: number; $width: number; $height: number } {\n  const top = getTop({\n    parentRect,\n    tooltipHeight: tooltipSize.height,\n    vertical,\n    outerMargin,\n  })\n  const left = getLeft({\n    parentRect,\n    tooltipWidth: tooltipSize.width,\n    horizontal,\n    vertical,\n    isIcon,\n    outerMargin,\n  })\n\n  return {\n    top: top + scrollOffset.top,\n    left: left + scrollOffset.left,\n    $width: tooltipSize.width,\n    $height: tooltipSize.height,\n  }\n}\n\nfunction getTop({\n  parentRect,\n  tooltipHeight,\n  vertical,\n  outerMargin,\n}: {\n  parentRect: DOMRect\n  tooltipHeight: number\n  vertical: 'top' | 'middle' | 'bottom'\n  outerMargin: number\n}): number {\n  switch (vertical) {\n    case 'top':\n      return parentRect.top + parentRect.height + outerMargin\n    case 'middle':\n      return parentRect.top + (parentRect.height - tooltipHeight) / 2\n    case 'bottom':\n      return parentRect.top - tooltipHeight - outerMargin\n  }\n}\n\nfunction getLeft({\n  parentRect,\n  tooltipWidth,\n  horizontal,\n  vertical,\n  isIcon,\n  outerMargin,\n}: {\n  parentRect: DOMRect\n  tooltipWidth: number\n  horizontal: 'left' | 'center' | 'right'\n  vertical: 'top' | 'middle' | 'bottom'\n  isIcon: boolean\n  outerMargin: number\n}): number {\n  switch (vertical) {\n    case 'middle':\n      switch (horizontal) {\n        case 'right':\n          return parentRect.left - tooltipWidth - outerMargin\n        default:\n          return parentRect.left + parentRect.width + outerMargin\n      }\n    case 'top':\n    case 'bottom': {\n      const arrowPosition = 29 // length between Balloon edge and center of arrow\n      const iconGap = isIcon ? arrowPosition - parentRect.width / 2 : 0 // to align center of Balloon arrow and icon\n      switch (horizontal) {\n        case 'right':\n          return parentRect.left + parentRect.width - tooltipWidth + iconGap\n        case 'center':\n          return parentRect.left + (parentRect.width - tooltipWidth) / 2\n        case 'left':\n          return parentRect.left - iconGap\n      }\n    }\n  }\n}\n"],"names":[],"mappings":";;SAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,UAAU,EACV,MAAM,GAAG,KAAK,EACd,WAAW,GASZ,EAAA;IACC,MAAM,GAAG,GAAG,MAAM,CAAC;QACjB,UAAU;QACV,aAAa,EAAE,WAAW,CAAC,MAAM;QACjC,QAAQ;QACR,WAAW;AACZ,KAAA,CAAC;IACF,MAAM,IAAI,GAAG,OAAO,CAAC;QACnB,UAAU;QACV,YAAY,EAAE,WAAW,CAAC,KAAK;QAC/B,UAAU;QACV,QAAQ;QACR,MAAM;QACN,WAAW;AACZ,KAAA,CAAC;IAEF,OAAO;AACL,QAAA,GAAG,EAAE,GAAG,GAAG,YAAY,CAAC,GAAG;AAC3B,QAAA,IAAI,EAAE,IAAI,GAAG,YAAY,CAAC,IAAI;QAC9B,MAAM,EAAE,WAAW,CAAC,KAAK;QACzB,OAAO,EAAE,WAAW,CAAC,MAAM;KAC5B;AACH;AAEA,SAAS,MAAM,CAAC,EACd,UAAU,EACV,aAAa,EACb,QAAQ,EACR,WAAW,GAMZ,EAAA;IACC,QAAQ,QAAQ;AACd,QAAA,KAAK,KAAK;YACR,OAAO,UAAU,CAAC,GAAG,GAAG,UAAU,CAAC,MAAM,GAAG,WAAW;AACzD,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,UAAU,CAAC,GAAG,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,aAAa,IAAI,CAAC;AACjE,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,UAAU,CAAC,GAAG,GAAG,aAAa,GAAG,WAAW;;AAEzD;AAEA,SAAS,OAAO,CAAC,EACf,UAAU,EACV,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,GAQZ,EAAA;IACC,QAAQ,QAAQ;AACd,QAAA,KAAK,QAAQ;YACX,QAAQ,UAAU;AAChB,gBAAA,KAAK,OAAO;AACV,oBAAA,OAAO,UAAU,CAAC,IAAI,GAAG,YAAY,GAAG,WAAW;AACrD,gBAAA;oBACE,OAAO,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,WAAW;;AAE7D,QAAA,KAAK,KAAK;QACV,KAAK,QAAQ,EAAE;AACb,YAAA,MAAM,aAAa,GAAG,EAAE,CAAA;AACxB,YAAA,MAAM,OAAO,GAAG,MAAM,GAAG,aAAa,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAA;YACjE,QAAQ,UAAU;AAChB,gBAAA,KAAK,OAAO;oBACV,OAAO,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,YAAY,GAAG,OAAO;AACpE,gBAAA,KAAK,QAAQ;AACX,oBAAA,OAAO,UAAU,CAAC,IAAI,GAAG,CAAC,UAAU,CAAC,KAAK,GAAG,YAAY,IAAI,CAAC;AAChE,gBAAA,KAAK,MAAM;AACT,oBAAA,OAAO,UAAU,CAAC,IAAI,GAAG,OAAO;;QAEtC;;AAEJ;;;;"}
+{"version":3,"file":"tooltipHelper.cjs","sources":["../../../src/components/Tooltip/tooltipHelper.ts"],"sourcesContent":["export function getTooltipRect({\n  parentRect,\n  scrollOffset,\n  tooltipSize,\n  vertical,\n  horizontal,\n  isIcon = false,\n  outerMargin,\n}: {\n  parentRect: DOMRect\n  scrollOffset: { top: number; left: number }\n  tooltipSize: { width: number; height: number }\n  vertical: 'top' | 'middle' | 'bottom'\n  horizontal: 'left' | 'center' | 'right'\n  isIcon: boolean\n  outerMargin: number\n}): { top: number; left: number; $width: number; $height: number } {\n  const top = getTop({\n    parentRect,\n    tooltipHeight: tooltipSize.height,\n    vertical,\n    outerMargin,\n  })\n  const left = getLeft({\n    parentRect,\n    tooltipWidth: tooltipSize.width,\n    horizontal,\n    vertical,\n    isIcon,\n    outerMargin,\n  })\n\n  return {\n    top: top + scrollOffset.top,\n    left: left + scrollOffset.left,\n    $width: tooltipSize.width,\n    $height: tooltipSize.height,\n  }\n}\n\nfunction getTop({\n  parentRect,\n  tooltipHeight,\n  vertical,\n  outerMargin,\n}: {\n  parentRect: DOMRect\n  tooltipHeight: number\n  vertical: 'top' | 'middle' | 'bottom'\n  outerMargin: number\n}): number {\n  switch (vertical) {\n    case 'top':\n      return parentRect.top + parentRect.height + outerMargin\n    case 'middle':\n      return parentRect.top + (parentRect.height - tooltipHeight) / 2\n    case 'bottom':\n      return parentRect.top - tooltipHeight - outerMargin\n  }\n}\n\nconst BALLOON_ARROW_POSITION = 29 // length between Balloon edge and center of arrow\n\nfunction getLeft({\n  parentRect,\n  tooltipWidth,\n  horizontal,\n  vertical,\n  isIcon,\n  outerMargin,\n}: {\n  parentRect: DOMRect\n  tooltipWidth: number\n  horizontal: 'left' | 'center' | 'right'\n  vertical: 'top' | 'middle' | 'bottom'\n  isIcon: boolean\n  outerMargin: number\n}): number {\n  switch (vertical) {\n    case 'middle':\n      switch (horizontal) {\n        case 'right':\n          return parentRect.left - tooltipWidth - outerMargin\n        default:\n          return parentRect.left + parentRect.width + outerMargin\n      }\n    case 'top':\n    case 'bottom': {\n      const iconGap = isIcon ? BALLOON_ARROW_POSITION - parentRect.width / 2 : 0 // to align center of Balloon arrow and icon\n\n      switch (horizontal) {\n        case 'right':\n          return parentRect.left + parentRect.width - tooltipWidth + iconGap\n        case 'center':\n          return parentRect.left + (parentRect.width - tooltipWidth) / 2\n        case 'left':\n          return parentRect.left - iconGap\n      }\n    }\n  }\n}\n"],"names":[],"mappings":";;SAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,UAAU,EACV,MAAM,GAAG,KAAK,EACd,WAAW,GASZ,EAAA;IACC,MAAM,GAAG,GAAG,MAAM,CAAC;QACjB,UAAU;QACV,aAAa,EAAE,WAAW,CAAC,MAAM;QACjC,QAAQ;QACR,WAAW;AACZ,KAAA,CAAC;IACF,MAAM,IAAI,GAAG,OAAO,CAAC;QACnB,UAAU;QACV,YAAY,EAAE,WAAW,CAAC,KAAK;QAC/B,UAAU;QACV,QAAQ;QACR,MAAM;QACN,WAAW;AACZ,KAAA,CAAC;IAEF,OAAO;AACL,QAAA,GAAG,EAAE,GAAG,GAAG,YAAY,CAAC,GAAG;AAC3B,QAAA,IAAI,EAAE,IAAI,GAAG,YAAY,CAAC,IAAI;QAC9B,MAAM,EAAE,WAAW,CAAC,KAAK;QACzB,OAAO,EAAE,WAAW,CAAC,MAAM;KAC5B;AACH;AAEA,SAAS,MAAM,CAAC,EACd,UAAU,EACV,aAAa,EACb,QAAQ,EACR,WAAW,GAMZ,EAAA;IACC,QAAQ,QAAQ;AACd,QAAA,KAAK,KAAK;YACR,OAAO,UAAU,CAAC,GAAG,GAAG,UAAU,CAAC,MAAM,GAAG,WAAW;AACzD,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,UAAU,CAAC,GAAG,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,aAAa,IAAI,CAAC;AACjE,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,UAAU,CAAC,GAAG,GAAG,aAAa,GAAG,WAAW;;AAEzD;AAEA,MAAM,sBAAsB,GAAG,EAAE,CAAA;AAEjC,SAAS,OAAO,CAAC,EACf,UAAU,EACV,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,GAQZ,EAAA;IACC,QAAQ,QAAQ;AACd,QAAA,KAAK,QAAQ;YACX,QAAQ,UAAU;AAChB,gBAAA,KAAK,OAAO;AACV,oBAAA,OAAO,UAAU,CAAC,IAAI,GAAG,YAAY,GAAG,WAAW;AACrD,gBAAA;oBACE,OAAO,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,WAAW;;AAE7D,QAAA,KAAK,KAAK;QACV,KAAK,QAAQ,EAAE;AACb,YAAA,MAAM,OAAO,GAAG,MAAM,GAAG,sBAAsB,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAA;YAE1E,QAAQ,UAAU;AAChB,gBAAA,KAAK,OAAO;oBACV,OAAO,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,YAAY,GAAG,OAAO;AACpE,gBAAA,KAAK,QAAQ;AACX,oBAAA,OAAO,UAAU,CAAC,IAAI,GAAG,CAAC,UAAU,CAAC,KAAK,GAAG,YAAY,IAAI,CAAC;AAChE,gBAAA,KAAK,MAAM;AACT,oBAAA,OAAO,UAAU,CAAC,IAAI,GAAG,OAAO;;QAEtC;;AAEJ;;;;"}

package/lib/components/Tooltip/tooltipHelper.js

@@ -30,6 +30,7 @@ function getTop({ parentRect, tooltipHeight, vertical, outerMargin, }) {
             return parentRect.top - tooltipHeight - outerMargin;
     }
 }
+const BALLOON_ARROW_POSITION = 29; // length between Balloon edge and center of arrow
 function getLeft({ parentRect, tooltipWidth, horizontal, vertical, isIcon, outerMargin, }) {
     switch (vertical) {
         case 'middle':
@@ -41,8 +42,7 @@ function getLeft({ parentRect, tooltipWidth, horizontal, vertical, isIcon, outer
             }
         case 'top':
         case 'bottom': {
-            const arrowPosition = 29; // length between Balloon edge and center of arrow
-            const iconGap = isIcon ? arrowPosition - parentRect.width / 2 : 0; // to align center of Balloon arrow and icon
+            const iconGap = isIcon ? BALLOON_ARROW_POSITION - parentRect.width / 2 : 0; // to align center of Balloon arrow and icon
             switch (horizontal) {
                 case 'right':
                     return parentRect.left + parentRect.width - tooltipWidth + iconGap;

package/lib/components/Tooltip/tooltipHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltipHelper.js","sources":["../../../src/components/Tooltip/tooltipHelper.ts"],"sourcesContent":["export function getTooltipRect({\n  parentRect,\n  scrollOffset,\n  tooltipSize,\n  vertical,\n  horizontal,\n  isIcon = false,\n  outerMargin,\n}: {\n  parentRect: DOMRect\n  scrollOffset: { top: number; left: number }\n  tooltipSize: { width: number; height: number }\n  vertical: 'top' | 'middle' | 'bottom'\n  horizontal: 'left' | 'center' | 'right'\n  isIcon: boolean\n  outerMargin: number\n}): { top: number; left: number; $width: number; $height: number } {\n  const top = getTop({\n    parentRect,\n    tooltipHeight: tooltipSize.height,\n    vertical,\n    outerMargin,\n  })\n  const left = getLeft({\n    parentRect,\n    tooltipWidth: tooltipSize.width,\n    horizontal,\n    vertical,\n    isIcon,\n    outerMargin,\n  })\n\n  return {\n    top: top + scrollOffset.top,\n    left: left + scrollOffset.left,\n    $width: tooltipSize.width,\n    $height: tooltipSize.height,\n  }\n}\n\nfunction getTop({\n  parentRect,\n  tooltipHeight,\n  vertical,\n  outerMargin,\n}: {\n  parentRect: DOMRect\n  tooltipHeight: number\n  vertical: 'top' | 'middle' | 'bottom'\n  outerMargin: number\n}): number {\n  switch (vertical) {\n    case 'top':\n      return parentRect.top + parentRect.height + outerMargin\n    case 'middle':\n      return parentRect.top + (parentRect.height - tooltipHeight) / 2\n    case 'bottom':\n      return parentRect.top - tooltipHeight - outerMargin\n  }\n}\n\nfunction getLeft({\n  parentRect,\n  tooltipWidth,\n  horizontal,\n  vertical,\n  isIcon,\n  outerMargin,\n}: {\n  parentRect: DOMRect\n  tooltipWidth: number\n  horizontal: 'left' | 'center' | 'right'\n  vertical: 'top' | 'middle' | 'bottom'\n  isIcon: boolean\n  outerMargin: number\n}): number {\n  switch (vertical) {\n    case 'middle':\n      switch (horizontal) {\n        case 'right':\n          return parentRect.left - tooltipWidth - outerMargin\n        default:\n          return parentRect.left + parentRect.width + outerMargin\n      }\n    case 'top':\n    case 'bottom': {\n      const arrowPosition = 29 // length between Balloon edge and center of arrow\n      const iconGap = isIcon ? arrowPosition - parentRect.width / 2 : 0 // to align center of Balloon arrow and icon\n      switch (horizontal) {\n        case 'right':\n          return parentRect.left + parentRect.width - tooltipWidth + iconGap\n        case 'center':\n          return parentRect.left + (parentRect.width - tooltipWidth) / 2\n        case 'left':\n          return parentRect.left - iconGap\n      }\n    }\n  }\n}\n"],"names":[],"mappings":"SAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,UAAU,EACV,MAAM,GAAG,KAAK,EACd,WAAW,GASZ,EAAA;IACC,MAAM,GAAG,GAAG,MAAM,CAAC;QACjB,UAAU;QACV,aAAa,EAAE,WAAW,CAAC,MAAM;QACjC,QAAQ;QACR,WAAW;AACZ,KAAA,CAAC;IACF,MAAM,IAAI,GAAG,OAAO,CAAC;QACnB,UAAU;QACV,YAAY,EAAE,WAAW,CAAC,KAAK;QAC/B,UAAU;QACV,QAAQ;QACR,MAAM;QACN,WAAW;AACZ,KAAA,CAAC;IAEF,OAAO;AACL,QAAA,GAAG,EAAE,GAAG,GAAG,YAAY,CAAC,GAAG;AAC3B,QAAA,IAAI,EAAE,IAAI,GAAG,YAAY,CAAC,IAAI;QAC9B,MAAM,EAAE,WAAW,CAAC,KAAK;QACzB,OAAO,EAAE,WAAW,CAAC,MAAM;KAC5B;AACH;AAEA,SAAS,MAAM,CAAC,EACd,UAAU,EACV,aAAa,EACb,QAAQ,EACR,WAAW,GAMZ,EAAA;IACC,QAAQ,QAAQ;AACd,QAAA,KAAK,KAAK;YACR,OAAO,UAAU,CAAC,GAAG,GAAG,UAAU,CAAC,MAAM,GAAG,WAAW;AACzD,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,UAAU,CAAC,GAAG,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,aAAa,IAAI,CAAC;AACjE,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,UAAU,CAAC,GAAG,GAAG,aAAa,GAAG,WAAW;;AAEzD;AAEA,SAAS,OAAO,CAAC,EACf,UAAU,EACV,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,GAQZ,EAAA;IACC,QAAQ,QAAQ;AACd,QAAA,KAAK,QAAQ;YACX,QAAQ,UAAU;AAChB,gBAAA,KAAK,OAAO;AACV,oBAAA,OAAO,UAAU,CAAC,IAAI,GAAG,YAAY,GAAG,WAAW;AACrD,gBAAA;oBACE,OAAO,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,WAAW;;AAE7D,QAAA,KAAK,KAAK;QACV,KAAK,QAAQ,EAAE;AACb,YAAA,MAAM,aAAa,GAAG,EAAE,CAAA;AACxB,YAAA,MAAM,OAAO,GAAG,MAAM,GAAG,aAAa,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAA;YACjE,QAAQ,UAAU;AAChB,gBAAA,KAAK,OAAO;oBACV,OAAO,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,YAAY,GAAG,OAAO;AACpE,gBAAA,KAAK,QAAQ;AACX,oBAAA,OAAO,UAAU,CAAC,IAAI,GAAG,CAAC,UAAU,CAAC,KAAK,GAAG,YAAY,IAAI,CAAC;AAChE,gBAAA,KAAK,MAAM;AACT,oBAAA,OAAO,UAAU,CAAC,IAAI,GAAG,OAAO;;QAEtC;;AAEJ;;;;"}
+{"version":3,"file":"tooltipHelper.js","sources":["../../../src/components/Tooltip/tooltipHelper.ts"],"sourcesContent":["export function getTooltipRect({\n  parentRect,\n  scrollOffset,\n  tooltipSize,\n  vertical,\n  horizontal,\n  isIcon = false,\n  outerMargin,\n}: {\n  parentRect: DOMRect\n  scrollOffset: { top: number; left: number }\n  tooltipSize: { width: number; height: number }\n  vertical: 'top' | 'middle' | 'bottom'\n  horizontal: 'left' | 'center' | 'right'\n  isIcon: boolean\n  outerMargin: number\n}): { top: number; left: number; $width: number; $height: number } {\n  const top = getTop({\n    parentRect,\n    tooltipHeight: tooltipSize.height,\n    vertical,\n    outerMargin,\n  })\n  const left = getLeft({\n    parentRect,\n    tooltipWidth: tooltipSize.width,\n    horizontal,\n    vertical,\n    isIcon,\n    outerMargin,\n  })\n\n  return {\n    top: top + scrollOffset.top,\n    left: left + scrollOffset.left,\n    $width: tooltipSize.width,\n    $height: tooltipSize.height,\n  }\n}\n\nfunction getTop({\n  parentRect,\n  tooltipHeight,\n  vertical,\n  outerMargin,\n}: {\n  parentRect: DOMRect\n  tooltipHeight: number\n  vertical: 'top' | 'middle' | 'bottom'\n  outerMargin: number\n}): number {\n  switch (vertical) {\n    case 'top':\n      return parentRect.top + parentRect.height + outerMargin\n    case 'middle':\n      return parentRect.top + (parentRect.height - tooltipHeight) / 2\n    case 'bottom':\n      return parentRect.top - tooltipHeight - outerMargin\n  }\n}\n\nconst BALLOON_ARROW_POSITION = 29 // length between Balloon edge and center of arrow\n\nfunction getLeft({\n  parentRect,\n  tooltipWidth,\n  horizontal,\n  vertical,\n  isIcon,\n  outerMargin,\n}: {\n  parentRect: DOMRect\n  tooltipWidth: number\n  horizontal: 'left' | 'center' | 'right'\n  vertical: 'top' | 'middle' | 'bottom'\n  isIcon: boolean\n  outerMargin: number\n}): number {\n  switch (vertical) {\n    case 'middle':\n      switch (horizontal) {\n        case 'right':\n          return parentRect.left - tooltipWidth - outerMargin\n        default:\n          return parentRect.left + parentRect.width + outerMargin\n      }\n    case 'top':\n    case 'bottom': {\n      const iconGap = isIcon ? BALLOON_ARROW_POSITION - parentRect.width / 2 : 0 // to align center of Balloon arrow and icon\n\n      switch (horizontal) {\n        case 'right':\n          return parentRect.left + parentRect.width - tooltipWidth + iconGap\n        case 'center':\n          return parentRect.left + (parentRect.width - tooltipWidth) / 2\n        case 'left':\n          return parentRect.left - iconGap\n      }\n    }\n  }\n}\n"],"names":[],"mappings":"SAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,UAAU,EACV,MAAM,GAAG,KAAK,EACd,WAAW,GASZ,EAAA;IACC,MAAM,GAAG,GAAG,MAAM,CAAC;QACjB,UAAU;QACV,aAAa,EAAE,WAAW,CAAC,MAAM;QACjC,QAAQ;QACR,WAAW;AACZ,KAAA,CAAC;IACF,MAAM,IAAI,GAAG,OAAO,CAAC;QACnB,UAAU;QACV,YAAY,EAAE,WAAW,CAAC,KAAK;QAC/B,UAAU;QACV,QAAQ;QACR,MAAM;QACN,WAAW;AACZ,KAAA,CAAC;IAEF,OAAO;AACL,QAAA,GAAG,EAAE,GAAG,GAAG,YAAY,CAAC,GAAG;AAC3B,QAAA,IAAI,EAAE,IAAI,GAAG,YAAY,CAAC,IAAI;QAC9B,MAAM,EAAE,WAAW,CAAC,KAAK;QACzB,OAAO,EAAE,WAAW,CAAC,MAAM;KAC5B;AACH;AAEA,SAAS,MAAM,CAAC,EACd,UAAU,EACV,aAAa,EACb,QAAQ,EACR,WAAW,GAMZ,EAAA;IACC,QAAQ,QAAQ;AACd,QAAA,KAAK,KAAK;YACR,OAAO,UAAU,CAAC,GAAG,GAAG,UAAU,CAAC,MAAM,GAAG,WAAW;AACzD,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,UAAU,CAAC,GAAG,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,aAAa,IAAI,CAAC;AACjE,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,UAAU,CAAC,GAAG,GAAG,aAAa,GAAG,WAAW;;AAEzD;AAEA,MAAM,sBAAsB,GAAG,EAAE,CAAA;AAEjC,SAAS,OAAO,CAAC,EACf,UAAU,EACV,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,GAQZ,EAAA;IACC,QAAQ,QAAQ;AACd,QAAA,KAAK,QAAQ;YACX,QAAQ,UAAU;AAChB,gBAAA,KAAK,OAAO;AACV,oBAAA,OAAO,UAAU,CAAC,IAAI,GAAG,YAAY,GAAG,WAAW;AACrD,gBAAA;oBACE,OAAO,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,WAAW;;AAE7D,QAAA,KAAK,KAAK;QACV,KAAK,QAAQ,EAAE;AACb,YAAA,MAAM,OAAO,GAAG,MAAM,GAAG,sBAAsB,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAA;YAE1E,QAAQ,UAAU;AAChB,gBAAA,KAAK,OAAO;oBACV,OAAO,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,YAAY,GAAG,OAAO;AACpE,gBAAA,KAAK,QAAQ;AACX,oBAAA,OAAO,UAAU,CAAC,IAAI,GAAG,CAAC,UAAU,CAAC,KAAK,GAAG,YAAY,IAAI,CAAC;AAChE,gBAAA,KAAK,MAAM;AACT,oBAAA,OAAO,UAAU,CAAC,IAAI,GAAG,OAAO;;QAEtC;;AAEJ;;;;"}

package/lib/components/WarekiPicker/WarekiPicker.cjs

@@ -13,14 +13,13 @@ const handleShowWareki = (date, locale) => {
         return null;
     }
     // 和暦を使う
-    const calendarLocale = `${locale}-u-ca-japanese`;
-    return date.toLocaleDateString(calendarLocale, {
+    return date.toLocaleDateString(`${locale}-u-ca-japanese`, {
         dateStyle: 'long',
     });
 };
 const WarekiPicker = (props) => {
     const { locale } = intl_useIntl.useIntl();
-    return jsxRuntime.jsx(components_DatePicker_DatePicker.DatePicker, { ...props, showAlternative: (date) => handleShowWareki(date, locale) });
+    return (jsxRuntime.jsx(components_DatePicker_DatePicker.DatePicker, { ...props, showAlternative: (date) => handleShowWareki(date, locale) }));
 };
 
 exports.WarekiPicker = WarekiPicker;

package/lib/components/WarekiPicker/WarekiPicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"WarekiPicker.cjs","sources":["../../../src/components/WarekiPicker/WarekiPicker.tsx"],"sourcesContent":["import { useIntl } from '../../intl'\nimport { DatePicker } from '../DatePicker'\n\nimport type { ComponentProps, FC } from 'react'\n\ntype Props = Omit<ComponentProps<typeof DatePicker>, 'showAlternative'>\n\nconst handleShowWareki = (date: Date | null, locale: string) => {\n  if (!date) {\n    return null\n  }\n\n  // 和暦を使う\n  const calendarLocale = `${locale}-u-ca-japanese`\n\n  return date.toLocaleDateString(calendarLocale, {\n    dateStyle: 'long',\n  })\n}\n\nexport const WarekiPicker: FC<Props> = (props) => {\n  const { locale } = useIntl()\n\n  return <DatePicker {...props} showAlternative={(date) => handleShowWareki(date, locale)} />\n}\n"],"names":["useIntl","_jsx","DatePicker"],"mappings":";;;;;;;;;;AAOA,MAAM,gBAAgB,GAAG,CAAC,IAAiB,EAAE,MAAc,KAAI;IAC7D,IAAI,CAAC,IAAI,EAAE;AACT,QAAA,OAAO,IAAI;IACb;;AAGA,IAAA,MAAM,cAAc,GAAG,CAAA,EAAG,MAAM,gBAAgB;AAEhD,IAAA,OAAO,IAAI,CAAC,kBAAkB,CAAC,cAAc,EAAE;AAC7C,QAAA,SAAS,EAAE,MAAM;AAClB,KAAA,CAAC;AACJ,CAAC;AAEM,MAAM,YAAY,GAAc,CAAC,KAAK,KAAI;AAC/C,IAAA,MAAM,EAAE,MAAM,EAAE,GAAGA,oBAAO,EAAE;AAE5B,IAAA,OAAOC,eAACC,2CAAU,EAAA,EAAA,GAAK,KAAK,EAAE,eAAe,EAAE,CAAC,IAAI,KAAK,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,GAAI;AAC7F;;;;"}
+{"version":3,"file":"WarekiPicker.cjs","sources":["../../../src/components/WarekiPicker/WarekiPicker.tsx"],"sourcesContent":["import { useIntl } from '../../intl'\nimport { DatePicker } from '../DatePicker'\n\nimport type { ComponentProps, FC } from 'react'\n\ntype Props = Omit<ComponentProps<typeof DatePicker>, 'showAlternative'>\n\nconst handleShowWareki = (date: Date | null, locale: string) => {\n  if (!date) {\n    return null\n  }\n\n  // 和暦を使う\n  return date.toLocaleDateString(`${locale}-u-ca-japanese`, {\n    dateStyle: 'long',\n  })\n}\n\nexport const WarekiPicker: FC<Props> = (props) => {\n  const { locale } = useIntl()\n\n  return (\n    <DatePicker\n      {...props}\n      showAlternative={(date: Date | null) => handleShowWareki(date, locale)}\n    />\n  )\n}\n"],"names":["useIntl","_jsx","DatePicker"],"mappings":";;;;;;;;;;AAOA,MAAM,gBAAgB,GAAG,CAAC,IAAiB,EAAE,MAAc,KAAI;IAC7D,IAAI,CAAC,IAAI,EAAE;AACT,QAAA,OAAO,IAAI;IACb;;AAGA,IAAA,OAAO,IAAI,CAAC,kBAAkB,CAAC,CAAA,EAAG,MAAM,gBAAgB,EAAE;AACxD,QAAA,SAAS,EAAE,MAAM;AAClB,KAAA,CAAC;AACJ,CAAC;AAEM,MAAM,YAAY,GAAc,CAAC,KAAK,KAAI;AAC/C,IAAA,MAAM,EAAE,MAAM,EAAE,GAAGA,oBAAO,EAAE;IAE5B,QACEC,eAACC,2CAAU,EAAA,EAAA,GACL,KAAK,EACT,eAAe,EAAE,CAAC,IAAiB,KAAK,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,EAAA,CACtE;AAEN;;;;"}

package/lib/components/WarekiPicker/WarekiPicker.js

@@ -11,14 +11,13 @@ const handleShowWareki = (date, locale) => {
         return null;
     }
     // 和暦を使う
-    const calendarLocale = `${locale}-u-ca-japanese`;
-    return date.toLocaleDateString(calendarLocale, {
+    return date.toLocaleDateString(`${locale}-u-ca-japanese`, {
         dateStyle: 'long',
     });
 };
 const WarekiPicker = (props) => {
     const { locale } = useIntl();
-    return jsx(DatePicker, { ...props, showAlternative: (date) => handleShowWareki(date, locale) });
+    return (jsx(DatePicker, { ...props, showAlternative: (date) => handleShowWareki(date, locale) }));
 };
 
 export { WarekiPicker };

package/lib/components/WarekiPicker/WarekiPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarekiPicker.js","sources":["../../../src/components/WarekiPicker/WarekiPicker.tsx"],"sourcesContent":["import { useIntl } from '../../intl'\nimport { DatePicker } from '../DatePicker'\n\nimport type { ComponentProps, FC } from 'react'\n\ntype Props = Omit<ComponentProps<typeof DatePicker>, 'showAlternative'>\n\nconst handleShowWareki = (date: Date | null, locale: string) => {\n  if (!date) {\n    return null\n  }\n\n  // 和暦を使う\n  const calendarLocale = `${locale}-u-ca-japanese`\n\n  return date.toLocaleDateString(calendarLocale, {\n    dateStyle: 'long',\n  })\n}\n\nexport const WarekiPicker: FC<Props> = (props) => {\n  const { locale } = useIntl()\n\n  return <DatePicker {...props} showAlternative={(date) => handleShowWareki(date, locale)} />\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;AAOA,MAAM,gBAAgB,GAAG,CAAC,IAAiB,EAAE,MAAc,KAAI;IAC7D,IAAI,CAAC,IAAI,EAAE;AACT,QAAA,OAAO,IAAI;IACb;;AAGA,IAAA,MAAM,cAAc,GAAG,CAAA,EAAG,MAAM,gBAAgB;AAEhD,IAAA,OAAO,IAAI,CAAC,kBAAkB,CAAC,cAAc,EAAE;AAC7C,QAAA,SAAS,EAAE,MAAM;AAClB,KAAA,CAAC;AACJ,CAAC;AAEM,MAAM,YAAY,GAAc,CAAC,KAAK,KAAI;AAC/C,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE;AAE5B,IAAA,OAAOA,IAAC,UAAU,EAAA,EAAA,GAAK,KAAK,EAAE,eAAe,EAAE,CAAC,IAAI,KAAK,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,GAAI;AAC7F;;;;"}
+{"version":3,"file":"WarekiPicker.js","sources":["../../../src/components/WarekiPicker/WarekiPicker.tsx"],"sourcesContent":["import { useIntl } from '../../intl'\nimport { DatePicker } from '../DatePicker'\n\nimport type { ComponentProps, FC } from 'react'\n\ntype Props = Omit<ComponentProps<typeof DatePicker>, 'showAlternative'>\n\nconst handleShowWareki = (date: Date | null, locale: string) => {\n  if (!date) {\n    return null\n  }\n\n  // 和暦を使う\n  return date.toLocaleDateString(`${locale}-u-ca-japanese`, {\n    dateStyle: 'long',\n  })\n}\n\nexport const WarekiPicker: FC<Props> = (props) => {\n  const { locale } = useIntl()\n\n  return (\n    <DatePicker\n      {...props}\n      showAlternative={(date: Date | null) => handleShowWareki(date, locale)}\n    />\n  )\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;AAOA,MAAM,gBAAgB,GAAG,CAAC,IAAiB,EAAE,MAAc,KAAI;IAC7D,IAAI,CAAC,IAAI,EAAE;AACT,QAAA,OAAO,IAAI;IACb;;AAGA,IAAA,OAAO,IAAI,CAAC,kBAAkB,CAAC,CAAA,EAAG,MAAM,gBAAgB,EAAE;AACxD,QAAA,SAAS,EAAE,MAAM;AAClB,KAAA,CAAC;AACJ,CAAC;AAEM,MAAM,YAAY,GAAc,CAAC,KAAK,KAAI;AAC/C,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE;IAE5B,QACEA,IAAC,UAAU,EAAA,EAAA,GACL,KAAK,EACT,eAAe,EAAE,CAAC,IAAiB,KAAK,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,EAAA,CACtE;AAEN;;;;"}

package/lib/configureTwMerge.cjs

@@ -6,12 +6,12 @@ require('./themes/createSpacing.cjs');
 require('./_virtual/index.cjs');
 require('./_virtual/index2.cjs');
 require('./themes/createColor.cjs');
+require('./themes/createTextColor.cjs');
+require('styled-components');
 require('./themes/createShadow/defaultShadow.cjs');
 var themes_createWidth = require('./themes/createWidth.cjs');
 require('./themes/createBackgroundColor.cjs');
 require('./themes/createBorder.cjs');
-require('styled-components');
-require('./themes/createTextColor.cjs');
 
 const DEFAULT_WIDTH_KEYS = Object.keys(themes_createWidth.defaultWidth);
 index.defaultConfig.twMergeConfig = {

package/lib/configureTwMerge.js

@@ -4,12 +4,12 @@ import './themes/createSpacing.js';
 import './_virtual/index.js';
 import './_virtual/index2.js';
 import './themes/createColor.js';
+import './themes/createTextColor.js';
+import 'styled-components';
 import './themes/createShadow/defaultShadow.js';
 import { defaultWidth } from './themes/createWidth.js';
 import './themes/createBackgroundColor.js';
 import './themes/createBorder.js';
-import 'styled-components';
-import './themes/createTextColor.js';
 
 const DEFAULT_WIDTH_KEYS = Object.keys(defaultWidth);
 ie.twMergeConfig = {

package/lib/hooks/useDevice/DeviceProvider.cjs

@@ -7,13 +7,13 @@ require('../../themes/createSpacing.cjs');
 require('../../_virtual/index.cjs');
 require('../../_virtual/index2.cjs');
 require('../../themes/createColor.cjs');
+require('../../themes/createTextColor.cjs');
+require('styled-components');
 require('../../themes/createShadow/defaultShadow.cjs');
 require('../../themes/createWidth.cjs');
 var themes_createBreakpoint = require('../../themes/createBreakpoint.cjs');
 require('../../themes/createBackgroundColor.cjs');
 require('../../themes/createBorder.cjs');
-require('styled-components');
-require('../../themes/createTextColor.cjs');
 var hooks_useDevice_useDevice = require('./useDevice.cjs');
 
 const mediaQuery = {

package/lib/hooks/useDevice/DeviceProvider.js

@@ -5,13 +5,13 @@ import '../../themes/createSpacing.js';
 import '../../_virtual/index.js';
 import '../../_virtual/index2.js';
 import '../../themes/createColor.js';
+import '../../themes/createTextColor.js';
+import 'styled-components';
 import '../../themes/createShadow/defaultShadow.js';
 import '../../themes/createWidth.js';
 import { defaultBreakpoint } from '../../themes/createBreakpoint.js';
 import '../../themes/createBackgroundColor.js';
 import '../../themes/createBorder.js';
-import 'styled-components';
-import '../../themes/createTextColor.js';
 import { DeviceContext } from './useDevice.js';
 
 const mediaQuery = {

package/lib/hooks/useEnvironment/EnvironmentProvider.cjs

@@ -8,12 +8,12 @@ require('../../themes/createSpacing.cjs');
 require('../../_virtual/index.cjs');
 require('../../_virtual/index2.cjs');
 require('../../themes/createColor.cjs');
+require('../../themes/createTextColor.cjs');
+require('styled-components');
 require('../../themes/createShadow/defaultShadow.cjs');
 require('../../themes/createWidth.cjs');
 require('../../themes/createBackgroundColor.cjs');
 require('../../themes/createBorder.cjs');
-require('styled-components');
-require('../../themes/createTextColor.cjs');
 var hooks_useMediaQueries_useMediaQueries = require('../useMediaQueries/useMediaQueries.cjs');
 var hooks_useTheme = require('../useTheme.cjs');
 var hooks_useEnvironment_useEnvironment = require('./useEnvironment.cjs');