@yahoo/uds-mobile 2.24.0-beta.3 → 2.24.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/components/Icon.cjs
CHANGED
|
@@ -56,7 +56,8 @@ const MulticolorIcon = (0, react.memo)(function MulticolorIcon({ name, size = DE
|
|
|
56
56
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_svg.SvgXml, {
|
|
57
57
|
xml: svgContent,
|
|
58
58
|
width: renderedSize,
|
|
59
|
-
height: renderedSize
|
|
59
|
+
height: renderedSize,
|
|
60
|
+
viewBox: `0 0 ${pixelSize} ${pixelSize}`
|
|
60
61
|
})
|
|
61
62
|
});
|
|
62
63
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.cts","names":[],"sources":["../../src/components/Icon.tsx"],"mappings":";;;;;;;;;;KAqCK,QAAA,GAAW,SAAA,GAAY,YAAA;AAAA,UAElB,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAJC;EAMX,IAAA,EAAM,QAAA;EANQ;EAQd,IAAA,GAAO,QAAA;EANC;EAQR,KAAA,GAAQ,UAAA;;EAER,OAAA,GAAU,WAAA;EARA;;;;;;EAeV,qBAAA;EAEA,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,UAAA,GAAa,UAAA;EAEb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,UAAA,GAAa,UAAA;EACb,aAAA,GAAgB,UAAA;EAChB,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,OAAA,GAAU,UAAA;EAEV,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,YAAA,GAAe,UAAA;EACf,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,MAAA,GAAS,UAAA;EAMD;EAJR,mBAAA;EAzD8B;EA2D9B,kBAAA;EA3D0B;EA6D1B,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Icon.d.cts","names":[],"sources":["../../src/components/Icon.tsx"],"mappings":";;;;;;;;;;KAqCK,QAAA,GAAW,SAAA,GAAY,YAAA;AAAA,UAElB,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAJC;EAMX,IAAA,EAAM,QAAA;EANQ;EAQd,IAAA,GAAO,QAAA;EANC;EAQR,KAAA,GAAQ,UAAA;;EAER,OAAA,GAAU,WAAA;EARA;;;;;;EAeV,qBAAA;EAEA,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,UAAA,GAAa,UAAA;EAEb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,UAAA,GAAa,UAAA;EACb,aAAA,GAAgB,UAAA;EAChB,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,OAAA,GAAU,UAAA;EAEV,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,YAAA,GAAe,UAAA;EACf,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,MAAA,GAAS,UAAA;EAMD;EAJR,mBAAA;EAzD8B;EA2D9B,kBAAA;EA3D0B;EA6D1B,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgPd,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA;AAAA,cAaG,SAAA;AAAA,cACA,mBAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","names":[],"sources":["../../src/components/Icon.tsx"],"mappings":";;;;;;;;;;KAqCK,QAAA,GAAW,SAAA,GAAY,YAAA;AAAA,UAElB,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAJC;EAMX,IAAA,EAAM,QAAA;EANQ;EAQd,IAAA,GAAO,QAAA;EANC;EAQR,KAAA,GAAQ,UAAA;;EAER,OAAA,GAAU,WAAA;EARA;;;;;;EAeV,qBAAA;EAEA,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,UAAA,GAAa,UAAA;EAEb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,UAAA,GAAa,UAAA;EACb,aAAA,GAAgB,UAAA;EAChB,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,OAAA,GAAU,UAAA;EAEV,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,YAAA,GAAe,UAAA;EACf,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,MAAA,GAAS,UAAA;EAMD;EAJR,mBAAA;EAzD8B;EA2D9B,kBAAA;EA3D0B;EA6D1B,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","names":[],"sources":["../../src/components/Icon.tsx"],"mappings":";;;;;;;;;;KAqCK,QAAA,GAAW,SAAA,GAAY,YAAA;AAAA,UAElB,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAJC;EAMX,IAAA,EAAM,QAAA;EANQ;EAQd,IAAA,GAAO,QAAA;EANC;EAQR,KAAA,GAAQ,UAAA;;EAER,OAAA,GAAU,WAAA;EARA;;;;;;EAeV,qBAAA;EAEA,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,UAAA,GAAa,UAAA;EAEb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,UAAA,GAAa,UAAA;EACb,aAAA,GAAgB,UAAA;EAChB,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,OAAA,GAAU,UAAA;EAEV,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,YAAA,GAAe,UAAA;EACf,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,MAAA,GAAS,UAAA;EAMD;EAJR,mBAAA;EAzD8B;EA2D9B,kBAAA;EA3D0B;EA6D1B,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgPd,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA;AAAA,cAaG,SAAA;AAAA,cACA,mBAAA"}
|
package/dist/components/Icon.js
CHANGED
|
@@ -54,7 +54,8 @@ const MulticolorIcon = memo(function MulticolorIcon({ name, size = DEFAULT_PROPS
|
|
|
54
54
|
children: /* @__PURE__ */ jsx(SvgXml, {
|
|
55
55
|
xml: svgContent,
|
|
56
56
|
width: renderedSize,
|
|
57
|
-
height: renderedSize
|
|
57
|
+
height: renderedSize,
|
|
58
|
+
viewBox: `0 0 ${pixelSize} ${pixelSize}`
|
|
58
59
|
})
|
|
59
60
|
});
|
|
60
61
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":["import type { GlyphName } from '@yahoo/uds-icons/glyphMap';\nimport { glyphMap, glyphNames } from '@yahoo/uds-icons/glyphMap';\nimport type { SvgGlyphKey, SvgGlyphName } from '@yahoo/uds-icons/svgMap';\nimport { svgGlyphNames, svgMap } from '@yahoo/uds-icons/svgMap';\nimport { ICON_SIZE_MAP } from '@yahoo/uds-icons/tokens';\nimport type { IconSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type {\n StyleProp,\n Text as RNText,\n TextProps as RNTextProps,\n TextStyle,\n ViewProps,\n} from 'react-native';\nimport { Text, View } from 'react-native';\nimport { SvgXml } from 'react-native-svg';\n// eslint-disable-next-line uds/no-use-unistyles\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport { useFontScale } from '../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../fontScaling/useMaxFontSizeMultiplier';\nimport { getSafeIconCell } from './Button/buttonTheme';\n\nconst DEFAULT_PROPS = {\n size: 'md',\n color: 'primary',\n variant: 'outline',\n flexShrink: '0',\n} as const;\n\n/* -------------------------------------------------------------------------- */\n/* Icon Props */\n/* -------------------------------------------------------------------------- */\n\ntype IconName = GlyphName | SvgGlyphName;\n\ninterface IconProps extends Omit<RNTextProps, 'style'> {\n /** Ref to the underlying Text element */\n ref?: Ref<RNText>;\n /** The icon name */\n name: IconName;\n /** Icon size */\n size?: IconSize;\n /** Icon color */\n color?: StyleProps['color'];\n /** Icon variant (outline, fill, multicolor) */\n variant?: IconVariant;\n /**\n * Caps how far the icon grows with the OS text-size setting. Applies to both\n * font glyphs and multicolor SVGs. Set null to remove the cap; override\n * app-wide via UDSFontScalingProvider.\n * @default 2\n */\n maxFontSizeMultiplier?: number | null;\n // Background\n backgroundColor?: StyleProps['backgroundColor'];\n // Border\n borderRadius?: StyleProps['borderRadius'];\n borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n borderColor?: StyleProps['borderColor'];\n borderStartColor?: StyleProps['borderStartColor'];\n borderEndColor?: StyleProps['borderEndColor'];\n borderTopColor?: StyleProps['borderTopColor'];\n borderBottomColor?: StyleProps['borderBottomColor'];\n borderWidth?: StyleProps['borderWidth'];\n borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n borderStartWidth?: StyleProps['borderStartWidth'];\n borderEndWidth?: StyleProps['borderEndWidth'];\n borderTopWidth?: StyleProps['borderTopWidth'];\n borderBottomWidth?: StyleProps['borderBottomWidth'];\n // Flex\n flexShrink?: StyleProps['flexShrink'];\n // Spacing\n spacingStart?: StyleProps['spacingStart'];\n spacingEnd?: StyleProps['spacingEnd'];\n spacingTop?: StyleProps['spacingTop'];\n spacingBottom?: StyleProps['spacingBottom'];\n spacingHorizontal?: StyleProps['spacingHorizontal'];\n spacingVertical?: StyleProps['spacingVertical'];\n spacing?: StyleProps['spacing'];\n // Offset\n offsetStart?: StyleProps['offsetStart'];\n offsetEnd?: StyleProps['offsetEnd'];\n offsetTop?: StyleProps['offsetTop'];\n offsetBottom?: StyleProps['offsetBottom'];\n offsetHorizontal?: StyleProps['offsetHorizontal'];\n offsetVertical?: StyleProps['offsetVertical'];\n offset?: StyleProps['offset'];\n /** Icon color override */\n dangerouslySetColor?: string;\n /** Icon font size override */\n dangerouslySetSize?: number;\n /** Optional style override */\n style?: StyleProp<TextStyle>;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Multicolor Icon */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Separate component for multicolor SVG icons.\n * Uses useUnistyles() for reactive theme access - isolated here so\n * glyph-based icons don't pay the hook overhead.\n */\nconst MulticolorIcon = memo(function MulticolorIcon({\n name,\n size = DEFAULT_PROPS.size,\n flexShrink = DEFAULT_PROPS.flexShrink,\n backgroundColor,\n dangerouslySetSize,\n maxFontSizeMultiplier,\n allowFontScaling = true,\n accessible,\n accessibilityElementsHidden,\n accessibilityHint,\n accessibilityLabel = name,\n accessibilityRole = 'image',\n accessibilityState,\n accessibilityValue,\n importantForAccessibility,\n testID,\n}: Omit<IconProps, 'variant'>) {\n // Reactive theme subscription - only multicolor icons need this\n const { rt } = useUnistyles();\n const colorScheme = rt.themeName === 'dark' ? 'dark' : 'light';\n\n const pixelSize = ICON_SIZE_MAP[size];\n const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n const fontScaleFactor = useFontScale(allowFontScaling ? resolvedMaxFontSizeMultiplier : 1);\n const renderedSize = Math.round((dangerouslySetSize ?? pixelSize) * fontScaleFactor);\n const svgKey = `${name}-${colorScheme}-${pixelSize}` as SvgGlyphKey;\n const svgContent = svgMap[svgKey];\n\n if (!svgContent) {\n console.warn(`Multicolor icon \"${svgKey}\" not found`);\n return null;\n }\n\n styles.useVariants({\n flexShrink,\n backgroundColor,\n });\n\n return (\n <View\n accessible={accessible}\n accessibilityElementsHidden={accessibilityElementsHidden}\n accessibilityHint={accessibilityHint}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole={accessibilityRole}\n accessibilityState={accessibilityState}\n accessibilityValue={accessibilityValue}\n importantForAccessibility={importantForAccessibility}\n testID={testID}\n style={styles.foundation as ViewProps['style']}\n >\n <SvgXml xml={svgContent} width={renderedSize} height={renderedSize} />\n </View>\n );\n});\n\nconst OutlineOrFillIcon = memo(function OutlineOrFillIcon({\n name,\n size = DEFAULT_PROPS.size,\n color = DEFAULT_PROPS.color,\n variant = DEFAULT_PROPS.variant,\n // Background\n backgroundColor,\n // Border\n borderRadius,\n borderTopStartRadius,\n borderTopEndRadius,\n borderBottomStartRadius,\n borderBottomEndRadius,\n borderColor,\n borderStartColor,\n borderEndColor,\n borderTopColor,\n borderBottomColor,\n borderWidth,\n borderVerticalWidth,\n borderHorizontalWidth,\n borderStartWidth,\n borderEndWidth,\n borderTopWidth,\n borderBottomWidth,\n // Flex\n flexShrink = '0',\n // Spacing\n spacingStart,\n spacingEnd,\n spacingTop,\n spacingBottom,\n spacingHorizontal,\n spacingVertical,\n spacing,\n // Offset\n offsetStart,\n offsetEnd,\n offsetTop,\n offsetBottom,\n offsetHorizontal,\n offsetVertical,\n offset,\n // Dangerously set props\n dangerouslySetColor,\n dangerouslySetSize,\n maxFontSizeMultiplier,\n style,\n ref,\n ...props\n}: Omit<IconProps, 'variant'> & { variant?: 'outline' | 'fill' }) {\n const pixelSize = ICON_SIZE_MAP[size];\n // Native scales fontSize and lineHeight together under the cap, so the\n // glyph cell grows proportionally; glyph selection stays at pixelSize.\n const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n // Glyph-based icons - no useUnistyles needed, styles.useVariants is reactive\n styles.useVariants({\n color,\n backgroundColor,\n // Border\n borderRadius,\n borderTopStartRadius,\n borderTopEndRadius,\n borderBottomStartRadius,\n borderBottomEndRadius,\n borderColor,\n borderStartColor,\n borderEndColor,\n borderTopColor,\n borderBottomColor,\n borderWidth,\n borderVerticalWidth,\n borderHorizontalWidth,\n borderStartWidth,\n borderEndWidth,\n borderTopWidth,\n borderBottomWidth,\n // Flex\n flexShrink,\n // Spacing\n spacingStart,\n spacingEnd,\n spacingTop,\n spacingBottom,\n spacingHorizontal,\n spacingVertical,\n spacing,\n // Offset\n offsetStart,\n offsetEnd,\n offsetTop,\n offsetBottom,\n offsetHorizontal,\n offsetVertical,\n offset,\n });\n const glyphName = `${name}-${variant}-${pixelSize}`;\n const glyph = (glyphMap as Record<string, string>)[glyphName];\n const textStyles: StyleProp<TextStyle> = useMemo(\n () => [\n {\n fontFamily: 'uds-icons',\n textAlign: 'center',\n textAlignVertical: 'center',\n fontSize: pixelSize,\n lineHeight: getSafeIconCell(pixelSize),\n },\n styles.foundation,\n dangerouslySetColor ? { color: dangerouslySetColor } : undefined,\n dangerouslySetSize\n ? {\n fontSize: dangerouslySetSize,\n lineHeight: getSafeIconCell(dangerouslySetSize),\n }\n : undefined,\n style,\n ],\n [dangerouslySetColor, dangerouslySetSize, style, styles.foundation, pixelSize],\n );\n\n return (\n <Text\n ref={ref}\n accessibilityRole=\"image\"\n accessibilityLabel={name}\n style={textStyles}\n maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n {...props}\n >\n {glyph}\n </Text>\n );\n});\n\n/**\n * **🎨 An icon component using UDS icon fonts and multicolor SVGs**\n *\n * @description\n * Renders icons from the UDS icon library. Supports multiple variants\n * (outline, fill, multicolor) and sizes.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Icon } from '@yahoo/uds-mobile/Icon';\n *\n * <Icon name=\"ChevronRight\" size=\"md\" color=\"primary\" />\n * <Icon name=\"Star\" variant=\"fill\" color=\"accent\" />\n * <Icon name=\"Yahoo\" variant=\"multicolor\" />\n * ```\n *\n * @usage\n * - Use name prop to specify the icon\n * - Use variant prop for outline/fill/multicolor\n * - Use size prop for icon size (xs, sm, md, lg, xl)\n *\n * @accessibility\n * - Sets `accessibilityRole=\"image\"` automatically\n * - Icon name is used as accessibility label\n * - For decorative icons, set `accessibilityElementsHidden`\n *\n * @see {@link IconButton} for clickable icons\n * @see {@link IconSlot} for flexible icon rendering in components\n */\nconst Icon = memo(function Icon({ variant, ...props }: IconProps) {\n // Delegate to MulticolorIcon for SVG-based icons (has its own useUnistyles)\n if (variant === 'multicolor') {\n return <MulticolorIcon {...props} />;\n }\n\n return <OutlineOrFillIcon variant={variant} {...props} />;\n});\n\nIcon.displayName = 'Icon';\n\nexport { Icon };\nexport type { IconName, IconProps };\nexport const iconNames = glyphNames;\nexport const multicolorIconNames = svgGlyphNames;\n"],"mappings":";;;;;;;;;;;;;;AA0BA,MAAM,gBAAgB;CACpB,MAAM;CACN,OAAO;CACP,SAAS;CACT,YAAY;CACb;;;;;;AAiFD,MAAM,iBAAiB,KAAK,SAAS,eAAe,EAClD,MACA,OAAO,cAAc,MACrB,aAAa,cAAc,YAC3B,iBACA,oBACA,uBACA,mBAAmB,MACnB,YACA,6BACA,mBACA,qBAAqB,MACrB,oBAAoB,SACpB,oBACA,oBACA,2BACA,UAC6B;CAE7B,MAAM,EAAE,OAAO,cAAc;CAC7B,MAAM,cAAc,GAAG,cAAc,SAAS,SAAS;CAEvD,MAAM,YAAY,cAAc;CAChC,MAAM,gCAAgC,yBAAyB,WAAW,sBAAsB;CAChG,MAAM,kBAAkB,aAAa,mBAAmB,gCAAgC,EAAE;CAC1F,MAAM,eAAe,KAAK,OAAO,sBAAsB,aAAa,gBAAgB;CACpF,MAAM,SAAS,GAAG,KAAK,GAAG,YAAY,GAAG;CACzC,MAAM,aAAa,OAAO;CAE1B,IAAI,CAAC,YAAY;EACf,QAAQ,KAAK,oBAAoB,OAAO,aAAa;EACrD,OAAO;;CAGT,OAAO,YAAY;EACjB;EACA;EACD,CAAC;CAEF,OACE,oBAAC,MAAD;EACc;EACiB;EACV;EACC;EACD;EACC;EACA;EACO;EACnB;EACR,OAAO,OAAO;YAEd,oBAAC,QAAD;GAAQ,KAAK;GAAY,OAAO;GAAc,QAAQ;GAAgB,CAAA;EACjE,CAAA;EAET;AAEF,MAAM,oBAAoB,KAAK,SAAS,kBAAkB,EACxD,MACA,OAAO,cAAc,MACrB,QAAQ,cAAc,OACtB,UAAU,cAAc,SAExB,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,aAAa,KAEb,cACA,YACA,YACA,eACA,mBACA,iBACA,SAEA,aACA,WACA,WACA,cACA,kBACA,gBACA,QAEA,qBACA,oBACA,uBACA,OACA,KACA,GAAG,SAC6D;CAChE,MAAM,YAAY,cAAc;CAGhC,MAAM,gCAAgC,yBAAyB,WAAW,sBAAsB;CAEhG,OAAO,YAAY;EACjB;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAS,SAAoC,GAD9B,KAAK,GAAG,QAAQ,GAAG;CAwBxC,OACE,oBAAC,MAAD;EACO;EACL,mBAAkB;EAClB,oBAAoB;EACpB,OA3BqC,cACjC;GACJ;IACE,YAAY;IACZ,WAAW;IACX,mBAAmB;IACnB,UAAU;IACV,YAAY,gBAAgB,UAAU;IACvC;GACD,OAAO;GACP,sBAAsB,EAAE,OAAO,qBAAqB,GAAG,KAAA;GACvD,qBACI;IACE,UAAU;IACV,YAAY,gBAAgB,mBAAmB;IAChD,GACD,KAAA;GACJ;GACD,EACD;GAAC;GAAqB;GAAoB;GAAO,OAAO;GAAY;GAAU,CAQ3D;EACjB,uBAAuB;EACvB,GAAI;YAEH;EACI,CAAA;EAET;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCF,MAAM,OAAO,KAAK,SAAS,KAAK,EAAE,SAAS,GAAG,SAAoB;CAEhE,IAAI,YAAY,cACd,OAAO,oBAAC,gBAAD,EAAgB,GAAI,OAAS,CAAA;CAGtC,OAAO,oBAAC,mBAAD;EAA4B;EAAS,GAAI;EAAS,CAAA;EACzD;AAEF,KAAK,cAAc;AAInB,MAAa,YAAY;AACzB,MAAa,sBAAsB"}
|
|
1
|
+
{"version":3,"file":"Icon.js","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":["import type { GlyphName } from '@yahoo/uds-icons/glyphMap';\nimport { glyphMap, glyphNames } from '@yahoo/uds-icons/glyphMap';\nimport type { SvgGlyphKey, SvgGlyphName } from '@yahoo/uds-icons/svgMap';\nimport { svgGlyphNames, svgMap } from '@yahoo/uds-icons/svgMap';\nimport { ICON_SIZE_MAP } from '@yahoo/uds-icons/tokens';\nimport type { IconSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type {\n StyleProp,\n Text as RNText,\n TextProps as RNTextProps,\n TextStyle,\n ViewProps,\n} from 'react-native';\nimport { Text, View } from 'react-native';\nimport { SvgXml } from 'react-native-svg';\n// eslint-disable-next-line uds/no-use-unistyles\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport { useFontScale } from '../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../fontScaling/useMaxFontSizeMultiplier';\nimport { getSafeIconCell } from './Button/buttonTheme';\n\nconst DEFAULT_PROPS = {\n size: 'md',\n color: 'primary',\n variant: 'outline',\n flexShrink: '0',\n} as const;\n\n/* -------------------------------------------------------------------------- */\n/* Icon Props */\n/* -------------------------------------------------------------------------- */\n\ntype IconName = GlyphName | SvgGlyphName;\n\ninterface IconProps extends Omit<RNTextProps, 'style'> {\n /** Ref to the underlying Text element */\n ref?: Ref<RNText>;\n /** The icon name */\n name: IconName;\n /** Icon size */\n size?: IconSize;\n /** Icon color */\n color?: StyleProps['color'];\n /** Icon variant (outline, fill, multicolor) */\n variant?: IconVariant;\n /**\n * Caps how far the icon grows with the OS text-size setting. Applies to both\n * font glyphs and multicolor SVGs. Set null to remove the cap; override\n * app-wide via UDSFontScalingProvider.\n * @default 2\n */\n maxFontSizeMultiplier?: number | null;\n // Background\n backgroundColor?: StyleProps['backgroundColor'];\n // Border\n borderRadius?: StyleProps['borderRadius'];\n borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n borderColor?: StyleProps['borderColor'];\n borderStartColor?: StyleProps['borderStartColor'];\n borderEndColor?: StyleProps['borderEndColor'];\n borderTopColor?: StyleProps['borderTopColor'];\n borderBottomColor?: StyleProps['borderBottomColor'];\n borderWidth?: StyleProps['borderWidth'];\n borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n borderStartWidth?: StyleProps['borderStartWidth'];\n borderEndWidth?: StyleProps['borderEndWidth'];\n borderTopWidth?: StyleProps['borderTopWidth'];\n borderBottomWidth?: StyleProps['borderBottomWidth'];\n // Flex\n flexShrink?: StyleProps['flexShrink'];\n // Spacing\n spacingStart?: StyleProps['spacingStart'];\n spacingEnd?: StyleProps['spacingEnd'];\n spacingTop?: StyleProps['spacingTop'];\n spacingBottom?: StyleProps['spacingBottom'];\n spacingHorizontal?: StyleProps['spacingHorizontal'];\n spacingVertical?: StyleProps['spacingVertical'];\n spacing?: StyleProps['spacing'];\n // Offset\n offsetStart?: StyleProps['offsetStart'];\n offsetEnd?: StyleProps['offsetEnd'];\n offsetTop?: StyleProps['offsetTop'];\n offsetBottom?: StyleProps['offsetBottom'];\n offsetHorizontal?: StyleProps['offsetHorizontal'];\n offsetVertical?: StyleProps['offsetVertical'];\n offset?: StyleProps['offset'];\n /** Icon color override */\n dangerouslySetColor?: string;\n /** Icon font size override */\n dangerouslySetSize?: number;\n /** Optional style override */\n style?: StyleProp<TextStyle>;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Multicolor Icon */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Separate component for multicolor SVG icons.\n * Uses useUnistyles() for reactive theme access - isolated here so\n * glyph-based icons don't pay the hook overhead.\n */\nconst MulticolorIcon = memo(function MulticolorIcon({\n name,\n size = DEFAULT_PROPS.size,\n flexShrink = DEFAULT_PROPS.flexShrink,\n backgroundColor,\n dangerouslySetSize,\n maxFontSizeMultiplier,\n allowFontScaling = true,\n accessible,\n accessibilityElementsHidden,\n accessibilityHint,\n accessibilityLabel = name,\n accessibilityRole = 'image',\n accessibilityState,\n accessibilityValue,\n importantForAccessibility,\n testID,\n}: Omit<IconProps, 'variant'>) {\n // Reactive theme subscription - only multicolor icons need this\n const { rt } = useUnistyles();\n const colorScheme = rt.themeName === 'dark' ? 'dark' : 'light';\n\n const pixelSize = ICON_SIZE_MAP[size];\n const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n const fontScaleFactor = useFontScale(allowFontScaling ? resolvedMaxFontSizeMultiplier : 1);\n const renderedSize = Math.round((dangerouslySetSize ?? pixelSize) * fontScaleFactor);\n const svgKey = `${name}-${colorScheme}-${pixelSize}` as SvgGlyphKey;\n const svgContent = svgMap[svgKey];\n\n if (!svgContent) {\n console.warn(`Multicolor icon \"${svgKey}\" not found`);\n return null;\n }\n\n styles.useVariants({\n flexShrink,\n backgroundColor,\n });\n\n return (\n <View\n accessible={accessible}\n accessibilityElementsHidden={accessibilityElementsHidden}\n accessibilityHint={accessibilityHint}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole={accessibilityRole}\n accessibilityState={accessibilityState}\n accessibilityValue={accessibilityValue}\n importantForAccessibility={importantForAccessibility}\n testID={testID}\n style={styles.foundation as ViewProps['style']}\n >\n <SvgXml\n xml={svgContent}\n width={renderedSize}\n height={renderedSize}\n viewBox={`0 0 ${pixelSize} ${pixelSize}`}\n />\n </View>\n );\n});\n\nconst OutlineOrFillIcon = memo(function OutlineOrFillIcon({\n name,\n size = DEFAULT_PROPS.size,\n color = DEFAULT_PROPS.color,\n variant = DEFAULT_PROPS.variant,\n // Background\n backgroundColor,\n // Border\n borderRadius,\n borderTopStartRadius,\n borderTopEndRadius,\n borderBottomStartRadius,\n borderBottomEndRadius,\n borderColor,\n borderStartColor,\n borderEndColor,\n borderTopColor,\n borderBottomColor,\n borderWidth,\n borderVerticalWidth,\n borderHorizontalWidth,\n borderStartWidth,\n borderEndWidth,\n borderTopWidth,\n borderBottomWidth,\n // Flex\n flexShrink = '0',\n // Spacing\n spacingStart,\n spacingEnd,\n spacingTop,\n spacingBottom,\n spacingHorizontal,\n spacingVertical,\n spacing,\n // Offset\n offsetStart,\n offsetEnd,\n offsetTop,\n offsetBottom,\n offsetHorizontal,\n offsetVertical,\n offset,\n // Dangerously set props\n dangerouslySetColor,\n dangerouslySetSize,\n maxFontSizeMultiplier,\n style,\n ref,\n ...props\n}: Omit<IconProps, 'variant'> & { variant?: 'outline' | 'fill' }) {\n const pixelSize = ICON_SIZE_MAP[size];\n // Native scales fontSize and lineHeight together under the cap, so the\n // glyph cell grows proportionally; glyph selection stays at pixelSize.\n const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n // Glyph-based icons - no useUnistyles needed, styles.useVariants is reactive\n styles.useVariants({\n color,\n backgroundColor,\n // Border\n borderRadius,\n borderTopStartRadius,\n borderTopEndRadius,\n borderBottomStartRadius,\n borderBottomEndRadius,\n borderColor,\n borderStartColor,\n borderEndColor,\n borderTopColor,\n borderBottomColor,\n borderWidth,\n borderVerticalWidth,\n borderHorizontalWidth,\n borderStartWidth,\n borderEndWidth,\n borderTopWidth,\n borderBottomWidth,\n // Flex\n flexShrink,\n // Spacing\n spacingStart,\n spacingEnd,\n spacingTop,\n spacingBottom,\n spacingHorizontal,\n spacingVertical,\n spacing,\n // Offset\n offsetStart,\n offsetEnd,\n offsetTop,\n offsetBottom,\n offsetHorizontal,\n offsetVertical,\n offset,\n });\n const glyphName = `${name}-${variant}-${pixelSize}`;\n const glyph = (glyphMap as Record<string, string>)[glyphName];\n const textStyles: StyleProp<TextStyle> = useMemo(\n () => [\n {\n fontFamily: 'uds-icons',\n textAlign: 'center',\n textAlignVertical: 'center',\n fontSize: pixelSize,\n lineHeight: getSafeIconCell(pixelSize),\n },\n styles.foundation,\n dangerouslySetColor ? { color: dangerouslySetColor } : undefined,\n dangerouslySetSize\n ? {\n fontSize: dangerouslySetSize,\n lineHeight: getSafeIconCell(dangerouslySetSize),\n }\n : undefined,\n style,\n ],\n [dangerouslySetColor, dangerouslySetSize, style, styles.foundation, pixelSize],\n );\n\n return (\n <Text\n ref={ref}\n accessibilityRole=\"image\"\n accessibilityLabel={name}\n style={textStyles}\n maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n {...props}\n >\n {glyph}\n </Text>\n );\n});\n\n/**\n * **🎨 An icon component using UDS icon fonts and multicolor SVGs**\n *\n * @description\n * Renders icons from the UDS icon library. Supports multiple variants\n * (outline, fill, multicolor) and sizes.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Icon } from '@yahoo/uds-mobile/Icon';\n *\n * <Icon name=\"ChevronRight\" size=\"md\" color=\"primary\" />\n * <Icon name=\"Star\" variant=\"fill\" color=\"accent\" />\n * <Icon name=\"Yahoo\" variant=\"multicolor\" />\n * ```\n *\n * @usage\n * - Use name prop to specify the icon\n * - Use variant prop for outline/fill/multicolor\n * - Use size prop for icon size (xs, sm, md, lg, xl)\n *\n * @accessibility\n * - Sets `accessibilityRole=\"image\"` automatically\n * - Icon name is used as accessibility label\n * - For decorative icons, set `accessibilityElementsHidden`\n *\n * @see {@link IconButton} for clickable icons\n * @see {@link IconSlot} for flexible icon rendering in components\n */\nconst Icon = memo(function Icon({ variant, ...props }: IconProps) {\n // Delegate to MulticolorIcon for SVG-based icons (has its own useUnistyles)\n if (variant === 'multicolor') {\n return <MulticolorIcon {...props} />;\n }\n\n return <OutlineOrFillIcon variant={variant} {...props} />;\n});\n\nIcon.displayName = 'Icon';\n\nexport { Icon };\nexport type { IconName, IconProps };\nexport const iconNames = glyphNames;\nexport const multicolorIconNames = svgGlyphNames;\n"],"mappings":"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"}
|