{"version":3,"file":"generateIcon.cjs","sources":["../../../src/components/Icon/generateIcon.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useTheme } from '../../hooks/useTheme'\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 theme = useTheme()\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 theme.textColor) {\n            return theme.textColor[colorName as keyof typeof theme.textColor]\n          }\n\n          return theme.color[colorName as keyof typeof theme.color] as string\n        }\n\n        return color\n      }, [color, theme])\n\n      const iconSize = size ? theme.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","memo","useTheme","useMemo","_jsx","_jsxs","VisuallyHiddenText"],"mappings":"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"}