{"_id":"@atom_design/dropdown","name":"@atom_design/dropdown","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@atom_design/dropdown","version":"1.0.0","description":"A React Native dropdown select component with anchored positioning and modal-based menu. Part of the Atom Design System.","main":"index.js","types":"index.d.ts","author":{"name":"Atom Design"},"license":"MIT","keywords":["react-native","dropdown","select","picker","menu","ui-component","atom-design"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","prop-types":">=15.0.0","react-native-vector-icons":">=9.0.0"},"_id":"@atom_design/dropdown@1.0.0","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-OaW+lb2RlLXjwjrV7lauuvJZ1e5plyfSvDSP5xCILKs74fOZ41dkz4j/mkzl2QszV1gmbaBGfQoZ/RYCz1udJA==","shasum":"01b0aa6246dbaabe876120c558205d1e2cae9ddb","tarball":"https://registry.npmjs.org/@atom_design/dropdown/-/dropdown-1.0.0.tgz","fileCount":5,"unpackedSize":20289,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDYj/HJ5OpLVTB2feaF0i7Zf6xps0Gws3ImHNRAxdjhBwIhAMIhcRqD0dzSvS/linil5yei4EeXAQ5E1560uJ0D5EQX"}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dropdown_1.0.0_1764753630845_0.763956933218966"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-03T09:20:30.789Z","1.0.0":"2025-12-03T09:20:31.034Z","modified":"2025-12-03T09:20:31.351Z"},"maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"description":"A React Native dropdown select component with anchored positioning and modal-based menu. Part of the Atom Design System.","keywords":["react-native","dropdown","select","picker","menu","ui-component","atom-design"],"author":{"name":"Atom Design"},"license":"MIT","readme":"# @atom_design/dropdown\n\nA React Native dropdown select component with smart anchored positioning and modal-based menu. Part of the Atom Design System.\n\n[![npm version](https://img.shields.io/npm/v/@atom_design/dropdown.svg)](https://www.npmjs.com/package/@atom_design/dropdown)\n[![license](https://img.shields.io/npm/l/@atom_design/dropdown.svg)](https://github.com/atom-design/dropdown/blob/main/LICENSE)\n\n## Features\n\n- 📍 **Smart Positioning** - Auto-positions above/below based on screen space\n- 🎯 **Anchored Menu** - Dropdown matches trigger width and position\n- ✅ **Selection State** - Visual feedback for selected option\n- 🎨 **Customizable** - Style all elements with custom props\n- ♿ **Accessible** - Full screen reader support\n- 💪 **TypeScript** - Full type definitions included\n- 📱 **Cross-Platform** - Works on iOS and Android\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install @atom_design/dropdown\n# or\nyarn add @atom_design/dropdown\n```\n\n### Peer Dependencies\n\n```bash\nnpm install prop-types react-native-vector-icons\n```\n\n---\n\n## 🚀 Basic Usage\n\n```jsx\nimport React, { useState } from 'react';\nimport { View } from 'react-native';\nimport Dropdown from '@atom_design/dropdown';\n\nconst App = () => {\n  const [selected, setSelected] = useState(null);\n\n  const options = [\n    { label: 'Apple', value: 'apple' },\n    { label: 'Orange', value: 'orange' },\n    { label: 'Banana', value: 'banana' },\n  ];\n\n  return (\n    <View style={{ flex: 1, padding: 20 }}>\n      <Dropdown\n        label=\"Select Fruit\"\n        options={options}\n        value={selected}\n        onSelect={setSelected}\n        placeholder=\"Choose a fruit\"\n      />\n    </View>\n  );\n};\n\nexport default App;\n```\n\n---\n\n## 🧩 Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `label` | `string` | - | Label above dropdown |\n| `triggerText` | `string` | - | Override trigger text |\n| `options` | `Option[]` | `[]` | Array of options |\n| `value` | `string \\| number` | - | Selected value |\n| `onSelect` | `(value) => void` | - | Selection callback |\n| `placeholder` | `string` | `'Select...'` | Placeholder text |\n| `disabled` | `boolean` | `false` | Disable dropdown |\n| `error` | `string` | - | Error message |\n| `leftIcon` | `string` | - | Left icon (MaterialIcons) |\n| `containerStyle` | `ViewStyle` | - | Container style |\n| `triggerStyle` | `ViewStyle` | - | Trigger button style |\n| `dropdownStyle` | `ViewStyle` | - | Dropdown menu style |\n| `labelStyle` | `TextStyle` | - | Label style |\n| `optionStyle` | `ViewStyle` | - | Option item style |\n| `maxHeight` | `number` | `300` | Max dropdown height |\n| `testID` | `string` | - | Test ID |\n\n---\n\n## 📁 Option Structure\n\n```typescript\ninterface Option {\n  label: string;        // Display text\n  value: string | number; // Value returned on select\n}\n```\n\n---\n\n## 🧪 Test Screen Example\n\n```jsx\nimport React, { useState } from 'react';\nimport { SafeAreaView, ScrollView, Text, StyleSheet, View } from 'react-native';\nimport Dropdown from '@atom_design/dropdown';\n\nconst countries = [\n  { label: 'United States', value: 'us' },\n  { label: 'Canada', value: 'ca' },\n  { label: 'United Kingdom', value: 'uk' },\n  { label: 'Germany', value: 'de' },\n  { label: 'France', value: 'fr' },\n  { label: 'Australia', value: 'au' },\n  { label: 'Japan', value: 'jp' },\n  { label: 'India', value: 'in' },\n];\n\nconst DropdownTestScreen = () => {\n  const [country, setCountry] = useState(null);\n  const [city, setCity] = useState(null);\n\n  return (\n    <SafeAreaView style={styles.container}>\n      <ScrollView contentContainerStyle={styles.content}>\n        <Text style={styles.header}>@atom_design/dropdown</Text>\n\n        {/* Basic Dropdown */}\n        <Dropdown\n          label=\"Country\"\n          options={countries}\n          value={country}\n          onSelect={setCountry}\n          placeholder=\"Select country\"\n        />\n\n        {/* With Icon */}\n        <Dropdown\n          label=\"City\"\n          options={[\n            { label: 'New York', value: 'ny' },\n            { label: 'Los Angeles', value: 'la' },\n            { label: 'Chicago', value: 'chi' },\n          ]}\n          value={city}\n          onSelect={setCity}\n          placeholder=\"Select city\"\n          leftIcon=\"location-city\"\n        />\n\n        {/* With Error */}\n        <Dropdown\n          label=\"Required Field\"\n          options={countries}\n          placeholder=\"This field is required\"\n          error=\"Please select a country\"\n        />\n\n        {/* Disabled */}\n        <Dropdown\n          label=\"Disabled Dropdown\"\n          options={countries}\n          placeholder=\"Cannot select\"\n          disabled\n        />\n\n        {/* Custom Styled */}\n        <Dropdown\n          label=\"Custom Style\"\n          options={countries}\n          value={country}\n          onSelect={setCountry}\n          triggerStyle={styles.customTrigger}\n          dropdownStyle={styles.customDropdown}\n        />\n\n        {/* Selection Display */}\n        {country && (\n          <View style={styles.selection}>\n            <Text style={styles.selectionText}>\n              Selected: {countries.find(c => c.value === country)?.label}\n            </Text>\n          </View>\n        )}\n      </ScrollView>\n    </SafeAreaView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#f5f5f5',\n  },\n  content: {\n    padding: 20,\n  },\n  header: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    textAlign: 'center',\n    marginBottom: 24,\n    color: '#333',\n  },\n  customTrigger: {\n    borderColor: '#d9232d',\n    borderWidth: 2,\n    borderRadius: 12,\n  },\n  customDropdown: {\n    borderRadius: 12,\n  },\n  selection: {\n    marginTop: 20,\n    padding: 12,\n    backgroundColor: '#e3f2fd',\n    borderRadius: 8,\n  },\n  selectionText: {\n    fontSize: 14,\n    color: '#1976d2',\n  },\n});\n\nexport default DropdownTestScreen;\n```\n\n---\n\n## 📝 TypeScript\n\nFull TypeScript support included:\n\n```tsx\nimport Dropdown, { Option, DropdownProps } from '@atom_design/dropdown';\n\nconst options: Option[] = [\n  { label: 'Option 1', value: 'opt1' },\n  { label: 'Option 2', value: 'opt2' },\n];\n\nconst MyDropdown: React.FC = () => {\n  const [value, setValue] = useState<string | null>(null);\n\n  return (\n    <Dropdown\n      label=\"Select\"\n      options={options}\n      value={value}\n      onSelect={(val) => setValue(val as string)}\n    />\n  );\n};\n```\n\n---\n\n## ♿ Accessibility\n\nThe component includes full accessibility support:\n\n- Proper `accessibilityRole` on all interactive elements\n- `accessibilityState` for disabled and expanded states\n- `accessibilityHint` for usage guidance\n- Screen reader support for selected state\n\n---\n\n## 👤 Author\n\nAtom Design Team\n\n---\n\n## 📄 License\n\nMIT © [Atom Design](https://github.com/atom-design)\n","readmeFilename":"README.md","_rev":"1-76d8f5413f39fc413e21081685ddaf49"}