smarthr-ui 99.4.0 → 99.5.0

package/lib/components/AppHeader/components/mobile/MenuDialog.cjs

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index = require('./../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.cjs');
 var hooks_useLatest = require('../../../../hooks/useLatest.cjs');
+var hooks_useMergeRefs = require('../../../../hooks/useMergeRefs.cjs');
 require('../../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../../intl/useIntl.cjs');
 require('react-intl');
@@ -92,21 +93,31 @@ const Content = ({ domRef, children, setIsOpen, tenantSelector }) => {
         setIsReleaseNoteSelected,
         setSelectedNavigationGroup,
     });
-    const functions = React.useMemo(() => ({
-        handleDialogClose: () => latest.setIsOpen(false),
-        clearAppLauncher: () => latest.setIsAppLauncherSelected(false),
-        clearReleaseNote: () => latest.setIsReleaseNoteSelected(false),
-        clearNavigationGroup: () => latest.setSelectedNavigationGroup(null),
-    }), [latest]);
-    // HINT: Contentをanimationで非表示にしたい
-    // アニメーションが終われば、CSSTransitionのchildrenはunmountされるため、
-    // unmount時に操作内容のclearを行う
-    React.useEffect(() => () => {
-        functions.clearReleaseNote();
-        functions.clearAppLauncher();
-        functions.clearNavigationGroup();
-    }, [functions]);
-    return (jsxRuntime.jsxs(components_SectioningContent_SectioningContent.Section, { role: "dialog", "aria-modal": "true", className: CLASS_NAMES.wrapper, ref: domRef, children: [jsxRuntime.jsx("div", { className: CLASS_NAMES.header, children: jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { justify: "space-between", align: "center", children: [isAppLauncherSelected ? (jsxRuntime.jsx(components_AppHeader_components_mobile_MenuSubHeading.MenuSubHeading, { title: translated.launcherListText, handleClickBack: functions.clearAppLauncher })) : isReleaseNoteSelected ? (
+    const functions = React.useMemo(() => {
+        const clearAppLauncher = () => latest.setIsAppLauncherSelected(false);
+        const clearReleaseNote = () => latest.setIsReleaseNoteSelected(false);
+        const clearNavigationGroup = () => latest.setSelectedNavigationGroup(null);
+        return {
+            // HINT: Contentをanimationで非表示にしたい
+            // アニメーションが終われば、CSSTransitionのchildrenはunmountされるため、
+            // unmount時に操作内容のclearを行う
+            // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している
+            // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する
+            callbackRef: () => () => {
+                clearReleaseNote();
+                clearAppLauncher();
+                clearNavigationGroup();
+            },
+            clearAppLauncher,
+            clearReleaseNote,
+            clearNavigationGroup,
+            handleDialogClose: () => latest.setIsOpen(false),
+        };
+    }, [latest]);
+    // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している
+    // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する
+    const mergedRef = hooks_useMergeRefs.useMergeRefs(functions.callbackRef, domRef);
+    return (jsxRuntime.jsxs(components_SectioningContent_SectioningContent.Section, { ref: mergedRef, role: "dialog", "aria-modal": "true", className: CLASS_NAMES.wrapper, children: [jsxRuntime.jsx("div", { className: CLASS_NAMES.header, children: jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { justify: "space-between", align: "center", children: [isAppLauncherSelected ? (jsxRuntime.jsx(components_AppHeader_components_mobile_MenuSubHeading.MenuSubHeading, { title: translated.launcherListText, handleClickBack: functions.clearAppLauncher })) : isReleaseNoteSelected ? (
                         // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content
                         jsxRuntime.jsx(components_AppHeader_components_mobile_MenuSubHeading.MenuSubHeading, { title: translated.latestReleaseNotes, handleClickBack: functions.clearReleaseNote })) : selectedNavigationGroup ? (
                         // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content

package/lib/components/AppHeader/components/mobile/MenuDialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuDialog.cjs","sources":["../../../../../src/components/AppHeader/components/mobile/MenuDialog.tsx"],"sourcesContent":["import {\n  type Dispatch,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  type RefObject,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\nimport { CSSTransition } from 'react-transition-group'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../../../hooks/useLatest'\nimport { Localizer, useLocalize } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { FocusTrap } from '../../../Dialog'\nimport { FaXmarkIcon } from '../../../Icon'\nimport { Cluster } from '../../../Layout'\nimport { Scroller } from '../../../Scroller'\nimport { Section } from '../../../SectioningContent'\n\nimport { AppLauncher } from './AppLauncher'\nimport { AppLauncherContext } from './AppLauncherContext'\nimport { MenuSubHeading } from './MenuSubHeading'\nimport { Navigation } from './Navigation'\nimport { NavigationContext } from './NavigationContext'\nimport { ReleaseNote } from './ReleaseNote'\nimport { ReleaseNoteContext } from './ReleaseNoteContext'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'shr-fixed shr-left-0 shr-top-0 shr-flex shr-h-full shr-w-full shr-flex-col shr-bg-white',\n      'shr-translate-opacity shr-opacity-0 shr-duration-150',\n      '[&&.shr-sp-menu-enter-active]:shr-opacity-100',\n      '[&&.shr-sp-menu-enter-done]:shr-opacity-100',\n      '[&&.shr-sp-menu-exit-active]:shr-opacity-0',\n      '[&&.shr-sp-menu-exit-done]:shr-opacity-0',\n    ],\n    header: 'shr-border-b-shorthand shr-sticky shr-top-0 shr-px-0.75 shr-py-0.5',\n    content: 'shr-p-1',\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { wrapper, header, content } = classNameGenerator()\n\n  return {\n    wrapper: wrapper(),\n    header: header(),\n    content: content(),\n  }\n})()\n\ntype Props = PropsWithChildren<{\n  isOpen: boolean\n  setIsOpen: Dispatch<boolean>\n  tenantSelector: ReactNode\n}>\n\nexport const MenuDialog: FC<Props> = ({ isOpen, ...rest }) => {\n  const domRef = useRef<HTMLSelectElement>(null)\n\n  return (\n    <CSSTransition\n      classNames=\"shr-sp-menu\"\n      in={isOpen}\n      timeout={300}\n      unmountOnExit\n      nodeRef={domRef}\n    >\n      <div className=\"shr-fixed shr-z-overlap-base\">\n        <FocusTrap>\n          <Content {...rest} domRef={domRef} />\n        </FocusTrap>\n      </div>\n    </CSSTransition>\n  )\n}\n\nexport const Content: FC<\n  Omit<Props, 'isOpen'> & {\n    domRef: RefObject<HTMLSelectElement>\n  }\n> = ({ domRef, children, setIsOpen, tenantSelector }) => {\n  const { selectedNavigationGroup, setSelectedNavigationGroup } = useContext(NavigationContext)\n  const { isReleaseNoteSelected, setIsReleaseNoteSelected } = useContext(ReleaseNoteContext)\n  const { features, isAppLauncherSelected, setIsAppLauncherSelected } =\n    useContext(AppLauncherContext)\n\n  const translated = useLocalize({\n    launcherListText: {\n      id: 'smarthr-ui/AppHeader/Launcher/listText',\n      defaultText: 'アプリ一覧',\n    },\n    latestReleaseNotes: {\n      id: 'smarthr-ui/AppHeader/MobileHeader/latestReleaseNotes',\n      defaultText: '最新のリリースノート',\n    },\n  })\n\n  const latest = useLatest({\n    setIsOpen,\n    setIsAppLauncherSelected,\n    setIsReleaseNoteSelected,\n    setSelectedNavigationGroup,\n  })\n\n  const functions = useMemo(\n    () => ({\n      handleDialogClose: () => latest.setIsOpen(false),\n      clearAppLauncher: () => latest.setIsAppLauncherSelected(false),\n      clearReleaseNote: () => latest.setIsReleaseNoteSelected(false),\n      clearNavigationGroup: () => latest.setSelectedNavigationGroup(null),\n    }),\n    [latest],\n  )\n\n  // HINT: Contentをanimationで非表示にしたい\n  // アニメーションが終われば、CSSTransitionのchildrenはunmountされるため、\n  // unmount時に操作内容のclearを行う\n  useEffect(\n    () => () => {\n      functions.clearReleaseNote()\n      functions.clearAppLauncher()\n      functions.clearNavigationGroup()\n    },\n    [functions],\n  )\n\n  return (\n    <Section role=\"dialog\" aria-modal=\"true\" className={CLASS_NAMES.wrapper} ref={domRef}>\n      <div className={CLASS_NAMES.header}>\n        <Cluster justify=\"space-between\" align=\"center\">\n          {isAppLauncherSelected ? (\n            <MenuSubHeading\n              title={translated.launcherListText}\n              handleClickBack={functions.clearAppLauncher}\n            />\n          ) : isReleaseNoteSelected ? (\n            // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n            <MenuSubHeading\n              title={translated.latestReleaseNotes}\n              handleClickBack={functions.clearReleaseNote}\n            />\n          ) : selectedNavigationGroup ? (\n            // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n            <MenuSubHeading\n              title={selectedNavigationGroup.children}\n              handleClickBack={functions.clearNavigationGroup}\n            />\n          ) : (\n            <div>{tenantSelector}</div>\n          )}\n\n          <Button variant=\"secondary\" size=\"S\" onClick={functions.handleDialogClose}>\n            <FaXmarkIcon\n              alt={\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/MobileHeader/closeMenu\"\n                  defaultText=\"メニューを閉じる\"\n                />\n              }\n            />\n          </Button>\n        </Cluster>\n      </div>\n\n      {isAppLauncherSelected && features && features.length > 0 ? (\n        <AppLauncher features={features} />\n      ) : (\n        <Scroller direction=\"vertical\" className={CLASS_NAMES.content}>\n          {isReleaseNoteSelected ? (\n            <ReleaseNote />\n          ) : selectedNavigationGroup ? (\n            <Navigation\n              navigations={selectedNavigationGroup.childNavigations}\n              handleClickNavigation={functions.handleDialogClose}\n            />\n          ) : (\n            children\n          )}\n        </Scroller>\n      )}\n    </Section>\n  )\n}\n"],"names":["tv","useRef","_jsx","FocusTrap","useContext","NavigationContext","ReleaseNoteContext","AppLauncherContext","useLocalize","useLatest","useMemo","useEffect","_jsxs","Section","Cluster","MenuSubHeading","Button","FaXmarkIcon","Localizer","AppLauncher","Scroller","ReleaseNote","Navigation"],"mappings":"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"}
+{"version":3,"file":"MenuDialog.cjs","sources":["../../../../../src/components/AppHeader/components/mobile/MenuDialog.tsx"],"sourcesContent":["import {\n  type Dispatch,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  type RefObject,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react'\nimport { CSSTransition } from 'react-transition-group'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../../../hooks/useLatest'\nimport { useMergeRefs } from '../../../../hooks/useMergeRefs'\nimport { Localizer, useLocalize } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { FocusTrap } from '../../../Dialog'\nimport { FaXmarkIcon } from '../../../Icon'\nimport { Cluster } from '../../../Layout'\nimport { Scroller } from '../../../Scroller'\nimport { Section } from '../../../SectioningContent'\n\nimport { AppLauncher } from './AppLauncher'\nimport { AppLauncherContext } from './AppLauncherContext'\nimport { MenuSubHeading } from './MenuSubHeading'\nimport { Navigation } from './Navigation'\nimport { NavigationContext } from './NavigationContext'\nimport { ReleaseNote } from './ReleaseNote'\nimport { ReleaseNoteContext } from './ReleaseNoteContext'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'shr-fixed shr-left-0 shr-top-0 shr-flex shr-h-full shr-w-full shr-flex-col shr-bg-white',\n      'shr-translate-opacity shr-opacity-0 shr-duration-150',\n      '[&&.shr-sp-menu-enter-active]:shr-opacity-100',\n      '[&&.shr-sp-menu-enter-done]:shr-opacity-100',\n      '[&&.shr-sp-menu-exit-active]:shr-opacity-0',\n      '[&&.shr-sp-menu-exit-done]:shr-opacity-0',\n    ],\n    header: 'shr-border-b-shorthand shr-sticky shr-top-0 shr-px-0.75 shr-py-0.5',\n    content: 'shr-p-1',\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { wrapper, header, content } = classNameGenerator()\n\n  return {\n    wrapper: wrapper(),\n    header: header(),\n    content: content(),\n  }\n})()\n\ntype Props = PropsWithChildren<{\n  isOpen: boolean\n  setIsOpen: Dispatch<boolean>\n  tenantSelector: ReactNode\n}>\n\nexport const MenuDialog: FC<Props> = ({ isOpen, ...rest }) => {\n  const domRef = useRef<HTMLSelectElement>(null)\n\n  return (\n    <CSSTransition\n      classNames=\"shr-sp-menu\"\n      in={isOpen}\n      timeout={300}\n      unmountOnExit\n      nodeRef={domRef}\n    >\n      <div className=\"shr-fixed shr-z-overlap-base\">\n        <FocusTrap>\n          <Content {...rest} domRef={domRef} />\n        </FocusTrap>\n      </div>\n    </CSSTransition>\n  )\n}\n\nexport const Content: FC<\n  Omit<Props, 'isOpen'> & {\n    domRef: RefObject<HTMLSelectElement>\n  }\n> = ({ domRef, children, setIsOpen, tenantSelector }) => {\n  const { selectedNavigationGroup, setSelectedNavigationGroup } = useContext(NavigationContext)\n  const { isReleaseNoteSelected, setIsReleaseNoteSelected } = useContext(ReleaseNoteContext)\n  const { features, isAppLauncherSelected, setIsAppLauncherSelected } =\n    useContext(AppLauncherContext)\n\n  const translated = useLocalize({\n    launcherListText: {\n      id: 'smarthr-ui/AppHeader/Launcher/listText',\n      defaultText: 'アプリ一覧',\n    },\n    latestReleaseNotes: {\n      id: 'smarthr-ui/AppHeader/MobileHeader/latestReleaseNotes',\n      defaultText: '最新のリリースノート',\n    },\n  })\n\n  const latest = useLatest({\n    setIsOpen,\n    setIsAppLauncherSelected,\n    setIsReleaseNoteSelected,\n    setSelectedNavigationGroup,\n  })\n\n  const functions = useMemo(() => {\n    const clearAppLauncher = () => latest.setIsAppLauncherSelected(false)\n    const clearReleaseNote = () => latest.setIsReleaseNoteSelected(false)\n    const clearNavigationGroup = () => latest.setSelectedNavigationGroup(null)\n\n    return {\n      // HINT: Contentをanimationで非表示にしたい\n      // アニメーションが終われば、CSSTransitionのchildrenはunmountされるため、\n      // unmount時に操作内容のclearを行う\n      // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している\n      // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する\n      callbackRef: () => () => {\n        clearReleaseNote()\n        clearAppLauncher()\n        clearNavigationGroup()\n      },\n      clearAppLauncher,\n      clearReleaseNote,\n      clearNavigationGroup,\n      handleDialogClose: () => latest.setIsOpen(false),\n    }\n  }, [latest])\n\n  // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している\n  // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する\n  const mergedRef = useMergeRefs(functions.callbackRef, domRef)\n\n  return (\n    <Section ref={mergedRef} role=\"dialog\" aria-modal=\"true\" className={CLASS_NAMES.wrapper}>\n      <div className={CLASS_NAMES.header}>\n        <Cluster justify=\"space-between\" align=\"center\">\n          {isAppLauncherSelected ? (\n            <MenuSubHeading\n              title={translated.launcherListText}\n              handleClickBack={functions.clearAppLauncher}\n            />\n          ) : isReleaseNoteSelected ? (\n            // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n            <MenuSubHeading\n              title={translated.latestReleaseNotes}\n              handleClickBack={functions.clearReleaseNote}\n            />\n          ) : selectedNavigationGroup ? (\n            // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n            <MenuSubHeading\n              title={selectedNavigationGroup.children}\n              handleClickBack={functions.clearNavigationGroup}\n            />\n          ) : (\n            <div>{tenantSelector}</div>\n          )}\n\n          <Button variant=\"secondary\" size=\"S\" onClick={functions.handleDialogClose}>\n            <FaXmarkIcon\n              alt={\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/MobileHeader/closeMenu\"\n                  defaultText=\"メニューを閉じる\"\n                />\n              }\n            />\n          </Button>\n        </Cluster>\n      </div>\n\n      {isAppLauncherSelected && features && features.length > 0 ? (\n        <AppLauncher features={features} />\n      ) : (\n        <Scroller direction=\"vertical\" className={CLASS_NAMES.content}>\n          {isReleaseNoteSelected ? (\n            <ReleaseNote />\n          ) : selectedNavigationGroup ? (\n            <Navigation\n              navigations={selectedNavigationGroup.childNavigations}\n              handleClickNavigation={functions.handleDialogClose}\n            />\n          ) : (\n            children\n          )}\n        </Scroller>\n      )}\n    </Section>\n  )\n}\n"],"names":["tv","useRef","_jsx","FocusTrap","useContext","NavigationContext","ReleaseNoteContext","AppLauncherContext","useLocalize","useLatest","useMemo","useMergeRefs","_jsxs","Section","Cluster","MenuSubHeading","Button","FaXmarkIcon","Localizer","AppLauncher","Scroller","ReleaseNote","Navigation"],"mappings":"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"}

package/lib/components/AppHeader/components/mobile/MenuDialog.js

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useContext, useMemo, useEffect, useRef } from 'react';
+import { useContext, useMemo, useRef } from 'react';
 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.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 import { useLatest } from '../../../../hooks/useLatest.js';
+import { useMergeRefs } from '../../../../hooks/useMergeRefs.js';
 import '../../../../intl/IntlProvider.js';
 import { useLocalize } from '../../../../intl/useIntl.js';
 import 'react-intl';
@@ -90,21 +91,31 @@ const Content = ({ domRef, children, setIsOpen, tenantSelector }) => {
         setIsReleaseNoteSelected,
         setSelectedNavigationGroup,
     });
-    const functions = useMemo(() => ({
-        handleDialogClose: () => latest.setIsOpen(false),
-        clearAppLauncher: () => latest.setIsAppLauncherSelected(false),
-        clearReleaseNote: () => latest.setIsReleaseNoteSelected(false),
-        clearNavigationGroup: () => latest.setSelectedNavigationGroup(null),
-    }), [latest]);
-    // HINT: Contentをanimationで非表示にしたい
-    // アニメーションが終われば、CSSTransitionのchildrenはunmountされるため、
-    // unmount時に操作内容のclearを行う
-    useEffect(() => () => {
-        functions.clearReleaseNote();
-        functions.clearAppLauncher();
-        functions.clearNavigationGroup();
-    }, [functions]);
-    return (jsxs(Section, { role: "dialog", "aria-modal": "true", className: CLASS_NAMES.wrapper, ref: domRef, children: [jsx("div", { className: CLASS_NAMES.header, children: jsxs(Cluster, { justify: "space-between", align: "center", children: [isAppLauncherSelected ? (jsx(MenuSubHeading, { title: translated.launcherListText, handleClickBack: functions.clearAppLauncher })) : isReleaseNoteSelected ? (
+    const functions = useMemo(() => {
+        const clearAppLauncher = () => latest.setIsAppLauncherSelected(false);
+        const clearReleaseNote = () => latest.setIsReleaseNoteSelected(false);
+        const clearNavigationGroup = () => latest.setSelectedNavigationGroup(null);
+        return {
+            // HINT: Contentをanimationで非表示にしたい
+            // アニメーションが終われば、CSSTransitionのchildrenはunmountされるため、
+            // unmount時に操作内容のclearを行う
+            // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している
+            // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する
+            callbackRef: () => () => {
+                clearReleaseNote();
+                clearAppLauncher();
+                clearNavigationGroup();
+            },
+            clearAppLauncher,
+            clearReleaseNote,
+            clearNavigationGroup,
+            handleDialogClose: () => latest.setIsOpen(false),
+        };
+    }, [latest]);
+    // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している
+    // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する
+    const mergedRef = useMergeRefs(functions.callbackRef, domRef);
+    return (jsxs(Section, { ref: mergedRef, role: "dialog", "aria-modal": "true", className: CLASS_NAMES.wrapper, children: [jsx("div", { className: CLASS_NAMES.header, children: jsxs(Cluster, { justify: "space-between", align: "center", children: [isAppLauncherSelected ? (jsx(MenuSubHeading, { title: translated.launcherListText, handleClickBack: functions.clearAppLauncher })) : isReleaseNoteSelected ? (
                         // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content
                         jsx(MenuSubHeading, { title: translated.latestReleaseNotes, handleClickBack: functions.clearReleaseNote })) : selectedNavigationGroup ? (
                         // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content

package/lib/components/AppHeader/components/mobile/MenuDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuDialog.js","sources":["../../../../../src/components/AppHeader/components/mobile/MenuDialog.tsx"],"sourcesContent":["import {\n  type Dispatch,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  type RefObject,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\nimport { CSSTransition } from 'react-transition-group'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../../../hooks/useLatest'\nimport { Localizer, useLocalize } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { FocusTrap } from '../../../Dialog'\nimport { FaXmarkIcon } from '../../../Icon'\nimport { Cluster } from '../../../Layout'\nimport { Scroller } from '../../../Scroller'\nimport { Section } from '../../../SectioningContent'\n\nimport { AppLauncher } from './AppLauncher'\nimport { AppLauncherContext } from './AppLauncherContext'\nimport { MenuSubHeading } from './MenuSubHeading'\nimport { Navigation } from './Navigation'\nimport { NavigationContext } from './NavigationContext'\nimport { ReleaseNote } from './ReleaseNote'\nimport { ReleaseNoteContext } from './ReleaseNoteContext'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'shr-fixed shr-left-0 shr-top-0 shr-flex shr-h-full shr-w-full shr-flex-col shr-bg-white',\n      'shr-translate-opacity shr-opacity-0 shr-duration-150',\n      '[&&.shr-sp-menu-enter-active]:shr-opacity-100',\n      '[&&.shr-sp-menu-enter-done]:shr-opacity-100',\n      '[&&.shr-sp-menu-exit-active]:shr-opacity-0',\n      '[&&.shr-sp-menu-exit-done]:shr-opacity-0',\n    ],\n    header: 'shr-border-b-shorthand shr-sticky shr-top-0 shr-px-0.75 shr-py-0.5',\n    content: 'shr-p-1',\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { wrapper, header, content } = classNameGenerator()\n\n  return {\n    wrapper: wrapper(),\n    header: header(),\n    content: content(),\n  }\n})()\n\ntype Props = PropsWithChildren<{\n  isOpen: boolean\n  setIsOpen: Dispatch<boolean>\n  tenantSelector: ReactNode\n}>\n\nexport const MenuDialog: FC<Props> = ({ isOpen, ...rest }) => {\n  const domRef = useRef<HTMLSelectElement>(null)\n\n  return (\n    <CSSTransition\n      classNames=\"shr-sp-menu\"\n      in={isOpen}\n      timeout={300}\n      unmountOnExit\n      nodeRef={domRef}\n    >\n      <div className=\"shr-fixed shr-z-overlap-base\">\n        <FocusTrap>\n          <Content {...rest} domRef={domRef} />\n        </FocusTrap>\n      </div>\n    </CSSTransition>\n  )\n}\n\nexport const Content: FC<\n  Omit<Props, 'isOpen'> & {\n    domRef: RefObject<HTMLSelectElement>\n  }\n> = ({ domRef, children, setIsOpen, tenantSelector }) => {\n  const { selectedNavigationGroup, setSelectedNavigationGroup } = useContext(NavigationContext)\n  const { isReleaseNoteSelected, setIsReleaseNoteSelected } = useContext(ReleaseNoteContext)\n  const { features, isAppLauncherSelected, setIsAppLauncherSelected } =\n    useContext(AppLauncherContext)\n\n  const translated = useLocalize({\n    launcherListText: {\n      id: 'smarthr-ui/AppHeader/Launcher/listText',\n      defaultText: 'アプリ一覧',\n    },\n    latestReleaseNotes: {\n      id: 'smarthr-ui/AppHeader/MobileHeader/latestReleaseNotes',\n      defaultText: '最新のリリースノート',\n    },\n  })\n\n  const latest = useLatest({\n    setIsOpen,\n    setIsAppLauncherSelected,\n    setIsReleaseNoteSelected,\n    setSelectedNavigationGroup,\n  })\n\n  const functions = useMemo(\n    () => ({\n      handleDialogClose: () => latest.setIsOpen(false),\n      clearAppLauncher: () => latest.setIsAppLauncherSelected(false),\n      clearReleaseNote: () => latest.setIsReleaseNoteSelected(false),\n      clearNavigationGroup: () => latest.setSelectedNavigationGroup(null),\n    }),\n    [latest],\n  )\n\n  // HINT: Contentをanimationで非表示にしたい\n  // アニメーションが終われば、CSSTransitionのchildrenはunmountされるため、\n  // unmount時に操作内容のclearを行う\n  useEffect(\n    () => () => {\n      functions.clearReleaseNote()\n      functions.clearAppLauncher()\n      functions.clearNavigationGroup()\n    },\n    [functions],\n  )\n\n  return (\n    <Section role=\"dialog\" aria-modal=\"true\" className={CLASS_NAMES.wrapper} ref={domRef}>\n      <div className={CLASS_NAMES.header}>\n        <Cluster justify=\"space-between\" align=\"center\">\n          {isAppLauncherSelected ? (\n            <MenuSubHeading\n              title={translated.launcherListText}\n              handleClickBack={functions.clearAppLauncher}\n            />\n          ) : isReleaseNoteSelected ? (\n            // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n            <MenuSubHeading\n              title={translated.latestReleaseNotes}\n              handleClickBack={functions.clearReleaseNote}\n            />\n          ) : selectedNavigationGroup ? (\n            // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n            <MenuSubHeading\n              title={selectedNavigationGroup.children}\n              handleClickBack={functions.clearNavigationGroup}\n            />\n          ) : (\n            <div>{tenantSelector}</div>\n          )}\n\n          <Button variant=\"secondary\" size=\"S\" onClick={functions.handleDialogClose}>\n            <FaXmarkIcon\n              alt={\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/MobileHeader/closeMenu\"\n                  defaultText=\"メニューを閉じる\"\n                />\n              }\n            />\n          </Button>\n        </Cluster>\n      </div>\n\n      {isAppLauncherSelected && features && features.length > 0 ? (\n        <AppLauncher features={features} />\n      ) : (\n        <Scroller direction=\"vertical\" className={CLASS_NAMES.content}>\n          {isReleaseNoteSelected ? (\n            <ReleaseNote />\n          ) : selectedNavigationGroup ? (\n            <Navigation\n              navigations={selectedNavigationGroup.childNavigations}\n              handleClickNavigation={functions.handleDialogClose}\n            />\n          ) : (\n            children\n          )}\n        </Scroller>\n      )}\n    </Section>\n  )\n}\n"],"names":["tv","_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"MenuDialog.js","sources":["../../../../../src/components/AppHeader/components/mobile/MenuDialog.tsx"],"sourcesContent":["import {\n  type Dispatch,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  type RefObject,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react'\nimport { CSSTransition } from 'react-transition-group'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../../../hooks/useLatest'\nimport { useMergeRefs } from '../../../../hooks/useMergeRefs'\nimport { Localizer, useLocalize } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { FocusTrap } from '../../../Dialog'\nimport { FaXmarkIcon } from '../../../Icon'\nimport { Cluster } from '../../../Layout'\nimport { Scroller } from '../../../Scroller'\nimport { Section } from '../../../SectioningContent'\n\nimport { AppLauncher } from './AppLauncher'\nimport { AppLauncherContext } from './AppLauncherContext'\nimport { MenuSubHeading } from './MenuSubHeading'\nimport { Navigation } from './Navigation'\nimport { NavigationContext } from './NavigationContext'\nimport { ReleaseNote } from './ReleaseNote'\nimport { ReleaseNoteContext } from './ReleaseNoteContext'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'shr-fixed shr-left-0 shr-top-0 shr-flex shr-h-full shr-w-full shr-flex-col shr-bg-white',\n      'shr-translate-opacity shr-opacity-0 shr-duration-150',\n      '[&&.shr-sp-menu-enter-active]:shr-opacity-100',\n      '[&&.shr-sp-menu-enter-done]:shr-opacity-100',\n      '[&&.shr-sp-menu-exit-active]:shr-opacity-0',\n      '[&&.shr-sp-menu-exit-done]:shr-opacity-0',\n    ],\n    header: 'shr-border-b-shorthand shr-sticky shr-top-0 shr-px-0.75 shr-py-0.5',\n    content: 'shr-p-1',\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { wrapper, header, content } = classNameGenerator()\n\n  return {\n    wrapper: wrapper(),\n    header: header(),\n    content: content(),\n  }\n})()\n\ntype Props = PropsWithChildren<{\n  isOpen: boolean\n  setIsOpen: Dispatch<boolean>\n  tenantSelector: ReactNode\n}>\n\nexport const MenuDialog: FC<Props> = ({ isOpen, ...rest }) => {\n  const domRef = useRef<HTMLSelectElement>(null)\n\n  return (\n    <CSSTransition\n      classNames=\"shr-sp-menu\"\n      in={isOpen}\n      timeout={300}\n      unmountOnExit\n      nodeRef={domRef}\n    >\n      <div className=\"shr-fixed shr-z-overlap-base\">\n        <FocusTrap>\n          <Content {...rest} domRef={domRef} />\n        </FocusTrap>\n      </div>\n    </CSSTransition>\n  )\n}\n\nexport const Content: FC<\n  Omit<Props, 'isOpen'> & {\n    domRef: RefObject<HTMLSelectElement>\n  }\n> = ({ domRef, children, setIsOpen, tenantSelector }) => {\n  const { selectedNavigationGroup, setSelectedNavigationGroup } = useContext(NavigationContext)\n  const { isReleaseNoteSelected, setIsReleaseNoteSelected } = useContext(ReleaseNoteContext)\n  const { features, isAppLauncherSelected, setIsAppLauncherSelected } =\n    useContext(AppLauncherContext)\n\n  const translated = useLocalize({\n    launcherListText: {\n      id: 'smarthr-ui/AppHeader/Launcher/listText',\n      defaultText: 'アプリ一覧',\n    },\n    latestReleaseNotes: {\n      id: 'smarthr-ui/AppHeader/MobileHeader/latestReleaseNotes',\n      defaultText: '最新のリリースノート',\n    },\n  })\n\n  const latest = useLatest({\n    setIsOpen,\n    setIsAppLauncherSelected,\n    setIsReleaseNoteSelected,\n    setSelectedNavigationGroup,\n  })\n\n  const functions = useMemo(() => {\n    const clearAppLauncher = () => latest.setIsAppLauncherSelected(false)\n    const clearReleaseNote = () => latest.setIsReleaseNoteSelected(false)\n    const clearNavigationGroup = () => latest.setSelectedNavigationGroup(null)\n\n    return {\n      // HINT: Contentをanimationで非表示にしたい\n      // アニメーションが終われば、CSSTransitionのchildrenはunmountされるため、\n      // unmount時に操作内容のclearを行う\n      // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している\n      // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する\n      callbackRef: () => () => {\n        clearReleaseNote()\n        clearAppLauncher()\n        clearNavigationGroup()\n      },\n      clearAppLauncher,\n      clearReleaseNote,\n      clearNavigationGroup,\n      handleDialogClose: () => latest.setIsOpen(false),\n    }\n  }, [latest])\n\n  // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している\n  // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する\n  const mergedRef = useMergeRefs(functions.callbackRef, domRef)\n\n  return (\n    <Section ref={mergedRef} role=\"dialog\" aria-modal=\"true\" className={CLASS_NAMES.wrapper}>\n      <div className={CLASS_NAMES.header}>\n        <Cluster justify=\"space-between\" align=\"center\">\n          {isAppLauncherSelected ? (\n            <MenuSubHeading\n              title={translated.launcherListText}\n              handleClickBack={functions.clearAppLauncher}\n            />\n          ) : isReleaseNoteSelected ? (\n            // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n            <MenuSubHeading\n              title={translated.latestReleaseNotes}\n              handleClickBack={functions.clearReleaseNote}\n            />\n          ) : selectedNavigationGroup ? (\n            // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n            <MenuSubHeading\n              title={selectedNavigationGroup.children}\n              handleClickBack={functions.clearNavigationGroup}\n            />\n          ) : (\n            <div>{tenantSelector}</div>\n          )}\n\n          <Button variant=\"secondary\" size=\"S\" onClick={functions.handleDialogClose}>\n            <FaXmarkIcon\n              alt={\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/MobileHeader/closeMenu\"\n                  defaultText=\"メニューを閉じる\"\n                />\n              }\n            />\n          </Button>\n        </Cluster>\n      </div>\n\n      {isAppLauncherSelected && features && features.length > 0 ? (\n        <AppLauncher features={features} />\n      ) : (\n        <Scroller direction=\"vertical\" className={CLASS_NAMES.content}>\n          {isReleaseNoteSelected ? (\n            <ReleaseNote />\n          ) : selectedNavigationGroup ? (\n            <Navigation\n              navigations={selectedNavigationGroup.childNavigations}\n              handleClickNavigation={functions.handleDialogClose}\n            />\n          ) : (\n            children\n          )}\n        </Scroller>\n      )}\n    </Section>\n  )\n}\n"],"names":["tv","_jsx","_jsxs"],"mappings":"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"}

package/lib/components/Calendar/YearPicker.cjs

@@ -35,10 +35,17 @@ const CLASS_NAMES = (() => {
         yearWrapper: yearWrapper(),
     };
 })();
+const FOCUS_CALLBACK_REF = (node) => {
+    if (node) {
+        // HINT: 現在の年に一度focusを当てることでtab移動をしやすくする
+        // focusを当てたままでは違和感があるため、blurで解除している
+        node.focus();
+        node.blur();
+    }
+};
 const YearPicker = ({ isDisplayed, ...rest }) => isDisplayed ? jsxRuntime.jsx(ActualYearPicker, { ...rest }) : null;
 const ActualYearPicker = ({ selectedYear, fromYear, toYear, handleSelectYear, id, ...rest }) => {
-    const focusingRef = React.useRef(null);
-    const thisYear = React.useMemo(() => new Date().getFullYear(), []);
+    const [thisYear] = React.useState(() => new Date().getFullYear());
     const yearArray = React.useMemo(() => {
         const length = Math.max(Math.min(toYear, 9999) - fromYear + 1, 0);
         const result = [];
@@ -47,25 +54,17 @@ const ActualYearPicker = ({ selectedYear, fromYear, toYear, handleSelectYear, id
         }
         return result;
     }, [toYear, fromYear]);
-    React.useEffect(() => {
-        if (focusingRef.current) {
-            // HINT: 現在の年に一度focusを当てることでtab移動をしやすくする
-            // focusを当てたままでは違和感があるため、blurで解除している
-            focusingRef.current.focus();
-            focusingRef.current.blur();
-        }
-    }, []);
-    return (jsxRuntime.jsx("div", { ...rest, id: id, className: CLASS_NAMES.overlay, children: jsxRuntime.jsx(components_Scroller_Scroller.Scroller, { className: CLASS_NAMES.container, children: yearArray.map((year) => (jsxRuntime.jsx(YearButton, { year: year, thisYear: thisYear, selected: selectedYear === year, focusingRef: focusingRef, className: CLASS_NAMES.yearButton, childrenStyle: CLASS_NAMES.yearWrapper, handleClick: handleSelectYear }, year))) }) }));
+    return (jsxRuntime.jsx("div", { ...rest, id: id, className: CLASS_NAMES.overlay, children: jsxRuntime.jsx(components_Scroller_Scroller.Scroller, { className: CLASS_NAMES.container, children: yearArray.map((year) => (jsxRuntime.jsx(YearButton, { year: year, thisYear: thisYear, selected: selectedYear === year, handleClick: handleSelectYear }, year))) }) }));
 };
-const YearButton = React.memo(({ year, thisYear, selected, focusingRef, handleClick, className, childrenStyle }) => {
+const YearButton = React.memo(({ year, thisYear, selected, handleClick }) => {
     const { localize } = intl_useIntl.useIntl();
     const isThisYear = thisYear === year;
-    return (jsxRuntime.jsx(components_Button_UnstyledButton.UnstyledButton, { ref: isThisYear ? focusingRef : null, value: year, "aria-pressed": selected, onClick: handleClick, className: className, "data-this-year": isThisYear, "aria-label": isThisYear
+    return (jsxRuntime.jsx(components_Button_UnstyledButton.UnstyledButton, { ref: isThisYear ? FOCUS_CALLBACK_REF : null, value: year, "aria-pressed": selected, onClick: handleClick, className: CLASS_NAMES.yearButton, "data-this-year": isThisYear, "aria-label": isThisYear
             ? localize({
                 id: 'smarthr-ui/Calendar/currentYear',
                 defaultText: '現在の年',
             })
-            : undefined, children: jsxRuntime.jsx("span", { className: childrenStyle, children: year }) }));
+            : undefined, children: jsxRuntime.jsx("span", { className: CLASS_NAMES.yearWrapper, children: year }) }));
 });
 
 exports.YearPicker = YearPicker;

package/lib/components/Calendar/YearPicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"YearPicker.cjs","sources":["../../../src/components/Calendar/YearPicker.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type FC,\n  type MouseEvent,\n  type RefObject,\n  memo,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../intl'\nimport { UnstyledButton } from '../Button'\nimport { Scroller } from '../Scroller'\n\ntype BaseProps = {\n  /** 選択された年 */\n  selectedYear?: number\n  /** 選択可能な開始年 */\n  fromYear: number\n  /** 選択可能な終了年 */\n  toYear: number\n  /** トリガのセレクトイベントを処理するハンドラ */\n  handleSelectYear: (e: MouseEvent<HTMLButtonElement>) => void\n  /** 表示フラグ */\n  isDisplayed: boolean\n  /** HTMLのid属性 */\n  id: string\n}\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\ntype ActualProps = Omit<Props, 'isDisplayed'>\n\nconst classNameGenerator = tv({\n  slots: {\n    overlay: 'smarthr-ui-YearPicker shr-absolute shr-inset-0 shr-bg-white',\n    container:\n      'shr-box-border shr-flex shr-h-full shr-w-full shr-flex-wrap shr-items-start shr-px-0.25 shr-py-0.5',\n    yearButton:\n      'smarthr-ui-YearPicker-selectYear shr-group shr-flex shr-w-1/4 shr-items-center shr-justify-center shr-px-0 shr-py-0.5 shr-leading-none',\n    yearWrapper: [\n      'shr-box-border shr-inline-block shr-rounded-full shr-px-0.75 shr-py-0.5 shr-text-base shr-leading-none group-hover:shr-bg-base-grey group-hover:shr-text-black',\n      '[[data-this-year=\"true\"]>&]:shr-border-shorthand',\n      '[[aria-pressed=\"true\"]>&]:shr-bg-main [[aria-pressed=\"true\"]>&]:shr-text-white',\n    ],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { overlay, container, yearButton, yearWrapper } = classNameGenerator()\n\n  return {\n    overlay: overlay(),\n    container: container(),\n    yearButton: yearButton(),\n    yearWrapper: yearWrapper(),\n  }\n})()\n\nexport const YearPicker: FC<Props> = ({ isDisplayed, ...rest }) =>\n  isDisplayed ? <ActualYearPicker {...rest} /> : null\n\nconst ActualYearPicker: FC<ActualProps> = ({\n  selectedYear,\n  fromYear,\n  toYear,\n  handleSelectYear,\n  id,\n  ...rest\n}) => {\n  const focusingRef = useRef<HTMLButtonElement>(null)\n\n  const thisYear = useMemo(() => new Date().getFullYear(), [])\n  const yearArray = useMemo(() => {\n    const length = Math.max(Math.min(toYear, 9999) - fromYear + 1, 0)\n    const result: number[] = []\n\n    for (let i = 0; i < length; i++) {\n      result[i] = fromYear + i\n    }\n\n    return result\n  }, [toYear, fromYear])\n\n  useEffect(() => {\n    if (focusingRef.current) {\n      // HINT: 現在の年に一度focusを当てることでtab移動をしやすくする\n      // focusを当てたままでは違和感があるため、blurで解除している\n      focusingRef.current.focus()\n      focusingRef.current.blur()\n    }\n  }, [])\n\n  return (\n    <div {...rest} id={id} className={CLASS_NAMES.overlay}>\n      <Scroller className={CLASS_NAMES.container}>\n        {yearArray.map((year) => (\n          <YearButton\n            key={year}\n            year={year}\n            thisYear={thisYear}\n            selected={selectedYear === year}\n            focusingRef={focusingRef}\n            className={CLASS_NAMES.yearButton}\n            childrenStyle={CLASS_NAMES.yearWrapper}\n            handleClick={handleSelectYear}\n          />\n        ))}\n      </Scroller>\n    </div>\n  )\n}\n\nconst YearButton = memo<{\n  year: number\n  thisYear: number\n  selected: boolean\n  focusingRef: RefObject<HTMLButtonElement>\n  className: string\n  childrenStyle: string\n  handleClick: (e: MouseEvent<HTMLButtonElement>) => void\n}>(({ year, thisYear, selected, focusingRef, handleClick, className, childrenStyle }) => {\n  const { localize } = useIntl()\n  const isThisYear = thisYear === year\n\n  return (\n    <UnstyledButton\n      ref={isThisYear ? focusingRef : null}\n      value={year}\n      aria-pressed={selected}\n      onClick={handleClick}\n      className={className}\n      data-this-year={isThisYear}\n      aria-label={\n        isThisYear\n          ? localize({\n              id: 'smarthr-ui/Calendar/currentYear',\n              defaultText: '現在の年',\n            })\n          : undefined\n      }\n    >\n      <span className={childrenStyle}>{year}</span>\n    </UnstyledButton>\n  )\n})\n"],"names":["tv","_jsx","useRef","useMemo","useEffect","Scroller","memo","useIntl","UnstyledButton"],"mappings":"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"}
+{"version":3,"file":"YearPicker.cjs","sources":["../../../src/components/Calendar/YearPicker.tsx"],"sourcesContent":["import { type ComponentProps, type FC, type MouseEvent, memo, useMemo, useState } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../intl'\nimport { UnstyledButton } from '../Button'\nimport { Scroller } from '../Scroller'\n\ntype BaseProps = {\n  /** 選択された年 */\n  selectedYear?: number\n  /** 選択可能な開始年 */\n  fromYear: number\n  /** 選択可能な終了年 */\n  toYear: number\n  /** トリガのセレクトイベントを処理するハンドラ */\n  handleSelectYear: (e: MouseEvent<HTMLButtonElement>) => void\n  /** 表示フラグ */\n  isDisplayed: boolean\n  /** HTMLのid属性 */\n  id: string\n}\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\ntype ActualProps = Omit<Props, 'isDisplayed'>\n\nconst classNameGenerator = tv({\n  slots: {\n    overlay: 'smarthr-ui-YearPicker shr-absolute shr-inset-0 shr-bg-white',\n    container:\n      'shr-box-border shr-flex shr-h-full shr-w-full shr-flex-wrap shr-items-start shr-px-0.25 shr-py-0.5',\n    yearButton:\n      'smarthr-ui-YearPicker-selectYear shr-group shr-flex shr-w-1/4 shr-items-center shr-justify-center shr-px-0 shr-py-0.5 shr-leading-none',\n    yearWrapper: [\n      'shr-box-border shr-inline-block shr-rounded-full shr-px-0.75 shr-py-0.5 shr-text-base shr-leading-none group-hover:shr-bg-base-grey group-hover:shr-text-black',\n      '[[data-this-year=\"true\"]>&]:shr-border-shorthand',\n      '[[aria-pressed=\"true\"]>&]:shr-bg-main [[aria-pressed=\"true\"]>&]:shr-text-white',\n    ],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { overlay, container, yearButton, yearWrapper } = classNameGenerator()\n\n  return {\n    overlay: overlay(),\n    container: container(),\n    yearButton: yearButton(),\n    yearWrapper: yearWrapper(),\n  }\n})()\n\nconst FOCUS_CALLBACK_REF = (node: HTMLButtonElement | null) => {\n  if (node) {\n    // HINT: 現在の年に一度focusを当てることでtab移動をしやすくする\n    // focusを当てたままでは違和感があるため、blurで解除している\n    node.focus()\n    node.blur()\n  }\n}\n\nexport const YearPicker: FC<Props> = ({ isDisplayed, ...rest }) =>\n  isDisplayed ? <ActualYearPicker {...rest} /> : null\n\nconst ActualYearPicker: FC<ActualProps> = ({\n  selectedYear,\n  fromYear,\n  toYear,\n  handleSelectYear,\n  id,\n  ...rest\n}) => {\n  const [thisYear] = useState(() => new Date().getFullYear())\n  const yearArray = useMemo(() => {\n    const length = Math.max(Math.min(toYear, 9999) - fromYear + 1, 0)\n    const result: number[] = []\n\n    for (let i = 0; i < length; i++) {\n      result[i] = fromYear + i\n    }\n\n    return result\n  }, [toYear, fromYear])\n\n  return (\n    <div {...rest} id={id} className={CLASS_NAMES.overlay}>\n      <Scroller className={CLASS_NAMES.container}>\n        {yearArray.map((year) => (\n          <YearButton\n            key={year}\n            year={year}\n            thisYear={thisYear}\n            selected={selectedYear === year}\n            handleClick={handleSelectYear}\n          />\n        ))}\n      </Scroller>\n    </div>\n  )\n}\n\nconst YearButton = memo<{\n  year: number\n  thisYear: number\n  selected: boolean\n  handleClick: (e: MouseEvent<HTMLButtonElement>) => void\n}>(({ year, thisYear, selected, handleClick }) => {\n  const { localize } = useIntl()\n  const isThisYear = thisYear === year\n\n  return (\n    <UnstyledButton\n      ref={isThisYear ? FOCUS_CALLBACK_REF : null}\n      value={year}\n      aria-pressed={selected}\n      onClick={handleClick}\n      className={CLASS_NAMES.yearButton}\n      data-this-year={isThisYear}\n      aria-label={\n        isThisYear\n          ? localize({\n              id: 'smarthr-ui/Calendar/currentYear',\n              defaultText: '現在の年',\n            })\n          : undefined\n      }\n    >\n      <span className={CLASS_NAMES.yearWrapper}>{year}</span>\n    </UnstyledButton>\n  )\n})\n"],"names":["tv","_jsx","useState","useMemo","Scroller","memo","useIntl","UnstyledButton"],"mappings":"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"}

package/lib/components/Calendar/YearPicker.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { memo, useRef, useMemo, useEffect } from 'react';
+import { memo, useState, useMemo } from 'react';
 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.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 import '../../intl/IntlProvider.js';
 import { useIntl } from '../../intl/useIntl.js';
@@ -33,10 +33,17 @@ const CLASS_NAMES = (() => {
         yearWrapper: yearWrapper(),
     };
 })();
+const FOCUS_CALLBACK_REF = (node) => {
+    if (node) {
+        // HINT: 現在の年に一度focusを当てることでtab移動をしやすくする
+        // focusを当てたままでは違和感があるため、blurで解除している
+        node.focus();
+        node.blur();
+    }
+};
 const YearPicker = ({ isDisplayed, ...rest }) => isDisplayed ? jsx(ActualYearPicker, { ...rest }) : null;
 const ActualYearPicker = ({ selectedYear, fromYear, toYear, handleSelectYear, id, ...rest }) => {
-    const focusingRef = useRef(null);
-    const thisYear = useMemo(() => new Date().getFullYear(), []);
+    const [thisYear] = useState(() => new Date().getFullYear());
     const yearArray = useMemo(() => {
         const length = Math.max(Math.min(toYear, 9999) - fromYear + 1, 0);
         const result = [];
@@ -45,25 +52,17 @@ const ActualYearPicker = ({ selectedYear, fromYear, toYear, handleSelectYear, id
         }
         return result;
     }, [toYear, fromYear]);
-    useEffect(() => {
-        if (focusingRef.current) {
-            // HINT: 現在の年に一度focusを当てることでtab移動をしやすくする
-            // focusを当てたままでは違和感があるため、blurで解除している
-            focusingRef.current.focus();
-            focusingRef.current.blur();
-        }
-    }, []);
-    return (jsx("div", { ...rest, id: id, className: CLASS_NAMES.overlay, children: jsx(Scroller, { className: CLASS_NAMES.container, children: yearArray.map((year) => (jsx(YearButton, { year: year, thisYear: thisYear, selected: selectedYear === year, focusingRef: focusingRef, className: CLASS_NAMES.yearButton, childrenStyle: CLASS_NAMES.yearWrapper, handleClick: handleSelectYear }, year))) }) }));
+    return (jsx("div", { ...rest, id: id, className: CLASS_NAMES.overlay, children: jsx(Scroller, { className: CLASS_NAMES.container, children: yearArray.map((year) => (jsx(YearButton, { year: year, thisYear: thisYear, selected: selectedYear === year, handleClick: handleSelectYear }, year))) }) }));
 };
-const YearButton = memo(({ year, thisYear, selected, focusingRef, handleClick, className, childrenStyle }) => {
+const YearButton = memo(({ year, thisYear, selected, handleClick }) => {
     const { localize } = useIntl();
     const isThisYear = thisYear === year;
-    return (jsx(UnstyledButton, { ref: isThisYear ? focusingRef : null, value: year, "aria-pressed": selected, onClick: handleClick, className: className, "data-this-year": isThisYear, "aria-label": isThisYear
+    return (jsx(UnstyledButton, { ref: isThisYear ? FOCUS_CALLBACK_REF : null, value: year, "aria-pressed": selected, onClick: handleClick, className: CLASS_NAMES.yearButton, "data-this-year": isThisYear, "aria-label": isThisYear
             ? localize({
                 id: 'smarthr-ui/Calendar/currentYear',
                 defaultText: '現在の年',
             })
-            : undefined, children: jsx("span", { className: childrenStyle, children: year }) }));
+            : undefined, children: jsx("span", { className: CLASS_NAMES.yearWrapper, children: year }) }));
 });
 
 export { YearPicker };

package/lib/components/Calendar/YearPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"YearPicker.js","sources":["../../../src/components/Calendar/YearPicker.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type FC,\n  type MouseEvent,\n  type RefObject,\n  memo,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../intl'\nimport { UnstyledButton } from '../Button'\nimport { Scroller } from '../Scroller'\n\ntype BaseProps = {\n  /** 選択された年 */\n  selectedYear?: number\n  /** 選択可能な開始年 */\n  fromYear: number\n  /** 選択可能な終了年 */\n  toYear: number\n  /** トリガのセレクトイベントを処理するハンドラ */\n  handleSelectYear: (e: MouseEvent<HTMLButtonElement>) => void\n  /** 表示フラグ */\n  isDisplayed: boolean\n  /** HTMLのid属性 */\n  id: string\n}\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\ntype ActualProps = Omit<Props, 'isDisplayed'>\n\nconst classNameGenerator = tv({\n  slots: {\n    overlay: 'smarthr-ui-YearPicker shr-absolute shr-inset-0 shr-bg-white',\n    container:\n      'shr-box-border shr-flex shr-h-full shr-w-full shr-flex-wrap shr-items-start shr-px-0.25 shr-py-0.5',\n    yearButton:\n      'smarthr-ui-YearPicker-selectYear shr-group shr-flex shr-w-1/4 shr-items-center shr-justify-center shr-px-0 shr-py-0.5 shr-leading-none',\n    yearWrapper: [\n      'shr-box-border shr-inline-block shr-rounded-full shr-px-0.75 shr-py-0.5 shr-text-base shr-leading-none group-hover:shr-bg-base-grey group-hover:shr-text-black',\n      '[[data-this-year=\"true\"]>&]:shr-border-shorthand',\n      '[[aria-pressed=\"true\"]>&]:shr-bg-main [[aria-pressed=\"true\"]>&]:shr-text-white',\n    ],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { overlay, container, yearButton, yearWrapper } = classNameGenerator()\n\n  return {\n    overlay: overlay(),\n    container: container(),\n    yearButton: yearButton(),\n    yearWrapper: yearWrapper(),\n  }\n})()\n\nexport const YearPicker: FC<Props> = ({ isDisplayed, ...rest }) =>\n  isDisplayed ? <ActualYearPicker {...rest} /> : null\n\nconst ActualYearPicker: FC<ActualProps> = ({\n  selectedYear,\n  fromYear,\n  toYear,\n  handleSelectYear,\n  id,\n  ...rest\n}) => {\n  const focusingRef = useRef<HTMLButtonElement>(null)\n\n  const thisYear = useMemo(() => new Date().getFullYear(), [])\n  const yearArray = useMemo(() => {\n    const length = Math.max(Math.min(toYear, 9999) - fromYear + 1, 0)\n    const result: number[] = []\n\n    for (let i = 0; i < length; i++) {\n      result[i] = fromYear + i\n    }\n\n    return result\n  }, [toYear, fromYear])\n\n  useEffect(() => {\n    if (focusingRef.current) {\n      // HINT: 現在の年に一度focusを当てることでtab移動をしやすくする\n      // focusを当てたままでは違和感があるため、blurで解除している\n      focusingRef.current.focus()\n      focusingRef.current.blur()\n    }\n  }, [])\n\n  return (\n    <div {...rest} id={id} className={CLASS_NAMES.overlay}>\n      <Scroller className={CLASS_NAMES.container}>\n        {yearArray.map((year) => (\n          <YearButton\n            key={year}\n            year={year}\n            thisYear={thisYear}\n            selected={selectedYear === year}\n            focusingRef={focusingRef}\n            className={CLASS_NAMES.yearButton}\n            childrenStyle={CLASS_NAMES.yearWrapper}\n            handleClick={handleSelectYear}\n          />\n        ))}\n      </Scroller>\n    </div>\n  )\n}\n\nconst YearButton = memo<{\n  year: number\n  thisYear: number\n  selected: boolean\n  focusingRef: RefObject<HTMLButtonElement>\n  className: string\n  childrenStyle: string\n  handleClick: (e: MouseEvent<HTMLButtonElement>) => void\n}>(({ year, thisYear, selected, focusingRef, handleClick, className, childrenStyle }) => {\n  const { localize } = useIntl()\n  const isThisYear = thisYear === year\n\n  return (\n    <UnstyledButton\n      ref={isThisYear ? focusingRef : null}\n      value={year}\n      aria-pressed={selected}\n      onClick={handleClick}\n      className={className}\n      data-this-year={isThisYear}\n      aria-label={\n        isThisYear\n          ? localize({\n              id: 'smarthr-ui/Calendar/currentYear',\n              defaultText: '現在の年',\n            })\n          : undefined\n      }\n    >\n      <span className={childrenStyle}>{year}</span>\n    </UnstyledButton>\n  )\n})\n"],"names":["tv","_jsx"],"mappings":";;;;;;;;;;;;;;AAiCA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,6DAA6D;AACtE,QAAA,SAAS,EACP,oGAAoG;AACtG,QAAA,UAAU,EACR,wIAAwI;AAC1I,QAAA,WAAW,EAAE;YACX,gKAAgK;YAChK,kDAAkD;YAClD,gFAAgF;AACjF,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,MAAK;AACxB,IAAA,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,kBAAkB,EAAE;IAE5E,OAAO;QACL,OAAO,EAAE,OAAO,EAAE;QAClB,SAAS,EAAE,SAAS,EAAE;QACtB,UAAU,EAAE,UAAU,EAAE;QACxB,WAAW,EAAE,WAAW,EAAE;KAC3B;AACH,CAAC,GAAG;AAEG,MAAM,UAAU,GAAc,CAAC,EAAE,WAAW,EAAE,GAAG,IAAI,EAAE,KAC5D,WAAW,GAAGC,GAAA,CAAC,gBAAgB,EAAA,EAAA,GAAK,IAAI,EAAA,CAAI,GAAG;AAEjD,MAAM,gBAAgB,GAAoB,CAAC,EACzC,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,gBAAgB,EAChB,EAAE,EACF,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,WAAW,GAAG,MAAM,CAAoB,IAAI,CAAC;AAEnD,IAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,EAAE,EAAE,CAAC;AAC5D,IAAA,MAAM,SAAS,GAAG,OAAO,CAAC,MAAK;QAC7B,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,QAAQ,GAAG,CAAC,EAAE,CAAC,CAAC;QACjE,MAAM,MAAM,GAAa,EAAE;AAE3B,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE;AAC/B,YAAA,MAAM,CAAC,CAAC,CAAC,GAAG,QAAQ,GAAG,CAAC;QAC1B;AAEA,QAAA,OAAO,MAAM;AACf,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAEtB,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,WAAW,CAAC,OAAO,EAAE;;;AAGvB,YAAA,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE;AAC3B,YAAA,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE;QAC5B;IACF,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAA,GAAS,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,WAAW,CAAC,OAAO,EAAA,QAAA,EACnDA,GAAA,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAE,WAAW,CAAC,SAAS,EAAA,QAAA,EACvC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,MAClBA,GAAA,CAAC,UAAU,IAET,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,KAAK,IAAI,EAC/B,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,WAAW,CAAC,UAAU,EACjC,aAAa,EAAE,WAAW,CAAC,WAAW,EACtC,WAAW,EAAE,gBAAgB,EAAA,EAPxB,IAAI,CAQT,CACH,CAAC,EAAA,CACO,EAAA,CACP;AAEV,CAAC;AAED,MAAM,UAAU,GAAG,IAAI,CAQpB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,KAAI;AACtF,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE;AAC9B,IAAA,MAAM,UAAU,GAAG,QAAQ,KAAK,IAAI;AAEpC,IAAA,QACEA,GAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAE,UAAU,GAAG,WAAW,GAAG,IAAI,EACpC,KAAK,EAAE,IAAI,EAAA,cAAA,EACG,QAAQ,EACtB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,SAAS,EAAA,gBAAA,EACJ,UAAU,gBAExB;cACI,QAAQ,CAAC;AACP,gBAAA,EAAE,EAAE,iCAAiC;AACrC,gBAAA,WAAW,EAAE,MAAM;aACpB;AACH,cAAE,SAAS,EAAA,QAAA,EAGfA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,aAAa,EAAA,QAAA,EAAG,IAAI,EAAA,CAAQ,EAAA,CAC9B;AAErB,CAAC,CAAC;;;;"}
+{"version":3,"file":"YearPicker.js","sources":["../../../src/components/Calendar/YearPicker.tsx"],"sourcesContent":["import { type ComponentProps, type FC, type MouseEvent, memo, useMemo, useState } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../intl'\nimport { UnstyledButton } from '../Button'\nimport { Scroller } from '../Scroller'\n\ntype BaseProps = {\n  /** 選択された年 */\n  selectedYear?: number\n  /** 選択可能な開始年 */\n  fromYear: number\n  /** 選択可能な終了年 */\n  toYear: number\n  /** トリガのセレクトイベントを処理するハンドラ */\n  handleSelectYear: (e: MouseEvent<HTMLButtonElement>) => void\n  /** 表示フラグ */\n  isDisplayed: boolean\n  /** HTMLのid属性 */\n  id: string\n}\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\ntype ActualProps = Omit<Props, 'isDisplayed'>\n\nconst classNameGenerator = tv({\n  slots: {\n    overlay: 'smarthr-ui-YearPicker shr-absolute shr-inset-0 shr-bg-white',\n    container:\n      'shr-box-border shr-flex shr-h-full shr-w-full shr-flex-wrap shr-items-start shr-px-0.25 shr-py-0.5',\n    yearButton:\n      'smarthr-ui-YearPicker-selectYear shr-group shr-flex shr-w-1/4 shr-items-center shr-justify-center shr-px-0 shr-py-0.5 shr-leading-none',\n    yearWrapper: [\n      'shr-box-border shr-inline-block shr-rounded-full shr-px-0.75 shr-py-0.5 shr-text-base shr-leading-none group-hover:shr-bg-base-grey group-hover:shr-text-black',\n      '[[data-this-year=\"true\"]>&]:shr-border-shorthand',\n      '[[aria-pressed=\"true\"]>&]:shr-bg-main [[aria-pressed=\"true\"]>&]:shr-text-white',\n    ],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { overlay, container, yearButton, yearWrapper } = classNameGenerator()\n\n  return {\n    overlay: overlay(),\n    container: container(),\n    yearButton: yearButton(),\n    yearWrapper: yearWrapper(),\n  }\n})()\n\nconst FOCUS_CALLBACK_REF = (node: HTMLButtonElement | null) => {\n  if (node) {\n    // HINT: 現在の年に一度focusを当てることでtab移動をしやすくする\n    // focusを当てたままでは違和感があるため、blurで解除している\n    node.focus()\n    node.blur()\n  }\n}\n\nexport const YearPicker: FC<Props> = ({ isDisplayed, ...rest }) =>\n  isDisplayed ? <ActualYearPicker {...rest} /> : null\n\nconst ActualYearPicker: FC<ActualProps> = ({\n  selectedYear,\n  fromYear,\n  toYear,\n  handleSelectYear,\n  id,\n  ...rest\n}) => {\n  const [thisYear] = useState(() => new Date().getFullYear())\n  const yearArray = useMemo(() => {\n    const length = Math.max(Math.min(toYear, 9999) - fromYear + 1, 0)\n    const result: number[] = []\n\n    for (let i = 0; i < length; i++) {\n      result[i] = fromYear + i\n    }\n\n    return result\n  }, [toYear, fromYear])\n\n  return (\n    <div {...rest} id={id} className={CLASS_NAMES.overlay}>\n      <Scroller className={CLASS_NAMES.container}>\n        {yearArray.map((year) => (\n          <YearButton\n            key={year}\n            year={year}\n            thisYear={thisYear}\n            selected={selectedYear === year}\n            handleClick={handleSelectYear}\n          />\n        ))}\n      </Scroller>\n    </div>\n  )\n}\n\nconst YearButton = memo<{\n  year: number\n  thisYear: number\n  selected: boolean\n  handleClick: (e: MouseEvent<HTMLButtonElement>) => void\n}>(({ year, thisYear, selected, handleClick }) => {\n  const { localize } = useIntl()\n  const isThisYear = thisYear === year\n\n  return (\n    <UnstyledButton\n      ref={isThisYear ? FOCUS_CALLBACK_REF : null}\n      value={year}\n      aria-pressed={selected}\n      onClick={handleClick}\n      className={CLASS_NAMES.yearButton}\n      data-this-year={isThisYear}\n      aria-label={\n        isThisYear\n          ? localize({\n              id: 'smarthr-ui/Calendar/currentYear',\n              defaultText: '現在の年',\n            })\n          : undefined\n      }\n    >\n      <span className={CLASS_NAMES.yearWrapper}>{year}</span>\n    </UnstyledButton>\n  )\n})\n"],"names":["tv","_jsx"],"mappings":"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"}

package/lib/components/Checkbox/Checkbox.cjs

@@ -4,6 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.cjs');
+var hooks_useMergeRefs = require('../../hooks/useMergeRefs.cjs');
 var components_Icon_FaIcon = require('../Icon/FaIcon.cjs');
 require('../Icon/generateIcon.cjs');
 require('../Icon/OpenInNewTabIcon.cjs');
@@ -61,13 +62,13 @@ const Checkbox = React.forwardRef(({ checked, mixed, error, className, children,
     const inputRef = React.useRef(null);
     const defaultId = React.useId();
     const checkBoxId = id || defaultId;
-    React.useImperativeHandle(ref, () => inputRef.current, []);
+    const mergedRef = hooks_useMergeRefs.useMergeRefs(inputRef, ref);
     React.useEffect(() => {
         if (inputRef.current) {
             inputRef.current.indeterminate = !!(checked && mixed);
         }
     }, [checked, mixed]);
-    return (jsxRuntime.jsxs("span", { "data-disabled": disabled, className: classNames.wrapper, children: [jsxRuntime.jsxs("span", { className: classNames.innerWrapper, children: [jsxRuntime.jsx("input", { ...rest, ref: inputRef, type: "checkbox", id: checkBoxId, checked: checked, disabled: disabled, "aria-invalid": error || undefined, className: classNames.input, "data-smarthr-ui-input": "true" }), jsxRuntime.jsx(AriaHiddenBox, { className: classNames.box }), jsxRuntime.jsx(CheckIconArea, { mixed: mixed, classNames: classNames })] }), children && (jsxRuntime.jsx("label", { htmlFor: checkBoxId, className: classNames.label, children: children }))] }));
+    return (jsxRuntime.jsxs("span", { "data-disabled": disabled, className: classNames.wrapper, children: [jsxRuntime.jsxs("span", { className: classNames.innerWrapper, children: [jsxRuntime.jsx("input", { ...rest, ref: mergedRef, type: "checkbox", id: checkBoxId, checked: checked, disabled: disabled, "aria-invalid": error || undefined, className: classNames.input, "data-smarthr-ui-input": "true" }), jsxRuntime.jsx(AriaHiddenBox, { className: classNames.box }), jsxRuntime.jsx(CheckIconArea, { mixed: mixed, classNames: classNames })] }), children && (jsxRuntime.jsx("label", { htmlFor: checkBoxId, className: classNames.label, children: children }))] }));
 });
 const AriaHiddenBox = React.memo(({ className }) => (jsxRuntime.jsx("span", { className: className, "aria-hidden": "true" })));
 const CheckIconArea = React.memo(({ mixed, classNames }) => {

package/lib/components/Checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCheckIcon, FaMinusIcon } from '../Icon'\n\nexport type Props = PropsWithChildren<\n  ComponentPropsWithRef<'input'> & {\n    /** `true` のとき、チェック状態を `mixed` にする */\n    mixed?: boolean\n    /** チェックボックスにエラーがあるかどうか */\n    error?: boolean\n  }\n>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Checkbox shr-inline-flex shr-items-baseline',\n    box: [\n      'shr-border-shorthand shr-pointer-events-none shr-absolute shr-box-border shr-h-full shr-w-full shr-rounded-s shr-bg-white',\n      'contrast-more:shr-border-high-contrast',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-hidden',\n      'peer-checked:shr-border-main peer-checked:shr-bg-main contrast-more:peer-checked:shr-border-high-contrast',\n      'peer-indeterminate:shr-border-main peer-indeterminate:shr-bg-main contrast-more:peer-indeterminate:shr-border-high-contrast',\n      'peer-disabled:shr-border-disabled peer-disabled:shr-bg-white-darken',\n      'peer-disabled:peer-checked:shr-border-default peer-disabled:peer-checked:shr-bg-border',\n      'peer-disabled:peer-indeterminate:shr-border-default peer-disabled:peer-indeterminate:shr-bg-border',\n      'peer-focus-visible:shr-focus-indicator--outer',\n      'peer-hover:shr-shadow-input-hover',\n      'shr-border-default',\n      'peer-[[aria-invalid]]:shr-border-danger',\n    ],\n    input: [\n      'smarthr-ui-Checkbox-checkbox shr-peer shr-absolute shr-left-0 shr-top-0 shr-m-0 shr-h-full shr-w-full shr-cursor-pointer shr-opacity-0 disabled:shr-pointer-events-none',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-static forced-colors:shr-opacity-100',\n    ],\n    icon: 'shr-fill-current',\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-left-1/2 shr-top-1/2 shr-inline-block shr-h-[theme(fontSize.2xs)] shr-w-[theme(fontSize.2xs)] -shr-translate-x-1/2 -shr-translate-y-1/2 shr-text-2xs',\n      'shr-text-transparent peer-checked:shr-text-white peer-indeterminate:shr-text-white',\n      'peer-disabled:peer-checked:shr-text-white-darken peer-disabled:peer-indeterminate:shr-text-white-darken',\n      'forced-colors:shr-hidden',\n    ],\n    innerWrapper:\n      'shr-relative shr-box-border shr-inline-block shr-h-[theme(fontSize.base)] shr-w-[theme(fontSize.base)] shr-shrink-0 shr-translate-y-[0.125em] shr-leading-none',\n    label: [\n      'smarthr-ui-Checkbox-label shr-ms-0.5 shr-cursor-pointer shr-text-base shr-leading-tight',\n      '[[data-disabled=true]>&]:shr-pointer-events-none [[data-disabled=true]>&]:shr-cursor-not-allowed [[data-disabled=true]>&]:shr-text-disabled',\n    ],\n  },\n})\n\nexport const Checkbox = forwardRef<HTMLInputElement, Props>(\n  ({ checked, mixed, error, className, children, disabled, id, ...rest }, ref) => {\n    const classNames = useMemo(() => {\n      const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        innerWrapper: innerWrapper(),\n        box: box(),\n        input: input(),\n        iconWrap: iconWrap(),\n        icon: icon(),\n        label: label(),\n      }\n    }, [className])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const defaultId = useId()\n    const checkBoxId = id || defaultId\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n      [],\n    )\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = !!(checked && mixed)\n      }\n    }, [checked, mixed])\n\n    return (\n      <span data-disabled={disabled} className={classNames.wrapper}>\n        <span className={classNames.innerWrapper}>\n          <input\n            {...rest}\n            ref={inputRef}\n            type=\"checkbox\"\n            id={checkBoxId}\n            checked={checked}\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            className={classNames.input}\n            data-smarthr-ui-input=\"true\"\n          />\n          <AriaHiddenBox className={classNames.box} />\n          <CheckIconArea mixed={mixed} classNames={classNames} />\n        </span>\n\n        {children && (\n          <label htmlFor={checkBoxId} className={classNames.label}>\n            {children}\n          </label>\n        )}\n      </span>\n    )\n  },\n)\n\nconst AriaHiddenBox = memo<{ className: string }>(({ className }) => (\n  <span className={className} aria-hidden=\"true\" />\n))\n\nconst CheckIconArea = memo<\n  Pick<Props, 'mixed'> & { classNames: { iconWrap: string; icon: string } }\n>(({ mixed, classNames }) => {\n  const Icon = mixed ? FaMinusIcon : FaCheckIcon\n\n  return (\n    <span className={classNames.iconWrap}>\n      <Icon className={classNames.icon} />\n    </span>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;AA0BA;AACE;AACE;AACA;;;;;;;;;;;;;;AAcC;AACD;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;AAEA;;;AAGC;AACF;AACF;AAEM;AAEH;AACE;;AAGE;;;;;;;;AAQJ;AAEA;AAEA;AACA;AAEA;;AAOE;AACE;;AAEJ;;AA2BF;AAGF;AAIA;;AAKE;AAKF;;"}
+{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useMergeRefs } from '../../hooks/useMergeRefs'\nimport { FaCheckIcon, FaMinusIcon } from '../Icon'\n\nexport type Props = PropsWithChildren<\n  ComponentPropsWithRef<'input'> & {\n    /** `true` のとき、チェック状態を `mixed` にする */\n    mixed?: boolean\n    /** チェックボックスにエラーがあるかどうか */\n    error?: boolean\n  }\n>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Checkbox shr-inline-flex shr-items-baseline',\n    box: [\n      'shr-border-shorthand shr-pointer-events-none shr-absolute shr-box-border shr-h-full shr-w-full shr-rounded-s shr-bg-white',\n      'contrast-more:shr-border-high-contrast',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-hidden',\n      'peer-checked:shr-border-main peer-checked:shr-bg-main contrast-more:peer-checked:shr-border-high-contrast',\n      'peer-indeterminate:shr-border-main peer-indeterminate:shr-bg-main contrast-more:peer-indeterminate:shr-border-high-contrast',\n      'peer-disabled:shr-border-disabled peer-disabled:shr-bg-white-darken',\n      'peer-disabled:peer-checked:shr-border-default peer-disabled:peer-checked:shr-bg-border',\n      'peer-disabled:peer-indeterminate:shr-border-default peer-disabled:peer-indeterminate:shr-bg-border',\n      'peer-focus-visible:shr-focus-indicator--outer',\n      'peer-hover:shr-shadow-input-hover',\n      'shr-border-default',\n      'peer-[[aria-invalid]]:shr-border-danger',\n    ],\n    input: [\n      'smarthr-ui-Checkbox-checkbox shr-peer shr-absolute shr-left-0 shr-top-0 shr-m-0 shr-h-full shr-w-full shr-cursor-pointer shr-opacity-0 disabled:shr-pointer-events-none',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-static forced-colors:shr-opacity-100',\n    ],\n    icon: 'shr-fill-current',\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-left-1/2 shr-top-1/2 shr-inline-block shr-h-[theme(fontSize.2xs)] shr-w-[theme(fontSize.2xs)] -shr-translate-x-1/2 -shr-translate-y-1/2 shr-text-2xs',\n      'shr-text-transparent peer-checked:shr-text-white peer-indeterminate:shr-text-white',\n      'peer-disabled:peer-checked:shr-text-white-darken peer-disabled:peer-indeterminate:shr-text-white-darken',\n      'forced-colors:shr-hidden',\n    ],\n    innerWrapper:\n      'shr-relative shr-box-border shr-inline-block shr-h-[theme(fontSize.base)] shr-w-[theme(fontSize.base)] shr-shrink-0 shr-translate-y-[0.125em] shr-leading-none',\n    label: [\n      'smarthr-ui-Checkbox-label shr-ms-0.5 shr-cursor-pointer shr-text-base shr-leading-tight',\n      '[[data-disabled=true]>&]:shr-pointer-events-none [[data-disabled=true]>&]:shr-cursor-not-allowed [[data-disabled=true]>&]:shr-text-disabled',\n    ],\n  },\n})\n\nexport const Checkbox = forwardRef<HTMLInputElement, Props>(\n  ({ checked, mixed, error, className, children, disabled, id, ...rest }, ref) => {\n    const classNames = useMemo(() => {\n      const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        innerWrapper: innerWrapper(),\n        box: box(),\n        input: input(),\n        iconWrap: iconWrap(),\n        icon: icon(),\n        label: label(),\n      }\n    }, [className])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const defaultId = useId()\n    const checkBoxId = id || defaultId\n\n    const mergedRef = useMergeRefs(inputRef, ref)\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = !!(checked && mixed)\n      }\n    }, [checked, mixed])\n\n    return (\n      <span data-disabled={disabled} className={classNames.wrapper}>\n        <span className={classNames.innerWrapper}>\n          <input\n            {...rest}\n            ref={mergedRef}\n            type=\"checkbox\"\n            id={checkBoxId}\n            checked={checked}\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            className={classNames.input}\n            data-smarthr-ui-input=\"true\"\n          />\n          <AriaHiddenBox className={classNames.box} />\n          <CheckIconArea mixed={mixed} classNames={classNames} />\n        </span>\n\n        {children && (\n          <label htmlFor={checkBoxId} className={classNames.label}>\n            {children}\n          </label>\n        )}\n      </span>\n    )\n  },\n)\n\nconst AriaHiddenBox = memo<{ className: string }>(({ className }) => (\n  <span className={className} aria-hidden=\"true\" />\n))\n\nconst CheckIconArea = memo<\n  Pick<Props, 'mixed'> & { classNames: { iconWrap: string; icon: string } }\n>(({ mixed, classNames }) => {\n  const Icon = mixed ? FaMinusIcon : FaCheckIcon\n\n  return (\n    <span className={classNames.iconWrap}>\n      <Icon className={classNames.icon} />\n    </span>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;AA0BA;AACE;AACE;AACA;;;;;;;;;;;;;;AAcC;AACD;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;AAEA;;;AAGC;AACF;AACF;AAEM;AAEH;AACE;;AAGE;;;;;;;;AAQJ;AAEA;AAEA;AACA;;;AAKE;AACE;;AAEJ;;AA2BF;AAGF;AAIA;;AAKE;AAKF;;"}

package/lib/components/Checkbox/Checkbox.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useMemo, useRef, useId, useImperativeHandle, useEffect, memo } from 'react';
+import { forwardRef, useMemo, useRef, useId, useEffect, memo } from 'react';
 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.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
+import { useMergeRefs } from '../../hooks/useMergeRefs.js';
 import { FaMinusIcon, FaCheckIcon } from '../Icon/FaIcon.js';
 import '../Icon/generateIcon.js';
 import '../Icon/OpenInNewTabIcon.js';
@@ -59,13 +60,13 @@ const Checkbox = forwardRef(({ checked, mixed, error, className, children, disab
     const inputRef = useRef(null);
     const defaultId = useId();
     const checkBoxId = id || defaultId;
-    useImperativeHandle(ref, () => inputRef.current, []);
+    const mergedRef = useMergeRefs(inputRef, ref);
     useEffect(() => {
         if (inputRef.current) {
             inputRef.current.indeterminate = !!(checked && mixed);
         }
     }, [checked, mixed]);
-    return (jsxs("span", { "data-disabled": disabled, className: classNames.wrapper, children: [jsxs("span", { className: classNames.innerWrapper, children: [jsx("input", { ...rest, ref: inputRef, type: "checkbox", id: checkBoxId, checked: checked, disabled: disabled, "aria-invalid": error || undefined, className: classNames.input, "data-smarthr-ui-input": "true" }), jsx(AriaHiddenBox, { className: classNames.box }), jsx(CheckIconArea, { mixed: mixed, classNames: classNames })] }), children && (jsx("label", { htmlFor: checkBoxId, className: classNames.label, children: children }))] }));
+    return (jsxs("span", { "data-disabled": disabled, className: classNames.wrapper, children: [jsxs("span", { className: classNames.innerWrapper, children: [jsx("input", { ...rest, ref: mergedRef, type: "checkbox", id: checkBoxId, checked: checked, disabled: disabled, "aria-invalid": error || undefined, className: classNames.input, "data-smarthr-ui-input": "true" }), jsx(AriaHiddenBox, { className: classNames.box }), jsx(CheckIconArea, { mixed: mixed, classNames: classNames })] }), children && (jsx("label", { htmlFor: checkBoxId, className: classNames.label, children: children }))] }));
 });
 const AriaHiddenBox = memo(({ className }) => (jsx("span", { className: className, "aria-hidden": "true" })));
 const CheckIconArea = memo(({ mixed, classNames }) => {

package/lib/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCheckIcon, FaMinusIcon } from '../Icon'\n\nexport type Props = PropsWithChildren<\n  ComponentPropsWithRef<'input'> & {\n    /** `true` のとき、チェック状態を `mixed` にする */\n    mixed?: boolean\n    /** チェックボックスにエラーがあるかどうか */\n    error?: boolean\n  }\n>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Checkbox shr-inline-flex shr-items-baseline',\n    box: [\n      'shr-border-shorthand shr-pointer-events-none shr-absolute shr-box-border shr-h-full shr-w-full shr-rounded-s shr-bg-white',\n      'contrast-more:shr-border-high-contrast',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-hidden',\n      'peer-checked:shr-border-main peer-checked:shr-bg-main contrast-more:peer-checked:shr-border-high-contrast',\n      'peer-indeterminate:shr-border-main peer-indeterminate:shr-bg-main contrast-more:peer-indeterminate:shr-border-high-contrast',\n      'peer-disabled:shr-border-disabled peer-disabled:shr-bg-white-darken',\n      'peer-disabled:peer-checked:shr-border-default peer-disabled:peer-checked:shr-bg-border',\n      'peer-disabled:peer-indeterminate:shr-border-default peer-disabled:peer-indeterminate:shr-bg-border',\n      'peer-focus-visible:shr-focus-indicator--outer',\n      'peer-hover:shr-shadow-input-hover',\n      'shr-border-default',\n      'peer-[[aria-invalid]]:shr-border-danger',\n    ],\n    input: [\n      'smarthr-ui-Checkbox-checkbox shr-peer shr-absolute shr-left-0 shr-top-0 shr-m-0 shr-h-full shr-w-full shr-cursor-pointer shr-opacity-0 disabled:shr-pointer-events-none',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-static forced-colors:shr-opacity-100',\n    ],\n    icon: 'shr-fill-current',\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-left-1/2 shr-top-1/2 shr-inline-block shr-h-[theme(fontSize.2xs)] shr-w-[theme(fontSize.2xs)] -shr-translate-x-1/2 -shr-translate-y-1/2 shr-text-2xs',\n      'shr-text-transparent peer-checked:shr-text-white peer-indeterminate:shr-text-white',\n      'peer-disabled:peer-checked:shr-text-white-darken peer-disabled:peer-indeterminate:shr-text-white-darken',\n      'forced-colors:shr-hidden',\n    ],\n    innerWrapper:\n      'shr-relative shr-box-border shr-inline-block shr-h-[theme(fontSize.base)] shr-w-[theme(fontSize.base)] shr-shrink-0 shr-translate-y-[0.125em] shr-leading-none',\n    label: [\n      'smarthr-ui-Checkbox-label shr-ms-0.5 shr-cursor-pointer shr-text-base shr-leading-tight',\n      '[[data-disabled=true]>&]:shr-pointer-events-none [[data-disabled=true]>&]:shr-cursor-not-allowed [[data-disabled=true]>&]:shr-text-disabled',\n    ],\n  },\n})\n\nexport const Checkbox = forwardRef<HTMLInputElement, Props>(\n  ({ checked, mixed, error, className, children, disabled, id, ...rest }, ref) => {\n    const classNames = useMemo(() => {\n      const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        innerWrapper: innerWrapper(),\n        box: box(),\n        input: input(),\n        iconWrap: iconWrap(),\n        icon: icon(),\n        label: label(),\n      }\n    }, [className])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const defaultId = useId()\n    const checkBoxId = id || defaultId\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n      [],\n    )\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = !!(checked && mixed)\n      }\n    }, [checked, mixed])\n\n    return (\n      <span data-disabled={disabled} className={classNames.wrapper}>\n        <span className={classNames.innerWrapper}>\n          <input\n            {...rest}\n            ref={inputRef}\n            type=\"checkbox\"\n            id={checkBoxId}\n            checked={checked}\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            className={classNames.input}\n            data-smarthr-ui-input=\"true\"\n          />\n          <AriaHiddenBox className={classNames.box} />\n          <CheckIconArea mixed={mixed} classNames={classNames} />\n        </span>\n\n        {children && (\n          <label htmlFor={checkBoxId} className={classNames.label}>\n            {children}\n          </label>\n        )}\n      </span>\n    )\n  },\n)\n\nconst AriaHiddenBox = memo<{ className: string }>(({ className }) => (\n  <span className={className} aria-hidden=\"true\" />\n))\n\nconst CheckIconArea = memo<\n  Pick<Props, 'mixed'> & { classNames: { iconWrap: string; icon: string } }\n>(({ mixed, classNames }) => {\n  const Icon = mixed ? FaMinusIcon : FaCheckIcon\n\n  return (\n    <span className={classNames.iconWrap}>\n      <Icon className={classNames.icon} />\n    </span>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;AA0BA;AACE;AACE;AACA;;;;;;;;;;;;;;AAcC;AACD;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;AAEA;;;AAGC;AACF;AACF;AAEM;AAEH;AACE;;AAGE;;;;;;;;AAQJ;AAEA;AAEA;AACA;AAEA;;AAOE;AACE;;AAEJ;;AA2BF;AAGF;AAIA;;AAKE;AAKF;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useMergeRefs } from '../../hooks/useMergeRefs'\nimport { FaCheckIcon, FaMinusIcon } from '../Icon'\n\nexport type Props = PropsWithChildren<\n  ComponentPropsWithRef<'input'> & {\n    /** `true` のとき、チェック状態を `mixed` にする */\n    mixed?: boolean\n    /** チェックボックスにエラーがあるかどうか */\n    error?: boolean\n  }\n>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Checkbox shr-inline-flex shr-items-baseline',\n    box: [\n      'shr-border-shorthand shr-pointer-events-none shr-absolute shr-box-border shr-h-full shr-w-full shr-rounded-s shr-bg-white',\n      'contrast-more:shr-border-high-contrast',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-hidden',\n      'peer-checked:shr-border-main peer-checked:shr-bg-main contrast-more:peer-checked:shr-border-high-contrast',\n      'peer-indeterminate:shr-border-main peer-indeterminate:shr-bg-main contrast-more:peer-indeterminate:shr-border-high-contrast',\n      'peer-disabled:shr-border-disabled peer-disabled:shr-bg-white-darken',\n      'peer-disabled:peer-checked:shr-border-default peer-disabled:peer-checked:shr-bg-border',\n      'peer-disabled:peer-indeterminate:shr-border-default peer-disabled:peer-indeterminate:shr-bg-border',\n      'peer-focus-visible:shr-focus-indicator--outer',\n      'peer-hover:shr-shadow-input-hover',\n      'shr-border-default',\n      'peer-[[aria-invalid]]:shr-border-danger',\n    ],\n    input: [\n      'smarthr-ui-Checkbox-checkbox shr-peer shr-absolute shr-left-0 shr-top-0 shr-m-0 shr-h-full shr-w-full shr-cursor-pointer shr-opacity-0 disabled:shr-pointer-events-none',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-static forced-colors:shr-opacity-100',\n    ],\n    icon: 'shr-fill-current',\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-left-1/2 shr-top-1/2 shr-inline-block shr-h-[theme(fontSize.2xs)] shr-w-[theme(fontSize.2xs)] -shr-translate-x-1/2 -shr-translate-y-1/2 shr-text-2xs',\n      'shr-text-transparent peer-checked:shr-text-white peer-indeterminate:shr-text-white',\n      'peer-disabled:peer-checked:shr-text-white-darken peer-disabled:peer-indeterminate:shr-text-white-darken',\n      'forced-colors:shr-hidden',\n    ],\n    innerWrapper:\n      'shr-relative shr-box-border shr-inline-block shr-h-[theme(fontSize.base)] shr-w-[theme(fontSize.base)] shr-shrink-0 shr-translate-y-[0.125em] shr-leading-none',\n    label: [\n      'smarthr-ui-Checkbox-label shr-ms-0.5 shr-cursor-pointer shr-text-base shr-leading-tight',\n      '[[data-disabled=true]>&]:shr-pointer-events-none [[data-disabled=true]>&]:shr-cursor-not-allowed [[data-disabled=true]>&]:shr-text-disabled',\n    ],\n  },\n})\n\nexport const Checkbox = forwardRef<HTMLInputElement, Props>(\n  ({ checked, mixed, error, className, children, disabled, id, ...rest }, ref) => {\n    const classNames = useMemo(() => {\n      const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        innerWrapper: innerWrapper(),\n        box: box(),\n        input: input(),\n        iconWrap: iconWrap(),\n        icon: icon(),\n        label: label(),\n      }\n    }, [className])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const defaultId = useId()\n    const checkBoxId = id || defaultId\n\n    const mergedRef = useMergeRefs(inputRef, ref)\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = !!(checked && mixed)\n      }\n    }, [checked, mixed])\n\n    return (\n      <span data-disabled={disabled} className={classNames.wrapper}>\n        <span className={classNames.innerWrapper}>\n          <input\n            {...rest}\n            ref={mergedRef}\n            type=\"checkbox\"\n            id={checkBoxId}\n            checked={checked}\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            className={classNames.input}\n            data-smarthr-ui-input=\"true\"\n          />\n          <AriaHiddenBox className={classNames.box} />\n          <CheckIconArea mixed={mixed} classNames={classNames} />\n        </span>\n\n        {children && (\n          <label htmlFor={checkBoxId} className={classNames.label}>\n            {children}\n          </label>\n        )}\n      </span>\n    )\n  },\n)\n\nconst AriaHiddenBox = memo<{ className: string }>(({ className }) => (\n  <span className={className} aria-hidden=\"true\" />\n))\n\nconst CheckIconArea = memo<\n  Pick<Props, 'mixed'> & { classNames: { iconWrap: string; icon: string } }\n>(({ mixed, classNames }) => {\n  const Icon = mixed ? FaMinusIcon : FaCheckIcon\n\n  return (\n    <span className={classNames.iconWrap}>\n      <Icon className={classNames.icon} />\n    </span>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;AA0BA;AACE;AACE;AACA;;;;;;;;;;;;;;AAcC;AACD;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;AAEA;;;AAGC;AACF;AACF;AAEM;AAEH;AACE;;AAGE;;;;;;;;AAQJ;AAEA;AAEA;AACA;;;AAKE;AACE;;AAEJ;;AA2BF;AAGF;AAIA;;AAKE;AAKF;;"}