smarthr-ui 93.0.1 → 93.1.1

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

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

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":["import {\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":["tv","useRef","useMemo","useIntl","useCallback","_jsxs","Dropdown","_jsx","DropdownContent","memo","DropdownTrigger","Button","FaCaretDownIcon","Translate","useTheme","FaCheckIcon"],"mappings":"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"}
+{"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;;"}

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo, useRef, useMemo, useCallback } from 'react';
 import { tv as ce } from './../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';

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":["import {\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":["tv","_jsxs","_jsx"],"mappings":"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"}
+{"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;;"}

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

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

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":["import { type FC, type PropsWithChildren, type ReactNode, memo, useCallback, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../../../hooks/useTheme'\nimport { useIntl } 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 } from '../../../SideNav'\nimport { HelpLink } from '../../../TextLink'\nimport { useAppLauncher } from '../../hooks/useAppLauncher'\nimport { AppLauncherFeatures } from '../common/AppLauncherFeatures'\nimport { AppLauncherSortDropdown } from '../common/AppLauncherSortDropdown'\nimport { Translate } from '../common/Translate'\n\nimport type { Launcher } from '../../types'\n\ntype Props = {\n  features: Array<Launcher['feature']>\n}\n\nconst appLauncher = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-AppLauncher',\n      'shr-grid shr-h-[40rem] shr-w-[38rem] shr-grid-rows-[auto_1fr]',\n    ],\n    searchArea: [\n      'smarthr-ui-AppLauncher-searchArea',\n      'shr-border-b-shorthand shr-p-1',\n      '[&_.smarthr-ui-Input]:shr-h-[42px]',\n    ],\n    inner: ['smarthr-ui-AppLauncher-inner', 'shr-grid shr-min-h-0 shr-grid-cols-[11rem_1fr]'],\n    side: [\n      'smarthr-ui-AppLauncher-side',\n      'shr-border-r-shorthand shr-flex shr-flex-col shr-bg-column shr-pb-1 shr-pt-0.5',\n      '[&_hr]:shr-m-0.5 [&_hr]:shr-h-[1px] [&_hr]:shr-border-none [&_hr]:shr-bg-border',\n    ],\n    sideNav: [\n      '[&_.smarthr-ui-SideNav-item>button]:shr-px-1 [&_.smarthr-ui-SideNav-item>button]:shr-py-0.75',\n      '[&_.smarthr-ui-SideNav-item>button>span]:shr-flex-nowrap',\n      '[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-shrink-0 [&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-align-bottom',\n    ],\n    sideNavHeading: ['shr-px-1 shr-py-0.75 shr-text-xs shr-text-black'],\n    help: ['smarthr-ui-AppLauncher-help', 'shr-mt-auto shr-px-1 shr-text-xs'],\n    main: ['smarthr-ui-AppLauncher-main', 'shr-grid shr-min-h-0'],\n    mainInner: ['shr-grid shr-min-h-0 shr-grid-rows-[auto_1fr]'],\n    contentHead: [\n      'shr-min-h-[2rem] shr-px-1 shr-py-0.75',\n      '[&_.smarthr-ui-Heading]:shr-text-black',\n    ],\n    scrollArea: ['shr-h-[509px]'],\n  },\n  variants: {\n    noIcon: {\n      true: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button]:shr-pl-1.5'],\n      },\n    },\n    selected: {\n      false: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-text-grey'],\n      },\n    },\n  },\n})\n\nexport const AppLauncher: FC<Props> = ({ features: baseFeatures }) => {\n  const {\n    features,\n    page,\n    mode,\n    sortType,\n    searchQuery,\n    changePage,\n    setSortType,\n    onChangeSearchQuery,\n    onClickClearSearchQuery,\n  } = useAppLauncher(baseFeatures)\n\n  const classNames = useMemo(() => {\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\n  const { localize } = useIntl()\n  const translated = useMemo<\n    Record<\n      Launcher['page'] | 'listText' | 'searchInputTitle' | 'helpText' | 'searchResultText',\n      ReactNode\n    >\n  >(\n    () => ({\n      favorite: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/favoriteModeText',\n            defaultText: 'よく使うアプリ',\n          })}\n        </Translate>\n      ),\n      all: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/allModeText',\n            defaultText: 'すべてのアプリ',\n          })}\n        </Translate>\n      ),\n      listText: (\n        <Translate>\n          {localize({ id: 'smarthr-ui/AppHeader/Launcher/listText', defaultText: 'アプリ一覧' })}\n        </Translate>\n      ),\n      searchInputTitle: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',\n        defaultText: 'アプリ名を入力してください。',\n      }),\n      helpText: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/helpText',\n            defaultText: 'よく使うアプリとは',\n          })}\n        </Translate>\n      ),\n      searchResultText: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/searchResultText',\n            defaultText: '検索結果',\n          })}\n        </Translate>\n      ),\n    }),\n    [localize],\n  )\n\n  return (\n    <div className={classNames.wrapper}>\n      <div className={classNames.searchArea}>\n        <SearchInput\n          name=\"search\"\n          title={translated.searchInputTitle as string}\n          tooltipMessage={<Translate>{translated.searchInputTitle}</Translate>}\n          width=\"100%\"\n          value={searchQuery}\n          suffix={mode === 'search' && <ClearSearchButton onClick={onClickClearSearchQuery} />}\n          onChange={onChangeSearchQuery}\n        />\n      </div>\n\n      <div className={classNames.inner}>\n        <SideNavs\n          mode={mode}\n          page={page}\n          changePage={changePage}\n          translated={translated}\n          classNames={classNames}\n        />\n        <div className={classNames.main}>\n          <Section className={classNames.mainInner}>\n            <Cluster className={classNames.contentHead} align=\"center\" justify=\"space-between\">\n              <MemoizedSubSubBlockHeading>\n                {mode === 'search' ? translated.searchResultText : translated[page]}\n              </MemoizedSubSubBlockHeading>\n\n              {(mode === 'search' || page === 'all') && (\n                <AppLauncherSortDropdown sortType={sortType} onSelectSortType={setSortType} />\n              )}\n            </Cluster>\n\n            <Scroller className={classNames.scrollArea}>\n              <AppLauncherFeatures features={features} page={page} />\n            </Scroller>\n          </Section>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ClearSearchButton = memo<{ onClick: () => void }>(({ onClick }) => (\n  <UnstyledButton onClick={onClick}>\n    <FaCircleXmarkIcon />\n  </UnstyledButton>\n))\n\nconst SideNavs = memo<\n  Pick<ReturnType<typeof useAppLauncher>, 'mode' | 'page' | 'changePage'> & {\n    translated: { favorite: ReactNode; listText: ReactNode; all: ReactNode; helpText: ReactNode }\n    classNames: {\n      side: string\n      unselectedSideNav: string\n      sideNavHeading: string\n      selectedSideNav: string\n      help: string\n    }\n  }\n>(({ mode, page, changePage, translated, classNames }) => {\n  const theme = useTheme()\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: translated.favorite,\n        prefix: <FaStarIcon color={isFavorite ? theme.textColor.white : undefined} />,\n        current: isFavorite,\n      },\n    ],\n    [isFavorite, translated, theme.textColor.white],\n  )\n  const selectedItems = useMemo(\n    () => [\n      {\n        id: 'all',\n        title: translated.all,\n        current: isAll,\n      },\n    ],\n    [isAll, translated],\n  )\n\n  const onClick = useCallback(\n    (_: any, id: string) => {\n      changePage(id as Launcher['page'])\n    },\n    [changePage],\n  )\n\n  return (\n    <div className={classNames.side}>\n      <SideNav\n        className={classNames.unselectedSideNav}\n        size=\"S\"\n        items={unselectedItems}\n        onClick={onClick}\n      />\n\n      <hr />\n\n      <Section>\n        <MemoizedSubSubBlockHeading className={classNames.sideNavHeading}>\n          {translated.listText}\n        </MemoizedSubSubBlockHeading>\n        <SideNav\n          className={classNames.selectedSideNav}\n          size=\"S\"\n          items={selectedItems}\n          onClick={onClick}\n        />\n      </Section>\n\n      <HelpLinkArea className={classNames.help}>{translated.helpText}</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      {children}\n    </Heading>\n  ),\n)\n"],"names":["tv","useAppLauncher","useMemo","useIntl","_jsx","Translate","_jsxs","SearchInput","Section","Cluster","AppLauncherSortDropdown","Scroller","AppLauncherFeatures","memo","UnstyledButton","FaCircleXmarkIcon","useTheme","FaStarIcon","useCallback","SideNav","HelpLink","Heading"],"mappings":"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"}
+{"version":3,"file":"AppLauncher.cjs","sources":["../../../../../src/components/AppHeader/components/desktop/AppLauncher.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, type ReactNode, memo, useCallback, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../../../hooks/useTheme'\nimport { useIntl } 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 } from '../../../SideNav'\nimport { HelpLink } from '../../../TextLink'\nimport { useAppLauncher } from '../../hooks/useAppLauncher'\nimport { AppLauncherFeatures } from '../common/AppLauncherFeatures'\nimport { AppLauncherSortDropdown } from '../common/AppLauncherSortDropdown'\nimport { Translate } from '../common/Translate'\n\nimport type { Launcher } from '../../types'\n\ntype Props = {\n  features: Array<Launcher['feature']>\n}\n\nconst appLauncher = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-AppLauncher',\n      'shr-grid shr-h-[40rem] shr-w-[38rem] shr-grid-rows-[auto_1fr]',\n    ],\n    searchArea: [\n      'smarthr-ui-AppLauncher-searchArea',\n      'shr-border-b-shorthand shr-p-1',\n      '[&_.smarthr-ui-Input]:shr-h-[42px]',\n    ],\n    inner: ['smarthr-ui-AppLauncher-inner', 'shr-grid shr-min-h-0 shr-grid-cols-[11rem_1fr]'],\n    side: [\n      'smarthr-ui-AppLauncher-side',\n      'shr-border-r-shorthand shr-flex shr-flex-col shr-bg-column shr-pb-1 shr-pt-0.5',\n      '[&_hr]:shr-m-0.5 [&_hr]:shr-h-[1px] [&_hr]:shr-border-none [&_hr]:shr-bg-border',\n    ],\n    sideNav: [\n      '[&_.smarthr-ui-SideNav-item>button]:shr-px-1 [&_.smarthr-ui-SideNav-item>button]:shr-py-0.75',\n      '[&_.smarthr-ui-SideNav-item>button>span]:shr-flex-nowrap',\n      '[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-shrink-0 [&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-align-bottom',\n    ],\n    sideNavHeading: ['shr-px-1 shr-py-0.75 shr-text-xs shr-text-black'],\n    help: ['smarthr-ui-AppLauncher-help', 'shr-mt-auto shr-px-1 shr-text-xs'],\n    main: ['smarthr-ui-AppLauncher-main', 'shr-grid shr-min-h-0'],\n    mainInner: ['shr-grid shr-min-h-0 shr-grid-rows-[auto_1fr]'],\n    contentHead: [\n      'shr-min-h-[2rem] shr-px-1 shr-py-0.75',\n      '[&_.smarthr-ui-Heading]:shr-text-black',\n    ],\n    scrollArea: ['shr-h-[509px]'],\n  },\n  variants: {\n    noIcon: {\n      true: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button]:shr-pl-1.5'],\n      },\n    },\n    selected: {\n      false: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-text-grey'],\n      },\n    },\n  },\n})\n\nexport const AppLauncher: FC<Props> = ({ features: baseFeatures }) => {\n  const {\n    features,\n    page,\n    mode,\n    sortType,\n    searchQuery,\n    changePage,\n    setSortType,\n    onChangeSearchQuery,\n    onClickClearSearchQuery,\n  } = useAppLauncher(baseFeatures)\n\n  const classNames = useMemo(() => {\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\n  const { localize } = useIntl()\n  const translated = useMemo<\n    Record<\n      Launcher['page'] | 'listText' | 'searchInputTitle' | 'helpText' | 'searchResultText',\n      ReactNode\n    >\n  >(\n    () => ({\n      favorite: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/favoriteModeText',\n            defaultText: 'よく使うアプリ',\n          })}\n        </Translate>\n      ),\n      all: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/allModeText',\n            defaultText: 'すべてのアプリ',\n          })}\n        </Translate>\n      ),\n      listText: (\n        <Translate>\n          {localize({ id: 'smarthr-ui/AppHeader/Launcher/listText', defaultText: 'アプリ一覧' })}\n        </Translate>\n      ),\n      searchInputTitle: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',\n        defaultText: 'アプリ名を入力してください。',\n      }),\n      helpText: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/helpText',\n            defaultText: 'よく使うアプリとは',\n          })}\n        </Translate>\n      ),\n      searchResultText: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/searchResultText',\n            defaultText: '検索結果',\n          })}\n        </Translate>\n      ),\n    }),\n    [localize],\n  )\n\n  return (\n    <div className={classNames.wrapper}>\n      <div className={classNames.searchArea}>\n        <SearchInput\n          name=\"search\"\n          title={translated.searchInputTitle as string}\n          tooltipMessage={<Translate>{translated.searchInputTitle}</Translate>}\n          width=\"100%\"\n          value={searchQuery}\n          suffix={mode === 'search' && <ClearSearchButton onClick={onClickClearSearchQuery} />}\n          onChange={onChangeSearchQuery}\n        />\n      </div>\n\n      <div className={classNames.inner}>\n        <SideNavs\n          mode={mode}\n          page={page}\n          changePage={changePage}\n          translated={translated}\n          classNames={classNames}\n        />\n        <div className={classNames.main}>\n          <Section className={classNames.mainInner}>\n            <Cluster className={classNames.contentHead} align=\"center\" justify=\"space-between\">\n              <MemoizedSubSubBlockHeading>\n                {mode === 'search' ? translated.searchResultText : translated[page]}\n              </MemoizedSubSubBlockHeading>\n\n              {(mode === 'search' || page === 'all') && (\n                <AppLauncherSortDropdown sortType={sortType} onSelectSortType={setSortType} />\n              )}\n            </Cluster>\n\n            <Scroller className={classNames.scrollArea}>\n              <AppLauncherFeatures features={features} page={page} />\n            </Scroller>\n          </Section>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ClearSearchButton = memo<{ onClick: () => void }>(({ onClick }) => (\n  <UnstyledButton onClick={onClick}>\n    <FaCircleXmarkIcon />\n  </UnstyledButton>\n))\n\nconst SideNavs = memo<\n  Pick<ReturnType<typeof useAppLauncher>, 'mode' | 'page' | 'changePage'> & {\n    translated: { favorite: ReactNode; listText: ReactNode; all: ReactNode; helpText: ReactNode }\n    classNames: {\n      side: string\n      unselectedSideNav: string\n      sideNavHeading: string\n      selectedSideNav: string\n      help: string\n    }\n  }\n>(({ mode, page, changePage, translated, classNames }) => {\n  const theme = useTheme()\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: translated.favorite,\n        prefix: <FaStarIcon color={isFavorite ? theme.textColor.white : undefined} />,\n        current: isFavorite,\n      },\n    ],\n    [isFavorite, translated, theme.textColor.white],\n  )\n  const selectedItems = useMemo(\n    () => [\n      {\n        id: 'all',\n        title: translated.all,\n        current: isAll,\n      },\n    ],\n    [isAll, translated],\n  )\n\n  const onClick = useCallback(\n    (_: any, id: string) => {\n      changePage(id as Launcher['page'])\n    },\n    [changePage],\n  )\n\n  return (\n    <div className={classNames.side}>\n      <SideNav\n        className={classNames.unselectedSideNav}\n        size=\"S\"\n        items={unselectedItems}\n        onClick={onClick}\n      />\n\n      <hr />\n\n      <Section>\n        <MemoizedSubSubBlockHeading className={classNames.sideNavHeading}>\n          {translated.listText}\n        </MemoizedSubSubBlockHeading>\n        <SideNav\n          className={classNames.selectedSideNav}\n          size=\"S\"\n          items={selectedItems}\n          onClick={onClick}\n        />\n      </Section>\n\n      <HelpLinkArea className={classNames.help}>{translated.helpText}</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      {children}\n    </Heading>\n  ),\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;AACE;AACE;;;AAGC;AACD;;;;AAIC;AACD;AACA;;;;AAIC;AACD;;;;AAIC;;AAED;AACA;;AAEA;;;AAGC;;AAEF;AACD;AACE;AACE;;AAEC;AACF;AACD;AACE;;AAEC;AACF;AACF;AACF;AAEM;;AAaL;;;;;;;;AAqBI;;;;;;;;;AAUJ;AACA;AAOI;AAGM;AACA;AACD;AAGL;AAGM;AACA;AACD;AAGL;;AAME;AACA;;AAEF;AAGM;AACA;AACD;AAGL;AAGM;AACA;AACD;AAGN;;AA8CL;AAEA;AAMA;AAYE;AACA;AACA;AACA;AAEA;AAEI;AACE;;AAEA;AACA;AACD;AACF;AAGH;AAEI;AACE;;AAEA;AACD;AACF;;;AAOD;AAIF;AA0BF;AAEA;AAWA;;"}

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo, 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';

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

@@ -1 +1 @@
-{"version":3,"file":"AppLauncher.js","sources":["../../../../../src/components/AppHeader/components/desktop/AppLauncher.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, type ReactNode, memo, useCallback, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../../../hooks/useTheme'\nimport { useIntl } 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 } from '../../../SideNav'\nimport { HelpLink } from '../../../TextLink'\nimport { useAppLauncher } from '../../hooks/useAppLauncher'\nimport { AppLauncherFeatures } from '../common/AppLauncherFeatures'\nimport { AppLauncherSortDropdown } from '../common/AppLauncherSortDropdown'\nimport { Translate } from '../common/Translate'\n\nimport type { Launcher } from '../../types'\n\ntype Props = {\n  features: Array<Launcher['feature']>\n}\n\nconst appLauncher = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-AppLauncher',\n      'shr-grid shr-h-[40rem] shr-w-[38rem] shr-grid-rows-[auto_1fr]',\n    ],\n    searchArea: [\n      'smarthr-ui-AppLauncher-searchArea',\n      'shr-border-b-shorthand shr-p-1',\n      '[&_.smarthr-ui-Input]:shr-h-[42px]',\n    ],\n    inner: ['smarthr-ui-AppLauncher-inner', 'shr-grid shr-min-h-0 shr-grid-cols-[11rem_1fr]'],\n    side: [\n      'smarthr-ui-AppLauncher-side',\n      'shr-border-r-shorthand shr-flex shr-flex-col shr-bg-column shr-pb-1 shr-pt-0.5',\n      '[&_hr]:shr-m-0.5 [&_hr]:shr-h-[1px] [&_hr]:shr-border-none [&_hr]:shr-bg-border',\n    ],\n    sideNav: [\n      '[&_.smarthr-ui-SideNav-item>button]:shr-px-1 [&_.smarthr-ui-SideNav-item>button]:shr-py-0.75',\n      '[&_.smarthr-ui-SideNav-item>button>span]:shr-flex-nowrap',\n      '[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-shrink-0 [&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-align-bottom',\n    ],\n    sideNavHeading: ['shr-px-1 shr-py-0.75 shr-text-xs shr-text-black'],\n    help: ['smarthr-ui-AppLauncher-help', 'shr-mt-auto shr-px-1 shr-text-xs'],\n    main: ['smarthr-ui-AppLauncher-main', 'shr-grid shr-min-h-0'],\n    mainInner: ['shr-grid shr-min-h-0 shr-grid-rows-[auto_1fr]'],\n    contentHead: [\n      'shr-min-h-[2rem] shr-px-1 shr-py-0.75',\n      '[&_.smarthr-ui-Heading]:shr-text-black',\n    ],\n    scrollArea: ['shr-h-[509px]'],\n  },\n  variants: {\n    noIcon: {\n      true: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button]:shr-pl-1.5'],\n      },\n    },\n    selected: {\n      false: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-text-grey'],\n      },\n    },\n  },\n})\n\nexport const AppLauncher: FC<Props> = ({ features: baseFeatures }) => {\n  const {\n    features,\n    page,\n    mode,\n    sortType,\n    searchQuery,\n    changePage,\n    setSortType,\n    onChangeSearchQuery,\n    onClickClearSearchQuery,\n  } = useAppLauncher(baseFeatures)\n\n  const classNames = useMemo(() => {\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\n  const { localize } = useIntl()\n  const translated = useMemo<\n    Record<\n      Launcher['page'] | 'listText' | 'searchInputTitle' | 'helpText' | 'searchResultText',\n      ReactNode\n    >\n  >(\n    () => ({\n      favorite: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/favoriteModeText',\n            defaultText: 'よく使うアプリ',\n          })}\n        </Translate>\n      ),\n      all: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/allModeText',\n            defaultText: 'すべてのアプリ',\n          })}\n        </Translate>\n      ),\n      listText: (\n        <Translate>\n          {localize({ id: 'smarthr-ui/AppHeader/Launcher/listText', defaultText: 'アプリ一覧' })}\n        </Translate>\n      ),\n      searchInputTitle: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',\n        defaultText: 'アプリ名を入力してください。',\n      }),\n      helpText: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/helpText',\n            defaultText: 'よく使うアプリとは',\n          })}\n        </Translate>\n      ),\n      searchResultText: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/searchResultText',\n            defaultText: '検索結果',\n          })}\n        </Translate>\n      ),\n    }),\n    [localize],\n  )\n\n  return (\n    <div className={classNames.wrapper}>\n      <div className={classNames.searchArea}>\n        <SearchInput\n          name=\"search\"\n          title={translated.searchInputTitle as string}\n          tooltipMessage={<Translate>{translated.searchInputTitle}</Translate>}\n          width=\"100%\"\n          value={searchQuery}\n          suffix={mode === 'search' && <ClearSearchButton onClick={onClickClearSearchQuery} />}\n          onChange={onChangeSearchQuery}\n        />\n      </div>\n\n      <div className={classNames.inner}>\n        <SideNavs\n          mode={mode}\n          page={page}\n          changePage={changePage}\n          translated={translated}\n          classNames={classNames}\n        />\n        <div className={classNames.main}>\n          <Section className={classNames.mainInner}>\n            <Cluster className={classNames.contentHead} align=\"center\" justify=\"space-between\">\n              <MemoizedSubSubBlockHeading>\n                {mode === 'search' ? translated.searchResultText : translated[page]}\n              </MemoizedSubSubBlockHeading>\n\n              {(mode === 'search' || page === 'all') && (\n                <AppLauncherSortDropdown sortType={sortType} onSelectSortType={setSortType} />\n              )}\n            </Cluster>\n\n            <Scroller className={classNames.scrollArea}>\n              <AppLauncherFeatures features={features} page={page} />\n            </Scroller>\n          </Section>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ClearSearchButton = memo<{ onClick: () => void }>(({ onClick }) => (\n  <UnstyledButton onClick={onClick}>\n    <FaCircleXmarkIcon />\n  </UnstyledButton>\n))\n\nconst SideNavs = memo<\n  Pick<ReturnType<typeof useAppLauncher>, 'mode' | 'page' | 'changePage'> & {\n    translated: { favorite: ReactNode; listText: ReactNode; all: ReactNode; helpText: ReactNode }\n    classNames: {\n      side: string\n      unselectedSideNav: string\n      sideNavHeading: string\n      selectedSideNav: string\n      help: string\n    }\n  }\n>(({ mode, page, changePage, translated, classNames }) => {\n  const theme = useTheme()\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: translated.favorite,\n        prefix: <FaStarIcon color={isFavorite ? theme.textColor.white : undefined} />,\n        current: isFavorite,\n      },\n    ],\n    [isFavorite, translated, theme.textColor.white],\n  )\n  const selectedItems = useMemo(\n    () => [\n      {\n        id: 'all',\n        title: translated.all,\n        current: isAll,\n      },\n    ],\n    [isAll, translated],\n  )\n\n  const onClick = useCallback(\n    (_: any, id: string) => {\n      changePage(id as Launcher['page'])\n    },\n    [changePage],\n  )\n\n  return (\n    <div className={classNames.side}>\n      <SideNav\n        className={classNames.unselectedSideNav}\n        size=\"S\"\n        items={unselectedItems}\n        onClick={onClick}\n      />\n\n      <hr />\n\n      <Section>\n        <MemoizedSubSubBlockHeading className={classNames.sideNavHeading}>\n          {translated.listText}\n        </MemoizedSubSubBlockHeading>\n        <SideNav\n          className={classNames.selectedSideNav}\n          size=\"S\"\n          items={selectedItems}\n          onClick={onClick}\n        />\n      </Section>\n\n      <HelpLinkArea className={classNames.help}>{translated.helpText}</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      {children}\n    </Heading>\n  ),\n)\n"],"names":["tv","_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,WAAW,GAAGA,EAAE,CAAC;AACrB,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;YACP,wBAAwB;YACxB,+DAA+D;AAChE,SAAA;AACD,QAAA,UAAU,EAAE;YACV,mCAAmC;YACnC,gCAAgC;YAChC,oCAAoC;AACrC,SAAA;AACD,QAAA,KAAK,EAAE,CAAC,8BAA8B,EAAE,gDAAgD,CAAC;AACzF,QAAA,IAAI,EAAE;YACJ,6BAA6B;YAC7B,gFAAgF;YAChF,iFAAiF;AAClF,SAAA;AACD,QAAA,OAAO,EAAE;YACP,8FAA8F;YAC9F,0DAA0D;YAC1D,yIAAyI;AAC1I,SAAA;QACD,cAAc,EAAE,CAAC,iDAAiD,CAAC;AACnE,QAAA,IAAI,EAAE,CAAC,6BAA6B,EAAE,kCAAkC,CAAC;AACzE,QAAA,IAAI,EAAE,CAAC,6BAA6B,EAAE,sBAAsB,CAAC;QAC7D,SAAS,EAAE,CAAC,+CAA+C,CAAC;AAC5D,QAAA,WAAW,EAAE;YACX,uCAAuC;YACvC,wCAAwC;AACzC,SAAA;QACD,UAAU,EAAE,CAAC,eAAe,CAAC;AAC9B,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE;gBACJ,OAAO,EAAE,CAAC,gDAAgD,CAAC;AAC5D,aAAA;AACF,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,KAAK,EAAE;gBACL,OAAO,EAAE,CAAC,oEAAoE,CAAC;AAChF,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,WAAW,GAAc,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAI;IACnE,MAAM,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,uBAAuB,GACxB,GAAG,cAAc,CAAC,YAAY,CAAC;AAEhC,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAK;QAC9B,MAAM,EACJ,OAAO,EACP,UAAU,EACV,KAAK,EACL,IAAI,EACJ,OAAO,EACP,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,WAAW,EACX,UAAU,GACX,GAAG,WAAW,EAAE;QAEjB,OAAO;YACL,OAAO,EAAE,OAAO,EAAE;YAClB,UAAU,EAAE,UAAU,EAAE;YACxB,KAAK,EAAE,KAAK,EAAE;YACd,IAAI,EAAE,IAAI,EAAE;YACZ,iBAAiB,EAAE,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;AAC/C,YAAA,eAAe,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;YAC1D,cAAc,EAAE,cAAc,EAAE;YAChC,IAAI,EAAE,IAAI,EAAE;YACZ,IAAI,EAAE,IAAI,EAAE;YACZ,SAAS,EAAE,SAAS,EAAE;YACtB,WAAW,EAAE,WAAW,EAAE;YAC1B,UAAU,EAAE,UAAU,EAAE;SACzB;IACH,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE;AAC9B,IAAA,MAAM,UAAU,GAAG,OAAO,CAMxB,OAAO;AACL,QAAA,QAAQ,GACNC,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EACP,QAAQ,CAAC;AACR,gBAAA,EAAE,EAAE,gDAAgD;AACpD,gBAAA,WAAW,EAAE,SAAS;AACvB,aAAA,CAAC,GACQ,CACb;AACD,QAAA,GAAG,GACDA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EACP,QAAQ,CAAC;AACR,gBAAA,EAAE,EAAE,2CAA2C;AAC/C,gBAAA,WAAW,EAAE,SAAS;AACvB,aAAA,CAAC,GACQ,CACb;AACD,QAAA,QAAQ,GACNA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EACP,QAAQ,CAAC,EAAE,EAAE,EAAE,wCAAwC,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,GACvE,CACb;QACD,gBAAgB,EAAE,QAAQ,CAAC;AACzB,YAAA,EAAE,EAAE,gDAAgD;AACpD,YAAA,WAAW,EAAE,gBAAgB;SAC9B,CAAC;AACF,QAAA,QAAQ,GACNA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EACP,QAAQ,CAAC;AACR,gBAAA,EAAE,EAAE,wCAAwC;AAC5C,gBAAA,WAAW,EAAE,WAAW;AACzB,aAAA,CAAC,GACQ,CACb;AACD,QAAA,gBAAgB,GACdA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EACP,QAAQ,CAAC;AACR,gBAAA,EAAE,EAAE,gDAAgD;AACpD,gBAAA,WAAW,EAAE,MAAM;AACpB,aAAA,CAAC,GACQ,CACb;AACF,KAAA,CAAC,EACF,CAAC,QAAQ,CAAC,CACX;IAED,QACEC,cAAK,SAAS,EAAE,UAAU,CAAC,OAAO,aAChCD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,UAAU,EAAA,QAAA,EACnCA,GAAA,CAAC,WAAW,EAAA,EACV,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,UAAU,CAAC,gBAA0B,EAC5C,cAAc,EAAEA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAE,UAAU,CAAC,gBAAgB,GAAa,EACpE,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,IAAI,KAAK,QAAQ,IAAIA,IAAC,iBAAiB,EAAA,EAAC,OAAO,EAAE,uBAAuB,EAAA,CAAI,EACpF,QAAQ,EAAE,mBAAmB,EAAA,CAC7B,EAAA,CACE,EAENC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,KAAK,EAAA,QAAA,EAAA,CAC9BD,GAAA,CAAC,QAAQ,IACP,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EAAA,CACtB,EACFA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,IAAI,EAAA,QAAA,EAC7BC,KAAC,OAAO,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA,QAAA,EAAA,CACtCA,KAAC,OAAO,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,eAAe,aAChFD,GAAA,CAAC,0BAA0B,cACxB,IAAI,KAAK,QAAQ,GAAG,UAAU,CAAC,gBAAgB,GAAG,UAAU,CAAC,IAAI,CAAC,EAAA,CACxC,EAE5B,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,KAAK,MACnCA,GAAA,CAAC,uBAAuB,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,WAAW,EAAA,CAAI,CAC/E,CAAA,EAAA,CACO,EAEVA,GAAA,CAAC,QAAQ,IAAC,SAAS,EAAE,UAAU,CAAC,UAAU,YACxCA,GAAA,CAAC,mBAAmB,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAA,CAAI,EAAA,CAC9C,IACH,EAAA,CACN,CAAA,EAAA,CACF,CAAA,EAAA,CACF;AAEV;AAEA,MAAM,iBAAiB,GAAG,IAAI,CAA0B,CAAC,EAAE,OAAO,EAAE,MAClEA,IAAC,cAAc,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA,QAAA,EAC9BA,GAAA,CAAC,iBAAiB,EAAA,EAAA,CAAG,EAAA,CACN,CAClB,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAI,CAWnB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,KAAI;AACvD,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;AACxB,IAAA,MAAM,WAAW,GAAG,IAAI,KAAK,QAAQ;AACrC,IAAA,MAAM,UAAU,GAAG,WAAW,IAAI,IAAI,KAAK,UAAU;AACrD,IAAA,MAAM,KAAK,GAAG,WAAW,IAAI,IAAI,KAAK,KAAK;AAE3C,IAAA,MAAM,eAAe,GAAG,OAAO,CAC7B,MAAM;AACJ,QAAA;AACE,YAAA,EAAE,EAAE,UAAU;YACd,KAAK,EAAE,UAAU,CAAC,QAAQ;AAC1B,YAAA,MAAM,EAAEA,GAAA,CAAC,UAAU,IAAC,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,GAAG,SAAS,EAAA,CAAI;AAC7E,YAAA,OAAO,EAAE,UAAU;AACpB,SAAA;AACF,KAAA,EACD,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAChD;AACD,IAAA,MAAM,aAAa,GAAG,OAAO,CAC3B,MAAM;AACJ,QAAA;AACE,YAAA,EAAE,EAAE,KAAK;YACT,KAAK,EAAE,UAAU,CAAC,GAAG;AACrB,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACF,KAAA,EACD,CAAC,KAAK,EAAE,UAAU,CAAC,CACpB;IAED,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,CAAM,EAAE,EAAU,KAAI;QACrB,UAAU,CAAC,EAAsB,CAAC;AACpC,IAAA,CAAC,EACD,CAAC,UAAU,CAAC,CACb;AAED,IAAA,QACEC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,IAAI,EAAA,QAAA,EAAA,CAC7BD,GAAA,CAAC,OAAO,EAAA,EACN,SAAS,EAAE,UAAU,CAAC,iBAAiB,EACvC,IAAI,EAAC,GAAG,EACR,KAAK,EAAE,eAAe,EACtB,OAAO,EAAE,OAAO,GAChB,EAEFA,GAAA,CAAA,IAAA,EAAA,EAAA,CAAM,EAENC,IAAA,CAAC,OAAO,eACND,GAAA,CAAC,0BAA0B,IAAC,SAAS,EAAE,UAAU,CAAC,cAAc,EAAA,QAAA,EAC7D,UAAU,CAAC,QAAQ,EAAA,CACO,EAC7BA,GAAA,CAAC,OAAO,IACN,SAAS,EAAE,UAAU,CAAC,eAAe,EACrC,IAAI,EAAC,GAAG,EACR,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE,OAAO,EAAA,CAChB,CAAA,EAAA,CACM,EAEVA,GAAA,CAAC,YAAY,IAAC,SAAS,EAAE,UAAU,CAAC,IAAI,YAAG,UAAU,CAAC,QAAQ,EAAA,CAAgB,CAAA,EAAA,CAC1E;AAEV,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAA2C,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAC1FA,aAAK,SAAS,EAAE,SAAS,EAAA,QAAA,EACvBA,IAAC,QAAQ,EAAA,EACP,IAAI,EAAC,mFAAmF,EACxF,MAAM,EAAC,QAAQ,YAEd,QAAQ,EAAA,CACA,EAAA,CACP,CACP,CAAC;AAEF,MAAM,0BAA0B,GAAG,IAAI,CACrC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MACtBA,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAC,kBAAkB,EAAC,SAAS,EAAE,SAAS,EAAA,QAAA,EAClD,QAAQ,EAAA,CACD,CACX,CACF;;;;"}
+{"version":3,"file":"AppLauncher.js","sources":["../../../../../src/components/AppHeader/components/desktop/AppLauncher.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, type ReactNode, memo, useCallback, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../../../hooks/useTheme'\nimport { useIntl } 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 } from '../../../SideNav'\nimport { HelpLink } from '../../../TextLink'\nimport { useAppLauncher } from '../../hooks/useAppLauncher'\nimport { AppLauncherFeatures } from '../common/AppLauncherFeatures'\nimport { AppLauncherSortDropdown } from '../common/AppLauncherSortDropdown'\nimport { Translate } from '../common/Translate'\n\nimport type { Launcher } from '../../types'\n\ntype Props = {\n  features: Array<Launcher['feature']>\n}\n\nconst appLauncher = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-AppLauncher',\n      'shr-grid shr-h-[40rem] shr-w-[38rem] shr-grid-rows-[auto_1fr]',\n    ],\n    searchArea: [\n      'smarthr-ui-AppLauncher-searchArea',\n      'shr-border-b-shorthand shr-p-1',\n      '[&_.smarthr-ui-Input]:shr-h-[42px]',\n    ],\n    inner: ['smarthr-ui-AppLauncher-inner', 'shr-grid shr-min-h-0 shr-grid-cols-[11rem_1fr]'],\n    side: [\n      'smarthr-ui-AppLauncher-side',\n      'shr-border-r-shorthand shr-flex shr-flex-col shr-bg-column shr-pb-1 shr-pt-0.5',\n      '[&_hr]:shr-m-0.5 [&_hr]:shr-h-[1px] [&_hr]:shr-border-none [&_hr]:shr-bg-border',\n    ],\n    sideNav: [\n      '[&_.smarthr-ui-SideNav-item>button]:shr-px-1 [&_.smarthr-ui-SideNav-item>button]:shr-py-0.75',\n      '[&_.smarthr-ui-SideNav-item>button>span]:shr-flex-nowrap',\n      '[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-shrink-0 [&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-align-bottom',\n    ],\n    sideNavHeading: ['shr-px-1 shr-py-0.75 shr-text-xs shr-text-black'],\n    help: ['smarthr-ui-AppLauncher-help', 'shr-mt-auto shr-px-1 shr-text-xs'],\n    main: ['smarthr-ui-AppLauncher-main', 'shr-grid shr-min-h-0'],\n    mainInner: ['shr-grid shr-min-h-0 shr-grid-rows-[auto_1fr]'],\n    contentHead: [\n      'shr-min-h-[2rem] shr-px-1 shr-py-0.75',\n      '[&_.smarthr-ui-Heading]:shr-text-black',\n    ],\n    scrollArea: ['shr-h-[509px]'],\n  },\n  variants: {\n    noIcon: {\n      true: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button]:shr-pl-1.5'],\n      },\n    },\n    selected: {\n      false: {\n        sideNav: ['[&_.smarthr-ui-SideNav-item>button_.smarthr-ui-Icon]:shr-text-grey'],\n      },\n    },\n  },\n})\n\nexport const AppLauncher: FC<Props> = ({ features: baseFeatures }) => {\n  const {\n    features,\n    page,\n    mode,\n    sortType,\n    searchQuery,\n    changePage,\n    setSortType,\n    onChangeSearchQuery,\n    onClickClearSearchQuery,\n  } = useAppLauncher(baseFeatures)\n\n  const classNames = useMemo(() => {\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\n  const { localize } = useIntl()\n  const translated = useMemo<\n    Record<\n      Launcher['page'] | 'listText' | 'searchInputTitle' | 'helpText' | 'searchResultText',\n      ReactNode\n    >\n  >(\n    () => ({\n      favorite: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/favoriteModeText',\n            defaultText: 'よく使うアプリ',\n          })}\n        </Translate>\n      ),\n      all: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/allModeText',\n            defaultText: 'すべてのアプリ',\n          })}\n        </Translate>\n      ),\n      listText: (\n        <Translate>\n          {localize({ id: 'smarthr-ui/AppHeader/Launcher/listText', defaultText: 'アプリ一覧' })}\n        </Translate>\n      ),\n      searchInputTitle: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/searchInputTitle',\n        defaultText: 'アプリ名を入力してください。',\n      }),\n      helpText: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/helpText',\n            defaultText: 'よく使うアプリとは',\n          })}\n        </Translate>\n      ),\n      searchResultText: (\n        <Translate>\n          {localize({\n            id: 'smarthr-ui/AppHeader/Launcher/searchResultText',\n            defaultText: '検索結果',\n          })}\n        </Translate>\n      ),\n    }),\n    [localize],\n  )\n\n  return (\n    <div className={classNames.wrapper}>\n      <div className={classNames.searchArea}>\n        <SearchInput\n          name=\"search\"\n          title={translated.searchInputTitle as string}\n          tooltipMessage={<Translate>{translated.searchInputTitle}</Translate>}\n          width=\"100%\"\n          value={searchQuery}\n          suffix={mode === 'search' && <ClearSearchButton onClick={onClickClearSearchQuery} />}\n          onChange={onChangeSearchQuery}\n        />\n      </div>\n\n      <div className={classNames.inner}>\n        <SideNavs\n          mode={mode}\n          page={page}\n          changePage={changePage}\n          translated={translated}\n          classNames={classNames}\n        />\n        <div className={classNames.main}>\n          <Section className={classNames.mainInner}>\n            <Cluster className={classNames.contentHead} align=\"center\" justify=\"space-between\">\n              <MemoizedSubSubBlockHeading>\n                {mode === 'search' ? translated.searchResultText : translated[page]}\n              </MemoizedSubSubBlockHeading>\n\n              {(mode === 'search' || page === 'all') && (\n                <AppLauncherSortDropdown sortType={sortType} onSelectSortType={setSortType} />\n              )}\n            </Cluster>\n\n            <Scroller className={classNames.scrollArea}>\n              <AppLauncherFeatures features={features} page={page} />\n            </Scroller>\n          </Section>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ClearSearchButton = memo<{ onClick: () => void }>(({ onClick }) => (\n  <UnstyledButton onClick={onClick}>\n    <FaCircleXmarkIcon />\n  </UnstyledButton>\n))\n\nconst SideNavs = memo<\n  Pick<ReturnType<typeof useAppLauncher>, 'mode' | 'page' | 'changePage'> & {\n    translated: { favorite: ReactNode; listText: ReactNode; all: ReactNode; helpText: ReactNode }\n    classNames: {\n      side: string\n      unselectedSideNav: string\n      sideNavHeading: string\n      selectedSideNav: string\n      help: string\n    }\n  }\n>(({ mode, page, changePage, translated, classNames }) => {\n  const theme = useTheme()\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: translated.favorite,\n        prefix: <FaStarIcon color={isFavorite ? theme.textColor.white : undefined} />,\n        current: isFavorite,\n      },\n    ],\n    [isFavorite, translated, theme.textColor.white],\n  )\n  const selectedItems = useMemo(\n    () => [\n      {\n        id: 'all',\n        title: translated.all,\n        current: isAll,\n      },\n    ],\n    [isAll, translated],\n  )\n\n  const onClick = useCallback(\n    (_: any, id: string) => {\n      changePage(id as Launcher['page'])\n    },\n    [changePage],\n  )\n\n  return (\n    <div className={classNames.side}>\n      <SideNav\n        className={classNames.unselectedSideNav}\n        size=\"S\"\n        items={unselectedItems}\n        onClick={onClick}\n      />\n\n      <hr />\n\n      <Section>\n        <MemoizedSubSubBlockHeading className={classNames.sideNavHeading}>\n          {translated.listText}\n        </MemoizedSubSubBlockHeading>\n        <SideNav\n          className={classNames.selectedSideNav}\n          size=\"S\"\n          items={selectedItems}\n          onClick={onClick}\n        />\n      </Section>\n\n      <HelpLinkArea className={classNames.help}>{translated.helpText}</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      {children}\n    </Heading>\n  ),\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;AACE;AACE;;;AAGC;AACD;;;;AAIC;AACD;AACA;;;;AAIC;AACD;;;;AAIC;;AAED;AACA;;AAEA;;;AAGC;;AAEF;AACD;AACE;AACE;;AAEC;AACF;AACD;AACE;;AAEC;AACF;AACF;AACF;AAEM;;AAaL;;;;;;;;AAqBI;;;;;;;;;AAUJ;AACA;AAOI;AAGM;AACA;AACD;AAGL;AAGM;AACA;AACD;AAGL;;AAME;AACA;;AAEF;AAGM;AACA;AACD;AAGL;AAGM;AACA;AACD;AAGN;;AA8CL;AAEA;AAMA;AAYE;AACA;AACA;AACA;AAEA;AAEI;AACE;;AAEA;AACA;AACD;AACF;AAGH;AAEI;AACE;;AAEA;AACD;AACF;;;AAOD;AAIF;AA0BF;AAEA;AAWA;;"}

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

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

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

@@ -1 +1 @@
-{"version":3,"file":"AppLauncherFilterDropdown.cjs","sources":["../../../../../src/components/AppHeader/components/mobile/AppLauncherFilterDropdown.tsx"],"sourcesContent":["import { type MouseEvent, type PropsWithChildren, memo, useCallback, useMemo } 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\ntype Props = {\n  page: Launcher['page']\n  onSelectPage: (page: Launcher['page']) => void\n}\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-flex shr-flex-col shr-items-stretch shr-px-0.25 shr-py-0.5'],\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\nexport const AppLauncherFilterDropdown = memo<Props>(({ page, onSelectPage }) => {\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      favorite: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/favoriteModeText',\n        defaultText: 'よく使うアプリ',\n      }),\n      all: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/allModeText',\n        defaultText: 'すべてのアプリ',\n      }),\n      checkIconAlt: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownSelected',\n        defaultText: '選択中',\n      }),\n    }),\n    [localize],\n  )\n\n  return (\n    <Dropdown>\n      <MemoizedDropdownTrigger className={classNames.trigger}>\n        {translated[page]}\n      </MemoizedDropdownTrigger>\n      <DropdownContent>\n        <ContentBody\n          page={page}\n          onSelectPage={onSelectPage}\n          translated={translated}\n          className={classNames.contentBody}\n          buttonClassName={classNames.contentButton}\n        />\n      </DropdownContent>\n    </Dropdown>\n  )\n})\n\nconst MemoizedDropdownTrigger = memo<PropsWithChildren<{ className: string }>>(\n  ({ children, className }) => (\n    <DropdownTrigger>\n      <Button className={className} size=\"S\" suffix={<FaCaretDownIcon />}>\n        <Translate>{children}</Translate>\n      </Button>\n    </DropdownTrigger>\n  ),\n)\n\nconst ContentBody = memo<\n  Props & {\n    translated: { favorite: string; all: string; checkIconAlt: string }\n    className: string\n    buttonClassName: string\n  }\n>(({ page, onSelectPage, translated, className, buttonClassName }) => {\n  const theme = useTheme()\n  const isFavorite = page === 'favorite'\n\n  const onClickButton = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      onSelectPage(e.currentTarget.value as Launcher['page'])\n    },\n    [onSelectPage],\n  )\n\n  const buttonPrefix = (\n    <FaCheckIcon\n      color={theme.textColor.main}\n      alt={<Translate>{translated.checkIconAlt}</Translate>}\n    />\n  )\n\n  return (\n    <div role=\"listbox\" className={className}>\n      <Button\n        value=\"favorite\"\n        role=\"option\"\n        aria-selected={isFavorite}\n        onClick={onClickButton}\n        className={buttonClassName}\n        prefix={isFavorite && buttonPrefix}\n      >\n        <Translate>{translated.favorite}</Translate>\n      </Button>\n      <Button\n        value=\"all\"\n        role=\"option\"\n        aria-selected={!isFavorite}\n        onClick={onClickButton}\n        className={buttonClassName}\n        prefix={!isFavorite && buttonPrefix}\n      >\n        <Translate>{translated.all}</Translate>\n      </Button>\n    </div>\n  )\n})\n"],"names":["tv","memo","useMemo","useIntl","_jsxs","Dropdown","_jsx","DropdownContent","DropdownTrigger","Button","FaCaretDownIcon","Translate","useTheme","useCallback","FaCheckIcon"],"mappings":"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"}
+{"version":3,"file":"AppLauncherFilterDropdown.cjs","sources":["../../../../../src/components/AppHeader/components/mobile/AppLauncherFilterDropdown.tsx"],"sourcesContent":["'use client'\n\nimport { type MouseEvent, type PropsWithChildren, memo, useCallback, useMemo } 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\ntype Props = {\n  page: Launcher['page']\n  onSelectPage: (page: Launcher['page']) => void\n}\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-flex shr-flex-col shr-items-stretch shr-px-0.25 shr-py-0.5'],\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\nexport const AppLauncherFilterDropdown = memo<Props>(({ page, onSelectPage }) => {\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      favorite: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/favoriteModeText',\n        defaultText: 'よく使うアプリ',\n      }),\n      all: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/allModeText',\n        defaultText: 'すべてのアプリ',\n      }),\n      checkIconAlt: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownSelected',\n        defaultText: '選択中',\n      }),\n    }),\n    [localize],\n  )\n\n  return (\n    <Dropdown>\n      <MemoizedDropdownTrigger className={classNames.trigger}>\n        {translated[page]}\n      </MemoizedDropdownTrigger>\n      <DropdownContent>\n        <ContentBody\n          page={page}\n          onSelectPage={onSelectPage}\n          translated={translated}\n          className={classNames.contentBody}\n          buttonClassName={classNames.contentButton}\n        />\n      </DropdownContent>\n    </Dropdown>\n  )\n})\n\nconst MemoizedDropdownTrigger = memo<PropsWithChildren<{ className: string }>>(\n  ({ children, className }) => (\n    <DropdownTrigger>\n      <Button className={className} size=\"S\" suffix={<FaCaretDownIcon />}>\n        <Translate>{children}</Translate>\n      </Button>\n    </DropdownTrigger>\n  ),\n)\n\nconst ContentBody = memo<\n  Props & {\n    translated: { favorite: string; all: string; checkIconAlt: string }\n    className: string\n    buttonClassName: string\n  }\n>(({ page, onSelectPage, translated, className, buttonClassName }) => {\n  const theme = useTheme()\n  const isFavorite = page === 'favorite'\n\n  const onClickButton = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      onSelectPage(e.currentTarget.value as Launcher['page'])\n    },\n    [onSelectPage],\n  )\n\n  const buttonPrefix = (\n    <FaCheckIcon\n      color={theme.textColor.main}\n      alt={<Translate>{translated.checkIconAlt}</Translate>}\n    />\n  )\n\n  return (\n    <div role=\"listbox\" className={className}>\n      <Button\n        value=\"favorite\"\n        role=\"option\"\n        aria-selected={isFavorite}\n        onClick={onClickButton}\n        className={buttonClassName}\n        prefix={isFavorite && buttonPrefix}\n      >\n        <Translate>{translated.favorite}</Translate>\n      </Button>\n      <Button\n        value=\"all\"\n        role=\"option\"\n        aria-selected={!isFavorite}\n        onClick={onClickButton}\n        className={buttonClassName}\n        prefix={!isFavorite && buttonPrefix}\n      >\n        <Translate>{translated.all}</Translate>\n      </Button>\n    </div>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA;AACE;AACE;;;;AAIC;;AAED;;;AAGC;AACF;AACF;AAEM;AACL;;;;;;;;AAUA;AACA;;AAGM;AACA;;;AAGA;AACA;;;AAGA;AACA;;AAEH;;AAoBL;AAEA;AAUA;AAOE;AACA;AAEA;AAEI;AACF;;AAWF;AAwBF;;"}

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { memo, 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';

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

@@ -1 +1 @@
-{"version":3,"file":"AppLauncherFilterDropdown.js","sources":["../../../../../src/components/AppHeader/components/mobile/AppLauncherFilterDropdown.tsx"],"sourcesContent":["import { type MouseEvent, type PropsWithChildren, memo, useCallback, useMemo } 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\ntype Props = {\n  page: Launcher['page']\n  onSelectPage: (page: Launcher['page']) => void\n}\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-flex shr-flex-col shr-items-stretch shr-px-0.25 shr-py-0.5'],\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\nexport const AppLauncherFilterDropdown = memo<Props>(({ page, onSelectPage }) => {\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      favorite: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/favoriteModeText',\n        defaultText: 'よく使うアプリ',\n      }),\n      all: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/allModeText',\n        defaultText: 'すべてのアプリ',\n      }),\n      checkIconAlt: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownSelected',\n        defaultText: '選択中',\n      }),\n    }),\n    [localize],\n  )\n\n  return (\n    <Dropdown>\n      <MemoizedDropdownTrigger className={classNames.trigger}>\n        {translated[page]}\n      </MemoizedDropdownTrigger>\n      <DropdownContent>\n        <ContentBody\n          page={page}\n          onSelectPage={onSelectPage}\n          translated={translated}\n          className={classNames.contentBody}\n          buttonClassName={classNames.contentButton}\n        />\n      </DropdownContent>\n    </Dropdown>\n  )\n})\n\nconst MemoizedDropdownTrigger = memo<PropsWithChildren<{ className: string }>>(\n  ({ children, className }) => (\n    <DropdownTrigger>\n      <Button className={className} size=\"S\" suffix={<FaCaretDownIcon />}>\n        <Translate>{children}</Translate>\n      </Button>\n    </DropdownTrigger>\n  ),\n)\n\nconst ContentBody = memo<\n  Props & {\n    translated: { favorite: string; all: string; checkIconAlt: string }\n    className: string\n    buttonClassName: string\n  }\n>(({ page, onSelectPage, translated, className, buttonClassName }) => {\n  const theme = useTheme()\n  const isFavorite = page === 'favorite'\n\n  const onClickButton = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      onSelectPage(e.currentTarget.value as Launcher['page'])\n    },\n    [onSelectPage],\n  )\n\n  const buttonPrefix = (\n    <FaCheckIcon\n      color={theme.textColor.main}\n      alt={<Translate>{translated.checkIconAlt}</Translate>}\n    />\n  )\n\n  return (\n    <div role=\"listbox\" className={className}>\n      <Button\n        value=\"favorite\"\n        role=\"option\"\n        aria-selected={isFavorite}\n        onClick={onClickButton}\n        className={buttonClassName}\n        prefix={isFavorite && buttonPrefix}\n      >\n        <Translate>{translated.favorite}</Translate>\n      </Button>\n      <Button\n        value=\"all\"\n        role=\"option\"\n        aria-selected={!isFavorite}\n        onClick={onClickButton}\n        className={buttonClassName}\n        prefix={!isFavorite && buttonPrefix}\n      >\n        <Translate>{translated.all}</Translate>\n      </Button>\n    </div>\n  )\n})\n"],"names":["tv","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;YACP,6CAA6C;YAC7C,4BAA4B;YAC5B,2DAA2D;AAC5D,SAAA;QACD,WAAW,EAAE,CAAC,gEAAgE,CAAC;AAC/E,QAAA,aAAa,EAAE;YACb,0EAA0E;YAC1E,wBAAwB;AACzB,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,yBAAyB,GAAG,IAAI,CAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAI;AAC9E,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAK;QAC9B,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,kBAAkB,EAAE;QAEpE,OAAO;YACL,OAAO,EAAE,OAAO,EAAE;YAClB,WAAW,EAAE,WAAW,EAAE;YAC1B,aAAa,EAAE,aAAa,EAAE;SAC/B;IACH,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE;AAC9B,IAAA,MAAM,UAAU,GAAG,OAAO,CACxB,OAAO;QACL,QAAQ,EAAE,QAAQ,CAAC;AACjB,YAAA,EAAE,EAAE,gDAAgD;AACpD,YAAA,WAAW,EAAE,SAAS;SACvB,CAAC;QACF,GAAG,EAAE,QAAQ,CAAC;AACZ,YAAA,EAAE,EAAE,2CAA2C;AAC/C,YAAA,WAAW,EAAE,SAAS;SACvB,CAAC;QACF,YAAY,EAAE,QAAQ,CAAC;AACrB,YAAA,EAAE,EAAE,oDAAoD;AACxD,YAAA,WAAW,EAAE,KAAK;SACnB,CAAC;AACH,KAAA,CAAC,EACF,CAAC,QAAQ,CAAC,CACX;IAED,QACEC,IAAA,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAA,CACPC,GAAA,CAAC,uBAAuB,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,OAAO,YACnD,UAAU,CAAC,IAAI,CAAC,EAAA,CACO,EAC1BA,IAAC,eAAe,EAAA,EAAA,QAAA,EACdA,GAAA,CAAC,WAAW,EAAA,EACV,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,UAAU,CAAC,WAAW,EACjC,eAAe,EAAE,UAAU,CAAC,aAAa,EAAA,CACzC,EAAA,CACc,CAAA,EAAA,CACT;AAEf,CAAC;AAED,MAAM,uBAAuB,GAAG,IAAI,CAClC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MACtBA,GAAA,CAAC,eAAe,EAAA,EAAA,QAAA,EACdA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAC,GAAG,EAAC,MAAM,EAAEA,IAAC,eAAe,EAAA,EAAA,CAAG,YAChEA,GAAA,CAAC,SAAS,cAAE,QAAQ,EAAA,CAAa,GAC1B,EAAA,CACO,CACnB,CACF;AAED,MAAM,WAAW,GAAG,IAAI,CAMtB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,KAAI;AACnE,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;AACxB,IAAA,MAAM,UAAU,GAAG,IAAI,KAAK,UAAU;AAEtC,IAAA,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAAgC,KAAI;AACnC,QAAA,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,KAAyB,CAAC;AACzD,IAAA,CAAC,EACD,CAAC,YAAY,CAAC,CACf;IAED,MAAM,YAAY,IAChBA,GAAA,CAAC,WAAW,IACV,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,EAC3B,GAAG,EAAEA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAE,UAAU,CAAC,YAAY,EAAA,CAAa,EAAA,CACrD,CACH;AAED,IAAA,QACED,IAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,SAAS,EAAC,SAAS,EAAE,SAAS,EAAA,QAAA,EAAA,CACtCC,GAAA,CAAC,MAAM,EAAA,EACL,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,QAAQ,EAAA,eAAA,EACE,UAAU,EACzB,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,eAAe,EAC1B,MAAM,EAAE,UAAU,IAAI,YAAY,YAElCA,GAAA,CAAC,SAAS,cAAE,UAAU,CAAC,QAAQ,EAAA,CAAa,GACrC,EACTA,GAAA,CAAC,MAAM,EAAA,EACL,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,QAAQ,EAAA,eAAA,EACE,CAAC,UAAU,EAC1B,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,eAAe,EAC1B,MAAM,EAAE,CAAC,UAAU,IAAI,YAAY,EAAA,QAAA,EAEnCA,IAAC,SAAS,EAAA,EAAA,QAAA,EAAE,UAAU,CAAC,GAAG,GAAa,EAAA,CAChC,CAAA,EAAA,CACL;AAEV,CAAC,CAAC;;;;"}
+{"version":3,"file":"AppLauncherFilterDropdown.js","sources":["../../../../../src/components/AppHeader/components/mobile/AppLauncherFilterDropdown.tsx"],"sourcesContent":["'use client'\n\nimport { type MouseEvent, type PropsWithChildren, memo, useCallback, useMemo } 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\ntype Props = {\n  page: Launcher['page']\n  onSelectPage: (page: Launcher['page']) => void\n}\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-flex shr-flex-col shr-items-stretch shr-px-0.25 shr-py-0.5'],\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\nexport const AppLauncherFilterDropdown = memo<Props>(({ page, onSelectPage }) => {\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      favorite: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/favoriteModeText',\n        defaultText: 'よく使うアプリ',\n      }),\n      all: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/allModeText',\n        defaultText: 'すべてのアプリ',\n      }),\n      checkIconAlt: localize({\n        id: 'smarthr-ui/AppHeader/Launcher/sortDropdownSelected',\n        defaultText: '選択中',\n      }),\n    }),\n    [localize],\n  )\n\n  return (\n    <Dropdown>\n      <MemoizedDropdownTrigger className={classNames.trigger}>\n        {translated[page]}\n      </MemoizedDropdownTrigger>\n      <DropdownContent>\n        <ContentBody\n          page={page}\n          onSelectPage={onSelectPage}\n          translated={translated}\n          className={classNames.contentBody}\n          buttonClassName={classNames.contentButton}\n        />\n      </DropdownContent>\n    </Dropdown>\n  )\n})\n\nconst MemoizedDropdownTrigger = memo<PropsWithChildren<{ className: string }>>(\n  ({ children, className }) => (\n    <DropdownTrigger>\n      <Button className={className} size=\"S\" suffix={<FaCaretDownIcon />}>\n        <Translate>{children}</Translate>\n      </Button>\n    </DropdownTrigger>\n  ),\n)\n\nconst ContentBody = memo<\n  Props & {\n    translated: { favorite: string; all: string; checkIconAlt: string }\n    className: string\n    buttonClassName: string\n  }\n>(({ page, onSelectPage, translated, className, buttonClassName }) => {\n  const theme = useTheme()\n  const isFavorite = page === 'favorite'\n\n  const onClickButton = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      onSelectPage(e.currentTarget.value as Launcher['page'])\n    },\n    [onSelectPage],\n  )\n\n  const buttonPrefix = (\n    <FaCheckIcon\n      color={theme.textColor.main}\n      alt={<Translate>{translated.checkIconAlt}</Translate>}\n    />\n  )\n\n  return (\n    <div role=\"listbox\" className={className}>\n      <Button\n        value=\"favorite\"\n        role=\"option\"\n        aria-selected={isFavorite}\n        onClick={onClickButton}\n        className={buttonClassName}\n        prefix={isFavorite && buttonPrefix}\n      >\n        <Translate>{translated.favorite}</Translate>\n      </Button>\n      <Button\n        value=\"all\"\n        role=\"option\"\n        aria-selected={!isFavorite}\n        onClick={onClickButton}\n        className={buttonClassName}\n        prefix={!isFavorite && buttonPrefix}\n      >\n        <Translate>{translated.all}</Translate>\n      </Button>\n    </div>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmBA;AACE;AACE;;;;AAIC;;AAED;;;AAGC;AACF;AACF;AAEM;AACL;;;;;;;;AAUA;AACA;;AAGM;AACA;;;AAGA;AACA;;;AAGA;AACA;;AAEH;;AAoBL;AAEA;AAUA;AAOE;AACA;AAEA;AAEI;AACF;;AAWF;AAwBF;;"}

package/lib/components/Combobox/useListbox.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/lib/components/Combobox/useListbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useListbox.cjs","sources":["../../../src/components/Combobox/useListbox.tsx"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useEnhancedEffect } from '../../hooks/useEnhancedEffect'\nimport { usePortal } from '../../hooks/usePortal'\nimport { useTheme } from '../../hooks/useTheme'\nimport { useIntl } from '../../intl'\nimport { FaCircleInfoIcon } from '../Icon'\nimport { Loader } from '../Loader'\nimport { Scroller } from '../Scroller'\nimport { Text } from '../Text'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nimport { ItemButton } from './ItemButton'\nimport { useActiveOption } from './useActiveOption'\nimport { usePartialRendering } from './usePartialRendering'\n\nimport type { ComboboxItem, ComboboxOption } from './types'\n\ntype Props<T> = {\n  options: Array<ComboboxOption<T>>\n  dropdownHelpMessage?: ReactNode\n  dropdownWidth?: string | number\n  onAdd?: (label: string) => void\n  onSelect: (item: ComboboxItem<T>) => void\n  isExpanded: boolean\n  isLoading?: boolean\n  triggerRef: RefObject<HTMLElement>\n  /** 検索結果が0件の時に表示するコンテンツ */\n  noResultText?: ReactNode\n}\n\ntype Rect = {\n  top: number\n  left: number\n  height?: number\n}\n\nconst KEY_DOWN_REGEX = /^(Arrow)?Down$/\nconst KEY_UP_REGEX = /^(Arrow)?Up/\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'shr-absolute',\n    dropdownList: [\n      'smarthr-ui-Combobox-dropdownList',\n      'shr-absolute shr-z-overlap shr-box-border shr-min-w-full shr-rounded-m shr-bg-white shr-py-0.5 shr-shadow-layer-3',\n      /* 縦スクロールに気づきやすくするために8個目のアイテムが半分見切れるように max-height を算出\n      = (アイテムのフォントサイズ + アイテムの上下padding) * 7.5 + コンテナの上padding */\n      'shr-max-h-[calc((theme(fontSize.base)_+_theme(spacing[0.5])_*_2)_*_7.5_+_theme(spacing[0.5]))]',\n      'aria-hidden:shr-hidden',\n    ],\n    helpMessage:\n      'shr-whitespace-[initial] shr-border-b-shorthand shr-mx-0.5 shr-mb-0.5 shr-mt-0 shr-px-0.5 shr-pb-0.5 shr-pt-0 shr-text-sm',\n    loaderWrapper: 'shr-flex shr-items-center shr-justify-center shr-p-1',\n    noItems: 'smarthr-ui-Combobox-noItems shr-my-0 shr-bg-white shr-px-1 shr-py-0.5 shr-text-base',\n  },\n})\n\nexport const useListbox = <T,>({\n  options,\n  dropdownHelpMessage,\n  dropdownWidth,\n  onAdd,\n  onSelect,\n  isExpanded,\n  isLoading,\n  triggerRef,\n  noResultText: orgNoResultText,\n}: Props<T>) => {\n  const theme = useTheme()\n  const [navigationType, setNavigationType] = useState<'pointer' | 'key'>('pointer')\n  const { activeOption, setActiveOption, moveActiveOptionIndex } = useActiveOption({ options })\n  const { localize } = useIntl()\n\n  useEffect(() => {\n    // 閉じたときに activeOption を初期化\n    if (!isExpanded) {\n      setActiveOption(null)\n    }\n  }, [isExpanded, setActiveOption])\n\n  const listBoxRef = useRef<HTMLDivElement>(null)\n  const [listBoxRect, setListBoxRect] = useState<Rect>({\n    top: 0,\n    left: 0,\n  })\n  // HINT: calculateRectで同時に計算するとwidthの幅が変更されるタイミングの問題でlistBoxHeightが変化する場合がある\n  const [triggerWidth, setTriggerWidth] = useState(0)\n\n  useEffect(() => {\n    if (!triggerRef.current) {\n      return\n    }\n\n    const rect = triggerRef.current.getBoundingClientRect()\n\n    setTriggerWidth(rect.width)\n  }, [isExpanded, triggerRef])\n\n  const calculateRect = useCallback(() => {\n    if (!listBoxRef.current || !triggerRef.current) {\n      return\n    }\n    const rect = triggerRef.current.getBoundingClientRect()\n    const bottomSpace = window.innerHeight - rect.bottom\n    const topSpace = rect.top\n    const listBoxHeight = Math.min(\n      listBoxRef.current.scrollHeight,\n      parseInt(getComputedStyle(listBoxRef.current).maxHeight, 10),\n    )\n    const offset = 2\n\n    let top = 0\n    let height: number | undefined = undefined\n\n    if (bottomSpace >= listBoxHeight) {\n      // 下側に十分なスペースがある場合は下側に通常表示\n      top = rect.top + rect.height - offset + window.pageYOffset\n    } else if (topSpace >= listBoxHeight) {\n      // 上側に十分なスペースがある場合は上側に通常表示\n      top = rect.top - listBoxHeight + offset + window.pageYOffset\n    } else if (topSpace > bottomSpace) {\n      // 上下に十分なスペースがなく、上側の方がスペースが大きい場合は上側に縮めて表示\n      top = rect.top - topSpace + offset + window.pageYOffset\n      height = topSpace\n    } else {\n      // 下側に縮めて表示\n      top = rect.top + rect.height - offset + window.pageYOffset\n      height = bottomSpace\n    }\n\n    setListBoxRect({\n      top,\n      left: rect.left + window.pageXOffset,\n      height,\n    })\n    setTriggerWidth(rect.width)\n  }, [listBoxRef, triggerRef])\n\n  const activeRef = useRef<HTMLButtonElement>(null)\n\n  useEffect(() => {\n    // actionOption の要素が表示される位置までリストボックス内をスクロールさせる\n    if (\n      !activeRef.current ||\n      !listBoxRef.current ||\n      activeOption === null ||\n      navigationType !== 'key'\n    ) {\n      return\n    }\n\n    const activeRect = activeRef.current.getBoundingClientRect()\n    const containerRect = listBoxRef.current.getBoundingClientRect()\n\n    if (activeRect.top < containerRect.top) {\n      listBoxRef.current.scrollTop -= containerRect.top - activeRect.top\n    } else if (activeRect.bottom > containerRect.bottom) {\n      listBoxRef.current.scrollTop += activeRect.bottom - containerRect.bottom\n    }\n  }, [activeOption, listBoxRef, navigationType])\n\n  useEnhancedEffect(() => {\n    if (isExpanded) {\n      // options の更新毎に座標を再計算する\n      calculateRect()\n    }\n  }, [calculateRect, isExpanded, options])\n\n  const onKeyDownListBox = useCallback(\n    (e: KeyboardEvent<HTMLElement>) => {\n      setNavigationType('key')\n\n      if (KEY_DOWN_REGEX.test(e.key)) {\n        e.stopPropagation()\n        moveActiveOptionIndex(activeOption, 1)\n      } else if (KEY_UP_REGEX.test(e.key)) {\n        e.stopPropagation()\n        moveActiveOptionIndex(activeOption, -1)\n      } else if (e.key === 'Enter') {\n        if (activeOption === null) {\n          return\n        }\n\n        e.stopPropagation()\n\n        if (!activeOption.isNew) {\n          onSelect(activeOption.item)\n        } else if (onAdd) {\n          onAdd(activeOption.item.value)\n        }\n      } else {\n        setActiveOption(null)\n      }\n    },\n    [activeOption, moveActiveOptionIndex, onAdd, onSelect, setActiveOption],\n  )\n\n  const { createPortal } = usePortal()\n  const listBoxId = useId()\n  const { items: partialOptions, renderIntersection } = usePartialRendering({\n    items: options,\n    minLength: useMemo(\n      () => (activeOption === null ? 0 : options.indexOf(activeOption)) + 1,\n      [activeOption, options],\n    ),\n  })\n\n  const handleAdd = useMemo(\n    () =>\n      onAdd\n        ? (option: ComboboxOption<T>) => {\n            // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n            // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n            requestAnimationFrame(() => {\n              onAdd(option.item.value)\n            })\n          }\n        : undefined,\n    [onAdd],\n  )\n  const handleSelect = useCallback(\n    (option: ComboboxOption<T>) => {\n      onSelect(option.item)\n    },\n    [onSelect],\n  )\n  const handleHoverOption = useCallback(\n    (option: ComboboxOption<T>) => {\n      setNavigationType('pointer')\n      setActiveOption(option)\n    },\n    [setActiveOption],\n  )\n\n  const wrapperStyle = useMemo(() => {\n    const { top, left } = listBoxRect\n\n    return {\n      top: `${top}px`,\n      left: `${left}px`,\n      width: `${triggerWidth}px`,\n    }\n  }, [listBoxRect, triggerWidth])\n  const dropdownListStyle = useMemo(() => {\n    const { left, height } = listBoxRect\n    const dropdownListWidth = dropdownWidth || triggerWidth\n\n    return {\n      width: typeof dropdownListWidth === 'string' ? dropdownListWidth : `${dropdownListWidth}px`,\n      maxWidth: `calc(100vw - ${left}px - ${theme.spacingByChar(0.5)})`,\n      height: height ? `${height}px` : undefined,\n    }\n  }, [listBoxRect, triggerWidth, dropdownWidth, theme])\n\n  const classNames = useMemo(() => {\n    const { wrapper, dropdownList, helpMessage, loaderWrapper, noItems } = classNameGenerator()\n\n    return {\n      wrapper: wrapper(),\n      dropdownList: dropdownList(),\n      helpMessage: helpMessage(),\n      loaderWrapper: loaderWrapper(),\n      noItems: noItems(),\n    }\n  }, [])\n\n  const texts = useMemo(\n    () => ({\n      loadingText: localize({ id: 'smarthr-ui/Combobox/loadingText', defaultText: '処理中' }),\n      noResultText:\n        orgNoResultText ??\n        localize({\n          id: 'smarthr-ui/Combobox/noResultsText',\n          defaultText: '一致する選択肢がありません。',\n        }),\n    }),\n    [orgNoResultText, localize],\n  )\n\n  const renderListBox = useCallback(\n    () =>\n      createPortal(\n        <div className={classNames.wrapper} style={wrapperStyle}>\n          {isExpanded && isLoading && (\n            <VisuallyHiddenText role=\"status\">{texts.loadingText}</VisuallyHiddenText>\n          )}\n          <Scroller\n            id={listBoxId}\n            ref={listBoxRef}\n            role=\"listbox\"\n            aria-hidden={!isExpanded}\n            className={classNames.dropdownList}\n            style={dropdownListStyle}\n          >\n            {dropdownHelpMessage && (\n              <Text\n                className={classNames.helpMessage}\n                icon={<FaCircleInfoIcon color=\"TEXT_GREY\" />}\n                as=\"p\"\n              >\n                {dropdownHelpMessage}\n              </Text>\n            )}\n            {isExpanded ? (\n              isLoading ? (\n                <div className={classNames.loaderWrapper}>\n                  <Loader aria-hidden />\n                </div>\n              ) : options.length === 0 ? (\n                <p role=\"alert\" aria-live=\"polite\" className={classNames.noItems}>\n                  {texts.noResultText}\n                </p>\n              ) : (\n                partialOptions.map((option) => (\n                  <ItemButton\n                    key={option.id}\n                    option={option}\n                    onAdd={handleAdd}\n                    onSelect={handleSelect}\n                    onMouseOver={handleHoverOption}\n                    activeRef={option.id === activeOption?.id ? activeRef : undefined}\n                  />\n                ))\n              )\n            ) : null}\n            {renderIntersection()}\n          </Scroller>\n        </div>,\n      ),\n    [\n      activeOption?.id,\n      renderIntersection,\n      partialOptions,\n      options.length,\n      isExpanded,\n      isLoading,\n      dropdownHelpMessage,\n      listBoxId,\n      texts,\n      handleAdd,\n      handleHoverOption,\n      handleSelect,\n      classNames,\n      dropdownListStyle,\n      wrapperStyle,\n      createPortal,\n    ],\n  )\n\n  return {\n    renderListBox,\n    activeOption,\n    onKeyDownListBox,\n    listBoxId,\n    listBoxRef,\n  }\n}\n"],"names":["tv","useTheme","useState","useActiveOption","useIntl","useEffect","useRef","useCallback","useEnhancedEffect","usePortal","useId","usePartialRendering","useMemo","_jsxs","_jsx","VisuallyHiddenText","Scroller","Text","FaCircleInfoIcon","Loader","ItemButton"],"mappings":"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"}
+{"version":3,"file":"useListbox.cjs","sources":["../../../src/components/Combobox/useListbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type KeyboardEvent,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useEnhancedEffect } from '../../hooks/useEnhancedEffect'\nimport { usePortal } from '../../hooks/usePortal'\nimport { useTheme } from '../../hooks/useTheme'\nimport { useIntl } from '../../intl'\nimport { FaCircleInfoIcon } from '../Icon'\nimport { Loader } from '../Loader'\nimport { Scroller } from '../Scroller'\nimport { Text } from '../Text'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nimport { ItemButton } from './ItemButton'\nimport { useActiveOption } from './useActiveOption'\nimport { usePartialRendering } from './usePartialRendering'\n\nimport type { ComboboxItem, ComboboxOption } from './types'\n\ntype Props<T> = {\n  options: Array<ComboboxOption<T>>\n  dropdownHelpMessage?: ReactNode\n  dropdownWidth?: string | number\n  onAdd?: (label: string) => void\n  onSelect: (item: ComboboxItem<T>) => void\n  isExpanded: boolean\n  isLoading?: boolean\n  triggerRef: RefObject<HTMLElement>\n  /** 検索結果が0件の時に表示するコンテンツ */\n  noResultText?: ReactNode\n}\n\ntype Rect = {\n  top: number\n  left: number\n  height?: number\n}\n\nconst KEY_DOWN_REGEX = /^(Arrow)?Down$/\nconst KEY_UP_REGEX = /^(Arrow)?Up/\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'shr-absolute',\n    dropdownList: [\n      'smarthr-ui-Combobox-dropdownList',\n      'shr-absolute shr-z-overlap shr-box-border shr-min-w-full shr-rounded-m shr-bg-white shr-py-0.5 shr-shadow-layer-3',\n      /* 縦スクロールに気づきやすくするために8個目のアイテムが半分見切れるように max-height を算出\n      = (アイテムのフォントサイズ + アイテムの上下padding) * 7.5 + コンテナの上padding */\n      'shr-max-h-[calc((theme(fontSize.base)_+_theme(spacing[0.5])_*_2)_*_7.5_+_theme(spacing[0.5]))]',\n      'aria-hidden:shr-hidden',\n    ],\n    helpMessage:\n      'shr-whitespace-[initial] shr-border-b-shorthand shr-mx-0.5 shr-mb-0.5 shr-mt-0 shr-px-0.5 shr-pb-0.5 shr-pt-0 shr-text-sm',\n    loaderWrapper: 'shr-flex shr-items-center shr-justify-center shr-p-1',\n    noItems: 'smarthr-ui-Combobox-noItems shr-my-0 shr-bg-white shr-px-1 shr-py-0.5 shr-text-base',\n  },\n})\n\nexport const useListbox = <T,>({\n  options,\n  dropdownHelpMessage,\n  dropdownWidth,\n  onAdd,\n  onSelect,\n  isExpanded,\n  isLoading,\n  triggerRef,\n  noResultText: orgNoResultText,\n}: Props<T>) => {\n  const theme = useTheme()\n  const [navigationType, setNavigationType] = useState<'pointer' | 'key'>('pointer')\n  const { activeOption, setActiveOption, moveActiveOptionIndex } = useActiveOption({ options })\n  const { localize } = useIntl()\n\n  useEffect(() => {\n    // 閉じたときに activeOption を初期化\n    if (!isExpanded) {\n      setActiveOption(null)\n    }\n  }, [isExpanded, setActiveOption])\n\n  const listBoxRef = useRef<HTMLDivElement>(null)\n  const [listBoxRect, setListBoxRect] = useState<Rect>({\n    top: 0,\n    left: 0,\n  })\n  // HINT: calculateRectで同時に計算するとwidthの幅が変更されるタイミングの問題でlistBoxHeightが変化する場合がある\n  const [triggerWidth, setTriggerWidth] = useState(0)\n\n  useEffect(() => {\n    if (!triggerRef.current) {\n      return\n    }\n\n    const rect = triggerRef.current.getBoundingClientRect()\n\n    setTriggerWidth(rect.width)\n  }, [isExpanded, triggerRef])\n\n  const calculateRect = useCallback(() => {\n    if (!listBoxRef.current || !triggerRef.current) {\n      return\n    }\n    const rect = triggerRef.current.getBoundingClientRect()\n    const bottomSpace = window.innerHeight - rect.bottom\n    const topSpace = rect.top\n    const listBoxHeight = Math.min(\n      listBoxRef.current.scrollHeight,\n      parseInt(getComputedStyle(listBoxRef.current).maxHeight, 10),\n    )\n    const offset = 2\n\n    let top = 0\n    let height: number | undefined = undefined\n\n    if (bottomSpace >= listBoxHeight) {\n      // 下側に十分なスペースがある場合は下側に通常表示\n      top = rect.top + rect.height - offset + window.pageYOffset\n    } else if (topSpace >= listBoxHeight) {\n      // 上側に十分なスペースがある場合は上側に通常表示\n      top = rect.top - listBoxHeight + offset + window.pageYOffset\n    } else if (topSpace > bottomSpace) {\n      // 上下に十分なスペースがなく、上側の方がスペースが大きい場合は上側に縮めて表示\n      top = rect.top - topSpace + offset + window.pageYOffset\n      height = topSpace\n    } else {\n      // 下側に縮めて表示\n      top = rect.top + rect.height - offset + window.pageYOffset\n      height = bottomSpace\n    }\n\n    setListBoxRect({\n      top,\n      left: rect.left + window.pageXOffset,\n      height,\n    })\n    setTriggerWidth(rect.width)\n  }, [listBoxRef, triggerRef])\n\n  const activeRef = useRef<HTMLButtonElement>(null)\n\n  useEffect(() => {\n    // actionOption の要素が表示される位置までリストボックス内をスクロールさせる\n    if (\n      !activeRef.current ||\n      !listBoxRef.current ||\n      activeOption === null ||\n      navigationType !== 'key'\n    ) {\n      return\n    }\n\n    const activeRect = activeRef.current.getBoundingClientRect()\n    const containerRect = listBoxRef.current.getBoundingClientRect()\n\n    if (activeRect.top < containerRect.top) {\n      listBoxRef.current.scrollTop -= containerRect.top - activeRect.top\n    } else if (activeRect.bottom > containerRect.bottom) {\n      listBoxRef.current.scrollTop += activeRect.bottom - containerRect.bottom\n    }\n  }, [activeOption, listBoxRef, navigationType])\n\n  useEnhancedEffect(() => {\n    if (isExpanded) {\n      // options の更新毎に座標を再計算する\n      calculateRect()\n    }\n  }, [calculateRect, isExpanded, options])\n\n  const onKeyDownListBox = useCallback(\n    (e: KeyboardEvent<HTMLElement>) => {\n      setNavigationType('key')\n\n      if (KEY_DOWN_REGEX.test(e.key)) {\n        e.stopPropagation()\n        moveActiveOptionIndex(activeOption, 1)\n      } else if (KEY_UP_REGEX.test(e.key)) {\n        e.stopPropagation()\n        moveActiveOptionIndex(activeOption, -1)\n      } else if (e.key === 'Enter') {\n        if (activeOption === null) {\n          return\n        }\n\n        e.stopPropagation()\n\n        if (!activeOption.isNew) {\n          onSelect(activeOption.item)\n        } else if (onAdd) {\n          onAdd(activeOption.item.value)\n        }\n      } else {\n        setActiveOption(null)\n      }\n    },\n    [activeOption, moveActiveOptionIndex, onAdd, onSelect, setActiveOption],\n  )\n\n  const { createPortal } = usePortal()\n  const listBoxId = useId()\n  const { items: partialOptions, renderIntersection } = usePartialRendering({\n    items: options,\n    minLength: useMemo(\n      () => (activeOption === null ? 0 : options.indexOf(activeOption)) + 1,\n      [activeOption, options],\n    ),\n  })\n\n  const handleAdd = useMemo(\n    () =>\n      onAdd\n        ? (option: ComboboxOption<T>) => {\n            // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n            // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n            requestAnimationFrame(() => {\n              onAdd(option.item.value)\n            })\n          }\n        : undefined,\n    [onAdd],\n  )\n  const handleSelect = useCallback(\n    (option: ComboboxOption<T>) => {\n      onSelect(option.item)\n    },\n    [onSelect],\n  )\n  const handleHoverOption = useCallback(\n    (option: ComboboxOption<T>) => {\n      setNavigationType('pointer')\n      setActiveOption(option)\n    },\n    [setActiveOption],\n  )\n\n  const wrapperStyle = useMemo(() => {\n    const { top, left } = listBoxRect\n\n    return {\n      top: `${top}px`,\n      left: `${left}px`,\n      width: `${triggerWidth}px`,\n    }\n  }, [listBoxRect, triggerWidth])\n  const dropdownListStyle = useMemo(() => {\n    const { left, height } = listBoxRect\n    const dropdownListWidth = dropdownWidth || triggerWidth\n\n    return {\n      width: typeof dropdownListWidth === 'string' ? dropdownListWidth : `${dropdownListWidth}px`,\n      maxWidth: `calc(100vw - ${left}px - ${theme.spacingByChar(0.5)})`,\n      height: height ? `${height}px` : undefined,\n    }\n  }, [listBoxRect, triggerWidth, dropdownWidth, theme])\n\n  const classNames = useMemo(() => {\n    const { wrapper, dropdownList, helpMessage, loaderWrapper, noItems } = classNameGenerator()\n\n    return {\n      wrapper: wrapper(),\n      dropdownList: dropdownList(),\n      helpMessage: helpMessage(),\n      loaderWrapper: loaderWrapper(),\n      noItems: noItems(),\n    }\n  }, [])\n\n  const texts = useMemo(\n    () => ({\n      loadingText: localize({ id: 'smarthr-ui/Combobox/loadingText', defaultText: '処理中' }),\n      noResultText:\n        orgNoResultText ??\n        localize({\n          id: 'smarthr-ui/Combobox/noResultsText',\n          defaultText: '一致する選択肢がありません。',\n        }),\n    }),\n    [orgNoResultText, localize],\n  )\n\n  const renderListBox = useCallback(\n    () =>\n      createPortal(\n        <div className={classNames.wrapper} style={wrapperStyle}>\n          {isExpanded && isLoading && (\n            <VisuallyHiddenText role=\"status\">{texts.loadingText}</VisuallyHiddenText>\n          )}\n          <Scroller\n            id={listBoxId}\n            ref={listBoxRef}\n            role=\"listbox\"\n            aria-hidden={!isExpanded}\n            className={classNames.dropdownList}\n            style={dropdownListStyle}\n          >\n            {dropdownHelpMessage && (\n              <Text\n                className={classNames.helpMessage}\n                icon={<FaCircleInfoIcon color=\"TEXT_GREY\" />}\n                as=\"p\"\n              >\n                {dropdownHelpMessage}\n              </Text>\n            )}\n            {isExpanded ? (\n              isLoading ? (\n                <div className={classNames.loaderWrapper}>\n                  <Loader aria-hidden />\n                </div>\n              ) : options.length === 0 ? (\n                <p role=\"alert\" aria-live=\"polite\" className={classNames.noItems}>\n                  {texts.noResultText}\n                </p>\n              ) : (\n                partialOptions.map((option) => (\n                  <ItemButton\n                    key={option.id}\n                    option={option}\n                    onAdd={handleAdd}\n                    onSelect={handleSelect}\n                    onMouseOver={handleHoverOption}\n                    activeRef={option.id === activeOption?.id ? activeRef : undefined}\n                  />\n                ))\n              )\n            ) : null}\n            {renderIntersection()}\n          </Scroller>\n        </div>,\n      ),\n    [\n      activeOption?.id,\n      renderIntersection,\n      partialOptions,\n      options.length,\n      isExpanded,\n      isLoading,\n      dropdownHelpMessage,\n      listBoxId,\n      texts,\n      handleAdd,\n      handleHoverOption,\n      handleSelect,\n      classNames,\n      dropdownListStyle,\n      wrapperStyle,\n      createPortal,\n    ],\n  )\n\n  return {\n    renderListBox,\n    activeOption,\n    onKeyDownListBox,\n    listBoxId,\n    listBoxRef,\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkDA;AACA;AAEA;AACE;AACE;AACA;;;AAGE;AAC0D;;;AAG3D;AACD;AAEA;AACA;AACD;AACF;AAEM;AAWL;;AAEA;AACA;;;;;;AAOA;AAEA;AACA;AACE;AACA;AACD;;;;AAKC;;;;AAMA;AACF;AAEA;;;;;;AAME;;;;;AAUA;;AAEE;;AACK;;AAEL;;AACK;;AAEL;;;;;AAIA;;;AAIF;;AAEE;;AAED;AACD;AACF;AAEA;;;;;AAOI;;;;;;;AAUA;;;AAEA;;;;;;AAOA;;;AAIJ;;;;AAMM;;;;AAGA;;AACK;AACL;;;;AAMA;AACE;;;AAEA;;;;;;AAKN;AAIF;AACA;;AAEE;AACA;AAID;AAED;AAGM;;;;AAIM;AACF;;AAEJ;AAGN;AAEI;AACF;AAGF;;;AAIE;AAIF;AACE;;;;;;AAOF;AACA;AACE;AACA;;AAGE;;;;;AAMJ;AACE;;;;;;;;;AAWF;AAEI;AACA;AAEE;AACE;AACA;;AAEL;;AAuDC;;;AAGA;;;;;;;;;;;;;AAaD;;;;;;;;AAUL;;"}

package/lib/components/Combobox/useListbox.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect, useRef, useCallback, useId, useMemo } from 'react';
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';

package/lib/components/Combobox/useListbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useListbox.js","sources":["../../../src/components/Combobox/useListbox.tsx"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useEnhancedEffect } from '../../hooks/useEnhancedEffect'\nimport { usePortal } from '../../hooks/usePortal'\nimport { useTheme } from '../../hooks/useTheme'\nimport { useIntl } from '../../intl'\nimport { FaCircleInfoIcon } from '../Icon'\nimport { Loader } from '../Loader'\nimport { Scroller } from '../Scroller'\nimport { Text } from '../Text'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nimport { ItemButton } from './ItemButton'\nimport { useActiveOption } from './useActiveOption'\nimport { usePartialRendering } from './usePartialRendering'\n\nimport type { ComboboxItem, ComboboxOption } from './types'\n\ntype Props<T> = {\n  options: Array<ComboboxOption<T>>\n  dropdownHelpMessage?: ReactNode\n  dropdownWidth?: string | number\n  onAdd?: (label: string) => void\n  onSelect: (item: ComboboxItem<T>) => void\n  isExpanded: boolean\n  isLoading?: boolean\n  triggerRef: RefObject<HTMLElement>\n  /** 検索結果が0件の時に表示するコンテンツ */\n  noResultText?: ReactNode\n}\n\ntype Rect = {\n  top: number\n  left: number\n  height?: number\n}\n\nconst KEY_DOWN_REGEX = /^(Arrow)?Down$/\nconst KEY_UP_REGEX = /^(Arrow)?Up/\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'shr-absolute',\n    dropdownList: [\n      'smarthr-ui-Combobox-dropdownList',\n      'shr-absolute shr-z-overlap shr-box-border shr-min-w-full shr-rounded-m shr-bg-white shr-py-0.5 shr-shadow-layer-3',\n      /* 縦スクロールに気づきやすくするために8個目のアイテムが半分見切れるように max-height を算出\n      = (アイテムのフォントサイズ + アイテムの上下padding) * 7.5 + コンテナの上padding */\n      'shr-max-h-[calc((theme(fontSize.base)_+_theme(spacing[0.5])_*_2)_*_7.5_+_theme(spacing[0.5]))]',\n      'aria-hidden:shr-hidden',\n    ],\n    helpMessage:\n      'shr-whitespace-[initial] shr-border-b-shorthand shr-mx-0.5 shr-mb-0.5 shr-mt-0 shr-px-0.5 shr-pb-0.5 shr-pt-0 shr-text-sm',\n    loaderWrapper: 'shr-flex shr-items-center shr-justify-center shr-p-1',\n    noItems: 'smarthr-ui-Combobox-noItems shr-my-0 shr-bg-white shr-px-1 shr-py-0.5 shr-text-base',\n  },\n})\n\nexport const useListbox = <T,>({\n  options,\n  dropdownHelpMessage,\n  dropdownWidth,\n  onAdd,\n  onSelect,\n  isExpanded,\n  isLoading,\n  triggerRef,\n  noResultText: orgNoResultText,\n}: Props<T>) => {\n  const theme = useTheme()\n  const [navigationType, setNavigationType] = useState<'pointer' | 'key'>('pointer')\n  const { activeOption, setActiveOption, moveActiveOptionIndex } = useActiveOption({ options })\n  const { localize } = useIntl()\n\n  useEffect(() => {\n    // 閉じたときに activeOption を初期化\n    if (!isExpanded) {\n      setActiveOption(null)\n    }\n  }, [isExpanded, setActiveOption])\n\n  const listBoxRef = useRef<HTMLDivElement>(null)\n  const [listBoxRect, setListBoxRect] = useState<Rect>({\n    top: 0,\n    left: 0,\n  })\n  // HINT: calculateRectで同時に計算するとwidthの幅が変更されるタイミングの問題でlistBoxHeightが変化する場合がある\n  const [triggerWidth, setTriggerWidth] = useState(0)\n\n  useEffect(() => {\n    if (!triggerRef.current) {\n      return\n    }\n\n    const rect = triggerRef.current.getBoundingClientRect()\n\n    setTriggerWidth(rect.width)\n  }, [isExpanded, triggerRef])\n\n  const calculateRect = useCallback(() => {\n    if (!listBoxRef.current || !triggerRef.current) {\n      return\n    }\n    const rect = triggerRef.current.getBoundingClientRect()\n    const bottomSpace = window.innerHeight - rect.bottom\n    const topSpace = rect.top\n    const listBoxHeight = Math.min(\n      listBoxRef.current.scrollHeight,\n      parseInt(getComputedStyle(listBoxRef.current).maxHeight, 10),\n    )\n    const offset = 2\n\n    let top = 0\n    let height: number | undefined = undefined\n\n    if (bottomSpace >= listBoxHeight) {\n      // 下側に十分なスペースがある場合は下側に通常表示\n      top = rect.top + rect.height - offset + window.pageYOffset\n    } else if (topSpace >= listBoxHeight) {\n      // 上側に十分なスペースがある場合は上側に通常表示\n      top = rect.top - listBoxHeight + offset + window.pageYOffset\n    } else if (topSpace > bottomSpace) {\n      // 上下に十分なスペースがなく、上側の方がスペースが大きい場合は上側に縮めて表示\n      top = rect.top - topSpace + offset + window.pageYOffset\n      height = topSpace\n    } else {\n      // 下側に縮めて表示\n      top = rect.top + rect.height - offset + window.pageYOffset\n      height = bottomSpace\n    }\n\n    setListBoxRect({\n      top,\n      left: rect.left + window.pageXOffset,\n      height,\n    })\n    setTriggerWidth(rect.width)\n  }, [listBoxRef, triggerRef])\n\n  const activeRef = useRef<HTMLButtonElement>(null)\n\n  useEffect(() => {\n    // actionOption の要素が表示される位置までリストボックス内をスクロールさせる\n    if (\n      !activeRef.current ||\n      !listBoxRef.current ||\n      activeOption === null ||\n      navigationType !== 'key'\n    ) {\n      return\n    }\n\n    const activeRect = activeRef.current.getBoundingClientRect()\n    const containerRect = listBoxRef.current.getBoundingClientRect()\n\n    if (activeRect.top < containerRect.top) {\n      listBoxRef.current.scrollTop -= containerRect.top - activeRect.top\n    } else if (activeRect.bottom > containerRect.bottom) {\n      listBoxRef.current.scrollTop += activeRect.bottom - containerRect.bottom\n    }\n  }, [activeOption, listBoxRef, navigationType])\n\n  useEnhancedEffect(() => {\n    if (isExpanded) {\n      // options の更新毎に座標を再計算する\n      calculateRect()\n    }\n  }, [calculateRect, isExpanded, options])\n\n  const onKeyDownListBox = useCallback(\n    (e: KeyboardEvent<HTMLElement>) => {\n      setNavigationType('key')\n\n      if (KEY_DOWN_REGEX.test(e.key)) {\n        e.stopPropagation()\n        moveActiveOptionIndex(activeOption, 1)\n      } else if (KEY_UP_REGEX.test(e.key)) {\n        e.stopPropagation()\n        moveActiveOptionIndex(activeOption, -1)\n      } else if (e.key === 'Enter') {\n        if (activeOption === null) {\n          return\n        }\n\n        e.stopPropagation()\n\n        if (!activeOption.isNew) {\n          onSelect(activeOption.item)\n        } else if (onAdd) {\n          onAdd(activeOption.item.value)\n        }\n      } else {\n        setActiveOption(null)\n      }\n    },\n    [activeOption, moveActiveOptionIndex, onAdd, onSelect, setActiveOption],\n  )\n\n  const { createPortal } = usePortal()\n  const listBoxId = useId()\n  const { items: partialOptions, renderIntersection } = usePartialRendering({\n    items: options,\n    minLength: useMemo(\n      () => (activeOption === null ? 0 : options.indexOf(activeOption)) + 1,\n      [activeOption, options],\n    ),\n  })\n\n  const handleAdd = useMemo(\n    () =>\n      onAdd\n        ? (option: ComboboxOption<T>) => {\n            // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n            // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n            requestAnimationFrame(() => {\n              onAdd(option.item.value)\n            })\n          }\n        : undefined,\n    [onAdd],\n  )\n  const handleSelect = useCallback(\n    (option: ComboboxOption<T>) => {\n      onSelect(option.item)\n    },\n    [onSelect],\n  )\n  const handleHoverOption = useCallback(\n    (option: ComboboxOption<T>) => {\n      setNavigationType('pointer')\n      setActiveOption(option)\n    },\n    [setActiveOption],\n  )\n\n  const wrapperStyle = useMemo(() => {\n    const { top, left } = listBoxRect\n\n    return {\n      top: `${top}px`,\n      left: `${left}px`,\n      width: `${triggerWidth}px`,\n    }\n  }, [listBoxRect, triggerWidth])\n  const dropdownListStyle = useMemo(() => {\n    const { left, height } = listBoxRect\n    const dropdownListWidth = dropdownWidth || triggerWidth\n\n    return {\n      width: typeof dropdownListWidth === 'string' ? dropdownListWidth : `${dropdownListWidth}px`,\n      maxWidth: `calc(100vw - ${left}px - ${theme.spacingByChar(0.5)})`,\n      height: height ? `${height}px` : undefined,\n    }\n  }, [listBoxRect, triggerWidth, dropdownWidth, theme])\n\n  const classNames = useMemo(() => {\n    const { wrapper, dropdownList, helpMessage, loaderWrapper, noItems } = classNameGenerator()\n\n    return {\n      wrapper: wrapper(),\n      dropdownList: dropdownList(),\n      helpMessage: helpMessage(),\n      loaderWrapper: loaderWrapper(),\n      noItems: noItems(),\n    }\n  }, [])\n\n  const texts = useMemo(\n    () => ({\n      loadingText: localize({ id: 'smarthr-ui/Combobox/loadingText', defaultText: '処理中' }),\n      noResultText:\n        orgNoResultText ??\n        localize({\n          id: 'smarthr-ui/Combobox/noResultsText',\n          defaultText: '一致する選択肢がありません。',\n        }),\n    }),\n    [orgNoResultText, localize],\n  )\n\n  const renderListBox = useCallback(\n    () =>\n      createPortal(\n        <div className={classNames.wrapper} style={wrapperStyle}>\n          {isExpanded && isLoading && (\n            <VisuallyHiddenText role=\"status\">{texts.loadingText}</VisuallyHiddenText>\n          )}\n          <Scroller\n            id={listBoxId}\n            ref={listBoxRef}\n            role=\"listbox\"\n            aria-hidden={!isExpanded}\n            className={classNames.dropdownList}\n            style={dropdownListStyle}\n          >\n            {dropdownHelpMessage && (\n              <Text\n                className={classNames.helpMessage}\n                icon={<FaCircleInfoIcon color=\"TEXT_GREY\" />}\n                as=\"p\"\n              >\n                {dropdownHelpMessage}\n              </Text>\n            )}\n            {isExpanded ? (\n              isLoading ? (\n                <div className={classNames.loaderWrapper}>\n                  <Loader aria-hidden />\n                </div>\n              ) : options.length === 0 ? (\n                <p role=\"alert\" aria-live=\"polite\" className={classNames.noItems}>\n                  {texts.noResultText}\n                </p>\n              ) : (\n                partialOptions.map((option) => (\n                  <ItemButton\n                    key={option.id}\n                    option={option}\n                    onAdd={handleAdd}\n                    onSelect={handleSelect}\n                    onMouseOver={handleHoverOption}\n                    activeRef={option.id === activeOption?.id ? activeRef : undefined}\n                  />\n                ))\n              )\n            ) : null}\n            {renderIntersection()}\n          </Scroller>\n        </div>,\n      ),\n    [\n      activeOption?.id,\n      renderIntersection,\n      partialOptions,\n      options.length,\n      isExpanded,\n      isLoading,\n      dropdownHelpMessage,\n      listBoxId,\n      texts,\n      handleAdd,\n      handleHoverOption,\n      handleSelect,\n      classNames,\n      dropdownListStyle,\n      wrapperStyle,\n      createPortal,\n    ],\n  )\n\n  return {\n    renderListBox,\n    activeOption,\n    onKeyDownListBox,\n    listBoxId,\n    listBoxRef,\n  }\n}\n"],"names":["tv","_jsxs","_jsx","ItemButton"],"mappings":"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"}
+{"version":3,"file":"useListbox.js","sources":["../../../src/components/Combobox/useListbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type KeyboardEvent,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useEnhancedEffect } from '../../hooks/useEnhancedEffect'\nimport { usePortal } from '../../hooks/usePortal'\nimport { useTheme } from '../../hooks/useTheme'\nimport { useIntl } from '../../intl'\nimport { FaCircleInfoIcon } from '../Icon'\nimport { Loader } from '../Loader'\nimport { Scroller } from '../Scroller'\nimport { Text } from '../Text'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nimport { ItemButton } from './ItemButton'\nimport { useActiveOption } from './useActiveOption'\nimport { usePartialRendering } from './usePartialRendering'\n\nimport type { ComboboxItem, ComboboxOption } from './types'\n\ntype Props<T> = {\n  options: Array<ComboboxOption<T>>\n  dropdownHelpMessage?: ReactNode\n  dropdownWidth?: string | number\n  onAdd?: (label: string) => void\n  onSelect: (item: ComboboxItem<T>) => void\n  isExpanded: boolean\n  isLoading?: boolean\n  triggerRef: RefObject<HTMLElement>\n  /** 検索結果が0件の時に表示するコンテンツ */\n  noResultText?: ReactNode\n}\n\ntype Rect = {\n  top: number\n  left: number\n  height?: number\n}\n\nconst KEY_DOWN_REGEX = /^(Arrow)?Down$/\nconst KEY_UP_REGEX = /^(Arrow)?Up/\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'shr-absolute',\n    dropdownList: [\n      'smarthr-ui-Combobox-dropdownList',\n      'shr-absolute shr-z-overlap shr-box-border shr-min-w-full shr-rounded-m shr-bg-white shr-py-0.5 shr-shadow-layer-3',\n      /* 縦スクロールに気づきやすくするために8個目のアイテムが半分見切れるように max-height を算出\n      = (アイテムのフォントサイズ + アイテムの上下padding) * 7.5 + コンテナの上padding */\n      'shr-max-h-[calc((theme(fontSize.base)_+_theme(spacing[0.5])_*_2)_*_7.5_+_theme(spacing[0.5]))]',\n      'aria-hidden:shr-hidden',\n    ],\n    helpMessage:\n      'shr-whitespace-[initial] shr-border-b-shorthand shr-mx-0.5 shr-mb-0.5 shr-mt-0 shr-px-0.5 shr-pb-0.5 shr-pt-0 shr-text-sm',\n    loaderWrapper: 'shr-flex shr-items-center shr-justify-center shr-p-1',\n    noItems: 'smarthr-ui-Combobox-noItems shr-my-0 shr-bg-white shr-px-1 shr-py-0.5 shr-text-base',\n  },\n})\n\nexport const useListbox = <T,>({\n  options,\n  dropdownHelpMessage,\n  dropdownWidth,\n  onAdd,\n  onSelect,\n  isExpanded,\n  isLoading,\n  triggerRef,\n  noResultText: orgNoResultText,\n}: Props<T>) => {\n  const theme = useTheme()\n  const [navigationType, setNavigationType] = useState<'pointer' | 'key'>('pointer')\n  const { activeOption, setActiveOption, moveActiveOptionIndex } = useActiveOption({ options })\n  const { localize } = useIntl()\n\n  useEffect(() => {\n    // 閉じたときに activeOption を初期化\n    if (!isExpanded) {\n      setActiveOption(null)\n    }\n  }, [isExpanded, setActiveOption])\n\n  const listBoxRef = useRef<HTMLDivElement>(null)\n  const [listBoxRect, setListBoxRect] = useState<Rect>({\n    top: 0,\n    left: 0,\n  })\n  // HINT: calculateRectで同時に計算するとwidthの幅が変更されるタイミングの問題でlistBoxHeightが変化する場合がある\n  const [triggerWidth, setTriggerWidth] = useState(0)\n\n  useEffect(() => {\n    if (!triggerRef.current) {\n      return\n    }\n\n    const rect = triggerRef.current.getBoundingClientRect()\n\n    setTriggerWidth(rect.width)\n  }, [isExpanded, triggerRef])\n\n  const calculateRect = useCallback(() => {\n    if (!listBoxRef.current || !triggerRef.current) {\n      return\n    }\n    const rect = triggerRef.current.getBoundingClientRect()\n    const bottomSpace = window.innerHeight - rect.bottom\n    const topSpace = rect.top\n    const listBoxHeight = Math.min(\n      listBoxRef.current.scrollHeight,\n      parseInt(getComputedStyle(listBoxRef.current).maxHeight, 10),\n    )\n    const offset = 2\n\n    let top = 0\n    let height: number | undefined = undefined\n\n    if (bottomSpace >= listBoxHeight) {\n      // 下側に十分なスペースがある場合は下側に通常表示\n      top = rect.top + rect.height - offset + window.pageYOffset\n    } else if (topSpace >= listBoxHeight) {\n      // 上側に十分なスペースがある場合は上側に通常表示\n      top = rect.top - listBoxHeight + offset + window.pageYOffset\n    } else if (topSpace > bottomSpace) {\n      // 上下に十分なスペースがなく、上側の方がスペースが大きい場合は上側に縮めて表示\n      top = rect.top - topSpace + offset + window.pageYOffset\n      height = topSpace\n    } else {\n      // 下側に縮めて表示\n      top = rect.top + rect.height - offset + window.pageYOffset\n      height = bottomSpace\n    }\n\n    setListBoxRect({\n      top,\n      left: rect.left + window.pageXOffset,\n      height,\n    })\n    setTriggerWidth(rect.width)\n  }, [listBoxRef, triggerRef])\n\n  const activeRef = useRef<HTMLButtonElement>(null)\n\n  useEffect(() => {\n    // actionOption の要素が表示される位置までリストボックス内をスクロールさせる\n    if (\n      !activeRef.current ||\n      !listBoxRef.current ||\n      activeOption === null ||\n      navigationType !== 'key'\n    ) {\n      return\n    }\n\n    const activeRect = activeRef.current.getBoundingClientRect()\n    const containerRect = listBoxRef.current.getBoundingClientRect()\n\n    if (activeRect.top < containerRect.top) {\n      listBoxRef.current.scrollTop -= containerRect.top - activeRect.top\n    } else if (activeRect.bottom > containerRect.bottom) {\n      listBoxRef.current.scrollTop += activeRect.bottom - containerRect.bottom\n    }\n  }, [activeOption, listBoxRef, navigationType])\n\n  useEnhancedEffect(() => {\n    if (isExpanded) {\n      // options の更新毎に座標を再計算する\n      calculateRect()\n    }\n  }, [calculateRect, isExpanded, options])\n\n  const onKeyDownListBox = useCallback(\n    (e: KeyboardEvent<HTMLElement>) => {\n      setNavigationType('key')\n\n      if (KEY_DOWN_REGEX.test(e.key)) {\n        e.stopPropagation()\n        moveActiveOptionIndex(activeOption, 1)\n      } else if (KEY_UP_REGEX.test(e.key)) {\n        e.stopPropagation()\n        moveActiveOptionIndex(activeOption, -1)\n      } else if (e.key === 'Enter') {\n        if (activeOption === null) {\n          return\n        }\n\n        e.stopPropagation()\n\n        if (!activeOption.isNew) {\n          onSelect(activeOption.item)\n        } else if (onAdd) {\n          onAdd(activeOption.item.value)\n        }\n      } else {\n        setActiveOption(null)\n      }\n    },\n    [activeOption, moveActiveOptionIndex, onAdd, onSelect, setActiveOption],\n  )\n\n  const { createPortal } = usePortal()\n  const listBoxId = useId()\n  const { items: partialOptions, renderIntersection } = usePartialRendering({\n    items: options,\n    minLength: useMemo(\n      () => (activeOption === null ? 0 : options.indexOf(activeOption)) + 1,\n      [activeOption, options],\n    ),\n  })\n\n  const handleAdd = useMemo(\n    () =>\n      onAdd\n        ? (option: ComboboxOption<T>) => {\n            // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n            // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n            requestAnimationFrame(() => {\n              onAdd(option.item.value)\n            })\n          }\n        : undefined,\n    [onAdd],\n  )\n  const handleSelect = useCallback(\n    (option: ComboboxOption<T>) => {\n      onSelect(option.item)\n    },\n    [onSelect],\n  )\n  const handleHoverOption = useCallback(\n    (option: ComboboxOption<T>) => {\n      setNavigationType('pointer')\n      setActiveOption(option)\n    },\n    [setActiveOption],\n  )\n\n  const wrapperStyle = useMemo(() => {\n    const { top, left } = listBoxRect\n\n    return {\n      top: `${top}px`,\n      left: `${left}px`,\n      width: `${triggerWidth}px`,\n    }\n  }, [listBoxRect, triggerWidth])\n  const dropdownListStyle = useMemo(() => {\n    const { left, height } = listBoxRect\n    const dropdownListWidth = dropdownWidth || triggerWidth\n\n    return {\n      width: typeof dropdownListWidth === 'string' ? dropdownListWidth : `${dropdownListWidth}px`,\n      maxWidth: `calc(100vw - ${left}px - ${theme.spacingByChar(0.5)})`,\n      height: height ? `${height}px` : undefined,\n    }\n  }, [listBoxRect, triggerWidth, dropdownWidth, theme])\n\n  const classNames = useMemo(() => {\n    const { wrapper, dropdownList, helpMessage, loaderWrapper, noItems } = classNameGenerator()\n\n    return {\n      wrapper: wrapper(),\n      dropdownList: dropdownList(),\n      helpMessage: helpMessage(),\n      loaderWrapper: loaderWrapper(),\n      noItems: noItems(),\n    }\n  }, [])\n\n  const texts = useMemo(\n    () => ({\n      loadingText: localize({ id: 'smarthr-ui/Combobox/loadingText', defaultText: '処理中' }),\n      noResultText:\n        orgNoResultText ??\n        localize({\n          id: 'smarthr-ui/Combobox/noResultsText',\n          defaultText: '一致する選択肢がありません。',\n        }),\n    }),\n    [orgNoResultText, localize],\n  )\n\n  const renderListBox = useCallback(\n    () =>\n      createPortal(\n        <div className={classNames.wrapper} style={wrapperStyle}>\n          {isExpanded && isLoading && (\n            <VisuallyHiddenText role=\"status\">{texts.loadingText}</VisuallyHiddenText>\n          )}\n          <Scroller\n            id={listBoxId}\n            ref={listBoxRef}\n            role=\"listbox\"\n            aria-hidden={!isExpanded}\n            className={classNames.dropdownList}\n            style={dropdownListStyle}\n          >\n            {dropdownHelpMessage && (\n              <Text\n                className={classNames.helpMessage}\n                icon={<FaCircleInfoIcon color=\"TEXT_GREY\" />}\n                as=\"p\"\n              >\n                {dropdownHelpMessage}\n              </Text>\n            )}\n            {isExpanded ? (\n              isLoading ? (\n                <div className={classNames.loaderWrapper}>\n                  <Loader aria-hidden />\n                </div>\n              ) : options.length === 0 ? (\n                <p role=\"alert\" aria-live=\"polite\" className={classNames.noItems}>\n                  {texts.noResultText}\n                </p>\n              ) : (\n                partialOptions.map((option) => (\n                  <ItemButton\n                    key={option.id}\n                    option={option}\n                    onAdd={handleAdd}\n                    onSelect={handleSelect}\n                    onMouseOver={handleHoverOption}\n                    activeRef={option.id === activeOption?.id ? activeRef : undefined}\n                  />\n                ))\n              )\n            ) : null}\n            {renderIntersection()}\n          </Scroller>\n        </div>,\n      ),\n    [\n      activeOption?.id,\n      renderIntersection,\n      partialOptions,\n      options.length,\n      isExpanded,\n      isLoading,\n      dropdownHelpMessage,\n      listBoxId,\n      texts,\n      handleAdd,\n      handleHoverOption,\n      handleSelect,\n      classNames,\n      dropdownListStyle,\n      wrapperStyle,\n      createPortal,\n    ],\n  )\n\n  return {\n    renderListBox,\n    activeOption,\n    onKeyDownListBox,\n    listBoxId,\n    listBoxRef,\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkDA;AACA;AAEA;AACE;AACE;AACA;;;AAGE;AAC0D;;;AAG3D;AACD;AAEA;AACA;AACD;AACF;AAEM;AAWL;;AAEA;AACA;;;;;;AAOA;AAEA;AACA;AACE;AACA;AACD;;;;AAKC;;;;AAMA;AACF;AAEA;;;;;;AAME;;;;;AAUA;;AAEE;;AACK;;AAEL;;AACK;;AAEL;;;;;AAIA;;;AAIF;;AAEE;;AAED;AACD;AACF;AAEA;;;;;AAOI;;;;;;;AAUA;;;AAEA;;;;;;AAOA;;;AAIJ;;;;AAMM;;;;AAGA;;AACK;AACL;;;;AAMA;AACE;;;AAEA;;;;;;AAKN;AAIF;AACA;;AAEE;AACA;AAID;AAED;AAGM;;;;AAIM;AACF;;AAEJ;AAGN;AAEI;AACF;AAGF;;;AAIE;AAIF;AACE;;;;;;AAOF;AACA;AACE;AACA;;AAGE;;;;;AAMJ;AACE;;;;;;;;;AAWF;AAEI;AACA;AAEE;AACE;AACA;;AAEL;;AAuDC;;;AAGA;;;;;;;;;;;;;AAaD;;;;;;;;AAUL;;"}

package/lib/components/DefinitionList/DefinitionListItem.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/lib/components/DefinitionList/DefinitionListItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DefinitionListItem.cjs","sources":["../../../src/components/DefinitionList/DefinitionListItem.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  isValidElement,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../hooks/useTheme'\nimport { Stack } from '../Layout'\nimport { Text } from '../Text'\n\ntype ObjectTermType = {\n  text: ReactNode\n  styleType?: 'blockTitle' | 'subBlockTitle' | 'subSubBlockTitle'\n}\ntype AbstractProps = PropsWithChildren<{\n  term: ReactNode | ObjectTermType\n  fullWidth?: boolean\n  maxColumns?: number\n}>\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-DefinitionListItem shr-border-b-shorthand shr-min-w-[12em] shr-grow shr-border-dotted',\n      'contrast-more:shr-border-b-high-contrast',\n    ],\n    term: 'smarthr-ui-DefinitionListItem-term',\n    description:\n      'smarthr-ui-DefinitionListItem-description shr-ms-[initial] shr-min-h-[calc(1em*theme(lineHeight.normal))] shr-pb-0.25',\n  },\n  variants: {\n    fullWidth: {\n      true: {\n        wrapper: 'shr-basis-full',\n      },\n    },\n  },\n})\n\nexport const DefinitionListItem: FC<Props> = ({\n  term: orgTerm,\n  children,\n  maxColumns,\n  fullWidth,\n  className,\n}) => {\n  const theme = useTheme()\n  // HINT: ReactNodeとObjectのどちらかを判定\n  // typeofはnullの場合もobject判定されてしまうため念の為falsyで判定\n  // ReactNodeの一部であるReactElementもobjectとして判定されてしまうためisValidElementで判定\n  const term: ObjectTermType =\n    !orgTerm || typeof orgTerm !== 'object' || isValidElement(orgTerm)\n      ? {\n          text: orgTerm as ReactNode,\n        }\n      : (orgTerm as ObjectTermType)\n\n  const classNames = useMemo(() => {\n    const cs = classNameGenerator()\n\n    return {\n      wrapper: cs.wrapper({ fullWidth, className }),\n      term: cs.term(),\n      description: cs.description(),\n    }\n  }, [className, fullWidth])\n  const style = useMemo(\n    () => ({\n      flexBasis:\n        // fullWidth の方が強い\n        !fullWidth && maxColumns\n          ? `calc((100% - ${theme.spacingByChar(1.5)} * ${maxColumns - 1}) / ${maxColumns})`\n          : undefined,\n    }),\n    [fullWidth, maxColumns, theme],\n  )\n\n  return (\n    <Stack gap={0.25} className={classNames.wrapper} style={style}>\n      <DefinitionTerm styleType={term.styleType} className={classNames.term}>\n        {term.text}\n      </DefinitionTerm>\n      <Text as=\"dd\" size=\"M\" color=\"TEXT_BLACK\" leading=\"NORMAL\" className={classNames.description}>\n        {children}\n      </Text>\n    </Stack>\n  )\n}\n\nconst DefinitionTerm = memo<\n  PropsWithChildren<{ styleType: ObjectTermType['styleType']; className: string }>\n>(({ styleType = 'subBlockTitle', className, children }) => (\n  <Text as=\"dt\" leading=\"TIGHT\" styleType={styleType} className={className}>\n    {children}\n  </Text>\n))\n"],"names":["tv","useTheme","isValidElement","useMemo","_jsxs","Stack","_jsx","Text","memo"],"mappings":";;;;;;;;;;;;;;AA0BA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;YACP,kGAAkG;YAClG,0CAA0C;AAC3C,SAAA;AACD,QAAA,IAAI,EAAE,oCAAoC;AAC1C,QAAA,WAAW,EACT,uHAAuH;AAC1H,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE;AACJ,gBAAA,OAAO,EAAE,gBAAgB;AAC1B,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,kBAAkB,GAAc,CAAC,EAC5C,IAAI,EAAE,OAAO,EACb,QAAQ,EACR,UAAU,EACV,SAAS,EACT,SAAS,GACV,KAAI;AACH,IAAA,MAAM,KAAK,GAAGC,uBAAQ,EAAE;;;;AAIxB,IAAA,MAAM,IAAI,GACR,CAAC,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAIC,oBAAc,CAAC,OAAO;AAC/D,UAAE;AACE,YAAA,IAAI,EAAE,OAAoB;AAC3B;UACA,OAA0B;AAEjC,IAAA,MAAM,UAAU,GAAGC,aAAO,CAAC,MAAK;AAC9B,QAAA,MAAM,EAAE,GAAG,kBAAkB,EAAE;QAE/B,OAAO;YACL,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAC7C,YAAA,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE;AACf,YAAA,WAAW,EAAE,EAAE,CAAC,WAAW,EAAE;SAC9B;AACH,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAC1B,IAAA,MAAM,KAAK,GAAGA,aAAO,CACnB,OAAO;QACL,SAAS;;QAEP,CAAC,SAAS,IAAI;AACZ,cAAE,CAAA,aAAA,EAAgB,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA,GAAA,EAAM,UAAU,GAAG,CAAC,CAAA,IAAA,EAAO,UAAU,CAAA,CAAA;AAC/E,cAAE,SAAS;KAChB,CAAC,EACF,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAC,CAC/B;AAED,IAAA,QACEC,eAAA,CAACC,mCAAK,EAAA,EAAC,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAA,QAAA,EAAA,CAC3DC,cAAA,CAAC,cAAc,EAAA,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC,IAAI,EAAA,QAAA,EAClE,IAAI,CAAC,IAAI,EAAA,CACK,EACjBA,cAAA,CAACC,yBAAI,EAAA,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,YAAY,EAAC,OAAO,EAAC,QAAQ,EAAC,SAAS,EAAE,UAAU,CAAC,WAAW,EAAA,QAAA,EACzF,QAAQ,EAAA,CACJ,CAAA,EAAA,CACD;AAEZ;AAEA,MAAM,cAAc,GAAGC,UAAI,CAEzB,CAAC,EAAE,SAAS,GAAG,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,MACrDF,cAAA,CAACC,yBAAI,EAAA,EAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAA,QAAA,EACrE,QAAQ,EAAA,CACJ,CACR,CAAC;;;;"}
+{"version":3,"file":"DefinitionListItem.cjs","sources":["../../../src/components/DefinitionList/DefinitionListItem.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  isValidElement,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../hooks/useTheme'\nimport { Stack } from '../Layout'\nimport { Text } from '../Text'\n\ntype ObjectTermType = {\n  text: ReactNode\n  styleType?: 'blockTitle' | 'subBlockTitle' | 'subSubBlockTitle'\n}\ntype AbstractProps = PropsWithChildren<{\n  term: ReactNode | ObjectTermType\n  fullWidth?: boolean\n  maxColumns?: number\n}>\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-DefinitionListItem shr-border-b-shorthand shr-min-w-[12em] shr-grow shr-border-dotted',\n      'contrast-more:shr-border-b-high-contrast',\n    ],\n    term: 'smarthr-ui-DefinitionListItem-term',\n    description:\n      'smarthr-ui-DefinitionListItem-description shr-ms-[initial] shr-min-h-[calc(1em*theme(lineHeight.normal))] shr-pb-0.25',\n  },\n  variants: {\n    fullWidth: {\n      true: {\n        wrapper: 'shr-basis-full',\n      },\n    },\n  },\n})\n\nexport const DefinitionListItem: FC<Props> = ({\n  term: orgTerm,\n  children,\n  maxColumns,\n  fullWidth,\n  className,\n}) => {\n  const theme = useTheme()\n  // HINT: ReactNodeとObjectのどちらかを判定\n  // typeofはnullの場合もobject判定されてしまうため念の為falsyで判定\n  // ReactNodeの一部であるReactElementもobjectとして判定されてしまうためisValidElementで判定\n  const term: ObjectTermType =\n    !orgTerm || typeof orgTerm !== 'object' || isValidElement(orgTerm)\n      ? {\n          text: orgTerm as ReactNode,\n        }\n      : (orgTerm as ObjectTermType)\n\n  const classNames = useMemo(() => {\n    const cs = classNameGenerator()\n\n    return {\n      wrapper: cs.wrapper({ fullWidth, className }),\n      term: cs.term(),\n      description: cs.description(),\n    }\n  }, [className, fullWidth])\n  const style = useMemo(\n    () => ({\n      flexBasis:\n        // fullWidth の方が強い\n        !fullWidth && maxColumns\n          ? `calc((100% - ${theme.spacingByChar(1.5)} * ${maxColumns - 1}) / ${maxColumns})`\n          : undefined,\n    }),\n    [fullWidth, maxColumns, theme],\n  )\n\n  return (\n    <Stack gap={0.25} className={classNames.wrapper} style={style}>\n      <DefinitionTerm styleType={term.styleType} className={classNames.term}>\n        {term.text}\n      </DefinitionTerm>\n      <Text as=\"dd\" size=\"M\" color=\"TEXT_BLACK\" leading=\"NORMAL\" className={classNames.description}>\n        {children}\n      </Text>\n    </Stack>\n  )\n}\n\nconst DefinitionTerm = memo<\n  PropsWithChildren<{ styleType: ObjectTermType['styleType']; className: string }>\n>(({ styleType = 'subBlockTitle', className, children }) => (\n  <Text as=\"dt\" leading=\"TIGHT\" styleType={styleType} className={className}>\n    {children}\n  </Text>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA4BA;AACE;AACE;;;AAGC;AACD;AACA;AAED;AACD;AACE;AACE;AACE;AACD;AACF;AACF;AACF;AAEM;AAOL;;;;AAIA;AAEI;AACI;AACD;;AAGP;AACE;;;AAIE;AACA;;AAEJ;AACA;;;;AAKQ;AACA;;AAKR;AAUF;AAEA;;"}

package/lib/components/DefinitionList/DefinitionListItem.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo, isValidElement, useMemo } from 'react';
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';

package/lib/components/DefinitionList/DefinitionListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefinitionListItem.js","sources":["../../../src/components/DefinitionList/DefinitionListItem.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  isValidElement,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../hooks/useTheme'\nimport { Stack } from '../Layout'\nimport { Text } from '../Text'\n\ntype ObjectTermType = {\n  text: ReactNode\n  styleType?: 'blockTitle' | 'subBlockTitle' | 'subSubBlockTitle'\n}\ntype AbstractProps = PropsWithChildren<{\n  term: ReactNode | ObjectTermType\n  fullWidth?: boolean\n  maxColumns?: number\n}>\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-DefinitionListItem shr-border-b-shorthand shr-min-w-[12em] shr-grow shr-border-dotted',\n      'contrast-more:shr-border-b-high-contrast',\n    ],\n    term: 'smarthr-ui-DefinitionListItem-term',\n    description:\n      'smarthr-ui-DefinitionListItem-description shr-ms-[initial] shr-min-h-[calc(1em*theme(lineHeight.normal))] shr-pb-0.25',\n  },\n  variants: {\n    fullWidth: {\n      true: {\n        wrapper: 'shr-basis-full',\n      },\n    },\n  },\n})\n\nexport const DefinitionListItem: FC<Props> = ({\n  term: orgTerm,\n  children,\n  maxColumns,\n  fullWidth,\n  className,\n}) => {\n  const theme = useTheme()\n  // HINT: ReactNodeとObjectのどちらかを判定\n  // typeofはnullの場合もobject判定されてしまうため念の為falsyで判定\n  // ReactNodeの一部であるReactElementもobjectとして判定されてしまうためisValidElementで判定\n  const term: ObjectTermType =\n    !orgTerm || typeof orgTerm !== 'object' || isValidElement(orgTerm)\n      ? {\n          text: orgTerm as ReactNode,\n        }\n      : (orgTerm as ObjectTermType)\n\n  const classNames = useMemo(() => {\n    const cs = classNameGenerator()\n\n    return {\n      wrapper: cs.wrapper({ fullWidth, className }),\n      term: cs.term(),\n      description: cs.description(),\n    }\n  }, [className, fullWidth])\n  const style = useMemo(\n    () => ({\n      flexBasis:\n        // fullWidth の方が強い\n        !fullWidth && maxColumns\n          ? `calc((100% - ${theme.spacingByChar(1.5)} * ${maxColumns - 1}) / ${maxColumns})`\n          : undefined,\n    }),\n    [fullWidth, maxColumns, theme],\n  )\n\n  return (\n    <Stack gap={0.25} className={classNames.wrapper} style={style}>\n      <DefinitionTerm styleType={term.styleType} className={classNames.term}>\n        {term.text}\n      </DefinitionTerm>\n      <Text as=\"dd\" size=\"M\" color=\"TEXT_BLACK\" leading=\"NORMAL\" className={classNames.description}>\n        {children}\n      </Text>\n    </Stack>\n  )\n}\n\nconst DefinitionTerm = memo<\n  PropsWithChildren<{ styleType: ObjectTermType['styleType']; className: string }>\n>(({ styleType = 'subBlockTitle', className, children }) => (\n  <Text as=\"dt\" leading=\"TIGHT\" styleType={styleType} className={className}>\n    {children}\n  </Text>\n))\n"],"names":["tv","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;AA0BA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;YACP,kGAAkG;YAClG,0CAA0C;AAC3C,SAAA;AACD,QAAA,IAAI,EAAE,oCAAoC;AAC1C,QAAA,WAAW,EACT,uHAAuH;AAC1H,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE;AACJ,gBAAA,OAAO,EAAE,gBAAgB;AAC1B,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,kBAAkB,GAAc,CAAC,EAC5C,IAAI,EAAE,OAAO,EACb,QAAQ,EACR,UAAU,EACV,SAAS,EACT,SAAS,GACV,KAAI;AACH,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;;;;AAIxB,IAAA,MAAM,IAAI,GACR,CAAC,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,cAAc,CAAC,OAAO;AAC/D,UAAE;AACE,YAAA,IAAI,EAAE,OAAoB;AAC3B;UACA,OAA0B;AAEjC,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAK;AAC9B,QAAA,MAAM,EAAE,GAAG,kBAAkB,EAAE;QAE/B,OAAO;YACL,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAC7C,YAAA,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE;AACf,YAAA,WAAW,EAAE,EAAE,CAAC,WAAW,EAAE;SAC9B;AACH,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAC1B,IAAA,MAAM,KAAK,GAAG,OAAO,CACnB,OAAO;QACL,SAAS;;QAEP,CAAC,SAAS,IAAI;AACZ,cAAE,CAAA,aAAA,EAAgB,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA,GAAA,EAAM,UAAU,GAAG,CAAC,CAAA,IAAA,EAAO,UAAU,CAAA,CAAA;AAC/E,cAAE,SAAS;KAChB,CAAC,EACF,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAC,CAC/B;AAED,IAAA,QACEC,IAAA,CAAC,KAAK,EAAA,EAAC,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAA,QAAA,EAAA,CAC3DC,GAAA,CAAC,cAAc,EAAA,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC,IAAI,EAAA,QAAA,EAClE,IAAI,CAAC,IAAI,EAAA,CACK,EACjBA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,YAAY,EAAC,OAAO,EAAC,QAAQ,EAAC,SAAS,EAAE,UAAU,CAAC,WAAW,EAAA,QAAA,EACzF,QAAQ,EAAA,CACJ,CAAA,EAAA,CACD;AAEZ;AAEA,MAAM,cAAc,GAAG,IAAI,CAEzB,CAAC,EAAE,SAAS,GAAG,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,MACrDA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAA,QAAA,EACrE,QAAQ,EAAA,CACJ,CACR,CAAC;;;;"}
+{"version":3,"file":"DefinitionListItem.js","sources":["../../../src/components/DefinitionList/DefinitionListItem.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  isValidElement,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../hooks/useTheme'\nimport { Stack } from '../Layout'\nimport { Text } from '../Text'\n\ntype ObjectTermType = {\n  text: ReactNode\n  styleType?: 'blockTitle' | 'subBlockTitle' | 'subSubBlockTitle'\n}\ntype AbstractProps = PropsWithChildren<{\n  term: ReactNode | ObjectTermType\n  fullWidth?: boolean\n  maxColumns?: number\n}>\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-DefinitionListItem shr-border-b-shorthand shr-min-w-[12em] shr-grow shr-border-dotted',\n      'contrast-more:shr-border-b-high-contrast',\n    ],\n    term: 'smarthr-ui-DefinitionListItem-term',\n    description:\n      'smarthr-ui-DefinitionListItem-description shr-ms-[initial] shr-min-h-[calc(1em*theme(lineHeight.normal))] shr-pb-0.25',\n  },\n  variants: {\n    fullWidth: {\n      true: {\n        wrapper: 'shr-basis-full',\n      },\n    },\n  },\n})\n\nexport const DefinitionListItem: FC<Props> = ({\n  term: orgTerm,\n  children,\n  maxColumns,\n  fullWidth,\n  className,\n}) => {\n  const theme = useTheme()\n  // HINT: ReactNodeとObjectのどちらかを判定\n  // typeofはnullの場合もobject判定されてしまうため念の為falsyで判定\n  // ReactNodeの一部であるReactElementもobjectとして判定されてしまうためisValidElementで判定\n  const term: ObjectTermType =\n    !orgTerm || typeof orgTerm !== 'object' || isValidElement(orgTerm)\n      ? {\n          text: orgTerm as ReactNode,\n        }\n      : (orgTerm as ObjectTermType)\n\n  const classNames = useMemo(() => {\n    const cs = classNameGenerator()\n\n    return {\n      wrapper: cs.wrapper({ fullWidth, className }),\n      term: cs.term(),\n      description: cs.description(),\n    }\n  }, [className, fullWidth])\n  const style = useMemo(\n    () => ({\n      flexBasis:\n        // fullWidth の方が強い\n        !fullWidth && maxColumns\n          ? `calc((100% - ${theme.spacingByChar(1.5)} * ${maxColumns - 1}) / ${maxColumns})`\n          : undefined,\n    }),\n    [fullWidth, maxColumns, theme],\n  )\n\n  return (\n    <Stack gap={0.25} className={classNames.wrapper} style={style}>\n      <DefinitionTerm styleType={term.styleType} className={classNames.term}>\n        {term.text}\n      </DefinitionTerm>\n      <Text as=\"dd\" size=\"M\" color=\"TEXT_BLACK\" leading=\"NORMAL\" className={classNames.description}>\n        {children}\n      </Text>\n    </Stack>\n  )\n}\n\nconst DefinitionTerm = memo<\n  PropsWithChildren<{ styleType: ObjectTermType['styleType']; className: string }>\n>(({ styleType = 'subBlockTitle', className, children }) => (\n  <Text as=\"dt\" leading=\"TIGHT\" styleType={styleType} className={className}>\n    {children}\n  </Text>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;AA4BA;AACE;AACE;;;AAGC;AACD;AACA;AAED;AACD;AACE;AACE;AACE;AACD;AACF;AACF;AACF;AAEM;AAOL;;;;AAIA;AAEI;AACI;AACD;;AAGP;AACE;;;AAIE;AACA;;AAEJ;AACA;;;;AAKQ;AACA;;AAKR;AAUF;AAEA;;"}

package/lib/components/Dropdown/DropdownContentInner.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');