@xsolla/xui-dropdown 0.148.0 → 0.148.2

package/README.md

@@ -0,0 +1,181 @@
+# Dropdown
+
+A cross-platform React dropdown menu component that displays a list of actions when triggered. Supports controlled and uncontrolled modes.
+
+## Installation
+
+```bash
+npm install @xsolla/xui-dropdown
+# or
+yarn add @xsolla/xui-dropdown
+```
+
+## Demo
+
+### Basic Dropdown
+
+```tsx
+import * as React from 'react';
+import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';
+import { Button } from '@xsolla/xui-button';
+
+export default function BasicDropdown() {
+  return (
+    <Dropdown trigger={<Button>Open Menu</Button>}>
+      <DropdownItem onPress={() => console.log('Edit')}>Edit</DropdownItem>
+      <DropdownItem onPress={() => console.log('Duplicate')}>Duplicate</DropdownItem>
+      <DropdownItem onPress={() => console.log('Delete')}>Delete</DropdownItem>
+    </Dropdown>
+  );
+}
+```
+
+### Dropdown with Icons
+
+```tsx
+import * as React from 'react';
+import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';
+import { Button } from '@xsolla/xui-button';
+import { Copy } from '@xsolla/xui-icons';
+import { Edit, TrashCan } from '@xsolla/xui-icons-base';
+
+export default function DropdownWithIcons() {
+  return (
+    <Dropdown trigger={<Button>Actions</Button>}>
+      <DropdownItem icon={<Edit size={16} />}>Edit</DropdownItem>
+      <DropdownItem icon={<Copy size={16} />}>Duplicate</DropdownItem>
+      <DropdownItem icon={<TrashCan size={16} />}>Delete</DropdownItem>
+    </Dropdown>
+  );
+}
+```
+
+### Controlled Dropdown
+
+```tsx
+import * as React from 'react';
+import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';
+import { Button } from '@xsolla/xui-button';
+
+export default function ControlledDropdown() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <div>
+      <Dropdown
+        trigger={<Button>Menu</Button>}
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+      >
+        <DropdownItem onPress={() => setIsOpen(false)}>Action 1</DropdownItem>
+        <DropdownItem onPress={() => setIsOpen(false)}>Action 2</DropdownItem>
+      </Dropdown>
+      <p>Dropdown is: {isOpen ? 'Open' : 'Closed'}</p>
+    </div>
+  );
+}
+```
+
+### Selection Indicator
+
+```tsx
+import * as React from 'react';
+import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';
+import { Button } from '@xsolla/xui-button';
+
+export default function SelectionDropdown() {
+  const [selected, setSelected] = React.useState('option1');
+
+  return (
+    <Dropdown trigger={<Button>Select Option</Button>}>
+      <DropdownItem
+        selected={selected === 'option1'}
+        onPress={() => setSelected('option1')}
+      >
+        Option 1
+      </DropdownItem>
+      <DropdownItem
+        selected={selected === 'option2'}
+        onPress={() => setSelected('option2')}
+      >
+        Option 2
+      </DropdownItem>
+      <DropdownItem
+        selected={selected === 'option3'}
+        onPress={() => setSelected('option3')}
+      >
+        Option 3
+      </DropdownItem>
+    </Dropdown>
+  );
+}
+```
+
+## Anatomy
+
+```jsx
+import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';
+
+<Dropdown
+  trigger={<TriggerElement />}  // Element that opens dropdown
+  isOpen={boolean}              // Controlled open state
+  onOpenChange={handler}        // Open state change handler
+  width={200}                   // Custom dropdown width
+>
+  <DropdownItem
+    onPress={handler}           // Click handler
+    icon={<Icon />}             // Leading icon
+    selected={boolean}          // Show selection checkmark
+    disabled={boolean}          // Disabled state
+  >
+    Item Label
+  </DropdownItem>
+</Dropdown>
+```
+
+## API Reference
+
+### Dropdown
+
+Container component for dropdown menu.
+
+**Dropdown Props:**
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| trigger | `ReactNode` | - | **Required.** Element that triggers dropdown. |
+| children | `ReactNode` | - | **Required.** DropdownItem components. |
+| isOpen | `boolean` | - | Controlled open state. |
+| onOpenChange | `(open: boolean) => void` | - | Open state change handler. |
+| width | `string \| number` | - | Custom dropdown width. |
+
+---
+
+### DropdownItem
+
+Individual menu item component.
+
+**DropdownItem Props:**
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| children | `ReactNode` | - | **Required.** Item content. |
+| onPress | `() => void` | - | Click handler. |
+| icon | `ReactNode` | - | Leading icon. |
+| selected | `boolean` | `false` | Show selection checkmark. |
+| active | `boolean` | `false` | Active/hover state. |
+| disabled | `boolean` | `false` | Disabled state. |
+
+## Behavior
+
+- Clicking outside the dropdown closes it
+- Selected items show a checkmark and highlighted background
+- Disabled items are visually muted and not clickable
+- Dropdown positions below trigger by default
+
+## Accessibility
+
+- Uses `role="menu"` for dropdown container
+- Items use `role="menuitem"`
+- Keyboard support for navigation
+- Focus management when opening/closing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-dropdown",
-  "version": "0.148.0",
+  "version": "0.148.2",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,11 +13,11 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-button": "0.148.0",
-    "@xsolla/xui-core": "0.148.0",
-    "@xsolla/xui-divider": "0.148.0",
-    "@xsolla/xui-icons": "0.148.0",
-    "@xsolla/xui-primitives-core": "0.148.0"
+    "@xsolla/xui-button": "0.148.2",
+    "@xsolla/xui-core": "0.148.2",
+    "@xsolla/xui-divider": "0.148.2",
+    "@xsolla/xui-icons": "0.148.2",
+    "@xsolla/xui-primitives-core": "0.148.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0",