{"_id":"@atom-design-mog/menu","_rev":"2-f057b14b14d0185dac6c12fda777b9c8","name":"@atom-design-mog/menu","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@atom-design-mog/menu","version":"1.0.0","keywords":["react-native","login","authentication","microsoft","ui-component"],"author":{"name":"Avi Gupta"},"license":"MIT","_id":"@atom-design-mog/menu@1.0.0","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"71d83c3f4b05d93ea7f2950e4944baced046392d","tarball":"https://registry.npmjs.org/@atom-design-mog/menu/-/menu-1.0.0.tgz","fileCount":3,"integrity":"sha512-AUclX/tWpjkrpVCC9LBK6HtWF5rwoB0OJA8ltpCG6pQtuI/FT9H/p/NVb33cUowvdSp3LC5zRcHQkTd64QSsew==","signatures":[{"sig":"MEYCIQCSwrq5FoQ8KLZxQVLAlmh8j8sewNpDHH60ViqZwxJbEgIhAOrMFjxPz3oTGIccsZQzUKMF65wuoNhsJ6feKSjs+8to","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11599},"main":"index.js","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"A React Native login component for Menu.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_npmOperationalInternal":{"tmp":"tmp/menu_1.0.0_1763726706432_0.6161404307898559","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@atom-design-mog/menu","version":"1.0.1","description":"A React Native login component for Menu.","main":"index.js","author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","login","authentication","microsoft","ui-component"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_id":"@atom-design-mog/menu@1.0.1","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-K0/KRRte/t0yHmopSa7E6HC8IdYIhzzGs59H+xvs4S44i1IeZDcoz4LerlMJXdDV7h6IJ2CBsL5tHHIVT5ys4Q==","shasum":"2333eb6a862fe7fb5851fde50b9fe05794ba3b0c","tarball":"https://registry.npmjs.org/@atom-design-mog/menu/-/menu-1.0.1.tgz","fileCount":4,"unpackedSize":17361,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDOZ4eI9rph16TiKvhXOxaWuJ3P4bPVzOKZChffWMYAhQIga+zvd3yGpfNi3XMeo4eP76N+9pxq5McB50+MnTZMbBg="}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/menu_1.0.1_1763968979646_0.897335864360796"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-21T12:05:06.359Z","modified":"2025-11-24T07:23:00.002Z","1.0.0":"2025-11-21T12:05:06.619Z","1.0.1":"2025-11-24T07:22:59.811Z"},"author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","login","authentication","microsoft","ui-component"],"description":"A React Native login component for Menu.","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"readme":"# @atom-design-mog/menu\n\nA powerful, fully customizable **Menu / Filter / Selection Component** for React Native. Supports multiple modes: Search + Radio, Search + Checkbox, Search + Checkbox + Chips, and Input fields with footer CTA buttons. Part of the Atom Design System.\n\n---\n\n## 📦 Installation\n\nInstall with npm:\n\n```bash\nnpm install @atom-design-mog/menu\n```\n\nOr with yarn:\n\n```bash\nyarn add @atom-design-mog/menu\n```\n\n---\n\n## 🚀 Import\n\n```js\nimport Menu from '@atom-design-mog/menu';\n```\n\n---\n\n## 🎉 Supported Types (Modes)\n\n- `searchRadio` — Searchable list with radio selection\n- `searchCheckbox` — Searchable list with checkbox selection + “Check All”\n- `searchChipsCheckbox` — Searchable list, checkbox selection with chips above the list\n- `inputFooter` — Two input fields with footer CTA buttons (Okay / Cancel)\n\n---\n\n## ⭐ Features\n\n- 🔍 Built-in search\n- 🎯 Radio selection\n- ☑️ Checkbox & multi-select with Check All and indeterminate states\n- 🏷 Dynamic chips (add / remove) in chips mode\n- 🔢 Input fields with footer actions (Apply / Cancel)\n- 📱 Native modal — perfect for Android & iOS\n- 🎨 Fully customizable styles\n- ✨ No external runtime dependencies\n\n---\n\n## 🧩 Props\n\n| Prop             | Type     | Required | Description                                                                       |\n| ---------------- | -------- | -------- | --------------------------------------------------------------------------------- |\n| **label**        | string   | No       | Label shown above the trigger                                                     |\n| **triggerText**  | string   | Yes      | Text displayed on menu trigger                                                    |\n| **type**         | string   | Yes      | Menu mode (`searchRadio`, `searchCheckbox`, `searchChipsCheckbox`, `inputFooter`) |\n| **options**      | Array    | No       | List of `{ label, value }` options                                                |\n| **chips**        | Array    | No       | Used only in `searchChipsCheckbox`                                                |\n| **onSelect**     | function | No       | Returns selected value(s)                                                         |\n| **onAddChip**    | function | No       | Callback when new chip is added                                                   |\n| **onRemoveChip** | function | No       | Called when user removes chip                                                     |\n| **onApply**      | function | No       | Used in `inputFooter` mode to return inputs                                       |\n| **onCancel**     | function | No       | Called when cancel pressed                                                        |\n\n\n---\n\n## 📘 Basic Examples\n\n### Search + Radio\n\n```jsx\n<Menu\n  label=\"Choose Fruit\"\n  triggerText={value || 'Search & Select'}\n  type=\"searchRadio\"\n  options={[{ label: 'Apple', value: 'Apple' }, { label: 'Orange', value: 'Orange' }]}\n  onSelect={setValue}\n/>\n```\n\n### Search + Checkbox\n\n```jsx\n<Menu\n  label=\"Multi-Select\"\n  triggerText=\"Pick Items\"\n  type=\"searchCheckbox\"\n  options={options}\n  onSelect={(values) => console.log(values)}\n/>\n```\n\n### Search + Chips Checkbox\n\n```jsx\n<Menu\n  label=\"Tags\"\n  triggerText=\"Search + Chips\"\n  type=\"searchChipsCheckbox\"\n  chips={chips}\n  options={options}\n  onSelect={setSelected}\n  onAddChip={(chip) => setChips([...chips, chip])}\n  onRemoveChip={(chip) => setChips(chips.filter(c => c !== chip))}\n/>\n```\n\n### Input + Footer Buttons\n\n```jsx\n<Menu\n  label=\"Quantity Range\"\n  triggerText=\"Enter Range\"\n  type=\"inputFooter\"\n  onApply={(data) => console.log('Applied:', data)}\n  onCancel={() => console.log('Cancelled')}\n/>\n```\n\n---\n\n## 🧪 Full Test Screen (Recommended)\n\n```jsx\nimport React, { useState } from 'react';\nimport { View, Text, ScrollView } from 'react-native';\nimport Menu from '@atom-design-mog/menu';\n\nexport default function TestMenusScreen() {\n  const [radioValue, setRadioValue] = useState('');\n  const [checkboxValue, setCheckboxValue] = useState([]);\n  const [chipsCheckboxValue, setChipsCheckboxValue] = useState([]);\n  const [chips, setChips] = useState(['Chip 1', 'Chip 2']);\n  const [inputValues, setInputValues] = useState({});\n\n  const options = [\n    { label: 'Option 1 - Apple', value: 'Apple' },\n    { label: 'Option 2 - Banana', value: 'Banana' },\n    { label: 'Option 3 - Cherry', value: 'Cherry' },\n    { label: 'Option 4 - Orange', value: 'Orange' },\n  ];\n\n  const handleAddChip = chip => {\n    if (chip && !chips.includes(chip)) setChips([...chips, chip]);\n  };\n\n  const handleRemoveChip = chip => setChips(chips.filter(c => c !== chip));\n\n  return (\n    <ScrollView style={{ flex: 1 }}>\n      <View style={{ padding: 20, gap: 24 }}>\n        <Text>Menu Search + Radio</Text>\n        <Menu label=\"Label\" triggerText={radioValue || 'Search with radio'} type=\"searchRadio\" options={options} onSelect={setRadioValue} />\n\n        <Text>Menu Search + Checkbox</Text>\n        <Menu label=\"Label\" triggerText={checkboxValue.length > 0 ? `Selected: ${checkboxValue.length}` : 'Search with checkbox'} type=\"searchCheckbox\" options={options} onSelect={setCheckboxValue} />\n\n        <Text>Menu Search + Chips Checkbox</Text>\n        <Menu label=\"Label\" triggerText=\"Search + Chips\" type=\"searchChipsCheckbox\" options={options} chips={chips} onSelect={setChipsCheckboxValue} onAddChip={handleAddChip} onRemoveChip={handleRemoveChip} />\n\n        <Text>Menu with Input & Footer Buttons</Text>\n        <Menu label=\"Quantity Input\" triggerText=\"Open Menu\" type=\"inputFooter\" onApply={(data) => setInputValues(data)} onCancel={() => console.log('Cancelled')} />\n      </View>\n    </ScrollView>\n  );\n}\n```\n\n---\n\n## 👤 Author\n\nAvi Gupta\n","readmeFilename":"README.md"}