smarthr-ui 82.1.0 → 83.0.0

package/esm/_virtual/index.js

@@ -1,8 +1,8 @@
 import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
-import { __require as requireLodash_merge } from './../vendor/.pnpm/lodash.merge@4.6.2/vendor/lodash.merge/index.js';
+import { __require as requireReactInnertext } from './../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.27_react@19.2.3/vendor/react-innertext/index.js';
 
-var lodash_mergeExports = requireLodash_merge();
-var _merge = /*@__PURE__*/getDefaultExportFromCjs(lodash_mergeExports);
+var reactInnertextExports = requireReactInnertext();
+var innerText = /*@__PURE__*/getDefaultExportFromCjs(reactInnertextExports);
 
-export { _merge as default };
+export { innerText as default };
 //# sourceMappingURL=index.js.map

package/esm/_virtual/index2.js

@@ -1,8 +1,8 @@
 import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
-import { __require as requireLodash_range } from './../vendor/.pnpm/lodash.range@3.2.0/vendor/lodash.range/index.js';
+import { __require as requireLodash_merge } from './../vendor/.pnpm/lodash.merge@4.6.2/vendor/lodash.merge/index.js';
 
-var lodash_rangeExports = requireLodash_range();
-var _range = /*@__PURE__*/getDefaultExportFromCjs(lodash_rangeExports);
+var lodash_mergeExports = requireLodash_merge();
+var _merge = /*@__PURE__*/getDefaultExportFromCjs(lodash_mergeExports);
 
-export { _range as default };
+export { _merge as default };
 //# sourceMappingURL=index2.js.map

package/esm/_virtual/index3.js

@@ -1,8 +1,8 @@
 import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
-import { __require as requireReactInnertext } from './../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.27_react@19.2.3/vendor/react-innertext/index.js';
+import { __require as requireLodash_range } from './../vendor/.pnpm/lodash.range@3.2.0/vendor/lodash.range/index.js';
 
-var reactInnertextExports = requireReactInnertext();
-var innerText = /*@__PURE__*/getDefaultExportFromCjs(reactInnertextExports);
+var lodash_rangeExports = requireLodash_range();
+var _range = /*@__PURE__*/getDefaultExportFromCjs(lodash_rangeExports);
 
-export { innerText as default };
+export { _range as default };
 //# sourceMappingURL=index3.js.map

package/esm/components/AppHeader/components/common/CommonButton.d.ts

@@ -10,6 +10,10 @@ export declare const commonButtonClassNameGenerator: import("tailwind-variants")
         true: null;
         false: string[];
     };
+    rounded: {
+        true: string[];
+        false: string[];
+    };
 }, undefined, string[], import("tailwind-variants/dist/config.js").TVConfig<{
     prefix: {
         true: string[];
@@ -21,6 +25,10 @@ export declare const commonButtonClassNameGenerator: import("tailwind-variants")
         true: null;
         false: string[];
     };
+    rounded: {
+        true: string[];
+        false: string[];
+    };
 }, {
     prefix: {
         true: string[];
@@ -32,6 +40,10 @@ export declare const commonButtonClassNameGenerator: import("tailwind-variants")
         true: null;
         false: string[];
     };
+    rounded: {
+        true: string[];
+        false: string[];
+    };
 }>, {
     prefix: {
         true: string[];
@@ -43,6 +55,10 @@ export declare const commonButtonClassNameGenerator: import("tailwind-variants")
         true: null;
         false: string[];
     };
+    rounded: {
+        true: string[];
+        false: string[];
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     prefix: {
         true: string[];
@@ -54,6 +70,10 @@ export declare const commonButtonClassNameGenerator: import("tailwind-variants")
         true: null;
         false: string[];
     };
+    rounded: {
+        true: string[];
+        false: string[];
+    };
 }, undefined, string[], import("tailwind-variants/dist/config.js").TVConfig<{
     prefix: {
         true: string[];
@@ -65,6 +85,10 @@ export declare const commonButtonClassNameGenerator: import("tailwind-variants")
         true: null;
         false: string[];
     };
+    rounded: {
+        true: string[];
+        false: string[];
+    };
 }, {
     prefix: {
         true: string[];
@@ -76,6 +100,10 @@ export declare const commonButtonClassNameGenerator: import("tailwind-variants")
         true: null;
         false: string[];
     };
+    rounded: {
+        true: string[];
+        false: string[];
+    };
 }>, unknown, unknown, undefined>>;
 type AnchorProps = Omit<ComponentPropsWithoutRef<'a'>, 'prefix'>;
 type ButtonProps = Omit<ComponentPropsWithoutRef<'button'>, 'prefix'>;

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

@@ -4,7 +4,7 @@ import { tv as ce } from './../../../../vendor/.pnpm/tailwind-variants@0.3.1_tai
 
 const commonButtonClassNameGenerator = ce({
     base: [
-        '[&&]:shr-box-border [&&]:shr-flex [&&]:shr-w-full [&&]:shr-cursor-pointer [&&]:shr-items-center [&&]:shr-rounded-m [&&]:shr-border-none [&&]:shr-bg-transparent [&&]:shr-px-1 [&&]:shr-py-0.5 [&&]:shr-text-base [&&]:shr-leading-normal [&&]:shr-text-black [&&]:shr-no-underline',
+        '[&&]:shr-box-border [&&]:shr-flex [&&]:shr-w-full [&&]:shr-cursor-pointer [&&]:shr-items-center [&&]:shr-border-none [&&]:shr-bg-transparent [&&]:shr-px-1 [&&]:shr-py-0.5 [&&]:shr-text-base [&&]:shr-leading-normal [&&]:shr-text-black [&&]:shr-no-underline',
         '[&&]:hover:shr-bg-white-darken',
         '[&&]:focus-visible:shr-bg-white-darken',
     ],
@@ -19,6 +19,10 @@ const commonButtonClassNameGenerator = ce({
             true: null,
             false: ['[&&]:shr-font-normal'],
         },
+        rounded: {
+            true: ['[&&]:shr-rounded-m'],
+            false: ['[&&]:shr-rounded-none'],
+        },
     },
     compoundVariants: [
         {
@@ -27,6 +31,9 @@ const commonButtonClassNameGenerator = ce({
             className: ['[&&]:shr-font-bold'],
         },
     ],
+    defaultVariants: {
+        rounded: true,
+    },
 });
 const CommonButton = memo(({ elementAs, prefix, current, boldWhenCurrent, className, children, ...rest }) => {
     const actualClassName = useMemo(() => commonButtonClassNameGenerator({

package/esm/components/AppHeader/components/common/CommonButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommonButton.js","sources":["../../../../../src/components/AppHeader/components/common/CommonButton.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nexport const commonButtonClassNameGenerator = tv({\n  base: [\n    '[&&]:shr-box-border [&&]:shr-flex [&&]:shr-w-full [&&]:shr-cursor-pointer [&&]:shr-items-center [&&]:shr-rounded-m [&&]:shr-border-none [&&]:shr-bg-transparent [&&]:shr-px-1 [&&]:shr-py-0.5 [&&]:shr-text-base [&&]:shr-leading-normal [&&]:shr-text-black [&&]:shr-no-underline',\n    '[&&]:hover:shr-bg-white-darken',\n    '[&&]:focus-visible:shr-bg-white-darken',\n  ],\n  variants: {\n    prefix: {\n      true: ['[&&]:shr-gap-0.5'],\n    },\n    current: {\n      true: ['[&&]:shr-bg-white-darken'],\n    },\n    boldWhenCurrent: {\n      true: null,\n      false: ['[&&]:shr-font-normal'],\n    },\n  },\n  compoundVariants: [\n    {\n      boldWhenCurrent: true,\n      current: true,\n      className: ['[&&]:shr-font-bold'],\n    },\n  ],\n})\n\ntype AnchorProps = Omit<ComponentPropsWithoutRef<'a'>, 'prefix'>\ntype ButtonProps = Omit<ComponentPropsWithoutRef<'button'>, 'prefix'>\n\ntype Props = (({ elementAs: 'a' } & AnchorProps) | ({ elementAs: 'button' } & ButtonProps)) & {\n  prefix?: ReactNode\n  current?: boolean\n  boldWhenCurrent?: boolean\n}\n\nexport const CommonButton = memo<Props>(\n  ({ elementAs, prefix, current, boldWhenCurrent, className, children, ...rest }) => {\n    const actualClassName = useMemo(\n      () =>\n        commonButtonClassNameGenerator({\n          prefix: !!prefix,\n          current,\n          boldWhenCurrent,\n          className,\n        }),\n      [current, prefix, boldWhenCurrent, className],\n    )\n\n    switch (elementAs) {\n      case 'a':\n        return (\n          <a {...(rest as AnchorProps)} className={actualClassName}>\n            {prefix}\n            {children}\n          </a>\n        )\n      case 'button':\n        return (\n          // eslint-disable-next-line smarthr/best-practice-for-button-element\n          <button {...(rest as ButtonProps)} className={actualClassName}>\n            {prefix}\n            {children}\n          </button>\n        )\n    }\n\n    throw new Error(elementAs satisfies never)\n  },\n)\n"],"names":["tv","_jsxs"],"mappings":";;;;AAGO,MAAM,8BAA8B,GAAGA,EAAE,CAAC;AAC/C,IAAA,IAAI,EAAE;QACJ,oRAAoR;QACpR,gCAAgC;QAChC,wCAAwC;AACzC,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,MAAM,EAAE;YACN,IAAI,EAAE,CAAC,kBAAkB,CAAC;AAC3B,SAAA;AACD,QAAA,OAAO,EAAE;YACP,IAAI,EAAE,CAAC,0BAA0B,CAAC;AACnC,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,CAAC,sBAAsB,CAAC;AAChC,SAAA;AACF,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA;AACE,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,CAAC,oBAAoB,CAAC;AAClC,SAAA;AACF,KAAA;AACF,CAAA;AAWM,MAAM,YAAY,GAAG,IAAI,CAC9B,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,KAAI;IAChF,MAAM,eAAe,GAAG,OAAO,CAC7B,MACE,8BAA8B,CAAC;QAC7B,MAAM,EAAE,CAAC,CAAC,MAAM;QAChB,OAAO;QACP,eAAe;QACf,SAAS;KACV,CAAC,EACJ,CAAC,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,CAAC,CAC9C;IAED,QAAQ,SAAS;AACf,QAAA,KAAK,GAAG;AACN,YAAA,QACEC,IAAA,CAAA,GAAA,EAAA,EAAA,GAAQ,IAAoB,EAAE,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CACrD,MAAM,EACN,QAAQ,CAAA,EAAA,CACP;AAER,QAAA,KAAK,QAAQ;YACX;;YAEEA,IAAA,CAAA,QAAA,EAAA,EAAA,GAAa,IAAoB,EAAE,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CAC1D,MAAM,EACN,QAAQ,CAAA,EAAA,CACF;;AAIf,IAAA,MAAM,IAAI,KAAK,CAAC,SAAyB,CAAC;AAC5C,CAAC;;;;"}
+{"version":3,"file":"CommonButton.js","sources":["../../../../../src/components/AppHeader/components/common/CommonButton.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nexport const commonButtonClassNameGenerator = tv({\n  base: [\n    '[&&]:shr-box-border [&&]:shr-flex [&&]:shr-w-full [&&]:shr-cursor-pointer [&&]:shr-items-center [&&]:shr-border-none [&&]:shr-bg-transparent [&&]:shr-px-1 [&&]:shr-py-0.5 [&&]:shr-text-base [&&]:shr-leading-normal [&&]:shr-text-black [&&]:shr-no-underline',\n    '[&&]:hover:shr-bg-white-darken',\n    '[&&]:focus-visible:shr-bg-white-darken',\n  ],\n  variants: {\n    prefix: {\n      true: ['[&&]:shr-gap-0.5'],\n    },\n    current: {\n      true: ['[&&]:shr-bg-white-darken'],\n    },\n    boldWhenCurrent: {\n      true: null,\n      false: ['[&&]:shr-font-normal'],\n    },\n    rounded: {\n      true: ['[&&]:shr-rounded-m'],\n      false: ['[&&]:shr-rounded-none'],\n    },\n  },\n  compoundVariants: [\n    {\n      boldWhenCurrent: true,\n      current: true,\n      className: ['[&&]:shr-font-bold'],\n    },\n  ],\n  defaultVariants: {\n    rounded: true,\n  },\n})\n\ntype AnchorProps = Omit<ComponentPropsWithoutRef<'a'>, 'prefix'>\ntype ButtonProps = Omit<ComponentPropsWithoutRef<'button'>, 'prefix'>\n\ntype Props = (({ elementAs: 'a' } & AnchorProps) | ({ elementAs: 'button' } & ButtonProps)) & {\n  prefix?: ReactNode\n  current?: boolean\n  boldWhenCurrent?: boolean\n}\n\nexport const CommonButton = memo<Props>(\n  ({ elementAs, prefix, current, boldWhenCurrent, className, children, ...rest }) => {\n    const actualClassName = useMemo(\n      () =>\n        commonButtonClassNameGenerator({\n          prefix: !!prefix,\n          current,\n          boldWhenCurrent,\n          className,\n        }),\n      [current, prefix, boldWhenCurrent, className],\n    )\n\n    switch (elementAs) {\n      case 'a':\n        return (\n          <a {...(rest as AnchorProps)} className={actualClassName}>\n            {prefix}\n            {children}\n          </a>\n        )\n      case 'button':\n        return (\n          // eslint-disable-next-line smarthr/best-practice-for-button-element\n          <button {...(rest as ButtonProps)} className={actualClassName}>\n            {prefix}\n            {children}\n          </button>\n        )\n    }\n\n    throw new Error(elementAs satisfies never)\n  },\n)\n"],"names":["tv","_jsxs"],"mappings":";;;;AAGO,MAAM,8BAA8B,GAAGA,EAAE,CAAC;AAC/C,IAAA,IAAI,EAAE;QACJ,iQAAiQ;QACjQ,gCAAgC;QAChC,wCAAwC;AACzC,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,MAAM,EAAE;YACN,IAAI,EAAE,CAAC,kBAAkB,CAAC;AAC3B,SAAA;AACD,QAAA,OAAO,EAAE;YACP,IAAI,EAAE,CAAC,0BAA0B,CAAC;AACnC,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,CAAC,sBAAsB,CAAC;AAChC,SAAA;AACD,QAAA,OAAO,EAAE;YACP,IAAI,EAAE,CAAC,oBAAoB,CAAC;YAC5B,KAAK,EAAE,CAAC,uBAAuB,CAAC;AACjC,SAAA;AACF,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA;AACE,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,CAAC,oBAAoB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,IAAI;AACd,KAAA;AACF,CAAA;AAWM,MAAM,YAAY,GAAG,IAAI,CAC9B,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,KAAI;IAChF,MAAM,eAAe,GAAG,OAAO,CAC7B,MACE,8BAA8B,CAAC;QAC7B,MAAM,EAAE,CAAC,CAAC,MAAM;QAChB,OAAO;QACP,eAAe;QACf,SAAS;KACV,CAAC,EACJ,CAAC,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,CAAC,CAC9C;IAED,QAAQ,SAAS;AACf,QAAA,KAAK,GAAG;AACN,YAAA,QACEC,IAAA,CAAA,GAAA,EAAA,EAAA,GAAQ,IAAoB,EAAE,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CACrD,MAAM,EACN,QAAQ,CAAA,EAAA,CACP;AAER,QAAA,KAAK,QAAQ;YACX;;YAEEA,IAAA,CAAA,QAAA,EAAA,EAAA,GAAa,IAAoB,EAAE,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CAC1D,MAAM,EACN,QAAQ,CAAA,EAAA,CACF;;AAIf,IAAA,MAAM,IAAI,KAAK,CAAC,SAAyB,CAAC;AAC5C,CAAC;;;;"}

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

@@ -68,6 +68,7 @@ const DropdownCustomTag = memo(({ elementAs: Component, current, className, ...r
     const actualClassName = useMemo(() => commonButtonClassNameGenerator({
         current,
         className,
+        rounded: false,
     }), [current, className]);
     return jsx(Component, { ...rest, "aria-current": current || undefined, className: actualClassName });
 });

package/esm/components/AppHeader/components/desktop/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../../../../../src/components/AppHeader/components/desktop/Navigation.tsx"],"sourcesContent":["import { type FC, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport {\n  AppNavi,\n  AppNaviAnchor,\n  AppNaviButton,\n  AppNaviCustomTag,\n  AppNaviDropdownMenuButton,\n} from '../../../AppNavi'\nimport { AnchorButton, Button } from '../../../Button'\nimport { DropdownMenuGroup } from '../../../Dropdown'\nimport { Cluster } from '../../../Layout'\nimport { commonButtonClassNameGenerator } from '../common/CommonButton'\n\nimport { ReleaseNotesDropdown } from './ReleaseNotesDropdown'\n\nimport type {\n  ChildNavigation,\n  ChildNavigationGroup,\n  NavigationButton,\n  NavigationCustomTag,\n  NavigationLink,\n  Navigation as NavigationType,\n  ReleaseNoteProps,\n} from '../../types'\n\nconst classNameGenerator = tv({\n  base: [\n    'shr-min-w-[auto] shr-overflow-x-auto',\n    'max-[751px]:!shr-hidden',\n    'data-[with-releasenote=\"true\"]:shr-pe-0',\n  ],\n})\n\ntype Props = {\n  appName: ReactNode\n  navigations: NavigationType[]\n  additionalContent: ReactNode\n  releaseNote?: ReleaseNoteProps | null\n  enableNew?: boolean\n}\n\nexport const Navigation: FC<Props> = ({\n  appName,\n  navigations,\n  additionalContent,\n  releaseNote,\n  enableNew,\n}) => {\n  const className = useMemo(() => classNameGenerator(), [])\n  const actualNavigations = useMemo(() => buildNavigations(navigations), [navigations])\n\n  return (\n    <AppNavi\n      label={enableNew ? undefined : appName}\n      displayDropdownCaret\n      additionalArea={\n        <Cluster align=\"center\" className=\"shr-flex-nowrap shr-ps-1\">\n          {additionalContent}\n          {releaseNote && <ReleaseNotesDropdown {...releaseNote} />}\n        </Cluster>\n      }\n      data-with-releasenote={!!releaseNote}\n      className={className}\n    >\n      {actualNavigations}\n    </AppNavi>\n  )\n}\n\nconst buildNavigations = (navigations: NavigationType[]) =>\n  navigations.map((navigation, index) => {\n    if ('elementAs' in navigation) {\n      const { elementAs, ...rest } = navigation\n\n      return <AppNaviCustomTag {...rest} key={index} tag={elementAs} />\n    }\n    if ('href' in navigation) {\n      return <AppNaviAnchor {...navigation} key={index} />\n    }\n    if ('childNavigations' in navigation) {\n      return (\n        <AppNaviDropdownMenuButton key={index} label={navigation.children}>\n          {buildDropdownMenu(navigation.childNavigations)}\n        </AppNaviDropdownMenuButton>\n      )\n    }\n\n    return <AppNaviButton {...navigation} key={index} />\n  })\n\nconst buildDropdownMenu = (navigations: Array<ChildNavigation | ChildNavigationGroup>) =>\n  navigations.map((navigation, index) => {\n    if ('elementAs' in navigation) {\n      return <DropdownCustomTag {...navigation} key={index} />\n    }\n    if ('href' in navigation) {\n      return <DropdownMenuAnchorButton {...navigation} key={index} />\n    }\n    if ('title' in navigation) {\n      return (\n        <DropdownMenuGroup key={index} name={navigation.title}>\n          {buildDropdownMenu(navigation.childNavigations)}\n        </DropdownMenuGroup>\n      )\n    }\n\n    return <DropdownNavigationButton {...navigation} key={index} />\n  })\n\nconst DropdownCustomTag = memo<NavigationCustomTag>(\n  ({ elementAs: Component, current, className, ...rest }) => {\n    const actualClassName = useMemo(\n      () =>\n        commonButtonClassNameGenerator({\n          current,\n          className,\n        }),\n      [current, className],\n    )\n\n    return <Component {...rest} aria-current={current || undefined} className={actualClassName} />\n  },\n)\nconst DropdownMenuAnchorButton = memo<NavigationLink>(({ current, ...rest }) => (\n  <AnchorButton {...rest} aria-current={current ? 'page' : undefined} />\n))\nconst DropdownNavigationButton = memo<NavigationButton>(({ current, ...rest }) => (\n  <Button {...rest} aria-current={current ? 'page' : undefined} />\n))\n"],"names":["tv","_jsx","_jsxs","_createElement","AnchorButton"],"mappings":"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"}
+{"version":3,"file":"Navigation.js","sources":["../../../../../src/components/AppHeader/components/desktop/Navigation.tsx"],"sourcesContent":["import { type FC, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport {\n  AppNavi,\n  AppNaviAnchor,\n  AppNaviButton,\n  AppNaviCustomTag,\n  AppNaviDropdownMenuButton,\n} from '../../../AppNavi'\nimport { AnchorButton, Button } from '../../../Button'\nimport { DropdownMenuGroup } from '../../../Dropdown'\nimport { Cluster } from '../../../Layout'\nimport { commonButtonClassNameGenerator } from '../common/CommonButton'\n\nimport { ReleaseNotesDropdown } from './ReleaseNotesDropdown'\n\nimport type {\n  ChildNavigation,\n  ChildNavigationGroup,\n  NavigationButton,\n  NavigationCustomTag,\n  NavigationLink,\n  Navigation as NavigationType,\n  ReleaseNoteProps,\n} from '../../types'\n\nconst classNameGenerator = tv({\n  base: [\n    'shr-min-w-[auto] shr-overflow-x-auto',\n    'max-[751px]:!shr-hidden',\n    'data-[with-releasenote=\"true\"]:shr-pe-0',\n  ],\n})\n\ntype Props = {\n  appName: ReactNode\n  navigations: NavigationType[]\n  additionalContent: ReactNode\n  releaseNote?: ReleaseNoteProps | null\n  enableNew?: boolean\n}\n\nexport const Navigation: FC<Props> = ({\n  appName,\n  navigations,\n  additionalContent,\n  releaseNote,\n  enableNew,\n}) => {\n  const className = useMemo(() => classNameGenerator(), [])\n  const actualNavigations = useMemo(() => buildNavigations(navigations), [navigations])\n\n  return (\n    <AppNavi\n      label={enableNew ? undefined : appName}\n      displayDropdownCaret\n      additionalArea={\n        <Cluster align=\"center\" className=\"shr-flex-nowrap shr-ps-1\">\n          {additionalContent}\n          {releaseNote && <ReleaseNotesDropdown {...releaseNote} />}\n        </Cluster>\n      }\n      data-with-releasenote={!!releaseNote}\n      className={className}\n    >\n      {actualNavigations}\n    </AppNavi>\n  )\n}\n\nconst buildNavigations = (navigations: NavigationType[]) =>\n  navigations.map((navigation, index) => {\n    if ('elementAs' in navigation) {\n      const { elementAs, ...rest } = navigation\n\n      return <AppNaviCustomTag {...rest} key={index} tag={elementAs} />\n    }\n    if ('href' in navigation) {\n      return <AppNaviAnchor {...navigation} key={index} />\n    }\n    if ('childNavigations' in navigation) {\n      return (\n        <AppNaviDropdownMenuButton key={index} label={navigation.children}>\n          {buildDropdownMenu(navigation.childNavigations)}\n        </AppNaviDropdownMenuButton>\n      )\n    }\n\n    return <AppNaviButton {...navigation} key={index} />\n  })\n\nconst buildDropdownMenu = (navigations: Array<ChildNavigation | ChildNavigationGroup>) =>\n  navigations.map((navigation, index) => {\n    if ('elementAs' in navigation) {\n      return <DropdownCustomTag {...navigation} key={index} />\n    }\n    if ('href' in navigation) {\n      return <DropdownMenuAnchorButton {...navigation} key={index} />\n    }\n    if ('title' in navigation) {\n      return (\n        <DropdownMenuGroup key={index} name={navigation.title}>\n          {buildDropdownMenu(navigation.childNavigations)}\n        </DropdownMenuGroup>\n      )\n    }\n\n    return <DropdownNavigationButton {...navigation} key={index} />\n  })\n\nconst DropdownCustomTag = memo<NavigationCustomTag>(\n  ({ elementAs: Component, current, className, ...rest }) => {\n    const actualClassName = useMemo(\n      () =>\n        commonButtonClassNameGenerator({\n          current,\n          className,\n          rounded: false,\n        }),\n      [current, className],\n    )\n\n    return <Component {...rest} aria-current={current || undefined} className={actualClassName} />\n  },\n)\nconst DropdownMenuAnchorButton = memo<NavigationLink>(({ current, ...rest }) => (\n  <AnchorButton {...rest} aria-current={current ? 'page' : undefined} />\n))\nconst DropdownNavigationButton = memo<NavigationButton>(({ current, ...rest }) => (\n  <Button {...rest} aria-current={current ? 'page' : undefined} />\n))\n"],"names":["tv","_jsx","_jsxs","_createElement","AnchorButton"],"mappings":"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"}

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

@@ -108,7 +108,7 @@ const ActualUserInfo = ({ email, empCode, firstName, lastName, tenants, currentT
     }), [localize]);
     const currentTenantName = useMemo(() => tenants?.find((tenant) => tenant.id === currentTenantId)?.name, [tenants, currentTenantId]);
     if (enableNew) {
-        return (jsxs(DropdownMenuButton, { className: classNames.dropdownMenuButton, label: jsx(DropdownMenuLabel, { firstName: firstName, lastName: lastName, email: email, accountImageUrl: accountImageUrl, currentTenantName: currentTenantName, accountImageClassName: classNames.accountImage, placeHolderImageClassName: classNames.placeholderImage }), children: [jsx(UserSummaryStack, { currentTenantName: currentTenantName, empCode: empCode, firstName: firstName, lastName: lastName, email: email, className: classNames.userSummary }), jsx(DropdownContentButton, { href: accountUrl, className: classNames.dropdownContentButton, children: translated.userSetting }), desktopAdditionalContent] }));
+        return (jsxs(DropdownMenuButton, { className: classNames.dropdownMenuButton, trigger: jsx(DropdownMenuLabel, { firstName: firstName, lastName: lastName, email: email, accountImageUrl: accountImageUrl, currentTenantName: currentTenantName, accountImageClassName: classNames.accountImage, placeHolderImageClassName: classNames.placeholderImage }), children: [jsx(UserSummaryStack, { currentTenantName: currentTenantName, empCode: empCode, firstName: firstName, lastName: lastName, email: email, className: classNames.userSummary }), jsx(DropdownContentButton, { href: accountUrl, className: classNames.dropdownContentButton, children: translated.userSetting }), desktopAdditionalContent] }));
     }
     return (jsxs(Dropdown, { children: [jsx(DisplayNameDropdownTrigger, { className: classNames.button, children: displayName }), jsxs(DropdownContent, { className: classNames.dropdownContent, children: [jsx(AccountLink, { href: accountUrl, children: translated.userSetting }), desktopAdditionalContent] })] }));
 };

package/esm/components/AppHeader/components/desktop/UserInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserInfo.js","sources":["../../../../../src/components/AppHeader/components/desktop/UserInfo.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { AnchorButton, Button } from '../../../Button'\nimport { Dropdown, DropdownContent, DropdownMenuButton, DropdownTrigger } from '../../../Dropdown'\nimport { FaCaretDownIcon, FaGearIcon, FaUserIcon } from '../../../Icon'\nimport { Cluster, Stack } from '../../../Layout'\nimport { Text } from '../../../Text'\nimport { buildDisplayName } from '../../utils'\nimport { CommonButton } from '../common/CommonButton'\nimport { Translate } from '../common/Translate'\n\nimport type { HeaderProps, UserInfoProps } from '../../types'\n\n// HeaderDropdownMenuButton と同じスタイルを適用\nconst classNameGenerator = tv({\n  slots: {\n    userSummary: [\n      'shr-relative -shr-mx-0.25 -shr-mt-0.5 shr-p-1',\n      // FIXME: smarthr-ui で DropdownMenuButton のグルーピングができるようになったら修正しましょう\n      'after:shr-absolute after:shr-inset-x-0.5 after:shr-bottom-0 after:shr-block after:shr-h-px after:shr-bg-border after:shr-content-[\"\"]',\n    ],\n    dropdownMenuButton: [\n      '[&_.smarthr-ui-DropdownMenuButton-trigger]:shr-border-transparent [&_.smarthr-ui-DropdownMenuButton-trigger]:shr-px-0.5 [&_.smarthr-ui-DropdownMenuButton-trigger]:shr-font-normal',\n    ],\n    dropdownContentButton: [\n      '[&&.smarthr-ui-AnchorButton]:shr-p-0.75 [&&.smarthr-ui-AnchorButton]:shr-py-0.75',\n      '[&&.smarthr-ui-Button]:shr-p-0.75 [&&.smarthr-ui-Button]:shr-py-0.75',\n    ],\n    button: [\n      '[&&]:shr-border-transparent [&&]:shr-font-normal [&&]:last-of-type:-shr-me-0.25',\n      '[&&]:focus-visible:shr-bg-transparent',\n      \"[&[aria-expanded='true']_.smarthr-ui-Icon:last-child]:shr-rotate-180\",\n    ],\n    dropdownContent: '[&&]:shr-whitespace-pre [&&]:shr-p-0.5',\n    accountImage: '',\n    placeholderImage: 'shr-p-0.5',\n  },\n  variants: {\n    enableNew: {\n      true: {\n        button: '[&&]:shr-px-0.5',\n      },\n      false: {\n        button:\n          '[&&]:shr-bg-transparent [&&]:shr-px-0.25 [&&]:shr-text-white [&&]:hover:shr-bg-transparent',\n      },\n    },\n  },\n  compoundSlots: [\n    {\n      slots: ['accountImage', 'placeholderImage'],\n      className:\n        'shr-border-shorthand -shr-my-1 shr-box-border shr-flex shr-size-2 shr-items-center shr-justify-center shr-rounded-full shr-bg-white',\n    },\n  ],\n})\n\ntype Props = UserInfoProps &\n  Pick<HeaderProps, 'desktopAdditionalContent' | 'tenants' | 'currentTenantId'>\n\nexport const UserInfo: FC<Props> = ({\n  arbitraryDisplayName,\n  email,\n  empCode,\n  firstName,\n  lastName,\n  accountUrl,\n  desktopAdditionalContent,\n  ...rest\n}) => {\n  const displayName = useMemo(\n    () =>\n      arbitraryDisplayName ??\n      buildDisplayName({\n        email,\n        empCode,\n        firstName,\n        lastName,\n      }),\n    [arbitraryDisplayName, email, empCode, firstName, lastName],\n  )\n\n  if (!displayName) {\n    return null\n  }\n\n  if (!accountUrl && !desktopAdditionalContent) {\n    return <span className=\"shr-text-white\">{displayName}</span>\n  }\n\n  return (\n    <ActualUserInfo\n      {...rest}\n      email={email}\n      empCode={empCode}\n      firstName={firstName}\n      lastName={lastName}\n      accountUrl={accountUrl}\n      desktopAdditionalContent={desktopAdditionalContent}\n      displayName={displayName}\n    />\n  )\n}\n\nexport const ActualUserInfo: FC<Omit<Props, 'arbitraryDisplayName'> & { displayName: string }> = ({\n  email,\n  empCode,\n  firstName,\n  lastName,\n  tenants,\n  currentTenantId,\n  accountUrl,\n  accountImageUrl,\n  desktopAdditionalContent,\n  enableNew,\n  displayName,\n}) => {\n  const classNames = useMemo(() => {\n    const {\n      userSummary,\n      dropdownMenuButton,\n      dropdownContentButton,\n      button,\n      dropdownContent,\n      accountImage,\n      placeholderImage,\n    } = classNameGenerator({\n      enableNew,\n    })\n\n    return {\n      userSummary: userSummary(),\n      dropdownMenuButton: dropdownMenuButton(),\n      dropdownContentButton: dropdownContentButton(),\n      button: button(),\n      dropdownContent: dropdownContent(),\n      accountImage: accountImage(),\n      placeholderImage: placeholderImage(),\n    }\n  }, [enableNew])\n\n  const { localize } = useIntl()\n  const translated = useMemo(\n    () => ({\n      userSetting: localize({ id: 'smarthr-ui/AppHeader/userSettings', defaultText: '個人設定' }),\n    }),\n    [localize],\n  )\n\n  const currentTenantName = useMemo(\n    () => tenants?.find((tenant) => tenant.id === currentTenantId)?.name,\n    [tenants, currentTenantId],\n  )\n\n  if (enableNew) {\n    return (\n      <DropdownMenuButton\n        className={classNames.dropdownMenuButton}\n        label={\n          <DropdownMenuLabel\n            firstName={firstName}\n            lastName={lastName}\n            email={email}\n            accountImageUrl={accountImageUrl}\n            currentTenantName={currentTenantName}\n            accountImageClassName={classNames.accountImage}\n            placeHolderImageClassName={classNames.placeholderImage}\n          />\n        }\n      >\n        <UserSummaryStack\n          currentTenantName={currentTenantName}\n          empCode={empCode}\n          firstName={firstName}\n          lastName={lastName}\n          email={email}\n          className={classNames.userSummary}\n        />\n        <DropdownContentButton href={accountUrl} className={classNames.dropdownContentButton}>\n          {translated.userSetting}\n        </DropdownContentButton>\n        {desktopAdditionalContent}\n      </DropdownMenuButton>\n    )\n  }\n\n  return (\n    <Dropdown>\n      <DisplayNameDropdownTrigger className={classNames.button}>\n        {displayName}\n      </DisplayNameDropdownTrigger>\n      <DropdownContent className={classNames.dropdownContent}>\n        <AccountLink href={accountUrl}>{translated.userSetting}</AccountLink>\n        {desktopAdditionalContent}\n      </DropdownContent>\n    </Dropdown>\n  )\n}\n\nconst DropdownMenuLabel = memo<\n  Pick<Props, 'firstName' | 'lastName' | 'email'> & {\n    accountImageUrl?: string\n    currentTenantName: ReactNode\n    accountImageClassName: string\n    placeHolderImageClassName: string\n  }\n>(\n  ({\n    firstName,\n    lastName,\n    email,\n    accountImageUrl,\n    currentTenantName,\n    accountImageClassName,\n    placeHolderImageClassName,\n  }) => {\n    const body: ReactNode[] = []\n\n    if (currentTenantName) {\n      body.push(currentTenantName)\n    }\n\n    if (firstName && lastName) {\n      body.push(`${firstName} ${lastName}`)\n    } else if (email) {\n      body.push(email)\n    }\n\n    if (body.length === 2) {\n      body.splice(1, 0, <br />)\n    }\n\n    return (\n      <Cluster as=\"span\" align=\"flex-start\">\n        {accountImageUrl ? (\n          // eslint-disable-next-line smarthr/a11y-image-has-alt-attribute, jsx-a11y/alt-text\n          <img src={accountImageUrl} className={accountImageClassName} aria-hidden />\n        ) : (\n          <span className={placeHolderImageClassName}>\n            <FaUserIcon color=\"TEXT_GREY\" />\n          </span>\n        )}\n\n        <Text size=\"XS\" leading=\"NORMAL\" className=\"-shr-my-1 shr-text-left\">\n          {body}\n        </Text>\n      </Cluster>\n    )\n  },\n)\n\nconst UserSummaryStack = memo<\n  Pick<Props, 'empCode' | 'firstName' | 'lastName' | 'email'> & {\n    currentTenantName: ReactNode\n    className: string\n  }\n>(({ currentTenantName, empCode, firstName, lastName, email, className }) => (\n  <Stack gap={0.5} className={className}>\n    <Text size=\"S\" color=\"TEXT_GREY\" weight=\"bold\" leading=\"TIGHT\">\n      {currentTenantName}\n    </Text>\n\n    {empCode || (firstName && lastName) ? (\n      <Cluster align=\"center\">\n        {empCode && (\n          <Text size=\"S\" color=\"TEXT_GREY\" leading=\"TIGHT\">\n            {empCode}\n          </Text>\n        )}\n        {firstName && lastName && <Text leading=\"TIGHT\">{`${lastName} ${firstName}`}</Text>}\n      </Cluster>\n    ) : (\n      <Text leading=\"TIGHT\">{email}</Text>\n    )}\n  </Stack>\n))\n\nconst DropdownContentButton = memo<PropsWithChildren<{ href?: string | null; className: string }>>(\n  ({ href, children, className }) =>\n    href && (\n      <AnchorButton\n        href={href}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        prefix={<FaGearIcon />}\n        className={className}\n      >\n        <Translate>{children}</Translate>\n      </AnchorButton>\n    ),\n)\n\nconst DisplayNameDropdownTrigger = memo<PropsWithChildren<{ className: string }>>(\n  ({ children, className }) => (\n    <DropdownTrigger>\n      <Button variant=\"text\" suffix={<FaCaretDownIcon />} className={className}>\n        <Translate>{children}</Translate>\n      </Button>\n    </DropdownTrigger>\n  ),\n)\n\nconst AccountLink = memo<PropsWithChildren<{ href?: string | null }>>(\n  ({ href, children }) =>\n    href && (\n      <CommonButton\n        elementAs=\"a\"\n        href={href}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        prefix={<FaGearIcon />}\n      >\n        <Translate>{children}</Translate>\n      </CommonButton>\n    ),\n)\n"],"names":["tv","_jsx","_jsxs","AnchorButton"],"mappings":"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"}
+{"version":3,"file":"UserInfo.js","sources":["../../../../../src/components/AppHeader/components/desktop/UserInfo.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { AnchorButton, Button } from '../../../Button'\nimport { Dropdown, DropdownContent, DropdownMenuButton, DropdownTrigger } from '../../../Dropdown'\nimport { FaCaretDownIcon, FaGearIcon, FaUserIcon } from '../../../Icon'\nimport { Cluster, Stack } from '../../../Layout'\nimport { Text } from '../../../Text'\nimport { buildDisplayName } from '../../utils'\nimport { CommonButton } from '../common/CommonButton'\nimport { Translate } from '../common/Translate'\n\nimport type { HeaderProps, UserInfoProps } from '../../types'\n\n// HeaderDropdownMenuButton と同じスタイルを適用\nconst classNameGenerator = tv({\n  slots: {\n    userSummary: [\n      'shr-relative -shr-mx-0.25 -shr-mt-0.5 shr-p-1',\n      // FIXME: smarthr-ui で DropdownMenuButton のグルーピングができるようになったら修正しましょう\n      'after:shr-absolute after:shr-inset-x-0.5 after:shr-bottom-0 after:shr-block after:shr-h-px after:shr-bg-border after:shr-content-[\"\"]',\n    ],\n    dropdownMenuButton: [\n      '[&_.smarthr-ui-DropdownMenuButton-trigger]:shr-border-transparent [&_.smarthr-ui-DropdownMenuButton-trigger]:shr-px-0.5 [&_.smarthr-ui-DropdownMenuButton-trigger]:shr-font-normal',\n    ],\n    dropdownContentButton: [\n      '[&&.smarthr-ui-AnchorButton]:shr-p-0.75 [&&.smarthr-ui-AnchorButton]:shr-py-0.75',\n      '[&&.smarthr-ui-Button]:shr-p-0.75 [&&.smarthr-ui-Button]:shr-py-0.75',\n    ],\n    button: [\n      '[&&]:shr-border-transparent [&&]:shr-font-normal [&&]:last-of-type:-shr-me-0.25',\n      '[&&]:focus-visible:shr-bg-transparent',\n      \"[&[aria-expanded='true']_.smarthr-ui-Icon:last-child]:shr-rotate-180\",\n    ],\n    dropdownContent: '[&&]:shr-whitespace-pre [&&]:shr-p-0.5',\n    accountImage: '',\n    placeholderImage: 'shr-p-0.5',\n  },\n  variants: {\n    enableNew: {\n      true: {\n        button: '[&&]:shr-px-0.5',\n      },\n      false: {\n        button:\n          '[&&]:shr-bg-transparent [&&]:shr-px-0.25 [&&]:shr-text-white [&&]:hover:shr-bg-transparent',\n      },\n    },\n  },\n  compoundSlots: [\n    {\n      slots: ['accountImage', 'placeholderImage'],\n      className:\n        'shr-border-shorthand -shr-my-1 shr-box-border shr-flex shr-size-2 shr-items-center shr-justify-center shr-rounded-full shr-bg-white',\n    },\n  ],\n})\n\ntype Props = UserInfoProps &\n  Pick<HeaderProps, 'desktopAdditionalContent' | 'tenants' | 'currentTenantId'>\n\nexport const UserInfo: FC<Props> = ({\n  arbitraryDisplayName,\n  email,\n  empCode,\n  firstName,\n  lastName,\n  accountUrl,\n  desktopAdditionalContent,\n  ...rest\n}) => {\n  const displayName = useMemo(\n    () =>\n      arbitraryDisplayName ??\n      buildDisplayName({\n        email,\n        empCode,\n        firstName,\n        lastName,\n      }),\n    [arbitraryDisplayName, email, empCode, firstName, lastName],\n  )\n\n  if (!displayName) {\n    return null\n  }\n\n  if (!accountUrl && !desktopAdditionalContent) {\n    return <span className=\"shr-text-white\">{displayName}</span>\n  }\n\n  return (\n    <ActualUserInfo\n      {...rest}\n      email={email}\n      empCode={empCode}\n      firstName={firstName}\n      lastName={lastName}\n      accountUrl={accountUrl}\n      desktopAdditionalContent={desktopAdditionalContent}\n      displayName={displayName}\n    />\n  )\n}\n\nexport const ActualUserInfo: FC<Omit<Props, 'arbitraryDisplayName'> & { displayName: string }> = ({\n  email,\n  empCode,\n  firstName,\n  lastName,\n  tenants,\n  currentTenantId,\n  accountUrl,\n  accountImageUrl,\n  desktopAdditionalContent,\n  enableNew,\n  displayName,\n}) => {\n  const classNames = useMemo(() => {\n    const {\n      userSummary,\n      dropdownMenuButton,\n      dropdownContentButton,\n      button,\n      dropdownContent,\n      accountImage,\n      placeholderImage,\n    } = classNameGenerator({\n      enableNew,\n    })\n\n    return {\n      userSummary: userSummary(),\n      dropdownMenuButton: dropdownMenuButton(),\n      dropdownContentButton: dropdownContentButton(),\n      button: button(),\n      dropdownContent: dropdownContent(),\n      accountImage: accountImage(),\n      placeholderImage: placeholderImage(),\n    }\n  }, [enableNew])\n\n  const { localize } = useIntl()\n  const translated = useMemo(\n    () => ({\n      userSetting: localize({ id: 'smarthr-ui/AppHeader/userSettings', defaultText: '個人設定' }),\n    }),\n    [localize],\n  )\n\n  const currentTenantName = useMemo(\n    () => tenants?.find((tenant) => tenant.id === currentTenantId)?.name,\n    [tenants, currentTenantId],\n  )\n\n  if (enableNew) {\n    return (\n      <DropdownMenuButton\n        className={classNames.dropdownMenuButton}\n        trigger={\n          <DropdownMenuLabel\n            firstName={firstName}\n            lastName={lastName}\n            email={email}\n            accountImageUrl={accountImageUrl}\n            currentTenantName={currentTenantName}\n            accountImageClassName={classNames.accountImage}\n            placeHolderImageClassName={classNames.placeholderImage}\n          />\n        }\n      >\n        <UserSummaryStack\n          currentTenantName={currentTenantName}\n          empCode={empCode}\n          firstName={firstName}\n          lastName={lastName}\n          email={email}\n          className={classNames.userSummary}\n        />\n        <DropdownContentButton href={accountUrl} className={classNames.dropdownContentButton}>\n          {translated.userSetting}\n        </DropdownContentButton>\n        {desktopAdditionalContent}\n      </DropdownMenuButton>\n    )\n  }\n\n  return (\n    <Dropdown>\n      <DisplayNameDropdownTrigger className={classNames.button}>\n        {displayName}\n      </DisplayNameDropdownTrigger>\n      <DropdownContent className={classNames.dropdownContent}>\n        <AccountLink href={accountUrl}>{translated.userSetting}</AccountLink>\n        {desktopAdditionalContent}\n      </DropdownContent>\n    </Dropdown>\n  )\n}\n\nconst DropdownMenuLabel = memo<\n  Pick<Props, 'firstName' | 'lastName' | 'email'> & {\n    accountImageUrl?: string\n    currentTenantName: ReactNode\n    accountImageClassName: string\n    placeHolderImageClassName: string\n  }\n>(\n  ({\n    firstName,\n    lastName,\n    email,\n    accountImageUrl,\n    currentTenantName,\n    accountImageClassName,\n    placeHolderImageClassName,\n  }) => {\n    const body: ReactNode[] = []\n\n    if (currentTenantName) {\n      body.push(currentTenantName)\n    }\n\n    if (firstName && lastName) {\n      body.push(`${firstName} ${lastName}`)\n    } else if (email) {\n      body.push(email)\n    }\n\n    if (body.length === 2) {\n      body.splice(1, 0, <br />)\n    }\n\n    return (\n      <Cluster as=\"span\" align=\"flex-start\">\n        {accountImageUrl ? (\n          // eslint-disable-next-line smarthr/a11y-image-has-alt-attribute, jsx-a11y/alt-text\n          <img src={accountImageUrl} className={accountImageClassName} aria-hidden />\n        ) : (\n          <span className={placeHolderImageClassName}>\n            <FaUserIcon color=\"TEXT_GREY\" />\n          </span>\n        )}\n\n        <Text size=\"XS\" leading=\"NORMAL\" className=\"-shr-my-1 shr-text-left\">\n          {body}\n        </Text>\n      </Cluster>\n    )\n  },\n)\n\nconst UserSummaryStack = memo<\n  Pick<Props, 'empCode' | 'firstName' | 'lastName' | 'email'> & {\n    currentTenantName: ReactNode\n    className: string\n  }\n>(({ currentTenantName, empCode, firstName, lastName, email, className }) => (\n  <Stack gap={0.5} className={className}>\n    <Text size=\"S\" color=\"TEXT_GREY\" weight=\"bold\" leading=\"TIGHT\">\n      {currentTenantName}\n    </Text>\n\n    {empCode || (firstName && lastName) ? (\n      <Cluster align=\"center\">\n        {empCode && (\n          <Text size=\"S\" color=\"TEXT_GREY\" leading=\"TIGHT\">\n            {empCode}\n          </Text>\n        )}\n        {firstName && lastName && <Text leading=\"TIGHT\">{`${lastName} ${firstName}`}</Text>}\n      </Cluster>\n    ) : (\n      <Text leading=\"TIGHT\">{email}</Text>\n    )}\n  </Stack>\n))\n\nconst DropdownContentButton = memo<PropsWithChildren<{ href?: string | null; className: string }>>(\n  ({ href, children, className }) =>\n    href && (\n      <AnchorButton\n        href={href}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        prefix={<FaGearIcon />}\n        className={className}\n      >\n        <Translate>{children}</Translate>\n      </AnchorButton>\n    ),\n)\n\nconst DisplayNameDropdownTrigger = memo<PropsWithChildren<{ className: string }>>(\n  ({ children, className }) => (\n    <DropdownTrigger>\n      <Button variant=\"text\" suffix={<FaCaretDownIcon />} className={className}>\n        <Translate>{children}</Translate>\n      </Button>\n    </DropdownTrigger>\n  ),\n)\n\nconst AccountLink = memo<PropsWithChildren<{ href?: string | null }>>(\n  ({ href, children }) =>\n    href && (\n      <CommonButton\n        elementAs=\"a\"\n        href={href}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        prefix={<FaGearIcon />}\n      >\n        <Translate>{children}</Translate>\n      </CommonButton>\n    ),\n)\n"],"names":["tv","_jsx","_jsxs","AnchorButton"],"mappings":"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"}

package/esm/components/AppNavi/AppNaviDropdownMenuButton.js

@@ -55,7 +55,7 @@ const renderItemList = (children) => Children.map(children, (item) => {
         className: actionItem({ className: item.props.className }),
     });
 });
-const AppNaviDropdownMenuButton = ({ label, onOpen, onClose, children }) => (jsx(DropdownMenuButton, { label: jsxs(Fragment, { children: [label, jsx("span", { hidden: true, children: children })] }), onOpen: onOpen, onClose: onClose, className: trigger(), children: renderItemList(children) }));
+const AppNaviDropdownMenuButton = ({ label, onOpen, onClose, children }) => (jsx(DropdownMenuButton, { trigger: jsxs(Fragment, { children: [label, jsx("span", { hidden: true, children: children })] }), onOpen: onOpen, onClose: onClose, className: trigger(), children: renderItemList(children) }));
 
 export { AppNaviDropdownMenuButton };
 //# sourceMappingURL=AppNaviDropdownMenuButton.js.map

package/esm/components/AppNavi/AppNaviDropdownMenuButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppNaviDropdownMenuButton.js","sources":["../../../src/components/AppNavi/AppNaviDropdownMenuButton.tsx"],"sourcesContent":["import {\n  Children,\n  type FC,\n  Fragment,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  cloneElement,\n  isValidElement,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { DropdownMenuGroup } from '../Dropdown'\nimport { DropdownMenuButton } from '../Dropdown/DropdownMenuButton/DropdownMenuButton'\n\ntype Props = PropsWithChildren<{\n  /** 引き金となるボタンラベル */\n  label: ReactNode\n  onOpen?: () => void\n  onClose?: () => void\n}>\n\nconst classNameGenerator = tv({\n  slots: {\n    trigger: [\n      'smarthr-ui-AppNavi-dropdownMenuButton',\n      [\n        '[&_.smarthr-ui-DropdownMenuButton-trigger]:shr-border-none',\n        '[&_.smarthr-ui-DropdownMenuButton-trigger]:shr-px-0.5',\n        '[&_.smarthr-ui-DropdownMenuButton-trigger]:shr-text-grey',\n        '[&_.smarthr-ui-DropdownMenuButton-trigger]:shr-rounded-none',\n      ],\n      [\n        '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current])]:shr-relative',\n        '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current])]:shr-text-black',\n      ],\n      [\n        '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current])]:after:shr-content-[\"\"]',\n        '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current])]:after:shr-absolute',\n        '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current])]:after:shr-bottom-0',\n        '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current])]:after:shr-inset-x-0',\n        '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current])]:after:shr-h-0.25',\n        '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current])]:after:shr-bg-main',\n      ],\n    ],\n    actionItem: [\n      'aria-current-page:shr-bg-grey-9 aria-current-page:shr-font-bold',\n      // aria-current-page より詳細度を確実に上げる\n      '[&&]:hover:shr-bg-head-darken',\n    ],\n  },\n})\nconst { trigger, actionItem } = classNameGenerator()\n\nconst renderItemList = (children: ReactNode) =>\n  Children.map(children, (item): ReactNode => {\n    if (!isValidElement(item)) {\n      return null\n    }\n\n    if (item.type === Fragment) {\n      return renderItemList(item.props.children)\n    }\n\n    if (item.type === DropdownMenuGroup) {\n      return (\n        <DropdownMenuGroup {...item.props}>{renderItemList(item.props.children)}</DropdownMenuGroup>\n      )\n    }\n\n    return cloneElement(item as ReactElement, {\n      className: actionItem({ className: item.props.className }),\n    })\n  })\n\nexport const AppNaviDropdownMenuButton: FC<Props> = ({ label, onOpen, onClose, children }) => (\n  <DropdownMenuButton\n    label={\n      <>\n        {label}\n        {/* has([aria-current=\"page\"]) を書くために複製 */}\n        <span hidden>{children}</span>\n      </>\n    }\n    onOpen={onOpen}\n    onClose={onClose}\n    className={trigger()}\n  >\n    {renderItemList(children)}\n  </DropdownMenuButton>\n)\n"],"names":["tv","Fragment","_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;;AAsBA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;YACP,uCAAuC;AACvC,YAAA;gBACE,4DAA4D;gBAC5D,uDAAuD;gBACvD,0DAA0D;gBAC1D,6DAA6D;AAC9D,aAAA;AACD,YAAA;gBACE,6EAA6E;gBAC7E,+EAA+E;AAChF,aAAA;AACD,YAAA;gBACE,uFAAuF;gBACvF,mFAAmF;gBACnF,mFAAmF;gBACnF,oFAAoF;gBACpF,iFAAiF;gBACjF,kFAAkF;AACnF,aAAA;AACF,SAAA;AACD,QAAA,UAAU,EAAE;YACV,iEAAiE;;YAEjE,+BAA+B;AAChC,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AACF,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,kBAAkB,EAAE;AAEpD,MAAM,cAAc,GAAG,CAAC,QAAmB,KACzC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,IAAI,KAAe;AACzC,IAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE;AACzB,QAAA,OAAO,IAAI;IACb;AAEA,IAAA,IAAI,IAAI,CAAC,IAAI,KAAKC,UAAQ,EAAE;QAC1B,OAAO,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC5C;AAEA,IAAA,IAAI,IAAI,CAAC,IAAI,KAAK,iBAAiB,EAAE;AACnC,QAAA,QACEC,GAAA,CAAC,iBAAiB,OAAK,IAAI,CAAC,KAAK,EAAA,QAAA,EAAG,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAA,CAAqB;IAEhG;IAEA,OAAO,YAAY,CAAC,IAAoB,EAAE;AACxC,QAAA,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;AAC3D,KAAA,CAAC;AACJ,CAAC,CAAC;AAEG,MAAM,yBAAyB,GAAc,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MACvFA,GAAA,CAAC,kBAAkB,EAAA,EACjB,KAAK,EACHC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,KAAK,EAENF,cAAM,MAAM,EAAA,IAAA,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAQ,CAAA,EAAA,CAC7B,EAEL,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,OAAO,EAAE,EAAA,QAAA,EAEnB,cAAc,CAAC,QAAQ,CAAC,EAAA,CACN;;;;"}
+{"version":3,"file":"AppNaviDropdownMenuButton.js","sources":["../../../src/components/AppNavi/AppNaviDropdownMenuButton.tsx"],"sourcesContent":["import {\n  Children,\n  type FC,\n  Fragment,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  cloneElement,\n  isValidElement,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { DropdownMenuGroup } from '../Dropdown'\nimport { DropdownMenuButton } from '../Dropdown/DropdownMenuButton/DropdownMenuButton'\n\ntype Props = PropsWithChildren<{\n  /** 引き金となるボタンラベル */\n  label: ReactNode\n  onOpen?: () => void\n  onClose?: () => void\n}>\n\nconst classNameGenerator = tv({\n  slots: {\n    trigger: [\n      'smarthr-ui-AppNavi-dropdownMenuButton',\n      [\n        '[&_.smarthr-ui-DropdownMenuButton-trigger]:shr-border-none',\n        '[&_.smarthr-ui-DropdownMenuButton-trigger]:shr-px-0.5',\n        '[&_.smarthr-ui-DropdownMenuButton-trigger]:shr-text-grey',\n        '[&_.smarthr-ui-DropdownMenuButton-trigger]:shr-rounded-none',\n      ],\n      [\n        '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current])]:shr-relative',\n        '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current])]:shr-text-black',\n      ],\n      [\n        '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current])]:after:shr-content-[\"\"]',\n        '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current])]:after:shr-absolute',\n        '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current])]:after:shr-bottom-0',\n        '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current])]:after:shr-inset-x-0',\n        '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current])]:after:shr-h-0.25',\n        '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current])]:after:shr-bg-main',\n      ],\n    ],\n    actionItem: [\n      'aria-current-page:shr-bg-grey-9 aria-current-page:shr-font-bold',\n      // aria-current-page より詳細度を確実に上げる\n      '[&&]:hover:shr-bg-head-darken',\n    ],\n  },\n})\nconst { trigger, actionItem } = classNameGenerator()\n\nconst renderItemList = (children: ReactNode) =>\n  Children.map(children, (item): ReactNode => {\n    if (!isValidElement(item)) {\n      return null\n    }\n\n    if (item.type === Fragment) {\n      return renderItemList(item.props.children)\n    }\n\n    if (item.type === DropdownMenuGroup) {\n      return (\n        <DropdownMenuGroup {...item.props}>{renderItemList(item.props.children)}</DropdownMenuGroup>\n      )\n    }\n\n    return cloneElement(item as ReactElement, {\n      className: actionItem({ className: item.props.className }),\n    })\n  })\n\nexport const AppNaviDropdownMenuButton: FC<Props> = ({ label, onOpen, onClose, children }) => (\n  <DropdownMenuButton\n    trigger={\n      <>\n        {label}\n        {/* has([aria-current=\"page\"]) を書くために複製 */}\n        <span hidden>{children}</span>\n      </>\n    }\n    onOpen={onOpen}\n    onClose={onClose}\n    className={trigger()}\n  >\n    {renderItemList(children)}\n  </DropdownMenuButton>\n)\n"],"names":["tv","Fragment","_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;;AAsBA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;YACP,uCAAuC;AACvC,YAAA;gBACE,4DAA4D;gBAC5D,uDAAuD;gBACvD,0DAA0D;gBAC1D,6DAA6D;AAC9D,aAAA;AACD,YAAA;gBACE,6EAA6E;gBAC7E,+EAA+E;AAChF,aAAA;AACD,YAAA;gBACE,uFAAuF;gBACvF,mFAAmF;gBACnF,mFAAmF;gBACnF,oFAAoF;gBACpF,iFAAiF;gBACjF,kFAAkF;AACnF,aAAA;AACF,SAAA;AACD,QAAA,UAAU,EAAE;YACV,iEAAiE;;YAEjE,+BAA+B;AAChC,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AACF,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,kBAAkB,EAAE;AAEpD,MAAM,cAAc,GAAG,CAAC,QAAmB,KACzC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,IAAI,KAAe;AACzC,IAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE;AACzB,QAAA,OAAO,IAAI;IACb;AAEA,IAAA,IAAI,IAAI,CAAC,IAAI,KAAKC,UAAQ,EAAE;QAC1B,OAAO,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC5C;AAEA,IAAA,IAAI,IAAI,CAAC,IAAI,KAAK,iBAAiB,EAAE;AACnC,QAAA,QACEC,GAAA,CAAC,iBAAiB,OAAK,IAAI,CAAC,KAAK,EAAA,QAAA,EAAG,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAA,CAAqB;IAEhG;IAEA,OAAO,YAAY,CAAC,IAAoB,EAAE;AACxC,QAAA,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;AAC3D,KAAA,CAAC;AACJ,CAAC,CAAC;AAEG,MAAM,yBAAyB,GAAc,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MACvFA,GAAA,CAAC,kBAAkB,EAAA,EACjB,OAAO,EACLC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,KAAK,EAENF,cAAM,MAAM,EAAA,IAAA,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAQ,CAAA,EAAA,CAC7B,EAEL,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,OAAO,EAAE,EAAA,QAAA,EAEnB,cAAc,CAAC,QAAQ,CAAC,EAAA,CACN;;;;"}

package/esm/components/Combobox/MultiCombobox/MultiCombobox.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo, useMemo, useRef, useState, useCallback, useImperativeHandle, useEffect, useId } from 'react';
-import innerText from '../../../_virtual/index3.js';
+import innerText from '../../../_virtual/index.js';
 import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.18_ts-node@10.9.2_@swc_core@1.13.5_@types_node@20.19.20_typescript@5.8.3__/vendor/tailwind-variants/dist/index.js';
 import { useOuterClick } from '../../../hooks/useOuterClick.js';
 import '../../../intl/IntlProvider.js';

package/esm/components/Combobox/SingleCombobox/SingleCombobox.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useRef, useState, useImperativeHandle, useCallback, useMemo, useEffect } from 'react';
-import innerText from '../../../_virtual/index3.js';
+import innerText from '../../../_virtual/index.js';
 import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.18_ts-node@10.9.2_@swc_core@1.13.5_@types_node@20.19.20_typescript@5.8.3__/vendor/tailwind-variants/dist/index.js';
 import { useClick } from '../../../hooks/useClick.js';
 import { useDecorators } from '../../../hooks/useDecorators.js';

package/esm/components/Combobox/helper.js

@@ -1,4 +1,4 @@
-import innerText from '../../_virtual/index3.js';
+import innerText from '../../_virtual/index.js';
 
 function convertMatchableString(original) {
     return (original

package/esm/components/Combobox/useOptions.js

@@ -1,5 +1,5 @@
 import { useCallback, useId, useMemo } from 'react';
-import innerText from '../../_virtual/index3.js';
+import innerText from '../../_virtual/index.js';
 import { areItemsEqual, convertMatchableString } from './helper.js';
 
 const defaultIsItemSelected = (targetItem, selectedItems) => selectedItems.some((item) => areItemsEqual(item, targetItem));

package/esm/components/DatePicker/DatePicker.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type ChangeEvent, type ComponentPropsWithRef, type ReactNode } from 'react';
 type AbstractProps = {
     /** input 要素の `value` 属性の値 */
     value?: string | null;
@@ -24,10 +24,16 @@ type AbstractProps = {
     formatDate?: (date: Date | null) => string;
     /** 入出力用文字列と併記する別フォーマット処理を記述する関数 */
     showAlternative?: (date: Date | null) => ReactNode;
-    /** 選択された日付が変わった時に発火するコールバック関数 */
+    /** @deprecated onChangeDate は非推奨です。onChange を使ってください。 */
     onChangeDate?: (date: Date | null, value: string, other: {
         errors: string[];
     }) => void;
+    /** 選択された日付が変わった時に発火するコールバック関数 */
+    onChange?: (e: ChangeEvent<HTMLInputElement>, other: {
+        date: Date | null;
+        formatValue: string;
+        errors: string[];
+    }) => void;
 };
 type Props = AbstractProps & Omit<ComponentPropsWithRef<'input'>, keyof AbstractProps | 'type' | 'onChange' | 'onKeyPress' | 'onFocus' | 'aria-expanded' | 'aria-controls' | 'aria-haspopup'>;
 export declare const DEFAULT_FROM: Date;

package/esm/components/DatePicker/DatePicker.js

@@ -30,7 +30,7 @@ const DEFAULT_DATE_TO_STRING = (d) => d ? dayjs(d).format(DEFAULT_DATE_TO_STRING
 const RETURN_NULL = () => null;
 const ESCAPE_KEY_REGEX = /^Esc(ape)?$/;
 /** @deprecated DatePicker は非推奨です。Input[type=date] を使ってください。 */
-const DatePicker = forwardRef(({ value, name, from = DEFAULT_FROM, to, disabled, width, error, className, parseInput, formatDate, showAlternative, onChangeDate, onBlur, ...rest }, ref) => {
+const DatePicker = forwardRef(({ value, name, from = DEFAULT_FROM, to, disabled, width, error, className, parseInput, formatDate, showAlternative, onChangeDate, onChange, onBlur, ...rest }, ref) => {
     const containerStyle = useMemo(() => ({
         width: typeof width === 'number' ? `${width}px` : width,
     }), [width]);
@@ -71,21 +71,51 @@ const DatePicker = forwardRef(({ value, name, from = DEFAULT_FROM, to, disabled,
             errors.push('INVALID_DATE');
         }
         const nextDate = isValid ? newDate : null;
-        const currentValue = dateToString(nextDate);
-        inputRef.current.value = currentValue;
+        const formatValue = dateToString(nextDate);
+        inputRef.current.value = formatValue;
         setAlternativeFormat(dateToAlternativeFormat(nextDate));
         setSelectedDate(nextDate);
-        return [nextDate, currentValue, errors];
+        return [nextDate, formatValue, errors];
     }, [selectedDate, dateToString, dateToAlternativeFormat]);
-    const updateDate = useMemo(() => onChangeDate
-        ? (newDate) => {
-            const result = baseUpdateDate(newDate);
-            if (result) {
-                const [nextDate, currentValue, errors] = result;
-                onChangeDate(nextDate, currentValue, { errors });
-            }
+    const updateDate = useMemo(() => {
+        if (onChange) {
+            return (e, newDate) => {
+                const result = baseUpdateDate(newDate);
+                if (result) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const [nextDate, formatValue, errors] = result;
+                    const event = new Event('change', { bubbles: true });
+                    // HINT: resultが存在する時点でinputRef.currentは必ず存在する
+                    const input = inputRef.current;
+                    input.dispatchEvent(event);
+                    onChange(
+                    // HINT: 型問題のため別途オブジェクトをイベントに見立てる
+                    {
+                        stopPropagation: () => {
+                            event.stopPropagation();
+                        },
+                        preventDefault: () => {
+                            event.preventDefault();
+                        },
+                        target: input,
+                        currentTarget: input,
+                    }, { date: nextDate, formatValue, errors });
+                }
+            };
         }
-        : baseUpdateDate, [onChangeDate, baseUpdateDate]);
+        return onChangeDate
+            ? (_e, newDate) => {
+                const result = baseUpdateDate(newDate);
+                if (result) {
+                    const [nextDate, formatValue, errors] = result;
+                    onChangeDate(nextDate, formatValue, { errors });
+                }
+            }
+            : (_e, newDate) => {
+                baseUpdateDate(newDate);
+            };
+    }, [onChange, onChangeDate, baseUpdateDate]);
     const closeCalendar = useCallback(() => setIsCalendarShown(false), []);
     const openCalendar = useCallback(() => {
         if (inputWrapperRef.current) {
@@ -152,7 +182,7 @@ const DatePicker = forwardRef(({ value, name, from = DEFAULT_FROM, to, disabled,
     }, [isInputFocused, closeCalendar]);
     const baseHandleBlur = useCallback((e) => {
         setIsInputFocused(false);
-        updateDate(e.target.value ? stringToDate(e.target.value) : null);
+        updateDate(e, e.target.value ? stringToDate(e.target.value) : null);
     }, [stringToDate, updateDate]);
     const handleBlur = useMemo(() => onBlur
         ? (e) => {
@@ -180,15 +210,15 @@ const DatePicker = forwardRef(({ value, name, from = DEFAULT_FROM, to, disabled,
     const onKeyPressInput = useCallback((e) => {
         if (e.key === 'Enter') {
             (isCalendarShown ? openCalendar : closeCalendar)();
-            updateDate(stringToDate(e.currentTarget.value));
+            updateDate(e, stringToDate(e.currentTarget.value));
         }
     }, [isCalendarShown, updateDate, closeCalendar, openCalendar, stringToDate]);
     const onFocusInput = useCallback(() => {
         setIsInputFocused(true);
         openCalendar();
     }, [openCalendar]);
-    const onSelectDateCalendar = useCallback((_, selected) => {
-        updateDate(selected);
+    const onSelectDateCalendar = useCallback((e, selected) => {
+        updateDate(e, selected);
         // delay hiding calendar because calendar will be displayed when input is focused
         requestAnimationFrame(closeCalendar);
         if (inputRef.current)

package/esm/components/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client'\n\nimport dayjs from 'dayjs'\nimport {\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  type FocusEventHandler,\n  type ReactNode,\n  forwardRef,\n  memo,\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useOuterClick } from '../../hooks/useOuterClick'\nimport { textColor } from '../../themes'\nimport { Calendar } from '../Calendar'\nimport { FaCalendarDaysIcon } from '../Icon'\nimport { Input } from '../Input'\n\nimport { Portal } from './Portal'\nimport { parseJpnDateString } from './datePickerHelper'\nimport { useGlobalKeyDown } from './useGlobalKeyDown'\n\ntype AbstractProps = {\n  /** input 要素の `value` 属性の値 */\n  value?: string | null\n  /** input 要素の `name` 属性の値 */\n  name?: string\n  /** 選択可能な期間の開始日 */\n  from?: Date\n  /** 選択可能な期間の終了日 */\n  to?: Date\n  /** フォームを無効にするかどうか */\n  disabled?: boolean\n  /**\n   * @deprecated placeholder属性は非推奨です。別途ヒント用要素を設置するか、それらの領域を確保出来ない場合はTooltipコンポーネントの利用を検討してください。\n   */\n  placeholder?: string\n  /** フォームにエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** 入力を独自にパースする場合に、パース処理を記述する関数 */\n  parseInput?: (input: string) => Date | null\n  /** 表示する日付を独自にフォーマットする場合に、フォーマット処理を記述する関数 */\n  formatDate?: (date: Date | null) => string\n  /** 入出力用文字列と併記する別フォーマット処理を記述する関数 */\n  showAlternative?: (date: Date | null) => ReactNode\n  /** 選択された日付が変わった時に発火するコールバック関数 */\n  onChangeDate?: (date: Date | null, value: string, other: { errors: string[] }) => void\n}\ntype Props = AbstractProps &\n  Omit<\n    ComponentPropsWithRef<'input'>,\n    | keyof AbstractProps\n    | 'type'\n    | 'onChange'\n    | 'onKeyPress'\n    | 'onFocus'\n    | 'aria-expanded'\n    | 'aria-controls'\n    | 'aria-haspopup'\n  >\n\nexport const DEFAULT_FROM = new Date(1900, 0, 1)\n\nconst classNameGenerator = tv({\n  slots: {\n    container: 'smarthr-ui-DatePicker shr-inline-block',\n    inputSuffixLayout: 'shr-box-border shr-h-full shr-py-0.5',\n    inputSuffixWrapper:\n      'shr-border-l-shorthand shr-box-border shr-flex shr-h-full shr-items-center shr-justify-center shr-ps-0.5 shr-text-base',\n    inputSuffixText: 'shr-text-gray shr-me-0.5 shr-text-sm',\n  },\n})\n\nconst DEFAULT_DATE_TO_STRING_FORMAT = 'YYYY/MM/DD'\nconst DEFAULT_DATE_TO_STRING = (d: Date | null) =>\n  d ? dayjs(d).format(DEFAULT_DATE_TO_STRING_FORMAT) : ''\nconst RETURN_NULL = () => null\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\n\n/** @deprecated DatePicker は非推奨です。Input[type=date] を使ってください。 */\nexport const DatePicker = forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      value,\n      name,\n      from = DEFAULT_FROM,\n      to,\n      disabled,\n      width,\n      error,\n      className,\n      parseInput,\n      formatDate,\n      showAlternative,\n      onChangeDate,\n      onBlur,\n      ...rest\n    },\n    ref,\n  ) => {\n    const containerStyle = useMemo(\n      () => ({\n        width: typeof width === 'number' ? `${width}px` : width,\n      }),\n      [width],\n    )\n    const classNames = useMemo(() => {\n      const { container, inputSuffixLayout, inputSuffixWrapper, inputSuffixText } =\n        classNameGenerator()\n\n      return {\n        container: container({ className }),\n        inputSuffixLayout: inputSuffixLayout(),\n        inputSuffixWrapper: inputSuffixWrapper(),\n        inputSuffixText: inputSuffixText(),\n      }\n    }, [className])\n\n    const stringToDate = useMemo(\n      () =>\n        parseInput\n          ? (str?: string | null) => (str ? parseInput(str) : null)\n          : (str?: string | null) => (str ? parseJpnDateString(str) : null),\n      [parseInput],\n    )\n\n    const dateToString = useMemo(() => formatDate || DEFAULT_DATE_TO_STRING, [formatDate])\n    const dateToAlternativeFormat = useMemo(\n      () => (showAlternative ? (d: Date | null) => (d ? showAlternative(d) : null) : RETURN_NULL),\n      [showAlternative],\n    )\n\n    const [selectedDate, setSelectedDate] = useState<Date | null>(stringToDate(value))\n    const inputRef = useRef<HTMLInputElement>(null)\n    const inputWrapperRef = useRef<HTMLDivElement>(null)\n    const calendarPortalRef = useRef<HTMLDivElement>(null)\n    const [inputRect, setInputRect] = useState<DOMRect | null>(null)\n    const [isInputFocused, setIsInputFocused] = useState(false)\n    const [isCalendarShown, setIsCalendarShown] = useState(false)\n    const [alternativeFormat, setAlternativeFormat] = useState<null | ReactNode>(null)\n    const calenderId = useId()\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n    )\n\n    const baseUpdateDate = useCallback(\n      (newDate: Date | null) => {\n        if (\n          !inputRef.current ||\n          newDate === selectedDate ||\n          (newDate && selectedDate && newDate.getTime() === selectedDate.getTime())\n        ) {\n          // Do not update date if the new date is same with the old one.\n          return\n        }\n\n        const isValid = !newDate || dayjs(newDate).isValid()\n        const errors: string[] = []\n\n        if (!isValid) {\n          errors.push('INVALID_DATE')\n        }\n\n        const nextDate = isValid ? newDate : null\n        const currentValue = dateToString(nextDate)\n\n        inputRef.current.value = currentValue\n        setAlternativeFormat(dateToAlternativeFormat(nextDate))\n        setSelectedDate(nextDate)\n\n        return [nextDate, currentValue, errors] as [Date | null, string, string[]]\n      },\n      [selectedDate, dateToString, dateToAlternativeFormat],\n    )\n    const updateDate = useMemo(\n      () =>\n        onChangeDate\n          ? (newDate: Date | null) => {\n              const result = baseUpdateDate(newDate)\n\n              if (result) {\n                const [nextDate, currentValue, errors] = result\n\n                onChangeDate(nextDate, currentValue, { errors })\n              }\n            }\n          : baseUpdateDate,\n      [onChangeDate, baseUpdateDate],\n    )\n\n    const closeCalendar = useCallback(() => setIsCalendarShown(false), [])\n    const openCalendar = useCallback(() => {\n      if (inputWrapperRef.current) {\n        setIsCalendarShown(true)\n        setInputRect(inputWrapperRef.current.getBoundingClientRect())\n      }\n    }, [])\n\n    useEffect(() => {\n      if (value === undefined || !inputRef.current) {\n        return\n      }\n\n      /**\n       * Do not format the given value in the following cases\n       * - while input element is focused.\n       * - if the given value is not date formattable.\n       */\n      if (!isInputFocused) {\n        const newDate = stringToDate(value)\n\n        if (newDate && dayjs(newDate).isValid()) {\n          inputRef.current.value = dateToString(newDate)\n          setAlternativeFormat(dateToAlternativeFormat(newDate))\n          setSelectedDate(newDate)\n\n          return\n        }\n\n        setSelectedDate(null)\n      }\n\n      inputRef.current.value = value || ''\n    }, [value, isInputFocused, dateToString, dateToAlternativeFormat, stringToDate])\n\n    useOuterClick(\n      useMemo(() => [inputWrapperRef, calendarPortalRef], [inputWrapperRef, calendarPortalRef]),\n      closeCalendar,\n    )\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (!inputRef.current || !calendarPortalRef.current || e.key !== 'Tab') {\n          return\n        }\n\n        const calendarButtons = calendarPortalRef.current.querySelectorAll('button')\n\n        if (calendarButtons.length === 0) {\n          return\n        }\n\n        const firstCalendarButton = calendarButtons[0]\n\n        if (isInputFocused) {\n          if (e.shiftKey) {\n            // move focus from Input to previous elements of DatePicker\n            closeCalendar()\n\n            return\n          }\n\n          // move focus from Input to Calendar\n          e.preventDefault()\n          firstCalendarButton.focus()\n\n          return\n        }\n\n        const calendarButtonAry = Array.from(calendarButtons)\n        const currentFocused = calendarButtonAry.find((button) => button === e.target)\n\n        if (e.shiftKey) {\n          if (currentFocused === firstCalendarButton) {\n            // move focus from Calendar to Input\n            inputRef.current.focus()\n            e.preventDefault()\n          }\n        } else if (currentFocused === calendarButtonAry.at(-1)) {\n          // move focus from Calendar to next elements of DatePicker\n          inputRef.current.focus()\n          closeCalendar()\n        }\n      },\n      [isInputFocused, closeCalendar],\n    )\n\n    const baseHandleBlur = useCallback<FocusEventHandler<HTMLInputElement>>(\n      (e) => {\n        setIsInputFocused(false)\n        updateDate(e.target.value ? stringToDate(e.target.value) : null)\n      },\n      [stringToDate, updateDate],\n    )\n    const handleBlur = useMemo<FocusEventHandler<HTMLInputElement>>(\n      () =>\n        onBlur\n          ? (e) => {\n              baseHandleBlur(e)\n              onBlur(e)\n            }\n          : baseHandleBlur,\n      [onBlur, baseHandleBlur],\n    )\n\n    useGlobalKeyDown(handleKeyDown)\n\n    const caretIconColor = useMemo(() => {\n      if (isInputFocused || isCalendarShown) return textColor.black\n      if (disabled) return textColor.disabled\n\n      return textColor.grey\n    }, [isInputFocused, isCalendarShown, disabled])\n\n    const onDelegateKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (ESCAPE_KEY_REGEX.test(e.key)) {\n          e.stopPropagation()\n          // delay hiding calendar because calendar will be displayed when input is focused\n          requestAnimationFrame(closeCalendar)\n\n          if (inputRef.current) inputRef.current.focus()\n        }\n      },\n      [closeCalendar],\n    )\n    const onKeyPressInput = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter') {\n          ;(isCalendarShown ? openCalendar : closeCalendar)()\n          updateDate(stringToDate(e.currentTarget.value))\n        }\n      },\n      [isCalendarShown, updateDate, closeCalendar, openCalendar, stringToDate],\n    )\n    const onFocusInput = useCallback(() => {\n      setIsInputFocused(true)\n      openCalendar()\n    }, [openCalendar])\n    const onSelectDateCalendar = useCallback(\n      (_: any, selected: Date | null) => {\n        updateDate(selected)\n        // delay hiding calendar because calendar will be displayed when input is focused\n        requestAnimationFrame(closeCalendar)\n\n        if (inputRef.current) inputRef.current.focus()\n      },\n      [updateDate, closeCalendar],\n    )\n\n    return (\n      <div\n        onClick={!isCalendarShown && !disabled ? openCalendar : undefined}\n        onKeyDown={isCalendarShown ? onDelegateKeyDown : undefined}\n        role=\"presentation\"\n        className={classNames.container}\n        style={containerStyle}\n      >\n        <div ref={inputWrapperRef}>\n          <Input\n            {...rest}\n            data-smarthr-ui-input=\"true\"\n            width=\"100%\"\n            name={name}\n            onChange={isCalendarShown ? closeCalendar : undefined}\n            onKeyPress={onKeyPressInput}\n            onFocus={onFocusInput}\n            onBlur={handleBlur}\n            suffix={\n              <InputSuffixIcon\n                alternativeFormat={showAlternative ? alternativeFormat : null}\n                caretIconColor={caretIconColor}\n                classNames={classNames}\n              />\n            }\n            disabled={disabled}\n            error={error}\n            ref={inputRef}\n            className=\"smarthr-ui-DatePicker-inputContainer\"\n            aria-expanded={isCalendarShown}\n            aria-controls={calenderId}\n            aria-haspopup={true}\n          />\n        </div>\n        {isCalendarShown && inputRect && (\n          <Portal inputRect={inputRect} ref={calendarPortalRef}>\n            <Calendar\n              id={calenderId}\n              value={selectedDate || undefined}\n              from={from}\n              to={to}\n              onSelectDate={onSelectDateCalendar}\n            />\n          </Portal>\n        )}\n      </div>\n    )\n  },\n)\n\nconst InputSuffixIcon = memo<{\n  classNames: { inputSuffixLayout: string; inputSuffixWrapper: string; inputSuffixText: string }\n  alternativeFormat: null | ReactNode\n  caretIconColor: ComponentProps<typeof FaCalendarDaysIcon>['color']\n}>(({ classNames, alternativeFormat, caretIconColor }) => (\n  <span className={classNames.inputSuffixLayout}>\n    <span className={classNames.inputSuffixWrapper}>\n      {alternativeFormat && <span className={classNames.inputSuffixText}>{alternativeFormat}</span>}\n      <FaCalendarDaysIcon color={caretIconColor} />\n    </span>\n  </span>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAuEO;AAEP;AACE;AACE;AACA;AACA;AAEA;AACD;AACF;AAED;AACA;AAEA;AACA;AAEA;AACO;AAoBH;AAEI;AACD;AAGH;AACE;;AAIE;;;;;AAKJ;AAEA;AAGM;;AAKN;AACA;AAKA;AACA;AACA;AACA;;;;;AAKA;;AAOA;;AAIM;AACA;;;;AAMF;;;AAIE;;;AAIF;AAEA;AACA;;AAGA;;AAIJ;AAGM;AACI;;;;;;;AAYV;AACA;AACE;;;;;;;;;AAWA;;;;AAIG;;AAED;;;AAIE;;;;;;;AAUN;;AAOA;AAEI;;;;AAMA;;;AAIA;;AAGE;;AAEE;;;;;;;;;AAaJ;AAEA;AACE;;AAEE;;;;;;AAKF;AACA;;AAEJ;AAIF;;;AAIE;AAGF;AAGM;;;;;;AAUN;;;AAEE;;;;AAKF;;;;;;AAO4B;;AAE1B;AAGF;AAEI;;;;AAIF;AAGF;;AAEE;AACF;;;;;;AAO0B;AACxB;AAIF;AA+CF;AAGF;;"}
+{"version":3,"file":"DatePicker.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client'\n\nimport dayjs from 'dayjs'\nimport {\n  type ChangeEvent,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  type FocusEventHandler,\n  type MouseEvent,\n  type ReactNode,\n  forwardRef,\n  memo,\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useOuterClick } from '../../hooks/useOuterClick'\nimport { textColor } from '../../themes'\nimport { Calendar } from '../Calendar'\nimport { FaCalendarDaysIcon } from '../Icon'\nimport { Input } from '../Input'\n\nimport { Portal } from './Portal'\nimport { parseJpnDateString } from './datePickerHelper'\nimport { useGlobalKeyDown } from './useGlobalKeyDown'\n\ntype ChangeLikeEvent = ChangeEvent | React.KeyboardEvent | MouseEvent\ntype AbstractProps = {\n  /** input 要素の `value` 属性の値 */\n  value?: string | null\n  /** input 要素の `name` 属性の値 */\n  name?: string\n  /** 選択可能な期間の開始日 */\n  from?: Date\n  /** 選択可能な期間の終了日 */\n  to?: Date\n  /** フォームを無効にするかどうか */\n  disabled?: boolean\n  /**\n   * @deprecated placeholder属性は非推奨です。別途ヒント用要素を設置するか、それらの領域を確保出来ない場合はTooltipコンポーネントの利用を検討してください。\n   */\n  placeholder?: string\n  /** フォームにエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** 入力を独自にパースする場合に、パース処理を記述する関数 */\n  parseInput?: (input: string) => Date | null\n  /** 表示する日付を独自にフォーマットする場合に、フォーマット処理を記述する関数 */\n  formatDate?: (date: Date | null) => string\n  /** 入出力用文字列と併記する別フォーマット処理を記述する関数 */\n  showAlternative?: (date: Date | null) => ReactNode\n  /** @deprecated onChangeDate は非推奨です。onChange を使ってください。 */\n  onChangeDate?: (date: Date | null, value: string, other: { errors: string[] }) => void\n  /** 選択された日付が変わった時に発火するコールバック関数 */\n  onChange?: (\n    e: ChangeEvent<HTMLInputElement>,\n    other: { date: Date | null; formatValue: string; errors: string[] },\n  ) => void\n}\ntype Props = AbstractProps &\n  Omit<\n    ComponentPropsWithRef<'input'>,\n    | keyof AbstractProps\n    | 'type'\n    | 'onChange'\n    | 'onKeyPress'\n    | 'onFocus'\n    | 'aria-expanded'\n    | 'aria-controls'\n    | 'aria-haspopup'\n  >\n\nexport const DEFAULT_FROM = new Date(1900, 0, 1)\n\nconst classNameGenerator = tv({\n  slots: {\n    container: 'smarthr-ui-DatePicker shr-inline-block',\n    inputSuffixLayout: 'shr-box-border shr-h-full shr-py-0.5',\n    inputSuffixWrapper:\n      'shr-border-l-shorthand shr-box-border shr-flex shr-h-full shr-items-center shr-justify-center shr-ps-0.5 shr-text-base',\n    inputSuffixText: 'shr-text-gray shr-me-0.5 shr-text-sm',\n  },\n})\n\nconst DEFAULT_DATE_TO_STRING_FORMAT = 'YYYY/MM/DD'\nconst DEFAULT_DATE_TO_STRING = (d: Date | null) =>\n  d ? dayjs(d).format(DEFAULT_DATE_TO_STRING_FORMAT) : ''\nconst RETURN_NULL = () => null\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\n\n/** @deprecated DatePicker は非推奨です。Input[type=date] を使ってください。 */\nexport const DatePicker = forwardRef<HTMLInputElement, Props>(\n  (\n    {\n      value,\n      name,\n      from = DEFAULT_FROM,\n      to,\n      disabled,\n      width,\n      error,\n      className,\n      parseInput,\n      formatDate,\n      showAlternative,\n      onChangeDate,\n      onChange,\n      onBlur,\n      ...rest\n    },\n    ref,\n  ) => {\n    const containerStyle = useMemo(\n      () => ({\n        width: typeof width === 'number' ? `${width}px` : width,\n      }),\n      [width],\n    )\n    const classNames = useMemo(() => {\n      const { container, inputSuffixLayout, inputSuffixWrapper, inputSuffixText } =\n        classNameGenerator()\n\n      return {\n        container: container({ className }),\n        inputSuffixLayout: inputSuffixLayout(),\n        inputSuffixWrapper: inputSuffixWrapper(),\n        inputSuffixText: inputSuffixText(),\n      }\n    }, [className])\n\n    const stringToDate = useMemo(\n      () =>\n        parseInput\n          ? (str?: string | null) => (str ? parseInput(str) : null)\n          : (str?: string | null) => (str ? parseJpnDateString(str) : null),\n      [parseInput],\n    )\n\n    const dateToString = useMemo(() => formatDate || DEFAULT_DATE_TO_STRING, [formatDate])\n    const dateToAlternativeFormat = useMemo(\n      () => (showAlternative ? (d: Date | null) => (d ? showAlternative(d) : null) : RETURN_NULL),\n      [showAlternative],\n    )\n\n    const [selectedDate, setSelectedDate] = useState<Date | null>(stringToDate(value))\n    const inputRef = useRef<HTMLInputElement>(null)\n    const inputWrapperRef = useRef<HTMLDivElement>(null)\n    const calendarPortalRef = useRef<HTMLDivElement>(null)\n    const [inputRect, setInputRect] = useState<DOMRect | null>(null)\n    const [isInputFocused, setIsInputFocused] = useState(false)\n    const [isCalendarShown, setIsCalendarShown] = useState(false)\n    const [alternativeFormat, setAlternativeFormat] = useState<null | ReactNode>(null)\n    const calenderId = useId()\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n    )\n\n    const baseUpdateDate = useCallback(\n      (newDate: Date | null) => {\n        if (\n          !inputRef.current ||\n          newDate === selectedDate ||\n          (newDate && selectedDate && newDate.getTime() === selectedDate.getTime())\n        ) {\n          // Do not update date if the new date is same with the old one.\n          return\n        }\n\n        const isValid = !newDate || dayjs(newDate).isValid()\n        const errors: string[] = []\n\n        if (!isValid) {\n          errors.push('INVALID_DATE')\n        }\n\n        const nextDate = isValid ? newDate : null\n        const formatValue = dateToString(nextDate)\n\n        inputRef.current.value = formatValue\n        setAlternativeFormat(dateToAlternativeFormat(nextDate))\n        setSelectedDate(nextDate)\n\n        return [nextDate, formatValue, errors] as [Date | null, string, string[]]\n      },\n      [selectedDate, dateToString, dateToAlternativeFormat],\n    )\n    const updateDate = useMemo(() => {\n      if (onChange) {\n        return (e: ChangeLikeEvent, newDate: Date | null) => {\n          const result = baseUpdateDate(newDate)\n\n          if (result) {\n            e.preventDefault()\n            e.stopPropagation()\n\n            const [nextDate, formatValue, errors] = result\n            const event = new Event('change', { bubbles: true })\n            // HINT: resultが存在する時点でinputRef.currentは必ず存在する\n            const input = inputRef.current as HTMLInputElement\n\n            input.dispatchEvent(event)\n            onChange(\n              // HINT: 型問題のため別途オブジェクトをイベントに見立てる\n              {\n                stopPropagation: () => {\n                  event.stopPropagation()\n                },\n                preventDefault: () => {\n                  event.preventDefault()\n                },\n                target: input,\n                currentTarget: input,\n              } as ChangeEvent<HTMLInputElement>,\n              { date: nextDate, formatValue, errors },\n            )\n          }\n        }\n      }\n\n      return onChangeDate\n        ? (_e: ChangeLikeEvent, newDate: Date | null) => {\n            const result = baseUpdateDate(newDate)\n\n            if (result) {\n              const [nextDate, formatValue, errors] = result\n\n              onChangeDate(nextDate, formatValue, { errors })\n            }\n          }\n        : (_e: ChangeLikeEvent, newDate: Date | null) => {\n            baseUpdateDate(newDate)\n          }\n    }, [onChange, onChangeDate, baseUpdateDate])\n\n    const closeCalendar = useCallback(() => setIsCalendarShown(false), [])\n    const openCalendar = useCallback(() => {\n      if (inputWrapperRef.current) {\n        setIsCalendarShown(true)\n        setInputRect(inputWrapperRef.current.getBoundingClientRect())\n      }\n    }, [])\n\n    useEffect(() => {\n      if (value === undefined || !inputRef.current) {\n        return\n      }\n\n      /**\n       * Do not format the given value in the following cases\n       * - while input element is focused.\n       * - if the given value is not date formattable.\n       */\n      if (!isInputFocused) {\n        const newDate = stringToDate(value)\n\n        if (newDate && dayjs(newDate).isValid()) {\n          inputRef.current.value = dateToString(newDate)\n          setAlternativeFormat(dateToAlternativeFormat(newDate))\n          setSelectedDate(newDate)\n\n          return\n        }\n\n        setSelectedDate(null)\n      }\n\n      inputRef.current.value = value || ''\n    }, [value, isInputFocused, dateToString, dateToAlternativeFormat, stringToDate])\n\n    useOuterClick(\n      useMemo(() => [inputWrapperRef, calendarPortalRef], [inputWrapperRef, calendarPortalRef]),\n      closeCalendar,\n    )\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (!inputRef.current || !calendarPortalRef.current || e.key !== 'Tab') {\n          return\n        }\n\n        const calendarButtons = calendarPortalRef.current.querySelectorAll('button')\n\n        if (calendarButtons.length === 0) {\n          return\n        }\n\n        const firstCalendarButton = calendarButtons[0]\n\n        if (isInputFocused) {\n          if (e.shiftKey) {\n            // move focus from Input to previous elements of DatePicker\n            closeCalendar()\n\n            return\n          }\n\n          // move focus from Input to Calendar\n          e.preventDefault()\n          firstCalendarButton.focus()\n\n          return\n        }\n\n        const calendarButtonAry = Array.from(calendarButtons)\n        const currentFocused = calendarButtonAry.find((button) => button === e.target)\n\n        if (e.shiftKey) {\n          if (currentFocused === firstCalendarButton) {\n            // move focus from Calendar to Input\n            inputRef.current.focus()\n            e.preventDefault()\n          }\n        } else if (currentFocused === calendarButtonAry.at(-1)) {\n          // move focus from Calendar to next elements of DatePicker\n          inputRef.current.focus()\n          closeCalendar()\n        }\n      },\n      [isInputFocused, closeCalendar],\n    )\n\n    const baseHandleBlur = useCallback<FocusEventHandler<HTMLInputElement>>(\n      (e) => {\n        setIsInputFocused(false)\n        updateDate(e, e.target.value ? stringToDate(e.target.value) : null)\n      },\n      [stringToDate, updateDate],\n    )\n    const handleBlur = useMemo<FocusEventHandler<HTMLInputElement>>(\n      () =>\n        onBlur\n          ? (e) => {\n              baseHandleBlur(e)\n              onBlur(e)\n            }\n          : baseHandleBlur,\n      [onBlur, baseHandleBlur],\n    )\n\n    useGlobalKeyDown(handleKeyDown)\n\n    const caretIconColor = useMemo(() => {\n      if (isInputFocused || isCalendarShown) return textColor.black\n      if (disabled) return textColor.disabled\n\n      return textColor.grey\n    }, [isInputFocused, isCalendarShown, disabled])\n\n    const onDelegateKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (ESCAPE_KEY_REGEX.test(e.key)) {\n          e.stopPropagation()\n          // delay hiding calendar because calendar will be displayed when input is focused\n          requestAnimationFrame(closeCalendar)\n\n          if (inputRef.current) inputRef.current.focus()\n        }\n      },\n      [closeCalendar],\n    )\n    const onKeyPressInput = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter') {\n          ;(isCalendarShown ? openCalendar : closeCalendar)()\n          updateDate(e, stringToDate(e.currentTarget.value))\n        }\n      },\n      [isCalendarShown, updateDate, closeCalendar, openCalendar, stringToDate],\n    )\n    const onFocusInput = useCallback(() => {\n      setIsInputFocused(true)\n      openCalendar()\n    }, [openCalendar])\n    const onSelectDateCalendar = useCallback(\n      (e: ChangeLikeEvent, selected: Date | null) => {\n        updateDate(e, selected)\n        // delay hiding calendar because calendar will be displayed when input is focused\n        requestAnimationFrame(closeCalendar)\n\n        if (inputRef.current) inputRef.current.focus()\n      },\n      [updateDate, closeCalendar],\n    )\n\n    return (\n      <div\n        onClick={!isCalendarShown && !disabled ? openCalendar : undefined}\n        onKeyDown={isCalendarShown ? onDelegateKeyDown : undefined}\n        role=\"presentation\"\n        className={classNames.container}\n        style={containerStyle}\n      >\n        <div ref={inputWrapperRef}>\n          <Input\n            {...rest}\n            data-smarthr-ui-input=\"true\"\n            width=\"100%\"\n            name={name}\n            onChange={isCalendarShown ? closeCalendar : undefined}\n            onKeyPress={onKeyPressInput}\n            onFocus={onFocusInput}\n            onBlur={handleBlur}\n            suffix={\n              <InputSuffixIcon\n                alternativeFormat={showAlternative ? alternativeFormat : null}\n                caretIconColor={caretIconColor}\n                classNames={classNames}\n              />\n            }\n            disabled={disabled}\n            error={error}\n            ref={inputRef}\n            className=\"smarthr-ui-DatePicker-inputContainer\"\n            aria-expanded={isCalendarShown}\n            aria-controls={calenderId}\n            aria-haspopup={true}\n          />\n        </div>\n        {isCalendarShown && inputRect && (\n          <Portal inputRect={inputRect} ref={calendarPortalRef}>\n            <Calendar\n              id={calenderId}\n              value={selectedDate || undefined}\n              from={from}\n              to={to}\n              onSelectDate={onSelectDateCalendar}\n            />\n          </Portal>\n        )}\n      </div>\n    )\n  },\n)\n\nconst InputSuffixIcon = memo<{\n  classNames: { inputSuffixLayout: string; inputSuffixWrapper: string; inputSuffixText: string }\n  alternativeFormat: null | ReactNode\n  caretIconColor: ComponentProps<typeof FaCalendarDaysIcon>['color']\n}>(({ classNames, alternativeFormat, caretIconColor }) => (\n  <span className={classNames.inputSuffixLayout}>\n    <span className={classNames.inputSuffixWrapper}>\n      {alternativeFormat && <span className={classNames.inputSuffixText}>{alternativeFormat}</span>}\n      <FaCalendarDaysIcon color={caretIconColor} />\n    </span>\n  </span>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA+EO;AAEP;AACE;AACE;AACA;AACA;AAEA;AACD;AACF;AAED;AACA;AAEA;AACA;AAEA;;AAsBI;AAEI;AACD;AAGH;AACE;;AAIE;;;;;AAKJ;AAEA;AAGM;;AAKN;AACA;AAKA;AACA;AACA;AACA;;;;;AAKA;;AAOA;;AAIM;AACA;;;;AAMF;;;AAIE;;;AAIF;AAEA;AACA;;AAGA;;AAIJ;;AAEI;AACE;;;;;AAOE;;AAEA;AAEA;;;AAGE;;;;;;;AAOE;AACA;;;AAKR;;AAGF;AACE;AACI;;;;;;AAQJ;;AAEE;;AAGN;AACA;AACE;;;;;;;;;AAWA;;;;AAIG;;AAED;;;AAIE;;;;;;;AAUN;;AAOA;AAEI;;;;AAMA;;;AAIA;;AAGE;;AAEE;;;;;;;;;AAaJ;AAEA;AACE;;AAEE;;;;;;AAKF;AACA;;AAEJ;AAIF;;;AAIE;AAGF;AAGM;;;;;;AAUN;;;AAEE;;;;AAKF;;;;;;AAO4B;;AAE1B;AAGF;AAEI;;AAEE;;AAEJ;AAGF;;AAEE;AACF;;AAGI;;;;AAIsB;AACxB;AAIF;AA+CF;AAGF;;"}

package/esm/components/Dialog/RemoteDialogTrigger/RemoteDialogTrigger.js

@@ -20,10 +20,10 @@ const RemoteDialogTrigger = ({ targetId, children, onClick, ...rest }) => {
         onClickRemoteDialogTrigger(ariaControls);
     }, [onClick]);
     const actualTrigger = useMemo(() => cloneElement(children, {
+        ...rest,
         onClick: actualOnClick,
         'aria-haspopup': 'dialog',
         'aria-controls': targetId,
-        ...rest,
     }), [children, actualOnClick, targetId, rest]);
     return actualTrigger;
 };