@yahoo/uds-mobile 2.22.0 → 2.23.0

package/dist/components/Select/SelectContent.d.cts

@@ -0,0 +1,31 @@
+
+import { SelectContentSize, SelectContentVariant } from "./types.cjs";
+import * as _$react from "react";
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+
+//#region src/components/Select/SelectContent.d.ts
+interface SelectContentProps {
+  children?: ReactNode;
+  size?: SelectContentSize;
+  variant?: SelectContentVariant;
+  /** When true, the panel stays open when the user taps outside. */
+  keepOpenOnInteractOutside?: boolean;
+  /** Maximum height of the options list in pixels. @default 240 */
+  maxHeight?: number;
+  /** Distance between the trigger and the content panel. @default 4 */
+  gutter?: number;
+  /** When true, the content panel matches the trigger width. @default true */
+  sameWidth?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+/**
+ * **▾ Select content panel**
+ *
+ * Floating listbox container for {@link SelectItem} options.
+ */
+declare const SelectContent: _$react.NamedExoticComponent<SelectContentProps>;
+//#endregion
+export { SelectContent, type SelectContentProps };
+//# sourceMappingURL=SelectContent.d.cts.map

package/dist/components/Select/SelectContent.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectContent.d.cts","names":[],"sources":["../../../src/components/Select/SelectContent.tsx"],"mappings":";;;;;;;UAmCU,kBAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,iBAAA;EACP,OAAA,GAAU,oBAAA;EAHgB;EAK1B,yBAAA;EAJW;EAMX,SAAA;EAJU;EAMV,MAAA;EAGQ;EADR,SAAA;EACA,KAAA,GAAQ,SAAA,CAAU,SAAA;EAClB,MAAA;AAAA;;;;;;cAQI,aAAA,EAAa,OAAA,CAAA,oBAAA,CAAA,kBAAA"}

package/dist/components/Select/SelectContent.d.ts

@@ -0,0 +1,31 @@
+
+import { SelectContentSize, SelectContentVariant } from "./types.js";
+import * as _$react from "react";
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+
+//#region src/components/Select/SelectContent.d.ts
+interface SelectContentProps {
+  children?: ReactNode;
+  size?: SelectContentSize;
+  variant?: SelectContentVariant;
+  /** When true, the panel stays open when the user taps outside. */
+  keepOpenOnInteractOutside?: boolean;
+  /** Maximum height of the options list in pixels. @default 240 */
+  maxHeight?: number;
+  /** Distance between the trigger and the content panel. @default 4 */
+  gutter?: number;
+  /** When true, the content panel matches the trigger width. @default true */
+  sameWidth?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+/**
+ * **▾ Select content panel**
+ *
+ * Floating listbox container for {@link SelectItem} options.
+ */
+declare const SelectContent: _$react.NamedExoticComponent<SelectContentProps>;
+//#endregion
+export { SelectContent, type SelectContentProps };
+//# sourceMappingURL=SelectContent.d.ts.map

package/dist/components/Select/SelectContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectContent.d.ts","names":[],"sources":["../../../src/components/Select/SelectContent.tsx"],"mappings":";;;;;;;UAmCU,kBAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,iBAAA;EACP,OAAA,GAAU,oBAAA;EAHgB;EAK1B,yBAAA;EAJW;EAMX,SAAA;EAJU;EAMV,MAAA;EAGQ;EADR,SAAA;EACA,KAAA,GAAQ,SAAA,CAAU,SAAA;EAClB,MAAA;AAAA;;;;;;cAQI,aAAA,EAAa,OAAA,CAAA,oBAAA,CAAA,kBAAA"}

package/dist/components/Select/SelectContent.js

@@ -0,0 +1,147 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { VStack } from "../VStack.js";
+import { useAnchoredPosition } from "../internal/Overlay/useAnchoredPosition.js";
+import { PopoverPortalLayer } from "../Popover/PopoverPortalLayer.js";
+import { useSelectContext } from "./selectContext.js";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { ScrollView, StyleSheet, View } from "react-native";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { selectContentStyles } from "../../../generated/styles";
+import Animated, { Easing, useAnimatedStyle, useDerivedValue, withTiming } from "react-native-reanimated";
+//#region src/components/Select/SelectContent.tsx
+const DEFAULT_OFFSET = 4;
+const DEFAULT_MAX_HEIGHT = 240;
+const ANIMATION_DURATION = 200;
+const OFFSCREEN_REGISTRY_STYLE = StyleSheet.create({ registry: {
+	position: "absolute",
+	top: 0,
+	left: 0,
+	width: 1,
+	height: 1,
+	opacity: 0,
+	overflow: "hidden",
+	zIndex: -1
+} });
+/**
+* **▾ Select content panel**
+*
+* Floating listbox container for {@link SelectItem} options.
+*/
+const SelectContent = memo(function SelectContent({ children, size: _size = "default", variant: _variant = "default", keepOpenOnInteractOutside = false, maxHeight = DEFAULT_MAX_HEIGHT, gutter = DEFAULT_OFFSET, sameWidth = true, style, testID }) {
+	const { open, setOpen, triggerRect, reduceMotion } = useSelectContext();
+	const [contentSize, setContentSize] = useState({
+		width: 0,
+		height: 0
+	});
+	const [shouldRender, setShouldRender] = useState(open);
+	const dismiss = useCallback(() => {
+		if (keepOpenOnInteractOutside) return;
+		setOpen(false);
+	}, [keepOpenOnInteractOutside, setOpen]);
+	const { contentStyle, anchorReady, maxWidth: positionedMaxWidth } = useAnchoredPosition({
+		triggerRect,
+		contentSize,
+		placement: "bottom",
+		offset: gutter,
+		sameWidth,
+		width: sameWidth ? "trigger" : "content",
+		avoidCollisions: true,
+		collisionPadding: 12
+	});
+	const isPositionedOpen = open && anchorReady && contentSize.height > 0;
+	const progress = useDerivedValue(() => withTiming(isPositionedOpen ? 1 : 0, {
+		duration: reduceMotion ? 0 : ANIMATION_DURATION,
+		easing: Easing.out(Easing.ease)
+	}), [isPositionedOpen, reduceMotion]);
+	const animatedStyle = useAnimatedStyle(() => ({
+		opacity: progress.value,
+		transform: [{ scale: .97 + progress.value * .03 }, { translateY: (1 - progress.value) * 8 }]
+	}));
+	const handleLayout = useCallback((event) => {
+		const { width, height } = event.nativeEvent.layout;
+		setContentSize({
+			width,
+			height
+		});
+	}, []);
+	useEffect(() => {
+		if (open) {
+			setShouldRender(true);
+			return;
+		}
+		if (reduceMotion) {
+			setShouldRender(false);
+			setContentSize({
+				width: 0,
+				height: 0
+			});
+			return;
+		}
+		const timeout = setTimeout(() => {
+			setShouldRender(false);
+			setContentSize({
+				width: 0,
+				height: 0
+			});
+		}, ANIMATION_DURATION);
+		return () => clearTimeout(timeout);
+	}, [open, reduceMotion]);
+	selectContentStyles.useVariants({});
+	const panelStyle = useMemo(() => StyleSheet.flatten([
+		selectContentStyles.root,
+		{
+			maxHeight,
+			maxWidth: positionedMaxWidth > 0 ? positionedMaxWidth : void 0,
+			overflow: "hidden",
+			zIndex: 1
+		},
+		style
+	]), [
+		maxHeight,
+		positionedMaxWidth,
+		selectContentStyles.root,
+		style
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [!open ? /* @__PURE__ */ jsx(View, {
+		accessibilityElementsHidden: true,
+		importantForAccessibility: "no-hide-descendants",
+		pointerEvents: "none",
+		style: OFFSCREEN_REGISTRY_STYLE.registry,
+		children
+	}) : null, open && shouldRender ? /* @__PURE__ */ jsx(PopoverPortalLayer, {
+		open,
+		dismissible: !keepOpenOnInteractOutside,
+		onDismiss: dismiss,
+		children: () => /* @__PURE__ */ jsx(Animated.View, {
+			testID,
+			style: [
+				contentStyle,
+				animatedStyle,
+				{
+					overflow: "visible",
+					zIndex: 1e3
+				}
+			],
+			onLayout: handleLayout,
+			accessibilityRole: "menu",
+			children: /* @__PURE__ */ jsx(View, {
+				style: panelStyle,
+				children: /* @__PURE__ */ jsx(ScrollView, {
+					keyboardShouldPersistTaps: "handled",
+					nestedScrollEnabled: true,
+					style: { maxHeight },
+					children: /* @__PURE__ */ jsx(VStack, {
+						alignItems: "stretch",
+						justifyContent: "flex-start",
+						children
+					})
+				})
+			})
+		})
+	}) : null] });
+});
+SelectContent.displayName = "SelectContent";
+//#endregion
+export { SelectContent };
+
+//# sourceMappingURL=SelectContent.js.map

package/dist/components/Select/SelectContent.js.map

@@ -0,0 +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 { useSelectContext } 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 { open, setOpen, triggerRect, reduceMotion } = useSelectContext();\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            <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          )}\n        </PopoverPortalLayer>\n      ) : null}\n    </>\n  );\n});\n\nSelectContent.displayName = 'SelectContent';\n\nexport { SelectContent, type SelectContentProps };\n"],"mappings":"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"}

package/dist/components/Select/SelectItem.cjs

@@ -0,0 +1,138 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_HStack = require("../HStack.cjs");
+const require_components_IconSlot = require("../IconSlot.cjs");
+const require_components_Select_selectContext = require("./selectContext.cjs");
+const require_components_Select_selectItemTheme = require("./selectItemTheme.cjs");
+let react = require("react");
+let react_native = require("react-native");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_native_unistyles = require("react-native-unistyles");
+let react_native_reanimated = require("react-native-reanimated");
+react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
+//#region src/components/Select/SelectItem.tsx
+/**
+* **▾ Select item**
+*
+* A single selectable option inside {@link SelectContent}.
+*/
+const SelectItem = (0, react.memo)(function SelectItem({ value, disabled, children, style, testID }) {
+	const { value: selectedValue, setValue, setOpen, open, registerItem, unregisterItem, highlightedValue, setHighlightedValue, reduceMotion } = require_components_Select_selectContext.useSelectContext();
+	const { theme } = (0, react_native_unistyles.useUnistyles)();
+	const [isPressed, setIsPressed] = (0, react.useState)(false);
+	const label = (0, react.useMemo)(() => {
+		if (typeof children === "string" || typeof children === "number") return String(children);
+		return value;
+	}, [children, value]);
+	(0, react.useEffect)(() => {
+		registerItem(value, label);
+		return () => unregisterItem(value);
+	}, [
+		label,
+		registerItem,
+		unregisterItem,
+		value
+	]);
+	const isSelected = selectedValue === value;
+	const interaction = require_components_Select_selectItemTheme.resolveSelectItemInteractionState({
+		isPressed,
+		isHighlighted: highlightedValue === value
+	});
+	const rootStyle = (0, react.useMemo)(() => [
+		require_components_Select_selectItemTheme.getMergedSelectItemLayerStyle(theme, "root", interaction, isSelected),
+		{
+			flexDirection: "row",
+			alignItems: "center",
+			justifyContent: "space-between",
+			width: "100%",
+			opacity: disabled ? .5 : 1
+		},
+		style
+	], [
+		disabled,
+		interaction,
+		isSelected,
+		style,
+		theme
+	]);
+	const textStyle = (0, react.useMemo)(() => require_components_Select_selectItemTheme.getMergedSelectItemLayerStyle(theme, "text", interaction, isSelected), [
+		interaction,
+		isSelected,
+		theme
+	]);
+	const endIconStyle = (0, react.useMemo)(() => require_components_Select_selectItemTheme.getMergedSelectItemLayerStyle(theme, "endIcon", interaction, isSelected), [
+		interaction,
+		isSelected,
+		theme
+	]);
+	const checkScale = (0, react_native_reanimated.useDerivedValue)(() => (0, react_native_reanimated.withTiming)(isSelected ? 1 : 0, {
+		duration: reduceMotion ? 0 : 120,
+		easing: react_native_reanimated.Easing.out(react_native_reanimated.Easing.ease)
+	}), [isSelected, reduceMotion]);
+	const checkAnimatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({
+		opacity: checkScale.value,
+		transform: [{ scale: .7 + checkScale.value * .3 }]
+	}));
+	const handlePress = (0, react.useCallback)(() => {
+		if (disabled) return;
+		setValue(value);
+		setOpen(false);
+		setHighlightedValue(null);
+	}, [
+		disabled,
+		setHighlightedValue,
+		setOpen,
+		setValue,
+		value
+	]);
+	const handlePressIn = (0, react.useCallback)(() => {
+		if (disabled) return;
+		setIsPressed(true);
+		setHighlightedValue(value);
+	}, [
+		disabled,
+		setHighlightedValue,
+		value
+	]);
+	const handlePressOut = (0, react.useCallback)(() => {
+		setIsPressed(false);
+	}, []);
+	if (!open) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.Pressable, {
+		testID,
+		disabled,
+		onPress: handlePress,
+		onPressIn: handlePressIn,
+		onPressOut: handlePressOut,
+		style: rootStyle,
+		accessibilityRole: "menuitem",
+		accessibilityState: {
+			disabled: !!disabled,
+			selected: isSelected
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_HStack.HStack, {
+			columnGap: "2",
+			alignItems: "center",
+			justifyContent: "flex-start",
+			style: { flex: 1 },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+				style: textStyle,
+				numberOfLines: 1,
+				children
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
+			style: checkAnimatedStyle,
+			pointerEvents: "none",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: "Check",
+				size: "sm",
+				variant: "fill",
+				style: endIconStyle
+			})
+		})]
+	});
+});
+SelectItem.displayName = "SelectItem";
+//#endregion
+exports.SelectItem = SelectItem;

package/dist/components/Select/SelectItem.d.cts

@@ -0,0 +1,24 @@
+
+import * as _$react from "react";
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+
+//#region src/components/Select/SelectItem.d.ts
+interface SelectItemProps {
+  /** Value submitted when this option is selected. */
+  value: string;
+  /** Whether this option is disabled. */
+  disabled?: boolean;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+/**
+ * **▾ Select item**
+ *
+ * A single selectable option inside {@link SelectContent}.
+ */
+declare const SelectItem: _$react.NamedExoticComponent<SelectItemProps>;
+//#endregion
+export { SelectItem, type SelectItemProps };
+//# sourceMappingURL=SelectItem.d.cts.map

package/dist/components/Select/SelectItem.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectItem.d.cts","names":[],"sources":["../../../src/components/Select/SelectItem.tsx"],"mappings":";;;;;;UAqBU,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"}

package/dist/components/Select/SelectItem.d.ts

@@ -0,0 +1,24 @@
+
+import * as _$react from "react";
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+
+//#region src/components/Select/SelectItem.d.ts
+interface SelectItemProps {
+  /** Value submitted when this option is selected. */
+  value: string;
+  /** Whether this option is disabled. */
+  disabled?: boolean;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+/**
+ * **▾ Select item**
+ *
+ * A single selectable option inside {@link SelectContent}.
+ */
+declare const SelectItem: _$react.NamedExoticComponent<SelectItemProps>;
+//#endregion
+export { SelectItem, type SelectItemProps };
+//# sourceMappingURL=SelectItem.d.ts.map

package/dist/components/Select/SelectItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectItem.d.ts","names":[],"sources":["../../../src/components/Select/SelectItem.tsx"],"mappings":";;;;;;UAqBU,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"}

package/dist/components/Select/SelectItem.js

@@ -0,0 +1,137 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { HStack } from "../HStack.js";
+import { IconSlot } from "../IconSlot.js";
+import { useSelectContext } from "./selectContext.js";
+import { getMergedSelectItemLayerStyle, resolveSelectItemInteractionState } from "./selectItemTheme.js";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { Pressable, Text } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useUnistyles } from "react-native-unistyles";
+import Animated, { Easing, useAnimatedStyle, useDerivedValue, withTiming } from "react-native-reanimated";
+//#region src/components/Select/SelectItem.tsx
+/**
+* **▾ Select item**
+*
+* A single selectable option inside {@link SelectContent}.
+*/
+const SelectItem = memo(function SelectItem({ value, disabled, children, style, testID }) {
+	const { value: selectedValue, setValue, setOpen, open, registerItem, unregisterItem, highlightedValue, setHighlightedValue, reduceMotion } = useSelectContext();
+	const { theme } = useUnistyles();
+	const [isPressed, setIsPressed] = useState(false);
+	const label = useMemo(() => {
+		if (typeof children === "string" || typeof children === "number") return String(children);
+		return value;
+	}, [children, value]);
+	useEffect(() => {
+		registerItem(value, label);
+		return () => unregisterItem(value);
+	}, [
+		label,
+		registerItem,
+		unregisterItem,
+		value
+	]);
+	const isSelected = selectedValue === value;
+	const interaction = resolveSelectItemInteractionState({
+		isPressed,
+		isHighlighted: highlightedValue === value
+	});
+	const rootStyle = useMemo(() => [
+		getMergedSelectItemLayerStyle(theme, "root", interaction, isSelected),
+		{
+			flexDirection: "row",
+			alignItems: "center",
+			justifyContent: "space-between",
+			width: "100%",
+			opacity: disabled ? .5 : 1
+		},
+		style
+	], [
+		disabled,
+		interaction,
+		isSelected,
+		style,
+		theme
+	]);
+	const textStyle = useMemo(() => getMergedSelectItemLayerStyle(theme, "text", interaction, isSelected), [
+		interaction,
+		isSelected,
+		theme
+	]);
+	const endIconStyle = useMemo(() => getMergedSelectItemLayerStyle(theme, "endIcon", interaction, isSelected), [
+		interaction,
+		isSelected,
+		theme
+	]);
+	const checkScale = useDerivedValue(() => withTiming(isSelected ? 1 : 0, {
+		duration: reduceMotion ? 0 : 120,
+		easing: Easing.out(Easing.ease)
+	}), [isSelected, reduceMotion]);
+	const checkAnimatedStyle = useAnimatedStyle(() => ({
+		opacity: checkScale.value,
+		transform: [{ scale: .7 + checkScale.value * .3 }]
+	}));
+	const handlePress = useCallback(() => {
+		if (disabled) return;
+		setValue(value);
+		setOpen(false);
+		setHighlightedValue(null);
+	}, [
+		disabled,
+		setHighlightedValue,
+		setOpen,
+		setValue,
+		value
+	]);
+	const handlePressIn = useCallback(() => {
+		if (disabled) return;
+		setIsPressed(true);
+		setHighlightedValue(value);
+	}, [
+		disabled,
+		setHighlightedValue,
+		value
+	]);
+	const handlePressOut = useCallback(() => {
+		setIsPressed(false);
+	}, []);
+	if (!open) return null;
+	return /* @__PURE__ */ jsxs(Pressable, {
+		testID,
+		disabled,
+		onPress: handlePress,
+		onPressIn: handlePressIn,
+		onPressOut: handlePressOut,
+		style: rootStyle,
+		accessibilityRole: "menuitem",
+		accessibilityState: {
+			disabled: !!disabled,
+			selected: isSelected
+		},
+		children: [/* @__PURE__ */ jsx(HStack, {
+			columnGap: "2",
+			alignItems: "center",
+			justifyContent: "flex-start",
+			style: { flex: 1 },
+			children: /* @__PURE__ */ jsx(Text, {
+				style: textStyle,
+				numberOfLines: 1,
+				children
+			})
+		}), /* @__PURE__ */ jsx(Animated.View, {
+			style: checkAnimatedStyle,
+			pointerEvents: "none",
+			children: /* @__PURE__ */ jsx(IconSlot, {
+				icon: "Check",
+				size: "sm",
+				variant: "fill",
+				style: endIconStyle
+			})
+		})]
+	});
+});
+SelectItem.displayName = "SelectItem";
+//#endregion
+export { SelectItem };
+
+//# sourceMappingURL=SelectItem.js.map

package/dist/components/Select/SelectItem.js.map

@@ -0,0 +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, 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 { 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  } = useSelectContext();\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 rootStyle = useMemo(\n    () =>\n      [\n        getMergedSelectItemLayerStyle(theme, 'root', interaction, isSelected),\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, interaction, isSelected, style, theme],\n  );\n\n  const textStyle = useMemo(\n    () => getMergedSelectItemLayerStyle(theme, 'text', interaction, isSelected),\n    [interaction, isSelected, theme],\n  );\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 style={textStyle} numberOfLines={1}>\n          {children}\n        </RNText>\n      </HStack>\n\n      <Animated.View style={checkAnimatedStyle} pointerEvents=\"none\">\n        <IconSlot icon=\"Check\" size=\"sm\" variant=\"fill\" style={endIconStyle} />\n      </Animated.View>\n    </RNPressable>\n  );\n});\n\nSelectItem.displayName = 'SelectItem';\n\nexport { SelectItem, type SelectItemProps };\n"],"mappings":";;;;;;;;;;;;;;;;AAoCA,MAAM,aAAa,KAAK,SAAS,WAAW,EAC1C,OACA,UACA,UACA,OACA,UACkB;CAClB,MAAM,EACJ,OAAO,eACP,UACA,SACA,MACA,cACA,gBACA,kBACA,qBACA,iBACE,kBAAkB;CACtB,MAAM,EAAE,UAAU,cAAc;CAChC,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CAEjD,MAAM,QAAQ,cAAc;EAC1B,IAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UACtD,OAAO,OAAO,SAAS;EAGzB,OAAO;IACN,CAAC,UAAU,MAAM,CAAC;CAErB,gBAAgB;EACd,aAAa,OAAO,MAAM;EAC1B,aAAa,eAAe,MAAM;IACjC;EAAC;EAAO;EAAc;EAAgB;EAAM,CAAC;CAEhD,MAAM,aAAa,kBAAkB;CAErC,MAAM,cAAc,kCAAkC;EACpD;EACA,eAHoB,qBAAqB;EAI1C,CAAC;CAEF,MAAM,YAAY,cAEd;EACE,8BAA8B,OAAO,QAAQ,aAAa,WAAW;EACrE;GACE,eAAe;GACf,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,SAAS,WAAW,KAAM;GAC3B;EACD;EACD,EACH;EAAC;EAAU;EAAa;EAAY;EAAO;EAAM,CAClD;CAED,MAAM,YAAY,cACV,8BAA8B,OAAO,QAAQ,aAAa,WAAW,EAC3E;EAAC;EAAa;EAAY;EAAM,CACjC;CAED,MAAM,eAAe,cACb,8BAA8B,OAAO,WAAW,aAAa,WAAW,EAC9E;EAAC;EAAa;EAAY;EAAM,CACjC;CAED,MAAM,aAAa,sBAEf,WAAW,aAAa,IAAI,GAAG;EAC7B,UAAU,eAAe,IAAI;EAC7B,QAAQ,OAAO,IAAI,OAAO,KAAK;EAChC,CAAC,EACJ,CAAC,YAAY,aAAa,CAC3B;CAED,MAAM,qBAAqB,wBAAwB;EACjD,SAAS,WAAW;EACpB,WAAW,CAAC,EAAE,OAAO,KAAM,WAAW,QAAQ,IAAK,CAAC;EACrD,EAAE;CAEH,MAAM,cAAc,kBAAkB;EACpC,IAAI,UACF;EAGF,SAAS,MAAM;EACf,QAAQ,MAAM;EACd,oBAAoB,KAAK;IACxB;EAAC;EAAU;EAAqB;EAAS;EAAU;EAAM,CAAC;CAE7D,MAAM,gBAAgB,kBAAkB;EACtC,IAAI,UACF;EAGF,aAAa,KAAK;EAClB,oBAAoB,MAAM;IACzB;EAAC;EAAU;EAAqB;EAAM,CAAC;CAE1C,MAAM,iBAAiB,kBAAkB;EACvC,aAAa,MAAM;IAClB,EAAE,CAAC;CAEN,IAAI,CAAC,MACH,OAAO;CAGT,OACE,qBAACA,WAAD;EACU;EACE;EACV,SAAS;EACT,WAAW;EACX,YAAY;EACZ,OAAO;EACP,mBAAkB;EAClB,oBAAoB;GAAE,UAAU,CAAC,CAAC;GAAU,UAAU;GAAY;YARpE,CAUE,oBAAC,QAAD;GAAQ,WAAU;GAAI,YAAW;GAAS,gBAAe;GAAa,OAAO,EAAE,MAAM,GAAG;aACtF,oBAACC,MAAD;IAAQ,OAAO;IAAW,eAAe;IACtC;IACM,CAAA;GACF,CAAA,EAET,oBAAC,SAAS,MAAV;GAAe,OAAO;GAAoB,eAAc;aACtD,oBAAC,UAAD;IAAU,MAAK;IAAQ,MAAK;IAAK,SAAQ;IAAO,OAAO;IAAgB,CAAA;GACzD,CAAA,CACJ;;EAEhB;AAEF,WAAW,cAAc"}