@yahoo/uds-mobile 2.21.2 → 2.23.0

package/dist/components/Select/Select.js

@@ -0,0 +1,194 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { HStack } from "../HStack.js";
+import { Text } from "../Text.js";
+import { InputHelpText } from "../InputHelpText.js";
+import { VStack } from "../VStack.js";
+import { useControllableState } from "../internal/Overlay/useControllableState.js";
+import { SelectContext, SelectFieldContext } from "./selectContext.js";
+import { SelectTrigger } from "./SelectTrigger.js";
+import { memo, useCallback, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { inputStyles } from "../../../generated/styles";
+import { isFunction } from "lodash-es";
+//#region src/components/Select/Select.tsx
+/**
+* **⚙️ A composable Select component**
+*
+* @description
+* Select lets users pick one value from a list. Compose with `SelectContent` and
+* `SelectItem`, similar to `Tabs` with `TabList` and `Tab`.
+*
+* @category Form
+* @platform mobile
+*
+* @example
+* ```tsx
+* import { Select, SelectContent, SelectItem } from '@yahoo/uds-mobile/Select';
+*
+* <Select label="Country" placeholder="Select a country" defaultValue="us">
+*   <SelectContent>
+*     <SelectItem value="us">United States</SelectItem>
+*     <SelectItem value="ca">Canada</SelectItem>
+*   </SelectContent>
+* </Select>
+* ```
+*/
+const Select = memo(function Select({ label, helpText, helperTextIcon, placeholder, size = "md", disabled, required, hasError, readOnly, width = "100%", reduceMotion = false, startIcon, endIcon, value: valueProp, defaultValue = "", onChange, children, testID }) {
+	const uid = `uds-select-${useId()}`;
+	const triggerRef = useRef(null);
+	const [triggerRect, setTriggerRect] = useState(null);
+	const [highlightedValue, setHighlightedValue] = useState(null);
+	const itemsRef = useRef(/* @__PURE__ */ new Map());
+	const [, setItemsVersion] = useState(0);
+	const [value, setValue] = useControllableState({
+		value: valueProp,
+		defaultValue,
+		onChange
+	});
+	const [open, setOpen] = useControllableState({
+		defaultValue: false,
+		onChange: (nextOpen) => {
+			if (!nextOpen) setHighlightedValue(null);
+		}
+	});
+	const registerItem = useCallback((itemValue, itemLabel) => {
+		if (itemsRef.current.get(itemValue) === itemLabel) return;
+		itemsRef.current.set(itemValue, itemLabel);
+		setItemsVersion((version) => version + 1);
+	}, []);
+	const unregisterItem = useCallback((itemValue) => {
+		if (!itemsRef.current.has(itemValue)) return;
+		itemsRef.current.delete(itemValue);
+		setItemsVersion((version) => version + 1);
+	}, []);
+	const getItemLabel = useCallback((itemValue) => itemsRef.current.get(itemValue), []);
+	const fieldContext = useMemo(() => ({
+		size,
+		disabled,
+		readOnly,
+		required,
+		hasError,
+		width,
+		reduceMotion,
+		placeholder,
+		uid
+	}), [
+		disabled,
+		hasError,
+		placeholder,
+		readOnly,
+		reduceMotion,
+		required,
+		size,
+		uid,
+		width
+	]);
+	const contextValue = useMemo(() => ({
+		value,
+		setValue,
+		open,
+		setOpen,
+		triggerRef,
+		triggerRect,
+		setTriggerRect,
+		registerItem,
+		unregisterItem,
+		getItemLabel,
+		highlightedValue,
+		setHighlightedValue,
+		field: fieldContext,
+		reduceMotion
+	}), [
+		fieldContext,
+		getItemLabel,
+		highlightedValue,
+		open,
+		reduceMotion,
+		registerItem,
+		setOpen,
+		setValue,
+		triggerRect,
+		unregisterItem,
+		value
+	]);
+	const valueState = value.length > 0 ? "filled" : "empty";
+	inputStyles.useVariants({
+		size,
+		value: valueState,
+		pressed: open,
+		readonly: readOnly,
+		invalid: hasError
+	});
+	const rootStyle = useMemo(() => [{
+		width,
+		opacity: disabled ? .5 : 1
+	}], [disabled, width]);
+	const labelContent = useMemo(() => {
+		if (!label) return null;
+		const content = isFunction(label) ? label() : label;
+		return /* @__PURE__ */ jsxs(HStack, {
+			columnGap: "1",
+			alignItems: "flex-end",
+			spacingBottom: "2",
+			children: [/* @__PURE__ */ jsx(Text, {
+				style: inputStyles.label,
+				children: content
+			}), required && /* @__PURE__ */ jsx(Text, {
+				style: inputStyles.labelRequired,
+				children: "*"
+			})]
+		});
+	}, [
+		label,
+		required,
+		inputStyles.label,
+		inputStyles.labelRequired
+	]);
+	const helpTextContent = useMemo(() => {
+		if (!helpText) return null;
+		const content = isFunction(helpText) ? helpText() : helpText;
+		return /* @__PURE__ */ jsx(InputHelpText, {
+			startIcon: helperTextIcon,
+			size,
+			isFilled: valueState === "filled",
+			disabled,
+			readOnly,
+			hasError,
+			pressed: open,
+			children: content
+		});
+	}, [
+		disabled,
+		hasError,
+		helpText,
+		helperTextIcon,
+		open,
+		readOnly,
+		size,
+		valueState
+	]);
+	return /* @__PURE__ */ jsx(SelectContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(SelectFieldContext.Provider, {
+			value: fieldContext,
+			children: /* @__PURE__ */ jsxs(VStack, {
+				testID,
+				style: rootStyle,
+				children: [
+					labelContent,
+					/* @__PURE__ */ jsx(SelectTrigger, {
+						startIcon,
+						endIcon
+					}),
+					helpTextContent,
+					children
+				]
+			})
+		})
+	});
+});
+Select.displayName = "Select";
+//#endregion
+export { Select };
+
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import type { UniversalSelectProps } from '@yahoo/uds-types';\nimport { isFunction } from 'lodash-es';\nimport type { ReactNode } from 'react';\nimport { memo, useCallback, useId, useMemo, useRef, useState } from 'react';\nimport type { View } from 'react-native';\n\nimport { inputStyles } from '../../../generated/styles';\nimport { HStack } from '../HStack';\nimport type { IconSlotType } from '../IconSlot';\nimport { InputHelpText } from '../InputHelpText';\nimport { useControllableState } from '../internal/Overlay';\nimport { Text } from '../Text';\nimport { VStack } from '../VStack';\nimport { SelectContext, SelectFieldContext } from './selectContext';\nimport { SelectTrigger } from './SelectTrigger';\nimport type { SelectContextValue, SelectFieldContextValue } from './types';\n\ninterface SelectProps extends Omit<UniversalSelectProps<IconSlotType>, 'width'> {\n  /** Placeholder text shown when no value is selected. */\n  placeholder?: string;\n  /** Selected value for controlled usage. */\n  value?: string;\n  /** Initial value for uncontrolled usage. @default '' */\n  defaultValue?: string;\n  /** Called when the selected value changes. */\n  onChange?: (value: string) => void;\n  /** Container width. @default '100%' */\n  width?: number | `${number}%` | '100%';\n  children?: ReactNode;\n  testID?: string;\n}\n\n/**\n * **⚙️ A composable Select component**\n *\n * @description\n * Select lets users pick one value from a list. Compose with `SelectContent` and\n * `SelectItem`, similar to `Tabs` with `TabList` and `Tab`.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Select, SelectContent, SelectItem } from '@yahoo/uds-mobile/Select';\n *\n * <Select label=\"Country\" placeholder=\"Select a country\" defaultValue=\"us\">\n *   <SelectContent>\n *     <SelectItem value=\"us\">United States</SelectItem>\n *     <SelectItem value=\"ca\">Canada</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n */\nconst Select = memo(function Select({\n  label,\n  helpText,\n  helperTextIcon,\n  placeholder,\n  size = 'md',\n  disabled,\n  required,\n  hasError,\n  readOnly,\n  width = '100%',\n  reduceMotion = false,\n  startIcon,\n  endIcon,\n  value: valueProp,\n  defaultValue = '',\n  onChange,\n  children,\n  testID,\n}: SelectProps) {\n  const generatedId = useId();\n  const uid = `uds-select-${generatedId}`;\n  const triggerRef = useRef<View | null>(null);\n  const [triggerRect, setTriggerRect] = useState<SelectContextValue['triggerRect']>(null);\n  const [highlightedValue, setHighlightedValue] = useState<string | null>(null);\n  const itemsRef = useRef(new Map<string, string>());\n  const [, setItemsVersion] = useState(0);\n\n  const [value, setValue] = useControllableState({\n    value: valueProp,\n    defaultValue,\n    onChange,\n  });\n\n  const [open, setOpen] = useControllableState({\n    defaultValue: false,\n    onChange: (nextOpen) => {\n      if (!nextOpen) {\n        setHighlightedValue(null);\n      }\n    },\n  });\n\n  const registerItem = useCallback((itemValue: string, itemLabel: string) => {\n    if (itemsRef.current.get(itemValue) === itemLabel) {\n      return;\n    }\n\n    itemsRef.current.set(itemValue, itemLabel);\n    setItemsVersion((version) => version + 1);\n  }, []);\n\n  const unregisterItem = useCallback((itemValue: string) => {\n    if (!itemsRef.current.has(itemValue)) {\n      return;\n    }\n\n    itemsRef.current.delete(itemValue);\n    setItemsVersion((version) => version + 1);\n  }, []);\n\n  const getItemLabel = useCallback((itemValue: string) => itemsRef.current.get(itemValue), []);\n\n  const fieldContext = useMemo<SelectFieldContextValue>(\n    () => ({\n      size,\n      disabled,\n      readOnly,\n      required,\n      hasError,\n      width,\n      reduceMotion,\n      placeholder,\n      uid,\n    }),\n    [disabled, hasError, placeholder, readOnly, reduceMotion, required, size, uid, width],\n  );\n\n  const contextValue = useMemo<SelectContextValue>(\n    () => ({\n      value,\n      setValue,\n      open,\n      setOpen,\n      triggerRef,\n      triggerRect,\n      setTriggerRect,\n      registerItem,\n      unregisterItem,\n      getItemLabel,\n      highlightedValue,\n      setHighlightedValue,\n      field: fieldContext,\n      reduceMotion,\n    }),\n    [\n      fieldContext,\n      getItemLabel,\n      highlightedValue,\n      open,\n      reduceMotion,\n      registerItem,\n      setOpen,\n      setValue,\n      triggerRect,\n      unregisterItem,\n      value,\n    ],\n  );\n\n  const hasValue = value.length > 0;\n  const valueState = hasValue ? 'filled' : 'empty';\n\n  inputStyles.useVariants({\n    size,\n    value: valueState,\n    pressed: open,\n    readonly: readOnly,\n    invalid: hasError,\n  });\n\n  const rootStyle = useMemo(() => [{ width, opacity: disabled ? 0.5 : 1 }], [disabled, width]);\n\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n\n    const content = isFunction(label) ? label() : label;\n    return (\n      <HStack columnGap=\"1\" alignItems=\"flex-end\" spacingBottom=\"2\">\n        <Text style={inputStyles.label}>{content}</Text>\n        {required && <Text style={inputStyles.labelRequired}>*</Text>}\n      </HStack>\n    );\n  }, [label, required, inputStyles.label, inputStyles.labelRequired]);\n\n  const helpTextContent = useMemo(() => {\n    if (!helpText) {\n      return null;\n    }\n\n    const content = isFunction(helpText) ? helpText() : helpText;\n    return (\n      <InputHelpText\n        startIcon={helperTextIcon}\n        size={size}\n        isFilled={valueState === 'filled'}\n        disabled={disabled}\n        readOnly={readOnly}\n        hasError={hasError}\n        pressed={open}\n      >\n        {content}\n      </InputHelpText>\n    );\n  }, [disabled, hasError, helpText, helperTextIcon, open, readOnly, size, valueState]);\n\n  return (\n    <SelectContext.Provider value={contextValue}>\n      <SelectFieldContext.Provider value={fieldContext}>\n        <VStack testID={testID} style={rootStyle}>\n          {labelContent}\n\n          <SelectTrigger startIcon={startIcon} endIcon={endIcon} />\n\n          {helpTextContent}\n\n          {children}\n        </VStack>\n      </SelectFieldContext.Provider>\n    </SelectContext.Provider>\n  );\n});\n\nSelect.displayName = 'Select';\n\nexport { Select, type SelectProps };\n"],"mappings":"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"}

package/dist/components/Select/SelectContent.cjs

@@ -0,0 +1,148 @@
+/*! © 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_VStack = require("../VStack.cjs");
+const require_components_internal_Overlay_useAnchoredPosition = require("../internal/Overlay/useAnchoredPosition.cjs");
+const require_components_Popover_PopoverPortalLayer = require("../Popover/PopoverPortalLayer.cjs");
+const require_components_Select_selectContext = require("./selectContext.cjs");
+let react = require("react");
+let react_native = require("react-native");
+let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../../generated/styles");
+let react_native_reanimated = require("react-native-reanimated");
+react_native_reanimated = require_runtime.__toESM(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 = react_native.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 = (0, react.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 } = require_components_Select_selectContext.useSelectContext();
+	const [contentSize, setContentSize] = (0, react.useState)({
+		width: 0,
+		height: 0
+	});
+	const [shouldRender, setShouldRender] = (0, react.useState)(open);
+	const dismiss = (0, react.useCallback)(() => {
+		if (keepOpenOnInteractOutside) return;
+		setOpen(false);
+	}, [keepOpenOnInteractOutside, setOpen]);
+	const { contentStyle, anchorReady, maxWidth: positionedMaxWidth } = require_components_internal_Overlay_useAnchoredPosition.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 = (0, react_native_reanimated.useDerivedValue)(() => (0, react_native_reanimated.withTiming)(isPositionedOpen ? 1 : 0, {
+		duration: reduceMotion ? 0 : ANIMATION_DURATION,
+		easing: react_native_reanimated.Easing.out(react_native_reanimated.Easing.ease)
+	}), [isPositionedOpen, reduceMotion]);
+	const animatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({
+		opacity: progress.value,
+		transform: [{ scale: .97 + progress.value * .03 }, { translateY: (1 - progress.value) * 8 }]
+	}));
+	const handleLayout = (0, react.useCallback)((event) => {
+		const { width, height } = event.nativeEvent.layout;
+		setContentSize({
+			width,
+			height
+		});
+	}, []);
+	(0, react.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]);
+	generated_styles.selectContentStyles.useVariants({});
+	const panelStyle = (0, react.useMemo)(() => react_native.StyleSheet.flatten([
+		generated_styles.selectContentStyles.root,
+		{
+			maxHeight,
+			maxWidth: positionedMaxWidth > 0 ? positionedMaxWidth : void 0,
+			overflow: "hidden",
+			zIndex: 1
+		},
+		style
+	]), [
+		maxHeight,
+		positionedMaxWidth,
+		generated_styles.selectContentStyles.root,
+		style
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+		accessibilityElementsHidden: true,
+		importantForAccessibility: "no-hide-descendants",
+		pointerEvents: "none",
+		style: OFFSCREEN_REGISTRY_STYLE.registry,
+		children
+	}) : null, open && shouldRender ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Popover_PopoverPortalLayer.PopoverPortalLayer, {
+		open,
+		dismissible: !keepOpenOnInteractOutside,
+		onDismiss: dismiss,
+		children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
+			testID,
+			style: [
+				contentStyle,
+				animatedStyle,
+				{
+					overflow: "visible",
+					zIndex: 1e3
+				}
+			],
+			onLayout: handleLayout,
+			accessibilityRole: "menu",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+				style: panelStyle,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.ScrollView, {
+					keyboardShouldPersistTaps: "handled",
+					nestedScrollEnabled: true,
+					style: { maxHeight },
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_VStack.VStack, {
+						alignItems: "stretch",
+						justifyContent: "flex-start",
+						children
+					})
+				})
+			})
+		})
+	}) : null] });
+});
+SelectContent.displayName = "SelectContent";
+//#endregion
+exports.SelectContent = SelectContent;

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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"}