smarthr-ui 98.1.0 → 99.0.0

package/lib/_virtual/cjs.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var _commonjsHelpers = require('./_commonjsHelpers.cjs');
-var cjs = require('./../vendor/.pnpm/react-draggable@4.5.0_react-dom@19.2.6_react@19.2.6__react@19.2.6/vendor/react-draggable/build/cjs/cjs.cjs');
+var cjs = require('./../vendor/.pnpm/react-draggable@4.5.0_react-dom@19.2.7_react@19.2.7__react@19.2.7/vendor/react-draggable/build/cjs/cjs.cjs');
 
 var cjsExports = cjs.__require();
 var Draggable = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(cjsExports);

package/lib/_virtual/cjs.js

@@ -1,5 +1,5 @@
 import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
-import { __require as requireCjs } from './../vendor/.pnpm/react-draggable@4.5.0_react-dom@19.2.6_react@19.2.6__react@19.2.6/vendor/react-draggable/build/cjs/cjs.js';
+import { __require as requireCjs } from './../vendor/.pnpm/react-draggable@4.5.0_react-dom@19.2.7_react@19.2.7__react@19.2.7/vendor/react-draggable/build/cjs/cjs.js';
 
 var cjsExports = requireCjs();
 var Draggable = /*@__PURE__*/getDefaultExportFromCjs(cjsExports);

package/lib/_virtual/index3.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var _commonjsHelpers = require('./_commonjsHelpers.cjs');
-var index = require('./../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.28_react@19.2.6/vendor/react-innertext/index.cjs');
+var index = require('./../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.28_react@19.2.7/vendor/react-innertext/index.cjs');
 
 var reactInnertextExports = index.__require();
 var innerText = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(reactInnertextExports);

package/lib/_virtual/index3.js

@@ -1,5 +1,5 @@
 import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
-import { __require as requireReactInnertext } from './../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.28_react@19.2.6/vendor/react-innertext/index.js';
+import { __require as requireReactInnertext } from './../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.28_react@19.2.7/vendor/react-innertext/index.js';
 
 var reactInnertextExports = requireReactInnertext();
 var innerText = /*@__PURE__*/getDefaultExportFromCjs(reactInnertextExports);

package/lib/_virtual/index4.cjs

@@ -1,8 +1,6 @@
 'use strict';
 
-var index = require('./../vendor/.pnpm/@smarthr_wareki@1.3.0/vendor/@smarthr/wareki/lib/index.cjs');
+var lodash_merge = {exports: {}};
 
-var libExports = index.__require();
-
-exports.libExports = libExports;
+exports.__module = lodash_merge;
 //# sourceMappingURL=index4.cjs.map

package/lib/_virtual/index4.cjs.map

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

package/lib/_virtual/index4.js

@@ -1,6 +1,4 @@
-import { __require as requireLib } from './../vendor/.pnpm/@smarthr_wareki@1.3.0/vendor/@smarthr/wareki/lib/index.js';
+var lodash_merge = {exports: {}};
 
-var libExports = requireLib();
-
-export { libExports as l };
+export { lodash_merge as __module };
 //# sourceMappingURL=index4.js.map

package/lib/_virtual/index4.js.map

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

package/lib/_virtual/index5.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var lodash_merge = {exports: {}};
+var propTypes = {exports: {}};
 
-exports.__module = lodash_merge;
+exports.__module = propTypes;
 //# sourceMappingURL=index5.cjs.map

package/lib/_virtual/index5.js

@@ -1,4 +1,4 @@
-var lodash_merge = {exports: {}};
+var propTypes = {exports: {}};
 
-export { lodash_merge as __module };
+export { propTypes as __module };
 //# sourceMappingURL=index5.js.map

package/lib/components/AccordionPanel/AccordionPanel.cjs

@@ -4,14 +4,19 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+var hooks_useLatest = require('../../hooks/useLatest.cjs');
 var libs_map = require('../../libs/map.cjs');
 var components_AccordionPanel_accordionPanelHelper = require('./accordionPanelHelper.cjs');
 
+const DEFAULT_EXPANDED_ARRAY = [];
+const DEFAULT_EXPANDED_MAP = libs_map.flatArrayToMap(DEFAULT_EXPANDED_ARRAY);
 const AccordionPanelContext = React.createContext({
     iconPosition: 'left',
-    expandedItems: new Map(),
+    expandedItems: DEFAULT_EXPANDED_MAP,
     expandableMultiply: true,
     parentRef: null,
+    handleClickTrigger: () => { },
+    handleKeyDown: () => { },
 });
 const ROUNDED = {
     t_l: '[&>.smarthr-ui-AccordionPanel-item:first-child_.smarthr-ui-AccordionPanel-trigger]:shr-rounded-tl-l',
@@ -37,20 +42,54 @@ const classNameGenerator = index.tv({
         rounded: false,
     },
 });
-const AccordionPanel = ({ iconPosition = 'left', expandableMultiply = true, defaultExpanded = [], className, onClick: onClickProps, rounded, ...rest }) => {
-    const [expandedItems, setExpanded] = React.useState(libs_map.flatArrayToMap(defaultExpanded));
+const AccordionPanel = ({ iconPosition = 'left', expandableMultiply = true, defaultExpanded = DEFAULT_EXPANDED_ARRAY, className, onClick, rounded, ...rest }) => {
+    const [expandedItems, setExpanded] = React.useState(() => libs_map.flatArrayToMap(defaultExpanded));
     const parentRef = React.useRef(null);
     const actualClassName = React.useMemo(() => classNameGenerator({ className, rounded }), [rounded, className]);
-    const onClickTrigger = React.useCallback((itemName, isExpanded) => {
-        setExpanded(components_AccordionPanel_accordionPanelHelper.getNewExpandedItems(expandedItems, itemName, isExpanded, expandableMultiply));
-    }, [expandableMultiply, expandedItems]);
-    React.useEffect(() => {
-        if (defaultExpanded.length > 0)
-            setExpanded(libs_map.flatArrayToMap(defaultExpanded));
-    }, [defaultExpanded]);
+    const latest = hooks_useLatest.useLatest({ onClick, expandableMultiply });
+    const functions = React.useMemo(() => ({
+        handleClickTrigger: (e) => {
+            const { currentTarget } = e;
+            setExpanded((prevExpandedItems) => {
+                const newExpandedItems = components_AccordionPanel_accordionPanelHelper.getNewExpandedItems(prevExpandedItems, currentTarget.value, currentTarget.getAttribute('aria-expanded') !== 'true', latest.expandableMultiply);
+                latest.onClick?.(libs_map.mapToKeyArray(newExpandedItems));
+                return newExpandedItems;
+            });
+        },
+        handleKeyDown: (e) => {
+            if (!parentRef.current) {
+                return;
+            }
+            const item = e.target;
+            switch (e.key) {
+                case 'Home': {
+                    e.preventDefault();
+                    components_AccordionPanel_accordionPanelHelper.focusFirstSibling(parentRef.current);
+                    break;
+                }
+                case 'End': {
+                    e.preventDefault();
+                    components_AccordionPanel_accordionPanelHelper.focusLastSibling(parentRef.current);
+                    break;
+                }
+                case 'ArrowLeft':
+                case 'ArrowUp': {
+                    e.preventDefault();
+                    components_AccordionPanel_accordionPanelHelper.focusPreviousSibling(item, parentRef.current);
+                    break;
+                }
+                case 'ArrowRight':
+                case 'ArrowDown': {
+                    e.preventDefault();
+                    components_AccordionPanel_accordionPanelHelper.focusNextSibling(item, parentRef.current);
+                    break;
+                }
+            }
+        },
+    }), [latest]);
     return (jsxRuntime.jsx(AccordionPanelContext.Provider, { value: {
-            onClickTrigger,
-            onClickProps,
+            handleClickTrigger: functions.handleClickTrigger,
+            handleKeyDown: functions.handleKeyDown,
             expandedItems,
             iconPosition,
             expandableMultiply,

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanel.cjs","sources":["../../../src/components/AccordionPanel/AccordionPanel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type RefObject,\n  createContext,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { flatArrayToMap } from '../../libs/map'\n\nimport { getNewExpandedItems } from './accordionPanelHelper'\n\ntype AbstractProps = PropsWithChildren<{\n  /** アイコンの左右位置 */\n  iconPosition?: 'left' | 'right'\n  /** 複数のパネルを同時に開くことを許容するかどうか */\n  expandableMultiply?: boolean\n  /** デフォルトで開いた状態にするアイテムの `name` の配列 */\n  defaultExpanded?: string[]\n  /** トリガのクリックイベントを処理するハンドラ */\n  onClick?: (expandedItems: string[]) => void\n}> &\n  VariantProps<typeof classNameGenerator>\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nexport const AccordionPanelContext = createContext<{\n  iconPosition: 'left' | 'right'\n  expandedItems: Map<string, string>\n  expandableMultiply: boolean\n  parentRef: RefObject<HTMLDivElement> | null\n  onClickTrigger?: (itemName: string, isExpanded: boolean) => void\n  onClickProps?: (expandedItems: string[]) => void\n}>({\n  iconPosition: 'left',\n  expandedItems: new Map(),\n  expandableMultiply: true,\n  parentRef: null,\n})\n\nconst ROUNDED = {\n  t_l: '[&>.smarthr-ui-AccordionPanel-item:first-child_.smarthr-ui-AccordionPanel-trigger]:shr-rounded-tl-l',\n  t_r: '[&>.smarthr-ui-AccordionPanel-item:first-child_.smarthr-ui-AccordionPanel-trigger]:shr-rounded-tr-l',\n  b_l: '[&>.smarthr-ui-AccordionPanel-item:last-child_.smarthr-ui-AccordionPanel-trigger:not([aria-expanded=\"true\"])]:shr-rounded-bl-l',\n  b_r: '[&>.smarthr-ui-AccordionPanel-item:last-child_.smarthr-ui-AccordionPanel-trigger:not([aria-expanded=\"true\"])]:shr-rounded-br-l',\n}\n\nconst ROUNDED_ALL = [ROUNDED.t_l, ROUNDED.t_r, ROUNDED.b_l, ROUNDED.b_r]\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-AccordionPanel',\n  variants: {\n    rounded: {\n      true: ROUNDED_ALL,\n      false: '',\n      all: ROUNDED_ALL,\n      top: [ROUNDED.t_l, ROUNDED.t_r],\n      right: [ROUNDED.t_r, ROUNDED.b_r],\n      bottom: [ROUNDED.b_l, ROUNDED.b_r],\n      left: [ROUNDED.t_l, ROUNDED.b_l],\n    },\n  },\n  defaultVariants: {\n    rounded: false,\n  },\n})\n\nexport const AccordionPanel: FC<Props> = ({\n  iconPosition = 'left',\n  expandableMultiply = true,\n  defaultExpanded = [],\n  className,\n  onClick: onClickProps,\n  rounded,\n  ...rest\n}) => {\n  const [expandedItems, setExpanded] = useState(flatArrayToMap(defaultExpanded))\n  const parentRef = useRef<HTMLDivElement>(null)\n  const actualClassName = useMemo(\n    () => classNameGenerator({ className, rounded }),\n    [rounded, className],\n  )\n\n  const onClickTrigger = useCallback(\n    (itemName: string, isExpanded: boolean) => {\n      setExpanded(getNewExpandedItems(expandedItems, itemName, isExpanded, expandableMultiply))\n    },\n    [expandableMultiply, expandedItems],\n  )\n\n  useEffect(() => {\n    if (defaultExpanded.length > 0) setExpanded(flatArrayToMap(defaultExpanded))\n  }, [defaultExpanded])\n\n  return (\n    <AccordionPanelContext.Provider\n      value={{\n        onClickTrigger,\n        onClickProps,\n        expandedItems,\n        iconPosition,\n        expandableMultiply,\n        parentRef,\n      }}\n    >\n      <div {...rest} ref={parentRef} role=\"presentation\" className={actualClassName} />\n    </AccordionPanelContext.Provider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAiCO;AAQL;;AAEA;AACA;AACD;AAED;AACE;AACA;AACA;AACA;;AAGF;AAEA;AACE;AACA;AACE;AACE;AACA;AACA;;;;;AAKD;AACF;AACD;AACE;AACD;AACF;AAEM;AASL;AACA;;;AAQI;AACF;;AAKA;AAAgC;AAClC;AAEA;;;;;;;AASK;AAKP;;;"}
+{"version":3,"file":"AccordionPanel.cjs","sources":["../../../src/components/AccordionPanel/AccordionPanel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type KeyboardEventHandler,\n  type MouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  createContext,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { flatArrayToMap, mapToKeyArray } from '../../libs/map'\n\nimport {\n  focusFirstSibling,\n  focusLastSibling,\n  focusNextSibling,\n  focusPreviousSibling,\n  getNewExpandedItems,\n} from './accordionPanelHelper'\n\ntype AbstractProps = PropsWithChildren<{\n  /** アイコンの左右位置 */\n  iconPosition?: 'left' | 'right'\n  /** 複数のパネルを同時に開くことを許容するかどうか */\n  expandableMultiply?: boolean\n  /** デフォルトで開いた状態にするアイテムの `name` の配列 */\n  defaultExpanded?: string[]\n  /** トリガのクリックイベントを処理するハンドラ */\n  onClick?: (expandedItems: string[]) => void\n}> &\n  VariantProps<typeof classNameGenerator>\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst DEFAULT_EXPANDED_ARRAY: string[] = []\nconst DEFAULT_EXPANDED_MAP = flatArrayToMap(DEFAULT_EXPANDED_ARRAY)\n\nexport const AccordionPanelContext = createContext<{\n  iconPosition: 'left' | 'right'\n  expandedItems: Map<string, string>\n  expandableMultiply: boolean\n  parentRef: RefObject<HTMLDivElement> | null\n  handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => void\n  handleKeyDown: KeyboardEventHandler<HTMLButtonElement>\n}>({\n  iconPosition: 'left',\n  expandedItems: DEFAULT_EXPANDED_MAP,\n  expandableMultiply: true,\n  parentRef: null,\n  handleClickTrigger: () => {},\n  handleKeyDown: () => {},\n})\n\nconst ROUNDED = {\n  t_l: '[&>.smarthr-ui-AccordionPanel-item:first-child_.smarthr-ui-AccordionPanel-trigger]:shr-rounded-tl-l',\n  t_r: '[&>.smarthr-ui-AccordionPanel-item:first-child_.smarthr-ui-AccordionPanel-trigger]:shr-rounded-tr-l',\n  b_l: '[&>.smarthr-ui-AccordionPanel-item:last-child_.smarthr-ui-AccordionPanel-trigger:not([aria-expanded=\"true\"])]:shr-rounded-bl-l',\n  b_r: '[&>.smarthr-ui-AccordionPanel-item:last-child_.smarthr-ui-AccordionPanel-trigger:not([aria-expanded=\"true\"])]:shr-rounded-br-l',\n}\n\nconst ROUNDED_ALL = [ROUNDED.t_l, ROUNDED.t_r, ROUNDED.b_l, ROUNDED.b_r]\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-AccordionPanel',\n  variants: {\n    rounded: {\n      true: ROUNDED_ALL,\n      false: '',\n      all: ROUNDED_ALL,\n      top: [ROUNDED.t_l, ROUNDED.t_r],\n      right: [ROUNDED.t_r, ROUNDED.b_r],\n      bottom: [ROUNDED.b_l, ROUNDED.b_r],\n      left: [ROUNDED.t_l, ROUNDED.b_l],\n    },\n  },\n  defaultVariants: {\n    rounded: false,\n  },\n})\n\nexport const AccordionPanel: FC<Props> = ({\n  iconPosition = 'left',\n  expandableMultiply = true,\n  defaultExpanded = DEFAULT_EXPANDED_ARRAY,\n  className,\n  onClick,\n  rounded,\n  ...rest\n}) => {\n  const [expandedItems, setExpanded] = useState(() => flatArrayToMap(defaultExpanded))\n  const parentRef = useRef<HTMLDivElement>(null)\n  const actualClassName = useMemo(\n    () => classNameGenerator({ className, rounded }),\n    [rounded, className],\n  )\n\n  const latest = useLatest({ onClick, expandableMultiply })\n\n  const functions = useMemo(\n    () => ({\n      handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => {\n        const { currentTarget } = e\n\n        setExpanded((prevExpandedItems) => {\n          const newExpandedItems = getNewExpandedItems(\n            prevExpandedItems,\n            currentTarget.value,\n            currentTarget.getAttribute('aria-expanded') !== 'true',\n            latest.expandableMultiply,\n          )\n\n          latest.onClick?.(mapToKeyArray(newExpandedItems))\n\n          return newExpandedItems\n        })\n      },\n      handleKeyDown: (e: Parameters<KeyboardEventHandler<HTMLButtonElement>>[0]): void => {\n        if (!parentRef.current) {\n          return\n        }\n\n        const item = e.target as HTMLElement\n\n        switch (e.key) {\n          case 'Home': {\n            e.preventDefault()\n            focusFirstSibling(parentRef.current)\n            break\n          }\n          case 'End': {\n            e.preventDefault()\n            focusLastSibling(parentRef.current)\n            break\n          }\n          case 'ArrowLeft':\n          case 'ArrowUp': {\n            e.preventDefault()\n            focusPreviousSibling(item, parentRef.current)\n            break\n          }\n          case 'ArrowRight':\n          case 'ArrowDown': {\n            e.preventDefault()\n            focusNextSibling(item, parentRef.current)\n            break\n          }\n        }\n      },\n    }),\n    [latest],\n  )\n\n  return (\n    <AccordionPanelContext.Provider\n      value={{\n        handleClickTrigger: functions.handleClickTrigger,\n        handleKeyDown: functions.handleKeyDown,\n        expandedItems,\n        iconPosition,\n        expandableMultiply,\n        parentRef,\n      }}\n    >\n      <div {...rest} ref={parentRef} role=\"presentation\" className={actualClassName} />\n    </AccordionPanelContext.Provider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;AAwCA;AACA;AAEO;AAQL;AACA;AACA;AACA;AACA;AACA;AACD;AAED;AACE;AACA;AACA;AACA;;AAGF;AAEA;AACE;AACA;AACE;AACE;AACA;AACA;;;;;AAKD;AACF;AACD;AACE;AACD;AACF;AAEM;AASL;AACA;;;AAQA;AAEI;AACE;AAEA;;;AAUE;AACF;;AAEF;AACE;;;AAIA;AAEA;;;AAGI;;;;;AAKA;;;AAGF;;;AAGE;;;AAGF;;;AAGE;;;;;AAKP;AAIH;;;;;;;AASK;AAKP;;;"}

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

@@ -1,4 +1,4 @@
-import { type ComponentProps, type FC, type PropsWithChildren, type RefObject } from 'react';
+import { type ComponentProps, type FC, type KeyboardEventHandler, type MouseEvent, type PropsWithChildren, type RefObject } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 type AbstractProps = PropsWithChildren<{
     /** アイコンの左右位置 */
@@ -16,8 +16,8 @@ export declare const AccordionPanelContext: import("react").Context<{
     expandedItems: Map<string, string>;
     expandableMultiply: boolean;
     parentRef: RefObject<HTMLDivElement> | null;
-    onClickTrigger?: (itemName: string, isExpanded: boolean) => void;
-    onClickProps?: (expandedItems: string[]) => void;
+    handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => void;
+    handleKeyDown: KeyboardEventHandler<HTMLButtonElement>;
 }>;
 declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
     rounded: {

package/lib/components/AccordionPanel/AccordionPanel.js

@@ -1,15 +1,20 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { createContext, useState, useRef, useMemo } from 'react';
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
-import { flatArrayToMap } from '../../libs/map.js';
-import { getNewExpandedItems } from './accordionPanelHelper.js';
+import { useLatest } from '../../hooks/useLatest.js';
+import { flatArrayToMap, mapToKeyArray } from '../../libs/map.js';
+import { focusNextSibling, focusPreviousSibling, focusLastSibling, focusFirstSibling, getNewExpandedItems } from './accordionPanelHelper.js';
 
+const DEFAULT_EXPANDED_ARRAY = [];
+const DEFAULT_EXPANDED_MAP = flatArrayToMap(DEFAULT_EXPANDED_ARRAY);
 const AccordionPanelContext = createContext({
     iconPosition: 'left',
-    expandedItems: new Map(),
+    expandedItems: DEFAULT_EXPANDED_MAP,
     expandableMultiply: true,
     parentRef: null,
+    handleClickTrigger: () => { },
+    handleKeyDown: () => { },
 });
 const ROUNDED = {
     t_l: '[&>.smarthr-ui-AccordionPanel-item:first-child_.smarthr-ui-AccordionPanel-trigger]:shr-rounded-tl-l',
@@ -35,20 +40,54 @@ const classNameGenerator = ce({
         rounded: false,
     },
 });
-const AccordionPanel = ({ iconPosition = 'left', expandableMultiply = true, defaultExpanded = [], className, onClick: onClickProps, rounded, ...rest }) => {
-    const [expandedItems, setExpanded] = useState(flatArrayToMap(defaultExpanded));
+const AccordionPanel = ({ iconPosition = 'left', expandableMultiply = true, defaultExpanded = DEFAULT_EXPANDED_ARRAY, className, onClick, rounded, ...rest }) => {
+    const [expandedItems, setExpanded] = useState(() => flatArrayToMap(defaultExpanded));
     const parentRef = useRef(null);
     const actualClassName = useMemo(() => classNameGenerator({ className, rounded }), [rounded, className]);
-    const onClickTrigger = useCallback((itemName, isExpanded) => {
-        setExpanded(getNewExpandedItems(expandedItems, itemName, isExpanded, expandableMultiply));
-    }, [expandableMultiply, expandedItems]);
-    useEffect(() => {
-        if (defaultExpanded.length > 0)
-            setExpanded(flatArrayToMap(defaultExpanded));
-    }, [defaultExpanded]);
+    const latest = useLatest({ onClick, expandableMultiply });
+    const functions = useMemo(() => ({
+        handleClickTrigger: (e) => {
+            const { currentTarget } = e;
+            setExpanded((prevExpandedItems) => {
+                const newExpandedItems = getNewExpandedItems(prevExpandedItems, currentTarget.value, currentTarget.getAttribute('aria-expanded') !== 'true', latest.expandableMultiply);
+                latest.onClick?.(mapToKeyArray(newExpandedItems));
+                return newExpandedItems;
+            });
+        },
+        handleKeyDown: (e) => {
+            if (!parentRef.current) {
+                return;
+            }
+            const item = e.target;
+            switch (e.key) {
+                case 'Home': {
+                    e.preventDefault();
+                    focusFirstSibling(parentRef.current);
+                    break;
+                }
+                case 'End': {
+                    e.preventDefault();
+                    focusLastSibling(parentRef.current);
+                    break;
+                }
+                case 'ArrowLeft':
+                case 'ArrowUp': {
+                    e.preventDefault();
+                    focusPreviousSibling(item, parentRef.current);
+                    break;
+                }
+                case 'ArrowRight':
+                case 'ArrowDown': {
+                    e.preventDefault();
+                    focusNextSibling(item, parentRef.current);
+                    break;
+                }
+            }
+        },
+    }), [latest]);
     return (jsx(AccordionPanelContext.Provider, { value: {
-            onClickTrigger,
-            onClickProps,
+            handleClickTrigger: functions.handleClickTrigger,
+            handleKeyDown: functions.handleKeyDown,
             expandedItems,
             iconPosition,
             expandableMultiply,

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanel.js","sources":["../../../src/components/AccordionPanel/AccordionPanel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type RefObject,\n  createContext,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { flatArrayToMap } from '../../libs/map'\n\nimport { getNewExpandedItems } from './accordionPanelHelper'\n\ntype AbstractProps = PropsWithChildren<{\n  /** アイコンの左右位置 */\n  iconPosition?: 'left' | 'right'\n  /** 複数のパネルを同時に開くことを許容するかどうか */\n  expandableMultiply?: boolean\n  /** デフォルトで開いた状態にするアイテムの `name` の配列 */\n  defaultExpanded?: string[]\n  /** トリガのクリックイベントを処理するハンドラ */\n  onClick?: (expandedItems: string[]) => void\n}> &\n  VariantProps<typeof classNameGenerator>\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nexport const AccordionPanelContext = createContext<{\n  iconPosition: 'left' | 'right'\n  expandedItems: Map<string, string>\n  expandableMultiply: boolean\n  parentRef: RefObject<HTMLDivElement> | null\n  onClickTrigger?: (itemName: string, isExpanded: boolean) => void\n  onClickProps?: (expandedItems: string[]) => void\n}>({\n  iconPosition: 'left',\n  expandedItems: new Map(),\n  expandableMultiply: true,\n  parentRef: null,\n})\n\nconst ROUNDED = {\n  t_l: '[&>.smarthr-ui-AccordionPanel-item:first-child_.smarthr-ui-AccordionPanel-trigger]:shr-rounded-tl-l',\n  t_r: '[&>.smarthr-ui-AccordionPanel-item:first-child_.smarthr-ui-AccordionPanel-trigger]:shr-rounded-tr-l',\n  b_l: '[&>.smarthr-ui-AccordionPanel-item:last-child_.smarthr-ui-AccordionPanel-trigger:not([aria-expanded=\"true\"])]:shr-rounded-bl-l',\n  b_r: '[&>.smarthr-ui-AccordionPanel-item:last-child_.smarthr-ui-AccordionPanel-trigger:not([aria-expanded=\"true\"])]:shr-rounded-br-l',\n}\n\nconst ROUNDED_ALL = [ROUNDED.t_l, ROUNDED.t_r, ROUNDED.b_l, ROUNDED.b_r]\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-AccordionPanel',\n  variants: {\n    rounded: {\n      true: ROUNDED_ALL,\n      false: '',\n      all: ROUNDED_ALL,\n      top: [ROUNDED.t_l, ROUNDED.t_r],\n      right: [ROUNDED.t_r, ROUNDED.b_r],\n      bottom: [ROUNDED.b_l, ROUNDED.b_r],\n      left: [ROUNDED.t_l, ROUNDED.b_l],\n    },\n  },\n  defaultVariants: {\n    rounded: false,\n  },\n})\n\nexport const AccordionPanel: FC<Props> = ({\n  iconPosition = 'left',\n  expandableMultiply = true,\n  defaultExpanded = [],\n  className,\n  onClick: onClickProps,\n  rounded,\n  ...rest\n}) => {\n  const [expandedItems, setExpanded] = useState(flatArrayToMap(defaultExpanded))\n  const parentRef = useRef<HTMLDivElement>(null)\n  const actualClassName = useMemo(\n    () => classNameGenerator({ className, rounded }),\n    [rounded, className],\n  )\n\n  const onClickTrigger = useCallback(\n    (itemName: string, isExpanded: boolean) => {\n      setExpanded(getNewExpandedItems(expandedItems, itemName, isExpanded, expandableMultiply))\n    },\n    [expandableMultiply, expandedItems],\n  )\n\n  useEffect(() => {\n    if (defaultExpanded.length > 0) setExpanded(flatArrayToMap(defaultExpanded))\n  }, [defaultExpanded])\n\n  return (\n    <AccordionPanelContext.Provider\n      value={{\n        onClickTrigger,\n        onClickProps,\n        expandedItems,\n        iconPosition,\n        expandableMultiply,\n        parentRef,\n      }}\n    >\n      <div {...rest} ref={parentRef} role=\"presentation\" className={actualClassName} />\n    </AccordionPanelContext.Provider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AAiCO;AAQL;;AAEA;AACA;AACD;AAED;AACE;AACA;AACA;AACA;;AAGF;AAEA;AACE;AACA;AACE;AACE;AACA;AACA;;;;;AAKD;AACF;AACD;AACE;AACD;AACF;AAEM;AASL;AACA;;;AAQI;AACF;;AAKA;AAAgC;AAClC;AAEA;;;;;;;AASK;AAKP;;"}
+{"version":3,"file":"AccordionPanel.js","sources":["../../../src/components/AccordionPanel/AccordionPanel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type KeyboardEventHandler,\n  type MouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  createContext,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { flatArrayToMap, mapToKeyArray } from '../../libs/map'\n\nimport {\n  focusFirstSibling,\n  focusLastSibling,\n  focusNextSibling,\n  focusPreviousSibling,\n  getNewExpandedItems,\n} from './accordionPanelHelper'\n\ntype AbstractProps = PropsWithChildren<{\n  /** アイコンの左右位置 */\n  iconPosition?: 'left' | 'right'\n  /** 複数のパネルを同時に開くことを許容するかどうか */\n  expandableMultiply?: boolean\n  /** デフォルトで開いた状態にするアイテムの `name` の配列 */\n  defaultExpanded?: string[]\n  /** トリガのクリックイベントを処理するハンドラ */\n  onClick?: (expandedItems: string[]) => void\n}> &\n  VariantProps<typeof classNameGenerator>\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst DEFAULT_EXPANDED_ARRAY: string[] = []\nconst DEFAULT_EXPANDED_MAP = flatArrayToMap(DEFAULT_EXPANDED_ARRAY)\n\nexport const AccordionPanelContext = createContext<{\n  iconPosition: 'left' | 'right'\n  expandedItems: Map<string, string>\n  expandableMultiply: boolean\n  parentRef: RefObject<HTMLDivElement> | null\n  handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => void\n  handleKeyDown: KeyboardEventHandler<HTMLButtonElement>\n}>({\n  iconPosition: 'left',\n  expandedItems: DEFAULT_EXPANDED_MAP,\n  expandableMultiply: true,\n  parentRef: null,\n  handleClickTrigger: () => {},\n  handleKeyDown: () => {},\n})\n\nconst ROUNDED = {\n  t_l: '[&>.smarthr-ui-AccordionPanel-item:first-child_.smarthr-ui-AccordionPanel-trigger]:shr-rounded-tl-l',\n  t_r: '[&>.smarthr-ui-AccordionPanel-item:first-child_.smarthr-ui-AccordionPanel-trigger]:shr-rounded-tr-l',\n  b_l: '[&>.smarthr-ui-AccordionPanel-item:last-child_.smarthr-ui-AccordionPanel-trigger:not([aria-expanded=\"true\"])]:shr-rounded-bl-l',\n  b_r: '[&>.smarthr-ui-AccordionPanel-item:last-child_.smarthr-ui-AccordionPanel-trigger:not([aria-expanded=\"true\"])]:shr-rounded-br-l',\n}\n\nconst ROUNDED_ALL = [ROUNDED.t_l, ROUNDED.t_r, ROUNDED.b_l, ROUNDED.b_r]\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-AccordionPanel',\n  variants: {\n    rounded: {\n      true: ROUNDED_ALL,\n      false: '',\n      all: ROUNDED_ALL,\n      top: [ROUNDED.t_l, ROUNDED.t_r],\n      right: [ROUNDED.t_r, ROUNDED.b_r],\n      bottom: [ROUNDED.b_l, ROUNDED.b_r],\n      left: [ROUNDED.t_l, ROUNDED.b_l],\n    },\n  },\n  defaultVariants: {\n    rounded: false,\n  },\n})\n\nexport const AccordionPanel: FC<Props> = ({\n  iconPosition = 'left',\n  expandableMultiply = true,\n  defaultExpanded = DEFAULT_EXPANDED_ARRAY,\n  className,\n  onClick,\n  rounded,\n  ...rest\n}) => {\n  const [expandedItems, setExpanded] = useState(() => flatArrayToMap(defaultExpanded))\n  const parentRef = useRef<HTMLDivElement>(null)\n  const actualClassName = useMemo(\n    () => classNameGenerator({ className, rounded }),\n    [rounded, className],\n  )\n\n  const latest = useLatest({ onClick, expandableMultiply })\n\n  const functions = useMemo(\n    () => ({\n      handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => {\n        const { currentTarget } = e\n\n        setExpanded((prevExpandedItems) => {\n          const newExpandedItems = getNewExpandedItems(\n            prevExpandedItems,\n            currentTarget.value,\n            currentTarget.getAttribute('aria-expanded') !== 'true',\n            latest.expandableMultiply,\n          )\n\n          latest.onClick?.(mapToKeyArray(newExpandedItems))\n\n          return newExpandedItems\n        })\n      },\n      handleKeyDown: (e: Parameters<KeyboardEventHandler<HTMLButtonElement>>[0]): void => {\n        if (!parentRef.current) {\n          return\n        }\n\n        const item = e.target as HTMLElement\n\n        switch (e.key) {\n          case 'Home': {\n            e.preventDefault()\n            focusFirstSibling(parentRef.current)\n            break\n          }\n          case 'End': {\n            e.preventDefault()\n            focusLastSibling(parentRef.current)\n            break\n          }\n          case 'ArrowLeft':\n          case 'ArrowUp': {\n            e.preventDefault()\n            focusPreviousSibling(item, parentRef.current)\n            break\n          }\n          case 'ArrowRight':\n          case 'ArrowDown': {\n            e.preventDefault()\n            focusNextSibling(item, parentRef.current)\n            break\n          }\n        }\n      },\n    }),\n    [latest],\n  )\n\n  return (\n    <AccordionPanelContext.Provider\n      value={{\n        handleClickTrigger: functions.handleClickTrigger,\n        handleKeyDown: functions.handleKeyDown,\n        expandedItems,\n        iconPosition,\n        expandableMultiply,\n        parentRef,\n      }}\n    >\n      <div {...rest} ref={parentRef} role=\"presentation\" className={actualClassName} />\n    </AccordionPanelContext.Provider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AAwCA;AACA;AAEO;AAQL;AACA;AACA;AACA;AACA;AACA;AACD;AAED;AACE;AACA;AACA;AACA;;AAGF;AAEA;AACE;AACA;AACE;AACE;AACA;AACA;;;;;AAKD;AACF;AACD;AACE;AACD;AACF;AAEM;AASL;AACA;;;AAQA;AAEI;AACE;AAEA;;;AAUE;AACF;;AAEF;AACE;;;AAIA;AAEA;;;AAGI;;;;;AAKA;;;AAGF;;;AAGE;;;AAGF;;;AAGE;;;;;AAKP;AAIH;;;;;;;AASK;AAKP;;"}

package/lib/components/AccordionPanel/AccordionPanelContent.cjs

@@ -7,7 +7,7 @@ var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.
 var libs_map = require('../../libs/map.cjs');
 var components_AccordionPanel_AccordionPanel = require('./AccordionPanel.cjs');
 var components_AccordionPanel_AccordionPanelItem = require('./AccordionPanelItem.cjs');
-var Transition = require('./../../vendor/.pnpm/react-transition-group@4.4.5_react-dom@19.2.6_react@19.2.6__react@19.2.6/vendor/react-transition-group/esm/Transition.cjs');
+var Transition = require('./../../vendor/.pnpm/react-transition-group@4.4.5_react-dom@19.2.7_react@19.2.7__react@19.2.7/vendor/react-transition-group/esm/Transition.cjs');
 
 const classNameGenerator = index.tv({
     base: [

package/lib/components/AccordionPanel/AccordionPanelContent.js

@@ -5,7 +5,7 @@ import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindc
 import { getIsInclude } from '../../libs/map.js';
 import { AccordionPanelContext } from './AccordionPanel.js';
 import { AccordionPanelItemContext } from './AccordionPanelItem.js';
-import Transition from './../../vendor/.pnpm/react-transition-group@4.4.5_react-dom@19.2.6_react@19.2.6__react@19.2.6/vendor/react-transition-group/esm/Transition.js';
+import Transition from './../../vendor/.pnpm/react-transition-group@4.4.5_react-dom@19.2.7_react@19.2.7__react@19.2.7/vendor/react-transition-group/esm/Transition.js';
 
 const classNameGenerator = ce({
     base: [

package/lib/components/AccordionPanel/AccordionPanelTrigger.cjs

@@ -18,7 +18,6 @@ require('../Layout/Center/Center.cjs');
 require('../Layout/Container/Container.cjs');
 var components_AccordionPanel_AccordionPanel = require('./AccordionPanel.cjs');
 var components_AccordionPanel_AccordionPanelItem = require('./AccordionPanelItem.cjs');
-var components_AccordionPanel_accordionPanelHelper = require('./accordionPanelHelper.cjs');
 
 const classNameGenerator = index.tv({
     slots: {
@@ -55,67 +54,13 @@ const AccordionPanelTrigger = ({ children, className, headingType = 'blockTitle'
         };
     }, [className]);
     const { name, contentId, triggerId } = React.useContext(components_AccordionPanel_AccordionPanelItem.AccordionPanelItemContext);
-    const { iconPosition, expandedItems, onClickTrigger, onClickProps, expandableMultiply, parentRef, } = React.useContext(components_AccordionPanel_AccordionPanel.AccordionPanelContext);
+    const { iconPosition, expandedItems, handleClickTrigger, handleKeyDown } = React.useContext(components_AccordionPanel_AccordionPanel.AccordionPanelContext);
     const isExpanded = React.useMemo(() => libs_map.getIsInclude(expandedItems, name), [expandedItems, name]);
-    const actualOnClickTrigger = React.useMemo(() => onClickTrigger
-        ? (e) => onClickTrigger(e.currentTarget.value, !isExpanded)
-        : undefined, [isExpanded, onClickTrigger]);
-    const actualOnClickProps = React.useMemo(() => onClickProps
-        ? (e) => {
-            const newExpandedItems = components_AccordionPanel_accordionPanelHelper.getNewExpandedItems(expandedItems, e.currentTarget.value, !isExpanded, expandableMultiply);
-            onClickProps(libs_map.mapToKeyArray(newExpandedItems));
-        }
-        : undefined, [isExpanded, expandedItems, expandableMultiply, onClickProps]);
-    const handleClick = React.useMemo(() => {
-        if (actualOnClickTrigger) {
-            if (actualOnClickProps) {
-                return (e) => {
-                    actualOnClickTrigger(e);
-                    actualOnClickProps(e);
-                };
-            }
-            return actualOnClickTrigger;
-        }
-        else if (actualOnClickProps) {
-            return actualOnClickProps;
-        }
-        return undefined;
-    }, [actualOnClickProps, actualOnClickTrigger]);
-    const handleKeyDown = React.useCallback((e) => {
-        if (!parentRef?.current) {
-            return;
-        }
-        const item = e.target;
-        switch (e.key) {
-            case 'Home': {
-                e.preventDefault();
-                components_AccordionPanel_accordionPanelHelper.focusFirstSibling(parentRef.current);
-                break;
-            }
-            case 'End': {
-                e.preventDefault();
-                components_AccordionPanel_accordionPanelHelper.focusLastSibling(parentRef.current);
-                break;
-            }
-            case 'ArrowLeft':
-            case 'ArrowUp': {
-                e.preventDefault();
-                components_AccordionPanel_accordionPanelHelper.focusPreviousSibling(item, parentRef.current);
-                break;
-            }
-            case 'ArrowRight':
-            case 'ArrowDown': {
-                e.preventDefault();
-                components_AccordionPanel_accordionPanelHelper.focusNextSibling(item, parentRef.current);
-                break;
-            }
-        }
-    }, [parentRef]);
-    return (
-    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content
-    jsxRuntime.jsx(components_Heading_Heading.Heading, { unrecommendedTag: unrecommendedHeadingTag, type: headingType, children: jsxRuntime.jsx("button", { ...rest, type: "button", value: name, id: triggerId, "aria-expanded": isExpanded, "aria-controls": contentId, onClick: handleClick, onKeyDown: handleKeyDown, className: classNames.button, "data-component": "AccordionHeaderButton", children: jsxRuntime.jsx(MemoizedTitle, { iconPosition: iconPosition, classNames: classNames, children: children }) }) }));
+    return (jsxRuntime.jsx(MemoizedHeadingButton, { ...rest, name: name, triggerId: triggerId, isExpanded: isExpanded, contentId: contentId, handleClickTrigger: handleClickTrigger, handleKeyDown: handleKeyDown, classNames: classNames, iconPosition: iconPosition, headingType: headingType, unrecommendedHeadingTag: unrecommendedHeadingTag, children: children }));
 };
-const MemoizedTitle = React.memo(({ classNames, iconPosition, children }) => (jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { className: classNames.titleWrapper, align: "center", as: "span", children: [iconPosition === 'left' && jsxRuntime.jsx(components_Icon_FaIcon.FaCaretRightIcon, { className: classNames.leftIcon }), jsxRuntime.jsx("span", { className: classNames.title, children: children }), iconPosition === 'right' && jsxRuntime.jsx(components_Icon_FaIcon.FaCaretDownIcon, { className: classNames.rightIcon })] })));
+const MemoizedHeadingButton = React.memo(({ children, name, triggerId, isExpanded, contentId, handleClickTrigger, handleKeyDown, classNames, iconPosition, headingType, unrecommendedHeadingTag, ...rest }) => (
+// eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content
+jsxRuntime.jsx(components_Heading_Heading.Heading, { unrecommendedTag: unrecommendedHeadingTag, type: headingType, children: jsxRuntime.jsx("button", { ...rest, type: "button", value: name, id: triggerId, "aria-expanded": isExpanded, "aria-controls": contentId, onClick: handleClickTrigger, onKeyDown: handleKeyDown, className: classNames.button, "data-component": "AccordionHeaderButton", children: jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { className: classNames.titleWrapper, align: "center", as: "span", children: [iconPosition === 'left' && jsxRuntime.jsx(components_Icon_FaIcon.FaCaretRightIcon, { className: classNames.leftIcon }), jsxRuntime.jsx("span", { className: classNames.title, children: children }), iconPosition === 'right' && jsxRuntime.jsx(components_Icon_FaIcon.FaCaretDownIcon, { className: classNames.rightIcon })] }) }) })));
 
 exports.AccordionPanelTrigger = AccordionPanelTrigger;
 //# sourceMappingURL=AccordionPanelTrigger.cjs.map

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

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

package/lib/components/AccordionPanel/AccordionPanelTrigger.js

@@ -1,8 +1,8 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { memo, useMemo, useContext, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo, useMemo, useContext } from 'react';
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
-import { getIsInclude, mapToKeyArray } from '../../libs/map.js';
+import { getIsInclude } from '../../libs/map.js';
 import { Heading } from '../Heading/Heading.js';
 import '../Heading/PageHeading/PageHeading.js';
 import { FaCaretRightIcon, FaCaretDownIcon } from '../Icon/FaIcon.js';
@@ -16,7 +16,6 @@ import '../Layout/Center/Center.js';
 import '../Layout/Container/Container.js';
 import { AccordionPanelContext } from './AccordionPanel.js';
 import { AccordionPanelItemContext } from './AccordionPanelItem.js';
-import { getNewExpandedItems, focusNextSibling, focusPreviousSibling, focusLastSibling, focusFirstSibling } from './accordionPanelHelper.js';
 
 const classNameGenerator = ce({
     slots: {
@@ -53,67 +52,13 @@ const AccordionPanelTrigger = ({ children, className, headingType = 'blockTitle'
         };
     }, [className]);
     const { name, contentId, triggerId } = useContext(AccordionPanelItemContext);
-    const { iconPosition, expandedItems, onClickTrigger, onClickProps, expandableMultiply, parentRef, } = useContext(AccordionPanelContext);
+    const { iconPosition, expandedItems, handleClickTrigger, handleKeyDown } = useContext(AccordionPanelContext);
     const isExpanded = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name]);
-    const actualOnClickTrigger = useMemo(() => onClickTrigger
-        ? (e) => onClickTrigger(e.currentTarget.value, !isExpanded)
-        : undefined, [isExpanded, onClickTrigger]);
-    const actualOnClickProps = useMemo(() => onClickProps
-        ? (e) => {
-            const newExpandedItems = getNewExpandedItems(expandedItems, e.currentTarget.value, !isExpanded, expandableMultiply);
-            onClickProps(mapToKeyArray(newExpandedItems));
-        }
-        : undefined, [isExpanded, expandedItems, expandableMultiply, onClickProps]);
-    const handleClick = useMemo(() => {
-        if (actualOnClickTrigger) {
-            if (actualOnClickProps) {
-                return (e) => {
-                    actualOnClickTrigger(e);
-                    actualOnClickProps(e);
-                };
-            }
-            return actualOnClickTrigger;
-        }
-        else if (actualOnClickProps) {
-            return actualOnClickProps;
-        }
-        return undefined;
-    }, [actualOnClickProps, actualOnClickTrigger]);
-    const handleKeyDown = useCallback((e) => {
-        if (!parentRef?.current) {
-            return;
-        }
-        const item = e.target;
-        switch (e.key) {
-            case 'Home': {
-                e.preventDefault();
-                focusFirstSibling(parentRef.current);
-                break;
-            }
-            case 'End': {
-                e.preventDefault();
-                focusLastSibling(parentRef.current);
-                break;
-            }
-            case 'ArrowLeft':
-            case 'ArrowUp': {
-                e.preventDefault();
-                focusPreviousSibling(item, parentRef.current);
-                break;
-            }
-            case 'ArrowRight':
-            case 'ArrowDown': {
-                e.preventDefault();
-                focusNextSibling(item, parentRef.current);
-                break;
-            }
-        }
-    }, [parentRef]);
-    return (
-    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content
-    jsx(Heading, { unrecommendedTag: unrecommendedHeadingTag, type: headingType, children: jsx("button", { ...rest, type: "button", value: name, id: triggerId, "aria-expanded": isExpanded, "aria-controls": contentId, onClick: handleClick, onKeyDown: handleKeyDown, className: classNames.button, "data-component": "AccordionHeaderButton", children: jsx(MemoizedTitle, { iconPosition: iconPosition, classNames: classNames, children: children }) }) }));
+    return (jsx(MemoizedHeadingButton, { ...rest, name: name, triggerId: triggerId, isExpanded: isExpanded, contentId: contentId, handleClickTrigger: handleClickTrigger, handleKeyDown: handleKeyDown, classNames: classNames, iconPosition: iconPosition, headingType: headingType, unrecommendedHeadingTag: unrecommendedHeadingTag, children: children }));
 };
-const MemoizedTitle = memo(({ classNames, iconPosition, children }) => (jsxs(Cluster, { className: classNames.titleWrapper, align: "center", as: "span", children: [iconPosition === 'left' && jsx(FaCaretRightIcon, { className: classNames.leftIcon }), jsx("span", { className: classNames.title, children: children }), iconPosition === 'right' && jsx(FaCaretDownIcon, { className: classNames.rightIcon })] })));
+const MemoizedHeadingButton = memo(({ children, name, triggerId, isExpanded, contentId, handleClickTrigger, handleKeyDown, classNames, iconPosition, headingType, unrecommendedHeadingTag, ...rest }) => (
+// eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content
+jsx(Heading, { unrecommendedTag: unrecommendedHeadingTag, type: headingType, children: jsx("button", { ...rest, type: "button", value: name, id: triggerId, "aria-expanded": isExpanded, "aria-controls": contentId, onClick: handleClickTrigger, onKeyDown: handleKeyDown, className: classNames.button, "data-component": "AccordionHeaderButton", children: jsxs(Cluster, { className: classNames.titleWrapper, align: "center", as: "span", children: [iconPosition === 'left' && jsx(FaCaretRightIcon, { className: classNames.leftIcon }), jsx("span", { className: classNames.title, children: children }), iconPosition === 'right' && jsx(FaCaretDownIcon, { className: classNames.rightIcon })] }) }) })));
 
 export { AccordionPanelTrigger };
 //# sourceMappingURL=AccordionPanelTrigger.js.map