@xsolla/xui-select 0.158.0 → 0.159.0

package/README.md

@@ -13,17 +13,17 @@ npm install @xsolla/xui-select
 ### Basic Select
 
 ```tsx
-import * as React from 'react';
-import { Select } from '@xsolla/xui-select';
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
 
 export default function BasicSelect() {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState("");
 
   return (
     <Select
       value={value}
       onChange={setValue}
-      options={['Option 1', 'Option 2', 'Option 3']}
+      options={["Option 1", "Option 2", "Option 3"]}
       placeholder="Select an option"
     />
   );
@@ -33,18 +33,24 @@ export default function BasicSelect() {
 ### Select with Label
 
 ```tsx
-import * as React from 'react';
-import { Select } from '@xsolla/xui-select';
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
 
 export default function LabeledSelect() {
-  const [country, setCountry] = React.useState('');
+  const [country, setCountry] = React.useState("");
 
   return (
     <Select
       label="Country"
       value={country}
       onChange={setCountry}
-      options={['United States', 'Canada', 'United Kingdom', 'Germany', 'France']}
+      options={[
+        "United States",
+        "Canada",
+        "United Kingdom",
+        "Germany",
+        "France",
+      ]}
       placeholder="Select a country"
     />
   );
@@ -54,16 +60,16 @@ export default function LabeledSelect() {
 ### Select with Object Options
 
 ```tsx
-import * as React from 'react';
-import { Select } from '@xsolla/xui-select';
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
 
 export default function ObjectOptionsSelect() {
-  const [status, setStatus] = React.useState('');
+  const [status, setStatus] = React.useState("");
 
   const options = [
-    { label: 'Active', value: 'active' },
-    { label: 'Pending', value: 'pending' },
-    { label: 'Inactive', value: 'inactive' },
+    { label: "Active", value: "active" },
+    { label: "Pending", value: "pending" },
+    { label: "Inactive", value: "inactive" },
   ];
 
   return (
@@ -81,14 +87,14 @@ export default function ObjectOptionsSelect() {
 ### Select Sizes
 
 ```tsx
-import * as React from 'react';
-import { Select } from '@xsolla/xui-select';
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
 
 export default function SelectSizes() {
-  const options = ['Small', 'Medium', 'Large'];
+  const options = ["Small", "Medium", "Large"];
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
       <Select size="xs" options={options} placeholder="Extra Small" />
       <Select size="sm" options={options} placeholder="Small" />
       <Select size="md" options={options} placeholder="Medium (default)" />
@@ -102,15 +108,15 @@ export default function SelectSizes() {
 ### Select with Icons
 
 ```tsx
-import * as React from 'react';
-import { Select } from '@xsolla/xui-select';
-import { Globe } from '@xsolla/xui-icons-base';
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
+import { Globe } from "@xsolla/xui-icons-base";
 
 export default function SelectWithIcons() {
   return (
     <Select
       iconLeft={<Globe />}
-      options={['English', 'Spanish', 'French', 'German']}
+      options={["English", "Spanish", "French", "German"]}
       placeholder="Select language"
     />
   );
@@ -122,20 +128,20 @@ export default function SelectWithIcons() {
 Import the component and use it directly:
 
 ```jsx
-import { Select } from '@xsolla/xui-select';
+import { Select } from "@xsolla/xui-select";
 
 <Select
-  label="Field Label"           // Optional label above select
-  value={value}                 // Controlled selected value
-  onChange={setValue}           // Value change handler
-  options={['A', 'B', 'C']}     // Array of options (strings or objects)
-  placeholder="Select..."       // Placeholder text
-  iconLeft={<Icon />}           // Optional left icon
-  iconRight={<Icon />}          // Optional right icon (default: ChevronDown)
-  filled                        // Whether to show filled background
-  state="error"                 // State: "default" | "disable" | "error"
-  errorMessage="Error message"  // Error message (shown when state="error")
-/>
+  label="Field Label" // Optional label above select
+  value={value} // Controlled selected value
+  onChange={setValue} // Value change handler
+  options={["A", "B", "C"]} // Array of options (strings or objects)
+  placeholder="Select..." // Placeholder text
+  iconLeft={<Icon />} // Optional left icon
+  iconRight={<Icon />} // Optional right icon (default: ChevronDown)
+  filled // Whether to show filled background
+  state="error" // State: "default" | "disable" | "error"
+  errorMessage="Error message" // Error message (shown when state="error")
+/>;
 ```
 
 ## Examples
@@ -143,8 +149,8 @@ import { Select } from '@xsolla/xui-select';
 ### Error State
 
 ```tsx
-import * as React from 'react';
-import { Select } from '@xsolla/xui-select';
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
 
 export default function ErrorSelect() {
   return (
@@ -152,7 +158,7 @@ export default function ErrorSelect() {
       label="Required Field"
       state="error"
       errorMessage="Please select an option"
-      options={['Option 1', 'Option 2', 'Option 3']}
+      options={["Option 1", "Option 2", "Option 3"]}
       placeholder="Select an option"
     />
   );
@@ -162,8 +168,8 @@ export default function ErrorSelect() {
 ### Disabled Select
 
 ```tsx
-import * as React from 'react';
-import { Select } from '@xsolla/xui-select';
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
 
 export default function DisabledSelect() {
   return (
@@ -171,7 +177,7 @@ export default function DisabledSelect() {
       label="Disabled Field"
       value="Option 1"
       state="disable"
-      options={['Option 1', 'Option 2', 'Option 3']}
+      options={["Option 1", "Option 2", "Option 3"]}
     />
   );
 }
@@ -180,14 +186,14 @@ export default function DisabledSelect() {
 ### Unfilled/Transparent Background
 
 ```tsx
-import * as React from 'react';
-import { Select } from '@xsolla/xui-select';
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
 
 export default function UnfilledSelect() {
   return (
     <Select
       filled={false}
-      options={['Option 1', 'Option 2', 'Option 3']}
+      options={["Option 1", "Option 2", "Option 3"]}
       placeholder="Transparent background"
     />
   );
@@ -197,59 +203,85 @@ export default function UnfilledSelect() {
 ### Icon Only Select
 
 ```tsx
-import * as React from 'react';
-import { Select } from '@xsolla/xui-select';
-import { Settings } from '@xsolla/xui-icons';
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
+import { Settings } from "@xsolla/xui-icons";
 
 export default function IconOnlySelect() {
   return (
     <Select
       iconOnly
       iconLeft={<Settings />}
-      options={['Settings', 'Preferences', 'Advanced']}
+      options={["Settings", "Preferences", "Advanced"]}
     />
   );
 }
 ```
 
+### Full Width Select
+
+```tsx
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
+
+export default function FullWidthSelect() {
+  return (
+    <div style={{ display: "flex", gap: 16 }}>
+      <Select
+        fullWidth
+        options={["Option 1", "Option 2", "Option 3"]}
+        placeholder="Stretches to fill container"
+      />
+      <Select
+        fullWidth={false}
+        options={["Option 1", "Option 2", "Option 3"]}
+        placeholder="Intrinsic width"
+      />
+    </div>
+  );
+}
+```
+
 ### Form with Select
 
 ```tsx
-import * as React from 'react';
-import { Select } from '@xsolla/xui-select';
-import { Input } from '@xsolla/xui-input';
-import { Button } from '@xsolla/xui-button';
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
+import { Input } from "@xsolla/xui-input";
+import { Button } from "@xsolla/xui-button";
 
 export default function FormWithSelect() {
   const [form, setForm] = React.useState({
-    name: '',
-    category: '',
-    priority: '',
+    name: "",
+    category: "",
+    priority: "",
   });
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 300 }}>
+    <div
+      style={{ display: "flex", flexDirection: "column", gap: 16, width: 300 }}
+    >
       <Input
         label="Task Name"
         value={form.name}
-        onChangeText={(name) => setForm(prev => ({ ...prev, name }))}
+        onChangeText={(name) => setForm((prev) => ({ ...prev, name }))}
         placeholder="Enter task name"
       />
       <Select
         label="Category"
         value={form.category}
-        onChange={(category) => setForm(prev => ({ ...prev, category }))}
-        options={['Development', 'Design', 'Marketing', 'Sales']}
+        onChange={(category) => setForm((prev) => ({ ...prev, category }))}
+        options={["Development", "Design", "Marketing", "Sales"]}
         placeholder="Select category"
       />
       <Select
         label="Priority"
         value={form.priority}
-        onChange={(priority) => setForm(prev => ({ ...prev, priority }))}
+        onChange={(priority) => setForm((prev) => ({ ...prev, priority }))}
         options={[
-          { label: 'High', value: 'high' },
-          { label: 'Medium', value: 'medium' },
-          { label: 'Low', value: 'low' },
+          { label: "High", value: "high" },
+          { label: "Medium", value: "medium" },
+          { label: "Low", value: "low" },
         ]}
         placeholder="Select priority"
       />
@@ -267,33 +299,35 @@ The main select component. Renders a button trigger with dropdown menu.
 
 **Select Props:**
 
-| Prop | Type | Default | Description |
-| :--- | :--- | :------ | :---------- |
-| value | `string` | - | The controlled selected value. |
-| placeholder | `string` | `"Select"` | Placeholder text when no value selected. |
-| onPress | `() => void` | - | Callback when select trigger is pressed. |
-| size | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | The size of the select. |
-| state | `"default" \| "hover" \| "focus" \| "disable" \| "error"` | `"default"` | The visual state of the select. |
-| label | `string` | - | Label text displayed above the select. |
-| disabled | `boolean` | `false` | Whether the select is disabled. Also triggered when `state="disable"`. |
-| errorMessage | `string` | - | Error message displayed below the select (also sets error styling). |
-| iconLeft | `ReactNode` | - | Icon displayed on the left side. |
-| iconRight | `ReactNode` | `<ChevronDown />` | Icon displayed on the right side. |
-| filled | `boolean` | `true` | Whether to show filled background. |
-| iconOnly | `boolean` | `false` | Whether to show only icon without text. |
-| options | `(string \| SelectOption)[]` | `[]` | Array of options to display. |
-| onChange | `(value: string) => void` | - | Callback when value changes. |
-| searchable | `boolean` | `false` | Whether to show a search input in the dropdown. |
-| searchPlaceholder | `string` | `"Search"` | Placeholder text for the search input. |
-| noOptionsMessage | `string` | `"No results"` | Message shown when no options match the search. |
-| maxHeight | `number` | `300` | Maximum height of the dropdown in pixels. |
+| Prop              | Type                                                      | Default           | Description                                                                                                   |
+| :---------------- | :-------------------------------------------------------- | :---------------- | :------------------------------------------------------------------------------------------------------------ |
+| `testID`          | `string`                                                  | —                 | Test ID for testing frameworks. On web this renders as `data-testid`; on React Native it renders as `testID`. |
+| value             | `string`                                                  | -                 | The controlled selected value.                                                                                |
+| placeholder       | `string`                                                  | `"Select"`        | Placeholder text when no value selected.                                                                      |
+| onPress           | `() => void`                                              | -                 | Callback when select trigger is pressed.                                                                      |
+| size              | `"xl" \| "lg" \| "md" \| "sm" \| "xs"`                    | `"md"`            | The size of the select.                                                                                       |
+| state             | `"default" \| "hover" \| "focus" \| "disable" \| "error"` | `"default"`       | The visual state of the select.                                                                               |
+| label             | `string`                                                  | -                 | Label text displayed above the select.                                                                        |
+| disabled          | `boolean`                                                 | `false`           | Whether the select is disabled. Also triggered when `state="disable"`.                                        |
+| errorMessage      | `string`                                                  | -                 | Error message displayed below the select (also sets error styling).                                           |
+| iconLeft          | `ReactNode`                                               | -                 | Icon displayed on the left side.                                                                              |
+| iconRight         | `ReactNode`                                               | `<ChevronDown />` | Icon displayed on the right side.                                                                             |
+| filled            | `boolean`                                                 | `true`            | Whether to show filled background.                                                                            |
+| iconOnly          | `boolean`                                                 | `false`           | Whether to show only icon without text.                                                                       |
+| options           | `(string \| SelectOption)[]`                              | `[]`              | Array of options to display.                                                                                  |
+| onChange          | `(value: string) => void`                                 | -                 | Callback when value changes.                                                                                  |
+| searchable        | `boolean`                                                 | `false`           | Whether to show a search input in the dropdown.                                                               |
+| searchPlaceholder | `string`                                                  | `"Search"`        | Placeholder text for the search input.                                                                        |
+| noOptionsMessage  | `string`                                                  | `"No results"`    | Message shown when no options match the search.                                                               |
+| maxHeight         | `number`                                                  | `300`             | Maximum height of the dropdown in pixels.                                                                     |
+| fullWidth         | `boolean`                                                 | `true`            | Whether the select should stretch to fill the full width of its container.                                    |
 
 **SelectOption Type:**
 
 ```typescript
 interface SelectOption {
-  label: string;     // Display text
-  value: any;        // Value to be selected
+  label: string; // Display text
+  value: any; // Value to be selected
   disabled?: boolean; // Whether this option is disabled
 }
 ```
@@ -302,13 +336,13 @@ interface SelectOption {
 
 The Select component works on React Native with the following differences:
 
-| Feature | Web | React Native |
-|---------|-----|-------------|
-| Searchable dropdown | Supported (`searchable` prop) | **Not available** — prop is ignored |
-| Dropdown shadow | CSS `box-shadow` | Android `elevation: 4` |
-| Scroll behavior | `overflowY: auto` | Native `ScrollView` |
-| Cursor styles | `pointer` / `not-allowed` | Ignored |
-| Click-outside dismiss | `document.addEventListener` | Not active (guarded by `isNative`) |
+| Feature               | Web                           | React Native                        |
+| --------------------- | ----------------------------- | ----------------------------------- |
+| Searchable dropdown   | Supported (`searchable` prop) | **Not available** — prop is ignored |
+| Dropdown shadow       | CSS `box-shadow`              | Android `elevation: 4`              |
+| Scroll behavior       | `overflowY: auto`             | Native `ScrollView`                 |
+| Cursor styles         | `pointer` / `not-allowed`     | Ignored                             |
+| Click-outside dismiss | `document.addEventListener`   | Not active (guarded by `isNative`)  |
 
 ## Accessibility
 

package/native/index.d.mts

@@ -25,6 +25,10 @@ interface SelectProps extends ThemeOverrideProps {
     searchPlaceholder?: string;
     noOptionsMessage?: string;
     maxHeight?: number;
+    /** Whether the select should stretch to fill the full width of its container */
+    fullWidth?: boolean;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 declare const Select: React.FC<SelectProps>;
 

package/native/index.d.ts

@@ -25,6 +25,10 @@ interface SelectProps extends ThemeOverrideProps {
     searchPlaceholder?: string;
     noOptionsMessage?: string;
     maxHeight?: number;
+    /** Whether the select should stretch to fill the full width of its container */
+    fullWidth?: boolean;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 declare const Select: React.FC<SelectProps>;
 

package/native/index.js

@@ -238,6 +238,8 @@ var Text = ({
   numberOfLines,
   id,
   role,
+  testID,
+  "data-testid": dataTestId,
   style: styleProp,
   ...props
 }) => {
@@ -267,7 +269,7 @@ var Text = ({
     {
       style: baseStyle,
       numberOfLines,
-      testID: id,
+      testID: dataTestId || testID || id,
       accessibilityRole,
       children
     }
@@ -278,7 +280,13 @@ var Text = ({
 var import_react = __toESM(require("react"));
 var import_react_native3 = require("react-native");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Icon = ({ children, color, size }) => {
+var Icon = ({
+  children,
+  color,
+  size,
+  testID,
+  "data-testid": dataTestId
+}) => {
   const style = {
     width: typeof size === "number" ? size : void 0,
     height: typeof size === "number" ? size : void 0,
@@ -295,7 +303,7 @@ var Icon = ({ children, color, size }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style, children: childrenWithProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style, testID: dataTestId || testID, children: childrenWithProps });
 };
 
 // ../../foundation/primitives-native/src/index.tsx
@@ -325,6 +333,8 @@ var Select = ({
   searchPlaceholder = "Search",
   noOptionsMessage = "No results",
   maxHeight = 300,
+  fullWidth = true,
+  testID,
   themeMode,
   themeProductContext
 }) => {
@@ -432,10 +442,11 @@ var Select = ({
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     Box,
     {
+      testID,
       ref: containerRef,
       flexDirection: "column",
       gap: sizeStyles.fieldGap,
-      width: "100%",
+      width: fullWidth ? "100%" : void 0,
       position: "relative",
       children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -591,6 +602,7 @@ var Select = ({
                     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       Box,
                       {
+                        testID,
                         ref: isSelected ? selectedItemRef : void 0,
                         paddingVertical: sizeStyles.paddingVertical,
                         paddingHorizontal: sizeStyles.paddingHorizontal,