@xsolla/xui-dropdown 0.99.0 → 0.100.0

package/README.md

@@ -1,49 +1,187 @@
-# @xsolla/xui-dropdown
+---
+title: Dropdown
+subtitle: A dropdown menu component.
+description: A cross-platform React dropdown menu component with trigger-based activation and customizable items.
+---
 
-Generic dropdown container that attaches a positioned menu to any trigger element.
+# 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
 ```
 
-## Usage
+## Demo
+
+### Basic Dropdown
 
 ```tsx
+import * as React from 'react';
 import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';
+import { Button } from '@xsolla/xui-button';
 
-<Dropdown trigger={<button>Options</button>}>
-  <DropdownItem onPress={() => console.log('Edit')}>Edit</DropdownItem>
-  <DropdownItem onPress={() => console.log('Delete')}>Delete</DropdownItem>
-</Dropdown>
+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>
+  );
+}
 ```
 
-## Components
+## Anatomy
 
-- `Dropdown` — wrapper that positions the menu relative to the trigger
-- `DropdownItem` — individual menu item with optional icon and selected state
+```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>
+```
 
-## Props
+## API Reference
 
 ### Dropdown
 
+Container component for dropdown menu.
+
+**Dropdown Props:**
+
 | Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `trigger` | `ReactNode` | — | Element that opens/closes the menu on click |
-| `children` | `ReactNode` | — | Menu content, typically `DropdownItem` elements |
-| `isOpen` | `boolean` | — | Controlled open state |
-| `onOpenChange` | `(open: boolean) => void` | — | Called when open state changes |
-| `align` | `"start" \| "end"` | `"start"` | Horizontal alignment of the menu relative to the trigger |
-| `width` | `string \| number` | `"auto"` | Width of the dropdown menu |
+| :--- | :--- | :------ | :---------- |
+| 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` | — | Item label content |
-| `onPress` | `() => void` | — | Called when the item is activated |
-| `selected` | `boolean` | — | Highlights item with brand colour and shows a checkmark |
-| `active` | `boolean` | — | Highlights item with hover colour |
-| `disabled` | `boolean` | — | Prevents interaction and dims the item |
-| `icon` | `ReactNode` | — | Icon displayed to the left of the label |
+| :--- | :--- | :------ | :---------- |
+| 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.99.0",
+  "version": "0.100.0",
   "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.99.0",
-    "@xsolla/xui-core": "0.99.0",
-    "@xsolla/xui-divider": "0.99.0",
-    "@xsolla/xui-icons": "0.99.0",
-    "@xsolla/xui-primitives-core": "0.99.0"
+    "@xsolla/xui-button": "0.100.0",
+    "@xsolla/xui-core": "0.100.0",
+    "@xsolla/xui-divider": "0.100.0",
+    "@xsolla/xui-icons": "0.100.0",
+    "@xsolla/xui-primitives-core": "0.100.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",