smarthr-ui 99.3.0 → 99.3.2

package/lib/components/Scroller/Scroller.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scroller.js","sources":["../../../src/components/Scroller/Scroller.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useSectionWrapper } from '../SectioningContent'\n\ntype BaseProps = PropsWithChildren<\n  VariantProps<typeof classNameGenerator> & {\n    as?: string | ComponentType<any>\n  }\n>\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps | 'tabIndex'>\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-Scroller',\n  variants: {\n    direction: {\n      horizontal: '',\n      vertical: '',\n      both: '',\n    },\n    styleType: {\n      auto: '',\n      scroll: '',\n    },\n  },\n  compoundVariants: [\n    {\n      direction: 'vertical',\n      styleType: 'auto',\n      className: 'shr-overflow-y-auto shr-overflow-x-hidden',\n    },\n    {\n      direction: 'horizontal',\n      styleType: 'auto',\n      className: 'shr-overflow-x-auto shr-overflow-y-hidden',\n    },\n    {\n      direction: 'both',\n      styleType: 'auto',\n      className: 'shr-overflow-auto',\n    },\n    {\n      direction: 'vertical',\n      styleType: 'scroll',\n      className: 'shr-overflow-x-hidden shr-overflow-y-scroll',\n    },\n    {\n      direction: 'horizontal',\n      styleType: 'scroll',\n      className: 'shr-overflow-y-hidden shr-overflow-x-scroll',\n    },\n    {\n      direction: 'both',\n      styleType: 'scroll',\n      className: 'shr-overflow-scroll',\n    },\n  ],\n})\n\nexport const Scroller = forwardRef<HTMLDivElement, Props>(\n  (\n    {\n      as: Component = 'div',\n      direction = 'vertical',\n      styleType = 'auto',\n      className,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => wrapperRef.current!)\n\n    const [tabIndex, setTabIndex] = useState<0 | undefined>(undefined)\n\n    const actualClassName = useMemo(\n      () =>\n        classNameGenerator({\n          direction,\n          styleType,\n          className,\n        }),\n      [direction, styleType, className],\n    )\n\n    useEffect(() => {\n      const refCurrent = wrapperRef.current\n      if (!refCurrent) return\n\n      const autoTabIndex = () => {\n        let nextTabIndex: 0 | undefined = undefined\n\n        switch (direction) {\n          case 'vertical':\n            nextTabIndex = refCurrent.scrollHeight > refCurrent.clientHeight ? 0 : undefined\n            break\n          case 'horizontal':\n            nextTabIndex = refCurrent.scrollWidth > refCurrent.clientWidth ? 0 : undefined\n            break\n          case 'both':\n            nextTabIndex =\n              refCurrent.scrollHeight > refCurrent.clientHeight ||\n              refCurrent.scrollWidth > refCurrent.clientWidth\n                ? 0\n                : undefined\n            break\n        }\n\n        setTabIndex(nextTabIndex)\n      }\n\n      autoTabIndex()\n\n      const resizeObserver = new ResizeObserver(autoTabIndex)\n      resizeObserver.observe(refCurrent)\n\n      return () => {\n        resizeObserver.unobserve(refCurrent)\n      }\n    }, [direction])\n\n    const Wrapper = useSectionWrapper(Component)\n    const body = (\n      <Component {...rest} ref={wrapperRef} className={actualClassName} tabIndex={tabIndex}>\n        {children}\n      </Component>\n    )\n\n    if (Wrapper) {\n      return <Wrapper>{body}</Wrapper>\n    }\n\n    return body\n  },\n)\n"],"names":[],"mappings":";;;;;;;;AAwBA;AACE;AACA;AACE;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACD;AACE;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACF;AACF;AAEM;AAYH;;;;;;;;;AAiBE;AACA;;;;;AAMI;AACE;;AAEF;AACE;;AAEF;;AAEI;AACA;AACE;;;;;AAMV;AAEA;AAEA;AACA;AAEA;AACE;AACF;AACF;AAEA;;;AAQE;;AAGF;AACF;;"}
+{"version":3,"file":"Scroller.js","sources":["../../../src/components/Scroller/Scroller.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useSectionWrapper } from '../SectioningContent'\n\ntype BaseProps = PropsWithChildren<\n  VariantProps<typeof classNameGenerator> & {\n    as?: string | ComponentType<any>\n  }\n>\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps | 'tabIndex'>\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-Scroller',\n  variants: {\n    direction: {\n      horizontal: '',\n      vertical: '',\n      both: '',\n    },\n    styleType: {\n      auto: '',\n      scroll: '',\n    },\n  },\n  compoundVariants: [\n    {\n      direction: 'vertical',\n      styleType: 'auto',\n      className: 'shr-overflow-y-auto shr-overflow-x-hidden',\n    },\n    {\n      direction: 'horizontal',\n      styleType: 'auto',\n      className: 'shr-overflow-x-auto shr-overflow-y-hidden',\n    },\n    {\n      direction: 'both',\n      styleType: 'auto',\n      className: 'shr-overflow-auto',\n    },\n    {\n      direction: 'vertical',\n      styleType: 'scroll',\n      className: 'shr-overflow-x-hidden shr-overflow-y-scroll',\n    },\n    {\n      direction: 'horizontal',\n      styleType: 'scroll',\n      className: 'shr-overflow-y-hidden shr-overflow-x-scroll',\n    },\n    {\n      direction: 'both',\n      styleType: 'scroll',\n      className: 'shr-overflow-scroll',\n    },\n  ],\n})\n\nexport const Scroller = forwardRef<HTMLDivElement, Props>(\n  (\n    {\n      as: Component = 'div',\n      direction = 'vertical',\n      styleType = 'auto',\n      className,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    // as が切り替わると DOM 要素が変わるため、Component を依存配列に含める\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    useImperativeHandle(ref, () => wrapperRef.current!, [Component])\n\n    const [tabIndex, setTabIndex] = useState<0 | undefined>(undefined)\n\n    const actualClassName = useMemo(\n      () =>\n        classNameGenerator({\n          direction,\n          styleType,\n          className,\n        }),\n      [direction, styleType, className],\n    )\n\n    useEffect(() => {\n      const refCurrent = wrapperRef.current\n      if (!refCurrent) return\n\n      const autoTabIndex = () => {\n        let nextTabIndex: 0 | undefined = undefined\n\n        switch (direction) {\n          case 'vertical':\n            nextTabIndex = refCurrent.scrollHeight > refCurrent.clientHeight ? 0 : undefined\n            break\n          case 'horizontal':\n            nextTabIndex = refCurrent.scrollWidth > refCurrent.clientWidth ? 0 : undefined\n            break\n          case 'both':\n            nextTabIndex =\n              refCurrent.scrollHeight > refCurrent.clientHeight ||\n              refCurrent.scrollWidth > refCurrent.clientWidth\n                ? 0\n                : undefined\n            break\n        }\n\n        setTabIndex(nextTabIndex)\n      }\n\n      autoTabIndex()\n\n      const resizeObserver = new ResizeObserver(autoTabIndex)\n      resizeObserver.observe(refCurrent)\n\n      return () => {\n        resizeObserver.unobserve(refCurrent)\n      }\n    }, [direction])\n\n    const Wrapper = useSectionWrapper(Component)\n    const body = (\n      <Component {...rest} ref={wrapperRef} className={actualClassName} tabIndex={tabIndex}>\n        {children}\n      </Component>\n    )\n\n    if (Wrapper) {\n      return <Wrapper>{body}</Wrapper>\n    }\n\n    return body\n  },\n)\n"],"names":[],"mappings":";;;;;;;;AAwBA;AACE;AACA;AACE;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACD;AACE;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACF;AACF;AAEM;AAYH;;;AAIA;;;;;;;;AAeE;AACA;;;;;AAMI;AACE;;AAEF;AACE;;AAEF;;AAEI;AACA;AACE;;;;;AAMV;AAEA;AAEA;AACA;AAEA;AACE;AACF;AACF;AAEA;;;AAQE;;AAGF;AACF;;"}

package/lib/components/Select/Select.cjs

@@ -60,12 +60,17 @@ const ActualSelect = ({ options, onChange, onChangeValue, error, width, hasBlank
             iconWrap: iconWrap(sizeProps),
             blankOptGroup: blankOptgroup(),
         };
-    }, [className, size]);
-    const wrapperStyle = React.useMemo(() => ({
-        width: typeof width === 'number' ? `${width}px` : width,
-    }), [width]);
-    const actualBlankLabel = blankLabel ?? '';
-    return (jsxRuntime.jsxs("span", { className: classNames.wrapper, style: wrapperStyle, children: [jsxRuntime.jsxs("select", { ...rest, "data-smarthr-ui-input": "true", onChange: (e) => {
+    }, [size, className]);
+    return (jsxRuntime.jsxs("span", { className: classNames.wrapper, style: {
+            width: typeof width === 'number' ? `${width}px` : width,
+        }, children: [jsxRuntime.jsxs("select", { ...rest, ref: ref, disabled: disabled, 
+                // HINT: required属性を設定すると、iOS端末で以下の問題が発生します
+                //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない
+                //    - エラーメッセージが表示されない
+                //    - 問題のある入力フィールドまでスクロールしない
+                // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです
+                // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります
+                required: libs_ua.isIOS ? undefined : required, "aria-invalid": error || undefined, "data-smarthr-ui-input": "true", onChange: (e) => {
                     onChange?.(e);
                     if (onChangeValue) {
                         const selectedOption = options
@@ -75,14 +80,7 @@ const ActualSelect = ({ options, onChange, onChangeValue, error, width, hasBlank
                             onChangeValue(selectedOption.value);
                         }
                     }
-                }, "aria-invalid": error || undefined, disabled: disabled, 
-                // HINT: required属性を設定すると、iOS端末で以下の問題が発生します
-                //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない
-                //    - エラーメッセージが表示されない
-                //    - 問題のある入力フィールドまでスクロールしない
-                // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです
-                // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります
-                required: libs_ua.isIOS ? undefined : required, ref: ref, className: classNames.select, children: [jsxRuntime.jsx(BlankOption, { hasBlank: hasBlank, children: actualBlankLabel }), options.map((option, index) => (React.createElement(Option, { ...option, key: index }))), jsxRuntime.jsx(NotOmittingLabelsInMobileSafari, { className: classNames.blankOptGroup })] }), jsxRuntime.jsx("span", { className: classNames.iconWrap, children: jsxRuntime.jsx(components_Icon_FaIcon.FaAngleDownIcon, {}) })] }));
+                }, className: classNames.select, children: [jsxRuntime.jsx(BlankOption, { hasBlank: hasBlank, children: blankLabel ?? '' }), options.map((option, index) => (React.createElement(Option, { ...option, key: index }))), jsxRuntime.jsx(NotOmittingLabelsInMobileSafari, { className: classNames.blankOptGroup })] }), jsxRuntime.jsx("span", { className: classNames.iconWrap, children: jsxRuntime.jsx(components_Icon_FaIcon.FaAngleDownIcon, {}) })] }));
 };
 const BlankOption = React.memo(({ hasBlank, children }) => hasBlank && jsxRuntime.jsx("option", { value: "", children: children }));
 const Option = React.memo((option) => {

package/lib/components/Select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type OptgroupHTMLAttributes,\n  type OptionHTMLAttributes,\n  type PropsWithChildren,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { isIOS, isMobileSafari } from '../../libs/ua'\nimport { genericsForwardRef } from '../../libs/util'\nimport { FaAngleDownIcon } from '../Icon'\n\ntype Option<T extends string> = {\n  value: T\n} & Omit<OptionHTMLAttributes<HTMLOptionElement>, 'value'>\ntype Optgroup<T extends string> = {\n  label: string\n  options: Array<Option<T>>\n} & OptgroupHTMLAttributes<HTMLOptGroupElement>\n\ntype BaseProps<T extends string> = {\n  /** 選択肢のデータの配列 */\n  options: Array<Option<T> | Optgroup<T>>\n  /** フォームの値が変わったときに発火するコールバック関数 */\n  onChangeValue?: (value: T) => void\n  /** フォームの値にエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** コンポーネントの大きさ */\n  size?: 'M' | 'S'\n  /** 空の選択肢を表示するかどうか */\n  hasBlank?: boolean\n  /** 空の選択肢のラベル */\n  blankLabel?: string\n}\n\ntype Props<T extends string> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<'select'>, keyof BaseProps<string> | 'children'>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Select shr-relative shr-inline-block',\n    select: [\n      'shr-peer shr-border-shorthand shr-w-full shr-cursor-pointer shr-appearance-none shr-rounded-m shr-bg-white shr-text-base shr-leading-tight shr-text-black',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      'disabled:shr-pointer-events-none disabled:shr-bg-white-darken disabled:shr-text-disabled disabled:shr-opacity-100',\n      'contrast-more:shr-border-high-contrast',\n      /* padding に依る積み上げでは文字が見切れてしまうため */\n      'shr-min-h-[calc(theme(fontSize.base)_+_theme(spacing[0.75])_*_2_+_theme(spacing.px)_*_2)]',\n      'shr-border-default disabled:shr-border-disabled',\n      'aria-[invalid]:shr-border-danger',\n    ],\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-inset-y-0 shr-inline-flex shr-items-center shr-text-grey',\n      'peer-focus-visible:shr-text-black peer-disabled:shr-text-disabled',\n    ],\n    blankOptgroup: 'shr-hidden',\n  },\n  variants: {\n    size: {\n      M: {\n        select: 'shr-py-0.5 shr-pe-2 shr-ps-0.5',\n        // ((右 padding - アイコン幅) / 2) + 右 border\n        iconWrap: 'shr-end-[calc(theme(spacing[0.5])_+_theme(spacing.px))]',\n      },\n      S: {\n        select: [\n          'shr-px-0.5 shr-py-0.25 shr-pe-1.5 shr-text-sm',\n          /* padding に依る積み上げでは文字が見切れてしまうため */\n          'shr-min-h-[calc(theme(fontSize.sm)_+_theme(spacing[0.5])_*_2_+_theme(spacing.px)_*_2)]',\n        ],\n        iconWrap: 'shr-end-0.5 shr-text-sm',\n      },\n    },\n  },\n})\n\nconst ActualSelect = <T extends string>(\n  {\n    options,\n    onChange,\n    onChangeValue,\n    error,\n    width,\n    hasBlank,\n    blankLabel,\n    size,\n    className,\n    disabled,\n    required,\n    ...rest\n  }: Props<T>,\n  ref: ForwardedRef<HTMLSelectElement>,\n) => {\n  const classNames = useMemo(() => {\n    const { wrapper, select, iconWrap, blankOptgroup } = classNameGenerator()\n    const sizeProps = {\n      size: size || 'M',\n    }\n\n    return {\n      wrapper: wrapper({ className }),\n      select: select(sizeProps),\n      iconWrap: iconWrap(sizeProps),\n      blankOptGroup: blankOptgroup(),\n    }\n  }, [className, size])\n  const wrapperStyle = useMemo(\n    () => ({\n      width: typeof width === 'number' ? `${width}px` : width,\n    }),\n    [width],\n  )\n\n  const actualBlankLabel = blankLabel ?? ''\n\n  return (\n    <span className={classNames.wrapper} style={wrapperStyle}>\n      <select\n        {...rest}\n        data-smarthr-ui-input=\"true\"\n        onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n          onChange?.(e)\n\n          if (onChangeValue) {\n            const selectedOption = options\n              .flatMap((option) => ('value' in option ? [option] : option.options))\n              .find((option) => option.value === e.target.value)\n\n            if (selectedOption) {\n              onChangeValue(selectedOption.value)\n            }\n          }\n        }}\n        aria-invalid={error || undefined}\n        disabled={disabled}\n        // HINT: required属性を設定すると、iOS端末で以下の問題が発生します\n        //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない\n        //    - エラーメッセージが表示されない\n        //    - 問題のある入力フィールドまでスクロールしない\n        // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです\n        // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります\n        required={isIOS ? undefined : required}\n        ref={ref}\n        className={classNames.select}\n      >\n        <BlankOption hasBlank={hasBlank}>{actualBlankLabel}</BlankOption>\n        {options.map((option, index) => (\n          <Option {...option} key={index} />\n        ))}\n        <NotOmittingLabelsInMobileSafari className={classNames.blankOptGroup} />\n      </select>\n      <span className={classNames.iconWrap}>\n        <FaAngleDownIcon />\n      </span>\n    </span>\n  )\n}\n\nconst BlankOption = memo<\n  PropsWithChildren<{\n    hasBlank: boolean | undefined\n  }>\n>(({ hasBlank, children }) => hasBlank && <option value=\"\">{children}</option>)\n\nconst Option = memo<Props<string>['options'][number]>((option) => {\n  if ('value' in option) {\n    return <option {...option}>{option.label}</option>\n  }\n\n  const { options: groupedOptions, label, ...rest } = option\n\n  return (\n    <optgroup {...rest} key={label} label={label}>\n      {groupedOptions.map((groupedOption) => (\n        <option {...groupedOption} key={groupedOption.value}>\n          {groupedOption.label}\n        </option>\n      ))}\n    </optgroup>\n  )\n})\n\n// Support for not omitting labels in Mobile Safari\nconst NotOmittingLabelsInMobileSafari = memo<{ className: string }>(\n  ({ className }) => isMobileSafari && <optgroup className={className} />,\n)\n\nexport const Select = genericsForwardRef(ActualSelect)\n"],"names":[],"mappings":";;;;;;;;;;;;AA8CA;AACE;AACE;AACA;;;;;;;;;;AAUC;AACD;;;AAGC;AACD;AACD;AACD;AACE;AACE;AACE;;AAEA;AACD;AACD;AACE;;;;AAIC;AACD;AACD;AACF;AACF;AACF;AAED;AAiBE;AACE;AACA;;;;AAKE;AACA;AACA;;;AAGJ;AACA;AAEI;AACD;AAIH;;AAQQ;;;;AAKK;;AAGD;;;AAGN;;;;;;;AASA;AAeR;AAEA;AAMA;AACE;AACE;;AAGF;AAEA;AASF;AAEA;AACA;;;"}
+{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type OptgroupHTMLAttributes,\n  type OptionHTMLAttributes,\n  type PropsWithChildren,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { isIOS, isMobileSafari } from '../../libs/ua'\nimport { genericsForwardRef } from '../../libs/util'\nimport { FaAngleDownIcon } from '../Icon'\n\ntype Option<T extends string> = {\n  value: T\n} & Omit<OptionHTMLAttributes<HTMLOptionElement>, 'value'>\ntype Optgroup<T extends string> = {\n  label: string\n  options: Array<Option<T>>\n} & OptgroupHTMLAttributes<HTMLOptGroupElement>\n\ntype BaseProps<T extends string> = {\n  /** 選択肢のデータの配列 */\n  options: Array<Option<T> | Optgroup<T>>\n  /** フォームの値が変わったときに発火するコールバック関数 */\n  onChangeValue?: (value: T) => void\n  /** フォームの値にエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** コンポーネントの大きさ */\n  size?: 'M' | 'S'\n  /** 空の選択肢を表示するかどうか */\n  hasBlank?: boolean\n  /** 空の選択肢のラベル */\n  blankLabel?: string\n}\n\ntype Props<T extends string> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<'select'>, keyof BaseProps<string> | 'children'>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Select shr-relative shr-inline-block',\n    select: [\n      'shr-peer shr-border-shorthand shr-w-full shr-cursor-pointer shr-appearance-none shr-rounded-m shr-bg-white shr-text-base shr-leading-tight shr-text-black',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      'disabled:shr-pointer-events-none disabled:shr-bg-white-darken disabled:shr-text-disabled disabled:shr-opacity-100',\n      'contrast-more:shr-border-high-contrast',\n      /* padding に依る積み上げでは文字が見切れてしまうため */\n      'shr-min-h-[calc(theme(fontSize.base)_+_theme(spacing[0.75])_*_2_+_theme(spacing.px)_*_2)]',\n      'shr-border-default disabled:shr-border-disabled',\n      'aria-[invalid]:shr-border-danger',\n    ],\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-inset-y-0 shr-inline-flex shr-items-center shr-text-grey',\n      'peer-focus-visible:shr-text-black peer-disabled:shr-text-disabled',\n    ],\n    blankOptgroup: 'shr-hidden',\n  },\n  variants: {\n    size: {\n      M: {\n        select: 'shr-py-0.5 shr-pe-2 shr-ps-0.5',\n        // ((右 padding - アイコン幅) / 2) + 右 border\n        iconWrap: 'shr-end-[calc(theme(spacing[0.5])_+_theme(spacing.px))]',\n      },\n      S: {\n        select: [\n          'shr-px-0.5 shr-py-0.25 shr-pe-1.5 shr-text-sm',\n          /* padding に依る積み上げでは文字が見切れてしまうため */\n          'shr-min-h-[calc(theme(fontSize.sm)_+_theme(spacing[0.5])_*_2_+_theme(spacing.px)_*_2)]',\n        ],\n        iconWrap: 'shr-end-0.5 shr-text-sm',\n      },\n    },\n  },\n})\n\nconst ActualSelect = <T extends string>(\n  {\n    options,\n    onChange,\n    onChangeValue,\n    error,\n    width,\n    hasBlank,\n    blankLabel,\n    size,\n    className,\n    disabled,\n    required,\n    ...rest\n  }: Props<T>,\n  ref: ForwardedRef<HTMLSelectElement>,\n) => {\n  const classNames = useMemo(() => {\n    const { wrapper, select, iconWrap, blankOptgroup } = classNameGenerator()\n    const sizeProps = {\n      size: size || 'M',\n    }\n\n    return {\n      wrapper: wrapper({ className }),\n      select: select(sizeProps),\n      iconWrap: iconWrap(sizeProps),\n      blankOptGroup: blankOptgroup(),\n    }\n  }, [size, className])\n\n  return (\n    <span\n      className={classNames.wrapper}\n      style={{\n        width: typeof width === 'number' ? `${width}px` : width,\n      }}\n    >\n      <select\n        {...rest}\n        ref={ref}\n        disabled={disabled}\n        // HINT: required属性を設定すると、iOS端末で以下の問題が発生します\n        //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない\n        //    - エラーメッセージが表示されない\n        //    - 問題のある入力フィールドまでスクロールしない\n        // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです\n        // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります\n        required={isIOS ? undefined : required}\n        aria-invalid={error || undefined}\n        data-smarthr-ui-input=\"true\"\n        onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n          onChange?.(e)\n\n          if (onChangeValue) {\n            const selectedOption = options\n              .flatMap((option) => ('value' in option ? [option] : option.options))\n              .find((option) => option.value === e.target.value)\n\n            if (selectedOption) {\n              onChangeValue(selectedOption.value)\n            }\n          }\n        }}\n        className={classNames.select}\n      >\n        <BlankOption hasBlank={hasBlank}>{blankLabel ?? ''}</BlankOption>\n        {options.map((option, index) => (\n          <Option {...option} key={index} />\n        ))}\n        <NotOmittingLabelsInMobileSafari className={classNames.blankOptGroup} />\n      </select>\n      <span className={classNames.iconWrap}>\n        <FaAngleDownIcon />\n      </span>\n    </span>\n  )\n}\n\nconst BlankOption = memo<\n  PropsWithChildren<{\n    hasBlank: boolean | undefined\n  }>\n>(({ hasBlank, children }) => hasBlank && <option value=\"\">{children}</option>)\n\nconst Option = memo<Props<string>['options'][number]>((option) => {\n  if ('value' in option) {\n    return <option {...option}>{option.label}</option>\n  }\n\n  const { options: groupedOptions, label, ...rest } = option\n\n  return (\n    <optgroup {...rest} key={label} label={label}>\n      {groupedOptions.map((groupedOption) => (\n        <option {...groupedOption} key={groupedOption.value}>\n          {groupedOption.label}\n        </option>\n      ))}\n    </optgroup>\n  )\n})\n\n// Support for not omitting labels in Mobile Safari\nconst NotOmittingLabelsInMobileSafari = memo<{ className: string }>(\n  ({ className }) => isMobileSafari && <optgroup className={className} />,\n)\n\nexport const Select = genericsForwardRef(ActualSelect)\n"],"names":[],"mappings":";;;;;;;;;;;;AA8CA;AACE;AACE;AACA;;;;;;;;;;AAUC;AACD;;;AAGC;AACD;AACD;AACD;AACE;AACE;AACE;;AAEA;AACD;AACD;AACE;;;;AAIC;AACD;AACD;AACF;AACF;AACF;AAED;AAiBE;AACE;AACA;;;;AAKE;AACA;AACA;;;AAGJ;;AAMM;;;;;;;;;AAiBE;;;;AAKK;;AAGD;;;AAGN;AAcR;AAEA;AAMA;AACE;AACE;;AAGF;AAEA;AASF;AAEA;AACA;;;"}

package/lib/components/Select/Select.js

@@ -58,12 +58,17 @@ const ActualSelect = ({ options, onChange, onChangeValue, error, width, hasBlank
             iconWrap: iconWrap(sizeProps),
             blankOptGroup: blankOptgroup(),
         };
-    }, [className, size]);
-    const wrapperStyle = useMemo(() => ({
-        width: typeof width === 'number' ? `${width}px` : width,
-    }), [width]);
-    const actualBlankLabel = blankLabel ?? '';
-    return (jsxs("span", { className: classNames.wrapper, style: wrapperStyle, children: [jsxs("select", { ...rest, "data-smarthr-ui-input": "true", onChange: (e) => {
+    }, [size, className]);
+    return (jsxs("span", { className: classNames.wrapper, style: {
+            width: typeof width === 'number' ? `${width}px` : width,
+        }, children: [jsxs("select", { ...rest, ref: ref, disabled: disabled, 
+                // HINT: required属性を設定すると、iOS端末で以下の問題が発生します
+                //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない
+                //    - エラーメッセージが表示されない
+                //    - 問題のある入力フィールドまでスクロールしない
+                // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです
+                // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります
+                required: isIOS ? undefined : required, "aria-invalid": error || undefined, "data-smarthr-ui-input": "true", onChange: (e) => {
                     onChange?.(e);
                     if (onChangeValue) {
                         const selectedOption = options
@@ -73,14 +78,7 @@ const ActualSelect = ({ options, onChange, onChangeValue, error, width, hasBlank
                             onChangeValue(selectedOption.value);
                         }
                     }
-                }, "aria-invalid": error || undefined, disabled: disabled, 
-                // HINT: required属性を設定すると、iOS端末で以下の問題が発生します
-                //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない
-                //    - エラーメッセージが表示されない
-                //    - 問題のある入力フィールドまでスクロールしない
-                // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです
-                // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります
-                required: isIOS ? undefined : required, ref: ref, className: classNames.select, children: [jsx(BlankOption, { hasBlank: hasBlank, children: actualBlankLabel }), options.map((option, index) => (createElement(Option, { ...option, key: index }))), jsx(NotOmittingLabelsInMobileSafari, { className: classNames.blankOptGroup })] }), jsx("span", { className: classNames.iconWrap, children: jsx(FaAngleDownIcon, {}) })] }));
+                }, className: classNames.select, children: [jsx(BlankOption, { hasBlank: hasBlank, children: blankLabel ?? '' }), options.map((option, index) => (createElement(Option, { ...option, key: index }))), jsx(NotOmittingLabelsInMobileSafari, { className: classNames.blankOptGroup })] }), jsx("span", { className: classNames.iconWrap, children: jsx(FaAngleDownIcon, {}) })] }));
 };
 const BlankOption = memo(({ hasBlank, children }) => hasBlank && jsx("option", { value: "", children: children }));
 const Option = memo((option) => {

package/lib/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type OptgroupHTMLAttributes,\n  type OptionHTMLAttributes,\n  type PropsWithChildren,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { isIOS, isMobileSafari } from '../../libs/ua'\nimport { genericsForwardRef } from '../../libs/util'\nimport { FaAngleDownIcon } from '../Icon'\n\ntype Option<T extends string> = {\n  value: T\n} & Omit<OptionHTMLAttributes<HTMLOptionElement>, 'value'>\ntype Optgroup<T extends string> = {\n  label: string\n  options: Array<Option<T>>\n} & OptgroupHTMLAttributes<HTMLOptGroupElement>\n\ntype BaseProps<T extends string> = {\n  /** 選択肢のデータの配列 */\n  options: Array<Option<T> | Optgroup<T>>\n  /** フォームの値が変わったときに発火するコールバック関数 */\n  onChangeValue?: (value: T) => void\n  /** フォームの値にエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** コンポーネントの大きさ */\n  size?: 'M' | 'S'\n  /** 空の選択肢を表示するかどうか */\n  hasBlank?: boolean\n  /** 空の選択肢のラベル */\n  blankLabel?: string\n}\n\ntype Props<T extends string> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<'select'>, keyof BaseProps<string> | 'children'>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Select shr-relative shr-inline-block',\n    select: [\n      'shr-peer shr-border-shorthand shr-w-full shr-cursor-pointer shr-appearance-none shr-rounded-m shr-bg-white shr-text-base shr-leading-tight shr-text-black',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      'disabled:shr-pointer-events-none disabled:shr-bg-white-darken disabled:shr-text-disabled disabled:shr-opacity-100',\n      'contrast-more:shr-border-high-contrast',\n      /* padding に依る積み上げでは文字が見切れてしまうため */\n      'shr-min-h-[calc(theme(fontSize.base)_+_theme(spacing[0.75])_*_2_+_theme(spacing.px)_*_2)]',\n      'shr-border-default disabled:shr-border-disabled',\n      'aria-[invalid]:shr-border-danger',\n    ],\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-inset-y-0 shr-inline-flex shr-items-center shr-text-grey',\n      'peer-focus-visible:shr-text-black peer-disabled:shr-text-disabled',\n    ],\n    blankOptgroup: 'shr-hidden',\n  },\n  variants: {\n    size: {\n      M: {\n        select: 'shr-py-0.5 shr-pe-2 shr-ps-0.5',\n        // ((右 padding - アイコン幅) / 2) + 右 border\n        iconWrap: 'shr-end-[calc(theme(spacing[0.5])_+_theme(spacing.px))]',\n      },\n      S: {\n        select: [\n          'shr-px-0.5 shr-py-0.25 shr-pe-1.5 shr-text-sm',\n          /* padding に依る積み上げでは文字が見切れてしまうため */\n          'shr-min-h-[calc(theme(fontSize.sm)_+_theme(spacing[0.5])_*_2_+_theme(spacing.px)_*_2)]',\n        ],\n        iconWrap: 'shr-end-0.5 shr-text-sm',\n      },\n    },\n  },\n})\n\nconst ActualSelect = <T extends string>(\n  {\n    options,\n    onChange,\n    onChangeValue,\n    error,\n    width,\n    hasBlank,\n    blankLabel,\n    size,\n    className,\n    disabled,\n    required,\n    ...rest\n  }: Props<T>,\n  ref: ForwardedRef<HTMLSelectElement>,\n) => {\n  const classNames = useMemo(() => {\n    const { wrapper, select, iconWrap, blankOptgroup } = classNameGenerator()\n    const sizeProps = {\n      size: size || 'M',\n    }\n\n    return {\n      wrapper: wrapper({ className }),\n      select: select(sizeProps),\n      iconWrap: iconWrap(sizeProps),\n      blankOptGroup: blankOptgroup(),\n    }\n  }, [className, size])\n  const wrapperStyle = useMemo(\n    () => ({\n      width: typeof width === 'number' ? `${width}px` : width,\n    }),\n    [width],\n  )\n\n  const actualBlankLabel = blankLabel ?? ''\n\n  return (\n    <span className={classNames.wrapper} style={wrapperStyle}>\n      <select\n        {...rest}\n        data-smarthr-ui-input=\"true\"\n        onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n          onChange?.(e)\n\n          if (onChangeValue) {\n            const selectedOption = options\n              .flatMap((option) => ('value' in option ? [option] : option.options))\n              .find((option) => option.value === e.target.value)\n\n            if (selectedOption) {\n              onChangeValue(selectedOption.value)\n            }\n          }\n        }}\n        aria-invalid={error || undefined}\n        disabled={disabled}\n        // HINT: required属性を設定すると、iOS端末で以下の問題が発生します\n        //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない\n        //    - エラーメッセージが表示されない\n        //    - 問題のある入力フィールドまでスクロールしない\n        // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです\n        // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります\n        required={isIOS ? undefined : required}\n        ref={ref}\n        className={classNames.select}\n      >\n        <BlankOption hasBlank={hasBlank}>{actualBlankLabel}</BlankOption>\n        {options.map((option, index) => (\n          <Option {...option} key={index} />\n        ))}\n        <NotOmittingLabelsInMobileSafari className={classNames.blankOptGroup} />\n      </select>\n      <span className={classNames.iconWrap}>\n        <FaAngleDownIcon />\n      </span>\n    </span>\n  )\n}\n\nconst BlankOption = memo<\n  PropsWithChildren<{\n    hasBlank: boolean | undefined\n  }>\n>(({ hasBlank, children }) => hasBlank && <option value=\"\">{children}</option>)\n\nconst Option = memo<Props<string>['options'][number]>((option) => {\n  if ('value' in option) {\n    return <option {...option}>{option.label}</option>\n  }\n\n  const { options: groupedOptions, label, ...rest } = option\n\n  return (\n    <optgroup {...rest} key={label} label={label}>\n      {groupedOptions.map((groupedOption) => (\n        <option {...groupedOption} key={groupedOption.value}>\n          {groupedOption.label}\n        </option>\n      ))}\n    </optgroup>\n  )\n})\n\n// Support for not omitting labels in Mobile Safari\nconst NotOmittingLabelsInMobileSafari = memo<{ className: string }>(\n  ({ className }) => isMobileSafari && <optgroup className={className} />,\n)\n\nexport const Select = genericsForwardRef(ActualSelect)\n"],"names":[],"mappings":";;;;;;;;;;AA8CA;AACE;AACE;AACA;;;;;;;;;;AAUC;AACD;;;AAGC;AACD;AACD;AACD;AACE;AACE;AACE;;AAEA;AACD;AACD;AACE;;;;AAIC;AACD;AACD;AACF;AACF;AACF;AAED;AAiBE;AACE;AACA;;;;AAKE;AACA;AACA;;;AAGJ;AACA;AAEI;AACD;AAIH;;AAQQ;;;;AAKK;;AAGD;;;AAGN;;;;;;;AASA;AAeR;AAEA;AAMA;AACE;AACE;;AAGF;AAEA;AASF;AAEA;AACA;;;"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type OptgroupHTMLAttributes,\n  type OptionHTMLAttributes,\n  type PropsWithChildren,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { isIOS, isMobileSafari } from '../../libs/ua'\nimport { genericsForwardRef } from '../../libs/util'\nimport { FaAngleDownIcon } from '../Icon'\n\ntype Option<T extends string> = {\n  value: T\n} & Omit<OptionHTMLAttributes<HTMLOptionElement>, 'value'>\ntype Optgroup<T extends string> = {\n  label: string\n  options: Array<Option<T>>\n} & OptgroupHTMLAttributes<HTMLOptGroupElement>\n\ntype BaseProps<T extends string> = {\n  /** 選択肢のデータの配列 */\n  options: Array<Option<T> | Optgroup<T>>\n  /** フォームの値が変わったときに発火するコールバック関数 */\n  onChangeValue?: (value: T) => void\n  /** フォームの値にエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** コンポーネントの大きさ */\n  size?: 'M' | 'S'\n  /** 空の選択肢を表示するかどうか */\n  hasBlank?: boolean\n  /** 空の選択肢のラベル */\n  blankLabel?: string\n}\n\ntype Props<T extends string> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<'select'>, keyof BaseProps<string> | 'children'>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Select shr-relative shr-inline-block',\n    select: [\n      'shr-peer shr-border-shorthand shr-w-full shr-cursor-pointer shr-appearance-none shr-rounded-m shr-bg-white shr-text-base shr-leading-tight shr-text-black',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      'disabled:shr-pointer-events-none disabled:shr-bg-white-darken disabled:shr-text-disabled disabled:shr-opacity-100',\n      'contrast-more:shr-border-high-contrast',\n      /* padding に依る積み上げでは文字が見切れてしまうため */\n      'shr-min-h-[calc(theme(fontSize.base)_+_theme(spacing[0.75])_*_2_+_theme(spacing.px)_*_2)]',\n      'shr-border-default disabled:shr-border-disabled',\n      'aria-[invalid]:shr-border-danger',\n    ],\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-inset-y-0 shr-inline-flex shr-items-center shr-text-grey',\n      'peer-focus-visible:shr-text-black peer-disabled:shr-text-disabled',\n    ],\n    blankOptgroup: 'shr-hidden',\n  },\n  variants: {\n    size: {\n      M: {\n        select: 'shr-py-0.5 shr-pe-2 shr-ps-0.5',\n        // ((右 padding - アイコン幅) / 2) + 右 border\n        iconWrap: 'shr-end-[calc(theme(spacing[0.5])_+_theme(spacing.px))]',\n      },\n      S: {\n        select: [\n          'shr-px-0.5 shr-py-0.25 shr-pe-1.5 shr-text-sm',\n          /* padding に依る積み上げでは文字が見切れてしまうため */\n          'shr-min-h-[calc(theme(fontSize.sm)_+_theme(spacing[0.5])_*_2_+_theme(spacing.px)_*_2)]',\n        ],\n        iconWrap: 'shr-end-0.5 shr-text-sm',\n      },\n    },\n  },\n})\n\nconst ActualSelect = <T extends string>(\n  {\n    options,\n    onChange,\n    onChangeValue,\n    error,\n    width,\n    hasBlank,\n    blankLabel,\n    size,\n    className,\n    disabled,\n    required,\n    ...rest\n  }: Props<T>,\n  ref: ForwardedRef<HTMLSelectElement>,\n) => {\n  const classNames = useMemo(() => {\n    const { wrapper, select, iconWrap, blankOptgroup } = classNameGenerator()\n    const sizeProps = {\n      size: size || 'M',\n    }\n\n    return {\n      wrapper: wrapper({ className }),\n      select: select(sizeProps),\n      iconWrap: iconWrap(sizeProps),\n      blankOptGroup: blankOptgroup(),\n    }\n  }, [size, className])\n\n  return (\n    <span\n      className={classNames.wrapper}\n      style={{\n        width: typeof width === 'number' ? `${width}px` : width,\n      }}\n    >\n      <select\n        {...rest}\n        ref={ref}\n        disabled={disabled}\n        // HINT: required属性を設定すると、iOS端末で以下の問題が発生します\n        //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない\n        //    - エラーメッセージが表示されない\n        //    - 問題のある入力フィールドまでスクロールしない\n        // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです\n        // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります\n        required={isIOS ? undefined : required}\n        aria-invalid={error || undefined}\n        data-smarthr-ui-input=\"true\"\n        onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n          onChange?.(e)\n\n          if (onChangeValue) {\n            const selectedOption = options\n              .flatMap((option) => ('value' in option ? [option] : option.options))\n              .find((option) => option.value === e.target.value)\n\n            if (selectedOption) {\n              onChangeValue(selectedOption.value)\n            }\n          }\n        }}\n        className={classNames.select}\n      >\n        <BlankOption hasBlank={hasBlank}>{blankLabel ?? ''}</BlankOption>\n        {options.map((option, index) => (\n          <Option {...option} key={index} />\n        ))}\n        <NotOmittingLabelsInMobileSafari className={classNames.blankOptGroup} />\n      </select>\n      <span className={classNames.iconWrap}>\n        <FaAngleDownIcon />\n      </span>\n    </span>\n  )\n}\n\nconst BlankOption = memo<\n  PropsWithChildren<{\n    hasBlank: boolean | undefined\n  }>\n>(({ hasBlank, children }) => hasBlank && <option value=\"\">{children}</option>)\n\nconst Option = memo<Props<string>['options'][number]>((option) => {\n  if ('value' in option) {\n    return <option {...option}>{option.label}</option>\n  }\n\n  const { options: groupedOptions, label, ...rest } = option\n\n  return (\n    <optgroup {...rest} key={label} label={label}>\n      {groupedOptions.map((groupedOption) => (\n        <option {...groupedOption} key={groupedOption.value}>\n          {groupedOption.label}\n        </option>\n      ))}\n    </optgroup>\n  )\n})\n\n// Support for not omitting labels in Mobile Safari\nconst NotOmittingLabelsInMobileSafari = memo<{ className: string }>(\n  ({ className }) => isMobileSafari && <optgroup className={className} />,\n)\n\nexport const Select = genericsForwardRef(ActualSelect)\n"],"names":[],"mappings":";;;;;;;;;;AA8CA;AACE;AACE;AACA;;;;;;;;;;AAUC;AACD;;;AAGC;AACD;AACD;AACD;AACE;AACE;AACE;;AAEA;AACD;AACD;AACE;;;;AAIC;AACD;AACD;AACF;AACF;AACF;AAED;AAiBE;AACE;AACA;;;;AAKE;AACA;AACA;;;AAGJ;;AAMM;;;;;;;;;AAiBE;;;;AAKK;;AAGD;;;AAGN;AAcR;AAEA;AAMA;AACE;AACE;;AAGF;AAEA;AASF;AAEA;AACA;;;"}

package/lib/components/Table/TableReel.cjs

@@ -5,8 +5,11 @@ 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.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 var components_Table_reelShadowStyle = require('./reelShadowStyle.cjs');
-var components_Table_useReelCells = require('./useReelCells.cjs');
 
+const TR_SELECTOR = 'table tr';
+const FIXED_LEFT_SELECTOR = '[data-fixed="left"]';
+const FIXED_RIGHT_SELECTOR = '[data-fixed="right"]';
+const HAS_FIXED_SELECTOR = `${TR_SELECTOR} ${FIXED_LEFT_SELECTOR},${TR_SELECTOR} ${FIXED_RIGHT_SELECTOR}`;
 const classNameGenerator = index.tv({
     slots: {
         wrapper: ['smarthr-ui-TableReel', 'shr-relative'],
@@ -14,14 +17,75 @@ const classNameGenerator = index.tv({
     },
 });
 const TableReel = ({ className, children, tableWrapperRef, ...rest }) => {
-    const { showShadow } = components_Table_useReelCells.useReelCells(tableWrapperRef);
+    const [showShadow, setShowShadow] = React.useState(false);
+    React.useEffect(() => {
+        const wrapper = tableWrapperRef.current;
+        if (!wrapper) {
+            return;
+        }
+        let currentObserver = null;
+        const handleScroll = () => {
+            if (!wrapper.querySelector(HAS_FIXED_SELECTOR)) {
+                return;
+            }
+            let isVisible = false;
+            const commonAction = (cells, direction, visible) => {
+                currentObserver?.disconnect();
+                currentObserver = null;
+                const action = () => {
+                    let position = 0;
+                    cells.forEach((cell, index) => {
+                        if (cell.classList.toggle('fixed', visible)) {
+                            isVisible = true;
+                            cell.style[direction] = `${position}px`;
+                            cell.style.zIndex = (index + 1).toString();
+                            position += cell.offsetWidth;
+                        }
+                    });
+                };
+                action();
+                const observer = new ResizeObserver(action);
+                cells.forEach((cell) => {
+                    observer.observe(cell);
+                });
+                currentObserver = observer;
+            };
+            wrapper.querySelectorAll(TR_SELECTOR).forEach((tr) => {
+                const leftCells = tr.querySelectorAll(FIXED_LEFT_SELECTOR);
+                const rightCells = Array.from(tr.querySelectorAll(FIXED_RIGHT_SELECTOR)).reverse();
+                if (leftCells.length > 0) {
+                    commonAction(leftCells, 'left', wrapper.scrollLeft > 0);
+                }
+                if (rightCells.length > 0) {
+                    commonAction(rightCells, 'right', wrapper.scrollLeft < wrapper.scrollWidth - wrapper.clientWidth - 1);
+                }
+            });
+            setShowShadow(isVisible);
+        };
+        handleScroll();
+        wrapper.addEventListener('scroll', handleScroll);
+        const resizeObserver = new ResizeObserver(handleScroll);
+        resizeObserver.observe(wrapper);
+        // HINT: Paginationと組み合わせた際などにテーブル構造の変更を検知して再生成
+        const mutationObserver = new MutationObserver(handleScroll);
+        mutationObserver.observe(wrapper, {
+            childList: true,
+            subtree: true,
+        });
+        return () => {
+            wrapper.removeEventListener('scroll', handleScroll);
+            resizeObserver.unobserve(wrapper);
+            mutationObserver.disconnect();
+            currentObserver?.disconnect();
+        };
+    }, [tableWrapperRef]);
     const classNames = React.useMemo(() => {
         const { wrapper, inner } = classNameGenerator();
         return {
             wrapper: components_Table_reelShadowStyle.reelShadowClassNameGenerator({ showShadow, className: wrapper({ className }) }),
             inner: inner(),
         };
-    }, [className, showShadow]);
+    }, [showShadow, className]);
     return (jsxRuntime.jsx("div", { className: classNames.wrapper, children: jsxRuntime.jsx("div", { ...rest, className: classNames.inner, children: children }) }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"TableReel.cjs","sources":["../../../src/components/Table/TableReel.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentPropsWithRef, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { reelShadowClassNameGenerator } from './reelShadowStyle'\nimport { useReelCells } from './useReelCells'\n\ntype Props = PropsWithChildren &\n  Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren> & {\n    tableWrapperRef: React.RefObject<HTMLDivElement>\n  }\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: ['smarthr-ui-TableReel', 'shr-relative'],\n    inner: ['smarthr-ui-TableReel-inner', 'shr-relative'],\n  },\n})\n\nexport const TableReel: FC<Props> = ({ className, children, tableWrapperRef, ...rest }) => {\n  const { showShadow } = useReelCells(tableWrapperRef)\n\n  const classNames = useMemo(() => {\n    const { wrapper, inner } = classNameGenerator()\n\n    return {\n      wrapper: reelShadowClassNameGenerator({ showShadow, className: wrapper({ className }) }),\n      inner: inner(),\n    }\n  }, [className, showShadow])\n\n  return (\n    <div className={classNames.wrapper}>\n      <div {...rest} className={classNames.inner}>\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAaA;AACE;AACE;AACA;AACD;AACF;AAEM;;AAGL;;;AAII;;;AAGJ;;AASF;;"}
+{"version":3,"file":"TableReel.cjs","sources":["../../../src/components/Table/TableReel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type FC,\n  type PropsWithChildren,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { reelShadowClassNameGenerator } from './reelShadowStyle'\n\nconst TR_SELECTOR = 'table tr'\nconst FIXED_LEFT_SELECTOR = '[data-fixed=\"left\"]'\nconst FIXED_RIGHT_SELECTOR = '[data-fixed=\"right\"]'\n\nconst HAS_FIXED_SELECTOR = `${TR_SELECTOR} ${FIXED_LEFT_SELECTOR},${TR_SELECTOR} ${FIXED_RIGHT_SELECTOR}`\n\ntype Props = PropsWithChildren &\n  Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren> & {\n    tableWrapperRef: React.RefObject<HTMLDivElement>\n  }\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: ['smarthr-ui-TableReel', 'shr-relative'],\n    inner: ['smarthr-ui-TableReel-inner', 'shr-relative'],\n  },\n})\n\nexport const TableReel: FC<Props> = ({ className, children, tableWrapperRef, ...rest }) => {\n  const [showShadow, setShowShadow] = useState(false)\n\n  useEffect(() => {\n    const wrapper = tableWrapperRef.current\n\n    if (!wrapper) {\n      return\n    }\n\n    let currentObserver: ResizeObserver | null = null\n\n    const handleScroll = () => {\n      if (!wrapper.querySelector(HAS_FIXED_SELECTOR)) {\n        return\n      }\n\n      let isVisible = false\n      const commonAction = (\n        cells: HTMLElement[] | NodeListOf<HTMLElement>,\n        direction: 'left' | 'right',\n        visible: boolean,\n      ) => {\n        currentObserver?.disconnect()\n        currentObserver = null\n\n        const action = () => {\n          let position = 0\n\n          cells.forEach((cell, index) => {\n            if (cell.classList.toggle('fixed', visible)) {\n              isVisible = true\n              cell.style[direction] = `${position}px`\n              cell.style.zIndex = (index + 1).toString()\n\n              position += cell.offsetWidth\n            }\n          })\n        }\n\n        action()\n        const observer = new ResizeObserver(action)\n\n        cells.forEach((cell) => {\n          observer.observe(cell)\n        })\n\n        currentObserver = observer\n      }\n\n      wrapper.querySelectorAll<HTMLElement>(TR_SELECTOR).forEach((tr) => {\n        const leftCells = tr.querySelectorAll<HTMLElement>(FIXED_LEFT_SELECTOR)\n        const rightCells = Array.from(\n          tr.querySelectorAll<HTMLElement>(FIXED_RIGHT_SELECTOR),\n        ).reverse()\n\n        if (leftCells.length > 0) {\n          commonAction(leftCells, 'left' as const, wrapper.scrollLeft > 0)\n        }\n\n        if (rightCells.length > 0) {\n          commonAction(\n            rightCells,\n            'right' as const,\n            wrapper.scrollLeft < wrapper.scrollWidth - wrapper.clientWidth - 1,\n          )\n        }\n      })\n\n      setShowShadow(isVisible)\n    }\n\n    handleScroll()\n    wrapper.addEventListener('scroll', handleScroll)\n\n    const resizeObserver = new ResizeObserver(handleScroll)\n    resizeObserver.observe(wrapper)\n\n    // HINT: Paginationと組み合わせた際などにテーブル構造の変更を検知して再生成\n    const mutationObserver = new MutationObserver(handleScroll)\n    mutationObserver.observe(wrapper, {\n      childList: true,\n      subtree: true,\n    })\n\n    return () => {\n      wrapper.removeEventListener('scroll', handleScroll)\n      resizeObserver.unobserve(wrapper)\n      mutationObserver.disconnect()\n      currentObserver?.disconnect()\n    }\n  }, [tableWrapperRef])\n\n  const classNames = useMemo(() => {\n    const { wrapper, inner } = classNameGenerator()\n\n    return {\n      wrapper: reelShadowClassNameGenerator({ showShadow, className: wrapper({ className }) }),\n      inner: inner(),\n    }\n  }, [showShadow, className])\n\n  return (\n    <div className={classNames.wrapper}>\n      <div {...rest} className={classNames.inner}>\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AAcA;AACA;AACA;AAEA;AAOA;AACE;AACE;AACA;AACD;AACF;AAEM;;;AAIH;;;;;;;;;;;;;;;;;;;AA6BU;AAEA;;AAEJ;AACF;AAEA;AACA;AAEA;AACE;AACF;;AAGF;;;AAIE;AAIA;;;AAIA;AACE;;AAMJ;;AAGF;AAEA;AACA;AAEA;AACA;;AAGA;AACA;AACE;AACA;AACD;AAED;AACE;AACA;;;AAGF;AACF;AAEA;;;AAII;;;AAGJ;;AASF;;"}

package/lib/components/Table/TableReel.js

@@ -1,10 +1,13 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+import { useState, useEffect, 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.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import { reelShadowClassNameGenerator } from './reelShadowStyle.js';
-import { useReelCells } from './useReelCells.js';
 
+const TR_SELECTOR = 'table tr';
+const FIXED_LEFT_SELECTOR = '[data-fixed="left"]';
+const FIXED_RIGHT_SELECTOR = '[data-fixed="right"]';
+const HAS_FIXED_SELECTOR = `${TR_SELECTOR} ${FIXED_LEFT_SELECTOR},${TR_SELECTOR} ${FIXED_RIGHT_SELECTOR}`;
 const classNameGenerator = ce({
     slots: {
         wrapper: ['smarthr-ui-TableReel', 'shr-relative'],
@@ -12,14 +15,75 @@ const classNameGenerator = ce({
     },
 });
 const TableReel = ({ className, children, tableWrapperRef, ...rest }) => {
-    const { showShadow } = useReelCells(tableWrapperRef);
+    const [showShadow, setShowShadow] = useState(false);
+    useEffect(() => {
+        const wrapper = tableWrapperRef.current;
+        if (!wrapper) {
+            return;
+        }
+        let currentObserver = null;
+        const handleScroll = () => {
+            if (!wrapper.querySelector(HAS_FIXED_SELECTOR)) {
+                return;
+            }
+            let isVisible = false;
+            const commonAction = (cells, direction, visible) => {
+                currentObserver?.disconnect();
+                currentObserver = null;
+                const action = () => {
+                    let position = 0;
+                    cells.forEach((cell, index) => {
+                        if (cell.classList.toggle('fixed', visible)) {
+                            isVisible = true;
+                            cell.style[direction] = `${position}px`;
+                            cell.style.zIndex = (index + 1).toString();
+                            position += cell.offsetWidth;
+                        }
+                    });
+                };
+                action();
+                const observer = new ResizeObserver(action);
+                cells.forEach((cell) => {
+                    observer.observe(cell);
+                });
+                currentObserver = observer;
+            };
+            wrapper.querySelectorAll(TR_SELECTOR).forEach((tr) => {
+                const leftCells = tr.querySelectorAll(FIXED_LEFT_SELECTOR);
+                const rightCells = Array.from(tr.querySelectorAll(FIXED_RIGHT_SELECTOR)).reverse();
+                if (leftCells.length > 0) {
+                    commonAction(leftCells, 'left', wrapper.scrollLeft > 0);
+                }
+                if (rightCells.length > 0) {
+                    commonAction(rightCells, 'right', wrapper.scrollLeft < wrapper.scrollWidth - wrapper.clientWidth - 1);
+                }
+            });
+            setShowShadow(isVisible);
+        };
+        handleScroll();
+        wrapper.addEventListener('scroll', handleScroll);
+        const resizeObserver = new ResizeObserver(handleScroll);
+        resizeObserver.observe(wrapper);
+        // HINT: Paginationと組み合わせた際などにテーブル構造の変更を検知して再生成
+        const mutationObserver = new MutationObserver(handleScroll);
+        mutationObserver.observe(wrapper, {
+            childList: true,
+            subtree: true,
+        });
+        return () => {
+            wrapper.removeEventListener('scroll', handleScroll);
+            resizeObserver.unobserve(wrapper);
+            mutationObserver.disconnect();
+            currentObserver?.disconnect();
+        };
+    }, [tableWrapperRef]);
     const classNames = useMemo(() => {
         const { wrapper, inner } = classNameGenerator();
         return {
             wrapper: reelShadowClassNameGenerator({ showShadow, className: wrapper({ className }) }),
             inner: inner(),
         };
-    }, [className, showShadow]);
+    }, [showShadow, className]);
     return (jsx("div", { className: classNames.wrapper, children: jsx("div", { ...rest, className: classNames.inner, children: children }) }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"TableReel.js","sources":["../../../src/components/Table/TableReel.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentPropsWithRef, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { reelShadowClassNameGenerator } from './reelShadowStyle'\nimport { useReelCells } from './useReelCells'\n\ntype Props = PropsWithChildren &\n  Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren> & {\n    tableWrapperRef: React.RefObject<HTMLDivElement>\n  }\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: ['smarthr-ui-TableReel', 'shr-relative'],\n    inner: ['smarthr-ui-TableReel-inner', 'shr-relative'],\n  },\n})\n\nexport const TableReel: FC<Props> = ({ className, children, tableWrapperRef, ...rest }) => {\n  const { showShadow } = useReelCells(tableWrapperRef)\n\n  const classNames = useMemo(() => {\n    const { wrapper, inner } = classNameGenerator()\n\n    return {\n      wrapper: reelShadowClassNameGenerator({ showShadow, className: wrapper({ className }) }),\n      inner: inner(),\n    }\n  }, [className, showShadow])\n\n  return (\n    <div className={classNames.wrapper}>\n      <div {...rest} className={classNames.inner}>\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AAaA;AACE;AACE;AACA;AACD;AACF;AAEM;;AAGL;;;AAII;;;AAGJ;;AASF;;"}
+{"version":3,"file":"TableReel.js","sources":["../../../src/components/Table/TableReel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type FC,\n  type PropsWithChildren,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { reelShadowClassNameGenerator } from './reelShadowStyle'\n\nconst TR_SELECTOR = 'table tr'\nconst FIXED_LEFT_SELECTOR = '[data-fixed=\"left\"]'\nconst FIXED_RIGHT_SELECTOR = '[data-fixed=\"right\"]'\n\nconst HAS_FIXED_SELECTOR = `${TR_SELECTOR} ${FIXED_LEFT_SELECTOR},${TR_SELECTOR} ${FIXED_RIGHT_SELECTOR}`\n\ntype Props = PropsWithChildren &\n  Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren> & {\n    tableWrapperRef: React.RefObject<HTMLDivElement>\n  }\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: ['smarthr-ui-TableReel', 'shr-relative'],\n    inner: ['smarthr-ui-TableReel-inner', 'shr-relative'],\n  },\n})\n\nexport const TableReel: FC<Props> = ({ className, children, tableWrapperRef, ...rest }) => {\n  const [showShadow, setShowShadow] = useState(false)\n\n  useEffect(() => {\n    const wrapper = tableWrapperRef.current\n\n    if (!wrapper) {\n      return\n    }\n\n    let currentObserver: ResizeObserver | null = null\n\n    const handleScroll = () => {\n      if (!wrapper.querySelector(HAS_FIXED_SELECTOR)) {\n        return\n      }\n\n      let isVisible = false\n      const commonAction = (\n        cells: HTMLElement[] | NodeListOf<HTMLElement>,\n        direction: 'left' | 'right',\n        visible: boolean,\n      ) => {\n        currentObserver?.disconnect()\n        currentObserver = null\n\n        const action = () => {\n          let position = 0\n\n          cells.forEach((cell, index) => {\n            if (cell.classList.toggle('fixed', visible)) {\n              isVisible = true\n              cell.style[direction] = `${position}px`\n              cell.style.zIndex = (index + 1).toString()\n\n              position += cell.offsetWidth\n            }\n          })\n        }\n\n        action()\n        const observer = new ResizeObserver(action)\n\n        cells.forEach((cell) => {\n          observer.observe(cell)\n        })\n\n        currentObserver = observer\n      }\n\n      wrapper.querySelectorAll<HTMLElement>(TR_SELECTOR).forEach((tr) => {\n        const leftCells = tr.querySelectorAll<HTMLElement>(FIXED_LEFT_SELECTOR)\n        const rightCells = Array.from(\n          tr.querySelectorAll<HTMLElement>(FIXED_RIGHT_SELECTOR),\n        ).reverse()\n\n        if (leftCells.length > 0) {\n          commonAction(leftCells, 'left' as const, wrapper.scrollLeft > 0)\n        }\n\n        if (rightCells.length > 0) {\n          commonAction(\n            rightCells,\n            'right' as const,\n            wrapper.scrollLeft < wrapper.scrollWidth - wrapper.clientWidth - 1,\n          )\n        }\n      })\n\n      setShowShadow(isVisible)\n    }\n\n    handleScroll()\n    wrapper.addEventListener('scroll', handleScroll)\n\n    const resizeObserver = new ResizeObserver(handleScroll)\n    resizeObserver.observe(wrapper)\n\n    // HINT: Paginationと組み合わせた際などにテーブル構造の変更を検知して再生成\n    const mutationObserver = new MutationObserver(handleScroll)\n    mutationObserver.observe(wrapper, {\n      childList: true,\n      subtree: true,\n    })\n\n    return () => {\n      wrapper.removeEventListener('scroll', handleScroll)\n      resizeObserver.unobserve(wrapper)\n      mutationObserver.disconnect()\n      currentObserver?.disconnect()\n    }\n  }, [tableWrapperRef])\n\n  const classNames = useMemo(() => {\n    const { wrapper, inner } = classNameGenerator()\n\n    return {\n      wrapper: reelShadowClassNameGenerator({ showShadow, className: wrapper({ className }) }),\n      inner: inner(),\n    }\n  }, [showShadow, className])\n\n  return (\n    <div className={classNames.wrapper}>\n      <div {...rest} className={classNames.inner}>\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAcA;AACA;AACA;AAEA;AAOA;AACE;AACE;AACA;AACD;AACF;AAEM;;;AAIH;;;;;;;;;;;;;;;;;;;AA6BU;AAEA;;AAEJ;AACF;AAEA;AACA;AAEA;AACE;AACF;;AAGF;;;AAIE;AAIA;;;AAIA;AACE;;AAMJ;;AAGF;AAEA;AACA;AAEA;AACA;;AAGA;AACA;AACE;AACA;AACD;AAED;AACE;AACA;;;AAGF;AACF;AAEA;;;AAII;;;AAGJ;;AASF;;"}

package/lib/components/Table/TableScroller.cjs

@@ -21,13 +21,21 @@ const SCROLLER_PROPS = {
     // fixedHead のとき、スクロールインスタンスがTableからWrapperに変わるため、Wrapperに対して高さとoverflowを指定する
     className: 'shr-h-[inherit] shr-max-h-[inherit] shr-scroll-pb-0.5',
 };
-const TableScroller = React.forwardRef(({ children, fixedHead, ...rest }, forwardedRef) => fixedHead ? (jsxRuntime.jsx(FixedHeadTableScroller, { ...rest, ...SCROLLER_PROPS, forwardedRef: forwardedRef, children: children })) : (jsxRuntime.jsx(components_Scroller_Scroller.Scroller, { ...rest, ...SCROLLER_PROPS, ref: forwardedRef, children: children })));
+const TableScroller = React.forwardRef(({ children, fixedHead, ...rest }, ref) => fixedHead ? (jsxRuntime.jsx(FixedHeadTableScroller, { ...rest, ...SCROLLER_PROPS, forwardedRef: ref, children: children })) : (jsxRuntime.jsx(components_Scroller_Scroller.Scroller, { ...rest, ...SCROLLER_PROPS, ref: ref, children: children })));
 const FixedHeadTableScroller = ({ children, forwardedRef, direction, ...rest }) => {
-    const innerRef = React.useRef(null);
-    const setRefs = React.useCallback((node) => {
-        innerRef.current = node;
+    // TODO: useMergeRefsが作成されたら修正する
+    const callbackRef = React.useCallback((node) => {
+        // thead の高さ分だけ scroll-padding-top を設定
+        if (node) {
+            const thead = node.querySelector('thead');
+            if (thead) {
+                const { height } = thead.getBoundingClientRect();
+                node.style.scrollPaddingTop = `${height + themes_createFontSize.defaultHtmlFontSize}px`;
+            }
+        }
         if (forwardedRef) {
             if (typeof forwardedRef === 'function') {
+                // React 19 では callback ref の戻り値を cleanup として使うため、返却する
                 forwardedRef(node);
             }
             else {
@@ -35,17 +43,7 @@ const FixedHeadTableScroller = ({ children, forwardedRef, direction, ...rest })
             }
         }
     }, [forwardedRef]);
-    // thead の高さ分だけ scroll-padding-top を設定
-    React.useLayoutEffect(() => {
-        if (!innerRef.current)
-            return;
-        const thead = innerRef.current.querySelector('thead');
-        if (thead) {
-            const { height } = thead.getBoundingClientRect();
-            innerRef.current.style.scrollPaddingTop = `${height + themes_createFontSize.defaultHtmlFontSize}px`;
-        }
-    }, []);
-    return (jsxRuntime.jsx(components_Scroller_Scroller.Scroller, { ...rest, ref: setRefs, direction: direction, children: children }));
+    return (jsxRuntime.jsx(components_Scroller_Scroller.Scroller, { ...rest, ref: callbackRef, direction: direction, children: children }));
 };
 
 exports.TableScroller = TableScroller;

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

@@ -1 +1 @@
-{"version":3,"file":"TableScroller.cjs","sources":["../../../src/components/Table/TableScroller.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type ForwardedRef,\n  type PropsWithChildren,\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n} from 'react'\n\nimport { defaultHtmlFontSize } from '../../themes'\nimport { Scroller } from '../Scroller'\n\ntype Props = PropsWithChildren &\n  Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren> & {\n    fixedHead?: boolean\n  }\n\nconst SCROLLER_PROPS = {\n  direction: 'both' as const,\n  // fixedHead のとき、スクロールインスタンスがTableからWrapperに変わるため、Wrapperに対して高さとoverflowを指定する\n  className: 'shr-h-[inherit] shr-max-h-[inherit] shr-scroll-pb-0.5',\n}\n\nexport const TableScroller = forwardRef<HTMLDivElement, Props>(\n  ({ children, fixedHead, ...rest }, forwardedRef: ForwardedRef<HTMLDivElement>) =>\n    fixedHead ? (\n      <FixedHeadTableScroller {...rest} {...SCROLLER_PROPS} forwardedRef={forwardedRef}>\n        {children}\n      </FixedHeadTableScroller>\n    ) : (\n      <Scroller {...rest} {...SCROLLER_PROPS} ref={forwardedRef}>\n        {children}\n      </Scroller>\n    ),\n)\n\ntype FixedHeadTableScrollerProps = PropsWithChildren &\n  Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren> & {\n    forwardedRef: ForwardedRef<HTMLDivElement>\n    direction: 'both'\n  }\n\nconst FixedHeadTableScroller = ({\n  children,\n  forwardedRef,\n  direction,\n  ...rest\n}: FixedHeadTableScrollerProps) => {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n\n  const setRefs = useCallback(\n    (node: HTMLDivElement) => {\n      innerRef.current = node\n      if (forwardedRef) {\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(node)\n        } else {\n          forwardedRef.current = node\n        }\n      }\n    },\n    [forwardedRef],\n  )\n\n  // thead の高さ分だけ scroll-padding-top を設定\n  useLayoutEffect(() => {\n    if (!innerRef.current) return\n    const thead = innerRef.current.querySelector('thead')\n    if (thead) {\n      const { height } = thead.getBoundingClientRect()\n      innerRef.current.style.scrollPaddingTop = `${height + defaultHtmlFontSize}px`\n    }\n  }, [])\n\n  return (\n    <Scroller {...rest} ref={setRefs} direction={direction}>\n      {children}\n    </Scroller>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAoBA;AACE;;AAEA;;AAGK;AAmBP;AAME;AAEA;AAEI;;AAEE;;;;AAGE;;;AAGN;;;;;;;;AAUE;;;AAIJ;AAKF;;"}
+{"version":3,"file":"TableScroller.cjs","sources":["../../../src/components/Table/TableScroller.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type ForwardedRef,\n  type PropsWithChildren,\n  forwardRef,\n  useCallback,\n} from 'react'\n\nimport { defaultHtmlFontSize } from '../../themes'\nimport { Scroller } from '../Scroller'\n\ntype Props = PropsWithChildren &\n  Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren> & {\n    fixedHead?: boolean\n  }\n\nconst SCROLLER_PROPS = {\n  direction: 'both' as const,\n  // fixedHead のとき、スクロールインスタンスがTableからWrapperに変わるため、Wrapperに対して高さとoverflowを指定する\n  className: 'shr-h-[inherit] shr-max-h-[inherit] shr-scroll-pb-0.5',\n}\n\nexport const TableScroller = forwardRef<HTMLDivElement, Props>(\n  ({ children, fixedHead, ...rest }, ref: ForwardedRef<HTMLDivElement>) =>\n    fixedHead ? (\n      <FixedHeadTableScroller {...rest} {...SCROLLER_PROPS} forwardedRef={ref}>\n        {children}\n      </FixedHeadTableScroller>\n    ) : (\n      <Scroller {...rest} {...SCROLLER_PROPS} ref={ref}>\n        {children}\n      </Scroller>\n    ),\n)\n\ntype FixedHeadTableScrollerProps = PropsWithChildren &\n  Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren> & {\n    forwardedRef: ForwardedRef<HTMLDivElement>\n    direction: 'both'\n  }\n\nconst FixedHeadTableScroller = ({\n  children,\n  forwardedRef,\n  direction,\n  ...rest\n}: FixedHeadTableScrollerProps) => {\n  // TODO: useMergeRefsが作成されたら修正する\n  const callbackRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      // thead の高さ分だけ scroll-padding-top を設定\n      if (node) {\n        const thead = node.querySelector('thead')\n\n        if (thead) {\n          const { height } = thead.getBoundingClientRect()\n\n          node.style.scrollPaddingTop = `${height + defaultHtmlFontSize}px`\n        }\n      }\n\n      if (forwardedRef) {\n        if (typeof forwardedRef === 'function') {\n          // React 19 では callback ref の戻り値を cleanup として使うため、返却する\n          forwardedRef(node)\n        } else {\n          forwardedRef.current = node\n        }\n      }\n    },\n    [forwardedRef],\n  )\n\n  return (\n    <Scroller {...rest} ref={callbackRef} direction={direction}>\n      {children}\n    </Scroller>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAkBA;AACE;;AAEA;;AAGK;AAmBP;;AAOE;;;;;;;;;;AAcM;;;;;AAIE;;;AAGN;AAIF;AAKF;;"}

package/lib/components/Table/TableScroller.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useCallback, useLayoutEffect } from 'react';
+import { forwardRef, useCallback } from 'react';
 import '../../themes/createSpacing.js';
 import { defaultHtmlFontSize } from '../../themes/createFontSize.js';
 import '../../themes/createColor.js';
@@ -19,13 +19,21 @@ const SCROLLER_PROPS = {
     // fixedHead のとき、スクロールインスタンスがTableからWrapperに変わるため、Wrapperに対して高さとoverflowを指定する
     className: 'shr-h-[inherit] shr-max-h-[inherit] shr-scroll-pb-0.5',
 };
-const TableScroller = forwardRef(({ children, fixedHead, ...rest }, forwardedRef) => fixedHead ? (jsx(FixedHeadTableScroller, { ...rest, ...SCROLLER_PROPS, forwardedRef: forwardedRef, children: children })) : (jsx(Scroller, { ...rest, ...SCROLLER_PROPS, ref: forwardedRef, children: children })));
+const TableScroller = forwardRef(({ children, fixedHead, ...rest }, ref) => fixedHead ? (jsx(FixedHeadTableScroller, { ...rest, ...SCROLLER_PROPS, forwardedRef: ref, children: children })) : (jsx(Scroller, { ...rest, ...SCROLLER_PROPS, ref: ref, children: children })));
 const FixedHeadTableScroller = ({ children, forwardedRef, direction, ...rest }) => {
-    const innerRef = useRef(null);
-    const setRefs = useCallback((node) => {
-        innerRef.current = node;
+    // TODO: useMergeRefsが作成されたら修正する
+    const callbackRef = useCallback((node) => {
+        // thead の高さ分だけ scroll-padding-top を設定
+        if (node) {
+            const thead = node.querySelector('thead');
+            if (thead) {
+                const { height } = thead.getBoundingClientRect();
+                node.style.scrollPaddingTop = `${height + defaultHtmlFontSize}px`;
+            }
+        }
         if (forwardedRef) {
             if (typeof forwardedRef === 'function') {
+                // React 19 では callback ref の戻り値を cleanup として使うため、返却する
                 forwardedRef(node);
             }
             else {
@@ -33,17 +41,7 @@ const FixedHeadTableScroller = ({ children, forwardedRef, direction, ...rest })
             }
         }
     }, [forwardedRef]);
-    // thead の高さ分だけ scroll-padding-top を設定
-    useLayoutEffect(() => {
-        if (!innerRef.current)
-            return;
-        const thead = innerRef.current.querySelector('thead');
-        if (thead) {
-            const { height } = thead.getBoundingClientRect();
-            innerRef.current.style.scrollPaddingTop = `${height + defaultHtmlFontSize}px`;
-        }
-    }, []);
-    return (jsx(Scroller, { ...rest, ref: setRefs, direction: direction, children: children }));
+    return (jsx(Scroller, { ...rest, ref: callbackRef, direction: direction, children: children }));
 };
 
 export { TableScroller };

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

@@ -1 +1 @@
-{"version":3,"file":"TableScroller.js","sources":["../../../src/components/Table/TableScroller.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type ForwardedRef,\n  type PropsWithChildren,\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n} from 'react'\n\nimport { defaultHtmlFontSize } from '../../themes'\nimport { Scroller } from '../Scroller'\n\ntype Props = PropsWithChildren &\n  Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren> & {\n    fixedHead?: boolean\n  }\n\nconst SCROLLER_PROPS = {\n  direction: 'both' as const,\n  // fixedHead のとき、スクロールインスタンスがTableからWrapperに変わるため、Wrapperに対して高さとoverflowを指定する\n  className: 'shr-h-[inherit] shr-max-h-[inherit] shr-scroll-pb-0.5',\n}\n\nexport const TableScroller = forwardRef<HTMLDivElement, Props>(\n  ({ children, fixedHead, ...rest }, forwardedRef: ForwardedRef<HTMLDivElement>) =>\n    fixedHead ? (\n      <FixedHeadTableScroller {...rest} {...SCROLLER_PROPS} forwardedRef={forwardedRef}>\n        {children}\n      </FixedHeadTableScroller>\n    ) : (\n      <Scroller {...rest} {...SCROLLER_PROPS} ref={forwardedRef}>\n        {children}\n      </Scroller>\n    ),\n)\n\ntype FixedHeadTableScrollerProps = PropsWithChildren &\n  Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren> & {\n    forwardedRef: ForwardedRef<HTMLDivElement>\n    direction: 'both'\n  }\n\nconst FixedHeadTableScroller = ({\n  children,\n  forwardedRef,\n  direction,\n  ...rest\n}: FixedHeadTableScrollerProps) => {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n\n  const setRefs = useCallback(\n    (node: HTMLDivElement) => {\n      innerRef.current = node\n      if (forwardedRef) {\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(node)\n        } else {\n          forwardedRef.current = node\n        }\n      }\n    },\n    [forwardedRef],\n  )\n\n  // thead の高さ分だけ scroll-padding-top を設定\n  useLayoutEffect(() => {\n    if (!innerRef.current) return\n    const thead = innerRef.current.querySelector('thead')\n    if (thead) {\n      const { height } = thead.getBoundingClientRect()\n      innerRef.current.style.scrollPaddingTop = `${height + defaultHtmlFontSize}px`\n    }\n  }, [])\n\n  return (\n    <Scroller {...rest} ref={setRefs} direction={direction}>\n      {children}\n    </Scroller>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAoBA;AACE;;AAEA;;AAGK;AAmBP;AAME;AAEA;AAEI;;AAEE;;;;AAGE;;;AAGN;;;;;;;;AAUE;;;AAIJ;AAKF;;"}
+{"version":3,"file":"TableScroller.js","sources":["../../../src/components/Table/TableScroller.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type ForwardedRef,\n  type PropsWithChildren,\n  forwardRef,\n  useCallback,\n} from 'react'\n\nimport { defaultHtmlFontSize } from '../../themes'\nimport { Scroller } from '../Scroller'\n\ntype Props = PropsWithChildren &\n  Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren> & {\n    fixedHead?: boolean\n  }\n\nconst SCROLLER_PROPS = {\n  direction: 'both' as const,\n  // fixedHead のとき、スクロールインスタンスがTableからWrapperに変わるため、Wrapperに対して高さとoverflowを指定する\n  className: 'shr-h-[inherit] shr-max-h-[inherit] shr-scroll-pb-0.5',\n}\n\nexport const TableScroller = forwardRef<HTMLDivElement, Props>(\n  ({ children, fixedHead, ...rest }, ref: ForwardedRef<HTMLDivElement>) =>\n    fixedHead ? (\n      <FixedHeadTableScroller {...rest} {...SCROLLER_PROPS} forwardedRef={ref}>\n        {children}\n      </FixedHeadTableScroller>\n    ) : (\n      <Scroller {...rest} {...SCROLLER_PROPS} ref={ref}>\n        {children}\n      </Scroller>\n    ),\n)\n\ntype FixedHeadTableScrollerProps = PropsWithChildren &\n  Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren> & {\n    forwardedRef: ForwardedRef<HTMLDivElement>\n    direction: 'both'\n  }\n\nconst FixedHeadTableScroller = ({\n  children,\n  forwardedRef,\n  direction,\n  ...rest\n}: FixedHeadTableScrollerProps) => {\n  // TODO: useMergeRefsが作成されたら修正する\n  const callbackRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      // thead の高さ分だけ scroll-padding-top を設定\n      if (node) {\n        const thead = node.querySelector('thead')\n\n        if (thead) {\n          const { height } = thead.getBoundingClientRect()\n\n          node.style.scrollPaddingTop = `${height + defaultHtmlFontSize}px`\n        }\n      }\n\n      if (forwardedRef) {\n        if (typeof forwardedRef === 'function') {\n          // React 19 では callback ref の戻り値を cleanup として使うため、返却する\n          forwardedRef(node)\n        } else {\n          forwardedRef.current = node\n        }\n      }\n    },\n    [forwardedRef],\n  )\n\n  return (\n    <Scroller {...rest} ref={callbackRef} direction={direction}>\n      {children}\n    </Scroller>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAkBA;AACE;;AAEA;;AAGK;AAmBP;;AAOE;;;;;;;;;;AAcM;;;;;AAIE;;;AAGN;AAIF;AAKF;;"}