@yahoo/uds-mobile 2.24.0-beta.6 → 2.24.0-beta.8
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/README.md +7 -1
- package/dist/components/Avatar/AvatarIcon.cjs +1 -1
- package/dist/components/Avatar/AvatarIcon.js +1 -1
- package/dist/components/Avatar/AvatarIcon.js.map +1 -1
- package/dist/components/Avatar/AvatarImage.cjs +1 -1
- package/dist/components/Avatar/AvatarImage.js +1 -1
- package/dist/components/Avatar/AvatarImage.js.map +1 -1
- package/dist/components/Avatar/AvatarText.cjs +1 -1
- package/dist/components/Avatar/AvatarText.js +1 -1
- package/dist/components/Avatar/AvatarText.js.map +1 -1
- package/dist/components/Avatar/useAvatarFontScale.d.cts +1 -1
- package/dist/components/Avatar/useAvatarFontScale.d.ts +1 -1
- package/dist/components/Avatar/useAvatarFontScale.js.map +1 -1
- package/dist/components/Button/buttonTheme.cjs +6 -1
- package/dist/components/Button/buttonTheme.d.cts +3 -1
- package/dist/components/Button/buttonTheme.d.cts.map +1 -1
- package/dist/components/Button/buttonTheme.d.ts +3 -1
- package/dist/components/Button/buttonTheme.d.ts.map +1 -1
- package/dist/components/Button/buttonTheme.js +6 -2
- package/dist/components/Button/buttonTheme.js.map +1 -1
- package/dist/components/Button.cjs +1 -1
- package/dist/components/Button.js +1 -1
- package/dist/components/Button.js.map +1 -1
- package/dist/components/Checkbox.cjs +11 -5
- package/dist/components/Checkbox.d.cts.map +1 -1
- package/dist/components/Checkbox.d.ts.map +1 -1
- package/dist/components/Checkbox.js +11 -5
- package/dist/components/Checkbox.js.map +1 -1
- package/dist/components/Chip/ChipBase.cjs +1 -1
- package/dist/components/Chip/ChipBase.js +1 -1
- package/dist/components/Chip/ChipBase.js.map +1 -1
- package/dist/components/Icon.cjs +2 -2
- package/dist/components/Icon.js +2 -2
- package/dist/components/Icon.js.map +1 -1
- package/dist/components/IconButton.cjs +17 -6
- package/dist/components/IconButton.d.cts +6 -0
- package/dist/components/IconButton.d.cts.map +1 -1
- package/dist/components/IconButton.d.ts +6 -0
- package/dist/components/IconButton.d.ts.map +1 -1
- package/dist/components/IconButton.js +18 -7
- package/dist/components/IconButton.js.map +1 -1
- package/dist/components/Input.cjs +1 -1
- package/dist/components/Input.js +1 -1
- package/dist/components/Input.js.map +1 -1
- package/dist/components/InputHelpText.cjs +1 -1
- package/dist/components/InputHelpText.js +1 -1
- package/dist/components/InputHelpText.js.map +1 -1
- package/dist/components/Link.cjs +3 -1
- package/dist/components/Link.d.cts.map +1 -1
- package/dist/components/Link.d.ts.map +1 -1
- package/dist/components/Link.js +3 -1
- package/dist/components/Link.js.map +1 -1
- package/dist/components/Pagination/Pagination.cjs +1 -1
- package/dist/components/Pagination/Pagination.js +1 -1
- package/dist/components/Pagination/Pagination.js.map +1 -1
- package/dist/components/Pagination/paginationContext.d.cts +2 -2
- package/dist/components/Pagination/paginationContext.d.ts +2 -2
- package/dist/components/Pagination/paginationContext.js.map +1 -1
- package/dist/components/Radio/Radio.cjs +1 -1
- package/dist/components/Radio/Radio.js +1 -1
- package/dist/components/Radio/Radio.js.map +1 -1
- package/dist/components/Select/Select.cjs +17 -5
- package/dist/components/Select/Select.js +17 -5
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Select/SelectContent.cjs +31 -23
- package/dist/components/Select/SelectContent.d.cts.map +1 -1
- package/dist/components/Select/SelectContent.d.ts.map +1 -1
- package/dist/components/Select/SelectContent.js +32 -24
- package/dist/components/Select/SelectContent.js.map +1 -1
- package/dist/components/Select/SelectItem.cjs +3 -1
- package/dist/components/Select/SelectItem.d.cts.map +1 -1
- package/dist/components/Select/SelectItem.d.ts.map +1 -1
- package/dist/components/Select/SelectItem.js +3 -1
- package/dist/components/Select/SelectItem.js.map +1 -1
- package/dist/components/Select/SelectTrigger.cjs +3 -1
- package/dist/components/Select/SelectTrigger.d.cts.map +1 -1
- package/dist/components/Select/SelectTrigger.d.ts.map +1 -1
- package/dist/components/Select/SelectTrigger.js +3 -1
- package/dist/components/Select/SelectTrigger.js.map +1 -1
- package/dist/components/Select/types.d.cts +1 -1
- package/dist/components/Select/types.d.ts +1 -1
- package/dist/components/Switch.cjs +18 -3
- package/dist/components/Switch.d.cts.map +1 -1
- package/dist/components/Switch.d.ts.map +1 -1
- package/dist/components/Switch.js +18 -3
- package/dist/components/Switch.js.map +1 -1
- package/dist/components/Tabs/Tab.cjs +1 -1
- package/dist/components/Tabs/Tab.js +1 -1
- package/dist/components/Tabs/Tab.js.map +1 -1
- package/dist/components/Text.cjs +2 -1
- package/dist/components/Text.d.cts.map +1 -1
- package/dist/components/Text.d.ts.map +1 -1
- package/dist/components/Text.js +2 -1
- package/dist/components/Text.js.map +1 -1
- package/dist/fontScaling/FontScalingContext.cjs +8 -2
- package/dist/fontScaling/FontScalingContext.d.cts +4 -2
- package/dist/fontScaling/FontScalingContext.d.cts.map +1 -1
- package/dist/fontScaling/FontScalingContext.d.ts +4 -2
- package/dist/fontScaling/FontScalingContext.d.ts.map +1 -1
- package/dist/fontScaling/FontScalingContext.js +9 -4
- package/dist/fontScaling/FontScalingContext.js.map +1 -1
- package/dist/fontScaling/constants.cjs +4 -3
- package/dist/fontScaling/constants.d.cts +4 -3
- package/dist/fontScaling/constants.d.cts.map +1 -1
- package/dist/fontScaling/constants.d.ts +4 -3
- package/dist/fontScaling/constants.d.ts.map +1 -1
- package/dist/fontScaling/constants.js +4 -3
- package/dist/fontScaling/constants.js.map +1 -1
- package/dist/fontScaling/types.d.cts +8 -6
- package/dist/fontScaling/types.d.cts.map +1 -1
- package/dist/fontScaling/types.d.ts +8 -6
- package/dist/fontScaling/types.d.ts.map +1 -1
- package/dist/fontScaling/useFontScale.cjs +4 -0
- package/dist/fontScaling/useFontScale.d.cts +1 -0
- package/dist/fontScaling/useFontScale.d.cts.map +1 -1
- package/dist/fontScaling/useFontScale.d.ts +1 -0
- package/dist/fontScaling/useFontScale.d.ts.map +1 -1
- package/dist/fontScaling/useFontScale.js +4 -0
- package/dist/fontScaling/useFontScale.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectContent.js","names":["RNScrollView"],"sources":["../../../src/components/Select/SelectContent.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';\nimport { ScrollView as RNScrollView, StyleSheet, View } from 'react-native';\nimport Animated, {\n Easing,\n useAnimatedStyle,\n useDerivedValue,\n withTiming,\n} from 'react-native-reanimated';\n\nimport { selectContentStyles } from '../../../generated/styles';\nimport { useAnchoredPosition } from '../internal/Overlay';\nimport { PopoverPortalLayer } from '../Popover/PopoverPortalLayer';\nimport { VStack } from '../VStack';\nimport {
|
|
1
|
+
{"version":3,"file":"SelectContent.js","names":["RNScrollView"],"sources":["../../../src/components/Select/SelectContent.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';\nimport { ScrollView as RNScrollView, StyleSheet, View } from 'react-native';\nimport Animated, {\n Easing,\n useAnimatedStyle,\n useDerivedValue,\n withTiming,\n} from 'react-native-reanimated';\n\nimport { selectContentStyles } from '../../../generated/styles';\nimport { useAnchoredPosition } from '../internal/Overlay';\nimport { PopoverPortalLayer } from '../Popover/PopoverPortalLayer';\nimport { VStack } from '../VStack';\nimport {\n SelectContext,\n SelectFieldContext,\n useSelectContext,\n useSelectFieldContext,\n} from './selectContext';\nimport type { SelectContentSize, SelectContentVariant } from './types';\n\nconst DEFAULT_OFFSET = 4;\nconst DEFAULT_MAX_HEIGHT = 240;\nconst ANIMATION_DURATION = 200;\n\nconst OFFSCREEN_REGISTRY_STYLE = StyleSheet.create({\n registry: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: 1,\n height: 1,\n opacity: 0,\n overflow: 'hidden',\n zIndex: -1,\n },\n});\n\ninterface SelectContentProps {\n children?: ReactNode;\n size?: SelectContentSize;\n variant?: SelectContentVariant;\n /** When true, the panel stays open when the user taps outside. */\n keepOpenOnInteractOutside?: boolean;\n /** Maximum height of the options list in pixels. @default 240 */\n maxHeight?: number;\n /** Distance between the trigger and the content panel. @default 4 */\n gutter?: number;\n /** When true, the content panel matches the trigger width. @default true */\n sameWidth?: boolean;\n style?: StyleProp<ViewStyle>;\n testID?: string;\n}\n\n/**\n * **▾ Select content panel**\n *\n * Floating listbox container for {@link SelectItem} options.\n */\nconst SelectContent = memo(function SelectContent({\n children,\n size: _size = 'default',\n variant: _variant = 'default',\n keepOpenOnInteractOutside = false,\n maxHeight = DEFAULT_MAX_HEIGHT,\n gutter = DEFAULT_OFFSET,\n sameWidth = true,\n style,\n testID,\n}: SelectContentProps) {\n const selectContext = useSelectContext();\n const fieldContext = useSelectFieldContext();\n const { open, setOpen, triggerRect, reduceMotion } = selectContext;\n const [contentSize, setContentSize] = useState({ width: 0, height: 0 });\n const [shouldRender, setShouldRender] = useState(open);\n\n const dismiss = useCallback(() => {\n if (keepOpenOnInteractOutside) {\n return;\n }\n\n setOpen(false);\n }, [keepOpenOnInteractOutside, setOpen]);\n\n const {\n contentStyle,\n anchorReady,\n maxWidth: positionedMaxWidth,\n } = useAnchoredPosition({\n triggerRect,\n contentSize,\n placement: 'bottom',\n offset: gutter,\n sameWidth,\n width: sameWidth ? 'trigger' : 'content',\n avoidCollisions: true,\n collisionPadding: 12,\n });\n\n const isPositionedOpen = open && anchorReady && contentSize.height > 0;\n const progress = useDerivedValue(\n () =>\n withTiming(isPositionedOpen ? 1 : 0, {\n duration: reduceMotion ? 0 : ANIMATION_DURATION,\n easing: Easing.out(Easing.ease),\n }),\n [isPositionedOpen, reduceMotion],\n );\n\n const animatedStyle = useAnimatedStyle(() => ({\n opacity: progress.value,\n transform: [{ scale: 0.97 + progress.value * 0.03 }, { translateY: (1 - progress.value) * 8 }],\n }));\n\n const handleLayout = useCallback((event: LayoutChangeEvent) => {\n const { width, height } = event.nativeEvent.layout;\n setContentSize({ width, height });\n }, []);\n\n useEffect(() => {\n if (open) {\n setShouldRender(true);\n return;\n }\n\n if (reduceMotion) {\n setShouldRender(false);\n setContentSize({ width: 0, height: 0 });\n return;\n }\n\n const timeout = setTimeout(() => {\n setShouldRender(false);\n setContentSize({ width: 0, height: 0 });\n }, ANIMATION_DURATION);\n\n return () => clearTimeout(timeout);\n }, [open, reduceMotion]);\n\n selectContentStyles.useVariants({});\n\n const panelStyle = useMemo(\n () =>\n StyleSheet.flatten([\n selectContentStyles.root,\n {\n maxHeight,\n maxWidth: positionedMaxWidth > 0 ? positionedMaxWidth : undefined,\n overflow: 'hidden',\n zIndex: 1,\n },\n style,\n ]) as ViewStyle,\n [maxHeight, positionedMaxWidth, selectContentStyles.root, style],\n );\n\n return (\n <>\n {!open ? (\n <View\n accessibilityElementsHidden\n importantForAccessibility=\"no-hide-descendants\"\n pointerEvents=\"none\"\n style={OFFSCREEN_REGISTRY_STYLE.registry}\n >\n {children}\n </View>\n ) : null}\n\n {open && shouldRender ? (\n <PopoverPortalLayer\n open={open}\n dismissible={!keepOpenOnInteractOutside}\n onDismiss={dismiss}\n >\n {() => (\n <SelectContext.Provider value={selectContext}>\n <SelectFieldContext.Provider value={fieldContext}>\n <Animated.View\n testID={testID}\n style={[contentStyle, animatedStyle, { overflow: 'visible', zIndex: 1000 }]}\n onLayout={handleLayout}\n accessibilityRole=\"menu\"\n >\n <View style={panelStyle}>\n <RNScrollView\n keyboardShouldPersistTaps=\"handled\"\n nestedScrollEnabled\n style={{ maxHeight }}\n >\n <VStack alignItems=\"stretch\" justifyContent=\"flex-start\">\n {children}\n </VStack>\n </RNScrollView>\n </View>\n </Animated.View>\n </SelectFieldContext.Provider>\n </SelectContext.Provider>\n )}\n </PopoverPortalLayer>\n ) : null}\n </>\n );\n});\n\nSelectContent.displayName = 'SelectContent';\n\nexport { SelectContent, type SelectContentProps };\n"],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
|
|
4
|
+
const require_fontScaling_FontScalingContext = require("../../fontScaling/FontScalingContext.cjs");
|
|
4
5
|
const require_components_HStack = require("../HStack.cjs");
|
|
5
6
|
const require_fontScaling_useFontScale = require("../../fontScaling/useFontScale.cjs");
|
|
6
7
|
const require_components_IconSlot = require("../IconSlot.cjs");
|
|
@@ -19,6 +20,7 @@ react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
|
|
|
19
20
|
* A single selectable option inside {@link SelectContent}.
|
|
20
21
|
*/
|
|
21
22
|
const SelectItem = (0, react.memo)(function SelectItem({ value, disabled, children, style, testID }) {
|
|
23
|
+
const fontScalingEnabled = require_fontScaling_FontScalingContext.useFontScalingEnabled();
|
|
22
24
|
const { value: selectedValue, setValue, setOpen, open, registerItem, unregisterItem, highlightedValue, setHighlightedValue, reduceMotion, field } = require_components_Select_selectContext.useSelectContext();
|
|
23
25
|
const { maxFontSizeMultiplier } = field;
|
|
24
26
|
const { theme } = (0, react_native_unistyles.useUnistyles)();
|
|
@@ -128,7 +130,7 @@ const SelectItem = (0, react.memo)(function SelectItem({ value, disabled, childr
|
|
|
128
130
|
style: textStyle,
|
|
129
131
|
numberOfLines: 1,
|
|
130
132
|
maxFontSizeMultiplier,
|
|
131
|
-
dynamicTypeRamp: "body",
|
|
133
|
+
dynamicTypeRamp: fontScalingEnabled ? "body" : void 0,
|
|
132
134
|
children
|
|
133
135
|
})
|
|
134
136
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectItem.d.cts","names":[],"sources":["../../../src/components/Select/SelectItem.tsx"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"SelectItem.d.cts","names":[],"sources":["../../../src/components/Select/SelectItem.tsx"],"mappings":";;;;;;UAuBU,eAAA;;EAER,KAAA;EAFQ;EAIR,QAAA;EACA,QAAA,GAAW,SAAA;EACX,KAAA,GAAQ,SAAA,CAAU,SAAA;EAClB,MAAA;AAAA;;;;;;cAQI,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectItem.d.ts","names":[],"sources":["../../../src/components/Select/SelectItem.tsx"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"SelectItem.d.ts","names":[],"sources":["../../../src/components/Select/SelectItem.tsx"],"mappings":";;;;;;UAuBU,eAAA;;EAER,KAAA;EAFQ;EAIR,QAAA;EACA,QAAA,GAAW,SAAA;EACX,KAAA,GAAQ,SAAA,CAAU,SAAA;EAClB,MAAA;AAAA;;;;;;cAQI,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
|
+
import { useFontScalingEnabled } from "../../fontScaling/FontScalingContext.js";
|
|
2
3
|
import { HStack } from "../HStack.js";
|
|
3
4
|
import { useFontScale } from "../../fontScaling/useFontScale.js";
|
|
4
5
|
import { IconSlot } from "../IconSlot.js";
|
|
@@ -16,6 +17,7 @@ import Animated, { Easing, useAnimatedStyle, useDerivedValue, withTiming } from
|
|
|
16
17
|
* A single selectable option inside {@link SelectContent}.
|
|
17
18
|
*/
|
|
18
19
|
const SelectItem = memo(function SelectItem({ value, disabled, children, style, testID }) {
|
|
20
|
+
const fontScalingEnabled = useFontScalingEnabled();
|
|
19
21
|
const { value: selectedValue, setValue, setOpen, open, registerItem, unregisterItem, highlightedValue, setHighlightedValue, reduceMotion, field } = useSelectContext();
|
|
20
22
|
const { maxFontSizeMultiplier } = field;
|
|
21
23
|
const { theme } = useUnistyles();
|
|
@@ -125,7 +127,7 @@ const SelectItem = memo(function SelectItem({ value, disabled, children, style,
|
|
|
125
127
|
style: textStyle,
|
|
126
128
|
numberOfLines: 1,
|
|
127
129
|
maxFontSizeMultiplier,
|
|
128
|
-
dynamicTypeRamp: "body",
|
|
130
|
+
dynamicTypeRamp: fontScalingEnabled ? "body" : void 0,
|
|
129
131
|
children
|
|
130
132
|
})
|
|
131
133
|
}), /* @__PURE__ */ jsx(Animated.View, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectItem.js","names":["RNPressable","RNText"],"sources":["../../../src/components/Select/SelectItem.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native';\nimport { Pressable as RNPressable, Text as RNText } from 'react-native';\nimport Animated, {\n Easing,\n useAnimatedStyle,\n useDerivedValue,\n withTiming,\n} from 'react-native-reanimated';\n// eslint-disable-next-line uds/no-use-unistyles -- selectItem selected state uses theme paths\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport { useFontScale } from '../../fontScaling/useFontScale';\nimport { HStack } from '../HStack';\nimport { IconSlot } from '../IconSlot';\nimport { useSelectContext } from './selectContext';\nimport {\n getMergedSelectItemLayerStyle,\n resolveSelectItemInteractionState,\n} from './selectItemTheme';\n\ninterface SelectItemProps {\n /** Value submitted when this option is selected. */\n value: string;\n /** Whether this option is disabled. */\n disabled?: boolean;\n children?: ReactNode;\n style?: StyleProp<ViewStyle>;\n testID?: string;\n}\n\n/**\n * **▾ Select item**\n *\n * A single selectable option inside {@link SelectContent}.\n */\nconst SelectItem = memo(function SelectItem({\n value,\n disabled,\n children,\n style,\n testID,\n}: SelectItemProps) {\n const {\n value: selectedValue,\n setValue,\n setOpen,\n open,\n registerItem,\n unregisterItem,\n highlightedValue,\n setHighlightedValue,\n reduceMotion,\n field,\n } = useSelectContext();\n const { maxFontSizeMultiplier } = field;\n const { theme } = useUnistyles();\n const [isPressed, setIsPressed] = useState(false);\n\n const label = useMemo(() => {\n if (typeof children === 'string' || typeof children === 'number') {\n return String(children);\n }\n\n return value;\n }, [children, value]);\n\n useEffect(() => {\n registerItem(value, label);\n return () => unregisterItem(value);\n }, [label, registerItem, unregisterItem, value]);\n\n const isSelected = selectedValue === value;\n const isHighlighted = highlightedValue === value;\n const interaction = resolveSelectItemInteractionState({\n isPressed,\n isHighlighted,\n });\n\n const textStyle = useMemo(\n () => getMergedSelectItemLayerStyle(theme, 'text', interaction, isSelected) as TextStyle,\n [interaction, isSelected, theme],\n );\n const fontScaleFactor = useFontScale(\n maxFontSizeMultiplier,\n (typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : undefined) ??\n (typeof textStyle.fontSize === 'number' ? textStyle.fontSize : undefined),\n );\n\n const rootStyle = useMemo(() => {\n const configuredRoot = getMergedSelectItemLayerStyle(\n theme,\n 'root',\n interaction,\n isSelected,\n ) as ViewStyle;\n return [\n configuredRoot,\n fontScaleFactor !== 1 && typeof configuredRoot.paddingVertical === 'number'\n ? { paddingVertical: Math.round(configuredRoot.paddingVertical * fontScaleFactor) }\n : undefined,\n {\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n justifyContent: 'space-between' as const,\n width: '100%' as const,\n opacity: disabled ? 0.5 : 1,\n },\n style,\n ] as StyleProp<ViewStyle>;\n }, [disabled, fontScaleFactor, interaction, isSelected, style, theme]);\n\n const endIconStyle = useMemo(\n () => getMergedSelectItemLayerStyle(theme, 'endIcon', interaction, isSelected),\n [interaction, isSelected, theme],\n );\n\n const checkScale = useDerivedValue(\n () =>\n withTiming(isSelected ? 1 : 0, {\n duration: reduceMotion ? 0 : 120,\n easing: Easing.out(Easing.ease),\n }),\n [isSelected, reduceMotion],\n );\n\n const checkAnimatedStyle = useAnimatedStyle(() => ({\n opacity: checkScale.value,\n transform: [{ scale: 0.7 + checkScale.value * 0.3 }],\n }));\n\n const handlePress = useCallback(() => {\n if (disabled) {\n return;\n }\n\n setValue(value);\n setOpen(false);\n setHighlightedValue(null);\n }, [disabled, setHighlightedValue, setOpen, setValue, value]);\n\n const handlePressIn = useCallback(() => {\n if (disabled) {\n return;\n }\n\n setIsPressed(true);\n setHighlightedValue(value);\n }, [disabled, setHighlightedValue, value]);\n\n const handlePressOut = useCallback(() => {\n setIsPressed(false);\n }, []);\n\n if (!open) {\n return null;\n }\n\n return (\n <RNPressable\n testID={testID}\n disabled={disabled}\n onPress={handlePress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n style={rootStyle}\n accessibilityRole=\"menuitem\"\n accessibilityState={{ disabled: !!disabled, selected: isSelected }}\n >\n <HStack columnGap=\"2\" alignItems=\"center\" justifyContent=\"flex-start\" style={{ flex: 1 }}>\n <RNText\n style={textStyle}\n numberOfLines={1}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n dynamicTypeRamp
|
|
1
|
+
{"version":3,"file":"SelectItem.js","names":["RNPressable","RNText"],"sources":["../../../src/components/Select/SelectItem.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native';\nimport { Pressable as RNPressable, Text as RNText } from 'react-native';\nimport Animated, {\n Easing,\n useAnimatedStyle,\n useDerivedValue,\n withTiming,\n} from 'react-native-reanimated';\n// eslint-disable-next-line uds/no-use-unistyles -- selectItem selected state uses theme paths\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport { useFontScalingEnabled } from '../../fontScaling/FontScalingContext';\nimport { useFontScale } from '../../fontScaling/useFontScale';\nimport { HStack } from '../HStack';\nimport { IconSlot } from '../IconSlot';\nimport { useSelectContext } from './selectContext';\nimport {\n getMergedSelectItemLayerStyle,\n resolveSelectItemInteractionState,\n} from './selectItemTheme';\n\ninterface SelectItemProps {\n /** Value submitted when this option is selected. */\n value: string;\n /** Whether this option is disabled. */\n disabled?: boolean;\n children?: ReactNode;\n style?: StyleProp<ViewStyle>;\n testID?: string;\n}\n\n/**\n * **▾ Select item**\n *\n * A single selectable option inside {@link SelectContent}.\n */\nconst SelectItem = memo(function SelectItem({\n value,\n disabled,\n children,\n style,\n testID,\n}: SelectItemProps) {\n const fontScalingEnabled = useFontScalingEnabled();\n const {\n value: selectedValue,\n setValue,\n setOpen,\n open,\n registerItem,\n unregisterItem,\n highlightedValue,\n setHighlightedValue,\n reduceMotion,\n field,\n } = useSelectContext();\n const { maxFontSizeMultiplier } = field;\n const { theme } = useUnistyles();\n const [isPressed, setIsPressed] = useState(false);\n\n const label = useMemo(() => {\n if (typeof children === 'string' || typeof children === 'number') {\n return String(children);\n }\n\n return value;\n }, [children, value]);\n\n useEffect(() => {\n registerItem(value, label);\n return () => unregisterItem(value);\n }, [label, registerItem, unregisterItem, value]);\n\n const isSelected = selectedValue === value;\n const isHighlighted = highlightedValue === value;\n const interaction = resolveSelectItemInteractionState({\n isPressed,\n isHighlighted,\n });\n\n const textStyle = useMemo(\n () => getMergedSelectItemLayerStyle(theme, 'text', interaction, isSelected) as TextStyle,\n [interaction, isSelected, theme],\n );\n const fontScaleFactor = useFontScale(\n maxFontSizeMultiplier,\n (typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : undefined) ??\n (typeof textStyle.fontSize === 'number' ? textStyle.fontSize : undefined),\n );\n\n const rootStyle = useMemo(() => {\n const configuredRoot = getMergedSelectItemLayerStyle(\n theme,\n 'root',\n interaction,\n isSelected,\n ) as ViewStyle;\n return [\n configuredRoot,\n fontScaleFactor !== 1 && typeof configuredRoot.paddingVertical === 'number'\n ? { paddingVertical: Math.round(configuredRoot.paddingVertical * fontScaleFactor) }\n : undefined,\n {\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n justifyContent: 'space-between' as const,\n width: '100%' as const,\n opacity: disabled ? 0.5 : 1,\n },\n style,\n ] as StyleProp<ViewStyle>;\n }, [disabled, fontScaleFactor, interaction, isSelected, style, theme]);\n\n const endIconStyle = useMemo(\n () => getMergedSelectItemLayerStyle(theme, 'endIcon', interaction, isSelected),\n [interaction, isSelected, theme],\n );\n\n const checkScale = useDerivedValue(\n () =>\n withTiming(isSelected ? 1 : 0, {\n duration: reduceMotion ? 0 : 120,\n easing: Easing.out(Easing.ease),\n }),\n [isSelected, reduceMotion],\n );\n\n const checkAnimatedStyle = useAnimatedStyle(() => ({\n opacity: checkScale.value,\n transform: [{ scale: 0.7 + checkScale.value * 0.3 }],\n }));\n\n const handlePress = useCallback(() => {\n if (disabled) {\n return;\n }\n\n setValue(value);\n setOpen(false);\n setHighlightedValue(null);\n }, [disabled, setHighlightedValue, setOpen, setValue, value]);\n\n const handlePressIn = useCallback(() => {\n if (disabled) {\n return;\n }\n\n setIsPressed(true);\n setHighlightedValue(value);\n }, [disabled, setHighlightedValue, value]);\n\n const handlePressOut = useCallback(() => {\n setIsPressed(false);\n }, []);\n\n if (!open) {\n return null;\n }\n\n return (\n <RNPressable\n testID={testID}\n disabled={disabled}\n onPress={handlePress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n style={rootStyle}\n accessibilityRole=\"menuitem\"\n accessibilityState={{ disabled: !!disabled, selected: isSelected }}\n >\n <HStack columnGap=\"2\" alignItems=\"center\" justifyContent=\"flex-start\" style={{ flex: 1 }}>\n <RNText\n style={textStyle}\n numberOfLines={1}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n dynamicTypeRamp={fontScalingEnabled ? 'body' : undefined}\n >\n {children}\n </RNText>\n </HStack>\n\n <Animated.View style={checkAnimatedStyle} pointerEvents=\"none\">\n <IconSlot\n icon=\"Check\"\n size=\"sm\"\n variant=\"fill\"\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n style={endIconStyle}\n />\n </Animated.View>\n </RNPressable>\n );\n});\n\nSelectItem.displayName = 'SelectItem';\n\nexport { SelectItem, type SelectItemProps };\n"],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
|
|
4
|
+
const require_fontScaling_FontScalingContext = require("../../fontScaling/FontScalingContext.cjs");
|
|
4
5
|
const require_fontScaling_useFontScale = require("../../fontScaling/useFontScale.cjs");
|
|
5
6
|
const require_components_IconSlot = require("../IconSlot.cjs");
|
|
6
7
|
const require_components_internal_Overlay_measureTrigger = require("../internal/Overlay/measureTrigger.cjs");
|
|
@@ -13,6 +14,7 @@ let react_native_reanimated = require("react-native-reanimated");
|
|
|
13
14
|
react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
|
|
14
15
|
//#region src/components/Select/SelectTrigger.tsx
|
|
15
16
|
const SelectTrigger = (0, react.memo)(function SelectTrigger({ startIcon, endIcon }) {
|
|
17
|
+
const fontScalingEnabled = require_fontScaling_FontScalingContext.useFontScalingEnabled();
|
|
16
18
|
const { value, open, setOpen, triggerRef, triggerRect, setTriggerRect, getItemLabel, setHighlightedValue, reduceMotion } = require_components_Select_selectContext.useSelectContext();
|
|
17
19
|
const { size, disabled, readOnly, hasError, placeholder, uid, width, maxFontSizeMultiplier } = require_components_Select_selectContext.useSelectFieldContext();
|
|
18
20
|
const hasValue = value.length > 0;
|
|
@@ -130,7 +132,7 @@ const SelectTrigger = (0, react.memo)(function SelectTrigger({ startIcon, endIco
|
|
|
130
132
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
|
|
131
133
|
numberOfLines: 1,
|
|
132
134
|
maxFontSizeMultiplier,
|
|
133
|
-
dynamicTypeRamp: "body",
|
|
135
|
+
dynamicTypeRamp: fontScalingEnabled ? "body" : void 0,
|
|
134
136
|
style: textInputStyle,
|
|
135
137
|
children: displayText
|
|
136
138
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectTrigger.d.cts","names":[],"sources":["../../../src/components/Select/SelectTrigger.tsx"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"SelectTrigger.d.cts","names":[],"sources":["../../../src/components/Select/SelectTrigger.tsx"],"mappings":";;;;;UAkBU,kBAAA;EACR,SAAA,GAAY,YAAA;EACZ,OAAA,GAAU,YAAA;AAAA;AAAA,cAGN,aAAA,EAAa,OAAA,CAAA,oBAAA,CAAA,kBAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectTrigger.d.ts","names":[],"sources":["../../../src/components/Select/SelectTrigger.tsx"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"SelectTrigger.d.ts","names":[],"sources":["../../../src/components/Select/SelectTrigger.tsx"],"mappings":";;;;;UAkBU,kBAAA;EACR,SAAA,GAAY,YAAA;EACZ,OAAA,GAAU,YAAA;AAAA;AAAA,cAGN,aAAA,EAAa,OAAA,CAAA,oBAAA,CAAA,kBAAA"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
|
+
import { useFontScalingEnabled } from "../../fontScaling/FontScalingContext.js";
|
|
2
3
|
import { useFontScale } from "../../fontScaling/useFontScale.js";
|
|
3
4
|
import { IconSlot } from "../IconSlot.js";
|
|
4
5
|
import { measureTrigger } from "../internal/Overlay/measureTrigger.js";
|
|
@@ -10,6 +11,7 @@ import { inputStyles } from "../../../generated/styles";
|
|
|
10
11
|
import Animated, { Easing, useAnimatedStyle, useDerivedValue, withTiming } from "react-native-reanimated";
|
|
11
12
|
//#region src/components/Select/SelectTrigger.tsx
|
|
12
13
|
const SelectTrigger = memo(function SelectTrigger({ startIcon, endIcon }) {
|
|
14
|
+
const fontScalingEnabled = useFontScalingEnabled();
|
|
13
15
|
const { value, open, setOpen, triggerRef, triggerRect, setTriggerRect, getItemLabel, setHighlightedValue, reduceMotion } = useSelectContext();
|
|
14
16
|
const { size, disabled, readOnly, hasError, placeholder, uid, width, maxFontSizeMultiplier } = useSelectFieldContext();
|
|
15
17
|
const hasValue = value.length > 0;
|
|
@@ -127,7 +129,7 @@ const SelectTrigger = memo(function SelectTrigger({ startIcon, endIcon }) {
|
|
|
127
129
|
children: /* @__PURE__ */ jsx(Text, {
|
|
128
130
|
numberOfLines: 1,
|
|
129
131
|
maxFontSizeMultiplier,
|
|
130
|
-
dynamicTypeRamp: "body",
|
|
132
|
+
dynamicTypeRamp: fontScalingEnabled ? "body" : void 0,
|
|
131
133
|
style: textInputStyle,
|
|
132
134
|
children: displayText
|
|
133
135
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectTrigger.js","names":["RNPressable","RNView","RNText"],"sources":["../../../src/components/Select/SelectTrigger.tsx"],"sourcesContent":["import { memo, useCallback, useMemo } from 'react';\nimport type { View } from 'react-native';\nimport { Pressable as RNPressable, Text as RNText, View as RNView } from 'react-native';\nimport Animated, {\n Easing,\n useAnimatedStyle,\n useDerivedValue,\n withTiming,\n} from 'react-native-reanimated';\n\nimport { inputStyles } from '../../../generated/styles';\nimport { useFontScale } from '../../fontScaling/useFontScale';\nimport type { IconSlotType } from '../IconSlot';\nimport { IconSlot } from '../IconSlot';\nimport { measureTrigger } from '../internal/Overlay';\nimport { useSelectContext, useSelectFieldContext } from './selectContext';\n\ninterface SelectTriggerProps {\n startIcon?: IconSlotType;\n endIcon?: IconSlotType;\n}\n\nconst SelectTrigger = memo(function SelectTrigger({ startIcon, endIcon }: SelectTriggerProps) {\n const {\n value,\n open,\n setOpen,\n triggerRef,\n triggerRect,\n setTriggerRect,\n getItemLabel,\n setHighlightedValue,\n reduceMotion,\n } = useSelectContext();\n const { size, disabled, readOnly, hasError, placeholder, uid, width, maxFontSizeMultiplier } =\n useSelectFieldContext();\n\n const hasValue = value.length > 0;\n const valueState = hasValue ? 'filled' : 'empty';\n const isInteractive = !readOnly && !disabled;\n const useAnimatedChevron = endIcon === undefined;\n const displayText = hasValue ? (getItemLabel(value) ?? value) : (placeholder ?? '');\n\n inputStyles.useVariants({\n size,\n value: valueState,\n pressed: open,\n readonly: readOnly,\n invalid: hasError,\n });\n const fontScaleFactor = useFontScale(\n maxFontSizeMultiplier,\n (typeof inputStyles.inputWrapperStatic.lineHeight === 'number'\n ? inputStyles.inputWrapperStatic.lineHeight\n : undefined) ??\n (typeof inputStyles.inputWrapperStatic.fontSize === 'number'\n ? inputStyles.inputWrapperStatic.fontSize\n : undefined),\n );\n\n const inputWrapperStyle = useMemo(() => {\n const { gap, paddingVertical } = inputStyles.inputWrapperStatic;\n const scaledMetrics =\n fontScaleFactor === 1\n ? undefined\n : {\n ...(typeof gap === 'number' && { gap: Math.round(gap * fontScaleFactor) }),\n ...(typeof paddingVertical === 'number' && {\n paddingVertical: Math.round(paddingVertical * fontScaleFactor),\n }),\n };\n\n return [\n inputStyles.inputWrapper,\n inputStyles.inputWrapperStatic,\n inputStyles.inputWrapperDynamic,\n scaledMetrics,\n {\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n width,\n alignSelf: 'stretch' as const,\n },\n ];\n }, [\n fontScaleFactor,\n inputStyles.inputWrapper,\n inputStyles.inputWrapperDynamic,\n inputStyles.inputWrapperStatic,\n width,\n ]);\n\n const textContainerStyle = useMemo(\n () => [\n {\n flex: 1,\n justifyContent: 'center' as const,\n },\n typeof inputStyles.input.height === 'number'\n ? { minHeight: Math.round(inputStyles.input.height * fontScaleFactor) }\n : null,\n ],\n [fontScaleFactor, inputStyles.input],\n );\n\n const textInputStyle = useMemo(\n () => [\n {\n fontFamily: inputStyles.inputWrapperStatic.fontFamily,\n fontSize: inputStyles.inputWrapperStatic.fontSize,\n letterSpacing: inputStyles.inputWrapperStatic.letterSpacing,\n // Match TextInput vertical centering: wrapper lineHeight is for layout, not single-line text.\n lineHeight: inputStyles.inputWrapperStatic.fontSize,\n paddingVertical: 0,\n },\n inputStyles.input,\n { height: undefined },\n !hasValue ? inputStyles.inputPlaceholder : null,\n ],\n [hasValue, inputStyles.input, inputStyles.inputPlaceholder, inputStyles.inputWrapperStatic],\n );\n\n const chevronProgress = useDerivedValue(\n () =>\n withTiming(open ? 1 : 0, {\n duration: reduceMotion ? 0 : 200,\n easing: Easing.out(Easing.ease),\n }),\n [open, reduceMotion],\n );\n\n const chevronAnimatedStyle = useAnimatedStyle(() => ({\n transform: [{ rotate: `${chevronProgress.value * 180}deg` }],\n }));\n\n const handleRef = useCallback(\n (node: View | null) => {\n triggerRef.current = node;\n },\n [triggerRef],\n );\n\n const handlePress = useCallback(() => {\n if (!isInteractive) {\n return;\n }\n\n if (open) {\n setOpen(false);\n setHighlightedValue(null);\n return;\n }\n\n measureTrigger(triggerRef.current, triggerRect, setTriggerRect);\n setHighlightedValue(null);\n setOpen(true);\n }, [isInteractive, open, setHighlightedValue, setOpen, setTriggerRect, triggerRect, triggerRef]);\n\n return (\n <RNPressable\n ref={handleRef}\n testID=\"select-trigger\"\n onPress={handlePress}\n disabled={!isInteractive}\n style={{ width, alignSelf: 'stretch' }}\n accessibilityRole=\"button\"\n accessibilityLabel={displayText || uid}\n accessibilityState={{\n disabled: !isInteractive,\n expanded: open,\n selected: hasValue,\n }}\n >\n <RNView style={inputWrapperStyle} pointerEvents=\"none\">\n {startIcon ? (\n <IconSlot\n icon={startIcon}\n variant=\"outline\"\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n style={inputStyles.startIcon}\n />\n ) : null}\n\n <RNView style={textContainerStyle}>\n <RNText\n numberOfLines={1}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n dynamicTypeRamp
|
|
1
|
+
{"version":3,"file":"SelectTrigger.js","names":["RNPressable","RNView","RNText"],"sources":["../../../src/components/Select/SelectTrigger.tsx"],"sourcesContent":["import { memo, useCallback, useMemo } from 'react';\nimport type { View } from 'react-native';\nimport { Pressable as RNPressable, Text as RNText, View as RNView } from 'react-native';\nimport Animated, {\n Easing,\n useAnimatedStyle,\n useDerivedValue,\n withTiming,\n} from 'react-native-reanimated';\n\nimport { inputStyles } from '../../../generated/styles';\nimport { useFontScalingEnabled } from '../../fontScaling/FontScalingContext';\nimport { useFontScale } from '../../fontScaling/useFontScale';\nimport type { IconSlotType } from '../IconSlot';\nimport { IconSlot } from '../IconSlot';\nimport { measureTrigger } from '../internal/Overlay';\nimport { useSelectContext, useSelectFieldContext } from './selectContext';\n\ninterface SelectTriggerProps {\n startIcon?: IconSlotType;\n endIcon?: IconSlotType;\n}\n\nconst SelectTrigger = memo(function SelectTrigger({ startIcon, endIcon }: SelectTriggerProps) {\n const fontScalingEnabled = useFontScalingEnabled();\n const {\n value,\n open,\n setOpen,\n triggerRef,\n triggerRect,\n setTriggerRect,\n getItemLabel,\n setHighlightedValue,\n reduceMotion,\n } = useSelectContext();\n const { size, disabled, readOnly, hasError, placeholder, uid, width, maxFontSizeMultiplier } =\n useSelectFieldContext();\n\n const hasValue = value.length > 0;\n const valueState = hasValue ? 'filled' : 'empty';\n const isInteractive = !readOnly && !disabled;\n const useAnimatedChevron = endIcon === undefined;\n const displayText = hasValue ? (getItemLabel(value) ?? value) : (placeholder ?? '');\n\n inputStyles.useVariants({\n size,\n value: valueState,\n pressed: open,\n readonly: readOnly,\n invalid: hasError,\n });\n const fontScaleFactor = useFontScale(\n maxFontSizeMultiplier,\n (typeof inputStyles.inputWrapperStatic.lineHeight === 'number'\n ? inputStyles.inputWrapperStatic.lineHeight\n : undefined) ??\n (typeof inputStyles.inputWrapperStatic.fontSize === 'number'\n ? inputStyles.inputWrapperStatic.fontSize\n : undefined),\n );\n\n const inputWrapperStyle = useMemo(() => {\n const { gap, paddingVertical } = inputStyles.inputWrapperStatic;\n const scaledMetrics =\n fontScaleFactor === 1\n ? undefined\n : {\n ...(typeof gap === 'number' && { gap: Math.round(gap * fontScaleFactor) }),\n ...(typeof paddingVertical === 'number' && {\n paddingVertical: Math.round(paddingVertical * fontScaleFactor),\n }),\n };\n\n return [\n inputStyles.inputWrapper,\n inputStyles.inputWrapperStatic,\n inputStyles.inputWrapperDynamic,\n scaledMetrics,\n {\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n width,\n alignSelf: 'stretch' as const,\n },\n ];\n }, [\n fontScaleFactor,\n inputStyles.inputWrapper,\n inputStyles.inputWrapperDynamic,\n inputStyles.inputWrapperStatic,\n width,\n ]);\n\n const textContainerStyle = useMemo(\n () => [\n {\n flex: 1,\n justifyContent: 'center' as const,\n },\n typeof inputStyles.input.height === 'number'\n ? { minHeight: Math.round(inputStyles.input.height * fontScaleFactor) }\n : null,\n ],\n [fontScaleFactor, inputStyles.input],\n );\n\n const textInputStyle = useMemo(\n () => [\n {\n fontFamily: inputStyles.inputWrapperStatic.fontFamily,\n fontSize: inputStyles.inputWrapperStatic.fontSize,\n letterSpacing: inputStyles.inputWrapperStatic.letterSpacing,\n // Match TextInput vertical centering: wrapper lineHeight is for layout, not single-line text.\n lineHeight: inputStyles.inputWrapperStatic.fontSize,\n paddingVertical: 0,\n },\n inputStyles.input,\n { height: undefined },\n !hasValue ? inputStyles.inputPlaceholder : null,\n ],\n [hasValue, inputStyles.input, inputStyles.inputPlaceholder, inputStyles.inputWrapperStatic],\n );\n\n const chevronProgress = useDerivedValue(\n () =>\n withTiming(open ? 1 : 0, {\n duration: reduceMotion ? 0 : 200,\n easing: Easing.out(Easing.ease),\n }),\n [open, reduceMotion],\n );\n\n const chevronAnimatedStyle = useAnimatedStyle(() => ({\n transform: [{ rotate: `${chevronProgress.value * 180}deg` }],\n }));\n\n const handleRef = useCallback(\n (node: View | null) => {\n triggerRef.current = node;\n },\n [triggerRef],\n );\n\n const handlePress = useCallback(() => {\n if (!isInteractive) {\n return;\n }\n\n if (open) {\n setOpen(false);\n setHighlightedValue(null);\n return;\n }\n\n measureTrigger(triggerRef.current, triggerRect, setTriggerRect);\n setHighlightedValue(null);\n setOpen(true);\n }, [isInteractive, open, setHighlightedValue, setOpen, setTriggerRect, triggerRect, triggerRef]);\n\n return (\n <RNPressable\n ref={handleRef}\n testID=\"select-trigger\"\n onPress={handlePress}\n disabled={!isInteractive}\n style={{ width, alignSelf: 'stretch' }}\n accessibilityRole=\"button\"\n accessibilityLabel={displayText || uid}\n accessibilityState={{\n disabled: !isInteractive,\n expanded: open,\n selected: hasValue,\n }}\n >\n <RNView style={inputWrapperStyle} pointerEvents=\"none\">\n {startIcon ? (\n <IconSlot\n icon={startIcon}\n variant=\"outline\"\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n style={inputStyles.startIcon}\n />\n ) : null}\n\n <RNView style={textContainerStyle}>\n <RNText\n numberOfLines={1}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n dynamicTypeRamp={fontScalingEnabled ? 'body' : undefined}\n style={textInputStyle}\n >\n {displayText}\n </RNText>\n </RNView>\n\n {useAnimatedChevron || endIcon ? (\n <Animated.View\n style={useAnimatedChevron ? chevronAnimatedStyle : undefined}\n testID=\"select-chevron\"\n >\n <IconSlot\n icon={useAnimatedChevron ? 'ChevronDown' : endIcon!}\n size=\"sm\"\n variant=\"outline\"\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n style={inputStyles.endIcon}\n />\n </Animated.View>\n ) : null}\n </RNView>\n </RNPressable>\n );\n});\n\nSelectTrigger.displayName = 'SelectTrigger';\n\nexport { SelectTrigger, type SelectTriggerProps };\n"],"mappings":"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"}
|
|
@@ -20,7 +20,7 @@ interface SelectFieldContextValue {
|
|
|
20
20
|
placeholder?: string;
|
|
21
21
|
uid: string;
|
|
22
22
|
/** Resolved React Native control cap (0 means explicitly uncapped). */
|
|
23
|
-
maxFontSizeMultiplier
|
|
23
|
+
maxFontSizeMultiplier?: number;
|
|
24
24
|
}
|
|
25
25
|
interface SelectContextValue {
|
|
26
26
|
value: string;
|
|
@@ -20,7 +20,7 @@ interface SelectFieldContextValue {
|
|
|
20
20
|
placeholder?: string;
|
|
21
21
|
uid: string;
|
|
22
22
|
/** Resolved React Native control cap (0 means explicitly uncapped). */
|
|
23
|
-
maxFontSizeMultiplier
|
|
23
|
+
maxFontSizeMultiplier?: number;
|
|
24
24
|
}
|
|
25
25
|
interface SelectContextValue {
|
|
26
26
|
value: string;
|
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
|
|
4
4
|
const require_fontScaling_useFontScale = require("../fontScaling/useFontScale.cjs");
|
|
5
5
|
const require_fontScaling_useMaxFontSizeMultiplier = require("../fontScaling/useMaxFontSizeMultiplier.cjs");
|
|
6
|
+
const require_components_Button_buttonTheme = require("./Button/buttonTheme.cjs");
|
|
6
7
|
const require_components_IconSlot = require("./IconSlot.cjs");
|
|
7
8
|
const require_components_FormLabel = require("./FormLabel.cjs");
|
|
8
9
|
let react = require("react");
|
|
@@ -55,7 +56,7 @@ const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = f
|
|
|
55
56
|
const isOn = isControlled ? isOnProp : internalIsOn;
|
|
56
57
|
const activeVariant = isOn ? "on" : "off";
|
|
57
58
|
const { theme } = (0, react_native_unistyles.useUnistyles)();
|
|
58
|
-
const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier)
|
|
59
|
+
const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
|
|
59
60
|
(0, react.useEffect)(() => {
|
|
60
61
|
const checkReducedMotion = async () => {
|
|
61
62
|
setPrefersReducedMotion(await react_native.AccessibilityInfo.isReduceMotionEnabled());
|
|
@@ -184,7 +185,14 @@ const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = f
|
|
|
184
185
|
variant: "fill",
|
|
185
186
|
dangerouslySetSize: scaledHandleIconSize,
|
|
186
187
|
allowFontScaling: false,
|
|
187
|
-
style: [
|
|
188
|
+
style: [
|
|
189
|
+
resolvedSwitchStyles.handleIcon,
|
|
190
|
+
variantLayerStyles.handleIcon,
|
|
191
|
+
scaledHandleIconSize === void 0 ? void 0 : {
|
|
192
|
+
fontSize: scaledHandleIconSize,
|
|
193
|
+
lineHeight: require_components_Button_buttonTheme.getSafeIconCell(scaledHandleIconSize)
|
|
194
|
+
}
|
|
195
|
+
]
|
|
188
196
|
})
|
|
189
197
|
}), offIcon && !isOn && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
|
|
190
198
|
style: switchStaticStyles.iconContainer,
|
|
@@ -193,7 +201,14 @@ const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = f
|
|
|
193
201
|
variant: "fill",
|
|
194
202
|
dangerouslySetSize: scaledHandleIconSize,
|
|
195
203
|
allowFontScaling: false,
|
|
196
|
-
style: [
|
|
204
|
+
style: [
|
|
205
|
+
resolvedSwitchStyles.handleIcon,
|
|
206
|
+
variantLayerStyles.handleIcon,
|
|
207
|
+
scaledHandleIconSize === void 0 ? void 0 : {
|
|
208
|
+
fontSize: scaledHandleIconSize,
|
|
209
|
+
lineHeight: require_components_Button_buttonTheme.getSafeIconCell(scaledHandleIconSize)
|
|
210
|
+
}
|
|
211
|
+
]
|
|
197
212
|
})
|
|
198
213
|
})]
|
|
199
214
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.cts","names":[],"sources":["../../src/components/Switch.tsx"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"Switch.d.cts","names":[],"sources":["../../src/components/Switch.tsx"],"mappings":";;;;;;;;UAyBU,WAAA,SAAoB,IAAA,CAAK,SAAA,YAAqB,oBAAA,CAAqB,YAAA;;EAE3E,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,QAAA,IAAY,KAAA;;EAEZ,QAAA;EAN2E;EAQ3E,QAAA;EANM;;;;;;EAaN,qBAAA;EAfiC;EAiBjC,iBAAA,GAAoB,kBAAA;AAAA;;;;;;;;;;;;;AAAkB;;;;;;;;;;;;;;;;;;;;;cAsClC,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","names":[],"sources":["../../src/components/Switch.tsx"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","names":[],"sources":["../../src/components/Switch.tsx"],"mappings":";;;;;;;;UAyBU,WAAA,SAAoB,IAAA,CAAK,SAAA,YAAqB,oBAAA,CAAqB,YAAA;;EAE3E,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,QAAA,IAAY,KAAA;;EAEZ,QAAA;EAN2E;EAQ3E,QAAA;EANM;;;;;;EAaN,qBAAA;EAfiC;EAiBjC,iBAAA,GAAoB,kBAAA;AAAA;;;;;;;;;;;;;AAAkB;;;;;;;;;;;;;;;;;;;;;cAsClC,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
2
|
import { useFontScale } from "../fontScaling/useFontScale.js";
|
|
3
3
|
import { useMaxFontSizeMultiplier } from "../fontScaling/useMaxFontSizeMultiplier.js";
|
|
4
|
+
import { getSafeIconCell } from "./Button/buttonTheme.js";
|
|
4
5
|
import { IconSlot } from "./IconSlot.js";
|
|
5
6
|
import { FormLabel } from "./FormLabel.js";
|
|
6
7
|
import { memo, useCallback, useEffect, useMemo, useState } from "react";
|
|
@@ -52,7 +53,7 @@ const Switch = memo(function Switch({ isOn: isOnProp, defaultIsOn = false, onCha
|
|
|
52
53
|
const isOn = isControlled ? isOnProp : internalIsOn;
|
|
53
54
|
const activeVariant = isOn ? "on" : "off";
|
|
54
55
|
const { theme } = useUnistyles();
|
|
55
|
-
const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier)
|
|
56
|
+
const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
|
|
56
57
|
useEffect(() => {
|
|
57
58
|
const checkReducedMotion = async () => {
|
|
58
59
|
setPrefersReducedMotion(await AccessibilityInfo.isReduceMotionEnabled());
|
|
@@ -181,7 +182,14 @@ const Switch = memo(function Switch({ isOn: isOnProp, defaultIsOn = false, onCha
|
|
|
181
182
|
variant: "fill",
|
|
182
183
|
dangerouslySetSize: scaledHandleIconSize,
|
|
183
184
|
allowFontScaling: false,
|
|
184
|
-
style: [
|
|
185
|
+
style: [
|
|
186
|
+
resolvedSwitchStyles.handleIcon,
|
|
187
|
+
variantLayerStyles.handleIcon,
|
|
188
|
+
scaledHandleIconSize === void 0 ? void 0 : {
|
|
189
|
+
fontSize: scaledHandleIconSize,
|
|
190
|
+
lineHeight: getSafeIconCell(scaledHandleIconSize)
|
|
191
|
+
}
|
|
192
|
+
]
|
|
185
193
|
})
|
|
186
194
|
}), offIcon && !isOn && /* @__PURE__ */ jsx(Animated.View, {
|
|
187
195
|
style: switchStaticStyles.iconContainer,
|
|
@@ -190,7 +198,14 @@ const Switch = memo(function Switch({ isOn: isOnProp, defaultIsOn = false, onCha
|
|
|
190
198
|
variant: "fill",
|
|
191
199
|
dangerouslySetSize: scaledHandleIconSize,
|
|
192
200
|
allowFontScaling: false,
|
|
193
|
-
style: [
|
|
201
|
+
style: [
|
|
202
|
+
resolvedSwitchStyles.handleIcon,
|
|
203
|
+
variantLayerStyles.handleIcon,
|
|
204
|
+
scaledHandleIconSize === void 0 ? void 0 : {
|
|
205
|
+
fontSize: scaledHandleIconSize,
|
|
206
|
+
lineHeight: getSafeIconCell(scaledHandleIconSize)
|
|
207
|
+
}
|
|
208
|
+
]
|
|
194
209
|
})
|
|
195
210
|
})]
|
|
196
211
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","names":["StyleSheet"],"sources":["../../src/components/Switch.tsx"],"sourcesContent":["import type { UniversalSwitchProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type {\n AccessibilityProps,\n StyleProp,\n TextStyle,\n View,\n ViewProps,\n ViewStyle,\n} from 'react-native';\nimport { AccessibilityInfo, I18nManager, Platform, Pressable } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withTiming } from 'react-native-reanimated';\n// eslint-disable-next-line uds/no-use-unistyles -- switch variant layers need concrete web styles\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\nimport { useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport { switchStyles } from '../../generated/styles';\nimport { useFontScale } from '../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../fontScaling/useMaxFontSizeMultiplier';\nimport { FormLabel } from './FormLabel';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\n\ninterface SwitchProps extends Omit<ViewProps, 'style'>, UniversalSwitchProps<IconSlotType> {\n /** Ref to the underlying View */\n ref?: Ref<View>;\n /** Callback when the switch value changes */\n onChange?: (value: boolean) => void;\n /** Whether the switch is disabled */\n disabled?: boolean;\n /** Whether the switch is required (shows asterisk with label) */\n required?: boolean;\n /**\n * Caps how far the track, handle, and label grow with the OS text-size\n * setting; all scale by the same factor. Set null to remove the cap;\n * override app-wide via UDSFontScalingProvider.\n * @default 2\n */\n maxFontSizeMultiplier?: number | null;\n /** Accessibility hint describing what happens when activated */\n accessibilityHint?: AccessibilityProps['accessibilityHint'];\n}\n\nconst ANIMATION_DURATION = 120;\n\n/**\n * **Switch component for toggling options**\n *\n * @description\n * A switch (also called a toggle) is a binary on/off input control.\n * It allows users to pick between two clearly opposite choices.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Switch } from '@yahoo/uds-mobile/Switch';\n *\n * <Switch label=\"Notifications\" />\n * <Switch isOn={enabled} onChange={setEnabled} label=\"Dark mode\" />\n * <Switch onIcon=\"Check\" offIcon=\"Cross\" label=\"Sync\" />\n * ```\n *\n * @usage\n * - Settings: For toggling preferences on/off\n * - Feature flags: For enabling/disabling features\n * - Immediate effect toggles (no submit button needed)\n *\n * @accessibility\n * - Sets `accessibilityRole=\"switch\"` automatically\n * - Announces on/off state to screen readers\n * - Respects system reduce motion preference\n * - Supports `reduceMotion` prop to disable animations\n *\n * @see {@link Checkbox} for forms with submit actions\n * @see {@link Radio} for single-select options\n */\nconst Switch = memo(function Switch({\n isOn: isOnProp,\n defaultIsOn = false,\n onChange,\n label,\n labelPosition = 'start',\n size = 'md',\n onIcon,\n offIcon,\n disabled = false,\n required,\n maxFontSizeMultiplier,\n accessibilityHint,\n reduceMotion = false,\n ref,\n ...viewProps\n}: SwitchProps) {\n const isControlled = isOnProp !== undefined;\n const [internalIsOn, setInternalIsOn] = useState(defaultIsOn);\n const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n const isOn = isControlled ? isOnProp : internalIsOn;\n const activeVariant = isOn ? 'on' : 'off';\n const { theme } = useUnistyles();\n\n // One resolved cap governs track, handle, travel, and label. Android may\n // resolve different nonlinear factors for the label and handle glyph.\n const resolvedMaxFontSizeMultiplier =\n useMaxFontSizeMultiplier('control', maxFontSizeMultiplier) ?? 0;\n // Check system reduced motion preference\n useEffect(() => {\n const checkReducedMotion = async () => {\n const isReduceMotionEnabled = await AccessibilityInfo.isReduceMotionEnabled();\n setPrefersReducedMotion(isReduceMotionEnabled);\n };\n checkReducedMotion();\n\n const subscription = AccessibilityInfo.addEventListener(\n 'reduceMotionChanged',\n setPrefersReducedMotion,\n );\n return () => subscription.remove();\n }, []);\n\n const shouldReduceMotion = reduceMotion || prefersReducedMotion;\n const animationDuration = shouldReduceMotion ? 0 : ANIMATION_DURATION;\n\n const progress = useDerivedValue(\n () => withTiming(isOn ? 1 : 0, { duration: animationDuration }),\n [isOn, animationDuration],\n );\n\n const handlePress = useCallback(() => {\n if (disabled) {\n return;\n }\n\n const newValue = !isOn;\n\n if (!isControlled) {\n setInternalIsOn(newValue);\n }\n\n onChange?.(newValue);\n }, [disabled, isOn, isControlled, onChange]);\n\n // On web, useVariants returns the resolved style object instead of mutating\n // switchStyles in place.\n const variantSwitchStyles = switchStyles.useVariants({\n size,\n variant: activeVariant,\n }) as unknown as typeof switchStyles | undefined;\n const resolvedSwitchStyles = variantSwitchStyles ?? switchStyles;\n const labelBaseSize = resolvedSwitchStyles.text.lineHeight ?? resolvedSwitchStyles.text.fontSize;\n const fontScaleFactor = useFontScale(\n resolvedMaxFontSizeMultiplier,\n typeof labelBaseSize === 'number' ? labelBaseSize : undefined,\n );\n // Size the handle glyph from the configured size layer and the same factor\n // Android would apply to a native glyph of this size.\n const handleIconSize = resolvedSwitchStyles.handleIcon.fontSize;\n const handleIconScaleFactor = useFontScale(\n resolvedMaxFontSizeMultiplier,\n typeof handleIconSize === 'number' ? handleIconSize : undefined,\n );\n const scaledHandleIconSize =\n typeof handleIconSize === 'number'\n ? Math.round(handleIconSize * handleIconScaleFactor)\n : undefined;\n\n // Derive travel from the same rounded metrics used to render the control.\n // Scaling the token travel independently can differ by a pixel at fractional\n // font scales, leaving unequal insets at opposite ends of the track.\n const scaledTrackWidth = Math.round(resolvedSwitchStyles.switch.width * fontScaleFactor);\n const scaledTrackPadding = Math.round(resolvedSwitchStyles.switch.padding * fontScaleFactor);\n const scaledHandleWidth = Math.round(resolvedSwitchStyles.handle.width * fontScaleFactor);\n const scaledHandleTravel = Math.max(\n 0,\n scaledTrackWidth - scaledHandleWidth - scaledTrackPadding * 2,\n );\n // RTL mirrors the track layout but not transforms, so travel flips sign.\n const travelDistance = scaledHandleTravel * (I18nManager.isRTL ? -1 : 1);\n\n const variantLayerStyles = useMemo(() => {\n const components = theme.components as unknown as Record<string, Record<string, unknown>>;\n const getLayerStyle = <TStyle,>(layer: string) =>\n components[`switch/variant/default/active/${activeVariant}/${layer}/rest`] as\n TStyle | undefined;\n\n return {\n handle: getLayerStyle<ViewStyle>('handle'),\n handleIcon: getLayerStyle<TextStyle>('handleIcon'),\n switch: getLayerStyle<ViewStyle>('switch'),\n text: getLayerStyle<TextStyle>('rootText'),\n };\n }, [activeVariant, theme]);\n\n // Get animated track color from design tokens (changes when variant changes)\n const trackBackgroundColor = useAnimatedVariantColor(\n resolvedSwitchStyles.switch,\n 'backgroundColor',\n );\n\n const animatedTrackStyle = useAnimatedStyle(() => {\n 'worklet';\n return {\n backgroundColor: withTiming(trackBackgroundColor.value, { duration: animationDuration }),\n };\n });\n\n const animatedHandleStyle = useAnimatedStyle(() => {\n 'worklet';\n return {\n transform: [{ translateX: progress.value * travelDistance }],\n };\n });\n\n const rootStyle: StyleProp<ViewStyle> = useMemo(\n () => [resolvedSwitchStyles.root, switchStaticStyles.root({ disabled })],\n [resolvedSwitchStyles.root, disabled],\n );\n\n // Track and handle grow by the capped factor so the handle (and its icon)\n // stays contained. Scale the track's inset too so the derived travel lands\n // the handle at the same distance from either end.\n const scaleDimensions = useCallback(\n (style: ViewStyle | undefined): ViewStyle | undefined => {\n if (!style || fontScaleFactor === 1) {\n return undefined;\n }\n const { width, height, padding } = style;\n return typeof width === 'number' && typeof height === 'number'\n ? {\n width: Math.round(width * fontScaleFactor),\n height: Math.round(height * fontScaleFactor),\n ...(typeof padding === 'number' && {\n padding: Math.round(padding * fontScaleFactor),\n }),\n }\n : undefined;\n },\n [fontScaleFactor],\n );\n\n const trackStyle: StyleProp<ViewStyle> = useMemo(\n () => [\n resolvedSwitchStyles.switch,\n switchStaticStyles.track,\n variantLayerStyles.switch,\n scaleDimensions(resolvedSwitchStyles.switch as ViewStyle),\n // On web, the animated variant color hook currently resolves to Unistyles'\n // black fallback, so the concrete variant layer provides the track color.\n Platform.OS !== 'web' && animatedTrackStyle,\n ],\n [resolvedSwitchStyles.switch, variantLayerStyles.switch, scaleDimensions, animatedTrackStyle],\n );\n\n const handleStyle: StyleProp<ViewStyle> = useMemo(\n () => [\n resolvedSwitchStyles.handle,\n switchStaticStyles.handle,\n variantLayerStyles.handle,\n scaleDimensions(resolvedSwitchStyles.handle as ViewStyle),\n animatedHandleStyle,\n ],\n [resolvedSwitchStyles.handle, variantLayerStyles.handle, scaleDimensions, animatedHandleStyle],\n );\n\n const accessibilityLabel = typeof label === 'string' ? label : undefined;\n const resolvedAccessibilityHint = accessibilityHint ?? 'Double tap to toggle';\n\n const labelContent = label && (\n <FormLabel\n color=\"inherit\"\n variant=\"inherit\"\n label={label}\n required={required}\n showRequiredAsterisk={required}\n maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n style={[resolvedSwitchStyles.text, variantLayerStyles.text]}\n />\n );\n\n const a11yValue = useMemo(() => ({ text: isOn ? 'On' : 'Off' }), [isOn]);\n\n return (\n <Pressable\n ref={ref}\n onPress={handlePress}\n disabled={disabled}\n accessible\n accessibilityRole=\"switch\"\n accessibilityState={{ checked: isOn, disabled }}\n accessibilityLabel={accessibilityLabel}\n accessibilityHint={resolvedAccessibilityHint}\n accessibilityValue={a11yValue}\n {...viewProps}\n style={rootStyle}\n >\n {labelPosition === 'start' && labelContent}\n\n <Animated.View style={trackStyle} importantForAccessibility=\"no-hide-descendants\">\n <Animated.View style={handleStyle}>\n {onIcon && isOn && (\n <Animated.View style={switchStaticStyles.iconContainer}>\n <IconSlot\n icon={onIcon}\n variant=\"fill\"\n dangerouslySetSize={scaledHandleIconSize}\n allowFontScaling={false}\n style={[resolvedSwitchStyles.handleIcon, variantLayerStyles.handleIcon]}\n />\n </Animated.View>\n )}\n {offIcon && !isOn && (\n <Animated.View style={switchStaticStyles.iconContainer}>\n <IconSlot\n icon={offIcon}\n variant=\"fill\"\n dangerouslySetSize={scaledHandleIconSize}\n allowFontScaling={false}\n style={[resolvedSwitchStyles.handleIcon, variantLayerStyles.handleIcon]}\n />\n </Animated.View>\n )}\n </Animated.View>\n </Animated.View>\n\n {labelPosition === 'end' && labelContent}\n </Pressable>\n );\n});\n\nSwitch.displayName = 'Switch';\n\nconst switchStaticStyles = StyleSheet.create((theme) => ({\n handle: {\n borderRadius: theme.borderRadius.full,\n alignItems: 'center',\n justifyContent: 'center',\n },\n iconContainer: {\n position: 'absolute',\n alignItems: 'center',\n justifyContent: 'center',\n },\n track: {\n justifyContent: 'center',\n borderRadius: theme.borderRadius.full,\n },\n root: ({ disabled }: { disabled: boolean }) => ({\n flexDirection: 'row',\n alignItems: 'center',\n alignSelf: 'flex-start',\n opacity: disabled ? 0.5 : 1,\n }),\n}));\n\nexport { Switch, type SwitchProps };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Switch.js","names":["StyleSheet"],"sources":["../../src/components/Switch.tsx"],"sourcesContent":["import type { UniversalSwitchProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type {\n AccessibilityProps,\n StyleProp,\n TextStyle,\n View,\n ViewProps,\n ViewStyle,\n} from 'react-native';\nimport { AccessibilityInfo, I18nManager, Platform, Pressable } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withTiming } from 'react-native-reanimated';\n// eslint-disable-next-line uds/no-use-unistyles -- switch variant layers need concrete web styles\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\nimport { useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport { switchStyles } from '../../generated/styles';\nimport { useFontScale } from '../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../fontScaling/useMaxFontSizeMultiplier';\nimport { getSafeIconCell } from './Button/buttonTheme';\nimport { FormLabel } from './FormLabel';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\n\ninterface SwitchProps extends Omit<ViewProps, 'style'>, UniversalSwitchProps<IconSlotType> {\n /** Ref to the underlying View */\n ref?: Ref<View>;\n /** Callback when the switch value changes */\n onChange?: (value: boolean) => void;\n /** Whether the switch is disabled */\n disabled?: boolean;\n /** Whether the switch is required (shows asterisk with label) */\n required?: boolean;\n /**\n * Caps how far the track, handle, and label grow with the OS text-size\n * setting; all scale by the same factor. Set null to remove the cap;\n * override app-wide via UDSFontScalingProvider.\n * @default 2\n */\n maxFontSizeMultiplier?: number | null;\n /** Accessibility hint describing what happens when activated */\n accessibilityHint?: AccessibilityProps['accessibilityHint'];\n}\n\nconst ANIMATION_DURATION = 120;\n\n/**\n * **Switch component for toggling options**\n *\n * @description\n * A switch (also called a toggle) is a binary on/off input control.\n * It allows users to pick between two clearly opposite choices.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Switch } from '@yahoo/uds-mobile/Switch';\n *\n * <Switch label=\"Notifications\" />\n * <Switch isOn={enabled} onChange={setEnabled} label=\"Dark mode\" />\n * <Switch onIcon=\"Check\" offIcon=\"Cross\" label=\"Sync\" />\n * ```\n *\n * @usage\n * - Settings: For toggling preferences on/off\n * - Feature flags: For enabling/disabling features\n * - Immediate effect toggles (no submit button needed)\n *\n * @accessibility\n * - Sets `accessibilityRole=\"switch\"` automatically\n * - Announces on/off state to screen readers\n * - Respects system reduce motion preference\n * - Supports `reduceMotion` prop to disable animations\n *\n * @see {@link Checkbox} for forms with submit actions\n * @see {@link Radio} for single-select options\n */\nconst Switch = memo(function Switch({\n isOn: isOnProp,\n defaultIsOn = false,\n onChange,\n label,\n labelPosition = 'start',\n size = 'md',\n onIcon,\n offIcon,\n disabled = false,\n required,\n maxFontSizeMultiplier,\n accessibilityHint,\n reduceMotion = false,\n ref,\n ...viewProps\n}: SwitchProps) {\n const isControlled = isOnProp !== undefined;\n const [internalIsOn, setInternalIsOn] = useState(defaultIsOn);\n const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n const isOn = isControlled ? isOnProp : internalIsOn;\n const activeVariant = isOn ? 'on' : 'off';\n const { theme } = useUnistyles();\n\n // One resolved cap governs track, handle, travel, and label. Android may\n // resolve different nonlinear factors for the label and handle glyph.\n const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n // Check system reduced motion preference\n useEffect(() => {\n const checkReducedMotion = async () => {\n const isReduceMotionEnabled = await AccessibilityInfo.isReduceMotionEnabled();\n setPrefersReducedMotion(isReduceMotionEnabled);\n };\n checkReducedMotion();\n\n const subscription = AccessibilityInfo.addEventListener(\n 'reduceMotionChanged',\n setPrefersReducedMotion,\n );\n return () => subscription.remove();\n }, []);\n\n const shouldReduceMotion = reduceMotion || prefersReducedMotion;\n const animationDuration = shouldReduceMotion ? 0 : ANIMATION_DURATION;\n\n const progress = useDerivedValue(\n () => withTiming(isOn ? 1 : 0, { duration: animationDuration }),\n [isOn, animationDuration],\n );\n\n const handlePress = useCallback(() => {\n if (disabled) {\n return;\n }\n\n const newValue = !isOn;\n\n if (!isControlled) {\n setInternalIsOn(newValue);\n }\n\n onChange?.(newValue);\n }, [disabled, isOn, isControlled, onChange]);\n\n // On web, useVariants returns the resolved style object instead of mutating\n // switchStyles in place.\n const variantSwitchStyles = switchStyles.useVariants({\n size,\n variant: activeVariant,\n }) as unknown as typeof switchStyles | undefined;\n const resolvedSwitchStyles = variantSwitchStyles ?? switchStyles;\n const labelBaseSize = resolvedSwitchStyles.text.lineHeight ?? resolvedSwitchStyles.text.fontSize;\n const fontScaleFactor = useFontScale(\n resolvedMaxFontSizeMultiplier,\n typeof labelBaseSize === 'number' ? labelBaseSize : undefined,\n );\n // Size the handle glyph from the configured size layer and the same factor\n // Android would apply to a native glyph of this size.\n const handleIconSize = resolvedSwitchStyles.handleIcon.fontSize;\n const handleIconScaleFactor = useFontScale(\n resolvedMaxFontSizeMultiplier,\n typeof handleIconSize === 'number' ? handleIconSize : undefined,\n );\n const scaledHandleIconSize =\n typeof handleIconSize === 'number'\n ? Math.round(handleIconSize * handleIconScaleFactor)\n : undefined;\n\n // Derive travel from the same rounded metrics used to render the control.\n // Scaling the token travel independently can differ by a pixel at fractional\n // font scales, leaving unequal insets at opposite ends of the track.\n const scaledTrackWidth = Math.round(resolvedSwitchStyles.switch.width * fontScaleFactor);\n const scaledTrackPadding = Math.round(resolvedSwitchStyles.switch.padding * fontScaleFactor);\n const scaledHandleWidth = Math.round(resolvedSwitchStyles.handle.width * fontScaleFactor);\n const scaledHandleTravel = Math.max(\n 0,\n scaledTrackWidth - scaledHandleWidth - scaledTrackPadding * 2,\n );\n // RTL mirrors the track layout but not transforms, so travel flips sign.\n const travelDistance = scaledHandleTravel * (I18nManager.isRTL ? -1 : 1);\n\n const variantLayerStyles = useMemo(() => {\n const components = theme.components as unknown as Record<string, Record<string, unknown>>;\n const getLayerStyle = <TStyle,>(layer: string) =>\n components[`switch/variant/default/active/${activeVariant}/${layer}/rest`] as\n TStyle | undefined;\n\n return {\n handle: getLayerStyle<ViewStyle>('handle'),\n handleIcon: getLayerStyle<TextStyle>('handleIcon'),\n switch: getLayerStyle<ViewStyle>('switch'),\n text: getLayerStyle<TextStyle>('rootText'),\n };\n }, [activeVariant, theme]);\n\n // Get animated track color from design tokens (changes when variant changes)\n const trackBackgroundColor = useAnimatedVariantColor(\n resolvedSwitchStyles.switch,\n 'backgroundColor',\n );\n\n const animatedTrackStyle = useAnimatedStyle(() => {\n 'worklet';\n return {\n backgroundColor: withTiming(trackBackgroundColor.value, { duration: animationDuration }),\n };\n });\n\n const animatedHandleStyle = useAnimatedStyle(() => {\n 'worklet';\n return {\n transform: [{ translateX: progress.value * travelDistance }],\n };\n });\n\n const rootStyle: StyleProp<ViewStyle> = useMemo(\n () => [resolvedSwitchStyles.root, switchStaticStyles.root({ disabled })],\n [resolvedSwitchStyles.root, disabled],\n );\n\n // Track and handle grow by the capped factor so the handle (and its icon)\n // stays contained. Scale the track's inset too so the derived travel lands\n // the handle at the same distance from either end.\n const scaleDimensions = useCallback(\n (style: ViewStyle | undefined): ViewStyle | undefined => {\n if (!style || fontScaleFactor === 1) {\n return undefined;\n }\n const { width, height, padding } = style;\n return typeof width === 'number' && typeof height === 'number'\n ? {\n width: Math.round(width * fontScaleFactor),\n height: Math.round(height * fontScaleFactor),\n ...(typeof padding === 'number' && {\n padding: Math.round(padding * fontScaleFactor),\n }),\n }\n : undefined;\n },\n [fontScaleFactor],\n );\n\n const trackStyle: StyleProp<ViewStyle> = useMemo(\n () => [\n resolvedSwitchStyles.switch,\n switchStaticStyles.track,\n variantLayerStyles.switch,\n scaleDimensions(resolvedSwitchStyles.switch as ViewStyle),\n // On web, the animated variant color hook currently resolves to Unistyles'\n // black fallback, so the concrete variant layer provides the track color.\n Platform.OS !== 'web' && animatedTrackStyle,\n ],\n [resolvedSwitchStyles.switch, variantLayerStyles.switch, scaleDimensions, animatedTrackStyle],\n );\n\n const handleStyle: StyleProp<ViewStyle> = useMemo(\n () => [\n resolvedSwitchStyles.handle,\n switchStaticStyles.handle,\n variantLayerStyles.handle,\n scaleDimensions(resolvedSwitchStyles.handle as ViewStyle),\n animatedHandleStyle,\n ],\n [resolvedSwitchStyles.handle, variantLayerStyles.handle, scaleDimensions, animatedHandleStyle],\n );\n\n const accessibilityLabel = typeof label === 'string' ? label : undefined;\n const resolvedAccessibilityHint = accessibilityHint ?? 'Double tap to toggle';\n\n const labelContent = label && (\n <FormLabel\n color=\"inherit\"\n variant=\"inherit\"\n label={label}\n required={required}\n showRequiredAsterisk={required}\n maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n style={[resolvedSwitchStyles.text, variantLayerStyles.text]}\n />\n );\n\n const a11yValue = useMemo(() => ({ text: isOn ? 'On' : 'Off' }), [isOn]);\n\n return (\n <Pressable\n ref={ref}\n onPress={handlePress}\n disabled={disabled}\n accessible\n accessibilityRole=\"switch\"\n accessibilityState={{ checked: isOn, disabled }}\n accessibilityLabel={accessibilityLabel}\n accessibilityHint={resolvedAccessibilityHint}\n accessibilityValue={a11yValue}\n {...viewProps}\n style={rootStyle}\n >\n {labelPosition === 'start' && labelContent}\n\n <Animated.View style={trackStyle} importantForAccessibility=\"no-hide-descendants\">\n <Animated.View style={handleStyle}>\n {onIcon && isOn && (\n <Animated.View style={switchStaticStyles.iconContainer}>\n <IconSlot\n icon={onIcon}\n variant=\"fill\"\n dangerouslySetSize={scaledHandleIconSize}\n allowFontScaling={false}\n style={[\n resolvedSwitchStyles.handleIcon,\n variantLayerStyles.handleIcon,\n scaledHandleIconSize === undefined\n ? undefined\n : {\n fontSize: scaledHandleIconSize,\n lineHeight: getSafeIconCell(scaledHandleIconSize),\n },\n ]}\n />\n </Animated.View>\n )}\n {offIcon && !isOn && (\n <Animated.View style={switchStaticStyles.iconContainer}>\n <IconSlot\n icon={offIcon}\n variant=\"fill\"\n dangerouslySetSize={scaledHandleIconSize}\n allowFontScaling={false}\n style={[\n resolvedSwitchStyles.handleIcon,\n variantLayerStyles.handleIcon,\n scaledHandleIconSize === undefined\n ? undefined\n : {\n fontSize: scaledHandleIconSize,\n lineHeight: getSafeIconCell(scaledHandleIconSize),\n },\n ]}\n />\n </Animated.View>\n )}\n </Animated.View>\n </Animated.View>\n\n {labelPosition === 'end' && labelContent}\n </Pressable>\n );\n});\n\nSwitch.displayName = 'Switch';\n\nconst switchStaticStyles = StyleSheet.create((theme) => ({\n handle: {\n borderRadius: theme.borderRadius.full,\n alignItems: 'center',\n justifyContent: 'center',\n },\n iconContainer: {\n position: 'absolute',\n alignItems: 'center',\n justifyContent: 'center',\n },\n track: {\n justifyContent: 'center',\n borderRadius: theme.borderRadius.full,\n },\n root: ({ disabled }: { disabled: boolean }) => ({\n flexDirection: 'row',\n alignItems: 'center',\n alignSelf: 'flex-start',\n opacity: disabled ? 0.5 : 1,\n }),\n}));\n\nexport { Switch, type SwitchProps };\n"],"mappings":";;;;;;;;;;;;;;AA6CA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmC3B,MAAM,SAAS,KAAK,SAAS,OAAO,EAClC,MAAM,UACN,cAAc,OACd,UACA,OACA,gBAAgB,SAChB,OAAO,MACP,QACA,SACA,WAAW,OACX,UACA,uBACA,mBACA,eAAe,OACf,KACA,GAAG,aACW;CACd,MAAM,eAAe,aAAa,KAAA;CAClC,MAAM,CAAC,cAAc,mBAAmB,SAAS,YAAY;CAC7D,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,MAAM;CACvE,MAAM,OAAO,eAAe,WAAW;CACvC,MAAM,gBAAgB,OAAO,OAAO;CACpC,MAAM,EAAE,UAAU,cAAc;CAIhC,MAAM,gCAAgC,yBAAyB,WAAW,sBAAsB;CAEhG,gBAAgB;EACd,MAAM,qBAAqB,YAAY;GAErC,wBAAwB,MADY,kBAAkB,uBAAuB,CAC/B;;EAEhD,oBAAoB;EAEpB,MAAM,eAAe,kBAAkB,iBACrC,uBACA,wBACD;EACD,aAAa,aAAa,QAAQ;IACjC,EAAE,CAAC;CAGN,MAAM,oBADqB,gBAAgB,uBACI,IAAI;CAEnD,MAAM,WAAW,sBACT,WAAW,OAAO,IAAI,GAAG,EAAE,UAAU,mBAAmB,CAAC,EAC/D,CAAC,MAAM,kBAAkB,CAC1B;CAED,MAAM,cAAc,kBAAkB;EACpC,IAAI,UACF;EAGF,MAAM,WAAW,CAAC;EAElB,IAAI,CAAC,cACH,gBAAgB,SAAS;EAG3B,WAAW,SAAS;IACnB;EAAC;EAAU;EAAM;EAAc;EAAS,CAAC;CAQ5C,MAAM,uBAJsB,aAAa,YAAY;EACnD;EACA,SAAS;EACV,CAC+C,IAAI;CACpD,MAAM,gBAAgB,qBAAqB,KAAK,cAAc,qBAAqB,KAAK;CACxF,MAAM,kBAAkB,aACtB,+BACA,OAAO,kBAAkB,WAAW,gBAAgB,KAAA,EACrD;CAGD,MAAM,iBAAiB,qBAAqB,WAAW;CACvD,MAAM,wBAAwB,aAC5B,+BACA,OAAO,mBAAmB,WAAW,iBAAiB,KAAA,EACvD;CACD,MAAM,uBACJ,OAAO,mBAAmB,WACtB,KAAK,MAAM,iBAAiB,sBAAsB,GAClD,KAAA;CAKN,MAAM,mBAAmB,KAAK,MAAM,qBAAqB,OAAO,QAAQ,gBAAgB;CACxF,MAAM,qBAAqB,KAAK,MAAM,qBAAqB,OAAO,UAAU,gBAAgB;CAC5F,MAAM,oBAAoB,KAAK,MAAM,qBAAqB,OAAO,QAAQ,gBAAgB;CAMzF,MAAM,iBALqB,KAAK,IAC9B,GACA,mBAAmB,oBAAoB,qBAAqB,EAGrB,IAAI,YAAY,QAAQ,KAAK;CAEtE,MAAM,qBAAqB,cAAc;EACvC,MAAM,aAAa,MAAM;EACzB,MAAM,iBAA0B,UAC9B,WAAW,iCAAiC,cAAc,GAAG,MAAM;EAGrE,OAAO;GACL,QAAQ,cAAyB,SAAS;GAC1C,YAAY,cAAyB,aAAa;GAClD,QAAQ,cAAyB,SAAS;GAC1C,MAAM,cAAyB,WAAW;GAC3C;IACA,CAAC,eAAe,MAAM,CAAC;CAG1B,MAAM,uBAAuB,wBAC3B,qBAAqB,QACrB,kBACD;CAED,MAAM,qBAAqB,uBAAuB;AAChD;EACA,OAAO,EACL,iBAAiB,WAAW,qBAAqB,OAAO,EAAE,UAAU,mBAAmB,CAAC,EACzF;GACD;CAEF,MAAM,sBAAsB,uBAAuB;AACjD;EACA,OAAO,EACL,WAAW,CAAC,EAAE,YAAY,SAAS,QAAQ,gBAAgB,CAAC,EAC7D;GACD;CAEF,MAAM,YAAkC,cAChC,CAAC,qBAAqB,MAAM,mBAAmB,KAAK,EAAE,UAAU,CAAC,CAAC,EACxE,CAAC,qBAAqB,MAAM,SAAS,CACtC;CAKD,MAAM,kBAAkB,aACrB,UAAwD;EACvD,IAAI,CAAC,SAAS,oBAAoB,GAChC;EAEF,MAAM,EAAE,OAAO,QAAQ,YAAY;EACnC,OAAO,OAAO,UAAU,YAAY,OAAO,WAAW,WAClD;GACE,OAAO,KAAK,MAAM,QAAQ,gBAAgB;GAC1C,QAAQ,KAAK,MAAM,SAAS,gBAAgB;GAC5C,GAAI,OAAO,YAAY,YAAY,EACjC,SAAS,KAAK,MAAM,UAAU,gBAAgB,EAC/C;GACF,GACD,KAAA;IAEN,CAAC,gBAAgB,CAClB;CAED,MAAM,aAAmC,cACjC;EACJ,qBAAqB;EACrB,mBAAmB;EACnB,mBAAmB;EACnB,gBAAgB,qBAAqB,OAAoB;EAGzD,SAAS,OAAO,SAAS;EAC1B,EACD;EAAC,qBAAqB;EAAQ,mBAAmB;EAAQ;EAAiB;EAAmB,CAC9F;CAED,MAAM,cAAoC,cAClC;EACJ,qBAAqB;EACrB,mBAAmB;EACnB,mBAAmB;EACnB,gBAAgB,qBAAqB,OAAoB;EACzD;EACD,EACD;EAAC,qBAAqB;EAAQ,mBAAmB;EAAQ;EAAiB;EAAoB,CAC/F;CAED,MAAM,qBAAqB,OAAO,UAAU,WAAW,QAAQ,KAAA;CAC/D,MAAM,4BAA4B,qBAAqB;CAEvD,MAAM,eAAe,SACnB,oBAAC,WAAD;EACE,OAAM;EACN,SAAQ;EACD;EACG;EACV,sBAAsB;EACtB,uBAAuB;EACvB,OAAO,CAAC,qBAAqB,MAAM,mBAAmB,KAAK;EAC3D,CAAA;CAGJ,MAAM,YAAY,eAAe,EAAE,MAAM,OAAO,OAAO,OAAO,GAAG,CAAC,KAAK,CAAC;CAExE,OACE,qBAAC,WAAD;EACO;EACL,SAAS;EACC;EACV,YAAA;EACA,mBAAkB;EAClB,oBAAoB;GAAE,SAAS;GAAM;GAAU;EAC3B;EACpB,mBAAmB;EACnB,oBAAoB;EACpB,GAAI;EACJ,OAAO;YAXT;GAaG,kBAAkB,WAAW;GAE9B,oBAAC,SAAS,MAAV;IAAe,OAAO;IAAY,2BAA0B;cAC1D,qBAAC,SAAS,MAAV;KAAe,OAAO;eAAtB,CACG,UAAU,QACT,oBAAC,SAAS,MAAV;MAAe,OAAO,mBAAmB;gBACvC,oBAAC,UAAD;OACE,MAAM;OACN,SAAQ;OACR,oBAAoB;OACpB,kBAAkB;OAClB,OAAO;QACL,qBAAqB;QACrB,mBAAmB;QACnB,yBAAyB,KAAA,IACrB,KAAA,IACA;SACE,UAAU;SACV,YAAY,gBAAgB,qBAAqB;SAClD;QACN;OACD,CAAA;MACY,CAAA,EAEjB,WAAW,CAAC,QACX,oBAAC,SAAS,MAAV;MAAe,OAAO,mBAAmB;gBACvC,oBAAC,UAAD;OACE,MAAM;OACN,SAAQ;OACR,oBAAoB;OACpB,kBAAkB;OAClB,OAAO;QACL,qBAAqB;QACrB,mBAAmB;QACnB,yBAAyB,KAAA,IACrB,KAAA,IACA;SACE,UAAU;SACV,YAAY,gBAAgB,qBAAqB;SAClD;QACN;OACD,CAAA;MACY,CAAA,CAEJ;;IACF,CAAA;GAEf,kBAAkB,SAAS;GAClB;;EAEd;AAEF,OAAO,cAAc;AAErB,MAAM,qBAAqBA,aAAW,QAAQ,WAAW;CACvD,QAAQ;EACN,cAAc,MAAM,aAAa;EACjC,YAAY;EACZ,gBAAgB;EACjB;CACD,eAAe;EACb,UAAU;EACV,YAAY;EACZ,gBAAgB;EACjB;CACD,OAAO;EACL,gBAAgB;EAChB,cAAc,MAAM,aAAa;EAClC;CACD,OAAO,EAAE,gBAAuC;EAC9C,eAAe;EACf,YAAY;EACZ,WAAW;EACX,SAAS,WAAW,KAAM;EAC3B;CACF,EAAE"}
|
|
@@ -49,7 +49,7 @@ const Tab = (0, react.memo)(function Tab({ value, children, startIcon, endIcon,
|
|
|
49
49
|
const { selectedId, setSelectedId, registerTab, unregisterTab, setTabLayout } = require_components_Tabs_tabsContexts.useTabSelectionContext();
|
|
50
50
|
const { theme } = (0, react_native_unistyles.useUnistyles)();
|
|
51
51
|
const [pressed, setPressed] = (0, react.useState)(false);
|
|
52
|
-
const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier)
|
|
52
|
+
const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
|
|
53
53
|
const selected = !disabled && selectedId === uid;
|
|
54
54
|
const active = selected ? "on" : "off";
|
|
55
55
|
const interaction = pressed ? "pressed" : "rest";
|
|
@@ -47,7 +47,7 @@ const Tab = memo(function Tab({ value, children, startIcon, endIcon, disabled, s
|
|
|
47
47
|
const { selectedId, setSelectedId, registerTab, unregisterTab, setTabLayout } = useTabSelectionContext();
|
|
48
48
|
const { theme } = useUnistyles();
|
|
49
49
|
const [pressed, setPressed] = useState(false);
|
|
50
|
-
const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier)
|
|
50
|
+
const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
|
|
51
51
|
const selected = !disabled && selectedId === uid;
|
|
52
52
|
const active = selected ? "on" : "off";
|
|
53
53
|
const interaction = pressed ? "pressed" : "rest";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","names":["RNText","Pressable"],"sources":["../../../src/components/Tabs/Tab.tsx"],"sourcesContent":["import type { UniversalTabProps } from '@yahoo/uds-types';\nimport type { ReactElement, ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useId, useMemo, useState } from 'react';\nimport type { LayoutChangeEvent, PressableProps, TextStyle, ViewStyle } from 'react-native';\nimport { Text as RNText, View } from 'react-native';\n// eslint-disable-next-line uds/no-use-unistyles -- theme.components path lookups for tab layers\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../../generated/styles';\nimport { ResolvedControlFontScalingProvider } from '../../fontScaling/FontScalingContext';\nimport { useFontScale } from '../../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../../fontScaling/useMaxFontSizeMultiplier';\nimport type { IconSlotType } from '../IconSlot';\nimport { IconSlot } from '../IconSlot';\nimport { Pressable } from '../Pressable';\nimport { useTabSelectionContext, useTabsVisualContext } from './tabsContexts';\nimport { getMergedTabLayerStyle, getTabLayerStyle } from './tabTheme';\n\nconst PRIMARY_TAB_UNDERLINE_HEIGHT = 2;\n\ninterface TabProps\n extends\n Omit<PressableProps, 'children' | 'style' | 'disabled' | 'onPress'>,\n Omit<UniversalTabProps, 'asChild' | 'className' | 'startIcon' | 'endIcon'> {\n children: UniversalTabProps['children'];\n startIcon?: IconSlotType;\n endIcon?: IconSlotType;\n style?: ViewStyle;\n}\n\nconst CLEAR_SELECTION_CHROME: ViewStyle = {\n backgroundColor: 'transparent',\n borderWidth: 0,\n borderColor: 'transparent',\n shadowOpacity: 0,\n elevation: 0,\n boxShadow: [],\n};\n\nfunction TabLabel({\n style,\n maxFontSizeMultiplier,\n children,\n}: {\n style: TextStyle;\n maxFontSizeMultiplier: number;\n children: ReactNode;\n}) {\n if (typeof children === 'string' || typeof children === 'number') {\n return (\n <RNText style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>\n {children}\n </RNText>\n );\n }\n return (\n <ResolvedControlFontScalingProvider maxFontSizeMultiplier={maxFontSizeMultiplier}>\n {children as ReactElement}\n </ResolvedControlFontScalingProvider>\n );\n}\n\n/**\n * **⚙️ Tab**\n *\n * @description\n * A single selectable tab. Must be used inside {@link TabList} within {@link Tabs}.\n *\n * @category Navigation\n * @platform mobile\n */\nconst Tab = memo(function Tab({\n value,\n children,\n startIcon,\n endIcon,\n disabled,\n style,\n ...pressableRest\n}: TabProps) {\n const generatedId = useId();\n const uid = value ?? `uds-tab-${generatedId}`;\n const { variant: visualVariant, reduceMotion, maxFontSizeMultiplier } = useTabsVisualContext();\n const { selectedId, setSelectedId, registerTab, unregisterTab, setTabLayout } =\n useTabSelectionContext();\n const { theme } = useUnistyles();\n const [pressed, setPressed] = useState(false);\n\n // One capped factor governs the label, icons, and the tab's fixed height.\n const resolvedMaxFontSizeMultiplier =\n useMaxFontSizeMultiplier('control', maxFontSizeMultiplier) ?? 0;\n\n const selected = !disabled && selectedId === uid;\n const active: 'on' | 'off' = selected ? 'on' : 'off';\n const interaction: 'rest' | 'pressed' = pressed ? 'pressed' : 'rest';\n\n useEffect(() => {\n registerTab(uid);\n return () => {\n unregisterTab(uid);\n };\n }, [uid, registerTab, unregisterTab]);\n\n const rootBase = useMemo(\n () => getMergedTabLayerStyle(theme, visualVariant, active, 'root', interaction) as ViewStyle,\n [theme, visualVariant, active, interaction],\n );\n const textStyle = useMemo(\n () =>\n getMergedTabLayerStyle(theme, visualVariant, active, 'rootText', interaction) as TextStyle,\n [theme, visualVariant, active, interaction],\n );\n const fontScaleFactor = useFontScale(\n resolvedMaxFontSizeMultiplier,\n (typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : undefined) ??\n (typeof textStyle.fontSize === 'number' ? textStyle.fontSize : undefined),\n );\n const iconStyle = useMemo(\n () => getMergedTabLayerStyle(theme, visualVariant, active, 'icon', interaction) as TextStyle,\n [theme, visualVariant, active, interaction],\n );\n\n const iconColor = ((): StyleProps['color'] | undefined => {\n const c = iconStyle?.color;\n if (c === undefined || c === null) {\n return undefined;\n }\n return c as StyleProps['color'];\n })();\n\n /** Inactive primary tabs use transparent underline tokens on web; RN has no CSS vars for that layer. */\n const showPrimaryPerTabUnderline = visualVariant === 'primary' && !(selected && !reduceMotion);\n\n const primaryUnderlineColor = useMemo(() => {\n if (visualVariant !== 'primary') {\n return undefined;\n }\n if (selected && reduceMotion) {\n const onText = getTabLayerStyle(theme, 'primary', 'on', 'rootText', 'rest') as TextStyle;\n const c = onText.color;\n if (typeof c === 'string') {\n return c;\n }\n }\n return 'transparent';\n }, [visualVariant, selected, reduceMotion, theme]);\n\n const rootStyle = useMemo((): ViewStyle => {\n const base: ViewStyle = {\n ...rootBase,\n flexDirection: 'row',\n alignItems: 'center',\n flexShrink: 0,\n zIndex: 1,\n position: 'relative',\n };\n // A fixed token height grows with the capped label so text never clips.\n if (fontScaleFactor !== 1 && typeof base.height === 'number') {\n base.height = Math.round(base.height * fontScaleFactor);\n }\n if (selected && !reduceMotion) {\n return { ...base, ...CLEAR_SELECTION_CHROME };\n }\n return base;\n }, [rootBase, fontScaleFactor, selected, reduceMotion]);\n\n const onLayout = useCallback(\n (e: LayoutChangeEvent) => {\n setTabLayout(uid, e.nativeEvent.layout);\n },\n [uid, setTabLayout],\n );\n\n const onPress = useCallback(() => {\n if (disabled) {\n return;\n }\n setSelectedId(uid);\n }, [disabled, setSelectedId, uid]);\n\n return (\n <Pressable\n accessibilityRole=\"tab\"\n accessibilityState={{ selected, disabled: !!disabled }}\n disabled={disabled}\n onPress={onPress}\n onPressIn={() => setPressed(true)}\n onPressOut={() => setPressed(false)}\n onLayout={onLayout}\n style={[rootStyle, style]}\n {...pressableRest}\n >\n {startIcon ? (\n <IconSlot\n icon={startIcon}\n size=\"sm\"\n maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n style={iconStyle}\n {...(iconColor !== undefined ? { color: iconColor } : {})}\n />\n ) : null}\n <TabLabel style={textStyle} maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}>\n {children}\n </TabLabel>\n {endIcon ? (\n <IconSlot\n icon={endIcon}\n size=\"sm\"\n maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n style={iconStyle}\n {...(iconColor !== undefined ? { color: iconColor } : {})}\n />\n ) : null}\n {showPrimaryPerTabUnderline &&\n primaryUnderlineColor &&\n primaryUnderlineColor !== 'transparent' ? (\n <View\n accessibilityElementsHidden\n importantForAccessibility=\"no-hide-descendants\"\n pointerEvents=\"none\"\n style={{\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n height: PRIMARY_TAB_UNDERLINE_HEIGHT,\n backgroundColor: primaryUnderlineColor,\n }}\n />\n ) : null}\n </Pressable>\n );\n});\n\nTab.displayName = 'Tab';\n\nexport { Tab };\nexport type { TabProps };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tab.js","names":["RNText","Pressable"],"sources":["../../../src/components/Tabs/Tab.tsx"],"sourcesContent":["import type { UniversalTabProps } from '@yahoo/uds-types';\nimport type { ReactElement, ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useId, useMemo, useState } from 'react';\nimport type { LayoutChangeEvent, PressableProps, TextStyle, ViewStyle } from 'react-native';\nimport { Text as RNText, View } from 'react-native';\n// eslint-disable-next-line uds/no-use-unistyles -- theme.components path lookups for tab layers\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../../generated/styles';\nimport { ResolvedControlFontScalingProvider } from '../../fontScaling/FontScalingContext';\nimport { useFontScale } from '../../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../../fontScaling/useMaxFontSizeMultiplier';\nimport type { IconSlotType } from '../IconSlot';\nimport { IconSlot } from '../IconSlot';\nimport { Pressable } from '../Pressable';\nimport { useTabSelectionContext, useTabsVisualContext } from './tabsContexts';\nimport { getMergedTabLayerStyle, getTabLayerStyle } from './tabTheme';\n\nconst PRIMARY_TAB_UNDERLINE_HEIGHT = 2;\n\ninterface TabProps\n extends\n Omit<PressableProps, 'children' | 'style' | 'disabled' | 'onPress'>,\n Omit<UniversalTabProps, 'asChild' | 'className' | 'startIcon' | 'endIcon'> {\n children: UniversalTabProps['children'];\n startIcon?: IconSlotType;\n endIcon?: IconSlotType;\n style?: ViewStyle;\n}\n\nconst CLEAR_SELECTION_CHROME: ViewStyle = {\n backgroundColor: 'transparent',\n borderWidth: 0,\n borderColor: 'transparent',\n shadowOpacity: 0,\n elevation: 0,\n boxShadow: [],\n};\n\nfunction TabLabel({\n style,\n maxFontSizeMultiplier,\n children,\n}: {\n style: TextStyle;\n maxFontSizeMultiplier?: number;\n children: ReactNode;\n}) {\n if (typeof children === 'string' || typeof children === 'number') {\n return (\n <RNText style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>\n {children}\n </RNText>\n );\n }\n return (\n <ResolvedControlFontScalingProvider maxFontSizeMultiplier={maxFontSizeMultiplier}>\n {children as ReactElement}\n </ResolvedControlFontScalingProvider>\n );\n}\n\n/**\n * **⚙️ Tab**\n *\n * @description\n * A single selectable tab. Must be used inside {@link TabList} within {@link Tabs}.\n *\n * @category Navigation\n * @platform mobile\n */\nconst Tab = memo(function Tab({\n value,\n children,\n startIcon,\n endIcon,\n disabled,\n style,\n ...pressableRest\n}: TabProps) {\n const generatedId = useId();\n const uid = value ?? `uds-tab-${generatedId}`;\n const { variant: visualVariant, reduceMotion, maxFontSizeMultiplier } = useTabsVisualContext();\n const { selectedId, setSelectedId, registerTab, unregisterTab, setTabLayout } =\n useTabSelectionContext();\n const { theme } = useUnistyles();\n const [pressed, setPressed] = useState(false);\n\n // One capped factor governs the label, icons, and the tab's fixed height.\n const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n\n const selected = !disabled && selectedId === uid;\n const active: 'on' | 'off' = selected ? 'on' : 'off';\n const interaction: 'rest' | 'pressed' = pressed ? 'pressed' : 'rest';\n\n useEffect(() => {\n registerTab(uid);\n return () => {\n unregisterTab(uid);\n };\n }, [uid, registerTab, unregisterTab]);\n\n const rootBase = useMemo(\n () => getMergedTabLayerStyle(theme, visualVariant, active, 'root', interaction) as ViewStyle,\n [theme, visualVariant, active, interaction],\n );\n const textStyle = useMemo(\n () =>\n getMergedTabLayerStyle(theme, visualVariant, active, 'rootText', interaction) as TextStyle,\n [theme, visualVariant, active, interaction],\n );\n const fontScaleFactor = useFontScale(\n resolvedMaxFontSizeMultiplier,\n (typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : undefined) ??\n (typeof textStyle.fontSize === 'number' ? textStyle.fontSize : undefined),\n );\n const iconStyle = useMemo(\n () => getMergedTabLayerStyle(theme, visualVariant, active, 'icon', interaction) as TextStyle,\n [theme, visualVariant, active, interaction],\n );\n\n const iconColor = ((): StyleProps['color'] | undefined => {\n const c = iconStyle?.color;\n if (c === undefined || c === null) {\n return undefined;\n }\n return c as StyleProps['color'];\n })();\n\n /** Inactive primary tabs use transparent underline tokens on web; RN has no CSS vars for that layer. */\n const showPrimaryPerTabUnderline = visualVariant === 'primary' && !(selected && !reduceMotion);\n\n const primaryUnderlineColor = useMemo(() => {\n if (visualVariant !== 'primary') {\n return undefined;\n }\n if (selected && reduceMotion) {\n const onText = getTabLayerStyle(theme, 'primary', 'on', 'rootText', 'rest') as TextStyle;\n const c = onText.color;\n if (typeof c === 'string') {\n return c;\n }\n }\n return 'transparent';\n }, [visualVariant, selected, reduceMotion, theme]);\n\n const rootStyle = useMemo((): ViewStyle => {\n const base: ViewStyle = {\n ...rootBase,\n flexDirection: 'row',\n alignItems: 'center',\n flexShrink: 0,\n zIndex: 1,\n position: 'relative',\n };\n // A fixed token height grows with the capped label so text never clips.\n if (fontScaleFactor !== 1 && typeof base.height === 'number') {\n base.height = Math.round(base.height * fontScaleFactor);\n }\n if (selected && !reduceMotion) {\n return { ...base, ...CLEAR_SELECTION_CHROME };\n }\n return base;\n }, [rootBase, fontScaleFactor, selected, reduceMotion]);\n\n const onLayout = useCallback(\n (e: LayoutChangeEvent) => {\n setTabLayout(uid, e.nativeEvent.layout);\n },\n [uid, setTabLayout],\n );\n\n const onPress = useCallback(() => {\n if (disabled) {\n return;\n }\n setSelectedId(uid);\n }, [disabled, setSelectedId, uid]);\n\n return (\n <Pressable\n accessibilityRole=\"tab\"\n accessibilityState={{ selected, disabled: !!disabled }}\n disabled={disabled}\n onPress={onPress}\n onPressIn={() => setPressed(true)}\n onPressOut={() => setPressed(false)}\n onLayout={onLayout}\n style={[rootStyle, style]}\n {...pressableRest}\n >\n {startIcon ? (\n <IconSlot\n icon={startIcon}\n size=\"sm\"\n maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n style={iconStyle}\n {...(iconColor !== undefined ? { color: iconColor } : {})}\n />\n ) : null}\n <TabLabel style={textStyle} maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}>\n {children}\n </TabLabel>\n {endIcon ? (\n <IconSlot\n icon={endIcon}\n size=\"sm\"\n maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n style={iconStyle}\n {...(iconColor !== undefined ? { color: iconColor } : {})}\n />\n ) : null}\n {showPrimaryPerTabUnderline &&\n primaryUnderlineColor &&\n primaryUnderlineColor !== 'transparent' ? (\n <View\n accessibilityElementsHidden\n importantForAccessibility=\"no-hide-descendants\"\n pointerEvents=\"none\"\n style={{\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n height: PRIMARY_TAB_UNDERLINE_HEIGHT,\n backgroundColor: primaryUnderlineColor,\n }}\n />\n ) : null}\n </Pressable>\n );\n});\n\nTab.displayName = 'Tab';\n\nexport { Tab };\nexport type { TabProps };\n"],"mappings":"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"}
|
package/dist/components/Text.cjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
require("../_virtual/_rolldown/runtime.cjs");
|
|
4
|
+
const require_fontScaling_FontScalingContext = require("../fontScaling/FontScalingContext.cjs");
|
|
4
5
|
const require_fontScaling_constants = require("../fontScaling/constants.cjs");
|
|
5
6
|
const require_fontScaling_useMaxFontSizeMultiplier = require("../fontScaling/useMaxFontSizeMultiplier.cjs");
|
|
6
7
|
let react = require("react");
|
|
@@ -57,7 +58,7 @@ const Text = (0, react.memo)(function Text({ color = "primary", variant = "body1
|
|
|
57
58
|
const resolvedLineHeight = lineHeight === "none" ? void 0 : lineHeight ?? (hasCJKContent(children) ? void 0 : resolvedVariant);
|
|
58
59
|
const resolvedLetterSpacing = letterSpacing ?? resolvedVariant;
|
|
59
60
|
const baseVariant = resolvedVariant?.split("/")[0];
|
|
60
|
-
const defaultDynamicTypeRamp = baseVariant ? require_fontScaling_constants.DEFAULT_DYNAMIC_TYPE_RAMPS[baseVariant] : void 0;
|
|
61
|
+
const defaultDynamicTypeRamp = require_fontScaling_FontScalingContext.useFontScalingEnabled() && baseVariant ? require_fontScaling_constants.DEFAULT_DYNAMIC_TYPE_RAMPS[baseVariant] : void 0;
|
|
61
62
|
const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier(resolvedVariant, maxFontSizeMultiplier);
|
|
62
63
|
generated_styles.styles.useVariants({
|
|
63
64
|
color: resolvedColor,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.cts","names":[],"sources":["../../src/components/Text.tsx"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"Text.d.cts","names":[],"sources":["../../src/components/Text.tsx"],"mappings":";;;;;;;KAYK,WAAA,GAAc,OAAA,CACjB,WAAA,CAAY,UAAA;AAAA,KAGT,eAAA,GAAkB,WAAA;AAAA,KAIlB,kBAAA;AAAA,UAuBK,SAAA,SAAkB,WAAA;;EAE1B,GAAA,GAAM,GAAA,CAAI,MAAA;EAhCV;EAkCA,KAAA,GAAQ,UAAA;EAnCgB;EAqCxB,OAAA,GAAU,eAAA;EArCO;;;;;AACK;;;EA6CtB,qBAAA;EA1CgC;EA4ChC,UAAA,GAAa,UAAA;EAxCQ;EA0CrB,QAAA,GAAW,UAAA;EA1CU;EA4CrB,UAAA,GAAa,UAAA;EArBL;EAuBR,UAAA,GAAa,UAAA;;EAEb,aAAA,GAAgB,UAAA;EAvBV;EAyBN,SAAA,GAAY,UAAA;EArBF;EAuBV,aAAA,GAAgB,UAAA;EAVL;EAYX,kBAAA,GAAqB,kBAAA;EAErB,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,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EAEb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EAEZ,UAAA,GAAa,UAAA;EAEb,aAAA,GAAgB,SAAA;EAEhB,MAAA;EACA,KAAA;EACA,SAAA;EACA,SAAA;EACA,QAAA;EACA,QAAA;EAEA,mBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiCI,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","names":[],"sources":["../../src/components/Text.tsx"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"Text.d.ts","names":[],"sources":["../../src/components/Text.tsx"],"mappings":";;;;;;;KAYK,WAAA,GAAc,OAAA,CACjB,WAAA,CAAY,UAAA;AAAA,KAGT,eAAA,GAAkB,WAAA;AAAA,KAIlB,kBAAA;AAAA,UAuBK,SAAA,SAAkB,WAAA;;EAE1B,GAAA,GAAM,GAAA,CAAI,MAAA;EAhCV;EAkCA,KAAA,GAAQ,UAAA;EAnCgB;EAqCxB,OAAA,GAAU,eAAA;EArCO;;;;;AACK;;;EA6CtB,qBAAA;EA1CgC;EA4ChC,UAAA,GAAa,UAAA;EAxCQ;EA0CrB,QAAA,GAAW,UAAA;EA1CU;EA4CrB,UAAA,GAAa,UAAA;EArBL;EAuBR,UAAA,GAAa,UAAA;;EAEb,aAAA,GAAgB,UAAA;EAvBV;EAyBN,SAAA,GAAY,UAAA;EArBF;EAuBV,aAAA,GAAgB,UAAA;EAVL;EAYX,kBAAA,GAAqB,kBAAA;EAErB,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,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EAEb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EAEZ,UAAA,GAAa,UAAA;EAEb,aAAA,GAAgB,SAAA;EAEhB,MAAA;EACA,KAAA;EACA,SAAA;EACA,SAAA;EACA,QAAA;EACA,QAAA;EAEA,mBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiCI,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA"}
|