smarthr-ui 99.7.2 → 99.9.0

package/lib/components/AccordionPanel/{AccordionPanelTrigger.d.ts → client/AccordionPanelTrigger.d.ts}

@@ -1,13 +1,15 @@
-import { type ComponentPropsWithoutRef, type FC, type PropsWithChildren } from 'react';
-import { type HeadingTagTypes } from '../Heading';
-import type { TextProps } from '../Text';
+import { type ComponentProps, type ComponentPropsWithoutRef, type FC, type PropsWithChildren } from 'react';
+import { Heading } from '../../Heading';
+import type { Text } from '../../Text';
+type TextProps = ComponentProps<typeof Text>;
+type HeadingProps = ComponentProps<typeof Heading>;
 type BaseProps = PropsWithChildren<{
     /** ヘッダ部分のテキストのスタイル */
     headingType?: Exclude<TextProps['styleType'], 'screenTitle'>;
     /**
      * 可能な限り利用せず、SectioningContent(Article, Aside, Nav, Section)を使ってHeadingと関連する範囲を明確に指定する方法を検討してください
      */
-    unrecommendedHeadingTag?: HeadingTagTypes;
+    unrecommendedHeadingTag?: HeadingProps['unrecommendedTag'];
 }>;
 type Props = BaseProps & Omit<ComponentPropsWithoutRef<'button'>, keyof BaseProps>;
 export declare const AccordionPanelTrigger: FC<Props>;

package/lib/components/AccordionPanel/{AccordionPanelTrigger.js → client/AccordionPanelTrigger.js}

@@ -1,19 +1,20 @@
 "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.16.2_@swc_helpers_eb41b3e12c2b05515b240ca2bf300a3e/vendor/tailwind-variants/dist/index.js';
-import { getIsInclude } from '../../libs/map.js';
-import { Heading } from '../Heading/client/Heading.js';
-import '../Heading/client/PageHeading/PageHeading.js';
-import { FaCaretRightIcon, FaCaretDownIcon } from '../Icon/FaIcon.js';
-import '../Icon/generateIcon.js';
-import '../Icon/OpenInNewTabIcon.js';
-import '../Layout/Stack/Stack.js';
-import { Cluster } from '../Layout/Cluster/Cluster.js';
-import '../Layout/Reel/Reel.js';
-import '../Layout/Sidebar/Sidebar.js';
-import '../Layout/Center/Center.js';
-import '../Layout/Container/Container.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.16.2_@swc_helpers_eb41b3e12c2b05515b240ca2bf300a3e/vendor/tailwind-variants/dist/index.js';
+import { getIsInclude } from '../../../libs/map.js';
+import { Heading } from '../../Heading/client/Heading.js';
+import '../../Heading/client/PageHeading/PageHeading.js';
+import { FaCaretRightIcon, FaCaretDownIcon } from '../../Icon/FaIcon.js';
+import '../../Icon/generateIcon.js';
+import '../../Icon/OpenInNewTabIcon.js';
+import '../../Icon/StatusIcon.js';
+import '../../Layout/Stack/Stack.js';
+import { Cluster } from '../../Layout/Cluster/Cluster.js';
+import '../../Layout/Reel/Reel.js';
+import '../../Layout/Sidebar/Sidebar.js';
+import '../../Layout/Center/Center.js';
+import '../../Layout/Container/Container.js';
 import { AccordionPanelContext } from './AccordionPanel.js';
 import { AccordionPanelItemContext } from './AccordionPanelItem.js';
 

package/lib/components/AccordionPanel/client/AccordionPanelTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionPanelTrigger.js","sources":["../../../../src/components/AccordionPanel/client/AccordionPanelTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type FC,\n  type KeyboardEventHandler,\n  type MouseEvent,\n  type PropsWithChildren,\n  memo,\n  useContext,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { getIsInclude } from '../../../libs/map'\nimport { Heading } from '../../Heading'\nimport { FaCaretDownIcon, FaCaretRightIcon } from '../../Icon'\nimport { Cluster } from '../../Layout'\n\nimport { AccordionPanelContext } from './AccordionPanel'\nimport { AccordionPanelItemContext } from './AccordionPanelItem'\n\nimport type { Text } from '../../Text'\n\ntype TextProps = ComponentProps<typeof Text>\ntype HeadingProps = ComponentProps<typeof Heading>\n\ntype BaseProps = PropsWithChildren<{\n  /** ヘッダ部分のテキストのスタイル */\n  headingType?: Exclude<TextProps['styleType'], 'screenTitle'>\n  /**\n   * 可能な限り利用せず、SectioningContent(Article, Aside, Nav, Section)を使ってHeadingと関連する範囲を明確に指定する方法を検討してください\n   */\n  unrecommendedHeadingTag?: HeadingProps['unrecommendedTag']\n}>\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'button'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    title: 'shr-grow shr-leading-tight',\n    titleWrapper: 'shr-flex-nowrap',\n    button: [\n      'smarthr-ui-AccordionPanel-trigger',\n      'shr-group shr-w-full shr-cursor-pointer shr-appearance-none shr-border-none shr-bg-transparent shr-px-1 shr-py-0.75 shr-text-left shr-text-inherit shr-text-color-inherit',\n      'disabled:shr-cursor-not-allowed disabled:shr-bg-white-darken disabled:shr-text-disabled',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      // Panel 直下に AccordionPanel がある場合、背景が付き抜けないように角丸を指定（Panel に overflow: hidden を与えるとフォーカスリングが表示されなくなる）\n      '[.smarthr-ui-Panel_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:first-child_&]:shr-rounded-t-l [.smarthr-ui-Panel_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:last-child_&]:shr-rounded-b-l',\n    ],\n    leftIcon: 'shr-transition-transform shr-duration-100 group-aria-expanded:shr-rotate-90',\n    rightIcon: 'group-aria-expanded:-shr-rotate-180',\n  },\n  compoundSlots: [\n    {\n      slots: ['leftIcon', 'rightIcon'],\n      className: 'shr-shrink-0',\n    },\n  ],\n})\n\nexport const AccordionPanelTrigger: FC<Props> = ({\n  children,\n  className,\n  headingType = 'blockTitle',\n  unrecommendedHeadingTag,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { title, titleWrapper, button, leftIcon, rightIcon } = classNameGenerator()\n\n    return {\n      title: title(),\n      titleWrapper: titleWrapper(),\n      button: button({ className }),\n      leftIcon: leftIcon(),\n      rightIcon: rightIcon(),\n    }\n  }, [className])\n\n  const { name, contentId, triggerId } = useContext(AccordionPanelItemContext)\n  const { iconPosition, expandedItems, handleClickTrigger, handleKeyDown } =\n    useContext(AccordionPanelContext)\n\n  const isExpanded = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])\n\n  return (\n    <MemoizedHeadingButton\n      {...rest}\n      triggerId={triggerId}\n      contentId={contentId}\n      name={name}\n      isExpanded={isExpanded}\n      iconPosition={iconPosition}\n      headingType={headingType}\n      unrecommendedHeadingTag={unrecommendedHeadingTag}\n      classNames={classNames}\n      handleClickTrigger={handleClickTrigger}\n      handleKeyDown={handleKeyDown}\n    >\n      {children}\n    </MemoizedHeadingButton>\n  )\n}\n\nconst MemoizedHeadingButton = memo<\n  PropsWithChildren<\n    Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'onKeyDown'> & {\n      name: string\n      triggerId: string\n      isExpanded: boolean\n      contentId: string\n      handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => void\n      handleKeyDown: KeyboardEventHandler<HTMLButtonElement>\n      classNames: {\n        button: string\n        titleWrapper: string\n        leftIcon: string\n        rightIcon: string\n        title: string\n      }\n      iconPosition: 'left' | 'right'\n      headingType: Exclude<TextProps['styleType'], 'screenTitle'>\n      unrecommendedHeadingTag?: HeadingProps['unrecommendedTag']\n    }\n  >\n>(\n  ({\n    children,\n    name,\n    triggerId,\n    isExpanded,\n    contentId,\n    handleClickTrigger,\n    handleKeyDown,\n    classNames,\n    iconPosition,\n    headingType,\n    unrecommendedHeadingTag,\n    ...rest\n  }) => (\n    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n    <Heading type={headingType} unrecommendedTag={unrecommendedHeadingTag}>\n      <button\n        {...rest}\n        type=\"button\"\n        id={triggerId}\n        value={name}\n        className={classNames.button}\n        aria-expanded={isExpanded}\n        aria-controls={contentId}\n        data-component=\"AccordionHeaderButton\"\n        onClick={handleClickTrigger}\n        onKeyDown={handleKeyDown}\n      >\n        {/* eslint-disable-next-line smarthr/best-practice-for-layouts */}\n        <Cluster as=\"span\" align=\"center\" className={classNames.titleWrapper}>\n          {iconPosition === 'left' && <FaCaretRightIcon className={classNames.leftIcon} />}\n          <span className={classNames.title}>{children}</span>\n          {iconPosition === 'right' && <FaCaretDownIcon className={classNames.rightIcon} />}\n        </Cluster>\n      </button>\n    </Heading>\n  ),\n)\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsCA;AACE;AACE;AACA;AACA;;;;;;;;AAQC;AACD;AACA;AACD;AACD;AACE;AACE;AACA;AACD;AACF;AACF;;AASC;AACE;;;;AAKE;;;;AAIJ;AAEA;AACA;;;AAsBF;AAEA;AAoCI;AACAA;;"}

package/lib/components/AccordionPanel/client/index.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var components_AccordionPanel_client_AccordionPanel = require('./AccordionPanel.cjs');
+var components_AccordionPanel_client_AccordionPanelItem = require('./AccordionPanelItem.cjs');
+var components_AccordionPanel_client_AccordionPanelContent = require('./AccordionPanelContent.cjs');
+var components_AccordionPanel_client_AccordionPanelTrigger = require('./AccordionPanelTrigger.cjs');
+
+
+
+exports.AccordionPanel = components_AccordionPanel_client_AccordionPanel.AccordionPanel;
+exports.AccordionPanelItem = components_AccordionPanel_client_AccordionPanelItem.AccordionPanelItem;
+exports.AccordionPanelContent = components_AccordionPanel_client_AccordionPanelContent.AccordionPanelContent;
+exports.AccordionPanelTrigger = components_AccordionPanel_client_AccordionPanelTrigger.AccordionPanelTrigger;
+//# sourceMappingURL=index.cjs.map

package/lib/components/AccordionPanel/client/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/lib/components/AccordionPanel/client/index.d.ts

@@ -0,0 +1,4 @@
+export { AccordionPanel } from './AccordionPanel';
+export { AccordionPanelItem } from './AccordionPanelItem';
+export { AccordionPanelContent } from './AccordionPanelContent';
+export { AccordionPanelTrigger } from './AccordionPanelTrigger';

package/lib/components/AccordionPanel/client/index.js

@@ -0,0 +1,5 @@
+export { AccordionPanel } from './AccordionPanel.js';
+export { AccordionPanelItem } from './AccordionPanelItem.js';
+export { AccordionPanelContent } from './AccordionPanelContent.js';
+export { AccordionPanelTrigger } from './AccordionPanelTrigger.js';
+//# sourceMappingURL=index.js.map

package/lib/components/AccordionPanel/client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/lib/components/AccordionPanel/index.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
-var components_AccordionPanel_AccordionPanel = require('./AccordionPanel.cjs');
-var components_AccordionPanel_AccordionPanelItem = require('./AccordionPanelItem.cjs');
-var components_AccordionPanel_AccordionPanelContent = require('./AccordionPanelContent.cjs');
-var components_AccordionPanel_AccordionPanelTrigger = require('./AccordionPanelTrigger.cjs');
+var components_AccordionPanel_client_AccordionPanel = require('./client/AccordionPanel.cjs');
+var components_AccordionPanel_client_AccordionPanelItem = require('./client/AccordionPanelItem.cjs');
+var components_AccordionPanel_client_AccordionPanelContent = require('./client/AccordionPanelContent.cjs');
+var components_AccordionPanel_client_AccordionPanelTrigger = require('./client/AccordionPanelTrigger.cjs');
 
 
 
-exports.AccordionPanel = components_AccordionPanel_AccordionPanel.AccordionPanel;
-exports.AccordionPanelItem = components_AccordionPanel_AccordionPanelItem.AccordionPanelItem;
-exports.AccordionPanelContent = components_AccordionPanel_AccordionPanelContent.AccordionPanelContent;
-exports.AccordionPanelTrigger = components_AccordionPanel_AccordionPanelTrigger.AccordionPanelTrigger;
+exports.AccordionPanel = components_AccordionPanel_client_AccordionPanel.AccordionPanel;
+exports.AccordionPanelItem = components_AccordionPanel_client_AccordionPanelItem.AccordionPanelItem;
+exports.AccordionPanelContent = components_AccordionPanel_client_AccordionPanelContent.AccordionPanelContent;
+exports.AccordionPanelTrigger = components_AccordionPanel_client_AccordionPanelTrigger.AccordionPanelTrigger;
 //# sourceMappingURL=index.cjs.map

package/lib/components/AccordionPanel/index.d.ts

@@ -1,4 +1 @@
-export { AccordionPanel } from './AccordionPanel';
-export { AccordionPanelItem } from './AccordionPanelItem';
-export { AccordionPanelContent } from './AccordionPanelContent';
-export { AccordionPanelTrigger } from './AccordionPanelTrigger';
+export { AccordionPanel, AccordionPanelItem, AccordionPanelContent, AccordionPanelTrigger, } from './client';

package/lib/components/AccordionPanel/index.js

@@ -1,5 +1,5 @@
-export { AccordionPanel } from './AccordionPanel.js';
-export { AccordionPanelItem } from './AccordionPanelItem.js';
-export { AccordionPanelContent } from './AccordionPanelContent.js';
-export { AccordionPanelTrigger } from './AccordionPanelTrigger.js';
+export { AccordionPanel } from './client/AccordionPanel.js';
+export { AccordionPanelItem } from './client/AccordionPanelItem.js';
+export { AccordionPanelContent } from './client/AccordionPanelContent.js';
+export { AccordionPanelTrigger } from './client/AccordionPanelTrigger.js';
 //# sourceMappingURL=index.js.map

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

@@ -14,13 +14,13 @@ require('../../../Button/UnstyledButton.cjs');
 var components_Icon_FaIcon = require('../../../Icon/FaIcon.cjs');
 require('../../../Icon/generateIcon.cjs');
 require('../../../Icon/OpenInNewTabIcon.cjs');
+require('../../../Icon/StatusIcon.cjs');
 require('../../../Layout/Stack/Stack.cjs');
 require('../../../Layout/Cluster/Cluster.cjs');
 require('../../../Layout/Reel/Reel.cjs');
 require('../../../Layout/Sidebar/Sidebar.cjs');
 var components_Layout_Center_Center = require('../../../Layout/Center/Center.cjs');
 require('../../../Layout/Container/Container.cjs');
-var components_LineClamp_LineClamp = require('../../../LineClamp/LineClamp.cjs');
 var components_Loader_Loader = require('../../../Loader/Loader.cjs');
 var components_Text_Text = require('../../../Text/Text.cjs');
 var components_AppHeader_hooks_useMediaQuery = require('../../hooks/useMediaQuery.cjs');
@@ -69,7 +69,7 @@ const FeatureList = ({ features, page }) => {
 const FeatureListItem = React.memo(({ href, children, isFavorite, className }) => (jsxRuntime.jsx("li", { children: jsxRuntime.jsx(components_Button_AnchorButton.AnchorButton, { href: href, target: "_blank", variant: "text", wide: true, className: className, "data-favorite": isFavorite, prefix: isFavorite && jsxRuntime.jsx(components_Icon_FaIcon.FaStarIcon, {}), suffix: jsxRuntime.jsx(components_Icon_FaIcon.FaArrowRightIcon, {}), children: jsxRuntime.jsx(FeatureName, { children: children }) }) })));
 const FeatureName = ({ children }) => {
     const isDesktop = components_AppHeader_hooks_useMediaQuery.useMediaQuery(components_AppHeader_hooks_useMediaQuery.mediaQuery.desktop);
-    return isDesktop ? jsxRuntime.jsx(components_LineClamp_LineClamp.LineClamp, { maxLines: 2, children: children }) : children;
+    return isDesktop ? (jsxRuntime.jsx(components_Text_Text.Text, { as: "span", maxLines: { max: 2, tooltip: true }, children: children })) : (children);
 };
 
 exports.AppLauncherFeatures = AppLauncherFeatures;

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

@@ -1 +1 @@
-{"version":3,"file":"AppLauncherFeatures.cjs","sources":["../../../../../src/components/AppHeader/components/common/AppLauncherFeatures.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, memo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer } from '../../../../intl'\nimport { AnchorButton } from '../../../Button'\nimport { FaArrowRightIcon, FaStarIcon } from '../../../Icon'\nimport { Center } from '../../../Layout'\nimport { LineClamp } from '../../../LineClamp'\nimport { Loader } from '../../../Loader'\nimport { Text } from '../../../Text'\nimport { mediaQuery, useMediaQuery } from '../../hooks/useMediaQuery'\n\nimport { Translate } from './Translate'\n\nimport type { Launcher } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    empty: ['shr-p-1 shr-text-center'],\n    loadError: ['shr-whitespace-pre-wrap shr-p-1 shr-text-center'],\n    loading: ['shr-py-3'],\n    list: ['shr-list-none', '[&>li]:shr-px-0.5 [&>li]:shr-py-0.25'],\n    listItem: [\n      'smarthr-ui-AppLauncher-listItem',\n      'shr-grid shr-min-h-[2.5rem] shr-grid-cols-[1rem_1fr_1rem] shr-gap-0.75 shr-whitespace-normal shr-px-1 shr-py-0 shr-text-left shr-leading-tight',\n      'data-[favorite=\"false\"]:shr-grid-cols-[1fr_1rem]',\n    ],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { empty, loadError, loading, list, listItem } = classNameGenerator()\n\n  return {\n    empty: empty(),\n    loadError: loadError(),\n    loading: loading(),\n    list: list(),\n    listItem: listItem(),\n  }\n})()\n\ntype Props = {\n  features: Array<Launcher['feature']>\n  page: Launcher['page']\n  loading?: boolean\n  error?: boolean\n}\n\nexport const AppLauncherFeatures: FC<Props> = ({ features, page, loading, error }) => {\n  if (loading) {\n    return <LoadingList />\n  }\n\n  if (error) {\n    return <LoadErrorText />\n  }\n\n  return features.length === 0 ? <EmptyList /> : <FeatureList features={features} page={page} />\n}\n\nconst LoadingList = memo(() => (\n  <Center className={CLASS_NAMES.loading}>\n    <Loader />\n  </Center>\n))\n\nconst LoadErrorText = memo(() => (\n  <div className={CLASS_NAMES.loadError}>\n    <Text size=\"S\">\n      <Localizer\n        id=\"smarthr-ui/AppHeader/Launcher/loadError\"\n        defaultText={`アプリ一覧の読み込みに失敗しました。\n時間をおいて、やり直してください。`}\n      />\n    </Text>\n  </div>\n))\n\nconst EmptyList = memo(() => (\n  <div className={CLASS_NAMES.empty}>\n    <Text size=\"S\">\n      <Translate>\n        <Localizer\n          id=\"smarthr-ui/AppHeader/Launcher/emptyText\"\n          defaultText=\"該当するアプリが見つかりませんでした。\"\n        />\n      </Translate>\n    </Text>\n  </div>\n))\n\nconst FeatureList: FC<Props> = ({ features, page }) => {\n  const isFavorite = page === 'favorite'\n\n  return (\n    <ul className={CLASS_NAMES.list}>\n      {features.map((feature) => (\n        <FeatureListItem\n          key={feature.id}\n          href={feature.url}\n          isFavorite={isFavorite}\n          className={CLASS_NAMES.listItem}\n        >\n          {feature.name}\n        </FeatureListItem>\n      ))}\n    </ul>\n  )\n}\n\nconst FeatureListItem = memo<{\n  href: Props['features'][number]['url']\n  children: Props['features'][number]['name']\n  className: string\n  isFavorite: boolean\n}>(({ href, children, isFavorite, className }) => (\n  <li>\n    <AnchorButton\n      href={href}\n      target=\"_blank\"\n      variant=\"text\"\n      wide\n      className={className}\n      data-favorite={isFavorite}\n      prefix={isFavorite && <FaStarIcon />}\n      suffix={<FaArrowRightIcon />}\n    >\n      <FeatureName>{children}</FeatureName>\n    </AnchorButton>\n  </li>\n))\n\nconst FeatureName: FC<PropsWithChildren> = ({ children }) => {\n  const isDesktop = useMediaQuery(mediaQuery.desktop)\n\n  return isDesktop ? <LineClamp maxLines={2}>{children}</LineClamp> : children\n}\n"],"names":["tv","_jsx","memo","Center","Loader","Text","Localizer","Translate","AnchorButton","FaStarIcon","FaArrowRightIcon","useMediaQuery","mediaQuery","LineClamp"],"mappings":"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"}
+{"version":3,"file":"AppLauncherFeatures.cjs","sources":["../../../../../src/components/AppHeader/components/common/AppLauncherFeatures.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, memo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer } from '../../../../intl'\nimport { AnchorButton } from '../../../Button'\nimport { FaArrowRightIcon, FaStarIcon } from '../../../Icon'\nimport { Center } from '../../../Layout'\nimport { Loader } from '../../../Loader'\nimport { Text } from '../../../Text'\nimport { mediaQuery, useMediaQuery } from '../../hooks/useMediaQuery'\n\nimport { Translate } from './Translate'\n\nimport type { Launcher } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    empty: ['shr-p-1 shr-text-center'],\n    loadError: ['shr-whitespace-pre-wrap shr-p-1 shr-text-center'],\n    loading: ['shr-py-3'],\n    list: ['shr-list-none', '[&>li]:shr-px-0.5 [&>li]:shr-py-0.25'],\n    listItem: [\n      'smarthr-ui-AppLauncher-listItem',\n      'shr-grid shr-min-h-[2.5rem] shr-grid-cols-[1rem_1fr_1rem] shr-gap-0.75 shr-whitespace-normal shr-px-1 shr-py-0 shr-text-left shr-leading-tight',\n      'data-[favorite=\"false\"]:shr-grid-cols-[1fr_1rem]',\n    ],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { empty, loadError, loading, list, listItem } = classNameGenerator()\n\n  return {\n    empty: empty(),\n    loadError: loadError(),\n    loading: loading(),\n    list: list(),\n    listItem: listItem(),\n  }\n})()\n\ntype Props = {\n  features: Array<Launcher['feature']>\n  page: Launcher['page']\n  loading?: boolean\n  error?: boolean\n}\n\nexport const AppLauncherFeatures: FC<Props> = ({ features, page, loading, error }) => {\n  if (loading) {\n    return <LoadingList />\n  }\n\n  if (error) {\n    return <LoadErrorText />\n  }\n\n  return features.length === 0 ? <EmptyList /> : <FeatureList features={features} page={page} />\n}\n\nconst LoadingList = memo(() => (\n  <Center className={CLASS_NAMES.loading}>\n    <Loader />\n  </Center>\n))\n\nconst LoadErrorText = memo(() => (\n  <div className={CLASS_NAMES.loadError}>\n    <Text size=\"S\">\n      <Localizer\n        id=\"smarthr-ui/AppHeader/Launcher/loadError\"\n        defaultText={`アプリ一覧の読み込みに失敗しました。\n時間をおいて、やり直してください。`}\n      />\n    </Text>\n  </div>\n))\n\nconst EmptyList = memo(() => (\n  <div className={CLASS_NAMES.empty}>\n    <Text size=\"S\">\n      <Translate>\n        <Localizer\n          id=\"smarthr-ui/AppHeader/Launcher/emptyText\"\n          defaultText=\"該当するアプリが見つかりませんでした。\"\n        />\n      </Translate>\n    </Text>\n  </div>\n))\n\nconst FeatureList: FC<Props> = ({ features, page }) => {\n  const isFavorite = page === 'favorite'\n\n  return (\n    <ul className={CLASS_NAMES.list}>\n      {features.map((feature) => (\n        <FeatureListItem\n          key={feature.id}\n          href={feature.url}\n          isFavorite={isFavorite}\n          className={CLASS_NAMES.listItem}\n        >\n          {feature.name}\n        </FeatureListItem>\n      ))}\n    </ul>\n  )\n}\n\nconst FeatureListItem = memo<{\n  href: Props['features'][number]['url']\n  children: Props['features'][number]['name']\n  className: string\n  isFavorite: boolean\n}>(({ href, children, isFavorite, className }) => (\n  <li>\n    <AnchorButton\n      href={href}\n      target=\"_blank\"\n      variant=\"text\"\n      wide\n      className={className}\n      data-favorite={isFavorite}\n      prefix={isFavorite && <FaStarIcon />}\n      suffix={<FaArrowRightIcon />}\n    >\n      <FeatureName>{children}</FeatureName>\n    </AnchorButton>\n  </li>\n))\n\nconst FeatureName: FC<PropsWithChildren> = ({ children }) => {\n  const isDesktop = useMediaQuery(mediaQuery.desktop)\n\n  return isDesktop ? (\n    <Text as=\"span\" maxLines={{ max: 2, tooltip: true }}>\n      {children}\n    </Text>\n  ) : (\n    children\n  )\n}\n"],"names":["tv","_jsx","memo","Center","Loader","Text","Localizer","Translate","AnchorButton","FaStarIcon","FaArrowRightIcon","useMediaQuery","mediaQuery"],"mappings":"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"}

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

@@ -12,13 +12,13 @@ import '../../../Button/UnstyledButton.js';
 import { FaArrowRightIcon, FaStarIcon } from '../../../Icon/FaIcon.js';
 import '../../../Icon/generateIcon.js';
 import '../../../Icon/OpenInNewTabIcon.js';
+import '../../../Icon/StatusIcon.js';
 import '../../../Layout/Stack/Stack.js';
 import '../../../Layout/Cluster/Cluster.js';
 import '../../../Layout/Reel/Reel.js';
 import '../../../Layout/Sidebar/Sidebar.js';
 import { Center } from '../../../Layout/Center/Center.js';
 import '../../../Layout/Container/Container.js';
-import { LineClamp } from '../../../LineClamp/LineClamp.js';
 import { Loader } from '../../../Loader/Loader.js';
 import { Text } from '../../../Text/Text.js';
 import { useMediaQuery, mediaQuery } from '../../hooks/useMediaQuery.js';
@@ -67,7 +67,7 @@ const FeatureList = ({ features, page }) => {
 const FeatureListItem = memo(({ href, children, isFavorite, className }) => (jsx("li", { children: jsx(ForwardedAnchorButton, { href: href, target: "_blank", variant: "text", wide: true, className: className, "data-favorite": isFavorite, prefix: isFavorite && jsx(FaStarIcon, {}), suffix: jsx(FaArrowRightIcon, {}), children: jsx(FeatureName, { children: children }) }) })));
 const FeatureName = ({ children }) => {
     const isDesktop = useMediaQuery(mediaQuery.desktop);
-    return isDesktop ? jsx(LineClamp, { maxLines: 2, children: children }) : children;
+    return isDesktop ? (jsx(Text, { as: "span", maxLines: { max: 2, tooltip: true }, children: children })) : (children);
 };
 
 export { AppLauncherFeatures };

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

@@ -1 +1 @@
-{"version":3,"file":"AppLauncherFeatures.js","sources":["../../../../../src/components/AppHeader/components/common/AppLauncherFeatures.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, memo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer } from '../../../../intl'\nimport { AnchorButton } from '../../../Button'\nimport { FaArrowRightIcon, FaStarIcon } from '../../../Icon'\nimport { Center } from '../../../Layout'\nimport { LineClamp } from '../../../LineClamp'\nimport { Loader } from '../../../Loader'\nimport { Text } from '../../../Text'\nimport { mediaQuery, useMediaQuery } from '../../hooks/useMediaQuery'\n\nimport { Translate } from './Translate'\n\nimport type { Launcher } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    empty: ['shr-p-1 shr-text-center'],\n    loadError: ['shr-whitespace-pre-wrap shr-p-1 shr-text-center'],\n    loading: ['shr-py-3'],\n    list: ['shr-list-none', '[&>li]:shr-px-0.5 [&>li]:shr-py-0.25'],\n    listItem: [\n      'smarthr-ui-AppLauncher-listItem',\n      'shr-grid shr-min-h-[2.5rem] shr-grid-cols-[1rem_1fr_1rem] shr-gap-0.75 shr-whitespace-normal shr-px-1 shr-py-0 shr-text-left shr-leading-tight',\n      'data-[favorite=\"false\"]:shr-grid-cols-[1fr_1rem]',\n    ],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { empty, loadError, loading, list, listItem } = classNameGenerator()\n\n  return {\n    empty: empty(),\n    loadError: loadError(),\n    loading: loading(),\n    list: list(),\n    listItem: listItem(),\n  }\n})()\n\ntype Props = {\n  features: Array<Launcher['feature']>\n  page: Launcher['page']\n  loading?: boolean\n  error?: boolean\n}\n\nexport const AppLauncherFeatures: FC<Props> = ({ features, page, loading, error }) => {\n  if (loading) {\n    return <LoadingList />\n  }\n\n  if (error) {\n    return <LoadErrorText />\n  }\n\n  return features.length === 0 ? <EmptyList /> : <FeatureList features={features} page={page} />\n}\n\nconst LoadingList = memo(() => (\n  <Center className={CLASS_NAMES.loading}>\n    <Loader />\n  </Center>\n))\n\nconst LoadErrorText = memo(() => (\n  <div className={CLASS_NAMES.loadError}>\n    <Text size=\"S\">\n      <Localizer\n        id=\"smarthr-ui/AppHeader/Launcher/loadError\"\n        defaultText={`アプリ一覧の読み込みに失敗しました。\n時間をおいて、やり直してください。`}\n      />\n    </Text>\n  </div>\n))\n\nconst EmptyList = memo(() => (\n  <div className={CLASS_NAMES.empty}>\n    <Text size=\"S\">\n      <Translate>\n        <Localizer\n          id=\"smarthr-ui/AppHeader/Launcher/emptyText\"\n          defaultText=\"該当するアプリが見つかりませんでした。\"\n        />\n      </Translate>\n    </Text>\n  </div>\n))\n\nconst FeatureList: FC<Props> = ({ features, page }) => {\n  const isFavorite = page === 'favorite'\n\n  return (\n    <ul className={CLASS_NAMES.list}>\n      {features.map((feature) => (\n        <FeatureListItem\n          key={feature.id}\n          href={feature.url}\n          isFavorite={isFavorite}\n          className={CLASS_NAMES.listItem}\n        >\n          {feature.name}\n        </FeatureListItem>\n      ))}\n    </ul>\n  )\n}\n\nconst FeatureListItem = memo<{\n  href: Props['features'][number]['url']\n  children: Props['features'][number]['name']\n  className: string\n  isFavorite: boolean\n}>(({ href, children, isFavorite, className }) => (\n  <li>\n    <AnchorButton\n      href={href}\n      target=\"_blank\"\n      variant=\"text\"\n      wide\n      className={className}\n      data-favorite={isFavorite}\n      prefix={isFavorite && <FaStarIcon />}\n      suffix={<FaArrowRightIcon />}\n    >\n      <FeatureName>{children}</FeatureName>\n    </AnchorButton>\n  </li>\n))\n\nconst FeatureName: FC<PropsWithChildren> = ({ children }) => {\n  const isDesktop = useMediaQuery(mediaQuery.desktop)\n\n  return isDesktop ? <LineClamp maxLines={2}>{children}</LineClamp> : children\n}\n"],"names":["tv","_jsx","AnchorButton"],"mappings":"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"}
+{"version":3,"file":"AppLauncherFeatures.js","sources":["../../../../../src/components/AppHeader/components/common/AppLauncherFeatures.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, memo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer } from '../../../../intl'\nimport { AnchorButton } from '../../../Button'\nimport { FaArrowRightIcon, FaStarIcon } from '../../../Icon'\nimport { Center } from '../../../Layout'\nimport { Loader } from '../../../Loader'\nimport { Text } from '../../../Text'\nimport { mediaQuery, useMediaQuery } from '../../hooks/useMediaQuery'\n\nimport { Translate } from './Translate'\n\nimport type { Launcher } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    empty: ['shr-p-1 shr-text-center'],\n    loadError: ['shr-whitespace-pre-wrap shr-p-1 shr-text-center'],\n    loading: ['shr-py-3'],\n    list: ['shr-list-none', '[&>li]:shr-px-0.5 [&>li]:shr-py-0.25'],\n    listItem: [\n      'smarthr-ui-AppLauncher-listItem',\n      'shr-grid shr-min-h-[2.5rem] shr-grid-cols-[1rem_1fr_1rem] shr-gap-0.75 shr-whitespace-normal shr-px-1 shr-py-0 shr-text-left shr-leading-tight',\n      'data-[favorite=\"false\"]:shr-grid-cols-[1fr_1rem]',\n    ],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { empty, loadError, loading, list, listItem } = classNameGenerator()\n\n  return {\n    empty: empty(),\n    loadError: loadError(),\n    loading: loading(),\n    list: list(),\n    listItem: listItem(),\n  }\n})()\n\ntype Props = {\n  features: Array<Launcher['feature']>\n  page: Launcher['page']\n  loading?: boolean\n  error?: boolean\n}\n\nexport const AppLauncherFeatures: FC<Props> = ({ features, page, loading, error }) => {\n  if (loading) {\n    return <LoadingList />\n  }\n\n  if (error) {\n    return <LoadErrorText />\n  }\n\n  return features.length === 0 ? <EmptyList /> : <FeatureList features={features} page={page} />\n}\n\nconst LoadingList = memo(() => (\n  <Center className={CLASS_NAMES.loading}>\n    <Loader />\n  </Center>\n))\n\nconst LoadErrorText = memo(() => (\n  <div className={CLASS_NAMES.loadError}>\n    <Text size=\"S\">\n      <Localizer\n        id=\"smarthr-ui/AppHeader/Launcher/loadError\"\n        defaultText={`アプリ一覧の読み込みに失敗しました。\n時間をおいて、やり直してください。`}\n      />\n    </Text>\n  </div>\n))\n\nconst EmptyList = memo(() => (\n  <div className={CLASS_NAMES.empty}>\n    <Text size=\"S\">\n      <Translate>\n        <Localizer\n          id=\"smarthr-ui/AppHeader/Launcher/emptyText\"\n          defaultText=\"該当するアプリが見つかりませんでした。\"\n        />\n      </Translate>\n    </Text>\n  </div>\n))\n\nconst FeatureList: FC<Props> = ({ features, page }) => {\n  const isFavorite = page === 'favorite'\n\n  return (\n    <ul className={CLASS_NAMES.list}>\n      {features.map((feature) => (\n        <FeatureListItem\n          key={feature.id}\n          href={feature.url}\n          isFavorite={isFavorite}\n          className={CLASS_NAMES.listItem}\n        >\n          {feature.name}\n        </FeatureListItem>\n      ))}\n    </ul>\n  )\n}\n\nconst FeatureListItem = memo<{\n  href: Props['features'][number]['url']\n  children: Props['features'][number]['name']\n  className: string\n  isFavorite: boolean\n}>(({ href, children, isFavorite, className }) => (\n  <li>\n    <AnchorButton\n      href={href}\n      target=\"_blank\"\n      variant=\"text\"\n      wide\n      className={className}\n      data-favorite={isFavorite}\n      prefix={isFavorite && <FaStarIcon />}\n      suffix={<FaArrowRightIcon />}\n    >\n      <FeatureName>{children}</FeatureName>\n    </AnchorButton>\n  </li>\n))\n\nconst FeatureName: FC<PropsWithChildren> = ({ children }) => {\n  const isDesktop = useMediaQuery(mediaQuery.desktop)\n\n  return isDesktop ? (\n    <Text as=\"span\" maxLines={{ max: 2, tooltip: true }}>\n      {children}\n    </Text>\n  ) : (\n    children\n  )\n}\n"],"names":["tv","_jsx","AnchorButton"],"mappings":"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"}

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

@@ -14,18 +14,17 @@ var components_Button_Button = require('../../../Button/Button.cjs');
 require('../../../Button/AnchorButton.cjs');
 require('../../../Button/UnstyledButton.cjs');
 var components_Dropdown_client_Dropdown = require('../../../Dropdown/client/Dropdown.cjs');
-var components_Dropdown_client_DropdownContent_DropdownContent = require('../../../Dropdown/client/DropdownContent/DropdownContent.cjs');
+var components_Dropdown_client_DropdownContent = require('../../../Dropdown/client/DropdownContent.cjs');
 require('../../../Dropdown/client/DropdownMenuButton/DropdownMenuButton.cjs');
-require('../../../Dropdown/client/DropdownMenuButton/ButtonList.cjs');
 var components_Dropdown_client_DropdownTrigger = require('../../../Dropdown/client/DropdownTrigger.cjs');
 require('../../../Dropdown/client/FilteredIcon.cjs');
 require('../../../Dropdown/client/SortDropdown/SortDropdown.cjs');
-require('../../../Dropdown/DropdownCloser.cjs');
 require('../../../Dropdown/FilterDropdown/FilterDropdown.cjs');
 require('../../../Dropdown/DropdownMenuGroup/DropdownMenuGroup.cjs');
 var components_Icon_FaIcon = require('../../../Icon/FaIcon.cjs');
 require('../../../Icon/generateIcon.cjs');
 require('../../../Icon/OpenInNewTabIcon.cjs');
+require('../../../Icon/StatusIcon.cjs');
 var components_AppHeader_components_common_Translate = require('./Translate.cjs');
 
 const classNameGenerator = index.tv({
@@ -50,7 +49,7 @@ const CLASS_NAMES = (() => {
         contentButton: contentButton(),
     };
 })();
-const AppLauncherSortDropdown = ({ sortType, onSelectSortType }) => {
+const AppLauncherSortDropdown = ({ sortType, handleSelectSortType }) => {
     const triggerRef = React.useRef(null);
     const options = React.useMemo(() => [
         [
@@ -67,7 +66,7 @@ const AppLauncherSortDropdown = ({ sortType, onSelectSortType }) => {
         ],
     ], []);
     const onClickOption = React.useCallback((e) => {
-        onSelectSortType(e.currentTarget.value);
+        handleSelectSortType(e.currentTarget.value);
         // Dropdown がネストしており、この Dropdown のみ閉じて親の Dropdown は開いたままというのができない
         // そのため、無理矢理クリックイベントを発生させて実現している
         setTimeout(() => {
@@ -76,8 +75,8 @@ const AppLauncherSortDropdown = ({ sortType, onSelectSortType }) => {
                 triggerRef.current.focus();
             }
         }, 0);
-    }, [onSelectSortType]);
-    return (jsxRuntime.jsxs(components_Dropdown_client_Dropdown.Dropdown, { children: [jsxRuntime.jsx(TriggerButton, { triggerRef: triggerRef, className: CLASS_NAMES.trigger, children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/AppHeader/Launcher/sortDropdownLabel", defaultText: "\u8868\u793A\u9806" }) }), jsxRuntime.jsx(components_Dropdown_client_DropdownContent_DropdownContent.DropdownContent, { controllable: true, children: jsxRuntime.jsx("div", { role: "listbox", className: CLASS_NAMES.contentBody, children: options.map(([value, children], i) => (jsxRuntime.jsx(OptionButton, { value: value, selected: value === sortType, className: CLASS_NAMES.contentButton, onClick: onClickOption, children: children }, i))) }) })] }));
+    }, [handleSelectSortType]);
+    return (jsxRuntime.jsxs(components_Dropdown_client_Dropdown.Dropdown, { children: [jsxRuntime.jsx(TriggerButton, { triggerRef: triggerRef, className: CLASS_NAMES.trigger, children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/AppHeader/Launcher/sortDropdownLabel", defaultText: "\u8868\u793A\u9806" }) }), jsxRuntime.jsx(components_Dropdown_client_DropdownContent.DropdownContent, { controllable: true, children: jsxRuntime.jsx("div", { role: "listbox", className: CLASS_NAMES.contentBody, children: options.map(([value, children], i) => (jsxRuntime.jsx(OptionButton, { value: value, selected: value === sortType, className: CLASS_NAMES.contentButton, onClick: onClickOption, children: children }, i))) }) })] }));
 };
 const TriggerButton = React.memo(({ triggerRef, children, className }) => (jsxRuntime.jsx(components_Dropdown_client_DropdownTrigger.DropdownTrigger, { children: jsxRuntime.jsx(components_Button_Button.Button, { ref: triggerRef, variant: "text", size: "S", className: className, suffix: jsxRuntime.jsx(components_Icon_FaIcon.FaCaretDownIcon, {}), children: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: children }) }) })));
 const OptionButton = React.memo(({ value, selected, onClick, children, className }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"AppLauncherSortDropdown.cjs","sources":["../../../../../src/components/AppHeader/components/common/AppLauncherSortDropdown.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../../../hooks/client/useTheme'\nimport { Localizer } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Dropdown, DropdownContent, DropdownTrigger } from '../../../Dropdown'\nimport { FaCaretDownIcon, FaCheckIcon } from '../../../Icon'\nimport { Translate } from '../common/Translate'\n\nimport type { Launcher } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    trigger: [\n      'smarthr-ui-AppLauncher-SortDropdown-trigger',\n      'shr-gap-0.25 shr-text-grey',\n      '[&[aria-expanded=\"true\"]_.smarthr-ui-Icon]:shr-rotate-180',\n    ],\n    contentBody: ['shr-px-0.25 shr-py-0.5', 'shr-flex shr-flex-col shr-items-stretch'],\n    contentButton: [\n      'shr-justify-start shr-border-none shr-py-0.75 shr-pl-2.5 shr-font-normal',\n      'aria-selected:shr-pl-1',\n    ],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { trigger, contentBody, contentButton } = classNameGenerator()\n\n  return {\n    trigger: trigger(),\n    contentBody: contentBody(),\n    contentButton: contentButton(),\n  }\n})()\n\ntype Props = {\n  sortType: Launcher['sortType']\n  onSelectSortType: (sortType: Launcher['sortType']) => void\n}\n\nexport const AppLauncherSortDropdown: FC<Props> = ({ sortType, onSelectSortType }) => {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const options = useMemo<Array<[Launcher['sortType'], JSX.Element]>>(\n    () => [\n      [\n        'default',\n        <Localizer\n          key=\"default\"\n          id=\"smarthr-ui/AppHeader/Launcher/sortDropdownOrderDefault\"\n          defaultText=\"デフォルト\"\n        />,\n      ],\n      [\n        'name/asc',\n        <Localizer\n          key=\"name/asc\"\n          id=\"smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameAsc\"\n          defaultText=\"アプリ名の昇順\"\n        />,\n      ],\n      [\n        'name/desc',\n        <Localizer\n          key=\"name/desc\"\n          id=\"smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameDesc\"\n          defaultText=\"アプリ名の降順\"\n        />,\n      ],\n    ],\n    [],\n  )\n\n  const onClickOption = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      onSelectSortType(e.currentTarget.value as Launcher['sortType'])\n\n      // Dropdown がネストしており、この Dropdown のみ閉じて親の Dropdown は開いたままというのができない\n      // そのため、無理矢理クリックイベントを発生させて実現している\n      setTimeout(() => {\n        if (triggerRef.current) {\n          triggerRef.current.click()\n          triggerRef.current.focus()\n        }\n      }, 0)\n    },\n    [onSelectSortType],\n  )\n\n  return (\n    <Dropdown>\n      <TriggerButton triggerRef={triggerRef} className={CLASS_NAMES.trigger}>\n        <Localizer id=\"smarthr-ui/AppHeader/Launcher/sortDropdownLabel\" defaultText=\"表示順\" />\n      </TriggerButton>\n      <DropdownContent controllable>\n        <div role=\"listbox\" className={CLASS_NAMES.contentBody}>\n          {options.map(([value, children], i) => (\n            <OptionButton\n              key={i}\n              value={value}\n              selected={value === sortType}\n              className={CLASS_NAMES.contentButton}\n              onClick={onClickOption}\n            >\n              {children}\n            </OptionButton>\n          ))}\n        </div>\n      </DropdownContent>\n    </Dropdown>\n  )\n}\n\nconst TriggerButton = memo<\n  PropsWithChildren<{ triggerRef: RefObject<HTMLButtonElement>; className: string }>\n>(({ triggerRef, children, className }) => (\n  <DropdownTrigger>\n    <Button\n      ref={triggerRef}\n      variant=\"text\"\n      size=\"S\"\n      className={className}\n      suffix={<FaCaretDownIcon />}\n    >\n      <Translate>{children}</Translate>\n    </Button>\n  </DropdownTrigger>\n))\n\nconst OptionButton = memo<\n  PropsWithChildren<{\n    value: string\n    selected: boolean\n    onClick: (e: MouseEvent<HTMLButtonElement>) => void\n    className: string\n  }>\n>(({ value, selected, onClick, children, className }) => {\n  const theme = useTheme()\n  return (\n    <Button\n      role=\"option\"\n      value={value}\n      className={className}\n      aria-selected={selected}\n      onClick={onClick}\n      prefix={\n        selected && (\n          <FaCheckIcon\n            alt={\n              <Translate>\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/Launcher/sortDropdownSelected\"\n                  defaultText=\"選択中\"\n                />\n              </Translate>\n            }\n            color={theme.textColor.main}\n          />\n        )\n      }\n    >\n      <Translate>{children}</Translate>\n    </Button>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA;AACE;AACE;;;;AAIC;AACD;AACA;;;AAGC;AACF;AACF;AAED;;;;;;;AAQA;AAOO;AACL;AAEA;AAEI;;;AAOC;AACD;;;AAOC;AACD;;;AAOC;;AAKL;AAEI;;;;AAKE;AACE;AACA;;;AAGN;;AA0BJ;AAEA;AAgBA;AAQE;AACA;AA0BF;;"}
+{"version":3,"file":"AppLauncherSortDropdown.cjs","sources":["../../../../../src/components/AppHeader/components/common/AppLauncherSortDropdown.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../../../hooks/client/useTheme'\nimport { Localizer } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Dropdown, DropdownContent, DropdownTrigger } from '../../../Dropdown'\nimport { FaCaretDownIcon, FaCheckIcon } from '../../../Icon'\nimport { Translate } from '../common/Translate'\n\nimport type { Launcher } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    trigger: [\n      'smarthr-ui-AppLauncher-SortDropdown-trigger',\n      'shr-gap-0.25 shr-text-grey',\n      '[&[aria-expanded=\"true\"]_.smarthr-ui-Icon]:shr-rotate-180',\n    ],\n    contentBody: ['shr-px-0.25 shr-py-0.5', 'shr-flex shr-flex-col shr-items-stretch'],\n    contentButton: [\n      'shr-justify-start shr-border-none shr-py-0.75 shr-pl-2.5 shr-font-normal',\n      'aria-selected:shr-pl-1',\n    ],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { trigger, contentBody, contentButton } = classNameGenerator()\n\n  return {\n    trigger: trigger(),\n    contentBody: contentBody(),\n    contentButton: contentButton(),\n  }\n})()\n\ntype Props = {\n  sortType: Launcher['sortType']\n  handleSelectSortType: (sortType: Launcher['sortType']) => void\n}\n\nexport const AppLauncherSortDropdown: FC<Props> = ({ sortType, handleSelectSortType }) => {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const options = useMemo<Array<[Launcher['sortType'], JSX.Element]>>(\n    () => [\n      [\n        'default',\n        <Localizer\n          key=\"default\"\n          id=\"smarthr-ui/AppHeader/Launcher/sortDropdownOrderDefault\"\n          defaultText=\"デフォルト\"\n        />,\n      ],\n      [\n        'name/asc',\n        <Localizer\n          key=\"name/asc\"\n          id=\"smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameAsc\"\n          defaultText=\"アプリ名の昇順\"\n        />,\n      ],\n      [\n        'name/desc',\n        <Localizer\n          key=\"name/desc\"\n          id=\"smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameDesc\"\n          defaultText=\"アプリ名の降順\"\n        />,\n      ],\n    ],\n    [],\n  )\n\n  const onClickOption = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      handleSelectSortType(e.currentTarget.value as Launcher['sortType'])\n\n      // Dropdown がネストしており、この Dropdown のみ閉じて親の Dropdown は開いたままというのができない\n      // そのため、無理矢理クリックイベントを発生させて実現している\n      setTimeout(() => {\n        if (triggerRef.current) {\n          triggerRef.current.click()\n          triggerRef.current.focus()\n        }\n      }, 0)\n    },\n    [handleSelectSortType],\n  )\n\n  return (\n    <Dropdown>\n      <TriggerButton triggerRef={triggerRef} className={CLASS_NAMES.trigger}>\n        <Localizer id=\"smarthr-ui/AppHeader/Launcher/sortDropdownLabel\" defaultText=\"表示順\" />\n      </TriggerButton>\n      <DropdownContent controllable>\n        <div role=\"listbox\" className={CLASS_NAMES.contentBody}>\n          {options.map(([value, children], i) => (\n            <OptionButton\n              key={i}\n              value={value}\n              selected={value === sortType}\n              className={CLASS_NAMES.contentButton}\n              onClick={onClickOption}\n            >\n              {children}\n            </OptionButton>\n          ))}\n        </div>\n      </DropdownContent>\n    </Dropdown>\n  )\n}\n\nconst TriggerButton = memo<\n  PropsWithChildren<{ triggerRef: RefObject<HTMLButtonElement>; className: string }>\n>(({ triggerRef, children, className }) => (\n  <DropdownTrigger>\n    <Button\n      ref={triggerRef}\n      variant=\"text\"\n      size=\"S\"\n      className={className}\n      suffix={<FaCaretDownIcon />}\n    >\n      <Translate>{children}</Translate>\n    </Button>\n  </DropdownTrigger>\n))\n\nconst OptionButton = memo<\n  PropsWithChildren<{\n    value: string\n    selected: boolean\n    onClick: (e: MouseEvent<HTMLButtonElement>) => void\n    className: string\n  }>\n>(({ value, selected, onClick, children, className }) => {\n  const theme = useTheme()\n  return (\n    <Button\n      role=\"option\"\n      value={value}\n      className={className}\n      aria-selected={selected}\n      onClick={onClick}\n      prefix={\n        selected && (\n          <FaCheckIcon\n            alt={\n              <Translate>\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/Launcher/sortDropdownSelected\"\n                  defaultText=\"選択中\"\n                />\n              </Translate>\n            }\n            color={theme.textColor.main}\n          />\n        )\n      }\n    >\n      <Translate>{children}</Translate>\n    </Button>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA;AACE;AACE;;;;AAIC;AACD;AACA;;;AAGC;AACF;AACF;AAED;;;;;;;AAQA;AAOO;AACL;AAEA;AAEI;;;AAOC;AACD;;;AAOC;AACD;;;AAOC;;AAKL;AAEI;;;;AAKE;AACE;AACA;;;AAGN;;AA0BJ;AAEA;AAgBA;AAQE;AACA;AA0BF;;"}

package/lib/components/AppHeader/components/common/AppLauncherSortDropdown.d.ts

@@ -2,7 +2,7 @@ import { type FC } from 'react';
 import type { Launcher } from '../../types';
 type Props = {
     sortType: Launcher['sortType'];
-    onSelectSortType: (sortType: Launcher['sortType']) => void;
+    handleSelectSortType: (sortType: Launcher['sortType']) => void;
 };
 export declare const AppLauncherSortDropdown: FC<Props>;
 export {};

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

@@ -12,18 +12,17 @@ import { Button } from '../../../Button/Button.js';
 import '../../../Button/AnchorButton.js';
 import '../../../Button/UnstyledButton.js';
 import { Dropdown } from '../../../Dropdown/client/Dropdown.js';
-import { DropdownContent } from '../../../Dropdown/client/DropdownContent/DropdownContent.js';
+import { DropdownContent } from '../../../Dropdown/client/DropdownContent.js';
 import '../../../Dropdown/client/DropdownMenuButton/DropdownMenuButton.js';
-import '../../../Dropdown/client/DropdownMenuButton/ButtonList.js';
 import { DropdownTrigger } from '../../../Dropdown/client/DropdownTrigger.js';
 import '../../../Dropdown/client/FilteredIcon.js';
 import '../../../Dropdown/client/SortDropdown/SortDropdown.js';
-import '../../../Dropdown/DropdownCloser.js';
 import '../../../Dropdown/FilterDropdown/FilterDropdown.js';
 import '../../../Dropdown/DropdownMenuGroup/DropdownMenuGroup.js';
 import { FaCaretDownIcon, FaCheckIcon } from '../../../Icon/FaIcon.js';
 import '../../../Icon/generateIcon.js';
 import '../../../Icon/OpenInNewTabIcon.js';
+import '../../../Icon/StatusIcon.js';
 import { Translate } from './Translate.js';
 
 const classNameGenerator = ce({
@@ -48,7 +47,7 @@ const CLASS_NAMES = (() => {
         contentButton: contentButton(),
     };
 })();
-const AppLauncherSortDropdown = ({ sortType, onSelectSortType }) => {
+const AppLauncherSortDropdown = ({ sortType, handleSelectSortType }) => {
     const triggerRef = useRef(null);
     const options = useMemo(() => [
         [
@@ -65,7 +64,7 @@ const AppLauncherSortDropdown = ({ sortType, onSelectSortType }) => {
         ],
     ], []);
     const onClickOption = useCallback((e) => {
-        onSelectSortType(e.currentTarget.value);
+        handleSelectSortType(e.currentTarget.value);
         // Dropdown がネストしており、この Dropdown のみ閉じて親の Dropdown は開いたままというのができない
         // そのため、無理矢理クリックイベントを発生させて実現している
         setTimeout(() => {
@@ -74,7 +73,7 @@ const AppLauncherSortDropdown = ({ sortType, onSelectSortType }) => {
                 triggerRef.current.focus();
             }
         }, 0);
-    }, [onSelectSortType]);
+    }, [handleSelectSortType]);
     return (jsxs(Dropdown, { children: [jsx(TriggerButton, { triggerRef: triggerRef, className: CLASS_NAMES.trigger, children: jsx(Localizer, { id: "smarthr-ui/AppHeader/Launcher/sortDropdownLabel", defaultText: "\u8868\u793A\u9806" }) }), jsx(DropdownContent, { controllable: true, children: jsx("div", { role: "listbox", className: CLASS_NAMES.contentBody, children: options.map(([value, children], i) => (jsx(OptionButton, { value: value, selected: value === sortType, className: CLASS_NAMES.contentButton, onClick: onClickOption, children: children }, i))) }) })] }));
 };
 const TriggerButton = memo(({ triggerRef, children, className }) => (jsx(DropdownTrigger, { children: jsx(Button, { ref: triggerRef, variant: "text", size: "S", className: className, suffix: jsx(FaCaretDownIcon, {}), children: jsx(Translate, { children: children }) }) })));

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

@@ -1 +1 @@
-{"version":3,"file":"AppLauncherSortDropdown.js","sources":["../../../../../src/components/AppHeader/components/common/AppLauncherSortDropdown.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../../../hooks/client/useTheme'\nimport { Localizer } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Dropdown, DropdownContent, DropdownTrigger } from '../../../Dropdown'\nimport { FaCaretDownIcon, FaCheckIcon } from '../../../Icon'\nimport { Translate } from '../common/Translate'\n\nimport type { Launcher } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    trigger: [\n      'smarthr-ui-AppLauncher-SortDropdown-trigger',\n      'shr-gap-0.25 shr-text-grey',\n      '[&[aria-expanded=\"true\"]_.smarthr-ui-Icon]:shr-rotate-180',\n    ],\n    contentBody: ['shr-px-0.25 shr-py-0.5', 'shr-flex shr-flex-col shr-items-stretch'],\n    contentButton: [\n      'shr-justify-start shr-border-none shr-py-0.75 shr-pl-2.5 shr-font-normal',\n      'aria-selected:shr-pl-1',\n    ],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { trigger, contentBody, contentButton } = classNameGenerator()\n\n  return {\n    trigger: trigger(),\n    contentBody: contentBody(),\n    contentButton: contentButton(),\n  }\n})()\n\ntype Props = {\n  sortType: Launcher['sortType']\n  onSelectSortType: (sortType: Launcher['sortType']) => void\n}\n\nexport const AppLauncherSortDropdown: FC<Props> = ({ sortType, onSelectSortType }) => {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const options = useMemo<Array<[Launcher['sortType'], JSX.Element]>>(\n    () => [\n      [\n        'default',\n        <Localizer\n          key=\"default\"\n          id=\"smarthr-ui/AppHeader/Launcher/sortDropdownOrderDefault\"\n          defaultText=\"デフォルト\"\n        />,\n      ],\n      [\n        'name/asc',\n        <Localizer\n          key=\"name/asc\"\n          id=\"smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameAsc\"\n          defaultText=\"アプリ名の昇順\"\n        />,\n      ],\n      [\n        'name/desc',\n        <Localizer\n          key=\"name/desc\"\n          id=\"smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameDesc\"\n          defaultText=\"アプリ名の降順\"\n        />,\n      ],\n    ],\n    [],\n  )\n\n  const onClickOption = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      onSelectSortType(e.currentTarget.value as Launcher['sortType'])\n\n      // Dropdown がネストしており、この Dropdown のみ閉じて親の Dropdown は開いたままというのができない\n      // そのため、無理矢理クリックイベントを発生させて実現している\n      setTimeout(() => {\n        if (triggerRef.current) {\n          triggerRef.current.click()\n          triggerRef.current.focus()\n        }\n      }, 0)\n    },\n    [onSelectSortType],\n  )\n\n  return (\n    <Dropdown>\n      <TriggerButton triggerRef={triggerRef} className={CLASS_NAMES.trigger}>\n        <Localizer id=\"smarthr-ui/AppHeader/Launcher/sortDropdownLabel\" defaultText=\"表示順\" />\n      </TriggerButton>\n      <DropdownContent controllable>\n        <div role=\"listbox\" className={CLASS_NAMES.contentBody}>\n          {options.map(([value, children], i) => (\n            <OptionButton\n              key={i}\n              value={value}\n              selected={value === sortType}\n              className={CLASS_NAMES.contentButton}\n              onClick={onClickOption}\n            >\n              {children}\n            </OptionButton>\n          ))}\n        </div>\n      </DropdownContent>\n    </Dropdown>\n  )\n}\n\nconst TriggerButton = memo<\n  PropsWithChildren<{ triggerRef: RefObject<HTMLButtonElement>; className: string }>\n>(({ triggerRef, children, className }) => (\n  <DropdownTrigger>\n    <Button\n      ref={triggerRef}\n      variant=\"text\"\n      size=\"S\"\n      className={className}\n      suffix={<FaCaretDownIcon />}\n    >\n      <Translate>{children}</Translate>\n    </Button>\n  </DropdownTrigger>\n))\n\nconst OptionButton = memo<\n  PropsWithChildren<{\n    value: string\n    selected: boolean\n    onClick: (e: MouseEvent<HTMLButtonElement>) => void\n    className: string\n  }>\n>(({ value, selected, onClick, children, className }) => {\n  const theme = useTheme()\n  return (\n    <Button\n      role=\"option\"\n      value={value}\n      className={className}\n      aria-selected={selected}\n      onClick={onClick}\n      prefix={\n        selected && (\n          <FaCheckIcon\n            alt={\n              <Translate>\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/Launcher/sortDropdownSelected\"\n                  defaultText=\"選択中\"\n                />\n              </Translate>\n            }\n            color={theme.textColor.main}\n          />\n        )\n      }\n    >\n      <Translate>{children}</Translate>\n    </Button>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA;AACE;AACE;;;;AAIC;AACD;AACA;;;AAGC;AACF;AACF;AAED;;;;;;;AAQA;AAOO;AACL;AAEA;AAEI;;;AAOC;AACD;;;AAOC;AACD;;;AAOC;;AAKL;AAEI;;;;AAKE;AACE;AACA;;;AAGN;;AA0BJ;AAEA;AAgBA;AAQE;AACA;AA0BF;;"}
+{"version":3,"file":"AppLauncherSortDropdown.js","sources":["../../../../../src/components/AppHeader/components/common/AppLauncherSortDropdown.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../../../hooks/client/useTheme'\nimport { Localizer } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Dropdown, DropdownContent, DropdownTrigger } from '../../../Dropdown'\nimport { FaCaretDownIcon, FaCheckIcon } from '../../../Icon'\nimport { Translate } from '../common/Translate'\n\nimport type { Launcher } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    trigger: [\n      'smarthr-ui-AppLauncher-SortDropdown-trigger',\n      'shr-gap-0.25 shr-text-grey',\n      '[&[aria-expanded=\"true\"]_.smarthr-ui-Icon]:shr-rotate-180',\n    ],\n    contentBody: ['shr-px-0.25 shr-py-0.5', 'shr-flex shr-flex-col shr-items-stretch'],\n    contentButton: [\n      'shr-justify-start shr-border-none shr-py-0.75 shr-pl-2.5 shr-font-normal',\n      'aria-selected:shr-pl-1',\n    ],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { trigger, contentBody, contentButton } = classNameGenerator()\n\n  return {\n    trigger: trigger(),\n    contentBody: contentBody(),\n    contentButton: contentButton(),\n  }\n})()\n\ntype Props = {\n  sortType: Launcher['sortType']\n  handleSelectSortType: (sortType: Launcher['sortType']) => void\n}\n\nexport const AppLauncherSortDropdown: FC<Props> = ({ sortType, handleSelectSortType }) => {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const options = useMemo<Array<[Launcher['sortType'], JSX.Element]>>(\n    () => [\n      [\n        'default',\n        <Localizer\n          key=\"default\"\n          id=\"smarthr-ui/AppHeader/Launcher/sortDropdownOrderDefault\"\n          defaultText=\"デフォルト\"\n        />,\n      ],\n      [\n        'name/asc',\n        <Localizer\n          key=\"name/asc\"\n          id=\"smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameAsc\"\n          defaultText=\"アプリ名の昇順\"\n        />,\n      ],\n      [\n        'name/desc',\n        <Localizer\n          key=\"name/desc\"\n          id=\"smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameDesc\"\n          defaultText=\"アプリ名の降順\"\n        />,\n      ],\n    ],\n    [],\n  )\n\n  const onClickOption = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      handleSelectSortType(e.currentTarget.value as Launcher['sortType'])\n\n      // Dropdown がネストしており、この Dropdown のみ閉じて親の Dropdown は開いたままというのができない\n      // そのため、無理矢理クリックイベントを発生させて実現している\n      setTimeout(() => {\n        if (triggerRef.current) {\n          triggerRef.current.click()\n          triggerRef.current.focus()\n        }\n      }, 0)\n    },\n    [handleSelectSortType],\n  )\n\n  return (\n    <Dropdown>\n      <TriggerButton triggerRef={triggerRef} className={CLASS_NAMES.trigger}>\n        <Localizer id=\"smarthr-ui/AppHeader/Launcher/sortDropdownLabel\" defaultText=\"表示順\" />\n      </TriggerButton>\n      <DropdownContent controllable>\n        <div role=\"listbox\" className={CLASS_NAMES.contentBody}>\n          {options.map(([value, children], i) => (\n            <OptionButton\n              key={i}\n              value={value}\n              selected={value === sortType}\n              className={CLASS_NAMES.contentButton}\n              onClick={onClickOption}\n            >\n              {children}\n            </OptionButton>\n          ))}\n        </div>\n      </DropdownContent>\n    </Dropdown>\n  )\n}\n\nconst TriggerButton = memo<\n  PropsWithChildren<{ triggerRef: RefObject<HTMLButtonElement>; className: string }>\n>(({ triggerRef, children, className }) => (\n  <DropdownTrigger>\n    <Button\n      ref={triggerRef}\n      variant=\"text\"\n      size=\"S\"\n      className={className}\n      suffix={<FaCaretDownIcon />}\n    >\n      <Translate>{children}</Translate>\n    </Button>\n  </DropdownTrigger>\n))\n\nconst OptionButton = memo<\n  PropsWithChildren<{\n    value: string\n    selected: boolean\n    onClick: (e: MouseEvent<HTMLButtonElement>) => void\n    className: string\n  }>\n>(({ value, selected, onClick, children, className }) => {\n  const theme = useTheme()\n  return (\n    <Button\n      role=\"option\"\n      value={value}\n      className={className}\n      aria-selected={selected}\n      onClick={onClick}\n      prefix={\n        selected && (\n          <FaCheckIcon\n            alt={\n              <Translate>\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/Launcher/sortDropdownSelected\"\n                  defaultText=\"選択中\"\n                />\n              </Translate>\n            }\n            color={theme.textColor.main}\n          />\n        )\n      }\n    >\n      <Translate>{children}</Translate>\n    </Button>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA;AACE;AACE;;;;AAIC;AACD;AACA;;;AAGC;AACF;AACF;AAED;;;;;;;AAQA;AAOO;AACL;AAEA;AAEI;;;AAOC;AACD;;;AAOC;AACD;;;AAOC;;AAKL;AAEI;;;;AAKE;AACE;AACA;;;AAGN;;AA0BJ;AAEA;AAgBA;AAQE;AACA;AA0BF;;"}

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

@@ -19,6 +19,7 @@ require('../../../Heading/client/PageHeading/PageHeading.cjs');
 var components_Icon_FaIcon = require('../../../Icon/FaIcon.cjs');
 require('../../../Icon/generateIcon.cjs');
 require('../../../Icon/OpenInNewTabIcon.cjs');
+require('../../../Icon/StatusIcon.cjs');
 require('../../../Input/client/Input.cjs');
 require('../../../Input/client/CurrencyInput/CurrencyInput.cjs');
 var components_Input_SearchInput_SearchInput = require('../../../Input/SearchInput/SearchInput.cjs');
@@ -119,7 +120,7 @@ const AppLauncher = ({ features: baseFeatures, loading, error }) => {
             defaultText: 'すべてのアプリ',
         },
     });
-    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", value: searchQuery, title: translated.searchInputTitle, width: "100%", onChange: onChangeSearchQuery, tooltipMessage: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: translated.searchInputTitle }), suffix: mode === 'search' && jsxRuntime.jsx(ClearSearchButton, { onClick: onClickClearSearchQuery }) }) }), 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, { align: "center", justify: "space-between", className: CLASS_NAMES.contentHead, 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_client_Scroller.Scroller, { className: CLASS_NAMES.scrollArea, children: jsxRuntime.jsx(components_AppHeader_components_common_AppLauncherFeatures.AppLauncherFeatures, { features: features, page: page, loading: loading, error: error }) })] }) })] })] }));
+    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", value: searchQuery, title: translated.searchInputTitle, width: "100%", onChange: onChangeSearchQuery, tooltipMessage: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: translated.searchInputTitle }), suffix: mode === 'search' && jsxRuntime.jsx(ClearSearchButton, { onClick: onClickClearSearchQuery }) }) }), 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, { align: "center", justify: "space-between", className: CLASS_NAMES.contentHead, 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, handleSelectSortType: setSortType }))] }), jsxRuntime.jsx(components_Scroller_client_Scroller.Scroller, { className: CLASS_NAMES.scrollArea, children: jsxRuntime.jsx(components_AppHeader_components_common_AppLauncherFeatures.AppLauncherFeatures, { features: features, page: page, loading: loading, error: error }) })] }) })] })] }));
 };
 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/client/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  loading?: boolean\n  error?: boolean\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, loading, error }) => {\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          value={searchQuery}\n          title={translated.searchInputTitle}\n          width=\"100%\"\n          onChange={onChangeSearchQuery}\n          tooltipMessage={<Translate>{translated.searchInputTitle}</Translate>}\n          suffix={mode === 'search' && <ClearSearchButton onClick={onClickClearSearchQuery} />}\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 align=\"center\" justify=\"space-between\" className={CLASS_NAMES.contentHead}>\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\n                features={features}\n                page={page}\n                loading={loading}\n                error={error}\n              />\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 size=\"S\" className={CLASS_NAMES.unselectedSideNav} aria-label={favoriteModeText}>\n        {unselectedItems.map((item) => (\n          <SideNavItemButton\n            key={item.id}\n            id={item.id}\n            current={item.current}\n            onClick={onClick}\n            prefix={item.prefix}\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 size=\"S\" className={CLASS_NAMES.selectedSideNav} 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;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;;AA0DH;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/client/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  loading?: boolean\n  error?: boolean\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, loading, error }) => {\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          value={searchQuery}\n          title={translated.searchInputTitle}\n          width=\"100%\"\n          onChange={onChangeSearchQuery}\n          tooltipMessage={<Translate>{translated.searchInputTitle}</Translate>}\n          suffix={mode === 'search' && <ClearSearchButton onClick={onClickClearSearchQuery} />}\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 align=\"center\" justify=\"space-between\" className={CLASS_NAMES.contentHead}>\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} handleSelectSortType={setSortType} />\n              )}\n            </Cluster>\n\n            <Scroller className={CLASS_NAMES.scrollArea}>\n              <AppLauncherFeatures\n                features={features}\n                page={page}\n                loading={loading}\n                error={error}\n              />\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 size=\"S\" className={CLASS_NAMES.unselectedSideNav} aria-label={favoriteModeText}>\n        {unselectedItems.map((item) => (\n          <SideNavItemButton\n            key={item.id}\n            id={item.id}\n            current={item.current}\n            onClick={onClick}\n            prefix={item.prefix}\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 size=\"S\" className={CLASS_NAMES.selectedSideNav} 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;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;;AA0DH;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

@@ -17,6 +17,7 @@ import '../../../Heading/client/PageHeading/PageHeading.js';
 import { FaCircleXmarkIcon, FaStarIcon } from '../../../Icon/FaIcon.js';
 import '../../../Icon/generateIcon.js';
 import '../../../Icon/OpenInNewTabIcon.js';
+import '../../../Icon/StatusIcon.js';
 import '../../../Input/client/Input.js';
 import '../../../Input/client/CurrencyInput/CurrencyInput.js';
 import { SearchInput } from '../../../Input/SearchInput/SearchInput.js';
@@ -117,7 +118,7 @@ const AppLauncher = ({ features: baseFeatures, loading, error }) => {
             defaultText: 'すべてのアプリ',
         },
     });
-    return (jsxs("div", { ref: callbackRef, className: CLASS_NAMES.wrapper, children: [jsx("div", { className: CLASS_NAMES.searchArea, children: jsx(SearchInput, { name: "search", value: searchQuery, title: translated.searchInputTitle, width: "100%", onChange: onChangeSearchQuery, tooltipMessage: jsx(Translate, { children: translated.searchInputTitle }), suffix: mode === 'search' && jsx(ClearSearchButton, { onClick: onClickClearSearchQuery }) }) }), 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, { align: "center", justify: "space-between", className: CLASS_NAMES.contentHead, 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, loading: loading, error: error }) })] }) })] })] }));
+    return (jsxs("div", { ref: callbackRef, className: CLASS_NAMES.wrapper, children: [jsx("div", { className: CLASS_NAMES.searchArea, children: jsx(SearchInput, { name: "search", value: searchQuery, title: translated.searchInputTitle, width: "100%", onChange: onChangeSearchQuery, tooltipMessage: jsx(Translate, { children: translated.searchInputTitle }), suffix: mode === 'search' && jsx(ClearSearchButton, { onClick: onClickClearSearchQuery }) }) }), 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, { align: "center", justify: "space-between", className: CLASS_NAMES.contentHead, 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, handleSelectSortType: setSortType }))] }), jsx(Scroller, { className: CLASS_NAMES.scrollArea, children: jsx(AppLauncherFeatures, { features: features, page: page, loading: loading, error: error }) })] }) })] })] }));
 };
 const ClearSearchButton = memo(({ onClick }) => (jsx(UnstyledButton, { onClick: onClick, children: jsx(FaCircleXmarkIcon, {}) })));
 const SideNavs = memo(({ mode, page, changePage, favoriteModeText, allModeText }) => {