smarthr-ui 96.1.0 → 96.1.2

package/lib/components/Icon/generateIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"generateIcon.js","sources":["../../../src/components/Icon/generateIcon.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { color as defaultColorPalette, fontSize, textColor } from '../../tailwind'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nimport type { FontSizes } from '../../themes'\nimport type { IconType } from 'react-icons'\n\n/**\n * literal union type に補完を効かせるためのハック\n * https://github.com/microsoft/TypeScript/issues/29729\n */\ntype LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>)\n\nexport const colorSet = {\n  TEXT_BLACK: 'black',\n  TEXT_WHITE: 'white',\n  TEXT_GREY: 'grey',\n  TEXT_DISABLED: 'disabled',\n  TEXT_LINK: 'link',\n  MAIN: 'main',\n  DANGER: 'danger',\n  WARNING: 'warning-yellow',\n  BRAND: 'brand',\n} as const\n\nconst existsColor = (color: string): color is keyof typeof colorSet => color in colorSet\n\ntype IconProps = {\n  /**\n   * アイコンの色\n   * @type string | 'TEXT_BLACK' | 'TEXT_GREY' | 'TEXT_DISABLED' | 'TEXT_LINK' | 'MAIN' | 'DANGER' | 'WARNING' | 'BRAND'\n   */\n  color?: LiteralUnion<keyof typeof colorSet>\n  /**\n   * アイコンの大きさ（フォントサイズの抽象値）\n   * @deprecated 親要素やデフォルトフォントサイズが継承されるため固定値の指定は非推奨\n   */\n  size?: FontSizes\n}\n\ntype AbstractProps = {\n  /**アイコンの説明テキスト*/\n  alt?: ReactNode\n}\nexport type Props = AbstractProps &\n  Omit<IconProps & Omit<ComponentProps<'svg'>, keyof IconProps>, keyof AbstractProps>\n\n// HINT: smarthr-ui-Icon-extendedはアイコン+α(例えば複数のアイコンをまとめて一つにしているなど)を表すclass\n// altなどもVisuallyHiddenTextで表現している関係上、squareの計算などの際に複数要素として判断されると認知と違う結果になるため使用しています\n\nconst classNameGenerator = tv({\n  slots: {\n    icon: 'smarthr-ui-Icon group-[]/iconWrapper:shr-shrink-0 group-[]/iconWrapper:shr-translate-y-[0.125em] forced-colors:shr-fill-[CanvasText]',\n    wrapperWithAlt: 'smarthr-ui-Icon-extended smarthr-ui-Icon-withAlt shr-relative shr-leading-[0]',\n  },\n})\n\nexport const generateIcon = (SvgIcon: IconType) => {\n  const Icon = memo<Props>(\n    ({\n      color,\n      className,\n      role = 'img',\n      alt,\n      'aria-hidden': ariaHidden,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      focusable = false,\n      size,\n      ...rest\n    }) => {\n      const actualAriaHidden = useMemo(() => {\n        if (ariaHidden !== undefined) {\n          return ariaHidden\n        }\n\n        if (alt !== undefined || (ariaLabel === undefined && ariaLabelledby === undefined)) {\n          return true\n        }\n\n        return undefined\n      }, [ariaHidden, alt, ariaLabel, ariaLabelledby])\n\n      const classNames = useMemo(() => {\n        const { icon, wrapperWithAlt } = classNameGenerator()\n\n        return {\n          icon: icon({ className }),\n          wrapperWithAlt: wrapperWithAlt(),\n        }\n      }, [className])\n\n      const replacedColor = useMemo(() => {\n        if (color && existsColor(color)) {\n          const colorName = colorSet[color]\n\n          if (colorName in textColor) {\n            return textColor[colorName as keyof typeof textColor]\n          }\n\n          return defaultColorPalette[colorName as keyof typeof defaultColorPalette] as string\n        }\n\n        return color\n      }, [color])\n\n      const iconSize = size ? fontSize[size] : '1em' // 指定がない場合は親要素のフォントサイズを継承する\n      const svgIcon = (\n        <SvgIcon\n          {...rest}\n          stroke=\"currentColor\"\n          fill=\"currentColor\"\n          strokeWidth=\"0\"\n          // size は react-icons のアイコンの大きさ、width / height は自前で SVG からアイコンを作る場合の大きさ指定\n          size={iconSize}\n          width={iconSize}\n          height={iconSize}\n          color={replacedColor}\n          className={classNames.icon}\n          role={role}\n          aria-hidden={actualAriaHidden}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          focusable={focusable}\n        />\n      )\n\n      if (alt) {\n        return (\n          // HINT: VisuallyHiddenTextが存在すると、アイコンなのに2つの要素がある状態になってしまい\n          // styleなどを記述する際、意図しない状態になる場合がある\n          // 回避するため、spanでラップし、開発者のメンタルモデルに合わせる\n          <span className={classNames.wrapperWithAlt}>\n            <VisuallyHiddenText>{alt}</VisuallyHiddenText>\n            {svgIcon}\n          </span>\n        )\n      }\n\n      return svgIcon\n    },\n  )\n\n  Icon.displayName = SvgIcon.name\n\n  return Icon\n}\n"],"names":["tv","textColor","defaultColorPalette","fontSize","_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"generateIcon.js","sources":["../../../src/components/Icon/generateIcon.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { color as defaultColorPalette, fontSize, textColor } from '../../tailwind'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nimport type { FontSizes } from '../../themes'\nimport type { IconType } from 'react-icons'\n\n/**\n * literal union type に補完を効かせるためのハック\n * https://github.com/microsoft/TypeScript/issues/29729\n */\ntype LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>)\n\nexport const colorSet = {\n  TEXT_BLACK: 'black',\n  TEXT_WHITE: 'white',\n  TEXT_GREY: 'grey',\n  TEXT_DISABLED: 'disabled',\n  TEXT_LINK: 'link',\n  MAIN: 'main',\n  DANGER: 'danger',\n  WARNING: 'warning-yellow',\n  BRAND: 'brand',\n} as const\n\nconst existsColor = (color: string): color is keyof typeof colorSet => color in colorSet\n\ntype IconProps = {\n  /**\n   * アイコンの色\n   * @type string | 'TEXT_BLACK' | 'TEXT_GREY' | 'TEXT_DISABLED' | 'TEXT_LINK' | 'MAIN' | 'DANGER' | 'WARNING' | 'BRAND'\n   */\n  color?: LiteralUnion<keyof typeof colorSet>\n  /**\n   * アイコンの大きさ（フォントサイズの抽象値）\n   * @deprecated 親要素やデフォルトフォントサイズが継承されるため固定値の指定は非推奨\n   */\n  size?: FontSizes\n}\n\ntype AbstractProps = {\n  /**アイコンの説明テキスト*/\n  alt?: ReactNode\n}\nexport type Props = AbstractProps &\n  Omit<IconProps & Omit<ComponentProps<'svg'>, keyof IconProps>, keyof AbstractProps>\n\n// HINT: smarthr-ui-Icon-extendedはアイコン+α(例えば複数のアイコンをまとめて一つにしているなど)を表すclass\n// altなどもVisuallyHiddenTextで表現している関係上、squareの計算などの際に複数要素として判断されると認知と違う結果になるため使用しています\n\nconst classNameGenerator = tv({\n  slots: {\n    icon: 'smarthr-ui-Icon group-[]/iconWrapper:shr-shrink-0 group-[]/iconWrapper:shr-translate-y-[0.125em] forced-colors:shr-fill-[CanvasText]',\n    wrapperWithAlt: 'smarthr-ui-Icon-extended smarthr-ui-Icon-withAlt shr-relative shr-leading-[0]',\n  },\n})\n\nexport const generateIcon = (SvgIcon: IconType) => {\n  const Icon = memo<Props>(\n    ({\n      color,\n      className,\n      role = 'img',\n      alt,\n      'aria-hidden': ariaHidden,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      focusable = false,\n      size,\n      ...rest\n    }) => {\n      const actualAriaHidden = useMemo(() => {\n        if (ariaHidden !== undefined) {\n          return ariaHidden\n        }\n\n        if (alt !== undefined || (ariaLabel === undefined && ariaLabelledby === undefined)) {\n          return true\n        }\n\n        return undefined\n      }, [ariaHidden, alt, ariaLabel, ariaLabelledby])\n\n      const classNames = useMemo(() => {\n        const { icon, wrapperWithAlt } = classNameGenerator()\n\n        return {\n          icon: icon({ className }),\n          wrapperWithAlt: wrapperWithAlt(),\n        }\n      }, [className])\n\n      const replacedColor = useMemo(() => {\n        if (color && existsColor(color)) {\n          const colorName = colorSet[color]\n\n          if (colorName in textColor) {\n            return textColor[colorName as keyof typeof textColor]\n          }\n\n          return defaultColorPalette[colorName as keyof typeof defaultColorPalette] as string\n        }\n\n        return color\n      }, [color])\n\n      const iconSize = size ? fontSize[size] : '1em' // 指定がない場合は親要素のフォントサイズを継承する\n      const svgIcon = (\n        <SvgIcon\n          {...rest}\n          stroke=\"currentColor\"\n          fill=\"currentColor\"\n          strokeWidth=\"0\"\n          // size は react-icons のアイコンの大きさ、width / height は自前で SVG からアイコンを作る場合の大きさ指定\n          size={iconSize}\n          width={iconSize}\n          height={iconSize}\n          color={replacedColor}\n          className={classNames.icon}\n          role={role}\n          aria-hidden={actualAriaHidden}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          focusable={focusable}\n        />\n      )\n\n      if (alt) {\n        return (\n          // HINT: VisuallyHiddenTextが存在すると、アイコンなのに2つの要素がある状態になってしまい\n          // styleなどを記述する際、意図しない状態になる場合がある\n          // 回避するため、spanでラップし、開発者のメンタルモデルに合わせる\n          <span className={classNames.wrapperWithAlt}>\n            <VisuallyHiddenText>{alt}</VisuallyHiddenText>\n            {svgIcon}\n          </span>\n        )\n      }\n\n      return svgIcon\n    },\n  )\n\n  Icon.displayName = SvgIcon.name\n\n  return Icon\n}\n"],"names":["tv","textColor","defaultColorPalette","fontSize","_jsx","_jsxs"],"mappings":"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"}

package/lib/components/Layout/Cluster/Cluster.cjs

@@ -106,8 +106,12 @@ const ActualCluster = ({ as, gap = 0.5, inline = false, align, justify, classNam
         justify,
         className,
     }), [inline, gaps.row, gaps.column, align, justify, className]);
+    // eslint-disable-next-line smarthr/best-practice-for-no-unnecessary-variable -- Componentは useSectionWrapper と JSX の2箇所で使用されているため誤検知
     const Component = as || 'div';
     const Wrapper = components_SectioningContent_useSectioningWrapper.useSectionWrapper(Component);
+    // ポリモーフィックコンポーネント: asプロパティで要素型を動的に変更可能なため、
+    // refの型を静的に決定できません。HTMLElementを基底型として使用し、
+    // 実際の要素型との整合性はas anyで型アサーションします。
     const body = jsxRuntime.jsx(Component, { ...rest, ref: ref, className: actualClassName });
     if (Wrapper) {
         return jsxRuntime.jsx(Wrapper, { children: body });

package/lib/components/Layout/Cluster/Cluster.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Cluster.cjs","sources":["../../../../src/components/Layout/Cluster/Cluster.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ForwardedRef,\n  type PropsWithChildren,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { genericsForwardRef } from '../../../libs/util'\nimport { useSectionWrapper } from '../../SectioningContent'\n\nimport type { Gap, SeparateGap } from '../../../types'\n\nexport const clusterClassNameGenerator = tv({\n  base: 'shr-flex-wrap [&:empty]:shr-gap-0',\n  variants: {\n    inline: {\n      true: 'shr-inline-flex',\n      false: 'shr-flex',\n    },\n    rowGap: {\n      // 動的生成も考えたが、tailwindcss が検知できないためベタ書きしている\n      0: 'shr-gap-y-0',\n      0.25: 'shr-gap-y-0.25',\n      0.5: 'shr-gap-y-0.5',\n      0.75: 'shr-gap-y-0.75',\n      1: 'shr-gap-y-1',\n      1.25: 'shr-gap-y-1.25',\n      1.5: 'shr-gap-y-1.5',\n      2: 'shr-gap-y-2',\n      2.5: 'shr-gap-y-2.5',\n      3: 'shr-gap-y-3',\n      3.5: 'shr-gap-y-3.5',\n      4: 'shr-gap-y-4',\n      8: 'shr-gap-y-8',\n      X3S: 'shr-gap-y-0.25',\n      XXS: 'shr-gap-y-0.5',\n      XS: 'shr-gap-y-1',\n      S: 'shr-gap-y-1.5',\n      M: 'shr-gap-y-2',\n      L: 'shr-gap-y-2.5',\n      XL: 'shr-gap-y-3',\n      XXL: 'shr-gap-y-3.5',\n      X3L: 'shr-gap-y-4',\n    } as { [key in Gap]: string },\n    columnGap: {\n      0: 'shr-gap-x-0',\n      0.25: 'shr-gap-x-0.25',\n      0.5: 'shr-gap-x-0.5',\n      0.75: 'shr-gap-x-0.75',\n      1: 'shr-gap-x-1',\n      1.25: 'shr-gap-x-1.25',\n      1.5: 'shr-gap-x-1.5',\n      2: 'shr-gap-x-2',\n      2.5: 'shr-gap-x-2.5',\n      3: 'shr-gap-x-3',\n      3.5: 'shr-gap-x-3.5',\n      4: 'shr-gap-x-4',\n      8: 'shr-gap-x-8',\n      X3S: 'shr-gap-x-0.25',\n      XXS: 'shr-gap-x-0.5',\n      XS: 'shr-gap-x-1',\n      S: 'shr-gap-x-1.5',\n      M: 'shr-gap-x-2',\n      L: 'shr-gap-x-2.5',\n      XL: 'shr-gap-x-3',\n      XXL: 'shr-gap-x-3.5',\n      X3L: 'shr-gap-x-4',\n    } as { [key in Gap]: string },\n    align: {\n      start: 'shr-items-start',\n      'flex-start': 'shr-items-start',\n      end: 'shr-items-end',\n      'flex-end': 'shr-items-end',\n      center: 'shr-items-center',\n      baseline: 'shr-items-baseline',\n      stretch: 'shr-items-stretch',\n    },\n    justify: {\n      normal: 'shr-justify-normal',\n      start: 'shr-justify-start',\n      'flex-start': 'shr-justify-start',\n      end: 'shr-justify-end',\n      'flex-end': 'shr-justify-end',\n      center: 'shr-justify-center',\n      'space-between': 'shr-justify-between',\n      'space-around': 'shr-justify-around',\n      'space-evenly': 'shr-justify-evenly',\n      stretch: 'shr-justify-stretch',\n    },\n  },\n})\n\ntype Props<T extends ElementType> = PropsWithChildren<\n  Omit<VariantProps<typeof clusterClassNameGenerator>, 'rowGap' | 'columnGap'> & {\n    as?: T\n    gap?: Gap | SeparateGap\n  }\n> &\n  ComponentPropsWithoutRef<T>\n\nconst ActualCluster = <T extends ElementType = 'div'>(\n  { as, gap = 0.5, inline = false, align, justify, className, ...rest }: Props<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) => {\n  const gaps = useMemo(() => {\n    if (gap instanceof Object) {\n      return gap\n    }\n\n    return {\n      row: gap,\n      column: gap,\n    }\n  }, [gap])\n\n  const actualClassName = useMemo(\n    () =>\n      clusterClassNameGenerator({\n        inline,\n        rowGap: gaps.row,\n        columnGap: gaps.column,\n        align,\n        justify,\n        className,\n      }),\n    [inline, gaps.row, gaps.column, align, justify, className],\n  )\n\n  const Component = as || 'div'\n  const Wrapper = useSectionWrapper(Component)\n  const body = <Component {...rest} ref={ref} className={actualClassName} />\n\n  if (Wrapper) {\n    return <Wrapper>{body}</Wrapper>\n  }\n\n  return body\n}\n\nexport const Cluster = genericsForwardRef(ActualCluster)\n"],"names":[],"mappings":";;;;;;;;;;;AAgBO;AACL;AACA;AACE;AACE;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAUD;AAIE;AACE;AACE;;;AAIA;AACA;;AAEJ;;;;;;;;AAWK;AAIL;AACA;AACA;;AAGE;;AAGF;AACF;;;;"}
+{"version":3,"file":"Cluster.cjs","sources":["../../../../src/components/Layout/Cluster/Cluster.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ForwardedRef,\n  type PropsWithChildren,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { genericsForwardRef } from '../../../libs/util'\nimport { useSectionWrapper } from '../../SectioningContent'\n\nimport type { Gap, SeparateGap } from '../../../types'\n\nexport const clusterClassNameGenerator = tv({\n  base: 'shr-flex-wrap [&:empty]:shr-gap-0',\n  variants: {\n    inline: {\n      true: 'shr-inline-flex',\n      false: 'shr-flex',\n    },\n    rowGap: {\n      // 動的生成も考えたが、tailwindcss が検知できないためベタ書きしている\n      0: 'shr-gap-y-0',\n      0.25: 'shr-gap-y-0.25',\n      0.5: 'shr-gap-y-0.5',\n      0.75: 'shr-gap-y-0.75',\n      1: 'shr-gap-y-1',\n      1.25: 'shr-gap-y-1.25',\n      1.5: 'shr-gap-y-1.5',\n      2: 'shr-gap-y-2',\n      2.5: 'shr-gap-y-2.5',\n      3: 'shr-gap-y-3',\n      3.5: 'shr-gap-y-3.5',\n      4: 'shr-gap-y-4',\n      8: 'shr-gap-y-8',\n      X3S: 'shr-gap-y-0.25',\n      XXS: 'shr-gap-y-0.5',\n      XS: 'shr-gap-y-1',\n      S: 'shr-gap-y-1.5',\n      M: 'shr-gap-y-2',\n      L: 'shr-gap-y-2.5',\n      XL: 'shr-gap-y-3',\n      XXL: 'shr-gap-y-3.5',\n      X3L: 'shr-gap-y-4',\n    } as { [key in Gap]: string },\n    columnGap: {\n      0: 'shr-gap-x-0',\n      0.25: 'shr-gap-x-0.25',\n      0.5: 'shr-gap-x-0.5',\n      0.75: 'shr-gap-x-0.75',\n      1: 'shr-gap-x-1',\n      1.25: 'shr-gap-x-1.25',\n      1.5: 'shr-gap-x-1.5',\n      2: 'shr-gap-x-2',\n      2.5: 'shr-gap-x-2.5',\n      3: 'shr-gap-x-3',\n      3.5: 'shr-gap-x-3.5',\n      4: 'shr-gap-x-4',\n      8: 'shr-gap-x-8',\n      X3S: 'shr-gap-x-0.25',\n      XXS: 'shr-gap-x-0.5',\n      XS: 'shr-gap-x-1',\n      S: 'shr-gap-x-1.5',\n      M: 'shr-gap-x-2',\n      L: 'shr-gap-x-2.5',\n      XL: 'shr-gap-x-3',\n      XXL: 'shr-gap-x-3.5',\n      X3L: 'shr-gap-x-4',\n    } as { [key in Gap]: string },\n    align: {\n      start: 'shr-items-start',\n      'flex-start': 'shr-items-start',\n      end: 'shr-items-end',\n      'flex-end': 'shr-items-end',\n      center: 'shr-items-center',\n      baseline: 'shr-items-baseline',\n      stretch: 'shr-items-stretch',\n    },\n    justify: {\n      normal: 'shr-justify-normal',\n      start: 'shr-justify-start',\n      'flex-start': 'shr-justify-start',\n      end: 'shr-justify-end',\n      'flex-end': 'shr-justify-end',\n      center: 'shr-justify-center',\n      'space-between': 'shr-justify-between',\n      'space-around': 'shr-justify-around',\n      'space-evenly': 'shr-justify-evenly',\n      stretch: 'shr-justify-stretch',\n    },\n  },\n})\n\ntype Props<T extends ElementType> = PropsWithChildren<\n  Omit<VariantProps<typeof clusterClassNameGenerator>, 'rowGap' | 'columnGap'> & {\n    as?: T\n    gap?: Gap | SeparateGap\n  }\n> &\n  ComponentPropsWithoutRef<T>\n\nconst ActualCluster = <T extends ElementType = 'div'>(\n  { as, gap = 0.5, inline = false, align, justify, className, ...rest }: Props<T>,\n  ref: ForwardedRef<HTMLElement>,\n) => {\n  const gaps = useMemo(() => {\n    if (gap instanceof Object) {\n      return gap\n    }\n\n    return {\n      row: gap,\n      column: gap,\n    }\n  }, [gap])\n\n  const actualClassName = useMemo(\n    () =>\n      clusterClassNameGenerator({\n        inline,\n        rowGap: gaps.row,\n        columnGap: gaps.column,\n        align,\n        justify,\n        className,\n      }),\n    [inline, gaps.row, gaps.column, align, justify, className],\n  )\n\n  // eslint-disable-next-line smarthr/best-practice-for-no-unnecessary-variable -- Componentは useSectionWrapper と JSX の2箇所で使用されているため誤検知\n  const Component = as || 'div'\n  const Wrapper = useSectionWrapper(Component)\n  // ポリモーフィックコンポーネント: asプロパティで要素型を動的に変更可能なため、\n  // refの型を静的に決定できません。HTMLElementを基底型として使用し、\n  // 実際の要素型との整合性はas anyで型アサーションします。\n  const body = <Component {...rest} ref={ref as any} className={actualClassName} />\n\n  if (Wrapper) {\n    return <Wrapper>{body}</Wrapper>\n  }\n\n  return body\n}\n\nexport const Cluster = genericsForwardRef(ActualCluster)\n"],"names":[],"mappings":";;;;;;;;;;;AAgBO;AACL;AACA;AACE;AACE;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAUD;AAIE;AACE;AACE;;;AAIA;AACA;;AAEJ;;;;;;;;AAWK;;AAKL;AACA;;;;AAIA;;AAGE;;AAGF;AACF;;;;"}

package/lib/components/Layout/Cluster/Cluster.d.ts

@@ -399,4 +399,4 @@ export declare const Cluster: <T extends ElementType = "div">(props: Omit<Varian
     gap?: Gap | SeparateGap;
 } & {
     children?: import("react").ReactNode | undefined;
-} & import("react").PropsWithoutRef<import("react").ComponentProps<T>> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
+} & import("react").PropsWithoutRef<import("react").ComponentProps<T>> & import("react").RefAttributes<HTMLElement>) => import("react").ReactNode;

package/lib/components/Layout/Cluster/Cluster.js

@@ -104,8 +104,12 @@ const ActualCluster = ({ as, gap = 0.5, inline = false, align, justify, classNam
         justify,
         className,
     }), [inline, gaps.row, gaps.column, align, justify, className]);
+    // eslint-disable-next-line smarthr/best-practice-for-no-unnecessary-variable -- Componentは useSectionWrapper と JSX の2箇所で使用されているため誤検知
     const Component = as || 'div';
     const Wrapper = useSectionWrapper(Component);
+    // ポリモーフィックコンポーネント: asプロパティで要素型を動的に変更可能なため、
+    // refの型を静的に決定できません。HTMLElementを基底型として使用し、
+    // 実際の要素型との整合性はas anyで型アサーションします。
     const body = jsx(Component, { ...rest, ref: ref, className: actualClassName });
     if (Wrapper) {
         return jsx(Wrapper, { children: body });

package/lib/components/Layout/Cluster/Cluster.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cluster.js","sources":["../../../../src/components/Layout/Cluster/Cluster.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ForwardedRef,\n  type PropsWithChildren,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { genericsForwardRef } from '../../../libs/util'\nimport { useSectionWrapper } from '../../SectioningContent'\n\nimport type { Gap, SeparateGap } from '../../../types'\n\nexport const clusterClassNameGenerator = tv({\n  base: 'shr-flex-wrap [&:empty]:shr-gap-0',\n  variants: {\n    inline: {\n      true: 'shr-inline-flex',\n      false: 'shr-flex',\n    },\n    rowGap: {\n      // 動的生成も考えたが、tailwindcss が検知できないためベタ書きしている\n      0: 'shr-gap-y-0',\n      0.25: 'shr-gap-y-0.25',\n      0.5: 'shr-gap-y-0.5',\n      0.75: 'shr-gap-y-0.75',\n      1: 'shr-gap-y-1',\n      1.25: 'shr-gap-y-1.25',\n      1.5: 'shr-gap-y-1.5',\n      2: 'shr-gap-y-2',\n      2.5: 'shr-gap-y-2.5',\n      3: 'shr-gap-y-3',\n      3.5: 'shr-gap-y-3.5',\n      4: 'shr-gap-y-4',\n      8: 'shr-gap-y-8',\n      X3S: 'shr-gap-y-0.25',\n      XXS: 'shr-gap-y-0.5',\n      XS: 'shr-gap-y-1',\n      S: 'shr-gap-y-1.5',\n      M: 'shr-gap-y-2',\n      L: 'shr-gap-y-2.5',\n      XL: 'shr-gap-y-3',\n      XXL: 'shr-gap-y-3.5',\n      X3L: 'shr-gap-y-4',\n    } as { [key in Gap]: string },\n    columnGap: {\n      0: 'shr-gap-x-0',\n      0.25: 'shr-gap-x-0.25',\n      0.5: 'shr-gap-x-0.5',\n      0.75: 'shr-gap-x-0.75',\n      1: 'shr-gap-x-1',\n      1.25: 'shr-gap-x-1.25',\n      1.5: 'shr-gap-x-1.5',\n      2: 'shr-gap-x-2',\n      2.5: 'shr-gap-x-2.5',\n      3: 'shr-gap-x-3',\n      3.5: 'shr-gap-x-3.5',\n      4: 'shr-gap-x-4',\n      8: 'shr-gap-x-8',\n      X3S: 'shr-gap-x-0.25',\n      XXS: 'shr-gap-x-0.5',\n      XS: 'shr-gap-x-1',\n      S: 'shr-gap-x-1.5',\n      M: 'shr-gap-x-2',\n      L: 'shr-gap-x-2.5',\n      XL: 'shr-gap-x-3',\n      XXL: 'shr-gap-x-3.5',\n      X3L: 'shr-gap-x-4',\n    } as { [key in Gap]: string },\n    align: {\n      start: 'shr-items-start',\n      'flex-start': 'shr-items-start',\n      end: 'shr-items-end',\n      'flex-end': 'shr-items-end',\n      center: 'shr-items-center',\n      baseline: 'shr-items-baseline',\n      stretch: 'shr-items-stretch',\n    },\n    justify: {\n      normal: 'shr-justify-normal',\n      start: 'shr-justify-start',\n      'flex-start': 'shr-justify-start',\n      end: 'shr-justify-end',\n      'flex-end': 'shr-justify-end',\n      center: 'shr-justify-center',\n      'space-between': 'shr-justify-between',\n      'space-around': 'shr-justify-around',\n      'space-evenly': 'shr-justify-evenly',\n      stretch: 'shr-justify-stretch',\n    },\n  },\n})\n\ntype Props<T extends ElementType> = PropsWithChildren<\n  Omit<VariantProps<typeof clusterClassNameGenerator>, 'rowGap' | 'columnGap'> & {\n    as?: T\n    gap?: Gap | SeparateGap\n  }\n> &\n  ComponentPropsWithoutRef<T>\n\nconst ActualCluster = <T extends ElementType = 'div'>(\n  { as, gap = 0.5, inline = false, align, justify, className, ...rest }: Props<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) => {\n  const gaps = useMemo(() => {\n    if (gap instanceof Object) {\n      return gap\n    }\n\n    return {\n      row: gap,\n      column: gap,\n    }\n  }, [gap])\n\n  const actualClassName = useMemo(\n    () =>\n      clusterClassNameGenerator({\n        inline,\n        rowGap: gaps.row,\n        columnGap: gaps.column,\n        align,\n        justify,\n        className,\n      }),\n    [inline, gaps.row, gaps.column, align, justify, className],\n  )\n\n  const Component = as || 'div'\n  const Wrapper = useSectionWrapper(Component)\n  const body = <Component {...rest} ref={ref} className={actualClassName} />\n\n  if (Wrapper) {\n    return <Wrapper>{body}</Wrapper>\n  }\n\n  return body\n}\n\nexport const Cluster = genericsForwardRef(ActualCluster)\n"],"names":[],"mappings":";;;;;;;;;AAgBO;AACL;AACA;AACE;AACE;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAUD;AAIE;AACE;AACE;;;AAIA;AACA;;AAEJ;;;;;;;;AAWK;AAIL;AACA;AACA;;AAGE;;AAGF;AACF;;;"}
+{"version":3,"file":"Cluster.js","sources":["../../../../src/components/Layout/Cluster/Cluster.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ForwardedRef,\n  type PropsWithChildren,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { genericsForwardRef } from '../../../libs/util'\nimport { useSectionWrapper } from '../../SectioningContent'\n\nimport type { Gap, SeparateGap } from '../../../types'\n\nexport const clusterClassNameGenerator = tv({\n  base: 'shr-flex-wrap [&:empty]:shr-gap-0',\n  variants: {\n    inline: {\n      true: 'shr-inline-flex',\n      false: 'shr-flex',\n    },\n    rowGap: {\n      // 動的生成も考えたが、tailwindcss が検知できないためベタ書きしている\n      0: 'shr-gap-y-0',\n      0.25: 'shr-gap-y-0.25',\n      0.5: 'shr-gap-y-0.5',\n      0.75: 'shr-gap-y-0.75',\n      1: 'shr-gap-y-1',\n      1.25: 'shr-gap-y-1.25',\n      1.5: 'shr-gap-y-1.5',\n      2: 'shr-gap-y-2',\n      2.5: 'shr-gap-y-2.5',\n      3: 'shr-gap-y-3',\n      3.5: 'shr-gap-y-3.5',\n      4: 'shr-gap-y-4',\n      8: 'shr-gap-y-8',\n      X3S: 'shr-gap-y-0.25',\n      XXS: 'shr-gap-y-0.5',\n      XS: 'shr-gap-y-1',\n      S: 'shr-gap-y-1.5',\n      M: 'shr-gap-y-2',\n      L: 'shr-gap-y-2.5',\n      XL: 'shr-gap-y-3',\n      XXL: 'shr-gap-y-3.5',\n      X3L: 'shr-gap-y-4',\n    } as { [key in Gap]: string },\n    columnGap: {\n      0: 'shr-gap-x-0',\n      0.25: 'shr-gap-x-0.25',\n      0.5: 'shr-gap-x-0.5',\n      0.75: 'shr-gap-x-0.75',\n      1: 'shr-gap-x-1',\n      1.25: 'shr-gap-x-1.25',\n      1.5: 'shr-gap-x-1.5',\n      2: 'shr-gap-x-2',\n      2.5: 'shr-gap-x-2.5',\n      3: 'shr-gap-x-3',\n      3.5: 'shr-gap-x-3.5',\n      4: 'shr-gap-x-4',\n      8: 'shr-gap-x-8',\n      X3S: 'shr-gap-x-0.25',\n      XXS: 'shr-gap-x-0.5',\n      XS: 'shr-gap-x-1',\n      S: 'shr-gap-x-1.5',\n      M: 'shr-gap-x-2',\n      L: 'shr-gap-x-2.5',\n      XL: 'shr-gap-x-3',\n      XXL: 'shr-gap-x-3.5',\n      X3L: 'shr-gap-x-4',\n    } as { [key in Gap]: string },\n    align: {\n      start: 'shr-items-start',\n      'flex-start': 'shr-items-start',\n      end: 'shr-items-end',\n      'flex-end': 'shr-items-end',\n      center: 'shr-items-center',\n      baseline: 'shr-items-baseline',\n      stretch: 'shr-items-stretch',\n    },\n    justify: {\n      normal: 'shr-justify-normal',\n      start: 'shr-justify-start',\n      'flex-start': 'shr-justify-start',\n      end: 'shr-justify-end',\n      'flex-end': 'shr-justify-end',\n      center: 'shr-justify-center',\n      'space-between': 'shr-justify-between',\n      'space-around': 'shr-justify-around',\n      'space-evenly': 'shr-justify-evenly',\n      stretch: 'shr-justify-stretch',\n    },\n  },\n})\n\ntype Props<T extends ElementType> = PropsWithChildren<\n  Omit<VariantProps<typeof clusterClassNameGenerator>, 'rowGap' | 'columnGap'> & {\n    as?: T\n    gap?: Gap | SeparateGap\n  }\n> &\n  ComponentPropsWithoutRef<T>\n\nconst ActualCluster = <T extends ElementType = 'div'>(\n  { as, gap = 0.5, inline = false, align, justify, className, ...rest }: Props<T>,\n  ref: ForwardedRef<HTMLElement>,\n) => {\n  const gaps = useMemo(() => {\n    if (gap instanceof Object) {\n      return gap\n    }\n\n    return {\n      row: gap,\n      column: gap,\n    }\n  }, [gap])\n\n  const actualClassName = useMemo(\n    () =>\n      clusterClassNameGenerator({\n        inline,\n        rowGap: gaps.row,\n        columnGap: gaps.column,\n        align,\n        justify,\n        className,\n      }),\n    [inline, gaps.row, gaps.column, align, justify, className],\n  )\n\n  // eslint-disable-next-line smarthr/best-practice-for-no-unnecessary-variable -- Componentは useSectionWrapper と JSX の2箇所で使用されているため誤検知\n  const Component = as || 'div'\n  const Wrapper = useSectionWrapper(Component)\n  // ポリモーフィックコンポーネント: asプロパティで要素型を動的に変更可能なため、\n  // refの型を静的に決定できません。HTMLElementを基底型として使用し、\n  // 実際の要素型との整合性はas anyで型アサーションします。\n  const body = <Component {...rest} ref={ref as any} className={actualClassName} />\n\n  if (Wrapper) {\n    return <Wrapper>{body}</Wrapper>\n  }\n\n  return body\n}\n\nexport const Cluster = genericsForwardRef(ActualCluster)\n"],"names":[],"mappings":";;;;;;;;;AAgBO;AACL;AACA;AACE;AACE;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAUD;AAIE;AACE;AACE;;;AAIA;AACA;;AAEJ;;;;;;;;AAWK;;AAKL;AACA;;;;AAIA;;AAGE;;AAGF;AACF;;;"}

package/lib/components/Layout/Container/Container.cjs

@@ -11,12 +11,12 @@ require('../../../themes/createSpacing.cjs');
 require('../../../_virtual/index.cjs');
 require('../../../_virtual/index2.cjs');
 require('../../../themes/createColor.cjs');
+require('../../../themes/createTextColor.cjs');
+require('styled-components');
 require('../../../themes/createShadow/defaultShadow.cjs');
 require('../../../themes/createWidth.cjs');
 require('../../../themes/createBackgroundColor.cjs');
 require('../../../themes/createBorder.cjs');
-require('styled-components');
-require('../../../themes/createTextColor.cjs');
 require('../../../hooks/useTheme.cjs');
 var tailwind_padding = require('../../../tailwind/padding.cjs');
 

package/lib/components/Layout/Container/Container.js

@@ -9,12 +9,12 @@ import '../../../themes/createSpacing.js';
 import '../../../_virtual/index.js';
 import '../../../_virtual/index2.js';
 import '../../../themes/createColor.js';
+import '../../../themes/createTextColor.js';
+import 'styled-components';
 import '../../../themes/createShadow/defaultShadow.js';
 import '../../../themes/createWidth.js';
 import '../../../themes/createBackgroundColor.js';
 import '../../../themes/createBorder.js';
-import 'styled-components';
-import '../../../themes/createTextColor.js';
 import '../../../hooks/useTheme.js';
 import { paddingInline, paddingBlock } from '../../../tailwind/padding.js';
 

package/lib/components/Scroller/Scroller.cjs

@@ -4,7 +4,6 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
-var libs_debounce = require('../../libs/debounce.cjs');
 require('../SectioningContent/SectioningContent.cjs');
 require('../SectioningContent/levelContext.cjs');
 var components_SectioningContent_useSectioningWrapper = require('../SectioningContent/useSectioningWrapper.cjs');
@@ -54,12 +53,8 @@ const classNameGenerator = index.tv({
             className: 'shr-overflow-scroll',
         },
     ],
-    defaultVariants: {
-        direction: 'vertical',
-        styleType: 'auto',
-    },
 });
-const Scroller = React.forwardRef(({ as: Component = 'div', direction, styleType, className, children, ...rest }, ref) => {
+const Scroller = React.forwardRef(({ as: Component = 'div', direction = 'vertical', styleType = 'auto', className, children, ...rest }, ref) => {
     const wrapperRef = React.useRef(null);
     React.useImperativeHandle(ref, () => wrapperRef.current);
     const [tabIndex, setTabIndex] = React.useState(undefined);
@@ -68,10 +63,12 @@ const Scroller = React.forwardRef(({ as: Component = 'div', direction, styleType
         styleType,
         className,
     }), [direction, styleType, className]);
-    const autoTabIndex = React.useCallback(() => {
-        let nextTabIndex = undefined;
+    React.useEffect(() => {
         const refCurrent = wrapperRef.current;
-        if (refCurrent) {
+        if (!refCurrent)
+            return;
+        const autoTabIndex = () => {
+            let nextTabIndex = undefined;
             switch (direction) {
                 case 'vertical':
                     nextTabIndex = refCurrent.scrollHeight > refCurrent.clientHeight ? 0 : undefined;
@@ -87,19 +84,15 @@ const Scroller = React.forwardRef(({ as: Component = 'div', direction, styleType
                             : undefined;
                     break;
             }
-        }
-        setTabIndex(nextTabIndex);
-    }, [direction]);
-    React.useEffect(() => {
+            setTabIndex(nextTabIndex);
+        };
         autoTabIndex();
-    }, [children, autoTabIndex]);
-    React.useEffect(() => {
-        const debouncedAction = libs_debounce.debounce(autoTabIndex, 100);
-        window.addEventListener('resize', debouncedAction);
+        const resizeObserver = new ResizeObserver(autoTabIndex);
+        resizeObserver.observe(refCurrent);
         return () => {
-            window.removeEventListener('resize', debouncedAction);
+            resizeObserver.unobserve(refCurrent);
         };
-    }, [autoTabIndex]);
+    }, [direction]);
     const Wrapper = components_SectioningContent_useSectioningWrapper.useSectionWrapper(Component);
     const body = (jsxRuntime.jsx(Component, { ...rest, ref: wrapperRef, className: actualClassName, tabIndex: tabIndex, children: children }));
     if (Wrapper) {

package/lib/components/Scroller/Scroller.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Scroller.cjs","sources":["../../../src/components/Scroller/Scroller.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type PropsWithChildren,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { debounce } from '../../libs/debounce'\nimport { useSectionWrapper } from '../SectioningContent'\n\ntype AbstractProps = PropsWithChildren<\n  VariantProps<typeof classNameGenerator> & {\n    as?: string | ComponentType<any>\n  }\n>\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AbstractProps | '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  defaultVariants: {\n    direction: 'vertical',\n    styleType: 'auto',\n  },\n})\n\nexport const Scroller = forwardRef<HTMLDivElement, Props>(\n  ({ as: Component = 'div', direction, styleType, className, children, ...rest }, ref) => {\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    const autoTabIndex = useCallback(() => {\n      let nextTabIndex: 0 | undefined = undefined\n      const refCurrent = wrapperRef.current\n\n      if (refCurrent) {\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\n      setTabIndex(nextTabIndex)\n    }, [direction])\n\n    useEffect(() => {\n      autoTabIndex()\n    }, [children, autoTabIndex])\n\n    useEffect(() => {\n      const debouncedAction = debounce(autoTabIndex, 100)\n\n      window.addEventListener('resize', debouncedAction)\n\n      return () => {\n        window.removeEventListener('resize', debouncedAction)\n      }\n    }, [autoTabIndex])\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":";;;;;;;;;;;AA0BA;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;AACD;AACE;AACA;AACD;AACF;AAEM;AAEH;;;;;;;;AAgBA;;AAEE;;;AAII;AACE;;AAEF;AACE;;AAEF;;AAEI;AACA;AACE;;;;;;AAOZ;;AAGE;AACF;;;AAKE;AAEA;AACE;AACF;AACF;AAEA;;;AAQE;;AAGF;AACF;;"}
+{"version":3,"file":"Scroller.cjs","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 AbstractProps = PropsWithChildren<\n  VariantProps<typeof classNameGenerator> & {\n    as?: string | ComponentType<any>\n  }\n>\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AbstractProps | '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;;"}

package/lib/components/Scroller/Scroller.js

@@ -1,8 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useImperativeHandle, useState, useMemo, useCallback, useEffect } from 'react';
+import { forwardRef, useRef, useImperativeHandle, useState, useMemo, useEffect } 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 { debounce } from '../../libs/debounce.js';
 import '../SectioningContent/SectioningContent.js';
 import '../SectioningContent/levelContext.js';
 import { useSectionWrapper } from '../SectioningContent/useSectioningWrapper.js';
@@ -52,12 +51,8 @@ const classNameGenerator = ce({
             className: 'shr-overflow-scroll',
         },
     ],
-    defaultVariants: {
-        direction: 'vertical',
-        styleType: 'auto',
-    },
 });
-const Scroller = forwardRef(({ as: Component = 'div', direction, styleType, className, children, ...rest }, ref) => {
+const Scroller = forwardRef(({ as: Component = 'div', direction = 'vertical', styleType = 'auto', className, children, ...rest }, ref) => {
     const wrapperRef = useRef(null);
     useImperativeHandle(ref, () => wrapperRef.current);
     const [tabIndex, setTabIndex] = useState(undefined);
@@ -66,10 +61,12 @@ const Scroller = forwardRef(({ as: Component = 'div', direction, styleType, clas
         styleType,
         className,
     }), [direction, styleType, className]);
-    const autoTabIndex = useCallback(() => {
-        let nextTabIndex = undefined;
+    useEffect(() => {
         const refCurrent = wrapperRef.current;
-        if (refCurrent) {
+        if (!refCurrent)
+            return;
+        const autoTabIndex = () => {
+            let nextTabIndex = undefined;
             switch (direction) {
                 case 'vertical':
                     nextTabIndex = refCurrent.scrollHeight > refCurrent.clientHeight ? 0 : undefined;
@@ -85,19 +82,15 @@ const Scroller = forwardRef(({ as: Component = 'div', direction, styleType, clas
                             : undefined;
                     break;
             }
-        }
-        setTabIndex(nextTabIndex);
-    }, [direction]);
-    useEffect(() => {
+            setTabIndex(nextTabIndex);
+        };
         autoTabIndex();
-    }, [children, autoTabIndex]);
-    useEffect(() => {
-        const debouncedAction = debounce(autoTabIndex, 100);
-        window.addEventListener('resize', debouncedAction);
+        const resizeObserver = new ResizeObserver(autoTabIndex);
+        resizeObserver.observe(refCurrent);
         return () => {
-            window.removeEventListener('resize', debouncedAction);
+            resizeObserver.unobserve(refCurrent);
         };
-    }, [autoTabIndex]);
+    }, [direction]);
     const Wrapper = useSectionWrapper(Component);
     const body = (jsx(Component, { ...rest, ref: wrapperRef, className: actualClassName, tabIndex: tabIndex, children: children }));
     if (Wrapper) {

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  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { debounce } from '../../libs/debounce'\nimport { useSectionWrapper } from '../SectioningContent'\n\ntype AbstractProps = PropsWithChildren<\n  VariantProps<typeof classNameGenerator> & {\n    as?: string | ComponentType<any>\n  }\n>\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AbstractProps | '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  defaultVariants: {\n    direction: 'vertical',\n    styleType: 'auto',\n  },\n})\n\nexport const Scroller = forwardRef<HTMLDivElement, Props>(\n  ({ as: Component = 'div', direction, styleType, className, children, ...rest }, ref) => {\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    const autoTabIndex = useCallback(() => {\n      let nextTabIndex: 0 | undefined = undefined\n      const refCurrent = wrapperRef.current\n\n      if (refCurrent) {\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\n      setTabIndex(nextTabIndex)\n    }, [direction])\n\n    useEffect(() => {\n      autoTabIndex()\n    }, [children, autoTabIndex])\n\n    useEffect(() => {\n      const debouncedAction = debounce(autoTabIndex, 100)\n\n      window.addEventListener('resize', debouncedAction)\n\n      return () => {\n        window.removeEventListener('resize', debouncedAction)\n      }\n    }, [autoTabIndex])\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":";;;;;;;;;AA0BA;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;AACD;AACE;AACA;AACD;AACF;AAEM;AAEH;;;;;;;;AAgBA;;AAEE;;;AAII;AACE;;AAEF;AACE;;AAEF;;AAEI;AACA;AACE;;;;;;AAOZ;;AAGE;AACF;;;AAKE;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 AbstractProps = PropsWithChildren<\n  VariantProps<typeof classNameGenerator> & {\n    as?: string | ComponentType<any>\n  }\n>\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AbstractProps | '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;;"}

package/lib/components/Table/TableReel.cjs

@@ -14,7 +14,7 @@ const classNameGenerator = index.tv({
     },
 });
 const TableReel = ({ className, children, tableWrapperRef, ...rest }) => {
-    const { showShadow } = components_Table_useReelCells.useReelCells(children, tableWrapperRef);
+    const { showShadow } = components_Table_useReelCells.useReelCells(tableWrapperRef);
     const classNames = React.useMemo(() => {
         const { wrapper, inner } = classNameGenerator();
         return {

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(children, 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 { 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;;"}

package/lib/components/Table/TableReel.js

@@ -12,7 +12,7 @@ const classNameGenerator = ce({
     },
 });
 const TableReel = ({ className, children, tableWrapperRef, ...rest }) => {
-    const { showShadow } = useReelCells(children, tableWrapperRef);
+    const { showShadow } = useReelCells(tableWrapperRef);
     const classNames = useMemo(() => {
         const { wrapper, inner } = classNameGenerator();
         return {

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(children, 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 { 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;;"}

package/lib/components/Table/TableScrollContext.cjs

@@ -7,14 +7,14 @@ var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.
 require('../../themes/createSpacing.cjs');
 var themes_createFontSize = require('../../themes/createFontSize.cjs');
 require('../../themes/createColor.cjs');
-require('../../themes/createShadow/defaultShadow.cjs');
-require('../../themes/createWidth.cjs');
+require('../../themes/createTextColor.cjs');
+require('styled-components');
 require('../../_virtual/index.cjs');
 require('../../_virtual/index2.cjs');
+require('../../themes/createShadow/defaultShadow.cjs');
+require('../../themes/createWidth.cjs');
 require('../../themes/createBackgroundColor.cjs');
 require('../../themes/createBorder.cjs');
-require('styled-components');
-require('../../themes/createTextColor.cjs');
 var components_Scroller_Scroller = require('../Scroller/Scroller.cjs');
 
 const classNameGenerator = index.tv({

package/lib/components/Table/TableScrollContext.js

@@ -5,14 +5,14 @@ import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindc
 import '../../themes/createSpacing.js';
 import { defaultHtmlFontSize } from '../../themes/createFontSize.js';
 import '../../themes/createColor.js';
-import '../../themes/createShadow/defaultShadow.js';
-import '../../themes/createWidth.js';
+import '../../themes/createTextColor.js';
+import 'styled-components';
 import '../../_virtual/index.js';
 import '../../_virtual/index2.js';
+import '../../themes/createShadow/defaultShadow.js';
+import '../../themes/createWidth.js';
 import '../../themes/createBackgroundColor.js';
 import '../../themes/createBorder.js';
-import 'styled-components';
-import '../../themes/createTextColor.js';
 import { Scroller } from '../Scroller/Scroller.js';
 
 const classNameGenerator = ce({

package/lib/components/Table/useReelCells.cjs

@@ -6,7 +6,7 @@ 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 useReelCells = (children, tableWrapperRef) => {
+const useReelCells = (tableWrapperRef) => {
     const [showShadow, setShowShadow] = React.useState(false);
     React.useEffect(() => {
         const wrapper = tableWrapperRef.current;
@@ -61,16 +61,22 @@ const useReelCells = (children, tableWrapperRef) => {
         };
         handleScroll();
         wrapper.addEventListener('scroll', handleScroll);
-        const observer = new ResizeObserver(handleScroll);
-        observer.observe(wrapper);
+        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);
-            observer.unobserve(wrapper);
+            resizeObserver.unobserve(wrapper);
+            mutationObserver.disconnect();
             allClean();
         };
-        // HINT: Paginationと組み合わせた際などに再生成したい
-    }, [children, tableWrapperRef]);
-    return { tableWrapperRef, showShadow };
+    }, [tableWrapperRef]);
+    return { showShadow };
 };
 
 exports.useReelCells = useReelCells;

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

@@ -1 +1 @@
-{"version":3,"file":"useReelCells.cjs","sources":["../../../src/components/Table/useReelCells.ts"],"sourcesContent":["import { type ReactNode, useEffect, useState } from 'react'\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\nexport const useReelCells = (\n  children: ReactNode,\n  tableWrapperRef: React.RefObject<HTMLDivElement>,\n) => {\n  const [showShadow, setShowShadow] = useState(false)\n\n  useEffect(() => {\n    const wrapper = tableWrapperRef.current\n\n    if (!wrapper) {\n      return\n    }\n\n    let cellCleans: Array<() => void> = []\n    const allClean = () => {\n      cellCleans.forEach((clean) => clean())\n      cellCleans = []\n    }\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        allClean()\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        cellCleans.push(() => {\n          cells.forEach((cell) => {\n            observer.unobserve(cell)\n          })\n        })\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 observer = new ResizeObserver(handleScroll)\n\n    observer.observe(wrapper)\n\n    return () => {\n      wrapper.removeEventListener('scroll', handleScroll)\n      observer.unobserve(wrapper)\n      allClean()\n    }\n    // HINT: Paginationと組み合わせた際などに再生成したい\n  }, [children, tableWrapperRef])\n\n  return { tableWrapperRef, showShadow }\n}\n"],"names":["useState","useEffect"],"mappings":"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"}
+{"version":3,"file":"useReelCells.cjs","sources":["../../../src/components/Table/useReelCells.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\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\nexport const useReelCells = (tableWrapperRef: React.RefObject<HTMLDivElement>) => {\n  const [showShadow, setShowShadow] = useState(false)\n\n  useEffect(() => {\n    const wrapper = tableWrapperRef.current\n\n    if (!wrapper) {\n      return\n    }\n\n    let cellCleans: Array<() => void> = []\n    const allClean = () => {\n      cellCleans.forEach((clean) => clean())\n      cellCleans = []\n    }\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        allClean()\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        cellCleans.push(() => {\n          cells.forEach((cell) => {\n            observer.unobserve(cell)\n          })\n        })\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      allClean()\n    }\n  }, [tableWrapperRef])\n\n  return { showShadow }\n}\n"],"names":["useState","useEffect"],"mappings":"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"}

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

@@ -1,5 +1,3 @@
-import { type ReactNode } from 'react';
-export declare const useReelCells: (children: ReactNode, tableWrapperRef: React.RefObject<HTMLDivElement>) => {
-    tableWrapperRef: import("react").RefObject<HTMLDivElement>;
+export declare const useReelCells: (tableWrapperRef: React.RefObject<HTMLDivElement>) => {
     showShadow: boolean;
 };

package/lib/components/Table/useReelCells.js

@@ -4,7 +4,7 @@ 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 useReelCells = (children, tableWrapperRef) => {
+const useReelCells = (tableWrapperRef) => {
     const [showShadow, setShowShadow] = useState(false);
     useEffect(() => {
         const wrapper = tableWrapperRef.current;
@@ -59,16 +59,22 @@ const useReelCells = (children, tableWrapperRef) => {
         };
         handleScroll();
         wrapper.addEventListener('scroll', handleScroll);
-        const observer = new ResizeObserver(handleScroll);
-        observer.observe(wrapper);
+        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);
-            observer.unobserve(wrapper);
+            resizeObserver.unobserve(wrapper);
+            mutationObserver.disconnect();
             allClean();
         };
-        // HINT: Paginationと組み合わせた際などに再生成したい
-    }, [children, tableWrapperRef]);
-    return { tableWrapperRef, showShadow };
+    }, [tableWrapperRef]);
+    return { showShadow };
 };
 
 export { useReelCells };

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

@@ -1 +1 @@
-{"version":3,"file":"useReelCells.js","sources":["../../../src/components/Table/useReelCells.ts"],"sourcesContent":["import { type ReactNode, useEffect, useState } from 'react'\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\nexport const useReelCells = (\n  children: ReactNode,\n  tableWrapperRef: React.RefObject<HTMLDivElement>,\n) => {\n  const [showShadow, setShowShadow] = useState(false)\n\n  useEffect(() => {\n    const wrapper = tableWrapperRef.current\n\n    if (!wrapper) {\n      return\n    }\n\n    let cellCleans: Array<() => void> = []\n    const allClean = () => {\n      cellCleans.forEach((clean) => clean())\n      cellCleans = []\n    }\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        allClean()\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        cellCleans.push(() => {\n          cells.forEach((cell) => {\n            observer.unobserve(cell)\n          })\n        })\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 observer = new ResizeObserver(handleScroll)\n\n    observer.observe(wrapper)\n\n    return () => {\n      wrapper.removeEventListener('scroll', handleScroll)\n      observer.unobserve(wrapper)\n      allClean()\n    }\n    // HINT: Paginationと組み合わせた際などに再生成したい\n  }, [children, tableWrapperRef])\n\n  return { tableWrapperRef, showShadow }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useReelCells.js","sources":["../../../src/components/Table/useReelCells.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\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\nexport const useReelCells = (tableWrapperRef: React.RefObject<HTMLDivElement>) => {\n  const [showShadow, setShowShadow] = useState(false)\n\n  useEffect(() => {\n    const wrapper = tableWrapperRef.current\n\n    if (!wrapper) {\n      return\n    }\n\n    let cellCleans: Array<() => void> = []\n    const allClean = () => {\n      cellCleans.forEach((clean) => clean())\n      cellCleans = []\n    }\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        allClean()\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        cellCleans.push(() => {\n          cells.forEach((cell) => {\n            observer.unobserve(cell)\n          })\n        })\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      allClean()\n    }\n  }, [tableWrapperRef])\n\n  return { showShadow }\n}\n"],"names":[],"mappings":"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"}

package/lib/components/Text/Text.cjs

@@ -153,7 +153,9 @@ const ActualText = ({ emphasis, styleType, icon: orgIcon, weight = emphasis ? 'b
             className,
         });
     }, [size, weight, italic, color, leading, whiteSpace, maxLines, className, styleType]);
-    const wrapperClassName = React.useMemo(() => (icon ? wrapperClassNameGenerator({ gap: icon.gap || 0.25 }) : ''), [icon]);
+    const hasIcon = !!icon;
+    const iconGap = icon?.gap;
+    const wrapperClassName = React.useMemo(() => (hasIcon ? wrapperClassNameGenerator({ gap: iconGap || 0.25 }) : ''), [hasIcon, iconGap]);
     return (jsxRuntime.jsx(Component, { ...rest, className: actualClassName, children: icon ? (jsxRuntime.jsxs("span", { className: wrapperClassName, children: [icon.prefix, children, icon.suffix] })) : (children) }));
 };
 const Text = React.memo(ActualText);