smarthr-ui 99.3.2 → 99.4.0

package/lib/_virtual/plugin.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var _commonjsHelpers = require('./_commonjsHelpers.cjs');
-var plugin$1 = require('./../vendor/.pnpm/tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3_/vendor/tailwindcss/plugin.cjs');
+var plugin$1 = require('./../vendor/.pnpm/tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helpers@0.5.23__@types_node@20.19.43_typescript@5.9.3_/vendor/tailwindcss/plugin.cjs');
 
 var pluginExports = plugin$1.__require();
 var plugin = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(pluginExports);

package/lib/_virtual/plugin.js

@@ -1,5 +1,5 @@
 import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
-import { __require as requirePlugin } from './../vendor/.pnpm/tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3_/vendor/tailwindcss/plugin.js';
+import { __require as requirePlugin } from './../vendor/.pnpm/tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helpers@0.5.23__@types_node@20.19.43_typescript@5.9.3_/vendor/tailwindcss/plugin.js';
 
 var pluginExports = requirePlugin();
 var plugin = /*@__PURE__*/getDefaultExportFromCjs(pluginExports);

package/lib/components/AccordionPanel/AccordionPanel.cjs

@@ -3,7 +3,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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+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 libs_map = require('../../libs/map.cjs');
 var components_AccordionPanel_accordionPanelHelper = require('./accordionPanelHelper.cjs');

package/lib/components/AccordionPanel/AccordionPanel.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useState, useRef, 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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.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.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 import { useLatest } from '../../hooks/useLatest.js';
 import { flatArrayToMap, mapToKeyArray } from '../../libs/map.js';
 import { focusNextSibling, focusPreviousSibling, focusLastSibling, focusFirstSibling, getNewExpandedItems } from './accordionPanelHelper.js';

package/lib/components/AccordionPanel/AccordionPanelContent.cjs

@@ -3,7 +3,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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+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 libs_map = require('../../libs/map.cjs');
 var components_AccordionPanel_AccordionPanel = require('./AccordionPanel.cjs');
 var components_AccordionPanel_AccordionPanelItem = require('./AccordionPanelItem.cjs');

package/lib/components/AccordionPanel/AccordionPanelContent.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.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.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 import { getIsInclude } from '../../libs/map.js';
 import { AccordionPanelContext } from './AccordionPanel.js';
 import { AccordionPanelItemContext } from './AccordionPanelItem.js';

package/lib/components/AccordionPanel/AccordionPanelItem.cjs

@@ -3,7 +3,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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+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 components_SectioningContent_SectioningContent = require('../SectioningContent/SectioningContent.cjs');
 require('../SectioningContent/levelContext.cjs');
 require('styled-components');

package/lib/components/AccordionPanel/AccordionPanelItem.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { createContext, 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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.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.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 import { Section } from '../SectioningContent/SectioningContent.js';
 import '../SectioningContent/levelContext.js';
 import 'styled-components';

package/lib/components/AccordionPanel/AccordionPanelTrigger.cjs

@@ -3,7 +3,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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+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 libs_map = require('../../libs/map.cjs');
 var components_Heading_Heading = require('../Heading/Heading.cjs');
 require('../Heading/PageHeading/PageHeading.cjs');

package/lib/components/AccordionPanel/AccordionPanelTrigger.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo, useMemo, useContext } 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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.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.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 import { getIsInclude } from '../../libs/map.js';
 import { Heading } from '../Heading/Heading.js';
 import '../Heading/PageHeading/PageHeading.js';

package/lib/components/AppHeader/components/common/AppLauncherFeatures.cjs

@@ -2,7 +2,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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+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');
 require('../../../../intl/IntlProvider.cjs');
 require('react-intl');
 var intl_Localizer = require('../../../../intl/Localizer.cjs');

package/lib/components/AppHeader/components/common/AppLauncherFeatures.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { 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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.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.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 import '../../../../intl/IntlProvider.js';
 import 'react-intl';
 import { Localizer } from '../../../../intl/Localizer.js';

package/lib/components/AppHeader/components/common/AppLauncherSortDropdown.cjs

@@ -3,7 +3,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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+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_useTheme = require('../../../../hooks/useTheme.cjs');
 require('../../../../intl/IntlProvider.cjs');
 require('react-intl');

package/lib/components/AppHeader/components/common/AppLauncherSortDropdown.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo, useRef, useMemo, useCallback } 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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.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.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 import { useTheme } from '../../../../hooks/useTheme.js';
 import '../../../../intl/IntlProvider.js';
 import 'react-intl';

package/lib/components/AppHeader/components/common/CommonButton.cjs

@@ -2,7 +2,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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+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');
 
 const commonButtonClassNameGenerator = index.tv({
     base: [

package/lib/components/AppHeader/components/common/CommonButton.js

@@ -1,6 +1,6 @@
 import { jsxs } from 'react/jsx-runtime';
 import { memo, 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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.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.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 
 const commonButtonClassNameGenerator = ce({
     base: [

package/lib/components/AppHeader/components/desktop/AppLauncher.cjs

@@ -3,7 +3,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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+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_useTheme = require('../../../../hooks/useTheme.cjs');
 require('../../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../../intl/useIntl.cjs');
@@ -105,7 +105,7 @@ const CLASS_NAMES = (() => {
     };
 })();
 const AppLauncher = ({ features: baseFeatures }) => {
-    const { features, page, mode, sortType, searchQuery, changePage, setSortType, onChangeSearchQuery, onClickClearSearchQuery, } = components_AppHeader_hooks_useAppLauncher.useAppLauncher(baseFeatures);
+    const { features, page, mode, sortType, searchQuery, changePage, setSortType, onChangeSearchQuery, onClickClearSearchQuery, callbackRef, } = components_AppHeader_hooks_useAppLauncher.useAppLauncher(baseFeatures);
     const translated = intl_useIntl.useLocalize({
         searchInputTitle: {
             id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',
@@ -120,7 +120,7 @@ const AppLauncher = ({ features: baseFeatures }) => {
             defaultText: 'すべてのアプリ',
         },
     });
-    return (jsxRuntime.jsxs("div", { className: CLASS_NAMES.wrapper, children: [jsxRuntime.jsx("div", { className: CLASS_NAMES.searchArea, children: jsxRuntime.jsx(components_Input_SearchInput_SearchInput.SearchInput, { name: "search", title: translated.searchInputTitle, tooltipMessage: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: translated.searchInputTitle }), width: "100%", value: searchQuery, suffix: mode === 'search' && jsxRuntime.jsx(ClearSearchButton, { onClick: onClickClearSearchQuery }), onChange: onChangeSearchQuery }) }), jsxRuntime.jsxs("div", { className: CLASS_NAMES.inner, children: [jsxRuntime.jsx(SideNavs, { mode: mode, page: page, changePage: changePage, favoriteModeText: translated.favoriteModeText, allModeText: translated.allModeText }), jsxRuntime.jsx("div", { className: CLASS_NAMES.main, children: jsxRuntime.jsxs(components_SectioningContent_SectioningContent.Section, { className: CLASS_NAMES.mainInner, children: [jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { className: CLASS_NAMES.contentHead, align: "center", justify: "space-between", children: [jsxRuntime.jsx(MemoizedSubSubBlockHeading, { children: mode === 'search' ? (jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/AppHeader/Launcher/searchResultText", defaultText: "\u691C\u7D22\u7D50\u679C" })) : page === 'favorite' ? (translated.favoriteModeText) : (translated.allModeText) }), (mode === 'search' || page === 'all') && (jsxRuntime.jsx(components_AppHeader_components_common_AppLauncherSortDropdown.AppLauncherSortDropdown, { sortType: sortType, onSelectSortType: setSortType }))] }), jsxRuntime.jsx(components_Scroller_Scroller.Scroller, { className: CLASS_NAMES.scrollArea, children: jsxRuntime.jsx(components_AppHeader_components_common_AppLauncherFeatures.AppLauncherFeatures, { features: features, page: page }) })] }) })] })] }));
+    return (jsxRuntime.jsxs("div", { ref: callbackRef, className: CLASS_NAMES.wrapper, children: [jsxRuntime.jsx("div", { className: CLASS_NAMES.searchArea, children: jsxRuntime.jsx(components_Input_SearchInput_SearchInput.SearchInput, { name: "search", title: translated.searchInputTitle, tooltipMessage: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: translated.searchInputTitle }), width: "100%", value: searchQuery, suffix: mode === 'search' && jsxRuntime.jsx(ClearSearchButton, { onClick: onClickClearSearchQuery }), onChange: onChangeSearchQuery }) }), jsxRuntime.jsxs("div", { className: CLASS_NAMES.inner, children: [jsxRuntime.jsx(SideNavs, { mode: mode, page: page, changePage: changePage, favoriteModeText: translated.favoriteModeText, allModeText: translated.allModeText }), jsxRuntime.jsx("div", { className: CLASS_NAMES.main, children: jsxRuntime.jsxs(components_SectioningContent_SectioningContent.Section, { className: CLASS_NAMES.mainInner, children: [jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { className: CLASS_NAMES.contentHead, align: "center", justify: "space-between", children: [jsxRuntime.jsx(MemoizedSubSubBlockHeading, { children: mode === 'search' ? (jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/AppHeader/Launcher/searchResultText", defaultText: "\u691C\u7D22\u7D50\u679C" })) : page === 'favorite' ? (translated.favoriteModeText) : (translated.allModeText) }), (mode === 'search' || page === 'all') && (jsxRuntime.jsx(components_AppHeader_components_common_AppLauncherSortDropdown.AppLauncherSortDropdown, { sortType: sortType, onSelectSortType: setSortType }))] }), jsxRuntime.jsx(components_Scroller_Scroller.Scroller, { className: CLASS_NAMES.scrollArea, children: jsxRuntime.jsx(components_AppHeader_components_common_AppLauncherFeatures.AppLauncherFeatures, { features: features, page: page }) })] }) })] })] }));
 };
 const ClearSearchButton = React.memo(({ onClick }) => (jsxRuntime.jsx(components_Button_UnstyledButton.UnstyledButton, { onClick: onClick, children: jsxRuntime.jsx(components_Icon_FaIcon.FaCircleXmarkIcon, {}) })));
 const SideNavs = React.memo(({ mode, page, changePage, favoriteModeText, allModeText }) => {

package/lib/components/AppHeader/components/desktop/AppLauncher.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppLauncher.cjs","sources":["../../../../../src/components/AppHeader/components/desktop/AppLauncher.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, memo, useCallback, useId, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../../../hooks/useTheme'\nimport { Localizer, useLocalize } from '../../../../intl'\nimport { UnstyledButton } from '../../../Button'\nimport { Heading } from '../../../Heading'\nimport { FaCircleXmarkIcon, FaStarIcon } from '../../../Icon'\nimport { SearchInput } from '../../../Input'\nimport { Cluster } from '../../../Layout'\nimport { Scroller } from '../../../Scroller'\nimport { Section } from '../../../SectioningContent'\nimport { SideNav, SideNavItemButton } from '../../../SideNav'\nimport { HelpLink } from '../../../TextLink'\nimport { useAppLauncher } from '../../hooks/useAppLauncher'\nimport { AppLauncherFeatures } from '../common/AppLauncherFeatures'\nimport { AppLauncherSortDropdown } from '../common/AppLauncherSortDropdown'\nimport { Translate } from '../common/Translate'\n\nimport type { Launcher } from '../../types'\n\ntype Props = {\n  features: Array<Launcher['feature']>\n}\n\nconst appLauncher = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-AppLauncher',\n      'shr-grid shr-h-[40rem] shr-w-[38rem] shr-grid-rows-[auto_1fr]',\n    ],\n    searchArea: [\n      'smarthr-ui-AppLauncher-searchArea',\n      'shr-border-b-shorthand shr-p-1',\n      '[&_.smarthr-ui-Input]:shr-h-[42px]',\n    ],\n    inner: ['smarthr-ui-AppLauncher-inner', 'shr-grid shr-min-h-0 shr-grid-cols-[11rem_1fr]'],\n    side: [\n      'smarthr-ui-AppLauncher-side',\n      'shr-border-r-shorthand shr-flex shr-flex-col shr-bg-column shr-pb-1 shr-pt-0.5',\n      '[&_hr]:shr-m-0.5 [&_hr]:shr-h-[1px] [&_hr]:shr-border-none [&_hr]:shr-bg-border',\n    ],\n    sideNav: [\n      '[&_.smarthr-ui-SideNav-item>button]:shr-px-1 [&_.smarthr-ui-SideNav-item>button]:shr-py-0.75',\n      '[&_.smarthr-ui-SideNav-item>button>span]:shr-flex-nowrap',\n      '[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-shrink-0 [&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-align-bottom',\n    ],\n    sideNavHeading: ['shr-px-1 shr-py-0.75 shr-text-xs shr-text-black'],\n    help: ['smarthr-ui-AppLauncher-help', 'shr-mt-auto shr-px-1 shr-text-xs'],\n    main: ['smarthr-ui-AppLauncher-main', 'shr-grid shr-min-h-0'],\n    mainInner: ['shr-grid shr-min-h-0 shr-grid-rows-[auto_1fr]'],\n    contentHead: [\n      'shr-min-h-[2rem] shr-px-1 shr-py-0.75',\n      '[&_.smarthr-ui-Heading]:shr-text-black',\n    ],\n    scrollArea: ['shr-h-[509px]'],\n  },\n  variants: {\n    noIcon: {\n      true: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button]:shr-pl-1.5'],\n      },\n    },\n    selected: {\n      false: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-text-grey'],\n      },\n    },\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const {\n    wrapper,\n    searchArea,\n    inner,\n    side,\n    sideNav,\n    sideNavHeading,\n    help,\n    main,\n    mainInner,\n    contentHead,\n    scrollArea,\n  } = appLauncher()\n\n  return {\n    wrapper: wrapper(),\n    searchArea: searchArea(),\n    inner: inner(),\n    side: side(),\n    unselectedSideNav: sideNav({ selected: false }),\n    selectedSideNav: sideNav({ noIcon: true, selected: true }),\n    sideNavHeading: sideNavHeading(),\n    help: help(),\n    main: main(),\n    mainInner: mainInner(),\n    contentHead: contentHead(),\n    scrollArea: scrollArea(),\n  }\n})()\n\nexport const AppLauncher: FC<Props> = ({ features: baseFeatures }) => {\n  const {\n    features,\n    page,\n    mode,\n    sortType,\n    searchQuery,\n    changePage,\n    setSortType,\n    onChangeSearchQuery,\n    onClickClearSearchQuery,\n  } = useAppLauncher(baseFeatures)\n\n  const translated = useLocalize({\n    searchInputTitle: {\n      id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',\n      defaultText: 'アプリ名を入力してください。',\n    },\n    favoriteModeText: {\n      id: 'smarthr-ui/AppHeader/Launcher/favoriteModeText',\n      defaultText: 'よく使うアプリ',\n    },\n    allModeText: {\n      id: 'smarthr-ui/AppHeader/Launcher/allModeText',\n      defaultText: 'すべてのアプリ',\n    },\n  })\n\n  return (\n    <div className={CLASS_NAMES.wrapper}>\n      <div className={CLASS_NAMES.searchArea}>\n        <SearchInput\n          name=\"search\"\n          title={translated.searchInputTitle}\n          tooltipMessage={<Translate>{translated.searchInputTitle}</Translate>}\n          width=\"100%\"\n          value={searchQuery}\n          suffix={mode === 'search' && <ClearSearchButton onClick={onClickClearSearchQuery} />}\n          onChange={onChangeSearchQuery}\n        />\n      </div>\n\n      <div className={CLASS_NAMES.inner}>\n        <SideNavs\n          mode={mode}\n          page={page}\n          changePage={changePage}\n          favoriteModeText={translated.favoriteModeText}\n          allModeText={translated.allModeText}\n        />\n        <div className={CLASS_NAMES.main}>\n          <Section className={CLASS_NAMES.mainInner}>\n            <Cluster className={CLASS_NAMES.contentHead} align=\"center\" justify=\"space-between\">\n              <MemoizedSubSubBlockHeading>\n                {mode === 'search' ? (\n                  <Localizer\n                    id=\"smarthr-ui/AppHeader/Launcher/searchResultText\"\n                    defaultText=\"検索結果\"\n                  />\n                ) : page === 'favorite' ? (\n                  translated.favoriteModeText\n                ) : (\n                  translated.allModeText\n                )}\n              </MemoizedSubSubBlockHeading>\n\n              {(mode === 'search' || page === 'all') && (\n                <AppLauncherSortDropdown sortType={sortType} onSelectSortType={setSortType} />\n              )}\n            </Cluster>\n\n            <Scroller className={CLASS_NAMES.scrollArea}>\n              <AppLauncherFeatures features={features} page={page} />\n            </Scroller>\n          </Section>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ClearSearchButton = memo<{ onClick: () => void }>(({ onClick }) => (\n  <UnstyledButton onClick={onClick}>\n    <FaCircleXmarkIcon />\n  </UnstyledButton>\n))\n\nconst SideNavs = memo<\n  Pick<ReturnType<typeof useAppLauncher>, 'mode' | 'page' | 'changePage'> & {\n    favoriteModeText: string\n    allModeText: string\n  }\n>(({ mode, page, changePage, favoriteModeText, allModeText }) => {\n  const theme = useTheme()\n  const listHeadingId = useId()\n  const isNotSearch = mode !== 'search'\n  const isFavorite = isNotSearch && page === 'favorite'\n  const isAll = isNotSearch && page === 'all'\n\n  const unselectedItems = useMemo(\n    () => [\n      {\n        id: 'favorite',\n        title: <Translate>{favoriteModeText}</Translate>,\n        prefix: <FaStarIcon color={isFavorite ? theme.textColor.white : undefined} />,\n        current: isFavorite,\n      },\n    ],\n    [isFavorite, favoriteModeText, theme.textColor.white],\n  )\n  const selectedItems = useMemo(\n    () => [\n      {\n        id: 'all',\n        title: <Translate>{allModeText}</Translate>,\n        current: isAll,\n      },\n    ],\n    [isAll, allModeText],\n  )\n\n  const onClick = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      changePage(e.currentTarget.value as Launcher['page'])\n    },\n    [changePage],\n  )\n\n  return (\n    <div className={CLASS_NAMES.side}>\n      <SideNav className={CLASS_NAMES.unselectedSideNav} size=\"S\" aria-label={favoriteModeText}>\n        {unselectedItems.map((item) => (\n          <SideNavItemButton\n            key={item.id}\n            id={item.id}\n            prefix={item.prefix}\n            current={item.current}\n            onClick={onClick}\n          >\n            {item.title}\n          </SideNavItemButton>\n        ))}\n      </SideNav>\n\n      <hr />\n\n      <Section>\n        <MemoizedAppListHeading id={listHeadingId} className={CLASS_NAMES.sideNavHeading} />\n        <SideNav className={CLASS_NAMES.selectedSideNav} size=\"S\" aria-labelledby={listHeadingId}>\n          {selectedItems.map((item) => (\n            <SideNavItemButton key={item.id} id={item.id} current={item.current} onClick={onClick}>\n              {item.title}\n            </SideNavItemButton>\n          ))}\n        </SideNav>\n      </Section>\n\n      <HelpLinkArea className={CLASS_NAMES.help}>\n        <Translate>\n          <Localizer id=\"smarthr-ui/AppHeader/Launcher/helpText\" defaultText=\"よく使うアプリとは\" />\n        </Translate>\n      </HelpLinkArea>\n    </div>\n  )\n})\n\nconst HelpLinkArea = memo<PropsWithChildren<{ className: string }>>(({ children, className }) => (\n  <div className={className}>\n    <HelpLink\n      href=\"https://support.smarthr.jp/ja/help/articles/2bfd350d-8e8b-4bbd-a209-426d2eb302cc/\"\n      target=\"_blank\"\n    >\n      {children}\n    </HelpLink>\n  </div>\n))\n\nconst MemoizedSubSubBlockHeading = memo<PropsWithChildren<{ className?: string }>>(\n  ({ children, className }) => (\n    <Heading type=\"subSubBlockTitle\" className={className}>\n      <Translate>{children}</Translate>\n    </Heading>\n  ),\n)\n\nconst MemoizedAppListHeading = memo<{ id: string; className?: string }>(({ id, className }) => (\n  <Heading type=\"subSubBlockTitle\" id={id} className={className}>\n    <Translate>\n      <Localizer id=\"smarthr-ui/AppHeader/Launcher/listText\" defaultText=\"アプリ一覧\" />\n    </Translate>\n  </Heading>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;AACE;AACE;;;AAGC;AACD;;;;AAIC;AACD;AACA;;;;AAIC;AACD;;;;AAIC;;AAED;AACA;;AAEA;;;AAGC;;AAEF;AACD;AACE;AACE;;AAEC;AACF;AACD;AACE;;AAEC;AACF;AACF;AACF;AAED;;;;;;;;AAqBI;;;;;;;;AAQJ;AAEO;;;AAcH;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;;AAqDH;AAEA;AAMA;AAME;AACA;AACA;AACA;AACA;AAEA;AAEI;AACE;AACA;AACA;AACA;AACD;AACF;AAGH;AAEI;AACE;AACA;AACA;AACD;AACF;AAIH;AAEI;AACF;AAIF;AAoCF;AAEA;AAWA;AAQA;;"}
+{"version":3,"file":"AppLauncher.cjs","sources":["../../../../../src/components/AppHeader/components/desktop/AppLauncher.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, memo, useCallback, useId, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../../../hooks/useTheme'\nimport { Localizer, useLocalize } from '../../../../intl'\nimport { UnstyledButton } from '../../../Button'\nimport { Heading } from '../../../Heading'\nimport { FaCircleXmarkIcon, FaStarIcon } from '../../../Icon'\nimport { SearchInput } from '../../../Input'\nimport { Cluster } from '../../../Layout'\nimport { Scroller } from '../../../Scroller'\nimport { Section } from '../../../SectioningContent'\nimport { SideNav, SideNavItemButton } from '../../../SideNav'\nimport { HelpLink } from '../../../TextLink'\nimport { useAppLauncher } from '../../hooks/useAppLauncher'\nimport { AppLauncherFeatures } from '../common/AppLauncherFeatures'\nimport { AppLauncherSortDropdown } from '../common/AppLauncherSortDropdown'\nimport { Translate } from '../common/Translate'\n\nimport type { Launcher } from '../../types'\n\ntype Props = {\n  features: Array<Launcher['feature']>\n}\n\nconst appLauncher = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-AppLauncher',\n      'shr-grid shr-h-[40rem] shr-w-[38rem] shr-grid-rows-[auto_1fr]',\n    ],\n    searchArea: [\n      'smarthr-ui-AppLauncher-searchArea',\n      'shr-border-b-shorthand shr-p-1',\n      '[&_.smarthr-ui-Input]:shr-h-[42px]',\n    ],\n    inner: ['smarthr-ui-AppLauncher-inner', 'shr-grid shr-min-h-0 shr-grid-cols-[11rem_1fr]'],\n    side: [\n      'smarthr-ui-AppLauncher-side',\n      'shr-border-r-shorthand shr-flex shr-flex-col shr-bg-column shr-pb-1 shr-pt-0.5',\n      '[&_hr]:shr-m-0.5 [&_hr]:shr-h-[1px] [&_hr]:shr-border-none [&_hr]:shr-bg-border',\n    ],\n    sideNav: [\n      '[&_.smarthr-ui-SideNav-item>button]:shr-px-1 [&_.smarthr-ui-SideNav-item>button]:shr-py-0.75',\n      '[&_.smarthr-ui-SideNav-item>button>span]:shr-flex-nowrap',\n      '[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-shrink-0 [&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-align-bottom',\n    ],\n    sideNavHeading: ['shr-px-1 shr-py-0.75 shr-text-xs shr-text-black'],\n    help: ['smarthr-ui-AppLauncher-help', 'shr-mt-auto shr-px-1 shr-text-xs'],\n    main: ['smarthr-ui-AppLauncher-main', 'shr-grid shr-min-h-0'],\n    mainInner: ['shr-grid shr-min-h-0 shr-grid-rows-[auto_1fr]'],\n    contentHead: [\n      'shr-min-h-[2rem] shr-px-1 shr-py-0.75',\n      '[&_.smarthr-ui-Heading]:shr-text-black',\n    ],\n    scrollArea: ['shr-h-[509px]'],\n  },\n  variants: {\n    noIcon: {\n      true: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button]:shr-pl-1.5'],\n      },\n    },\n    selected: {\n      false: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-text-grey'],\n      },\n    },\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const {\n    wrapper,\n    searchArea,\n    inner,\n    side,\n    sideNav,\n    sideNavHeading,\n    help,\n    main,\n    mainInner,\n    contentHead,\n    scrollArea,\n  } = appLauncher()\n\n  return {\n    wrapper: wrapper(),\n    searchArea: searchArea(),\n    inner: inner(),\n    side: side(),\n    unselectedSideNav: sideNav({ selected: false }),\n    selectedSideNav: sideNav({ noIcon: true, selected: true }),\n    sideNavHeading: sideNavHeading(),\n    help: help(),\n    main: main(),\n    mainInner: mainInner(),\n    contentHead: contentHead(),\n    scrollArea: scrollArea(),\n  }\n})()\n\nexport const AppLauncher: FC<Props> = ({ features: baseFeatures }) => {\n  const {\n    features,\n    page,\n    mode,\n    sortType,\n    searchQuery,\n    changePage,\n    setSortType,\n    onChangeSearchQuery,\n    onClickClearSearchQuery,\n    callbackRef,\n  } = useAppLauncher(baseFeatures)\n\n  const translated = useLocalize({\n    searchInputTitle: {\n      id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',\n      defaultText: 'アプリ名を入力してください。',\n    },\n    favoriteModeText: {\n      id: 'smarthr-ui/AppHeader/Launcher/favoriteModeText',\n      defaultText: 'よく使うアプリ',\n    },\n    allModeText: {\n      id: 'smarthr-ui/AppHeader/Launcher/allModeText',\n      defaultText: 'すべてのアプリ',\n    },\n  })\n\n  return (\n    <div ref={callbackRef} className={CLASS_NAMES.wrapper}>\n      <div className={CLASS_NAMES.searchArea}>\n        <SearchInput\n          name=\"search\"\n          title={translated.searchInputTitle}\n          tooltipMessage={<Translate>{translated.searchInputTitle}</Translate>}\n          width=\"100%\"\n          value={searchQuery}\n          suffix={mode === 'search' && <ClearSearchButton onClick={onClickClearSearchQuery} />}\n          onChange={onChangeSearchQuery}\n        />\n      </div>\n\n      <div className={CLASS_NAMES.inner}>\n        <SideNavs\n          mode={mode}\n          page={page}\n          changePage={changePage}\n          favoriteModeText={translated.favoriteModeText}\n          allModeText={translated.allModeText}\n        />\n        <div className={CLASS_NAMES.main}>\n          <Section className={CLASS_NAMES.mainInner}>\n            <Cluster className={CLASS_NAMES.contentHead} align=\"center\" justify=\"space-between\">\n              <MemoizedSubSubBlockHeading>\n                {mode === 'search' ? (\n                  <Localizer\n                    id=\"smarthr-ui/AppHeader/Launcher/searchResultText\"\n                    defaultText=\"検索結果\"\n                  />\n                ) : page === 'favorite' ? (\n                  translated.favoriteModeText\n                ) : (\n                  translated.allModeText\n                )}\n              </MemoizedSubSubBlockHeading>\n\n              {(mode === 'search' || page === 'all') && (\n                <AppLauncherSortDropdown sortType={sortType} onSelectSortType={setSortType} />\n              )}\n            </Cluster>\n\n            <Scroller className={CLASS_NAMES.scrollArea}>\n              <AppLauncherFeatures features={features} page={page} />\n            </Scroller>\n          </Section>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ClearSearchButton = memo<{ onClick: () => void }>(({ onClick }) => (\n  <UnstyledButton onClick={onClick}>\n    <FaCircleXmarkIcon />\n  </UnstyledButton>\n))\n\nconst SideNavs = memo<\n  Pick<ReturnType<typeof useAppLauncher>, 'mode' | 'page' | 'changePage'> & {\n    favoriteModeText: string\n    allModeText: string\n  }\n>(({ mode, page, changePage, favoriteModeText, allModeText }) => {\n  const theme = useTheme()\n  const listHeadingId = useId()\n  const isNotSearch = mode !== 'search'\n  const isFavorite = isNotSearch && page === 'favorite'\n  const isAll = isNotSearch && page === 'all'\n\n  const unselectedItems = useMemo(\n    () => [\n      {\n        id: 'favorite',\n        title: <Translate>{favoriteModeText}</Translate>,\n        prefix: <FaStarIcon color={isFavorite ? theme.textColor.white : undefined} />,\n        current: isFavorite,\n      },\n    ],\n    [isFavorite, favoriteModeText, theme.textColor.white],\n  )\n  const selectedItems = useMemo(\n    () => [\n      {\n        id: 'all',\n        title: <Translate>{allModeText}</Translate>,\n        current: isAll,\n      },\n    ],\n    [isAll, allModeText],\n  )\n\n  const onClick = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      changePage(e.currentTarget.value as Launcher['page'])\n    },\n    [changePage],\n  )\n\n  return (\n    <div className={CLASS_NAMES.side}>\n      <SideNav className={CLASS_NAMES.unselectedSideNav} size=\"S\" aria-label={favoriteModeText}>\n        {unselectedItems.map((item) => (\n          <SideNavItemButton\n            key={item.id}\n            id={item.id}\n            prefix={item.prefix}\n            current={item.current}\n            onClick={onClick}\n          >\n            {item.title}\n          </SideNavItemButton>\n        ))}\n      </SideNav>\n\n      <hr />\n\n      <Section>\n        <MemoizedAppListHeading id={listHeadingId} className={CLASS_NAMES.sideNavHeading} />\n        <SideNav className={CLASS_NAMES.selectedSideNav} size=\"S\" aria-labelledby={listHeadingId}>\n          {selectedItems.map((item) => (\n            <SideNavItemButton key={item.id} id={item.id} current={item.current} onClick={onClick}>\n              {item.title}\n            </SideNavItemButton>\n          ))}\n        </SideNav>\n      </Section>\n\n      <HelpLinkArea className={CLASS_NAMES.help}>\n        <Translate>\n          <Localizer id=\"smarthr-ui/AppHeader/Launcher/helpText\" defaultText=\"よく使うアプリとは\" />\n        </Translate>\n      </HelpLinkArea>\n    </div>\n  )\n})\n\nconst HelpLinkArea = memo<PropsWithChildren<{ className: string }>>(({ children, className }) => (\n  <div className={className}>\n    <HelpLink\n      href=\"https://support.smarthr.jp/ja/help/articles/2bfd350d-8e8b-4bbd-a209-426d2eb302cc/\"\n      target=\"_blank\"\n    >\n      {children}\n    </HelpLink>\n  </div>\n))\n\nconst MemoizedSubSubBlockHeading = memo<PropsWithChildren<{ className?: string }>>(\n  ({ children, className }) => (\n    <Heading type=\"subSubBlockTitle\" className={className}>\n      <Translate>{children}</Translate>\n    </Heading>\n  ),\n)\n\nconst MemoizedAppListHeading = memo<{ id: string; className?: string }>(({ id, className }) => (\n  <Heading type=\"subSubBlockTitle\" id={id} className={className}>\n    <Translate>\n      <Localizer id=\"smarthr-ui/AppHeader/Launcher/listText\" defaultText=\"アプリ一覧\" />\n    </Translate>\n  </Heading>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;AACE;AACE;;;AAGC;AACD;;;;AAIC;AACD;AACA;;;;AAIC;AACD;;;;AAIC;;AAED;AACA;;AAEA;;;AAGC;;AAEF;AACD;AACE;AACE;;AAEC;AACF;AACD;AACE;;AAEC;AACF;AACF;AACF;AAED;;;;;;;;AAqBI;;;;;;;;AAQJ;AAEO;;;AAeH;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;;AAqDH;AAEA;AAMA;AAME;AACA;AACA;AACA;AACA;AAEA;AAEI;AACE;AACA;AACA;AACA;AACD;AACF;AAGH;AAEI;AACE;AACA;AACA;AACD;AACF;AAIH;AAEI;AACF;AAIF;AAoCF;AAEA;AAWA;AAQA;;"}

package/lib/components/AppHeader/components/desktop/AppLauncher.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo, useId, useMemo, useCallback } 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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.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.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 import { useTheme } from '../../../../hooks/useTheme.js';
 import '../../../../intl/IntlProvider.js';
 import { useLocalize } from '../../../../intl/useIntl.js';
@@ -103,7 +103,7 @@ const CLASS_NAMES = (() => {
     };
 })();
 const AppLauncher = ({ features: baseFeatures }) => {
-    const { features, page, mode, sortType, searchQuery, changePage, setSortType, onChangeSearchQuery, onClickClearSearchQuery, } = useAppLauncher(baseFeatures);
+    const { features, page, mode, sortType, searchQuery, changePage, setSortType, onChangeSearchQuery, onClickClearSearchQuery, callbackRef, } = useAppLauncher(baseFeatures);
     const translated = useLocalize({
         searchInputTitle: {
             id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',
@@ -118,7 +118,7 @@ const AppLauncher = ({ features: baseFeatures }) => {
             defaultText: 'すべてのアプリ',
         },
     });
-    return (jsxs("div", { className: CLASS_NAMES.wrapper, children: [jsx("div", { className: CLASS_NAMES.searchArea, children: jsx(SearchInput, { name: "search", title: translated.searchInputTitle, tooltipMessage: jsx(Translate, { children: translated.searchInputTitle }), width: "100%", value: searchQuery, suffix: mode === 'search' && jsx(ClearSearchButton, { onClick: onClickClearSearchQuery }), onChange: onChangeSearchQuery }) }), jsxs("div", { className: CLASS_NAMES.inner, children: [jsx(SideNavs, { mode: mode, page: page, changePage: changePage, favoriteModeText: translated.favoriteModeText, allModeText: translated.allModeText }), jsx("div", { className: CLASS_NAMES.main, children: jsxs(Section, { className: CLASS_NAMES.mainInner, children: [jsxs(Cluster, { className: CLASS_NAMES.contentHead, align: "center", justify: "space-between", children: [jsx(MemoizedSubSubBlockHeading, { children: mode === 'search' ? (jsx(Localizer, { id: "smarthr-ui/AppHeader/Launcher/searchResultText", defaultText: "\u691C\u7D22\u7D50\u679C" })) : page === 'favorite' ? (translated.favoriteModeText) : (translated.allModeText) }), (mode === 'search' || page === 'all') && (jsx(AppLauncherSortDropdown, { sortType: sortType, onSelectSortType: setSortType }))] }), jsx(Scroller, { className: CLASS_NAMES.scrollArea, children: jsx(AppLauncherFeatures, { features: features, page: page }) })] }) })] })] }));
+    return (jsxs("div", { ref: callbackRef, className: CLASS_NAMES.wrapper, children: [jsx("div", { className: CLASS_NAMES.searchArea, children: jsx(SearchInput, { name: "search", title: translated.searchInputTitle, tooltipMessage: jsx(Translate, { children: translated.searchInputTitle }), width: "100%", value: searchQuery, suffix: mode === 'search' && jsx(ClearSearchButton, { onClick: onClickClearSearchQuery }), onChange: onChangeSearchQuery }) }), jsxs("div", { className: CLASS_NAMES.inner, children: [jsx(SideNavs, { mode: mode, page: page, changePage: changePage, favoriteModeText: translated.favoriteModeText, allModeText: translated.allModeText }), jsx("div", { className: CLASS_NAMES.main, children: jsxs(Section, { className: CLASS_NAMES.mainInner, children: [jsxs(Cluster, { className: CLASS_NAMES.contentHead, align: "center", justify: "space-between", children: [jsx(MemoizedSubSubBlockHeading, { children: mode === 'search' ? (jsx(Localizer, { id: "smarthr-ui/AppHeader/Launcher/searchResultText", defaultText: "\u691C\u7D22\u7D50\u679C" })) : page === 'favorite' ? (translated.favoriteModeText) : (translated.allModeText) }), (mode === 'search' || page === 'all') && (jsx(AppLauncherSortDropdown, { sortType: sortType, onSelectSortType: setSortType }))] }), jsx(Scroller, { className: CLASS_NAMES.scrollArea, children: jsx(AppLauncherFeatures, { features: features, page: page }) })] }) })] })] }));
 };
 const ClearSearchButton = memo(({ onClick }) => (jsx(UnstyledButton, { onClick: onClick, children: jsx(FaCircleXmarkIcon, {}) })));
 const SideNavs = memo(({ mode, page, changePage, favoriteModeText, allModeText }) => {

package/lib/components/AppHeader/components/desktop/AppLauncher.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppLauncher.js","sources":["../../../../../src/components/AppHeader/components/desktop/AppLauncher.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, memo, useCallback, useId, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../../../hooks/useTheme'\nimport { Localizer, useLocalize } from '../../../../intl'\nimport { UnstyledButton } from '../../../Button'\nimport { Heading } from '../../../Heading'\nimport { FaCircleXmarkIcon, FaStarIcon } from '../../../Icon'\nimport { SearchInput } from '../../../Input'\nimport { Cluster } from '../../../Layout'\nimport { Scroller } from '../../../Scroller'\nimport { Section } from '../../../SectioningContent'\nimport { SideNav, SideNavItemButton } from '../../../SideNav'\nimport { HelpLink } from '../../../TextLink'\nimport { useAppLauncher } from '../../hooks/useAppLauncher'\nimport { AppLauncherFeatures } from '../common/AppLauncherFeatures'\nimport { AppLauncherSortDropdown } from '../common/AppLauncherSortDropdown'\nimport { Translate } from '../common/Translate'\n\nimport type { Launcher } from '../../types'\n\ntype Props = {\n  features: Array<Launcher['feature']>\n}\n\nconst appLauncher = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-AppLauncher',\n      'shr-grid shr-h-[40rem] shr-w-[38rem] shr-grid-rows-[auto_1fr]',\n    ],\n    searchArea: [\n      'smarthr-ui-AppLauncher-searchArea',\n      'shr-border-b-shorthand shr-p-1',\n      '[&_.smarthr-ui-Input]:shr-h-[42px]',\n    ],\n    inner: ['smarthr-ui-AppLauncher-inner', 'shr-grid shr-min-h-0 shr-grid-cols-[11rem_1fr]'],\n    side: [\n      'smarthr-ui-AppLauncher-side',\n      'shr-border-r-shorthand shr-flex shr-flex-col shr-bg-column shr-pb-1 shr-pt-0.5',\n      '[&_hr]:shr-m-0.5 [&_hr]:shr-h-[1px] [&_hr]:shr-border-none [&_hr]:shr-bg-border',\n    ],\n    sideNav: [\n      '[&_.smarthr-ui-SideNav-item>button]:shr-px-1 [&_.smarthr-ui-SideNav-item>button]:shr-py-0.75',\n      '[&_.smarthr-ui-SideNav-item>button>span]:shr-flex-nowrap',\n      '[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-shrink-0 [&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-align-bottom',\n    ],\n    sideNavHeading: ['shr-px-1 shr-py-0.75 shr-text-xs shr-text-black'],\n    help: ['smarthr-ui-AppLauncher-help', 'shr-mt-auto shr-px-1 shr-text-xs'],\n    main: ['smarthr-ui-AppLauncher-main', 'shr-grid shr-min-h-0'],\n    mainInner: ['shr-grid shr-min-h-0 shr-grid-rows-[auto_1fr]'],\n    contentHead: [\n      'shr-min-h-[2rem] shr-px-1 shr-py-0.75',\n      '[&_.smarthr-ui-Heading]:shr-text-black',\n    ],\n    scrollArea: ['shr-h-[509px]'],\n  },\n  variants: {\n    noIcon: {\n      true: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button]:shr-pl-1.5'],\n      },\n    },\n    selected: {\n      false: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-text-grey'],\n      },\n    },\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const {\n    wrapper,\n    searchArea,\n    inner,\n    side,\n    sideNav,\n    sideNavHeading,\n    help,\n    main,\n    mainInner,\n    contentHead,\n    scrollArea,\n  } = appLauncher()\n\n  return {\n    wrapper: wrapper(),\n    searchArea: searchArea(),\n    inner: inner(),\n    side: side(),\n    unselectedSideNav: sideNav({ selected: false }),\n    selectedSideNav: sideNav({ noIcon: true, selected: true }),\n    sideNavHeading: sideNavHeading(),\n    help: help(),\n    main: main(),\n    mainInner: mainInner(),\n    contentHead: contentHead(),\n    scrollArea: scrollArea(),\n  }\n})()\n\nexport const AppLauncher: FC<Props> = ({ features: baseFeatures }) => {\n  const {\n    features,\n    page,\n    mode,\n    sortType,\n    searchQuery,\n    changePage,\n    setSortType,\n    onChangeSearchQuery,\n    onClickClearSearchQuery,\n  } = useAppLauncher(baseFeatures)\n\n  const translated = useLocalize({\n    searchInputTitle: {\n      id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',\n      defaultText: 'アプリ名を入力してください。',\n    },\n    favoriteModeText: {\n      id: 'smarthr-ui/AppHeader/Launcher/favoriteModeText',\n      defaultText: 'よく使うアプリ',\n    },\n    allModeText: {\n      id: 'smarthr-ui/AppHeader/Launcher/allModeText',\n      defaultText: 'すべてのアプリ',\n    },\n  })\n\n  return (\n    <div className={CLASS_NAMES.wrapper}>\n      <div className={CLASS_NAMES.searchArea}>\n        <SearchInput\n          name=\"search\"\n          title={translated.searchInputTitle}\n          tooltipMessage={<Translate>{translated.searchInputTitle}</Translate>}\n          width=\"100%\"\n          value={searchQuery}\n          suffix={mode === 'search' && <ClearSearchButton onClick={onClickClearSearchQuery} />}\n          onChange={onChangeSearchQuery}\n        />\n      </div>\n\n      <div className={CLASS_NAMES.inner}>\n        <SideNavs\n          mode={mode}\n          page={page}\n          changePage={changePage}\n          favoriteModeText={translated.favoriteModeText}\n          allModeText={translated.allModeText}\n        />\n        <div className={CLASS_NAMES.main}>\n          <Section className={CLASS_NAMES.mainInner}>\n            <Cluster className={CLASS_NAMES.contentHead} align=\"center\" justify=\"space-between\">\n              <MemoizedSubSubBlockHeading>\n                {mode === 'search' ? (\n                  <Localizer\n                    id=\"smarthr-ui/AppHeader/Launcher/searchResultText\"\n                    defaultText=\"検索結果\"\n                  />\n                ) : page === 'favorite' ? (\n                  translated.favoriteModeText\n                ) : (\n                  translated.allModeText\n                )}\n              </MemoizedSubSubBlockHeading>\n\n              {(mode === 'search' || page === 'all') && (\n                <AppLauncherSortDropdown sortType={sortType} onSelectSortType={setSortType} />\n              )}\n            </Cluster>\n\n            <Scroller className={CLASS_NAMES.scrollArea}>\n              <AppLauncherFeatures features={features} page={page} />\n            </Scroller>\n          </Section>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ClearSearchButton = memo<{ onClick: () => void }>(({ onClick }) => (\n  <UnstyledButton onClick={onClick}>\n    <FaCircleXmarkIcon />\n  </UnstyledButton>\n))\n\nconst SideNavs = memo<\n  Pick<ReturnType<typeof useAppLauncher>, 'mode' | 'page' | 'changePage'> & {\n    favoriteModeText: string\n    allModeText: string\n  }\n>(({ mode, page, changePage, favoriteModeText, allModeText }) => {\n  const theme = useTheme()\n  const listHeadingId = useId()\n  const isNotSearch = mode !== 'search'\n  const isFavorite = isNotSearch && page === 'favorite'\n  const isAll = isNotSearch && page === 'all'\n\n  const unselectedItems = useMemo(\n    () => [\n      {\n        id: 'favorite',\n        title: <Translate>{favoriteModeText}</Translate>,\n        prefix: <FaStarIcon color={isFavorite ? theme.textColor.white : undefined} />,\n        current: isFavorite,\n      },\n    ],\n    [isFavorite, favoriteModeText, theme.textColor.white],\n  )\n  const selectedItems = useMemo(\n    () => [\n      {\n        id: 'all',\n        title: <Translate>{allModeText}</Translate>,\n        current: isAll,\n      },\n    ],\n    [isAll, allModeText],\n  )\n\n  const onClick = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      changePage(e.currentTarget.value as Launcher['page'])\n    },\n    [changePage],\n  )\n\n  return (\n    <div className={CLASS_NAMES.side}>\n      <SideNav className={CLASS_NAMES.unselectedSideNav} size=\"S\" aria-label={favoriteModeText}>\n        {unselectedItems.map((item) => (\n          <SideNavItemButton\n            key={item.id}\n            id={item.id}\n            prefix={item.prefix}\n            current={item.current}\n            onClick={onClick}\n          >\n            {item.title}\n          </SideNavItemButton>\n        ))}\n      </SideNav>\n\n      <hr />\n\n      <Section>\n        <MemoizedAppListHeading id={listHeadingId} className={CLASS_NAMES.sideNavHeading} />\n        <SideNav className={CLASS_NAMES.selectedSideNav} size=\"S\" aria-labelledby={listHeadingId}>\n          {selectedItems.map((item) => (\n            <SideNavItemButton key={item.id} id={item.id} current={item.current} onClick={onClick}>\n              {item.title}\n            </SideNavItemButton>\n          ))}\n        </SideNav>\n      </Section>\n\n      <HelpLinkArea className={CLASS_NAMES.help}>\n        <Translate>\n          <Localizer id=\"smarthr-ui/AppHeader/Launcher/helpText\" defaultText=\"よく使うアプリとは\" />\n        </Translate>\n      </HelpLinkArea>\n    </div>\n  )\n})\n\nconst HelpLinkArea = memo<PropsWithChildren<{ className: string }>>(({ children, className }) => (\n  <div className={className}>\n    <HelpLink\n      href=\"https://support.smarthr.jp/ja/help/articles/2bfd350d-8e8b-4bbd-a209-426d2eb302cc/\"\n      target=\"_blank\"\n    >\n      {children}\n    </HelpLink>\n  </div>\n))\n\nconst MemoizedSubSubBlockHeading = memo<PropsWithChildren<{ className?: string }>>(\n  ({ children, className }) => (\n    <Heading type=\"subSubBlockTitle\" className={className}>\n      <Translate>{children}</Translate>\n    </Heading>\n  ),\n)\n\nconst MemoizedAppListHeading = memo<{ id: string; className?: string }>(({ id, className }) => (\n  <Heading type=\"subSubBlockTitle\" id={id} className={className}>\n    <Translate>\n      <Localizer id=\"smarthr-ui/AppHeader/Launcher/listText\" defaultText=\"アプリ一覧\" />\n    </Translate>\n  </Heading>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;AACE;AACE;;;AAGC;AACD;;;;AAIC;AACD;AACA;;;;AAIC;AACD;;;;AAIC;;AAED;AACA;;AAEA;;;AAGC;;AAEF;AACD;AACE;AACE;;AAEC;AACF;AACD;AACE;;AAEC;AACF;AACF;AACF;AAED;;;;;;;;AAqBI;;;;;;;;AAQJ;AAEO;;;AAcH;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;;AAqDH;AAEA;AAMA;AAME;AACA;AACA;AACA;AACA;AAEA;AAEI;AACE;AACA;AACA;AACA;AACD;AACF;AAGH;AAEI;AACE;AACA;AACA;AACD;AACF;AAIH;AAEI;AACF;AAIF;AAoCF;AAEA;AAWA;AAQA;;"}
+{"version":3,"file":"AppLauncher.js","sources":["../../../../../src/components/AppHeader/components/desktop/AppLauncher.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, memo, useCallback, useId, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../../../hooks/useTheme'\nimport { Localizer, useLocalize } from '../../../../intl'\nimport { UnstyledButton } from '../../../Button'\nimport { Heading } from '../../../Heading'\nimport { FaCircleXmarkIcon, FaStarIcon } from '../../../Icon'\nimport { SearchInput } from '../../../Input'\nimport { Cluster } from '../../../Layout'\nimport { Scroller } from '../../../Scroller'\nimport { Section } from '../../../SectioningContent'\nimport { SideNav, SideNavItemButton } from '../../../SideNav'\nimport { HelpLink } from '../../../TextLink'\nimport { useAppLauncher } from '../../hooks/useAppLauncher'\nimport { AppLauncherFeatures } from '../common/AppLauncherFeatures'\nimport { AppLauncherSortDropdown } from '../common/AppLauncherSortDropdown'\nimport { Translate } from '../common/Translate'\n\nimport type { Launcher } from '../../types'\n\ntype Props = {\n  features: Array<Launcher['feature']>\n}\n\nconst appLauncher = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-AppLauncher',\n      'shr-grid shr-h-[40rem] shr-w-[38rem] shr-grid-rows-[auto_1fr]',\n    ],\n    searchArea: [\n      'smarthr-ui-AppLauncher-searchArea',\n      'shr-border-b-shorthand shr-p-1',\n      '[&_.smarthr-ui-Input]:shr-h-[42px]',\n    ],\n    inner: ['smarthr-ui-AppLauncher-inner', 'shr-grid shr-min-h-0 shr-grid-cols-[11rem_1fr]'],\n    side: [\n      'smarthr-ui-AppLauncher-side',\n      'shr-border-r-shorthand shr-flex shr-flex-col shr-bg-column shr-pb-1 shr-pt-0.5',\n      '[&_hr]:shr-m-0.5 [&_hr]:shr-h-[1px] [&_hr]:shr-border-none [&_hr]:shr-bg-border',\n    ],\n    sideNav: [\n      '[&_.smarthr-ui-SideNav-item>button]:shr-px-1 [&_.smarthr-ui-SideNav-item>button]:shr-py-0.75',\n      '[&_.smarthr-ui-SideNav-item>button>span]:shr-flex-nowrap',\n      '[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-shrink-0 [&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-align-bottom',\n    ],\n    sideNavHeading: ['shr-px-1 shr-py-0.75 shr-text-xs shr-text-black'],\n    help: ['smarthr-ui-AppLauncher-help', 'shr-mt-auto shr-px-1 shr-text-xs'],\n    main: ['smarthr-ui-AppLauncher-main', 'shr-grid shr-min-h-0'],\n    mainInner: ['shr-grid shr-min-h-0 shr-grid-rows-[auto_1fr]'],\n    contentHead: [\n      'shr-min-h-[2rem] shr-px-1 shr-py-0.75',\n      '[&_.smarthr-ui-Heading]:shr-text-black',\n    ],\n    scrollArea: ['shr-h-[509px]'],\n  },\n  variants: {\n    noIcon: {\n      true: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button]:shr-pl-1.5'],\n      },\n    },\n    selected: {\n      false: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-text-grey'],\n      },\n    },\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const {\n    wrapper,\n    searchArea,\n    inner,\n    side,\n    sideNav,\n    sideNavHeading,\n    help,\n    main,\n    mainInner,\n    contentHead,\n    scrollArea,\n  } = appLauncher()\n\n  return {\n    wrapper: wrapper(),\n    searchArea: searchArea(),\n    inner: inner(),\n    side: side(),\n    unselectedSideNav: sideNav({ selected: false }),\n    selectedSideNav: sideNav({ noIcon: true, selected: true }),\n    sideNavHeading: sideNavHeading(),\n    help: help(),\n    main: main(),\n    mainInner: mainInner(),\n    contentHead: contentHead(),\n    scrollArea: scrollArea(),\n  }\n})()\n\nexport const AppLauncher: FC<Props> = ({ features: baseFeatures }) => {\n  const {\n    features,\n    page,\n    mode,\n    sortType,\n    searchQuery,\n    changePage,\n    setSortType,\n    onChangeSearchQuery,\n    onClickClearSearchQuery,\n    callbackRef,\n  } = useAppLauncher(baseFeatures)\n\n  const translated = useLocalize({\n    searchInputTitle: {\n      id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',\n      defaultText: 'アプリ名を入力してください。',\n    },\n    favoriteModeText: {\n      id: 'smarthr-ui/AppHeader/Launcher/favoriteModeText',\n      defaultText: 'よく使うアプリ',\n    },\n    allModeText: {\n      id: 'smarthr-ui/AppHeader/Launcher/allModeText',\n      defaultText: 'すべてのアプリ',\n    },\n  })\n\n  return (\n    <div ref={callbackRef} className={CLASS_NAMES.wrapper}>\n      <div className={CLASS_NAMES.searchArea}>\n        <SearchInput\n          name=\"search\"\n          title={translated.searchInputTitle}\n          tooltipMessage={<Translate>{translated.searchInputTitle}</Translate>}\n          width=\"100%\"\n          value={searchQuery}\n          suffix={mode === 'search' && <ClearSearchButton onClick={onClickClearSearchQuery} />}\n          onChange={onChangeSearchQuery}\n        />\n      </div>\n\n      <div className={CLASS_NAMES.inner}>\n        <SideNavs\n          mode={mode}\n          page={page}\n          changePage={changePage}\n          favoriteModeText={translated.favoriteModeText}\n          allModeText={translated.allModeText}\n        />\n        <div className={CLASS_NAMES.main}>\n          <Section className={CLASS_NAMES.mainInner}>\n            <Cluster className={CLASS_NAMES.contentHead} align=\"center\" justify=\"space-between\">\n              <MemoizedSubSubBlockHeading>\n                {mode === 'search' ? (\n                  <Localizer\n                    id=\"smarthr-ui/AppHeader/Launcher/searchResultText\"\n                    defaultText=\"検索結果\"\n                  />\n                ) : page === 'favorite' ? (\n                  translated.favoriteModeText\n                ) : (\n                  translated.allModeText\n                )}\n              </MemoizedSubSubBlockHeading>\n\n              {(mode === 'search' || page === 'all') && (\n                <AppLauncherSortDropdown sortType={sortType} onSelectSortType={setSortType} />\n              )}\n            </Cluster>\n\n            <Scroller className={CLASS_NAMES.scrollArea}>\n              <AppLauncherFeatures features={features} page={page} />\n            </Scroller>\n          </Section>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ClearSearchButton = memo<{ onClick: () => void }>(({ onClick }) => (\n  <UnstyledButton onClick={onClick}>\n    <FaCircleXmarkIcon />\n  </UnstyledButton>\n))\n\nconst SideNavs = memo<\n  Pick<ReturnType<typeof useAppLauncher>, 'mode' | 'page' | 'changePage'> & {\n    favoriteModeText: string\n    allModeText: string\n  }\n>(({ mode, page, changePage, favoriteModeText, allModeText }) => {\n  const theme = useTheme()\n  const listHeadingId = useId()\n  const isNotSearch = mode !== 'search'\n  const isFavorite = isNotSearch && page === 'favorite'\n  const isAll = isNotSearch && page === 'all'\n\n  const unselectedItems = useMemo(\n    () => [\n      {\n        id: 'favorite',\n        title: <Translate>{favoriteModeText}</Translate>,\n        prefix: <FaStarIcon color={isFavorite ? theme.textColor.white : undefined} />,\n        current: isFavorite,\n      },\n    ],\n    [isFavorite, favoriteModeText, theme.textColor.white],\n  )\n  const selectedItems = useMemo(\n    () => [\n      {\n        id: 'all',\n        title: <Translate>{allModeText}</Translate>,\n        current: isAll,\n      },\n    ],\n    [isAll, allModeText],\n  )\n\n  const onClick = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      changePage(e.currentTarget.value as Launcher['page'])\n    },\n    [changePage],\n  )\n\n  return (\n    <div className={CLASS_NAMES.side}>\n      <SideNav className={CLASS_NAMES.unselectedSideNav} size=\"S\" aria-label={favoriteModeText}>\n        {unselectedItems.map((item) => (\n          <SideNavItemButton\n            key={item.id}\n            id={item.id}\n            prefix={item.prefix}\n            current={item.current}\n            onClick={onClick}\n          >\n            {item.title}\n          </SideNavItemButton>\n        ))}\n      </SideNav>\n\n      <hr />\n\n      <Section>\n        <MemoizedAppListHeading id={listHeadingId} className={CLASS_NAMES.sideNavHeading} />\n        <SideNav className={CLASS_NAMES.selectedSideNav} size=\"S\" aria-labelledby={listHeadingId}>\n          {selectedItems.map((item) => (\n            <SideNavItemButton key={item.id} id={item.id} current={item.current} onClick={onClick}>\n              {item.title}\n            </SideNavItemButton>\n          ))}\n        </SideNav>\n      </Section>\n\n      <HelpLinkArea className={CLASS_NAMES.help}>\n        <Translate>\n          <Localizer id=\"smarthr-ui/AppHeader/Launcher/helpText\" defaultText=\"よく使うアプリとは\" />\n        </Translate>\n      </HelpLinkArea>\n    </div>\n  )\n})\n\nconst HelpLinkArea = memo<PropsWithChildren<{ className: string }>>(({ children, className }) => (\n  <div className={className}>\n    <HelpLink\n      href=\"https://support.smarthr.jp/ja/help/articles/2bfd350d-8e8b-4bbd-a209-426d2eb302cc/\"\n      target=\"_blank\"\n    >\n      {children}\n    </HelpLink>\n  </div>\n))\n\nconst MemoizedSubSubBlockHeading = memo<PropsWithChildren<{ className?: string }>>(\n  ({ children, className }) => (\n    <Heading type=\"subSubBlockTitle\" className={className}>\n      <Translate>{children}</Translate>\n    </Heading>\n  ),\n)\n\nconst MemoizedAppListHeading = memo<{ id: string; className?: string }>(({ id, className }) => (\n  <Heading type=\"subSubBlockTitle\" id={id} className={className}>\n    <Translate>\n      <Localizer id=\"smarthr-ui/AppHeader/Launcher/listText\" defaultText=\"アプリ一覧\" />\n    </Translate>\n  </Heading>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;AACE;AACE;;;AAGC;AACD;;;;AAIC;AACD;AACA;;;;AAIC;AACD;;;;AAIC;;AAED;AACA;;AAEA;;;AAGC;;AAEF;AACD;AACE;AACE;;AAEC;AACF;AACD;AACE;;AAEC;AACF;AACF;AACF;AAED;;;;;;;;AAqBI;;;;;;;;AAQJ;AAEO;;;AAeH;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;;AAqDH;AAEA;AAMA;AAME;AACA;AACA;AACA;AACA;AAEA;AAEI;AACE;AACA;AACA;AACA;AACD;AACF;AAGH;AAEI;AACE;AACA;AACA;AACD;AACF;AAIH;AAEI;AACF;AAIF;AAoCF;AAEA;AAWA;AAQA;;"}

package/lib/components/AppHeader/components/desktop/DesktopHeader.cjs

@@ -2,7 +2,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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+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');
 require('../../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../../intl/useIntl.cjs');
 require('react-intl');

package/lib/components/AppHeader/components/desktop/DesktopHeader.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { memo, 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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.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.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 import '../../../../intl/IntlProvider.js';
 import { useIntl } from '../../../../intl/useIntl.js';
 import 'react-intl';

package/lib/components/AppHeader/components/desktop/Navigation.cjs

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('./../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+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 components_AppNavi_AppNavi = require('../../../AppNavi/AppNavi.cjs');
 var components_AppNavi_AppNaviAnchor = require('../../../AppNavi/AppNaviAnchor.cjs');
 var components_AppNavi_AppNaviButton = require('../../../AppNavi/AppNaviButton.cjs');

package/lib/components/AppHeader/components/desktop/Navigation.js

@@ -1,6 +1,6 @@
 import { memo, useMemo, createElement } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
-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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.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.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 import { AppNavi } from '../../../AppNavi/AppNavi.js';
 import { AppNaviAnchor } from '../../../AppNavi/AppNaviAnchor.js';
 import { AppNaviButton } from '../../../AppNavi/AppNaviButton.js';

package/lib/components/AppHeader/components/desktop/ReleaseNotesDropdown.cjs

@@ -3,7 +3,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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+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');
 require('../../../../intl/IntlProvider.cjs');
 require('react-intl');
 var intl_Localizer = require('../../../../intl/Localizer.cjs');

package/lib/components/AppHeader/components/desktop/ReleaseNotesDropdown.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo, 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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.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.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 import '../../../../intl/IntlProvider.js';
 import 'react-intl';
 import { Localizer } from '../../../../intl/Localizer.js';

package/lib/components/AppHeader/components/desktop/UserInfo.cjs

@@ -2,7 +2,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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+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');
 require('../../../../intl/IntlProvider.cjs');
 require('react-intl');
 var intl_Localizer = require('../../../../intl/Localizer.cjs');

package/lib/components/AppHeader/components/desktop/UserInfo.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo, 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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.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.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 import '../../../../intl/IntlProvider.js';
 import 'react-intl';
 import { Localizer } from '../../../../intl/Localizer.js';

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

@@ -2,7 +2,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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+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');
 require('../../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../../intl/useIntl.cjs');
 require('react-intl');
@@ -59,14 +59,14 @@ const CLASS_NAMES = (() => {
     };
 })();
 const AppLauncher = ({ features: baseFeatures }) => {
-    const { features, page, mode, sortType, searchQuery, changePage, setSortType, onChangeSearchQuery, onClickClearSearchQuery, } = components_AppHeader_hooks_useAppLauncher.useAppLauncher(baseFeatures);
+    const { features, page, mode, sortType, searchQuery, changePage, setSortType, onChangeSearchQuery, onClickClearSearchQuery, callbackRef, } = components_AppHeader_hooks_useAppLauncher.useAppLauncher(baseFeatures);
     const { searchInputTitle } = intl_useIntl.useLocalize({
         searchInputTitle: {
             id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',
             defaultText: 'アプリ名を入力してください。',
         },
     });
-    return (jsxRuntime.jsxs("div", { className: CLASS_NAMES.wrapper, children: [jsxRuntime.jsx("div", { className: CLASS_NAMES.searchArea, children: jsxRuntime.jsx(components_Input_SearchInput_SearchInput.SearchInput, { name: "search", title: searchInputTitle, tooltipMessage: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: searchInputTitle }), width: "100%", value: searchQuery, suffix: mode === 'search' && jsxRuntime.jsx(ClearSearchButton, { onClick: onClickClearSearchQuery }), onChange: onChangeSearchQuery }) }), jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { className: CLASS_NAMES.headArea, justify: "space-between", align: "center", children: [mode === 'search' ? (jsxRuntime.jsx(SearchResultText, { children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/AppHeader/Launcher/searchResultText", defaultText: "\u691C\u7D22\u7D50\u679C" }) })) : (jsxRuntime.jsx(components_AppHeader_components_mobile_AppLauncherFilterDropdown.AppLauncherFilterDropdown, { page: page, handleSelectPage: changePage })), (mode === 'search' || page === 'all') && (jsxRuntime.jsx(components_AppHeader_components_common_AppLauncherSortDropdown.AppLauncherSortDropdown, { sortType: sortType, onSelectSortType: setSortType }))] }), jsxRuntime.jsx(components_Scroller_Scroller.Scroller, { className: CLASS_NAMES.scrollArea, styleType: "scroll", children: jsxRuntime.jsx(components_AppHeader_components_common_AppLauncherFeatures.AppLauncherFeatures, { features: features, page: page }) }), jsxRuntime.jsx(BottomArea, { className: CLASS_NAMES.bottomArea, children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/AppHeader/Launcher/helpText", defaultText: "\u3088\u304F\u4F7F\u3046\u30A2\u30D7\u30EA\u3068\u306F" }) })] }));
+    return (jsxRuntime.jsxs("div", { ref: callbackRef, className: CLASS_NAMES.wrapper, children: [jsxRuntime.jsx("div", { className: CLASS_NAMES.searchArea, children: jsxRuntime.jsx(components_Input_SearchInput_SearchInput.SearchInput, { name: "search", title: searchInputTitle, tooltipMessage: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: searchInputTitle }), width: "100%", value: searchQuery, suffix: mode === 'search' && jsxRuntime.jsx(ClearSearchButton, { onClick: onClickClearSearchQuery }), onChange: onChangeSearchQuery }) }), jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { className: CLASS_NAMES.headArea, justify: "space-between", align: "center", children: [mode === 'search' ? (jsxRuntime.jsx(SearchResultText, { children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/AppHeader/Launcher/searchResultText", defaultText: "\u691C\u7D22\u7D50\u679C" }) })) : (jsxRuntime.jsx(components_AppHeader_components_mobile_AppLauncherFilterDropdown.AppLauncherFilterDropdown, { page: page, handleSelectPage: changePage })), (mode === 'search' || page === 'all') && (jsxRuntime.jsx(components_AppHeader_components_common_AppLauncherSortDropdown.AppLauncherSortDropdown, { sortType: sortType, onSelectSortType: setSortType }))] }), jsxRuntime.jsx(components_Scroller_Scroller.Scroller, { className: CLASS_NAMES.scrollArea, styleType: "scroll", children: jsxRuntime.jsx(components_AppHeader_components_common_AppLauncherFeatures.AppLauncherFeatures, { features: features, page: page }) }), jsxRuntime.jsx(BottomArea, { className: CLASS_NAMES.bottomArea, children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/AppHeader/Launcher/helpText", defaultText: "\u3088\u304F\u4F7F\u3046\u30A2\u30D7\u30EA\u3068\u306F" }) })] }));
 };
 const ClearSearchButton = React.memo(({ onClick }) => (jsxRuntime.jsx(components_Button_UnstyledButton.UnstyledButton, { onClick: onClick, children: jsxRuntime.jsx(components_Icon_FaIcon.FaCircleXmarkIcon, {}) })));
 const SearchResultText = React.memo(({ children }) => (jsxRuntime.jsx(components_Text_Text.Text, { size: "S", weight: "bold", children: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: children }) })));

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

@@ -1 +1 @@
-{"version":3,"file":"AppLauncher.cjs","sources":["../../../../../src/components/AppHeader/components/mobile/AppLauncher.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, memo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer, useLocalize } from '../../../../intl'\nimport { UnstyledButton } from '../../../Button'\nimport { FaCircleXmarkIcon } from '../../../Icon'\nimport { SearchInput } from '../../../Input'\nimport { Cluster } from '../../../Layout'\nimport { Scroller } from '../../../Scroller'\nimport { Text } from '../../../Text'\nimport { HelpLink } from '../../../TextLink'\nimport { useAppLauncher } from '../../hooks/useAppLauncher'\nimport { AppLauncherFeatures } from '../common/AppLauncherFeatures'\nimport { AppLauncherSortDropdown } from '../common/AppLauncherSortDropdown'\nimport { Translate } from '../common/Translate'\n\nimport { AppLauncherFilterDropdown } from './AppLauncherFilterDropdown'\n\nimport type { Launcher } from '../../types'\n\ntype Props = {\n  features: Array<Launcher['feature']>\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: ['smarthr-ui-AppLauncher', 'shr-flex shr-h-full shr-flex-col'],\n    searchArea: [\n      'smarthr-ui-AppLauncher-searchArea',\n      'shr-border-b-shorthand shr-px-1 shr-py-0.75',\n      '[&_.smarthr-ui-Input]:shr-h-[42px]',\n    ],\n    headArea: 'shr-px-1 shr-py-0.75',\n    scrollArea: 'shr-flex-1 shr-basis-0',\n    bottomArea: 'shr-border-t-shorthand shr-px-1 shr-py-0.75',\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { wrapper, searchArea, headArea, scrollArea, bottomArea } = classNameGenerator()\n\n  return {\n    wrapper: wrapper(),\n    searchArea: searchArea(),\n    headArea: headArea(),\n    scrollArea: scrollArea(),\n    bottomArea: bottomArea(),\n  }\n})()\n\nexport const AppLauncher: FC<Props> = ({ features: baseFeatures }) => {\n  const {\n    features,\n    page,\n    mode,\n    sortType,\n    searchQuery,\n    changePage,\n    setSortType,\n    onChangeSearchQuery,\n    onClickClearSearchQuery,\n  } = useAppLauncher(baseFeatures)\n\n  const { searchInputTitle } = useLocalize({\n    searchInputTitle: {\n      id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',\n      defaultText: 'アプリ名を入力してください。',\n    },\n  })\n\n  return (\n    <div className={CLASS_NAMES.wrapper}>\n      <div className={CLASS_NAMES.searchArea}>\n        <SearchInput\n          name=\"search\"\n          title={searchInputTitle}\n          tooltipMessage={<Translate>{searchInputTitle}</Translate>}\n          width=\"100%\"\n          value={searchQuery}\n          suffix={mode === 'search' && <ClearSearchButton onClick={onClickClearSearchQuery} />}\n          onChange={onChangeSearchQuery}\n        />\n      </div>\n\n      <Cluster className={CLASS_NAMES.headArea} justify=\"space-between\" align=\"center\">\n        {mode === 'search' ? (\n          <SearchResultText>\n            <Localizer id=\"smarthr-ui/AppHeader/Launcher/searchResultText\" defaultText=\"検索結果\" />\n          </SearchResultText>\n        ) : (\n          <AppLauncherFilterDropdown page={page} handleSelectPage={changePage} />\n        )}\n\n        {(mode === 'search' || page === 'all') && (\n          <AppLauncherSortDropdown sortType={sortType} onSelectSortType={setSortType} />\n        )}\n      </Cluster>\n\n      <Scroller className={CLASS_NAMES.scrollArea} styleType=\"scroll\">\n        <AppLauncherFeatures features={features} page={page} />\n      </Scroller>\n\n      <BottomArea className={CLASS_NAMES.bottomArea}>\n        <Localizer id=\"smarthr-ui/AppHeader/Launcher/helpText\" defaultText=\"よく使うアプリとは\" />\n      </BottomArea>\n    </div>\n  )\n}\n\nconst ClearSearchButton = memo<{ onClick: () => void }>(({ onClick }) => (\n  <UnstyledButton onClick={onClick}>\n    <FaCircleXmarkIcon />\n  </UnstyledButton>\n))\n\nconst SearchResultText = memo<PropsWithChildren>(({ children }) => (\n  <Text size=\"S\" weight=\"bold\">\n    <Translate>{children}</Translate>\n  </Text>\n))\n\nconst BottomArea = memo<PropsWithChildren<{ className: string }>>(({ children, className }) => (\n  <div className={className}>\n    <Text size=\"XS\">\n      <HelpLink\n        href=\"https://support.smarthr.jp/ja/help/articles/2bfd350d-8e8b-4bbd-a209-426d2eb302cc/\"\n        target=\"_blank\"\n      >\n        <Translate>{children}</Translate>\n      </HelpLink>\n    </Text>\n  </div>\n))\n"],"names":["tv","useAppLauncher","useLocalize","_jsxs","_jsx","SearchInput","Translate","Cluster","Localizer","AppLauncherFilterDropdown","AppLauncherSortDropdown","Scroller","AppLauncherFeatures","memo","UnstyledButton","FaCircleXmarkIcon","Text","HelpLink"],"mappings":"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"}
+{"version":3,"file":"AppLauncher.cjs","sources":["../../../../../src/components/AppHeader/components/mobile/AppLauncher.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, memo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer, useLocalize } from '../../../../intl'\nimport { UnstyledButton } from '../../../Button'\nimport { FaCircleXmarkIcon } from '../../../Icon'\nimport { SearchInput } from '../../../Input'\nimport { Cluster } from '../../../Layout'\nimport { Scroller } from '../../../Scroller'\nimport { Text } from '../../../Text'\nimport { HelpLink } from '../../../TextLink'\nimport { useAppLauncher } from '../../hooks/useAppLauncher'\nimport { AppLauncherFeatures } from '../common/AppLauncherFeatures'\nimport { AppLauncherSortDropdown } from '../common/AppLauncherSortDropdown'\nimport { Translate } from '../common/Translate'\n\nimport { AppLauncherFilterDropdown } from './AppLauncherFilterDropdown'\n\nimport type { Launcher } from '../../types'\n\ntype Props = {\n  features: Array<Launcher['feature']>\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: ['smarthr-ui-AppLauncher', 'shr-flex shr-h-full shr-flex-col'],\n    searchArea: [\n      'smarthr-ui-AppLauncher-searchArea',\n      'shr-border-b-shorthand shr-px-1 shr-py-0.75',\n      '[&_.smarthr-ui-Input]:shr-h-[42px]',\n    ],\n    headArea: 'shr-px-1 shr-py-0.75',\n    scrollArea: 'shr-flex-1 shr-basis-0',\n    bottomArea: 'shr-border-t-shorthand shr-px-1 shr-py-0.75',\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { wrapper, searchArea, headArea, scrollArea, bottomArea } = classNameGenerator()\n\n  return {\n    wrapper: wrapper(),\n    searchArea: searchArea(),\n    headArea: headArea(),\n    scrollArea: scrollArea(),\n    bottomArea: bottomArea(),\n  }\n})()\n\nexport const AppLauncher: FC<Props> = ({ features: baseFeatures }) => {\n  const {\n    features,\n    page,\n    mode,\n    sortType,\n    searchQuery,\n    changePage,\n    setSortType,\n    onChangeSearchQuery,\n    onClickClearSearchQuery,\n    callbackRef,\n  } = useAppLauncher(baseFeatures)\n\n  const { searchInputTitle } = useLocalize({\n    searchInputTitle: {\n      id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',\n      defaultText: 'アプリ名を入力してください。',\n    },\n  })\n\n  return (\n    <div ref={callbackRef} className={CLASS_NAMES.wrapper}>\n      <div className={CLASS_NAMES.searchArea}>\n        <SearchInput\n          name=\"search\"\n          title={searchInputTitle}\n          tooltipMessage={<Translate>{searchInputTitle}</Translate>}\n          width=\"100%\"\n          value={searchQuery}\n          suffix={mode === 'search' && <ClearSearchButton onClick={onClickClearSearchQuery} />}\n          onChange={onChangeSearchQuery}\n        />\n      </div>\n\n      <Cluster className={CLASS_NAMES.headArea} justify=\"space-between\" align=\"center\">\n        {mode === 'search' ? (\n          <SearchResultText>\n            <Localizer id=\"smarthr-ui/AppHeader/Launcher/searchResultText\" defaultText=\"検索結果\" />\n          </SearchResultText>\n        ) : (\n          <AppLauncherFilterDropdown page={page} handleSelectPage={changePage} />\n        )}\n\n        {(mode === 'search' || page === 'all') && (\n          <AppLauncherSortDropdown sortType={sortType} onSelectSortType={setSortType} />\n        )}\n      </Cluster>\n\n      <Scroller className={CLASS_NAMES.scrollArea} styleType=\"scroll\">\n        <AppLauncherFeatures features={features} page={page} />\n      </Scroller>\n\n      <BottomArea className={CLASS_NAMES.bottomArea}>\n        <Localizer id=\"smarthr-ui/AppHeader/Launcher/helpText\" defaultText=\"よく使うアプリとは\" />\n      </BottomArea>\n    </div>\n  )\n}\n\nconst ClearSearchButton = memo<{ onClick: () => void }>(({ onClick }) => (\n  <UnstyledButton onClick={onClick}>\n    <FaCircleXmarkIcon />\n  </UnstyledButton>\n))\n\nconst SearchResultText = memo<PropsWithChildren>(({ children }) => (\n  <Text size=\"S\" weight=\"bold\">\n    <Translate>{children}</Translate>\n  </Text>\n))\n\nconst BottomArea = memo<PropsWithChildren<{ className: string }>>(({ children, className }) => (\n  <div className={className}>\n    <Text size=\"XS\">\n      <HelpLink\n        href=\"https://support.smarthr.jp/ja/help/articles/2bfd350d-8e8b-4bbd-a209-426d2eb302cc/\"\n        target=\"_blank\"\n      >\n        <Translate>{children}</Translate>\n      </HelpLink>\n    </Text>\n  </div>\n))\n"],"names":["tv","useAppLauncher","useLocalize","_jsxs","_jsx","SearchInput","Translate","Cluster","Localizer","AppLauncherFilterDropdown","AppLauncherSortDropdown","Scroller","AppLauncherFeatures","memo","UnstyledButton","FaCircleXmarkIcon","Text","HelpLink"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { 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_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.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.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 import '../../../../intl/IntlProvider.js';
 import { useLocalize } from '../../../../intl/useIntl.js';
 import 'react-intl';
@@ -57,14 +57,14 @@ const CLASS_NAMES = (() => {
     };
 })();
 const AppLauncher = ({ features: baseFeatures }) => {
-    const { features, page, mode, sortType, searchQuery, changePage, setSortType, onChangeSearchQuery, onClickClearSearchQuery, } = useAppLauncher(baseFeatures);
+    const { features, page, mode, sortType, searchQuery, changePage, setSortType, onChangeSearchQuery, onClickClearSearchQuery, callbackRef, } = useAppLauncher(baseFeatures);
     const { searchInputTitle } = useLocalize({
         searchInputTitle: {
             id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',
             defaultText: 'アプリ名を入力してください。',
         },
     });
-    return (jsxs("div", { className: CLASS_NAMES.wrapper, children: [jsx("div", { className: CLASS_NAMES.searchArea, children: jsx(SearchInput, { name: "search", title: searchInputTitle, tooltipMessage: jsx(Translate, { children: searchInputTitle }), width: "100%", value: searchQuery, suffix: mode === 'search' && jsx(ClearSearchButton, { onClick: onClickClearSearchQuery }), onChange: onChangeSearchQuery }) }), jsxs(Cluster, { className: CLASS_NAMES.headArea, justify: "space-between", align: "center", children: [mode === 'search' ? (jsx(SearchResultText, { children: jsx(Localizer, { id: "smarthr-ui/AppHeader/Launcher/searchResultText", defaultText: "\u691C\u7D22\u7D50\u679C" }) })) : (jsx(AppLauncherFilterDropdown, { page: page, handleSelectPage: changePage })), (mode === 'search' || page === 'all') && (jsx(AppLauncherSortDropdown, { sortType: sortType, onSelectSortType: setSortType }))] }), jsx(Scroller, { className: CLASS_NAMES.scrollArea, styleType: "scroll", children: jsx(AppLauncherFeatures, { features: features, page: page }) }), jsx(BottomArea, { className: CLASS_NAMES.bottomArea, children: jsx(Localizer, { id: "smarthr-ui/AppHeader/Launcher/helpText", defaultText: "\u3088\u304F\u4F7F\u3046\u30A2\u30D7\u30EA\u3068\u306F" }) })] }));
+    return (jsxs("div", { ref: callbackRef, className: CLASS_NAMES.wrapper, children: [jsx("div", { className: CLASS_NAMES.searchArea, children: jsx(SearchInput, { name: "search", title: searchInputTitle, tooltipMessage: jsx(Translate, { children: searchInputTitle }), width: "100%", value: searchQuery, suffix: mode === 'search' && jsx(ClearSearchButton, { onClick: onClickClearSearchQuery }), onChange: onChangeSearchQuery }) }), jsxs(Cluster, { className: CLASS_NAMES.headArea, justify: "space-between", align: "center", children: [mode === 'search' ? (jsx(SearchResultText, { children: jsx(Localizer, { id: "smarthr-ui/AppHeader/Launcher/searchResultText", defaultText: "\u691C\u7D22\u7D50\u679C" }) })) : (jsx(AppLauncherFilterDropdown, { page: page, handleSelectPage: changePage })), (mode === 'search' || page === 'all') && (jsx(AppLauncherSortDropdown, { sortType: sortType, onSelectSortType: setSortType }))] }), jsx(Scroller, { className: CLASS_NAMES.scrollArea, styleType: "scroll", children: jsx(AppLauncherFeatures, { features: features, page: page }) }), jsx(BottomArea, { className: CLASS_NAMES.bottomArea, children: jsx(Localizer, { id: "smarthr-ui/AppHeader/Launcher/helpText", defaultText: "\u3088\u304F\u4F7F\u3046\u30A2\u30D7\u30EA\u3068\u306F" }) })] }));
 };
 const ClearSearchButton = memo(({ onClick }) => (jsx(UnstyledButton, { onClick: onClick, children: jsx(FaCircleXmarkIcon, {}) })));
 const SearchResultText = memo(({ children }) => (jsx(Text, { size: "S", weight: "bold", children: jsx(Translate, { children: children }) })));