smarthr-ui 97.0.0 → 98.0.0

package/lib/components/SideNav/SideNav.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
-import { useMemo, Children, cloneElement } from 'react';
+import { 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 { SideNavItemButton } from './SideNavItemButton.js';
+import { SideNavProvider } from './SideNavContext.js';
 
 const ROUNDED = {
     t_l: '[&>.smarthr-ui-SideNav-item:first-child]:shr-rounded-tl-l',
@@ -26,28 +26,9 @@ const classNameGenerator = ce({
         rounded: false,
     },
 });
-const SideNav = ({ items, size = 'M', onClick, className, rounded, children, ...rest }) => {
-    const actualOnClick = useMemo(() => onClick
-        ? (e) => onClick(e, (e.currentTarget.value ||
-            e.currentTarget.getAttribute('data-value')))
-        : undefined, [onClick]);
+const SideNav = ({ size = 'M', className, rounded, children, ...rest }) => {
     const actualClassName = useMemo(() => classNameGenerator({ rounded, className }), [rounded, className]);
-    return (jsx("ul", { ...rest, className: actualClassName, children: items
-            ? items.map((item) => (jsx(SideNavItemButton, { id: item.id, title: item.title, prefix: item.prefix, current: item.current, size: size, onClick: actualOnClick }, item.id)))
-            : children &&
-                Children.map(children, (child) => {
-                    if (child &&
-                        typeof child === 'object' &&
-                        'type' in child &&
-                        child.type === SideNavItemButton) {
-                        return cloneElement(child, {
-                            // 子コンポーネントに対して親コンポーネントから onClick size を一括で適用
-                            size,
-                            onClick: actualOnClick,
-                        });
-                    }
-                    return child;
-                }) }));
+    return (jsx("ul", { ...rest, className: actualClassName, children: jsx(SideNavProvider, { value: { size }, children: children }) }));
 };
 
 export { SideNav };

package/lib/components/SideNav/SideNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.js","sources":["../../../src/components/SideNav/SideNav.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type FC,\n  type PropsWithChildren,\n  useMemo,\n} from 'react'\nimport { Children, cloneElement } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { SideNavItemButton, type SideNavSizeType } from './SideNavItemButton'\n\nexport type SideNavItemButtonProps = Omit<\n  ComponentProps<typeof SideNavItemButton>,\n  'size' | 'onClick'\n>\n\ntype AbstractProps = PropsWithChildren<{\n  /** 各アイテムのデータの配列\n   * @deprecated SideNavItemButton を使ってください\n   */\n  items?: SideNavItemButtonProps[]\n  /** 各アイテムの大きさ */\n  size?: SideNavSizeType\n  /** アイテムを押下したときに発火するコールバック関数 */\n  onClick?: (\n    e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>,\n    id: string,\n  ) => void\n  /** コンポーネントに適用するクラス名 */\n  className?: string\n}> &\n  VariantProps<typeof classNameGenerator>\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'ul'>, keyof AbstractProps>\n\nconst ROUNDED = {\n  t_l: '[&>.smarthr-ui-SideNav-item:first-child]:shr-rounded-tl-l',\n  t_r: '[&>.smarthr-ui-SideNav-item:first-child]:shr-rounded-tr-l',\n  b_l: '[&>.smarthr-ui-SideNav-item:last-child]:shr-rounded-bl-l',\n  b_r: '[&>.smarthr-ui-SideNav-item:last-child]:shr-rounded-br-l',\n}\nconst ROUNDED_ALL = ['shr-rounded-l', ROUNDED.t_l, ROUNDED.t_r, ROUNDED.b_l, ROUNDED.b_r]\n\nconst classNameGenerator = tv({\n  base: ['smarthr-ui-SideNav', 'shr-relative shr-list-none shr-bg-column'],\n  variants: {\n    rounded: {\n      true: ROUNDED_ALL,\n      all: ROUNDED_ALL,\n      top: ['shr-rounded-t-l', ROUNDED.t_l, ROUNDED.t_r],\n      right: ['shr-rounded-r-l', ROUNDED.t_r, ROUNDED.b_r],\n      bottom: ['shr-rounded-b-l', ROUNDED.b_l, ROUNDED.b_r],\n      left: ['shr-rounded-l-l', ROUNDED.t_l, ROUNDED.b_l],\n    },\n  },\n  defaultVariants: {\n    rounded: false,\n  },\n})\n\nexport const SideNav: FC<Props> = ({\n  items,\n  size = 'M',\n  onClick,\n  className,\n  rounded,\n  children,\n  ...rest\n}) => {\n  const actualOnClick = useMemo(\n    () =>\n      onClick\n        ? (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) =>\n            onClick(\n              e,\n              ((e as React.MouseEvent<HTMLButtonElement, MouseEvent>).currentTarget.value ||\n                e.currentTarget.getAttribute('data-value')) as string,\n            )\n        : undefined,\n    [onClick],\n  )\n\n  const actualClassName = useMemo(\n    () => classNameGenerator({ rounded, className }),\n    [rounded, className],\n  )\n\n  return (\n    <ul {...rest} className={actualClassName}>\n      {items\n        ? items.map((item) => (\n            <SideNavItemButton\n              key={item.id}\n              id={item.id}\n              title={item.title}\n              prefix={item.prefix}\n              current={item.current}\n              size={size}\n              onClick={actualOnClick}\n            />\n          ))\n        : children &&\n          Children.map(children, (child) => {\n            if (\n              child &&\n              typeof child === 'object' &&\n              'type' in child &&\n              child.type === SideNavItemButton\n            ) {\n              return cloneElement(\n                child as React.ReactElement<ComponentProps<typeof SideNavItemButton>>,\n                {\n                  // 子コンポーネントに対して親コンポーネントから onClick size を一括で適用\n                  size,\n                  onClick: actualOnClick,\n                },\n              )\n            }\n\n            return child\n          })}\n    </ul>\n  )\n}\n"],"names":["tv","_jsx"],"mappings":";;;;;AAmCA,MAAM,OAAO,GAAG;AACd,IAAA,GAAG,EAAE,2DAA2D;AAChE,IAAA,GAAG,EAAE,2DAA2D;AAChE,IAAA,GAAG,EAAE,0DAA0D;AAC/D,IAAA,GAAG,EAAE,0DAA0D;CAChE;AACD,MAAM,WAAW,GAAG,CAAC,eAAe,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC;AAEzF,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,CAAC,oBAAoB,EAAE,0CAA0C,CAAC;AACxE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,GAAG,EAAE,WAAW;YAChB,GAAG,EAAE,CAAC,iBAAiB,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC;YAClD,KAAK,EAAE,CAAC,iBAAiB,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC;YACpD,MAAM,EAAE,CAAC,iBAAiB,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC;YACrD,IAAI,EAAE,CAAC,iBAAiB,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC;AACpD,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,KAAK;AACf,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,OAAO,GAAc,CAAC,EACjC,KAAK,EACL,IAAI,GAAG,GAAG,EACV,OAAO,EACP,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,aAAa,GAAG,OAAO,CAC3B,MACE;AACE,UAAE,CAAC,CAAsE,KACrE,OAAO,CACL,CAAC,GACC,CAAqD,CAAC,aAAa,CAAC,KAAK;YACzE,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,YAAY,CAAC;AAElD,UAAE,SAAS,EACf,CAAC,OAAO,CAAC,CACV;IAED,MAAM,eAAe,GAAG,OAAO,CAC7B,MAAM,kBAAkB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAChD,CAAC,OAAO,EAAE,SAAS,CAAC,CACrB;IAED,QACEC,eAAQ,IAAI,EAAE,SAAS,EAAE,eAAe,YACrC;cACG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACbA,IAAC,iBAAiB,EAAA,EAEhB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,aAAa,EAAA,EANjB,IAAI,CAAC,EAAE,CAOZ,CACH;AACH,cAAE,QAAQ;gBACR,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAI;AAC/B,oBAAA,IACE,KAAK;wBACL,OAAO,KAAK,KAAK,QAAQ;AACzB,wBAAA,MAAM,IAAI,KAAK;AACf,wBAAA,KAAK,CAAC,IAAI,KAAK,iBAAiB,EAChC;wBACA,OAAO,YAAY,CACjB,KAAqE,EACrE;;4BAEE,IAAI;AACJ,4BAAA,OAAO,EAAE,aAAa;AACvB,yBAAA,CACF;oBACH;AAEA,oBAAA,OAAO,KAAK;gBACd,CAAC,CAAC,EAAA,CACH;AAET;;;;"}
+{"version":3,"file":"SideNav.js","sources":["../../../src/components/SideNav/SideNav.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { SideNavProvider } from './SideNavContext'\n\nimport type { SideNavSizeType } from './SideNavItemButton'\n\ntype AbstractProps = PropsWithChildren<{\n  /** 各アイテムの大きさ */\n  size?: SideNavSizeType\n  /** コンポーネントに適用するクラス名 */\n  className?: string\n}> &\n  VariantProps<typeof classNameGenerator>\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'ul'>, keyof AbstractProps>\n\nconst ROUNDED = {\n  t_l: '[&>.smarthr-ui-SideNav-item:first-child]:shr-rounded-tl-l',\n  t_r: '[&>.smarthr-ui-SideNav-item:first-child]:shr-rounded-tr-l',\n  b_l: '[&>.smarthr-ui-SideNav-item:last-child]:shr-rounded-bl-l',\n  b_r: '[&>.smarthr-ui-SideNav-item:last-child]:shr-rounded-br-l',\n}\nconst ROUNDED_ALL = ['shr-rounded-l', ROUNDED.t_l, ROUNDED.t_r, ROUNDED.b_l, ROUNDED.b_r]\n\nconst classNameGenerator = tv({\n  base: ['smarthr-ui-SideNav', 'shr-relative shr-list-none shr-bg-column'],\n  variants: {\n    rounded: {\n      true: ROUNDED_ALL,\n      all: ROUNDED_ALL,\n      top: ['shr-rounded-t-l', ROUNDED.t_l, ROUNDED.t_r],\n      right: ['shr-rounded-r-l', ROUNDED.t_r, ROUNDED.b_r],\n      bottom: ['shr-rounded-b-l', ROUNDED.b_l, ROUNDED.b_r],\n      left: ['shr-rounded-l-l', ROUNDED.t_l, ROUNDED.b_l],\n    },\n  },\n  defaultVariants: {\n    rounded: false,\n  },\n})\n\nexport const SideNav: FC<Props> = ({ size = 'M', className, rounded, children, ...rest }) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ rounded, className }),\n    [rounded, className],\n  )\n\n  return (\n    <ul {...rest} className={actualClassName}>\n      <SideNavProvider value={{ size }}>{children}</SideNavProvider>\n    </ul>\n  )\n}\n"],"names":["tv","_jsx"],"mappings":";;;;;AAgBA,MAAM,OAAO,GAAG;AACd,IAAA,GAAG,EAAE,2DAA2D;AAChE,IAAA,GAAG,EAAE,2DAA2D;AAChE,IAAA,GAAG,EAAE,0DAA0D;AAC/D,IAAA,GAAG,EAAE,0DAA0D;CAChE;AACD,MAAM,WAAW,GAAG,CAAC,eAAe,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC;AAEzF,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,CAAC,oBAAoB,EAAE,0CAA0C,CAAC;AACxE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,GAAG,EAAE,WAAW;YAChB,GAAG,EAAE,CAAC,iBAAiB,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC;YAClD,KAAK,EAAE,CAAC,iBAAiB,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC;YACpD,MAAM,EAAE,CAAC,iBAAiB,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC;YACrD,IAAI,EAAE,CAAC,iBAAiB,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC;AACpD,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,KAAK;AACf,KAAA;AACF,CAAA,CAAC;MAEW,OAAO,GAAc,CAAC,EAAE,IAAI,GAAG,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,KAAI;IAC1F,MAAM,eAAe,GAAG,OAAO,CAC7B,MAAM,kBAAkB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAChD,CAAC,OAAO,EAAE,SAAS,CAAC,CACrB;IAED,QACEC,eAAQ,IAAI,EAAE,SAAS,EAAE,eAAe,YACtCA,GAAA,CAAC,eAAe,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,YAAG,QAAQ,EAAA,CAAmB,EAAA,CAC3D;AAET;;;;"}

package/lib/components/SideNav/SideNavContext.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+
+const SideNavContext = React.createContext(undefined);
+const useSideNavContext = () => React.useContext(SideNavContext);
+const SideNavProvider = SideNavContext.Provider;
+
+exports.SideNavProvider = SideNavProvider;
+exports.useSideNavContext = useSideNavContext;
+//# sourceMappingURL=SideNavContext.cjs.map

package/lib/components/SideNav/SideNavContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavContext.cjs","sources":["../../../src/components/SideNav/SideNavContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { SideNavSizeType } from './SideNavItemButton'\n\ntype SideNavContextValue = {\n  size: SideNavSizeType\n}\n\nconst SideNavContext = createContext<SideNavContextValue | undefined>(undefined)\n\nexport const useSideNavContext = () => useContext(SideNavContext)\n\nexport const SideNavProvider = SideNavContext.Provider\n"],"names":["createContext","useContext"],"mappings":";;;;AAQA,MAAM,cAAc,GAAGA,mBAAa,CAAkC,SAAS,CAAC;AAEzE,MAAM,iBAAiB,GAAG,MAAMC,gBAAU,CAAC,cAAc;AAEzD,MAAM,eAAe,GAAG,cAAc,CAAC;;;;;"}

package/lib/components/SideNav/SideNavContext.d.ts

@@ -0,0 +1,7 @@
+import type { SideNavSizeType } from './SideNavItemButton';
+type SideNavContextValue = {
+    size: SideNavSizeType;
+};
+export declare const useSideNavContext: () => SideNavContextValue | undefined;
+export declare const SideNavProvider: import("react").Provider<SideNavContextValue | undefined>;
+export {};

package/lib/components/SideNav/SideNavContext.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+
+const SideNavContext = createContext(undefined);
+const useSideNavContext = () => useContext(SideNavContext);
+const SideNavProvider = SideNavContext.Provider;
+
+export { SideNavProvider, useSideNavContext };
+//# sourceMappingURL=SideNavContext.js.map

package/lib/components/SideNav/SideNavContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavContext.js","sources":["../../../src/components/SideNav/SideNavContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { SideNavSizeType } from './SideNavItemButton'\n\ntype SideNavContextValue = {\n  size: SideNavSizeType\n}\n\nconst SideNavContext = createContext<SideNavContextValue | undefined>(undefined)\n\nexport const useSideNavContext = () => useContext(SideNavContext)\n\nexport const SideNavProvider = SideNavContext.Provider\n"],"names":[],"mappings":";;AAQA,MAAM,cAAc,GAAG,aAAa,CAAkC,SAAS,CAAC;AAEzE,MAAM,iBAAiB,GAAG,MAAM,UAAU,CAAC,cAAc;AAEzD,MAAM,eAAe,GAAG,cAAc,CAAC;;;;"}

package/lib/components/SideNav/SideNavItemButton.cjs

@@ -12,6 +12,7 @@ require('../Layout/Reel/Reel.cjs');
 require('../Layout/Sidebar/Sidebar.cjs');
 require('../Layout/Center/Center.cjs');
 require('../Layout/Container/Container.cjs');
+var components_SideNav_SideNavContext = require('./SideNavContext.cjs');
 
 const classNameGenerator = index.tv({
     slots: {
@@ -51,32 +52,36 @@ const classNameGenerator = index.tv({
         },
     },
 });
-const SideNavItemButton = ({ id, title, prefix, suffix, current, size, onClick, children, className, ...rest }) => {
+const SideNavItemButton = ({ id, prefix, suffix, current, children, className, onClick, ...rest }) => {
+    const context = components_SideNav_SideNavContext.useSideNavContext();
+    const size = context?.size ?? 'M';
     const classNames = React.useMemo(() => {
         const { wrapper, button, body, bodyText } = classNameGenerator();
         return {
             wrapper: wrapper({ className }),
-            button: button({ size: size ?? 'M' }),
+            button: button({ size }),
             body: body(),
             bodyText: bodyText(),
         };
     }, [className, size]);
-    return (jsxRuntime.jsx("li", { ...rest, "data-current": !!current, className: classNames.wrapper, children: jsxRuntime.jsx(components_Button_UnstyledButton.UnstyledButton, { className: classNames.button, onClick: onClick, value: id, children: jsxRuntime.jsx(BodyCluster, { prefix: prefix, suffix: suffix, title: children ?? title, classNames: classNames }) }) }));
+    return (jsxRuntime.jsx("li", { ...rest, id: id, "data-current": !!current, className: classNames.wrapper, children: jsxRuntime.jsx(components_Button_UnstyledButton.UnstyledButton, { className: classNames.button, onClick: onClick, value: id, children: jsxRuntime.jsx(BodyCluster, { prefix: prefix, suffix: suffix, classNames: classNames, children: children }) }) }));
 };
-const SideNavItemAnchor = ({ id, title, prefix, suffix, current, size, onClick, children, className, href, elementAs, ...rest }) => {
+const SideNavItemAnchor = ({ prefix, suffix, current, children, className, href, elementAs, onClick, ...rest }) => {
+    const context = components_SideNav_SideNavContext.useSideNavContext();
+    const size = context?.size ?? 'M';
     const classNames = React.useMemo(() => {
         const { wrapper, button, body, bodyText } = classNameGenerator();
         return {
             wrapper: wrapper({ className }),
-            button: button({ size: size ?? 'M' }),
+            button: button({ size }),
             body: body(),
             bodyText: bodyText(),
         };
     }, [className, size]);
     const Anchor = elementAs || 'a';
-    return (jsxRuntime.jsx("li", { ...rest, "data-current": !!current, className: classNames.wrapper, children: jsxRuntime.jsx(Anchor, { className: classNames.button, href: href, onClick: onClick, "data-value": id, children: jsxRuntime.jsx(BodyCluster, { prefix: prefix, suffix: suffix, title: children ?? title, classNames: classNames }) }) }));
+    return (jsxRuntime.jsx("li", { ...rest, "data-current": !!current, className: classNames.wrapper, children: jsxRuntime.jsx(Anchor, { className: classNames.button, href: href, onClick: onClick, children: jsxRuntime.jsx(BodyCluster, { prefix: prefix, suffix: suffix, classNames: classNames, children: children }) }) }));
 };
-const BodyCluster = React.memo(({ prefix, suffix, title, classNames }) => (jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { inline: true, align: "center", className: classNames.body, as: "span", children: [prefix, jsxRuntime.jsx("span", { className: classNames.bodyText, children: title }), suffix] })));
+const BodyCluster = React.memo(({ prefix, suffix, children, classNames }) => (jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { inline: true, align: "center", className: classNames.body, as: "span", children: [prefix, jsxRuntime.jsx("span", { className: classNames.bodyText, children: children }), suffix] })));
 
 exports.SideNavItemAnchor = SideNavItemAnchor;
 exports.SideNavItemButton = SideNavItemButton;

package/lib/components/SideNav/SideNavItemButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavItemButton.cjs","sources":["../../../src/components/SideNav/SideNavItemButton.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type FC,\n  type ReactNode,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { UnstyledButton } from '../Button'\nimport { Cluster } from '../Layout'\n\nexport type SideNavSizeType = 'M' | 'S'\n\ntype AbstractProps = {\n  /** アイテムのタイトル\n   * @deprecated SideNav で items を使う時の props です。children を使ってください。\n   */\n  title?: ReactNode\n  /** タイトルのプレフィックスの内容。通常、StatusLabelやIconの配置に用います。 */\n  prefix?: ReactNode\n  /** タイトルのサフィックスの内容。通常、Prefixを使用済みの場合にStatusLabelやChipの配置に用います。 */\n  suffix?: ReactNode\n  /** 選択されているアイテムかどうか */\n  current?: boolean\n  /** アイテムの大きさ */\n  size?: SideNavSizeType\n  /** アイテムを押下したときに発火するコールバック関数 */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void\n}\n\ntype AbstractButtonProps = AbstractProps & {\n  /** アイテムの識別子。onClickのイベントオブジェクトのcurrentTarget.valueで取得できます。 */\n  id: string\n}\n\ntype AbstractAnchorProps<T extends ElementType = 'a'> = AbstractProps & {\n  href: string\n  /** next/link などのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  elementAs?: T\n}\n\ntype ButtonProps = Omit<ComponentPropsWithoutRef<'li'>, keyof AbstractButtonProps> &\n  AbstractButtonProps\n\ntype AnchorProps<T extends ElementType = 'a'> = Omit<\n  ComponentPropsWithoutRef<'li'>,\n  keyof AbstractAnchorProps<T>\n> &\n  AbstractAnchorProps<T>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-SideNav-item shr-relative',\n      'data-[current=true]:shr-bg-main data-[current=true]:shr-text-white',\n      'data-[current=true]:after:shr-absolute data-[current=true]:after:-shr-right-0.25 data-[current=true]:after:shr-top-1/2 data-[current=true]:after:-shr-translate-y-1/2 data-[current=true]:after:shr-translate-x-0 data-[current=true]:after:shr-border-b-4 data-[current=true]:after:shr-border-l-4 data-[current=true]:after:shr-border-r-0 data-[current=true]:after:shr-border-t-4 data-[current=true]:after:shr-border-solid data-[current=true]:after:shr-border-b-transparent data-[current=true]:after:shr-border-l-main data-[current=true]:after:shr-border-r-transparent data-[current=true]:after:shr-border-t-transparent data-[current=true]:after:shr-content-[\"\"]',\n      'data-[current=false]:hover:shr-bg-column-darken',\n      '[&:has(:focus-visible)]:shr-z-1', // pseudoエレメントがliの::afterと衝突しないために子要素に適用しますが、次のエレメントに被られるからz-indexを一時的に変更します\n    ],\n    button: [\n      'shr-w-full shr-leading-none [&]:shr-box-border',\n      'focus-visible:shr-focus-indicator',\n      '[[data-current=true]_&:focus-visible]:shr-focus-indicator',\n      'shr-inline-flex shr-items-center',\n      'shr-no-underline',\n\n      // ::before: フォーカスリングと上のアイテムの下端の間の隙間を埋めるために、上端から1px外側に1pxの横線を描画する。\n      // 非選択かつ先頭以外のボタンにフォーカスが当たったときのみ表示する\n      'before:shr-absolute before:-shr-top-[1px] before:shr-left-0 before:shr-hidden before:shr-h-px before:shr-w-full before:shr-bg-border before:shr-content-[\"\"]',\n      '[:first-child_&]:before:shr-hidden [[data-current=false]:not(:first-child)_&:focus-visible]:before:shr-block [[data-current=false]_&:focus-visible]:before:shr-absolute',\n\n      // ::after: フォーカスリングと下のアイテムの上端の間の隙間を埋めるために、下端から1px外側に1pxの横線を描画する。\n      // 非選択かつ末尾以外のボタンにフォーカスが当たったときのみ表示する\n      'after:shr-absolute after:-shr-bottom-[1px] after:shr-left-0 after:shr-hidden after:shr-h-px after:shr-w-full after:shr-bg-border after:shr-content-[\"\"]',\n      '[:last-child_&]:after:shr-hidden [[data-current=false]:not(:last-child)_&:focus-visible]:after:shr-block [[data-current=false]_&:focus-visible]:after:shr-absolute',\n    ],\n    body: 'shr-w-full',\n    bodyText: 'smarthr-ui-SideNav-itemBodyText shr-grow',\n  },\n  variants: {\n    size: {\n      M: {\n        button: 'shr-p-1 shr-text-base',\n      },\n      S: {\n        button: 'shr-px-1 shr-py-0.5 shr-text-sm',\n      },\n    },\n  },\n})\n\nexport const SideNavItemButton: FC<ButtonProps> = ({\n  id,\n  title,\n  prefix,\n  suffix,\n  current,\n  size,\n  onClick,\n  children,\n  className,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { wrapper, button, body, bodyText } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      button: button({ size: size ?? 'M' }),\n      body: body(),\n      bodyText: bodyText(),\n    }\n  }, [className, size])\n\n  return (\n    <li {...rest} data-current={!!current} className={classNames.wrapper}>\n      <UnstyledButton className={classNames.button} onClick={onClick} value={id}>\n        <BodyCluster\n          prefix={prefix}\n          suffix={suffix}\n          title={children ?? title}\n          classNames={classNames}\n        />\n      </UnstyledButton>\n    </li>\n  )\n}\n\nexport const SideNavItemAnchor = <T extends ElementType = 'a'>({\n  id,\n  title,\n  prefix,\n  suffix,\n  current,\n  size,\n  onClick,\n  children,\n  className,\n  href,\n  elementAs,\n  ...rest\n}: AnchorProps<T>) => {\n  const classNames = useMemo(() => {\n    const { wrapper, button, body, bodyText } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      button: button({ size: size ?? 'M' }),\n      body: body(),\n      bodyText: bodyText(),\n    }\n  }, [className, size])\n\n  const Anchor = elementAs || 'a'\n\n  return (\n    <li {...rest} data-current={!!current} className={classNames.wrapper}>\n      <Anchor className={classNames.button} href={href} onClick={onClick} data-value={id}>\n        <BodyCluster\n          prefix={prefix}\n          suffix={suffix}\n          title={children ?? title}\n          classNames={classNames}\n        />\n      </Anchor>\n    </li>\n  )\n}\n\nconst BodyCluster = memo<\n  Pick<AbstractProps, 'prefix' | 'suffix' | 'title'> & {\n    classNames: { body: string; bodyText: string }\n  }\n>(({ prefix, suffix, title, classNames }) => (\n  <Cluster inline align=\"center\" className={classNames.body} as=\"span\">\n    {prefix}\n    <span className={classNames.bodyText}>{title}</span>\n    {suffix}\n  </Cluster>\n))\n"],"names":["tv","useMemo","_jsx","UnstyledButton","memo","_jsxs","Cluster"],"mappings":"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"}
+{"version":3,"file":"SideNavItemButton.cjs","sources":["../../../src/components/SideNav/SideNavItemButton.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type FC,\n  type ReactNode,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { UnstyledButton } from '../Button'\nimport { Cluster } from '../Layout'\n\nimport { useSideNavContext } from './SideNavContext'\n\nexport type SideNavSizeType = 'M' | 'S'\n\ntype AbstractProps = {\n  /** タイトルのプレフィックスの内容。通常、StatusLabelやIconの配置に用います。 */\n  prefix?: ReactNode\n  /** タイトルのサフィックスの内容。通常、Prefixを使用済みの場合にStatusLabelやChipの配置に用います。 */\n  suffix?: ReactNode\n  /** 選択されているアイテムかどうか */\n  current?: boolean\n}\n\ntype AbstractButtonProps = AbstractProps & {\n  /** アイテムを押下したときに発火するコールバック関数 */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n}\n\ntype AbstractAnchorProps<T extends ElementType = 'a'> = AbstractProps & {\n  href: string\n  /** next/link などのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  elementAs?: T\n  /** アイテムを押下したときに発火するコールバック関数 */\n  onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void\n}\n\ntype ButtonProps = Omit<ComponentPropsWithoutRef<'li'>, keyof AbstractButtonProps> &\n  AbstractButtonProps\n\ntype AnchorProps<T extends ElementType = 'a'> = Omit<\n  ComponentPropsWithoutRef<'li'>,\n  keyof AbstractAnchorProps<T>\n> &\n  AbstractAnchorProps<T>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-SideNav-item shr-relative',\n      'data-[current=true]:shr-bg-main data-[current=true]:shr-text-white',\n      'data-[current=true]:after:shr-absolute data-[current=true]:after:-shr-right-0.25 data-[current=true]:after:shr-top-1/2 data-[current=true]:after:-shr-translate-y-1/2 data-[current=true]:after:shr-translate-x-0 data-[current=true]:after:shr-border-b-4 data-[current=true]:after:shr-border-l-4 data-[current=true]:after:shr-border-r-0 data-[current=true]:after:shr-border-t-4 data-[current=true]:after:shr-border-solid data-[current=true]:after:shr-border-b-transparent data-[current=true]:after:shr-border-l-main data-[current=true]:after:shr-border-r-transparent data-[current=true]:after:shr-border-t-transparent data-[current=true]:after:shr-content-[\"\"]',\n      'data-[current=false]:hover:shr-bg-column-darken',\n      '[&:has(:focus-visible)]:shr-z-1', // pseudoエレメントがliの::afterと衝突しないために子要素に適用しますが、次のエレメントに被られるからz-indexを一時的に変更します\n    ],\n    button: [\n      'shr-w-full shr-leading-none [&]:shr-box-border',\n      'focus-visible:shr-focus-indicator',\n      '[[data-current=true]_&:focus-visible]:shr-focus-indicator',\n      'shr-inline-flex shr-items-center',\n      'shr-no-underline',\n\n      // ::before: フォーカスリングと上のアイテムの下端の間の隙間を埋めるために、上端から1px外側に1pxの横線を描画する。\n      // 非選択かつ先頭以外のボタンにフォーカスが当たったときのみ表示する\n      'before:shr-absolute before:-shr-top-[1px] before:shr-left-0 before:shr-hidden before:shr-h-px before:shr-w-full before:shr-bg-border before:shr-content-[\"\"]',\n      '[:first-child_&]:before:shr-hidden [[data-current=false]:not(:first-child)_&:focus-visible]:before:shr-block [[data-current=false]_&:focus-visible]:before:shr-absolute',\n\n      // ::after: フォーカスリングと下のアイテムの上端の間の隙間を埋めるために、下端から1px外側に1pxの横線を描画する。\n      // 非選択かつ末尾以外のボタンにフォーカスが当たったときのみ表示する\n      'after:shr-absolute after:-shr-bottom-[1px] after:shr-left-0 after:shr-hidden after:shr-h-px after:shr-w-full after:shr-bg-border after:shr-content-[\"\"]',\n      '[:last-child_&]:after:shr-hidden [[data-current=false]:not(:last-child)_&:focus-visible]:after:shr-block [[data-current=false]_&:focus-visible]:after:shr-absolute',\n    ],\n    body: 'shr-w-full',\n    bodyText: 'smarthr-ui-SideNav-itemBodyText shr-grow',\n  },\n  variants: {\n    size: {\n      M: {\n        button: 'shr-p-1 shr-text-base',\n      },\n      S: {\n        button: 'shr-px-1 shr-py-0.5 shr-text-sm',\n      },\n    },\n  },\n})\n\nexport const SideNavItemButton: FC<ButtonProps> = ({\n  id,\n  prefix,\n  suffix,\n  current,\n  children,\n  className,\n  onClick,\n  ...rest\n}) => {\n  const context = useSideNavContext()\n  const size = context?.size ?? 'M'\n\n  const classNames = useMemo(() => {\n    const { wrapper, button, body, bodyText } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      button: button({ size }),\n      body: body(),\n      bodyText: bodyText(),\n    }\n  }, [className, size])\n\n  return (\n    <li {...rest} id={id} data-current={!!current} className={classNames.wrapper}>\n      <UnstyledButton className={classNames.button} onClick={onClick} value={id}>\n        <BodyCluster prefix={prefix} suffix={suffix} classNames={classNames}>\n          {children}\n        </BodyCluster>\n      </UnstyledButton>\n    </li>\n  )\n}\n\nexport const SideNavItemAnchor = <T extends ElementType = 'a'>({\n  prefix,\n  suffix,\n  current,\n  children,\n  className,\n  href,\n  elementAs,\n  onClick,\n  ...rest\n}: AnchorProps<T>) => {\n  const context = useSideNavContext()\n  const size = context?.size ?? 'M'\n\n  const classNames = useMemo(() => {\n    const { wrapper, button, body, bodyText } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      button: button({ size }),\n      body: body(),\n      bodyText: bodyText(),\n    }\n  }, [className, size])\n\n  const Anchor = elementAs || 'a'\n\n  return (\n    <li {...rest} data-current={!!current} className={classNames.wrapper}>\n      <Anchor className={classNames.button} href={href} onClick={onClick}>\n        <BodyCluster prefix={prefix} suffix={suffix} classNames={classNames}>\n          {children}\n        </BodyCluster>\n      </Anchor>\n    </li>\n  )\n}\n\nconst BodyCluster = memo<\n  Pick<AbstractProps, 'prefix' | 'suffix'> & {\n    children: ReactNode\n    classNames: { body: string; bodyText: string }\n  }\n>(({ prefix, suffix, children, classNames }) => (\n  <Cluster inline align=\"center\" className={classNames.body} as=\"span\">\n    {prefix}\n    <span className={classNames.bodyText}>{children}</span>\n    {suffix}\n  </Cluster>\n))\n"],"names":["tv","useSideNavContext","useMemo","_jsx","UnstyledButton","memo","_jsxs","Cluster"],"mappings":"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"}

package/lib/components/SideNav/SideNavItemButton.d.ts

@@ -1,32 +1,26 @@
 import { type ComponentPropsWithoutRef, type ElementType, type FC, type ReactNode } from 'react';
 export type SideNavSizeType = 'M' | 'S';
 type AbstractProps = {
-    /** アイテムのタイトル
-     * @deprecated SideNav で items を使う時の props です。children を使ってください。
-     */
-    title?: ReactNode;
     /** タイトルのプレフィックスの内容。通常、StatusLabelやIconの配置に用います。 */
     prefix?: ReactNode;
     /** タイトルのサフィックスの内容。通常、Prefixを使用済みの場合にStatusLabelやChipの配置に用います。 */
     suffix?: ReactNode;
     /** 選択されているアイテムかどうか */
     current?: boolean;
-    /** アイテムの大きさ */
-    size?: SideNavSizeType;
-    /** アイテムを押下したときに発火するコールバック関数 */
-    onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void;
 };
 type AbstractButtonProps = AbstractProps & {
-    /** アイテムの識別子。onClickのイベントオブジェクトのcurrentTarget.valueで取得できます。 */
-    id: string;
+    /** アイテムを押下したときに発火するコールバック関数 */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
 type AbstractAnchorProps<T extends ElementType = 'a'> = AbstractProps & {
     href: string;
     /** next/link などのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */
     elementAs?: T;
+    /** アイテムを押下したときに発火するコールバック関数 */
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
 };
 type ButtonProps = Omit<ComponentPropsWithoutRef<'li'>, keyof AbstractButtonProps> & AbstractButtonProps;
 type AnchorProps<T extends ElementType = 'a'> = Omit<ComponentPropsWithoutRef<'li'>, keyof AbstractAnchorProps<T>> & AbstractAnchorProps<T>;
 export declare const SideNavItemButton: FC<ButtonProps>;
-export declare const SideNavItemAnchor: <T extends ElementType = "a">({ id, title, prefix, suffix, current, size, onClick, children, className, href, elementAs, ...rest }: AnchorProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SideNavItemAnchor: <T extends ElementType = "a">({ prefix, suffix, current, children, className, href, elementAs, onClick, ...rest }: AnchorProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/SideNav/SideNavItemButton.js

@@ -10,6 +10,7 @@ import '../Layout/Reel/Reel.js';
 import '../Layout/Sidebar/Sidebar.js';
 import '../Layout/Center/Center.js';
 import '../Layout/Container/Container.js';
+import { useSideNavContext } from './SideNavContext.js';
 
 const classNameGenerator = ce({
     slots: {
@@ -49,32 +50,36 @@ const classNameGenerator = ce({
         },
     },
 });
-const SideNavItemButton = ({ id, title, prefix, suffix, current, size, onClick, children, className, ...rest }) => {
+const SideNavItemButton = ({ id, prefix, suffix, current, children, className, onClick, ...rest }) => {
+    const context = useSideNavContext();
+    const size = context?.size ?? 'M';
     const classNames = useMemo(() => {
         const { wrapper, button, body, bodyText } = classNameGenerator();
         return {
             wrapper: wrapper({ className }),
-            button: button({ size: size ?? 'M' }),
+            button: button({ size }),
             body: body(),
             bodyText: bodyText(),
         };
     }, [className, size]);
-    return (jsx("li", { ...rest, "data-current": !!current, className: classNames.wrapper, children: jsx(UnstyledButton, { className: classNames.button, onClick: onClick, value: id, children: jsx(BodyCluster, { prefix: prefix, suffix: suffix, title: children ?? title, classNames: classNames }) }) }));
+    return (jsx("li", { ...rest, id: id, "data-current": !!current, className: classNames.wrapper, children: jsx(UnstyledButton, { className: classNames.button, onClick: onClick, value: id, children: jsx(BodyCluster, { prefix: prefix, suffix: suffix, classNames: classNames, children: children }) }) }));
 };
-const SideNavItemAnchor = ({ id, title, prefix, suffix, current, size, onClick, children, className, href, elementAs, ...rest }) => {
+const SideNavItemAnchor = ({ prefix, suffix, current, children, className, href, elementAs, onClick, ...rest }) => {
+    const context = useSideNavContext();
+    const size = context?.size ?? 'M';
     const classNames = useMemo(() => {
         const { wrapper, button, body, bodyText } = classNameGenerator();
         return {
             wrapper: wrapper({ className }),
-            button: button({ size: size ?? 'M' }),
+            button: button({ size }),
             body: body(),
             bodyText: bodyText(),
         };
     }, [className, size]);
     const Anchor = elementAs || 'a';
-    return (jsx("li", { ...rest, "data-current": !!current, className: classNames.wrapper, children: jsx(Anchor, { className: classNames.button, href: href, onClick: onClick, "data-value": id, children: jsx(BodyCluster, { prefix: prefix, suffix: suffix, title: children ?? title, classNames: classNames }) }) }));
+    return (jsx("li", { ...rest, "data-current": !!current, className: classNames.wrapper, children: jsx(Anchor, { className: classNames.button, href: href, onClick: onClick, children: jsx(BodyCluster, { prefix: prefix, suffix: suffix, classNames: classNames, children: children }) }) }));
 };
-const BodyCluster = memo(({ prefix, suffix, title, classNames }) => (jsxs(Cluster, { inline: true, align: "center", className: classNames.body, as: "span", children: [prefix, jsx("span", { className: classNames.bodyText, children: title }), suffix] })));
+const BodyCluster = memo(({ prefix, suffix, children, classNames }) => (jsxs(Cluster, { inline: true, align: "center", className: classNames.body, as: "span", children: [prefix, jsx("span", { className: classNames.bodyText, children: children }), suffix] })));
 
 export { SideNavItemAnchor, SideNavItemButton };
 //# sourceMappingURL=SideNavItemButton.js.map

package/lib/components/SideNav/SideNavItemButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavItemButton.js","sources":["../../../src/components/SideNav/SideNavItemButton.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type FC,\n  type ReactNode,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { UnstyledButton } from '../Button'\nimport { Cluster } from '../Layout'\n\nexport type SideNavSizeType = 'M' | 'S'\n\ntype AbstractProps = {\n  /** アイテムのタイトル\n   * @deprecated SideNav で items を使う時の props です。children を使ってください。\n   */\n  title?: ReactNode\n  /** タイトルのプレフィックスの内容。通常、StatusLabelやIconの配置に用います。 */\n  prefix?: ReactNode\n  /** タイトルのサフィックスの内容。通常、Prefixを使用済みの場合にStatusLabelやChipの配置に用います。 */\n  suffix?: ReactNode\n  /** 選択されているアイテムかどうか */\n  current?: boolean\n  /** アイテムの大きさ */\n  size?: SideNavSizeType\n  /** アイテムを押下したときに発火するコールバック関数 */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void\n}\n\ntype AbstractButtonProps = AbstractProps & {\n  /** アイテムの識別子。onClickのイベントオブジェクトのcurrentTarget.valueで取得できます。 */\n  id: string\n}\n\ntype AbstractAnchorProps<T extends ElementType = 'a'> = AbstractProps & {\n  href: string\n  /** next/link などのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  elementAs?: T\n}\n\ntype ButtonProps = Omit<ComponentPropsWithoutRef<'li'>, keyof AbstractButtonProps> &\n  AbstractButtonProps\n\ntype AnchorProps<T extends ElementType = 'a'> = Omit<\n  ComponentPropsWithoutRef<'li'>,\n  keyof AbstractAnchorProps<T>\n> &\n  AbstractAnchorProps<T>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-SideNav-item shr-relative',\n      'data-[current=true]:shr-bg-main data-[current=true]:shr-text-white',\n      'data-[current=true]:after:shr-absolute data-[current=true]:after:-shr-right-0.25 data-[current=true]:after:shr-top-1/2 data-[current=true]:after:-shr-translate-y-1/2 data-[current=true]:after:shr-translate-x-0 data-[current=true]:after:shr-border-b-4 data-[current=true]:after:shr-border-l-4 data-[current=true]:after:shr-border-r-0 data-[current=true]:after:shr-border-t-4 data-[current=true]:after:shr-border-solid data-[current=true]:after:shr-border-b-transparent data-[current=true]:after:shr-border-l-main data-[current=true]:after:shr-border-r-transparent data-[current=true]:after:shr-border-t-transparent data-[current=true]:after:shr-content-[\"\"]',\n      'data-[current=false]:hover:shr-bg-column-darken',\n      '[&:has(:focus-visible)]:shr-z-1', // pseudoエレメントがliの::afterと衝突しないために子要素に適用しますが、次のエレメントに被られるからz-indexを一時的に変更します\n    ],\n    button: [\n      'shr-w-full shr-leading-none [&]:shr-box-border',\n      'focus-visible:shr-focus-indicator',\n      '[[data-current=true]_&:focus-visible]:shr-focus-indicator',\n      'shr-inline-flex shr-items-center',\n      'shr-no-underline',\n\n      // ::before: フォーカスリングと上のアイテムの下端の間の隙間を埋めるために、上端から1px外側に1pxの横線を描画する。\n      // 非選択かつ先頭以外のボタンにフォーカスが当たったときのみ表示する\n      'before:shr-absolute before:-shr-top-[1px] before:shr-left-0 before:shr-hidden before:shr-h-px before:shr-w-full before:shr-bg-border before:shr-content-[\"\"]',\n      '[:first-child_&]:before:shr-hidden [[data-current=false]:not(:first-child)_&:focus-visible]:before:shr-block [[data-current=false]_&:focus-visible]:before:shr-absolute',\n\n      // ::after: フォーカスリングと下のアイテムの上端の間の隙間を埋めるために、下端から1px外側に1pxの横線を描画する。\n      // 非選択かつ末尾以外のボタンにフォーカスが当たったときのみ表示する\n      'after:shr-absolute after:-shr-bottom-[1px] after:shr-left-0 after:shr-hidden after:shr-h-px after:shr-w-full after:shr-bg-border after:shr-content-[\"\"]',\n      '[:last-child_&]:after:shr-hidden [[data-current=false]:not(:last-child)_&:focus-visible]:after:shr-block [[data-current=false]_&:focus-visible]:after:shr-absolute',\n    ],\n    body: 'shr-w-full',\n    bodyText: 'smarthr-ui-SideNav-itemBodyText shr-grow',\n  },\n  variants: {\n    size: {\n      M: {\n        button: 'shr-p-1 shr-text-base',\n      },\n      S: {\n        button: 'shr-px-1 shr-py-0.5 shr-text-sm',\n      },\n    },\n  },\n})\n\nexport const SideNavItemButton: FC<ButtonProps> = ({\n  id,\n  title,\n  prefix,\n  suffix,\n  current,\n  size,\n  onClick,\n  children,\n  className,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { wrapper, button, body, bodyText } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      button: button({ size: size ?? 'M' }),\n      body: body(),\n      bodyText: bodyText(),\n    }\n  }, [className, size])\n\n  return (\n    <li {...rest} data-current={!!current} className={classNames.wrapper}>\n      <UnstyledButton className={classNames.button} onClick={onClick} value={id}>\n        <BodyCluster\n          prefix={prefix}\n          suffix={suffix}\n          title={children ?? title}\n          classNames={classNames}\n        />\n      </UnstyledButton>\n    </li>\n  )\n}\n\nexport const SideNavItemAnchor = <T extends ElementType = 'a'>({\n  id,\n  title,\n  prefix,\n  suffix,\n  current,\n  size,\n  onClick,\n  children,\n  className,\n  href,\n  elementAs,\n  ...rest\n}: AnchorProps<T>) => {\n  const classNames = useMemo(() => {\n    const { wrapper, button, body, bodyText } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      button: button({ size: size ?? 'M' }),\n      body: body(),\n      bodyText: bodyText(),\n    }\n  }, [className, size])\n\n  const Anchor = elementAs || 'a'\n\n  return (\n    <li {...rest} data-current={!!current} className={classNames.wrapper}>\n      <Anchor className={classNames.button} href={href} onClick={onClick} data-value={id}>\n        <BodyCluster\n          prefix={prefix}\n          suffix={suffix}\n          title={children ?? title}\n          classNames={classNames}\n        />\n      </Anchor>\n    </li>\n  )\n}\n\nconst BodyCluster = memo<\n  Pick<AbstractProps, 'prefix' | 'suffix' | 'title'> & {\n    classNames: { body: string; bodyText: string }\n  }\n>(({ prefix, suffix, title, classNames }) => (\n  <Cluster inline align=\"center\" className={classNames.body} as=\"span\">\n    {prefix}\n    <span className={classNames.bodyText}>{title}</span>\n    {suffix}\n  </Cluster>\n))\n"],"names":["tv","_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"SideNavItemButton.js","sources":["../../../src/components/SideNav/SideNavItemButton.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type FC,\n  type ReactNode,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { UnstyledButton } from '../Button'\nimport { Cluster } from '../Layout'\n\nimport { useSideNavContext } from './SideNavContext'\n\nexport type SideNavSizeType = 'M' | 'S'\n\ntype AbstractProps = {\n  /** タイトルのプレフィックスの内容。通常、StatusLabelやIconの配置に用います。 */\n  prefix?: ReactNode\n  /** タイトルのサフィックスの内容。通常、Prefixを使用済みの場合にStatusLabelやChipの配置に用います。 */\n  suffix?: ReactNode\n  /** 選択されているアイテムかどうか */\n  current?: boolean\n}\n\ntype AbstractButtonProps = AbstractProps & {\n  /** アイテムを押下したときに発火するコールバック関数 */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n}\n\ntype AbstractAnchorProps<T extends ElementType = 'a'> = AbstractProps & {\n  href: string\n  /** next/link などのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  elementAs?: T\n  /** アイテムを押下したときに発火するコールバック関数 */\n  onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void\n}\n\ntype ButtonProps = Omit<ComponentPropsWithoutRef<'li'>, keyof AbstractButtonProps> &\n  AbstractButtonProps\n\ntype AnchorProps<T extends ElementType = 'a'> = Omit<\n  ComponentPropsWithoutRef<'li'>,\n  keyof AbstractAnchorProps<T>\n> &\n  AbstractAnchorProps<T>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-SideNav-item shr-relative',\n      'data-[current=true]:shr-bg-main data-[current=true]:shr-text-white',\n      'data-[current=true]:after:shr-absolute data-[current=true]:after:-shr-right-0.25 data-[current=true]:after:shr-top-1/2 data-[current=true]:after:-shr-translate-y-1/2 data-[current=true]:after:shr-translate-x-0 data-[current=true]:after:shr-border-b-4 data-[current=true]:after:shr-border-l-4 data-[current=true]:after:shr-border-r-0 data-[current=true]:after:shr-border-t-4 data-[current=true]:after:shr-border-solid data-[current=true]:after:shr-border-b-transparent data-[current=true]:after:shr-border-l-main data-[current=true]:after:shr-border-r-transparent data-[current=true]:after:shr-border-t-transparent data-[current=true]:after:shr-content-[\"\"]',\n      'data-[current=false]:hover:shr-bg-column-darken',\n      '[&:has(:focus-visible)]:shr-z-1', // pseudoエレメントがliの::afterと衝突しないために子要素に適用しますが、次のエレメントに被られるからz-indexを一時的に変更します\n    ],\n    button: [\n      'shr-w-full shr-leading-none [&]:shr-box-border',\n      'focus-visible:shr-focus-indicator',\n      '[[data-current=true]_&:focus-visible]:shr-focus-indicator',\n      'shr-inline-flex shr-items-center',\n      'shr-no-underline',\n\n      // ::before: フォーカスリングと上のアイテムの下端の間の隙間を埋めるために、上端から1px外側に1pxの横線を描画する。\n      // 非選択かつ先頭以外のボタンにフォーカスが当たったときのみ表示する\n      'before:shr-absolute before:-shr-top-[1px] before:shr-left-0 before:shr-hidden before:shr-h-px before:shr-w-full before:shr-bg-border before:shr-content-[\"\"]',\n      '[:first-child_&]:before:shr-hidden [[data-current=false]:not(:first-child)_&:focus-visible]:before:shr-block [[data-current=false]_&:focus-visible]:before:shr-absolute',\n\n      // ::after: フォーカスリングと下のアイテムの上端の間の隙間を埋めるために、下端から1px外側に1pxの横線を描画する。\n      // 非選択かつ末尾以外のボタンにフォーカスが当たったときのみ表示する\n      'after:shr-absolute after:-shr-bottom-[1px] after:shr-left-0 after:shr-hidden after:shr-h-px after:shr-w-full after:shr-bg-border after:shr-content-[\"\"]',\n      '[:last-child_&]:after:shr-hidden [[data-current=false]:not(:last-child)_&:focus-visible]:after:shr-block [[data-current=false]_&:focus-visible]:after:shr-absolute',\n    ],\n    body: 'shr-w-full',\n    bodyText: 'smarthr-ui-SideNav-itemBodyText shr-grow',\n  },\n  variants: {\n    size: {\n      M: {\n        button: 'shr-p-1 shr-text-base',\n      },\n      S: {\n        button: 'shr-px-1 shr-py-0.5 shr-text-sm',\n      },\n    },\n  },\n})\n\nexport const SideNavItemButton: FC<ButtonProps> = ({\n  id,\n  prefix,\n  suffix,\n  current,\n  children,\n  className,\n  onClick,\n  ...rest\n}) => {\n  const context = useSideNavContext()\n  const size = context?.size ?? 'M'\n\n  const classNames = useMemo(() => {\n    const { wrapper, button, body, bodyText } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      button: button({ size }),\n      body: body(),\n      bodyText: bodyText(),\n    }\n  }, [className, size])\n\n  return (\n    <li {...rest} id={id} data-current={!!current} className={classNames.wrapper}>\n      <UnstyledButton className={classNames.button} onClick={onClick} value={id}>\n        <BodyCluster prefix={prefix} suffix={suffix} classNames={classNames}>\n          {children}\n        </BodyCluster>\n      </UnstyledButton>\n    </li>\n  )\n}\n\nexport const SideNavItemAnchor = <T extends ElementType = 'a'>({\n  prefix,\n  suffix,\n  current,\n  children,\n  className,\n  href,\n  elementAs,\n  onClick,\n  ...rest\n}: AnchorProps<T>) => {\n  const context = useSideNavContext()\n  const size = context?.size ?? 'M'\n\n  const classNames = useMemo(() => {\n    const { wrapper, button, body, bodyText } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      button: button({ size }),\n      body: body(),\n      bodyText: bodyText(),\n    }\n  }, [className, size])\n\n  const Anchor = elementAs || 'a'\n\n  return (\n    <li {...rest} data-current={!!current} className={classNames.wrapper}>\n      <Anchor className={classNames.button} href={href} onClick={onClick}>\n        <BodyCluster prefix={prefix} suffix={suffix} classNames={classNames}>\n          {children}\n        </BodyCluster>\n      </Anchor>\n    </li>\n  )\n}\n\nconst BodyCluster = memo<\n  Pick<AbstractProps, 'prefix' | 'suffix'> & {\n    children: ReactNode\n    classNames: { body: string; bodyText: string }\n  }\n>(({ prefix, suffix, children, classNames }) => (\n  <Cluster inline align=\"center\" className={classNames.body} as=\"span\">\n    {prefix}\n    <span className={classNames.bodyText}>{children}</span>\n    {suffix}\n  </Cluster>\n))\n"],"names":["tv","_jsx","_jsxs"],"mappings":"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"}

package/lib/components/Table/Th.cjs

@@ -40,7 +40,7 @@ const convertContentWidth = (contentWidth) => {
     }
     return contentWidth;
 };
-const Th = React.memo(({ children, sort, onSort, decorators, align, vAlign, fixed, contentWidth, className, style, ...rest }) => {
+const Th = React.memo(({ children, sort, onSort, align, vAlign, fixed, contentWidth, className, style, ...rest }) => {
     const actualClassName = React.useMemo(() => {
         const base = classNameGenerator({ className, align, vAlign });
         if (!fixed) {
@@ -54,7 +54,7 @@ const Th = React.memo(({ children, sort, onSort, decorators, align, vAlign, fixe
         width: convertContentWidth(contentWidth),
     }), [style, contentWidth]);
     const ariaSort = React.useMemo(() => (sort ? (sort === 'none' ? 'none' : `${sort}ending`) : undefined), [sort]);
-    return (jsxRuntime.jsx("th", { ...rest, "aria-sort": ariaSort, "data-fixed": fixed, className: actualClassName, style: actualStyle, children: sort ? (jsxRuntime.jsx(components_Table_ThSortButton.ThSortButton, { align: align, onSort: onSort, sort: sort, decorators: decorators, children: children })) : (children) }));
+    return (jsxRuntime.jsx("th", { ...rest, "aria-sort": ariaSort, "data-fixed": fixed, className: actualClassName, style: actualStyle, children: sort ? (jsxRuntime.jsx(components_Table_ThSortButton.ThSortButton, { align: align, onSort: onSort, sort: sort, children: children })) : (children) }));
 });
 
 exports.Th = Th;

package/lib/components/Table/Th.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Th.cjs","sources":["../../../src/components/Table/Th.tsx"],"sourcesContent":["import {\n  type AriaAttributes,\n  type ComponentPropsWithoutRef,\n  type PropsWithChildren,\n  memo,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { ThSortButton } from './ThSortButton'\nimport { reelShadowClassNameGenerator } from './reelShadowStyle'\n\nimport type { CellContentWidth } from './type'\n\nexport type AbstractProps = PropsWithChildren<\n  {\n    /** 並び替え状態 */\n    sort?: ComponentPropsWithoutRef<typeof ThSortButton>['sort']\n    /** 並び替えをクリックした時に発火するコールバック関数 */\n    onSort?: () => void\n    /** 横スクロール時、カラムを左右いずれかに固定 */\n    fixed?: 'left' | 'right'\n    /** 文言を変更するための関数 */\n    decorators?: ComponentPropsWithoutRef<typeof ThSortButton>['decorators']\n    contentWidth?: CellContentWidth\n  } & VariantProps<typeof classNameGenerator>\n>\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'th'>, keyof AbstractProps | 'onClick'>\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-Th',\n    'shr-whitespace-nowrap shr-border-0 shr-px-1 shr-py-0.75 shr-text-left shr-align-middle shr-text-sm shr-font-bold shr-leading-tight shr-text-black',\n    'aria-[sort]:shr-cursor-pointer',\n    'hover:aria-[sort]:shr-bg-head-darken',\n    '[&:has(:focus-visible)]:aria-[sort]:shr-focus-indicator',\n    '[&[aria-sort=none]_.smarthr-ui-Icon]:forced-colors:shr-fill-[GrayText]',\n    '[&[aria-sort=ascending]_.smarthr-ui-Icon:first-of-type]:forced-colors:shr-fill-[CanvasText] [&[aria-sort=ascending]_.smarthr-ui-Icon:last-of-type]:forced-colors:shr-fill-[GrayText]',\n    '[&[aria-sort=descending]_.smarthr-ui-Icon:first-of-type]:forced-colors:shr-fill-[GrayText] [&[aria-sort=descending]_.smarthr-ui-Icon:last-of-type]:forced-colors:shr-fill-[CanvasText]',\n  ],\n  variants: {\n    align: {\n      left: '',\n      right: 'shr-text-right',\n    },\n    vAlign: {\n      middle: '',\n      baseline: 'shr-align-baseline',\n      bottom: 'shr-align-bottom',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n    vAlign: 'middle',\n  },\n})\n\nconst convertContentWidth = (contentWidth?: CellContentWidth) => {\n  if (typeof contentWidth === 'number') {\n    // Th は fontSize.S のため、rem で指定する\n    return `${contentWidth}rem`\n  }\n\n  return contentWidth\n}\n\nexport const Th = memo<Props>(\n  ({\n    children,\n    sort,\n    onSort,\n    decorators,\n    align,\n    vAlign,\n    fixed,\n    contentWidth,\n    className,\n    style,\n    ...rest\n  }) => {\n    const actualClassName = useMemo(() => {\n      const base = classNameGenerator({ className, align, vAlign })\n\n      if (!fixed) {\n        return base\n      }\n\n      const shadow = reelShadowClassNameGenerator({ showShadow: false, direction: fixed })\n\n      return `${base} ${shadow}`\n    }, [align, className, fixed, vAlign])\n    const actualStyle = useMemo(\n      () => ({\n        ...style,\n        width: convertContentWidth(contentWidth),\n      }),\n      [style, contentWidth],\n    )\n\n    const ariaSort = useMemo<AriaAttributes['aria-sort'] | undefined>(\n      () => (sort ? (sort === 'none' ? 'none' : `${sort}ending`) : undefined),\n      [sort],\n    )\n\n    return (\n      <th\n        {...rest}\n        aria-sort={ariaSort}\n        data-fixed={fixed}\n        className={actualClassName}\n        style={actualStyle}\n      >\n        {sort ? (\n          <ThSortButton align={align} onSort={onSort} sort={sort} decorators={decorators}>\n            {children}\n          </ThSortButton>\n        ) : (\n          children\n        )}\n      </th>\n    )\n  },\n)\n"],"names":["tv","memo","useMemo","reelShadowClassNameGenerator","_jsx","ThSortButton"],"mappings":";;;;;;;;AA6BA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE;QACJ,eAAe;QACf,mJAAmJ;QACnJ,gCAAgC;QAChC,sCAAsC;QACtC,yDAAyD;QACzD,wEAAwE;QACxE,sLAAsL;QACtL,wLAAwL;AACzL,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,KAAK,EAAE,gBAAgB;AACxB,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,QAAQ,EAAE,oBAAoB;AAC9B,YAAA,MAAM,EAAE,kBAAkB;AAC3B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,QAAQ;AACjB,KAAA;AACF,CAAA,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,YAA+B,KAAI;AAC9D,IAAA,IAAI,OAAO,YAAY,KAAK,QAAQ,EAAE;;QAEpC,OAAO,CAAA,EAAG,YAAY,CAAA,GAAA,CAAK;IAC7B;AAEA,IAAA,OAAO,YAAY;AACrB,CAAC;AAEM,MAAM,EAAE,GAAGC,UAAI,CACpB,CAAC,EACC,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,UAAU,EACV,KAAK,EACL,MAAM,EACN,KAAK,EACL,YAAY,EACZ,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,eAAe,GAAGC,aAAO,CAAC,MAAK;AACnC,QAAA,MAAM,IAAI,GAAG,kBAAkB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QAE7D,IAAI,CAAC,KAAK,EAAE;AACV,YAAA,OAAO,IAAI;QACb;AAEA,QAAA,MAAM,MAAM,GAAGC,6DAA4B,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;AAEpF,QAAA,OAAO,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,MAAM,EAAE;IAC5B,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AACrC,IAAA,MAAM,WAAW,GAAGD,aAAO,CACzB,OAAO;AACL,QAAA,GAAG,KAAK;AACR,QAAA,KAAK,EAAE,mBAAmB,CAAC,YAAY,CAAC;AACzC,KAAA,CAAC,EACF,CAAC,KAAK,EAAE,YAAY,CAAC,CACtB;AAED,IAAA,MAAM,QAAQ,GAAGA,aAAO,CACtB,OAAO,IAAI,IAAI,IAAI,KAAK,MAAM,GAAG,MAAM,GAAG,CAAA,EAAG,IAAI,QAAQ,IAAI,SAAS,CAAC,EACvE,CAAC,IAAI,CAAC,CACP;IAED,QACEE,0BACM,IAAI,EAAA,WAAA,EACG,QAAQ,EAAA,YAAA,EACP,KAAK,EACjB,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,WAAW,EAAA,QAAA,EAEjB,IAAI,IACHA,cAAA,CAACC,0CAAY,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,YAC3E,QAAQ,EAAA,CACI,KAEf,QAAQ,CACT,EAAA,CACE;AAET,CAAC;;;;"}
+{"version":3,"file":"Th.cjs","sources":["../../../src/components/Table/Th.tsx"],"sourcesContent":["import {\n  type AriaAttributes,\n  type ComponentPropsWithoutRef,\n  type PropsWithChildren,\n  memo,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { ThSortButton } from './ThSortButton'\nimport { reelShadowClassNameGenerator } from './reelShadowStyle'\n\nimport type { CellContentWidth } from './type'\n\nexport type AbstractProps = PropsWithChildren<\n  {\n    /** 並び替え状態 */\n    sort?: ComponentPropsWithoutRef<typeof ThSortButton>['sort']\n    /** 並び替えをクリックした時に発火するコールバック関数 */\n    onSort?: () => void\n    /** 横スクロール時、カラムを左右いずれかに固定 */\n    fixed?: 'left' | 'right'\n    contentWidth?: CellContentWidth\n  } & VariantProps<typeof classNameGenerator>\n>\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'th'>, keyof AbstractProps | 'onClick'>\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-Th',\n    'shr-whitespace-nowrap shr-border-0 shr-px-1 shr-py-0.75 shr-text-left shr-align-middle shr-text-sm shr-font-bold shr-leading-tight shr-text-black',\n    'aria-[sort]:shr-cursor-pointer',\n    'hover:aria-[sort]:shr-bg-head-darken',\n    '[&:has(:focus-visible)]:aria-[sort]:shr-focus-indicator',\n    '[&[aria-sort=none]_.smarthr-ui-Icon]:forced-colors:shr-fill-[GrayText]',\n    '[&[aria-sort=ascending]_.smarthr-ui-Icon:first-of-type]:forced-colors:shr-fill-[CanvasText] [&[aria-sort=ascending]_.smarthr-ui-Icon:last-of-type]:forced-colors:shr-fill-[GrayText]',\n    '[&[aria-sort=descending]_.smarthr-ui-Icon:first-of-type]:forced-colors:shr-fill-[GrayText] [&[aria-sort=descending]_.smarthr-ui-Icon:last-of-type]:forced-colors:shr-fill-[CanvasText]',\n  ],\n  variants: {\n    align: {\n      left: '',\n      right: 'shr-text-right',\n    },\n    vAlign: {\n      middle: '',\n      baseline: 'shr-align-baseline',\n      bottom: 'shr-align-bottom',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n    vAlign: 'middle',\n  },\n})\n\nconst convertContentWidth = (contentWidth?: CellContentWidth) => {\n  if (typeof contentWidth === 'number') {\n    // Th は fontSize.S のため、rem で指定する\n    return `${contentWidth}rem`\n  }\n\n  return contentWidth\n}\n\nexport const Th = memo<Props>(\n  ({ children, sort, onSort, align, vAlign, fixed, contentWidth, className, style, ...rest }) => {\n    const actualClassName = useMemo(() => {\n      const base = classNameGenerator({ className, align, vAlign })\n\n      if (!fixed) {\n        return base\n      }\n\n      const shadow = reelShadowClassNameGenerator({ showShadow: false, direction: fixed })\n\n      return `${base} ${shadow}`\n    }, [align, className, fixed, vAlign])\n    const actualStyle = useMemo(\n      () => ({\n        ...style,\n        width: convertContentWidth(contentWidth),\n      }),\n      [style, contentWidth],\n    )\n\n    const ariaSort = useMemo<AriaAttributes['aria-sort'] | undefined>(\n      () => (sort ? (sort === 'none' ? 'none' : `${sort}ending`) : undefined),\n      [sort],\n    )\n\n    return (\n      <th\n        {...rest}\n        aria-sort={ariaSort}\n        data-fixed={fixed}\n        className={actualClassName}\n        style={actualStyle}\n      >\n        {sort ? (\n          <ThSortButton align={align} onSort={onSort} sort={sort}>\n            {children}\n          </ThSortButton>\n        ) : (\n          children\n        )}\n      </th>\n    )\n  },\n)\n"],"names":["tv","memo","useMemo","reelShadowClassNameGenerator","_jsx","ThSortButton"],"mappings":";;;;;;;;AA2BA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE;QACJ,eAAe;QACf,mJAAmJ;QACnJ,gCAAgC;QAChC,sCAAsC;QACtC,yDAAyD;QACzD,wEAAwE;QACxE,sLAAsL;QACtL,wLAAwL;AACzL,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,KAAK,EAAE,gBAAgB;AACxB,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,QAAQ,EAAE,oBAAoB;AAC9B,YAAA,MAAM,EAAE,kBAAkB;AAC3B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,QAAQ;AACjB,KAAA;AACF,CAAA,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,YAA+B,KAAI;AAC9D,IAAA,IAAI,OAAO,YAAY,KAAK,QAAQ,EAAE;;QAEpC,OAAO,CAAA,EAAG,YAAY,CAAA,GAAA,CAAK;IAC7B;AAEA,IAAA,OAAO,YAAY;AACrB,CAAC;AAEM,MAAM,EAAE,GAAGC,UAAI,CACpB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,KAAI;AAC5F,IAAA,MAAM,eAAe,GAAGC,aAAO,CAAC,MAAK;AACnC,QAAA,MAAM,IAAI,GAAG,kBAAkB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QAE7D,IAAI,CAAC,KAAK,EAAE;AACV,YAAA,OAAO,IAAI;QACb;AAEA,QAAA,MAAM,MAAM,GAAGC,6DAA4B,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;AAEpF,QAAA,OAAO,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,MAAM,EAAE;IAC5B,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AACrC,IAAA,MAAM,WAAW,GAAGD,aAAO,CACzB,OAAO;AACL,QAAA,GAAG,KAAK;AACR,QAAA,KAAK,EAAE,mBAAmB,CAAC,YAAY,CAAC;AACzC,KAAA,CAAC,EACF,CAAC,KAAK,EAAE,YAAY,CAAC,CACtB;AAED,IAAA,MAAM,QAAQ,GAAGA,aAAO,CACtB,OAAO,IAAI,IAAI,IAAI,KAAK,MAAM,GAAG,MAAM,GAAG,CAAA,EAAG,IAAI,QAAQ,IAAI,SAAS,CAAC,EACvE,CAAC,IAAI,CAAC,CACP;IAED,QACEE,0BACM,IAAI,EAAA,WAAA,EACG,QAAQ,EAAA,YAAA,EACP,KAAK,EACjB,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,WAAW,EAAA,QAAA,EAEjB,IAAI,IACHA,cAAA,CAACC,0CAAY,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAA,QAAA,EACnD,QAAQ,EAAA,CACI,KAEf,QAAQ,CACT,EAAA,CACE;AAET,CAAC;;;;"}

package/lib/components/Table/Th.d.ts

@@ -9,8 +9,6 @@ export type AbstractProps = PropsWithChildren<{
     onSort?: () => void;
     /** 横スクロール時、カラムを左右いずれかに固定 */
     fixed?: 'left' | 'right';
-    /** 文言を変更するための関数 */
-    decorators?: ComponentPropsWithoutRef<typeof ThSortButton>['decorators'];
     contentWidth?: CellContentWidth;
 } & VariantProps<typeof classNameGenerator>>;
 type Props = AbstractProps & Omit<ComponentPropsWithoutRef<'th'>, keyof AbstractProps | 'onClick'>;

package/lib/components/Table/Th.js

@@ -38,7 +38,7 @@ const convertContentWidth = (contentWidth) => {
     }
     return contentWidth;
 };
-const Th = memo(({ children, sort, onSort, decorators, align, vAlign, fixed, contentWidth, className, style, ...rest }) => {
+const Th = memo(({ children, sort, onSort, align, vAlign, fixed, contentWidth, className, style, ...rest }) => {
     const actualClassName = useMemo(() => {
         const base = classNameGenerator({ className, align, vAlign });
         if (!fixed) {
@@ -52,7 +52,7 @@ const Th = memo(({ children, sort, onSort, decorators, align, vAlign, fixed, con
         width: convertContentWidth(contentWidth),
     }), [style, contentWidth]);
     const ariaSort = useMemo(() => (sort ? (sort === 'none' ? 'none' : `${sort}ending`) : undefined), [sort]);
-    return (jsx("th", { ...rest, "aria-sort": ariaSort, "data-fixed": fixed, className: actualClassName, style: actualStyle, children: sort ? (jsx(ThSortButton, { align: align, onSort: onSort, sort: sort, decorators: decorators, children: children })) : (children) }));
+    return (jsx("th", { ...rest, "aria-sort": ariaSort, "data-fixed": fixed, className: actualClassName, style: actualStyle, children: sort ? (jsx(ThSortButton, { align: align, onSort: onSort, sort: sort, children: children })) : (children) }));
 });
 
 export { Th };

package/lib/components/Table/Th.js.map

@@ -1 +1 @@
-{"version":3,"file":"Th.js","sources":["../../../src/components/Table/Th.tsx"],"sourcesContent":["import {\n  type AriaAttributes,\n  type ComponentPropsWithoutRef,\n  type PropsWithChildren,\n  memo,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { ThSortButton } from './ThSortButton'\nimport { reelShadowClassNameGenerator } from './reelShadowStyle'\n\nimport type { CellContentWidth } from './type'\n\nexport type AbstractProps = PropsWithChildren<\n  {\n    /** 並び替え状態 */\n    sort?: ComponentPropsWithoutRef<typeof ThSortButton>['sort']\n    /** 並び替えをクリックした時に発火するコールバック関数 */\n    onSort?: () => void\n    /** 横スクロール時、カラムを左右いずれかに固定 */\n    fixed?: 'left' | 'right'\n    /** 文言を変更するための関数 */\n    decorators?: ComponentPropsWithoutRef<typeof ThSortButton>['decorators']\n    contentWidth?: CellContentWidth\n  } & VariantProps<typeof classNameGenerator>\n>\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'th'>, keyof AbstractProps | 'onClick'>\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-Th',\n    'shr-whitespace-nowrap shr-border-0 shr-px-1 shr-py-0.75 shr-text-left shr-align-middle shr-text-sm shr-font-bold shr-leading-tight shr-text-black',\n    'aria-[sort]:shr-cursor-pointer',\n    'hover:aria-[sort]:shr-bg-head-darken',\n    '[&:has(:focus-visible)]:aria-[sort]:shr-focus-indicator',\n    '[&[aria-sort=none]_.smarthr-ui-Icon]:forced-colors:shr-fill-[GrayText]',\n    '[&[aria-sort=ascending]_.smarthr-ui-Icon:first-of-type]:forced-colors:shr-fill-[CanvasText] [&[aria-sort=ascending]_.smarthr-ui-Icon:last-of-type]:forced-colors:shr-fill-[GrayText]',\n    '[&[aria-sort=descending]_.smarthr-ui-Icon:first-of-type]:forced-colors:shr-fill-[GrayText] [&[aria-sort=descending]_.smarthr-ui-Icon:last-of-type]:forced-colors:shr-fill-[CanvasText]',\n  ],\n  variants: {\n    align: {\n      left: '',\n      right: 'shr-text-right',\n    },\n    vAlign: {\n      middle: '',\n      baseline: 'shr-align-baseline',\n      bottom: 'shr-align-bottom',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n    vAlign: 'middle',\n  },\n})\n\nconst convertContentWidth = (contentWidth?: CellContentWidth) => {\n  if (typeof contentWidth === 'number') {\n    // Th は fontSize.S のため、rem で指定する\n    return `${contentWidth}rem`\n  }\n\n  return contentWidth\n}\n\nexport const Th = memo<Props>(\n  ({\n    children,\n    sort,\n    onSort,\n    decorators,\n    align,\n    vAlign,\n    fixed,\n    contentWidth,\n    className,\n    style,\n    ...rest\n  }) => {\n    const actualClassName = useMemo(() => {\n      const base = classNameGenerator({ className, align, vAlign })\n\n      if (!fixed) {\n        return base\n      }\n\n      const shadow = reelShadowClassNameGenerator({ showShadow: false, direction: fixed })\n\n      return `${base} ${shadow}`\n    }, [align, className, fixed, vAlign])\n    const actualStyle = useMemo(\n      () => ({\n        ...style,\n        width: convertContentWidth(contentWidth),\n      }),\n      [style, contentWidth],\n    )\n\n    const ariaSort = useMemo<AriaAttributes['aria-sort'] | undefined>(\n      () => (sort ? (sort === 'none' ? 'none' : `${sort}ending`) : undefined),\n      [sort],\n    )\n\n    return (\n      <th\n        {...rest}\n        aria-sort={ariaSort}\n        data-fixed={fixed}\n        className={actualClassName}\n        style={actualStyle}\n      >\n        {sort ? (\n          <ThSortButton align={align} onSort={onSort} sort={sort} decorators={decorators}>\n            {children}\n          </ThSortButton>\n        ) : (\n          children\n        )}\n      </th>\n    )\n  },\n)\n"],"names":["tv","_jsx"],"mappings":";;;;;;AA6BA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE;QACJ,eAAe;QACf,mJAAmJ;QACnJ,gCAAgC;QAChC,sCAAsC;QACtC,yDAAyD;QACzD,wEAAwE;QACxE,sLAAsL;QACtL,wLAAwL;AACzL,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,KAAK,EAAE,gBAAgB;AACxB,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,QAAQ,EAAE,oBAAoB;AAC9B,YAAA,MAAM,EAAE,kBAAkB;AAC3B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,QAAQ;AACjB,KAAA;AACF,CAAA,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,YAA+B,KAAI;AAC9D,IAAA,IAAI,OAAO,YAAY,KAAK,QAAQ,EAAE;;QAEpC,OAAO,CAAA,EAAG,YAAY,CAAA,GAAA,CAAK;IAC7B;AAEA,IAAA,OAAO,YAAY;AACrB,CAAC;AAEM,MAAM,EAAE,GAAG,IAAI,CACpB,CAAC,EACC,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,UAAU,EACV,KAAK,EACL,MAAM,EACN,KAAK,EACL,YAAY,EACZ,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,MAAK;AACnC,QAAA,MAAM,IAAI,GAAG,kBAAkB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QAE7D,IAAI,CAAC,KAAK,EAAE;AACV,YAAA,OAAO,IAAI;QACb;AAEA,QAAA,MAAM,MAAM,GAAG,4BAA4B,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;AAEpF,QAAA,OAAO,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,MAAM,EAAE;IAC5B,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AACrC,IAAA,MAAM,WAAW,GAAG,OAAO,CACzB,OAAO;AACL,QAAA,GAAG,KAAK;AACR,QAAA,KAAK,EAAE,mBAAmB,CAAC,YAAY,CAAC;AACzC,KAAA,CAAC,EACF,CAAC,KAAK,EAAE,YAAY,CAAC,CACtB;AAED,IAAA,MAAM,QAAQ,GAAG,OAAO,CACtB,OAAO,IAAI,IAAI,IAAI,KAAK,MAAM,GAAG,MAAM,GAAG,CAAA,EAAG,IAAI,QAAQ,IAAI,SAAS,CAAC,EACvE,CAAC,IAAI,CAAC,CACP;IAED,QACEC,eACM,IAAI,EAAA,WAAA,EACG,QAAQ,EAAA,YAAA,EACP,KAAK,EACjB,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,WAAW,EAAA,QAAA,EAEjB,IAAI,IACHA,GAAA,CAAC,YAAY,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,YAC3E,QAAQ,EAAA,CACI,KAEf,QAAQ,CACT,EAAA,CACE;AAET,CAAC;;;;"}
+{"version":3,"file":"Th.js","sources":["../../../src/components/Table/Th.tsx"],"sourcesContent":["import {\n  type AriaAttributes,\n  type ComponentPropsWithoutRef,\n  type PropsWithChildren,\n  memo,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { ThSortButton } from './ThSortButton'\nimport { reelShadowClassNameGenerator } from './reelShadowStyle'\n\nimport type { CellContentWidth } from './type'\n\nexport type AbstractProps = PropsWithChildren<\n  {\n    /** 並び替え状態 */\n    sort?: ComponentPropsWithoutRef<typeof ThSortButton>['sort']\n    /** 並び替えをクリックした時に発火するコールバック関数 */\n    onSort?: () => void\n    /** 横スクロール時、カラムを左右いずれかに固定 */\n    fixed?: 'left' | 'right'\n    contentWidth?: CellContentWidth\n  } & VariantProps<typeof classNameGenerator>\n>\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'th'>, keyof AbstractProps | 'onClick'>\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-Th',\n    'shr-whitespace-nowrap shr-border-0 shr-px-1 shr-py-0.75 shr-text-left shr-align-middle shr-text-sm shr-font-bold shr-leading-tight shr-text-black',\n    'aria-[sort]:shr-cursor-pointer',\n    'hover:aria-[sort]:shr-bg-head-darken',\n    '[&:has(:focus-visible)]:aria-[sort]:shr-focus-indicator',\n    '[&[aria-sort=none]_.smarthr-ui-Icon]:forced-colors:shr-fill-[GrayText]',\n    '[&[aria-sort=ascending]_.smarthr-ui-Icon:first-of-type]:forced-colors:shr-fill-[CanvasText] [&[aria-sort=ascending]_.smarthr-ui-Icon:last-of-type]:forced-colors:shr-fill-[GrayText]',\n    '[&[aria-sort=descending]_.smarthr-ui-Icon:first-of-type]:forced-colors:shr-fill-[GrayText] [&[aria-sort=descending]_.smarthr-ui-Icon:last-of-type]:forced-colors:shr-fill-[CanvasText]',\n  ],\n  variants: {\n    align: {\n      left: '',\n      right: 'shr-text-right',\n    },\n    vAlign: {\n      middle: '',\n      baseline: 'shr-align-baseline',\n      bottom: 'shr-align-bottom',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n    vAlign: 'middle',\n  },\n})\n\nconst convertContentWidth = (contentWidth?: CellContentWidth) => {\n  if (typeof contentWidth === 'number') {\n    // Th は fontSize.S のため、rem で指定する\n    return `${contentWidth}rem`\n  }\n\n  return contentWidth\n}\n\nexport const Th = memo<Props>(\n  ({ children, sort, onSort, align, vAlign, fixed, contentWidth, className, style, ...rest }) => {\n    const actualClassName = useMemo(() => {\n      const base = classNameGenerator({ className, align, vAlign })\n\n      if (!fixed) {\n        return base\n      }\n\n      const shadow = reelShadowClassNameGenerator({ showShadow: false, direction: fixed })\n\n      return `${base} ${shadow}`\n    }, [align, className, fixed, vAlign])\n    const actualStyle = useMemo(\n      () => ({\n        ...style,\n        width: convertContentWidth(contentWidth),\n      }),\n      [style, contentWidth],\n    )\n\n    const ariaSort = useMemo<AriaAttributes['aria-sort'] | undefined>(\n      () => (sort ? (sort === 'none' ? 'none' : `${sort}ending`) : undefined),\n      [sort],\n    )\n\n    return (\n      <th\n        {...rest}\n        aria-sort={ariaSort}\n        data-fixed={fixed}\n        className={actualClassName}\n        style={actualStyle}\n      >\n        {sort ? (\n          <ThSortButton align={align} onSort={onSort} sort={sort}>\n            {children}\n          </ThSortButton>\n        ) : (\n          children\n        )}\n      </th>\n    )\n  },\n)\n"],"names":["tv","_jsx"],"mappings":";;;;;;AA2BA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE;QACJ,eAAe;QACf,mJAAmJ;QACnJ,gCAAgC;QAChC,sCAAsC;QACtC,yDAAyD;QACzD,wEAAwE;QACxE,sLAAsL;QACtL,wLAAwL;AACzL,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,KAAK,EAAE,gBAAgB;AACxB,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,QAAQ,EAAE,oBAAoB;AAC9B,YAAA,MAAM,EAAE,kBAAkB;AAC3B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,QAAQ;AACjB,KAAA;AACF,CAAA,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,YAA+B,KAAI;AAC9D,IAAA,IAAI,OAAO,YAAY,KAAK,QAAQ,EAAE;;QAEpC,OAAO,CAAA,EAAG,YAAY,CAAA,GAAA,CAAK;IAC7B;AAEA,IAAA,OAAO,YAAY;AACrB,CAAC;AAEM,MAAM,EAAE,GAAG,IAAI,CACpB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,KAAI;AAC5F,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,MAAK;AACnC,QAAA,MAAM,IAAI,GAAG,kBAAkB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QAE7D,IAAI,CAAC,KAAK,EAAE;AACV,YAAA,OAAO,IAAI;QACb;AAEA,QAAA,MAAM,MAAM,GAAG,4BAA4B,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;AAEpF,QAAA,OAAO,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,MAAM,EAAE;IAC5B,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AACrC,IAAA,MAAM,WAAW,GAAG,OAAO,CACzB,OAAO;AACL,QAAA,GAAG,KAAK;AACR,QAAA,KAAK,EAAE,mBAAmB,CAAC,YAAY,CAAC;AACzC,KAAA,CAAC,EACF,CAAC,KAAK,EAAE,YAAY,CAAC,CACtB;AAED,IAAA,MAAM,QAAQ,GAAG,OAAO,CACtB,OAAO,IAAI,IAAI,IAAI,KAAK,MAAM,GAAG,MAAM,GAAG,CAAA,EAAG,IAAI,QAAQ,IAAI,SAAS,CAAC,EACvE,CAAC,IAAI,CAAC,CACP;IAED,QACEC,eACM,IAAI,EAAA,WAAA,EACG,QAAQ,EAAA,YAAA,EACP,KAAK,EACjB,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,WAAW,EAAA,QAAA,EAEjB,IAAI,IACHA,GAAA,CAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAA,QAAA,EACnD,QAAQ,EAAA,CACI,KAEf,QAAQ,CACT,EAAA,CACE;AAET,CAAC;;;;"}

package/lib/components/Table/ThCheckbox.cjs

@@ -6,7 +6,7 @@ var React = require('react');
 var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../intl/useIntl.cjs');
-require('react-intl');
+require('../../intl/Localizer.cjs');
 require('../../_virtual/dayjs.min.cjs');
 require('../../intl/TimeFormatter.cjs');
 var components_Checkbox_Checkbox = require('../Checkbox/Checkbox.cjs');

package/lib/components/Table/ThCheckbox.js

@@ -4,7 +4,7 @@ import { forwardRef, 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 '../../intl/IntlProvider.js';
 import { useIntl } from '../../intl/useIntl.js';
-import 'react-intl';
+import '../../intl/Localizer.js';
 import '../../_virtual/dayjs.min.js';
 import '../../intl/TimeFormatter.js';
 import { Checkbox } from '../Checkbox/Checkbox.js';

package/lib/components/Table/ThSortButton.cjs

@@ -6,7 +6,7 @@ var React = require('react');
 var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../intl/useIntl.cjs');
-require('react-intl');
+require('../../intl/Localizer.cjs');
 require('../../_virtual/dayjs.min.cjs');
 require('../../intl/TimeFormatter.cjs');
 require('../Button/Button.cjs');
@@ -26,9 +26,9 @@ const sortButtonClassNameGenerator = index.tv({
         },
     },
 });
-const ThSortButton = React.memo(({ align, sort, decorators, onSort, children }) => {
+const ThSortButton = React.memo(({ align, sort, onSort, children }) => {
     const { localize } = intl_useIntl.useIntl();
-    const decoratorDefaultTexts = React.useMemo(() => ({
+    const defaultTexts = React.useMemo(() => ({
         asc: localize({
             id: 'smarthr-ui/Th/sortDirectionAsc',
             defaultText: '昇順',
@@ -45,9 +45,8 @@ const ThSortButton = React.memo(({ align, sort, decorators, onSort, children })
     const sortLabel = React.useMemo(() => {
         if (!sort)
             return undefined;
-        return (decorators?.sortDirectionIconAlt?.(decoratorDefaultTexts[sort], { sort }) ??
-            decoratorDefaultTexts[sort]);
-    }, [decorators, sort, decoratorDefaultTexts]);
+        return defaultTexts[sort];
+    }, [sort, defaultTexts]);
     const className = React.useMemo(() => sortButtonClassNameGenerator({ align }), [align]);
     return (jsxRuntime.jsxs(components_Button_UnstyledButton.UnstyledButton, { onClick: onSort, className: className, children: [children, jsxRuntime.jsx(SortIcon, {}), jsxRuntime.jsx(components_VisuallyHiddenText_VisuallyHiddenText.VisuallyHiddenText, { children: sortLabel })] }));
 });

package/lib/components/Table/ThSortButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThSortButton.cjs","sources":["../../../src/components/Table/ThSortButton.tsx"],"sourcesContent":["'use client'\n\nimport { type PropsWithChildren, type ReactNode, memo, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../intl'\nimport { UnstyledButton } from '../Button'\nimport { FaSortDownIcon, FaSortUpIcon } from '../Icon'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nconst sortButtonClassNameGenerator = tv({\n  base: 'shr-relative -shr-mx-1 -shr-my-0.75 shr-inline-flex shr-w-full shr-items-center shr-justify-between shr-gap-x-0.5 shr-px-1 shr-py-0.75 shr-font-bold',\n  variants: {\n    align: {\n      left: '',\n      right: 'shr-justify-end',\n    },\n  },\n})\n\ntype sortTypes = 'asc' | 'desc' | 'none'\n\ntype Props = PropsWithChildren<{\n  align?: VariantProps<typeof sortButtonClassNameGenerator>['align']\n  onSort?: () => void\n  sort?: sortTypes\n  decorators?: {\n    sortDirectionIconAlt: (text: string, { sort }: { sort: sortTypes }) => ReactNode\n  }\n}>\n\nexport const ThSortButton = memo<Props>(({ align, sort, decorators, onSort, children }) => {\n  const { localize } = useIntl()\n\n  const decoratorDefaultTexts = useMemo(\n    () => ({\n      asc: localize({\n        id: 'smarthr-ui/Th/sortDirectionAsc',\n        defaultText: '昇順',\n      }),\n      desc: localize({\n        id: 'smarthr-ui/Th/sortDirectionDesc',\n        defaultText: '降順',\n      }),\n      none: localize({\n        id: 'smarthr-ui/Th/sortDirectionNone',\n        defaultText: '並び替えなし',\n      }),\n    }),\n    [localize],\n  )\n\n  const sortLabel = useMemo(() => {\n    if (!sort) return undefined\n\n    return (\n      decorators?.sortDirectionIconAlt?.(decoratorDefaultTexts[sort], { sort }) ??\n      decoratorDefaultTexts[sort]\n    )\n  }, [decorators, sort, decoratorDefaultTexts])\n\n  const className = useMemo(() => sortButtonClassNameGenerator({ align }), [align])\n\n  return (\n    <UnstyledButton onClick={onSort} className={className}>\n      {children}\n      <SortIcon />\n      <VisuallyHiddenText>{sortLabel}</VisuallyHiddenText>\n    </UnstyledButton>\n  )\n})\n\nconst sortIconClassNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Icon-extended shr-relative shr-h-1 shr-w-1',\n    upIcon: [\n      'shr-absolute shr-left-0 shr-top-0',\n      'shr-text-base',\n      '[[aria-sort=\"none\"]_&]:shr-text-disabled',\n      '[[aria-sort=\"ascending\"]_&]:shr-text-black',\n      '[[aria-sort=\"descending\"]_&]:shr-text-disabled',\n    ],\n    downIcon: [\n      'shr-absolute shr-left-0 shr-top-0',\n      'shr-text-base',\n      '[[aria-sort=\"none\"]_&]:shr-text-disabled',\n      '[[aria-sort=\"ascending\"]_&]:shr-text-disabled',\n      '[[aria-sort=\"descending\"]_&]:shr-text-black',\n    ],\n  },\n})\n\nconst SortIcon = memo(() => {\n  const classNames = useMemo(() => {\n    const { wrapper, upIcon, downIcon } = sortIconClassNameGenerator()\n\n    return {\n      wrapper: wrapper(),\n      upIcon: upIcon(),\n      downIcon: downIcon(),\n    }\n  }, [])\n\n  return (\n    <span className={classNames.wrapper}>\n      <FaSortUpIcon className={classNames.upIcon} />\n      <FaSortDownIcon className={classNames.downIcon} />\n    </span>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAUA;AACE;AACA;AACE;AACE;AACA;AACD;AACF;AACF;AAaM;AACL;AAEA;;AAGM;AACA;;;AAGA;AACA;;;AAGA;AACA;;AAEH;AAIH;AACE;AAAW;AAEX;AAEE;;AAIJ;;AASF;AAEA;AACE;AACE;AACA;;;;;;AAMC;AACD;;;;;;AAMC;AACF;AACF;AAED;AACE;;;;;;;;AAUA;AAMF;;"}
+{"version":3,"file":"ThSortButton.cjs","sources":["../../../src/components/Table/ThSortButton.tsx"],"sourcesContent":["'use client'\n\nimport { type PropsWithChildren, memo, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../intl'\nimport { UnstyledButton } from '../Button'\nimport { FaSortDownIcon, FaSortUpIcon } from '../Icon'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nconst sortButtonClassNameGenerator = tv({\n  base: 'shr-relative -shr-mx-1 -shr-my-0.75 shr-inline-flex shr-w-full shr-items-center shr-justify-between shr-gap-x-0.5 shr-px-1 shr-py-0.75 shr-font-bold',\n  variants: {\n    align: {\n      left: '',\n      right: 'shr-justify-end',\n    },\n  },\n})\n\ntype sortTypes = 'asc' | 'desc' | 'none'\n\ntype Props = PropsWithChildren<{\n  align?: VariantProps<typeof sortButtonClassNameGenerator>['align']\n  onSort?: () => void\n  sort?: sortTypes\n}>\n\nexport const ThSortButton = memo<Props>(({ align, sort, onSort, children }) => {\n  const { localize } = useIntl()\n\n  const defaultTexts = useMemo(\n    () => ({\n      asc: localize({\n        id: 'smarthr-ui/Th/sortDirectionAsc',\n        defaultText: '昇順',\n      }),\n      desc: localize({\n        id: 'smarthr-ui/Th/sortDirectionDesc',\n        defaultText: '降順',\n      }),\n      none: localize({\n        id: 'smarthr-ui/Th/sortDirectionNone',\n        defaultText: '並び替えなし',\n      }),\n    }),\n    [localize],\n  )\n\n  const sortLabel = useMemo(() => {\n    if (!sort) return undefined\n\n    return defaultTexts[sort]\n  }, [sort, defaultTexts])\n\n  const className = useMemo(() => sortButtonClassNameGenerator({ align }), [align])\n\n  return (\n    <UnstyledButton onClick={onSort} className={className}>\n      {children}\n      <SortIcon />\n      <VisuallyHiddenText>{sortLabel}</VisuallyHiddenText>\n    </UnstyledButton>\n  )\n})\n\nconst sortIconClassNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Icon-extended shr-relative shr-h-1 shr-w-1',\n    upIcon: [\n      'shr-absolute shr-left-0 shr-top-0',\n      'shr-text-base',\n      '[[aria-sort=\"none\"]_&]:shr-text-disabled',\n      '[[aria-sort=\"ascending\"]_&]:shr-text-black',\n      '[[aria-sort=\"descending\"]_&]:shr-text-disabled',\n    ],\n    downIcon: [\n      'shr-absolute shr-left-0 shr-top-0',\n      'shr-text-base',\n      '[[aria-sort=\"none\"]_&]:shr-text-disabled',\n      '[[aria-sort=\"ascending\"]_&]:shr-text-disabled',\n      '[[aria-sort=\"descending\"]_&]:shr-text-black',\n    ],\n  },\n})\n\nconst SortIcon = memo(() => {\n  const classNames = useMemo(() => {\n    const { wrapper, upIcon, downIcon } = sortIconClassNameGenerator()\n\n    return {\n      wrapper: wrapper(),\n      upIcon: upIcon(),\n      downIcon: downIcon(),\n    }\n  }, [])\n\n  return (\n    <span className={classNames.wrapper}>\n      <FaSortUpIcon className={classNames.upIcon} />\n      <FaSortDownIcon className={classNames.downIcon} />\n    </span>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAUA;AACE;AACA;AACE;AACE;AACA;AACD;AACF;AACF;AAUM;AACL;AAEA;;AAGM;AACA;;;AAGA;AACA;;;AAGA;AACA;;AAEH;AAIH;AACE;AAAW;AAEX;AACF;AAEA;;AASF;AAEA;AACE;AACE;AACA;;;;;;AAMC;AACD;;;;;;AAMC;AACF;AACF;AAED;AACE;;;;;;;;AAUA;AAMF;;"}

package/lib/components/Table/ThSortButton.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren, type ReactNode } from 'react';
+import { type PropsWithChildren } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 declare const sortButtonClassNameGenerator: import("tailwind-variants").TVReturnType<{
     align: {
@@ -41,11 +41,6 @@ type Props = PropsWithChildren<{
     align?: VariantProps<typeof sortButtonClassNameGenerator>['align'];
     onSort?: () => void;
     sort?: sortTypes;
-    decorators?: {
-        sortDirectionIconAlt: (text: string, { sort }: {
-            sort: sortTypes;
-        }) => ReactNode;
-    };
 }>;
 export declare const ThSortButton: import("react").NamedExoticComponent<Props>;
 export {};