smarthr-ui 98.1.0 → 99.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanelTrigger.js","sources":["../../../src/components/AccordionPanel/AccordionPanelTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type KeyboardEventHandler,\n  type MouseEvent,\n  type PropsWithChildren,\n  memo,\n  useCallback,\n  useContext,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { getIsInclude, mapToKeyArray } from '../../libs/map'\nimport { Heading, type HeadingTagTypes } from '../Heading'\nimport { FaCaretDownIcon, FaCaretRightIcon } from '../Icon'\nimport { Cluster } from '../Layout'\n\nimport { AccordionPanelContext } from './AccordionPanel'\nimport { AccordionPanelItemContext } from './AccordionPanelItem'\nimport {\n  focusFirstSibling,\n  focusLastSibling,\n  focusNextSibling,\n  focusPreviousSibling,\n  getNewExpandedItems,\n} from './accordionPanelHelper'\n\nimport type { TextProps } from '../Text'\n\ntype AbstractProps = PropsWithChildren<{\n  /** ヘッダ部分のテキストのスタイル */\n  headingType?: Exclude<TextProps['styleType'], 'screenTitle'>\n  /**\n   * 可能な限り利用せず、SectioningContent(Article, Aside, Nav, Section)を使ってHeadingと関連する範囲を明確に指定する方法を検討してください\n   */\n  unrecommendedHeadingTag?: HeadingTagTypes\n}>\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'button'>, keyof AbstractProps>\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      // Base 直下に AccordionPanel がある場合、背景が付き抜けないように角丸を指定（Base に overflow: hidden を与えるとフォーカスリングが表示されなくなる）\n      '[.smarthr-ui-Base_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:first-child_&]:shr-rounded-t-l [.smarthr-ui-Base_>_.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 {\n    iconPosition,\n    expandedItems,\n    onClickTrigger,\n    onClickProps,\n    expandableMultiply,\n    parentRef,\n  } = useContext(AccordionPanelContext)\n\n  const isExpanded = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])\n\n  const actualOnClickTrigger = useMemo(\n    () =>\n      onClickTrigger\n        ? (e: MouseEvent<HTMLButtonElement>) => onClickTrigger(e.currentTarget.value, !isExpanded)\n        : undefined,\n    [isExpanded, onClickTrigger],\n  )\n  const actualOnClickProps = useMemo(\n    () =>\n      onClickProps\n        ? (e: MouseEvent<HTMLButtonElement>) => {\n            const newExpandedItems = getNewExpandedItems(\n              expandedItems,\n              e.currentTarget.value,\n              !isExpanded,\n              expandableMultiply,\n            )\n            onClickProps(mapToKeyArray(newExpandedItems))\n          }\n        : undefined,\n    [isExpanded, expandedItems, expandableMultiply, onClickProps],\n  )\n  const handleClick = useMemo(() => {\n    if (actualOnClickTrigger) {\n      if (actualOnClickProps) {\n        return (e: MouseEvent<HTMLButtonElement>) => {\n          actualOnClickTrigger(e)\n          actualOnClickProps(e)\n        }\n      }\n\n      return actualOnClickTrigger\n    } else if (actualOnClickProps) {\n      return actualOnClickProps\n    }\n\n    return undefined\n  }, [actualOnClickProps, actualOnClickTrigger])\n\n  const handleKeyDown: KeyboardEventHandler<HTMLButtonElement> = useCallback(\n    (e): void => {\n      if (!parentRef?.current) {\n        return\n      }\n\n      const item = e.target as HTMLElement\n\n      switch (e.key) {\n        case 'Home': {\n          e.preventDefault()\n          focusFirstSibling(parentRef.current)\n          break\n        }\n        case 'End': {\n          e.preventDefault()\n          focusLastSibling(parentRef.current)\n          break\n        }\n        case 'ArrowLeft':\n        case 'ArrowUp': {\n          e.preventDefault()\n          focusPreviousSibling(item, parentRef.current)\n          break\n        }\n        case 'ArrowRight':\n        case 'ArrowDown': {\n          e.preventDefault()\n          focusNextSibling(item, parentRef.current)\n          break\n        }\n      }\n    },\n    [parentRef],\n  )\n\n  return (\n    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n    <Heading unrecommendedTag={unrecommendedHeadingTag} type={headingType}>\n      <button\n        {...rest}\n        type=\"button\"\n        value={name}\n        id={triggerId}\n        aria-expanded={isExpanded}\n        aria-controls={contentId}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        className={classNames.button}\n        data-component=\"AccordionHeaderButton\"\n      >\n        <MemoizedTitle iconPosition={iconPosition} classNames={classNames}>\n          {children}\n        </MemoizedTitle>\n      </button>\n    </Heading>\n  )\n}\n\nconst MemoizedTitle = memo<\n  PropsWithChildren<{\n    iconPosition: undefined | 'left' | 'right'\n    classNames: { leftIcon: string; rightIcon: string; title: string; titleWrapper: string }\n  }>\n>(({ classNames, iconPosition, children }) => (\n  <Cluster className={classNames.titleWrapper} align=\"center\" as=\"span\">\n    {iconPosition === 'left' && <FaCaretRightIcon className={classNames.leftIcon} />}\n    <span className={classNames.title}>{children}</span>\n    {iconPosition === 'right' && <FaCaretDownIcon className={classNames.rightIcon} />}\n  </Cluster>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA0CA;AACE;AACE;AACA;AACA;;;;;;;;AAQC;AACD;AACA;AACD;AACD;AACE;AACE;AACA;AACD;AACF;AACF;;AASC;AACE;;;;AAKE;;;;AAIJ;AAEA;AACA;;AAWA;AAGM;;AAIN;AAGM;AACI;AAMA;;AAEJ;AAGN;;;;;;AAMM;;AAGF;;;AAEA;;AAGF;AACF;AAEA;AAEI;;;AAIA;AAEA;;;AAGI;;;;;AAKA;;;AAGF;;;AAGE;;;AAGF;;;AAGE;;;;AAIN;;;AAMA;AAmBJ;AAEA;;"}
+{"version":3,"file":"AccordionPanelTrigger.js","sources":["../../../src/components/AccordionPanel/AccordionPanelTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\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, type HeadingTagTypes } from '../Heading'\nimport { FaCaretDownIcon, FaCaretRightIcon } from '../Icon'\nimport { Cluster } from '../Layout'\n\nimport { AccordionPanelContext } from './AccordionPanel'\nimport { AccordionPanelItemContext } from './AccordionPanelItem'\n\nimport type { TextProps } from '../Text'\n\ntype AbstractProps = PropsWithChildren<{\n  /** ヘッダ部分のテキストのスタイル */\n  headingType?: Exclude<TextProps['styleType'], 'screenTitle'>\n  /**\n   * 可能な限り利用せず、SectioningContent(Article, Aside, Nav, Section)を使ってHeadingと関連する範囲を明確に指定する方法を検討してください\n   */\n  unrecommendedHeadingTag?: HeadingTagTypes\n}>\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'button'>, keyof AbstractProps>\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      // Base 直下に AccordionPanel がある場合、背景が付き抜けないように角丸を指定（Base に overflow: hidden を与えるとフォーカスリングが表示されなくなる）\n      '[.smarthr-ui-Base_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:first-child_&]:shr-rounded-t-l [.smarthr-ui-Base_>_.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      name={name}\n      triggerId={triggerId}\n      isExpanded={isExpanded}\n      contentId={contentId}\n      handleClickTrigger={handleClickTrigger}\n      handleKeyDown={handleKeyDown}\n      classNames={classNames}\n      iconPosition={iconPosition}\n      headingType={headingType}\n      unrecommendedHeadingTag={unrecommendedHeadingTag}\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?: HeadingTagTypes\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 unrecommendedTag={unrecommendedHeadingTag} type={headingType}>\n      <button\n        {...rest}\n        type=\"button\"\n        value={name}\n        id={triggerId}\n        aria-expanded={isExpanded}\n        aria-controls={contentId}\n        onClick={handleClickTrigger}\n        onKeyDown={handleKeyDown}\n        className={classNames.button}\n        data-component=\"AccordionHeaderButton\"\n      >\n        {/* eslint-disable-next-line smarthr/best-practice-for-layouts */}\n        <Cluster className={classNames.titleWrapper} align=\"center\" as=\"span\">\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":";;;;;;;;;;;;;;;;;;;AAkCA;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/AppHeader/components/common/AppLauncherFeatures.cjs

@@ -4,8 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index = require('./../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../../../intl/IntlProvider.cjs');
-var intl_useIntl = require('../../../../intl/useIntl.cjs');
-require('../../../../intl/Localizer.cjs');
+require('react-intl');
+var intl_Localizer = require('../../../../intl/Localizer.cjs');
 require('../../../../_virtual/dayjs.min.cjs');
 require('../../../../intl/TimeFormatter.cjs');
 require('../../../Button/Button.cjs');
@@ -30,29 +30,19 @@ const classNameGenerator = index.tv({
         ],
     },
 });
+const CLASS_NAMES = (() => {
+    const { empty, list, listItem } = classNameGenerator();
+    return {
+        empty: empty(),
+        list: list(),
+        listItem: listItem(),
+    };
+})();
 const AppLauncherFeatures = ({ features, page }) => features.length === 0 ? jsxRuntime.jsx(EmptyList, {}) : jsxRuntime.jsx(FeatureList, { features: features, page: page });
-const EmptyList = React.memo(() => {
-    const className = React.useMemo(() => {
-        const { empty } = classNameGenerator();
-        return empty();
-    }, []);
-    const { localize } = intl_useIntl.useIntl();
-    const translated = React.useMemo(() => localize({
-        id: 'smarthr-ui/AppHeader/Launcher/emptyText',
-        defaultText: '該当するアプリが見つかりませんでした。',
-    }), [localize]);
-    return (jsxRuntime.jsx("div", { className: className, children: jsxRuntime.jsx(components_Text_Text.Text, { size: "S", children: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: translated }) }) }));
-});
+const EmptyList = React.memo(() => (jsxRuntime.jsx("div", { className: CLASS_NAMES.empty, children: jsxRuntime.jsx(components_Text_Text.Text, { size: "S", children: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/AppHeader/Launcher/emptyText", defaultText: "\u8A72\u5F53\u3059\u308B\u30A2\u30D7\u30EA\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F\u3002" }) }) }) })));
 const FeatureList = ({ features, page }) => {
-    const classNames = React.useMemo(() => {
-        const { list, listItem } = classNameGenerator();
-        return {
-            list: list(),
-            listItem: listItem(),
-        };
-    }, []);
     const isFavorite = page === 'favorite';
-    return (jsxRuntime.jsx("ul", { className: classNames.list, children: features.map((feature) => (jsxRuntime.jsx(FeatureListItem, { href: feature.url, isFavorite: isFavorite, className: classNames.listItem, children: feature.name }, feature.id))) }));
+    return (jsxRuntime.jsx("ul", { className: CLASS_NAMES.list, children: features.map((feature) => (jsxRuntime.jsx(FeatureListItem, { href: feature.url, isFavorite: isFavorite, className: CLASS_NAMES.listItem, children: feature.name }, feature.id))) }));
 };
 const FeatureListItem = React.memo(({ href, children, isFavorite, className }) => (jsxRuntime.jsx("li", { children: jsxRuntime.jsx(components_Button_AnchorButton.AnchorButton, { href: href, target: "_blank", prefix: isFavorite && jsxRuntime.jsx(components_Icon_FaIcon.FaStarIcon, {}), suffix: jsxRuntime.jsx(components_Icon_FaIcon.FaArrowRightIcon, {}), variant: "text", wide: true, "data-favorite": isFavorite, className: className, children: jsxRuntime.jsx(FeatureName, { children: children }) }) })));
 const FeatureName = ({ children }) => {

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, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { AnchorButton } from '../../../Button'\nimport { FaArrowRightIcon, FaStarIcon } from '../../../Icon'\nimport { LineClamp } from '../../../LineClamp'\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    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\ntype Props = {\n  features: Array<Launcher['feature']>\n  page: Launcher['page']\n}\n\nexport const AppLauncherFeatures: FC<Props> = ({ features, page }) =>\n  features.length === 0 ? <EmptyList /> : <FeatureList features={features} page={page} />\n\nconst EmptyList = memo(() => {\n  const className = useMemo(() => {\n    const { empty } = classNameGenerator()\n\n    return empty()\n  }, [])\n  const { localize } = useIntl()\n  const translated = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/AppHeader/Launcher/emptyText',\n        defaultText: '該当するアプリが見つかりませんでした。',\n      }),\n    [localize],\n  )\n\n  return (\n    <div className={className}>\n      <Text size=\"S\">\n        <Translate>{translated}</Translate>\n      </Text>\n    </div>\n  )\n})\n\nconst FeatureList: FC<Props> = ({ features, page }) => {\n  const classNames = useMemo(() => {\n    const { list, listItem } = classNameGenerator()\n\n    return {\n      list: list(),\n      listItem: listItem(),\n    }\n  }, [])\n\n  const isFavorite = page === 'favorite'\n\n  return (\n    <ul className={classNames.list}>\n      {features.map((feature) => (\n        <FeatureListItem\n          key={feature.id}\n          href={feature.url}\n          isFavorite={isFavorite}\n          className={classNames.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      prefix={isFavorite && <FaStarIcon />}\n      suffix={<FaArrowRightIcon />}\n      variant=\"text\"\n      wide\n      data-favorite={isFavorite}\n      className={className}\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","useMemo","useIntl","Text","Translate","AnchorButton","FaStarIcon","FaArrowRightIcon","useMediaQuery","mediaQuery","LineClamp"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;QACL,KAAK,EAAE,CAAC,yBAAyB,CAAC;AAClC,QAAA,IAAI,EAAE,CAAC,eAAe,EAAE,sCAAsC,CAAC;AAC/D,QAAA,QAAQ,EAAE;YACR,iCAAiC;YACjC,gJAAgJ;YAChJ,kDAAkD;AACnD,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAOK,MAAM,mBAAmB,GAAc,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAC/D,QAAQ,CAAC,MAAM,KAAK,CAAC,GAAGC,eAAC,SAAS,EAAA,EAAA,CAAG,GAAGA,cAAA,CAAC,WAAW,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI;AAErF,MAAM,SAAS,GAAGC,UAAI,CAAC,MAAK;AAC1B,IAAA,MAAM,SAAS,GAAGC,aAAO,CAAC,MAAK;AAC7B,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,kBAAkB,EAAE;QAEtC,OAAO,KAAK,EAAE;IAChB,CAAC,EAAE,EAAE,CAAC;AACN,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAGC,oBAAO,EAAE;IAC9B,MAAM,UAAU,GAAGD,aAAO,CACxB,MACE,QAAQ,CAAC;AACP,QAAA,EAAE,EAAE,yCAAyC;AAC7C,QAAA,WAAW,EAAE,qBAAqB;AACnC,KAAA,CAAC,EACJ,CAAC,QAAQ,CAAC,CACX;IAED,QACEF,wBAAK,SAAS,EAAE,SAAS,EAAA,QAAA,EACvBA,cAAA,CAACI,yBAAI,EAAA,EAAC,IAAI,EAAC,GAAG,EAAA,QAAA,EACZJ,eAACK,0DAAS,EAAA,EAAA,QAAA,EAAE,UAAU,EAAA,CAAa,EAAA,CAC9B,EAAA,CACH;AAEV,CAAC,CAAC;AAEF,MAAM,WAAW,GAAc,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAI;AACpD,IAAA,MAAM,UAAU,GAAGH,aAAO,CAAC,MAAK;QAC9B,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,kBAAkB,EAAE;QAE/C,OAAO;YACL,IAAI,EAAE,IAAI,EAAE;YACZ,QAAQ,EAAE,QAAQ,EAAE;SACrB;IACH,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,UAAU,GAAG,IAAI,KAAK,UAAU;IAEtC,QACEF,uBAAI,SAAS,EAAE,UAAU,CAAC,IAAI,EAAA,QAAA,EAC3B,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACpBA,cAAA,CAAC,eAAe,EAAA,EAEd,IAAI,EAAE,OAAO,CAAC,GAAG,EACjB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAA,QAAA,EAE7B,OAAO,CAAC,IAAI,EAAA,EALR,OAAO,CAAC,EAAE,CAMC,CACnB,CAAC,EAAA,CACC;AAET,CAAC;AAED,MAAM,eAAe,GAAGC,UAAI,CAKzB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,MAC3CD,cAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EACEA,cAAA,CAACM,2CAAY,EAAA,EACX,IAAI,EAAE,IAAI,EACV,MAAM,EAAC,QAAQ,EACf,MAAM,EAAE,UAAU,IAAIN,cAAA,CAACO,iCAAU,EAAA,EAAA,CAAG,EACpC,MAAM,EAAEP,cAAA,CAACQ,uCAAgB,EAAA,EAAA,CAAG,EAC5B,OAAO,EAAC,MAAM,EACd,IAAI,EAAA,IAAA,EAAA,eAAA,EACW,UAAU,EACzB,SAAS,EAAE,SAAS,YAEpBR,cAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAe,EAAA,CACxB,EAAA,CACZ,CACN,CAAC;AAEF,MAAM,WAAW,GAA0B,CAAC,EAAE,QAAQ,EAAE,KAAI;IAC1D,MAAM,SAAS,GAAGS,sDAAa,CAACC,mDAAU,CAAC,OAAO,CAAC;AAEnD,IAAA,OAAO,SAAS,GAAGV,cAAA,CAACW,wCAAS,EAAA,EAAC,QAAQ,EAAE,CAAC,YAAG,QAAQ,EAAA,CAAa,GAAG,QAAQ;AAC9E,CAAC;;;;"}
+{"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 { LineClamp } from '../../../LineClamp'\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    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, list, listItem } = classNameGenerator()\n\n  return {\n    empty: empty(),\n    list: list(),\n    listItem: listItem(),\n  }\n})()\n\ntype Props = {\n  features: Array<Launcher['feature']>\n  page: Launcher['page']\n}\n\nexport const AppLauncherFeatures: FC<Props> = ({ features, page }) =>\n  features.length === 0 ? <EmptyList /> : <FeatureList features={features} page={page} />\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      prefix={isFavorite && <FaStarIcon />}\n      suffix={<FaArrowRightIcon />}\n      variant=\"text\"\n      wide\n      data-favorite={isFavorite}\n      className={className}\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","Text","Translate","Localizer","AnchorButton","FaStarIcon","FaArrowRightIcon","useMediaQuery","mediaQuery","LineClamp"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;QACL,KAAK,EAAE,CAAC,yBAAyB,CAAC;AAClC,QAAA,IAAI,EAAE,CAAC,eAAe,EAAE,sCAAsC,CAAC;AAC/D,QAAA,QAAQ,EAAE;YACR,iCAAiC;YACjC,gJAAgJ;YAChJ,kDAAkD;AACnD,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,MAAK;IACxB,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,kBAAkB,EAAE;IAEtD,OAAO;QACL,KAAK,EAAE,KAAK,EAAE;QACd,IAAI,EAAE,IAAI,EAAE;QACZ,QAAQ,EAAE,QAAQ,EAAE;KACrB;AACH,CAAC,GAAG;AAOG,MAAM,mBAAmB,GAAc,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAC/D,QAAQ,CAAC,MAAM,KAAK,CAAC,GAAGC,eAAC,SAAS,EAAA,EAAA,CAAG,GAAGA,cAAA,CAAC,WAAW,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI;AAErF,MAAM,SAAS,GAAGC,UAAI,CAAC,OACrBD,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,WAAW,CAAC,KAAK,YAC/BA,cAAA,CAACE,yBAAI,IAAC,IAAI,EAAC,GAAG,EAAA,QAAA,EACZF,eAACG,0DAAS,EAAA,EAAA,QAAA,EACRH,eAACI,wBAAS,EAAA,EACR,EAAE,EAAC,yCAAyC,EAC5C,WAAW,EAAC,oHAAqB,EAAA,CACjC,EAAA,CACQ,GACP,EAAA,CACH,CACP,CAAC;AAEF,MAAM,WAAW,GAAc,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAI;AACpD,IAAA,MAAM,UAAU,GAAG,IAAI,KAAK,UAAU;IAEtC,QACEJ,uBAAI,SAAS,EAAE,WAAW,CAAC,IAAI,EAAA,QAAA,EAC5B,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACpBA,cAAA,CAAC,eAAe,EAAA,EAEd,IAAI,EAAE,OAAO,CAAC,GAAG,EACjB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,WAAW,CAAC,QAAQ,EAAA,QAAA,EAE9B,OAAO,CAAC,IAAI,EAAA,EALR,OAAO,CAAC,EAAE,CAMC,CACnB,CAAC,EAAA,CACC;AAET,CAAC;AAED,MAAM,eAAe,GAAGC,UAAI,CAKzB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,MAC3CD,cAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EACEA,cAAA,CAACK,2CAAY,EAAA,EACX,IAAI,EAAE,IAAI,EACV,MAAM,EAAC,QAAQ,EACf,MAAM,EAAE,UAAU,IAAIL,cAAA,CAACM,iCAAU,EAAA,EAAA,CAAG,EACpC,MAAM,EAAEN,cAAA,CAACO,uCAAgB,EAAA,EAAA,CAAG,EAC5B,OAAO,EAAC,MAAM,EACd,IAAI,EAAA,IAAA,EAAA,eAAA,EACW,UAAU,EACzB,SAAS,EAAE,SAAS,YAEpBP,cAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAe,EAAA,CACxB,EAAA,CACZ,CACN,CAAC;AAEF,MAAM,WAAW,GAA0B,CAAC,EAAE,QAAQ,EAAE,KAAI;IAC1D,MAAM,SAAS,GAAGQ,sDAAa,CAACC,mDAAU,CAAC,OAAO,CAAC;AAEnD,IAAA,OAAO,SAAS,GAAGT,cAAA,CAACU,wCAAS,EAAA,EAAC,QAAQ,EAAE,CAAC,YAAG,QAAQ,EAAA,CAAa,GAAG,QAAQ;AAC9E,CAAC;;;;"}

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

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { tv as ce } from './../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../../../../intl/IntlProvider.js';
-import { useIntl } from '../../../../intl/useIntl.js';
-import '../../../../intl/Localizer.js';
+import 'react-intl';
+import { Localizer } from '../../../../intl/Localizer.js';
 import '../../../../_virtual/dayjs.min.js';
 import '../../../../intl/TimeFormatter.js';
 import '../../../Button/Button.js';
@@ -28,29 +28,19 @@ const classNameGenerator = ce({
         ],
     },
 });
+const CLASS_NAMES = (() => {
+    const { empty, list, listItem } = classNameGenerator();
+    return {
+        empty: empty(),
+        list: list(),
+        listItem: listItem(),
+    };
+})();
 const AppLauncherFeatures = ({ features, page }) => features.length === 0 ? jsx(EmptyList, {}) : jsx(FeatureList, { features: features, page: page });
-const EmptyList = memo(() => {
-    const className = useMemo(() => {
-        const { empty } = classNameGenerator();
-        return empty();
-    }, []);
-    const { localize } = useIntl();
-    const translated = useMemo(() => localize({
-        id: 'smarthr-ui/AppHeader/Launcher/emptyText',
-        defaultText: '該当するアプリが見つかりませんでした。',
-    }), [localize]);
-    return (jsx("div", { className: className, children: jsx(Text, { size: "S", children: jsx(Translate, { children: translated }) }) }));
-});
+const EmptyList = memo(() => (jsx("div", { className: CLASS_NAMES.empty, children: jsx(Text, { size: "S", children: jsx(Translate, { children: jsx(Localizer, { id: "smarthr-ui/AppHeader/Launcher/emptyText", defaultText: "\u8A72\u5F53\u3059\u308B\u30A2\u30D7\u30EA\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F\u3002" }) }) }) })));
 const FeatureList = ({ features, page }) => {
-    const classNames = useMemo(() => {
-        const { list, listItem } = classNameGenerator();
-        return {
-            list: list(),
-            listItem: listItem(),
-        };
-    }, []);
     const isFavorite = page === 'favorite';
-    return (jsx("ul", { className: classNames.list, children: features.map((feature) => (jsx(FeatureListItem, { href: feature.url, isFavorite: isFavorite, className: classNames.listItem, children: feature.name }, feature.id))) }));
+    return (jsx("ul", { className: CLASS_NAMES.list, children: features.map((feature) => (jsx(FeatureListItem, { href: feature.url, isFavorite: isFavorite, className: CLASS_NAMES.listItem, children: feature.name }, feature.id))) }));
 };
 const FeatureListItem = memo(({ href, children, isFavorite, className }) => (jsx("li", { children: jsx(ForwardedAnchorButton, { href: href, target: "_blank", prefix: isFavorite && jsx(FaStarIcon, {}), suffix: jsx(FaArrowRightIcon, {}), variant: "text", wide: true, "data-favorite": isFavorite, className: className, children: jsx(FeatureName, { children: children }) }) })));
 const FeatureName = ({ children }) => {

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, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { AnchorButton } from '../../../Button'\nimport { FaArrowRightIcon, FaStarIcon } from '../../../Icon'\nimport { LineClamp } from '../../../LineClamp'\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    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\ntype Props = {\n  features: Array<Launcher['feature']>\n  page: Launcher['page']\n}\n\nexport const AppLauncherFeatures: FC<Props> = ({ features, page }) =>\n  features.length === 0 ? <EmptyList /> : <FeatureList features={features} page={page} />\n\nconst EmptyList = memo(() => {\n  const className = useMemo(() => {\n    const { empty } = classNameGenerator()\n\n    return empty()\n  }, [])\n  const { localize } = useIntl()\n  const translated = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/AppHeader/Launcher/emptyText',\n        defaultText: '該当するアプリが見つかりませんでした。',\n      }),\n    [localize],\n  )\n\n  return (\n    <div className={className}>\n      <Text size=\"S\">\n        <Translate>{translated}</Translate>\n      </Text>\n    </div>\n  )\n})\n\nconst FeatureList: FC<Props> = ({ features, page }) => {\n  const classNames = useMemo(() => {\n    const { list, listItem } = classNameGenerator()\n\n    return {\n      list: list(),\n      listItem: listItem(),\n    }\n  }, [])\n\n  const isFavorite = page === 'favorite'\n\n  return (\n    <ul className={classNames.list}>\n      {features.map((feature) => (\n        <FeatureListItem\n          key={feature.id}\n          href={feature.url}\n          isFavorite={isFavorite}\n          className={classNames.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      prefix={isFavorite && <FaStarIcon />}\n      suffix={<FaArrowRightIcon />}\n      variant=\"text\"\n      wide\n      data-favorite={isFavorite}\n      className={className}\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 { LineClamp } from '../../../LineClamp'\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    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, list, listItem } = classNameGenerator()\n\n  return {\n    empty: empty(),\n    list: list(),\n    listItem: listItem(),\n  }\n})()\n\ntype Props = {\n  features: Array<Launcher['feature']>\n  page: Launcher['page']\n}\n\nexport const AppLauncherFeatures: FC<Props> = ({ features, page }) =>\n  features.length === 0 ? <EmptyList /> : <FeatureList features={features} page={page} />\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      prefix={isFavorite && <FaStarIcon />}\n      suffix={<FaArrowRightIcon />}\n      variant=\"text\"\n      wide\n      data-favorite={isFavorite}\n      className={className}\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":";;;;;;;;;;;;;;;;;;;AAcA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;QACL,KAAK,EAAE,CAAC,yBAAyB,CAAC;AAClC,QAAA,IAAI,EAAE,CAAC,eAAe,EAAE,sCAAsC,CAAC;AAC/D,QAAA,QAAQ,EAAE;YACR,iCAAiC;YACjC,gJAAgJ;YAChJ,kDAAkD;AACnD,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,MAAK;IACxB,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,kBAAkB,EAAE;IAEtD,OAAO;QACL,KAAK,EAAE,KAAK,EAAE;QACd,IAAI,EAAE,IAAI,EAAE;QACZ,QAAQ,EAAE,QAAQ,EAAE;KACrB;AACH,CAAC,GAAG;AAOG,MAAM,mBAAmB,GAAc,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAC/D,QAAQ,CAAC,MAAM,KAAK,CAAC,GAAGC,IAAC,SAAS,EAAA,EAAA,CAAG,GAAGA,GAAA,CAAC,WAAW,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI;AAErF,MAAM,SAAS,GAAG,IAAI,CAAC,OACrBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,WAAW,CAAC,KAAK,YAC/BA,GAAA,CAAC,IAAI,IAAC,IAAI,EAAC,GAAG,EAAA,QAAA,EACZA,IAAC,SAAS,EAAA,EAAA,QAAA,EACRA,IAAC,SAAS,EAAA,EACR,EAAE,EAAC,yCAAyC,EAC5C,WAAW,EAAC,oHAAqB,EAAA,CACjC,EAAA,CACQ,GACP,EAAA,CACH,CACP,CAAC;AAEF,MAAM,WAAW,GAAc,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAI;AACpD,IAAA,MAAM,UAAU,GAAG,IAAI,KAAK,UAAU;IAEtC,QACEA,YAAI,SAAS,EAAE,WAAW,CAAC,IAAI,EAAA,QAAA,EAC5B,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACpBA,GAAA,CAAC,eAAe,EAAA,EAEd,IAAI,EAAE,OAAO,CAAC,GAAG,EACjB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,WAAW,CAAC,QAAQ,EAAA,QAAA,EAE9B,OAAO,CAAC,IAAI,EAAA,EALR,OAAO,CAAC,EAAE,CAMC,CACnB,CAAC,EAAA,CACC;AAET,CAAC;AAED,MAAM,eAAe,GAAG,IAAI,CAKzB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,MAC3CA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EACEA,GAAA,CAACC,qBAAY,EAAA,EACX,IAAI,EAAE,IAAI,EACV,MAAM,EAAC,QAAQ,EACf,MAAM,EAAE,UAAU,IAAID,GAAA,CAAC,UAAU,EAAA,EAAA,CAAG,EACpC,MAAM,EAAEA,GAAA,CAAC,gBAAgB,EAAA,EAAA,CAAG,EAC5B,OAAO,EAAC,MAAM,EACd,IAAI,EAAA,IAAA,EAAA,eAAA,EACW,UAAU,EACzB,SAAS,EAAE,SAAS,YAEpBA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAe,EAAA,CACxB,EAAA,CACZ,CACN,CAAC;AAEF,MAAM,WAAW,GAA0B,CAAC,EAAE,QAAQ,EAAE,KAAI;IAC1D,MAAM,SAAS,GAAG,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC;AAEnD,IAAA,OAAO,SAAS,GAAGA,GAAA,CAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,CAAC,YAAG,QAAQ,EAAA,CAAa,GAAG,QAAQ;AAC9E,CAAC;;;;"}

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

@@ -6,8 +6,8 @@ var React = require('react');
 var index = require('./../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 var hooks_useTheme = require('../../../../hooks/useTheme.cjs');
 require('../../../../intl/IntlProvider.cjs');
-var intl_useIntl = require('../../../../intl/useIntl.cjs');
-require('../../../../intl/Localizer.cjs');
+require('react-intl');
+var intl_Localizer = require('../../../../intl/Localizer.cjs');
 require('../../../../_virtual/dayjs.min.cjs');
 require('../../../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../../../Button/Button.cjs');
@@ -40,44 +40,30 @@ const classNameGenerator = index.tv({
         ],
     },
 });
+const CLASS_NAMES = (() => {
+    const { trigger, contentBody, contentButton } = classNameGenerator();
+    return {
+        trigger: trigger(),
+        contentBody: contentBody(),
+        contentButton: contentButton(),
+    };
+})();
 const AppLauncherSortDropdown = ({ sortType, onSelectSortType }) => {
     const triggerRef = React.useRef(null);
-    const classNames = React.useMemo(() => {
-        const { trigger, contentBody, contentButton } = classNameGenerator();
-        return {
-            trigger: trigger(),
-            contentBody: contentBody(),
-            contentButton: contentButton(),
-        };
-    }, []);
-    const { localize } = intl_useIntl.useIntl();
-    const translated = React.useMemo(() => ({
-        label: localize({
-            id: 'smarthr-ui/AppHeader/Launcher/sortDropdownLabel',
-            defaultText: '表示順',
-        }),
-        selected: localize({
-            id: 'smarthr-ui/AppHeader/Launcher/sortDropdownSelected',
-            defaultText: '選択中',
-        }),
-        default: localize({
-            id: 'smarthr-ui/AppHeader/Launcher/sortDropdownOrderDefault',
-            defaultText: 'デフォルト',
-        }),
-        asc: localize({
-            id: 'smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameAsc',
-            defaultText: 'アプリ名の昇順',
-        }),
-        desc: localize({
-            id: 'smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameDesc',
-            defaultText: 'アプリ名の降順',
-        }),
-    }), [localize]);
     const options = React.useMemo(() => [
-        ['default', translated.default],
-        ['name/asc', translated.asc],
-        ['name/desc', translated.desc],
-    ], [translated]);
+        [
+            'default',
+            jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/AppHeader/Launcher/sortDropdownOrderDefault", defaultText: "\u30C7\u30D5\u30A9\u30EB\u30C8" }, "default"),
+        ],
+        [
+            'name/asc',
+            jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameAsc", defaultText: "\u30A2\u30D7\u30EA\u540D\u306E\u6607\u9806" }, "name/asc"),
+        ],
+        [
+            'name/desc',
+            jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameDesc", defaultText: "\u30A2\u30D7\u30EA\u540D\u306E\u964D\u9806" }, "name/desc"),
+        ],
+    ], []);
     const onClickOption = React.useCallback((e) => {
         onSelectSortType(e.currentTarget.value);
         // Dropdown がネストしており、この Dropdown のみ閉じて親の Dropdown は開いたままというのができない
@@ -89,12 +75,12 @@ const AppLauncherSortDropdown = ({ sortType, onSelectSortType }) => {
             }
         }, 0);
     }, [onSelectSortType]);
-    return (jsxRuntime.jsxs(components_Dropdown_Dropdown.Dropdown, { children: [jsxRuntime.jsx(TriggerButton, { triggerRef: triggerRef, className: classNames.trigger, children: translated.label }), jsxRuntime.jsx(components_Dropdown_DropdownContent.DropdownContent, { controllable: true, children: jsxRuntime.jsx("div", { role: "listbox", className: classNames.contentBody, children: options.map(([value, children], i) => (jsxRuntime.jsx(OptionButton, { value: value, selected: value === sortType, selectedAlt: translated.selected, onClick: onClickOption, className: classNames.contentButton, children: children }, i))) }) })] }));
+    return (jsxRuntime.jsxs(components_Dropdown_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_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, onClick: onClickOption, className: CLASS_NAMES.contentButton, children: children }, i))) }) })] }));
 };
 const TriggerButton = React.memo(({ triggerRef, children, className }) => (jsxRuntime.jsx(components_Dropdown_DropdownTrigger.DropdownTrigger, { children: jsxRuntime.jsx(components_Button_Button.Button, { ref: triggerRef, size: "S", variant: "text", suffix: jsxRuntime.jsx(components_Icon_FaIcon.FaCaretDownIcon, {}), className: className, children: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: children }) }) })));
-const OptionButton = React.memo(({ value, selected, selectedAlt, onClick, children, className }) => {
+const OptionButton = React.memo(({ value, selected, onClick, children, className }) => {
     const theme = hooks_useTheme.useTheme();
-    return (jsxRuntime.jsx(components_Button_Button.Button, { value: value, role: "option", "aria-selected": selected, className: className, prefix: selected && (jsxRuntime.jsx(components_Icon_FaIcon.FaCheckIcon, { color: theme.textColor.main, alt: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: selectedAlt }) })), onClick: onClick, children: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: children }) }));
+    return (jsxRuntime.jsx(components_Button_Button.Button, { value: value, role: "option", "aria-selected": selected, className: className, prefix: selected && (jsxRuntime.jsx(components_Icon_FaIcon.FaCheckIcon, { color: theme.textColor.main, alt: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/AppHeader/Launcher/sortDropdownSelected", defaultText: "\u9078\u629E\u4E2D" }) }) })), onClick: onClick, children: jsxRuntime.jsx(components_AppHeader_components_common_Translate.Translate, { children: children }) }));
 });
 
 exports.AppLauncherSortDropdown = AppLauncherSortDropdown;

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/useTheme'\nimport { useIntl } 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\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 classNames = useMemo(() => {\n    const { trigger, contentBody, contentButton } = classNameGenerator()\n\n    return {\n      trigger: trigger(),\n      contentBody: contentBody(),\n      contentButton: contentButton(),\n    }\n  }, [])\n\n  const { localize } = useIntl()\n  const translated = useMemo(\n    () => ({\n      label: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownLabel',\n        defaultText: '表示順',\n      }),\n      selected: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownSelected',\n        defaultText: '選択中',\n      }),\n      default: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownOrderDefault',\n        defaultText: 'デフォルト',\n      }),\n      asc: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameAsc',\n        defaultText: 'アプリ名の昇順',\n      }),\n      desc: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameDesc',\n        defaultText: 'アプリ名の降順',\n      }),\n    }),\n    [localize],\n  )\n\n  const options = useMemo(\n    () => [\n      ['default', translated.default],\n      ['name/asc', translated.asc],\n      ['name/desc', translated.desc],\n    ],\n    [translated],\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={classNames.trigger}>\n        {translated.label}\n      </TriggerButton>\n      <DropdownContent controllable>\n        <div role=\"listbox\" className={classNames.contentBody}>\n          {options.map(([value, children], i) => (\n            <OptionButton\n              key={i}\n              value={value}\n              selected={value === sortType}\n              selectedAlt={translated.selected}\n              onClick={onClickOption}\n              className={classNames.contentButton}\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      size=\"S\"\n      variant=\"text\"\n      suffix={<FaCaretDownIcon />}\n      className={className}\n    >\n      <Translate>{children}</Translate>\n    </Button>\n  </DropdownTrigger>\n))\n\nconst OptionButton = memo<\n  PropsWithChildren<{\n    value: string\n    selected: boolean\n    selectedAlt: string\n    onClick: (e: MouseEvent<HTMLButtonElement>) => void\n    className: string\n  }>\n>(({ value, selected, selectedAlt, onClick, children, className }) => {\n  const theme = useTheme()\n  return (\n    <Button\n      value={value}\n      role=\"option\"\n      aria-selected={selected}\n      className={className}\n      prefix={\n        selected && (\n          <FaCheckIcon color={theme.textColor.main} alt={<Translate>{selectedAlt}</Translate>} />\n        )\n      }\n      onClick={onClick}\n    >\n      <Translate>{children}</Translate>\n    </Button>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA;AACE;AACE;;;;AAIC;AACD;AACA;;;AAGC;AACF;AACF;AAOM;AACL;AAEA;;;;;;;;AAUA;AACA;;AAGM;AACA;;;AAGA;AACA;;;AAGA;AACA;;;AAGA;AACA;;;AAGA;AACA;;AAEH;AAIH;AAEI;AACA;AACA;AACD;AAIH;AAEI;;;;AAKE;AACE;AACA;;;AAGN;;AA2BJ;AAEA;AAgBA;AASE;;AAiBF;;"}
+{"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/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              onClick={onClickOption}\n              className={CLASS_NAMES.contentButton}\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      size=\"S\"\n      variant=\"text\"\n      suffix={<FaCaretDownIcon />}\n      className={className}\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      value={value}\n      role=\"option\"\n      aria-selected={selected}\n      className={className}\n      prefix={\n        selected && (\n          <FaCheckIcon\n            color={theme.textColor.main}\n            alt={\n              <Translate>\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/Launcher/sortDropdownSelected\"\n                  defaultText=\"選択中\"\n                />\n              </Translate>\n            }\n          />\n        )\n      }\n      onClick={onClick}\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.js

@@ -4,8 +4,8 @@ import { memo, useRef, useMemo, useCallback } from 'react';
 import { tv as ce } from './../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import { useTheme } from '../../../../hooks/useTheme.js';
 import '../../../../intl/IntlProvider.js';
-import { useIntl } from '../../../../intl/useIntl.js';
-import '../../../../intl/Localizer.js';
+import 'react-intl';
+import { Localizer } from '../../../../intl/Localizer.js';
 import '../../../../_virtual/dayjs.min.js';
 import '../../../../intl/TimeFormatter.js';
 import { Button } from '../../../Button/Button.js';
@@ -38,44 +38,30 @@ const classNameGenerator = ce({
         ],
     },
 });
+const CLASS_NAMES = (() => {
+    const { trigger, contentBody, contentButton } = classNameGenerator();
+    return {
+        trigger: trigger(),
+        contentBody: contentBody(),
+        contentButton: contentButton(),
+    };
+})();
 const AppLauncherSortDropdown = ({ sortType, onSelectSortType }) => {
     const triggerRef = useRef(null);
-    const classNames = useMemo(() => {
-        const { trigger, contentBody, contentButton } = classNameGenerator();
-        return {
-            trigger: trigger(),
-            contentBody: contentBody(),
-            contentButton: contentButton(),
-        };
-    }, []);
-    const { localize } = useIntl();
-    const translated = useMemo(() => ({
-        label: localize({
-            id: 'smarthr-ui/AppHeader/Launcher/sortDropdownLabel',
-            defaultText: '表示順',
-        }),
-        selected: localize({
-            id: 'smarthr-ui/AppHeader/Launcher/sortDropdownSelected',
-            defaultText: '選択中',
-        }),
-        default: localize({
-            id: 'smarthr-ui/AppHeader/Launcher/sortDropdownOrderDefault',
-            defaultText: 'デフォルト',
-        }),
-        asc: localize({
-            id: 'smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameAsc',
-            defaultText: 'アプリ名の昇順',
-        }),
-        desc: localize({
-            id: 'smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameDesc',
-            defaultText: 'アプリ名の降順',
-        }),
-    }), [localize]);
     const options = useMemo(() => [
-        ['default', translated.default],
-        ['name/asc', translated.asc],
-        ['name/desc', translated.desc],
-    ], [translated]);
+        [
+            'default',
+            jsx(Localizer, { id: "smarthr-ui/AppHeader/Launcher/sortDropdownOrderDefault", defaultText: "\u30C7\u30D5\u30A9\u30EB\u30C8" }, "default"),
+        ],
+        [
+            'name/asc',
+            jsx(Localizer, { id: "smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameAsc", defaultText: "\u30A2\u30D7\u30EA\u540D\u306E\u6607\u9806" }, "name/asc"),
+        ],
+        [
+            'name/desc',
+            jsx(Localizer, { id: "smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameDesc", defaultText: "\u30A2\u30D7\u30EA\u540D\u306E\u964D\u9806" }, "name/desc"),
+        ],
+    ], []);
     const onClickOption = useCallback((e) => {
         onSelectSortType(e.currentTarget.value);
         // Dropdown がネストしており、この Dropdown のみ閉じて親の Dropdown は開いたままというのができない
@@ -87,12 +73,12 @@ const AppLauncherSortDropdown = ({ sortType, onSelectSortType }) => {
             }
         }, 0);
     }, [onSelectSortType]);
-    return (jsxs(Dropdown, { children: [jsx(TriggerButton, { triggerRef: triggerRef, className: classNames.trigger, children: translated.label }), jsx(DropdownContent, { controllable: true, children: jsx("div", { role: "listbox", className: classNames.contentBody, children: options.map(([value, children], i) => (jsx(OptionButton, { value: value, selected: value === sortType, selectedAlt: translated.selected, onClick: onClickOption, className: classNames.contentButton, children: children }, i))) }) })] }));
+    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, onClick: onClickOption, className: CLASS_NAMES.contentButton, children: children }, i))) }) })] }));
 };
 const TriggerButton = memo(({ triggerRef, children, className }) => (jsx(DropdownTrigger, { children: jsx(Button, { ref: triggerRef, size: "S", variant: "text", suffix: jsx(FaCaretDownIcon, {}), className: className, children: jsx(Translate, { children: children }) }) })));
-const OptionButton = memo(({ value, selected, selectedAlt, onClick, children, className }) => {
+const OptionButton = memo(({ value, selected, onClick, children, className }) => {
     const theme = useTheme();
-    return (jsx(Button, { value: value, role: "option", "aria-selected": selected, className: className, prefix: selected && (jsx(FaCheckIcon, { color: theme.textColor.main, alt: jsx(Translate, { children: selectedAlt }) })), onClick: onClick, children: jsx(Translate, { children: children }) }));
+    return (jsx(Button, { value: value, role: "option", "aria-selected": selected, className: className, prefix: selected && (jsx(FaCheckIcon, { color: theme.textColor.main, alt: jsx(Translate, { children: jsx(Localizer, { id: "smarthr-ui/AppHeader/Launcher/sortDropdownSelected", defaultText: "\u9078\u629E\u4E2D" }) }) })), onClick: onClick, children: jsx(Translate, { children: children }) }));
 });
 
 export { AppLauncherSortDropdown };

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/useTheme'\nimport { useIntl } 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\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 classNames = useMemo(() => {\n    const { trigger, contentBody, contentButton } = classNameGenerator()\n\n    return {\n      trigger: trigger(),\n      contentBody: contentBody(),\n      contentButton: contentButton(),\n    }\n  }, [])\n\n  const { localize } = useIntl()\n  const translated = useMemo(\n    () => ({\n      label: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownLabel',\n        defaultText: '表示順',\n      }),\n      selected: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownSelected',\n        defaultText: '選択中',\n      }),\n      default: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownOrderDefault',\n        defaultText: 'デフォルト',\n      }),\n      asc: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameAsc',\n        defaultText: 'アプリ名の昇順',\n      }),\n      desc: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownOrderNameDesc',\n        defaultText: 'アプリ名の降順',\n      }),\n    }),\n    [localize],\n  )\n\n  const options = useMemo(\n    () => [\n      ['default', translated.default],\n      ['name/asc', translated.asc],\n      ['name/desc', translated.desc],\n    ],\n    [translated],\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={classNames.trigger}>\n        {translated.label}\n      </TriggerButton>\n      <DropdownContent controllable>\n        <div role=\"listbox\" className={classNames.contentBody}>\n          {options.map(([value, children], i) => (\n            <OptionButton\n              key={i}\n              value={value}\n              selected={value === sortType}\n              selectedAlt={translated.selected}\n              onClick={onClickOption}\n              className={classNames.contentButton}\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      size=\"S\"\n      variant=\"text\"\n      suffix={<FaCaretDownIcon />}\n      className={className}\n    >\n      <Translate>{children}</Translate>\n    </Button>\n  </DropdownTrigger>\n))\n\nconst OptionButton = memo<\n  PropsWithChildren<{\n    value: string\n    selected: boolean\n    selectedAlt: string\n    onClick: (e: MouseEvent<HTMLButtonElement>) => void\n    className: string\n  }>\n>(({ value, selected, selectedAlt, onClick, children, className }) => {\n  const theme = useTheme()\n  return (\n    <Button\n      value={value}\n      role=\"option\"\n      aria-selected={selected}\n      className={className}\n      prefix={\n        selected && (\n          <FaCheckIcon color={theme.textColor.main} alt={<Translate>{selectedAlt}</Translate>} />\n        )\n      }\n      onClick={onClick}\n    >\n      <Translate>{children}</Translate>\n    </Button>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA;AACE;AACE;;;;AAIC;AACD;AACA;;;AAGC;AACF;AACF;AAOM;AACL;AAEA;;;;;;;;AAUA;AACA;;AAGM;AACA;;;AAGA;AACA;;;AAGA;AACA;;;AAGA;AACA;;;AAGA;AACA;;AAEH;AAIH;AAEI;AACA;AACA;AACD;AAIH;AAEI;;;;AAKE;AACE;AACA;;;AAGN;;AA2BJ;AAEA;AAgBA;AASE;;AAiBF;;"}
+{"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/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              onClick={onClickOption}\n              className={CLASS_NAMES.contentButton}\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      size=\"S\"\n      variant=\"text\"\n      suffix={<FaCaretDownIcon />}\n      className={className}\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      value={value}\n      role=\"option\"\n      aria-selected={selected}\n      className={className}\n      prefix={\n        selected && (\n          <FaCheckIcon\n            color={theme.textColor.main}\n            alt={\n              <Translate>\n                <Localizer\n                  id=\"smarthr-ui/AppHeader/Launcher/sortDropdownSelected\"\n                  defaultText=\"選択中\"\n                />\n              </Translate>\n            }\n          />\n        )\n      }\n      onClick={onClick}\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;;"}