{"_id":"@cujuju/solidjs-editable-list-flyout","_rev":"3-248963607d827aaedb91c9aea6599398","name":"@cujuju/solidjs-editable-list-flyout","dist-tags":{"latest":"0.2.1"},"versions":{"0.1.0":{"name":"@cujuju/solidjs-editable-list-flyout","version":"0.1.0","keywords":["solidjs","flyout","popover","select","editable-list","inline-add"],"author":{"name":"Cujuju"},"license":"MIT","_id":"@cujuju/solidjs-editable-list-flyout@0.1.0","maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/editable-list-flyout","bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"dist":{"shasum":"5f9752bc6dfe3a228de36b7fce2370ff63ecc9e7","tarball":"https://registry.npmjs.org/@cujuju/solidjs-editable-list-flyout/-/solidjs-editable-list-flyout-0.1.0.tgz","fileCount":12,"integrity":"sha512-4SVI84qYq61H3S8Gg7hGmv/81+9z2rUe2AvwFys3miPXvsCY561Fci5567+mqUE87rHsgRcJzXZpoVhrzYhIqw==","signatures":[{"sig":"MEUCIQCSov0o4FZKAhW96lVbzi95rL6UfvD0/itFX3DIZBG+EAIgM0EMIzIT5sGs912oQ6rV0BsPpDwZeW/Kw/TWM9s8UKs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":134809},"main":"./dist/index.js","type":"module","_from":"file:cujuju-solidjs-editable-list-flyout-0.1.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"solid":"./src/index.ts","types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./src/styles.css"},"scripts":{"test":"vitest run","build":"vite build","test:watch":"vitest"},"_npmUser":{"name":"cujuju","email":"cujuju@pm.me"},"_resolved":"C:\\Users\\shawn\\AppData\\Local\\Temp\\9adb8570c8c4efb45f4ab56252a23186\\cujuju-solidjs-editable-list-flyout-0.1.0.tgz","_integrity":"sha512-4SVI84qYq61H3S8Gg7hGmv/81+9z2rUe2AvwFys3miPXvsCY561Fci5567+mqUE87rHsgRcJzXZpoVhrzYhIqw==","repository":{"url":"git+https://github.com/Cujuju/solidjs-toolkit.git","type":"git","directory":"packages/editable-list-flyout"},"_npmVersion":"11.12.1","description":"Composed flyout primitive for SolidJS — anchored popover wrapping editable rows with built-in inline add affordance. Drop-in flyout-select with create/rename/delete.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"25.8.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.0.0","vitest":"^3.2.4","vite-plugin-solid":"^2.11.12","@cujuju/solidjs-hooks":"2.0.0","@solidjs/testing-library":"^0.8.0","@testing-library/jest-dom":"^6.9.1","@cujuju/solidjs-anchored-popover":"0.1.0","@cujuju/solidjs-editable-list-row":"0.1.0"},"peerDependencies":{"solid-js":">=1.7.0","@cujuju/solidjs-hooks":"^2.0.0","@cujuju/solidjs-anchored-popover":"^0.1.0","@cujuju/solidjs-editable-list-row":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/solidjs-editable-list-flyout_0.1.0_1778524289722_0.40886331612837523","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@cujuju/solidjs-editable-list-flyout","version":"0.2.0","keywords":["solidjs","flyout","popover","select","editable-list","inline-add"],"author":{"name":"Cujuju"},"license":"MIT","_id":"@cujuju/solidjs-editable-list-flyout@0.2.0","maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/editable-list-flyout","bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"dist":{"shasum":"795c7cb9f9eea8e17d0e3526de1b86a6e766b9c4","tarball":"https://registry.npmjs.org/@cujuju/solidjs-editable-list-flyout/-/solidjs-editable-list-flyout-0.2.0.tgz","fileCount":12,"integrity":"sha512-mZ2zWd5W9RqqCeXmWsYO+XQHgIWJyxNDgIi/w/S1JThEulas/BaqZROsoyNUquYC1a1bzuIR6p2Vb2NiAOE2VQ==","signatures":[{"sig":"MEYCIQDk6QuwM2+qBPn6xzvT8bGP3cEhI8DNpuPtfw8Pg2/OigIhALirrwNVYsLYN/nH7H0Y+UciKngxE8UOmm0XnsPyiqu3","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":140675},"main":"./dist/index.js","type":"module","_from":"file:cujuju-solidjs-editable-list-flyout-0.2.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"solid":"./src/index.ts","types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./src/styles.css"},"scripts":{"test":"vitest run","build":"vite build","test:watch":"vitest"},"_npmUser":{"name":"cujuju","email":"cujuju@pm.me"},"_resolved":"/tmp/fcd10a2dcccce09ba25396a6a29a7414/cujuju-solidjs-editable-list-flyout-0.2.0.tgz","_integrity":"sha512-mZ2zWd5W9RqqCeXmWsYO+XQHgIWJyxNDgIi/w/S1JThEulas/BaqZROsoyNUquYC1a1bzuIR6p2Vb2NiAOE2VQ==","repository":{"url":"git+https://github.com/Cujuju/solidjs-toolkit.git","type":"git","directory":"packages/editable-list-flyout"},"_npmVersion":"12.0.1","description":"Composed flyout primitive for SolidJS — anchored popover wrapping editable rows with built-in inline add affordance. Drop-in flyout-select with create/rename/delete.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.0.0","vitest":"^3.2.4","vite-plugin-solid":"^2.11.12","@cujuju/solidjs-hooks":"2.0.0","@solidjs/testing-library":"^0.8.0","@testing-library/jest-dom":"^6.9.1","@cujuju/solidjs-anchored-popover":"0.1.0","@cujuju/solidjs-editable-list-row":"0.1.1"},"peerDependencies":{"solid-js":">=1.7.0","@cujuju/solidjs-hooks":"^2.0.0","@cujuju/solidjs-anchored-popover":"^0.1.0","@cujuju/solidjs-editable-list-row":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/solidjs-editable-list-flyout_0.2.0_1784887088696_0.980245961105191","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@cujuju/solidjs-editable-list-flyout","version":"0.2.1","description":"Composed flyout primitive for SolidJS — anchored popover wrapping editable rows with built-in inline add affordance. Drop-in flyout-select with create/rename/delete.","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","solid":"./src/index.ts","import":"./dist/index.js"},"./styles.css":"./src/styles.css"},"sideEffects":["**/*.css"],"license":"MIT","author":{"name":"Cujuju"},"repository":{"type":"git","url":"git+https://github.com/Cujuju/solidjs-toolkit.git","directory":"packages/editable-list-flyout"},"homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/editable-list-flyout","bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"keywords":["solidjs","flyout","popover","select","editable-list","inline-add"],"peerDependencies":{"solid-js":">=1.7.0","@cujuju/solidjs-anchored-popover":"^0.1.1","@cujuju/solidjs-editable-list-row":"^0.1.2","@cujuju/solidjs-hooks":"^2.0.0"},"devDependencies":{"@solidjs/testing-library":"^0.8.0","@testing-library/jest-dom":"^6.9.1","jsdom":"^24.0.0","vite-plugin-solid":"^2.11.12","vitest":"^3.2.4","@cujuju/solidjs-anchored-popover":"^0.1.1","@cujuju/solidjs-hooks":"^2.0.0","@cujuju/solidjs-editable-list-row":"^0.1.2"},"publishConfig":{"access":"public"},"scripts":{"test":"vitest run","test:watch":"vitest","build":"vite build"},"_id":"@cujuju/solidjs-editable-list-flyout@0.2.1","_integrity":"sha512-fQkIgjso1Wg2grDITI2vG1wwSiq+c6iSGr9gcLVMi8qBLHRcoNt1d8bbRTQZfmReW9+arzp0Ib3RqJPtay2vrA==","_resolved":"/tmp/4cdd9f21d9932cb61c0a02a180af96f8/cujuju-solidjs-editable-list-flyout-0.2.1.tgz","_from":"file:cujuju-solidjs-editable-list-flyout-0.2.1.tgz","_nodeVersion":"24.18.0","_npmVersion":"12.0.1","dist":{"integrity":"sha512-fQkIgjso1Wg2grDITI2vG1wwSiq+c6iSGr9gcLVMi8qBLHRcoNt1d8bbRTQZfmReW9+arzp0Ib3RqJPtay2vrA==","shasum":"c376778f59e87a91c955e1e4f9d7679ee7449f57","tarball":"https://registry.npmjs.org/@cujuju/solidjs-editable-list-flyout/-/solidjs-editable-list-flyout-0.2.1.tgz","fileCount":12,"unpackedSize":140678,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGEbC3oNlJZSUANxL5CIFnzVcNcISJCKwqeHLHO39UNQAiEAnZiV/6MM8dd0HQ1g3XZRbYWanGz19bmc8n/B4WHH5cw="}]},"_npmUser":{"name":"cujuju","email":"cujuju@pm.me"},"directories":{},"maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/solidjs-editable-list-flyout_0.2.1_1784888187600_0.14853592000315397"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-11T18:31:29.614Z","modified":"2026-07-24T10:16:27.902Z","0.1.0":"2026-05-11T18:31:29.982Z","0.2.0":"2026-07-24T09:58:08.841Z","0.2.1":"2026-07-24T10:16:27.750Z"},"bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"author":{"name":"Cujuju"},"license":"MIT","homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/editable-list-flyout","keywords":["solidjs","flyout","popover","select","editable-list","inline-add"],"repository":{"type":"git","url":"git+https://github.com/Cujuju/solidjs-toolkit.git","directory":"packages/editable-list-flyout"},"description":"Composed flyout primitive for SolidJS — anchored popover wrapping editable rows with built-in inline add affordance. Drop-in flyout-select with create/rename/delete.","maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"readme":"# @cujuju/solidjs-editable-list-flyout\n\nComposed flyout primitive — anchored popover wrapping a list of editable rows\nwith a built-in inline-add affordance. Drop-in replacement for the\n\"flyout-select with create / rename / delete\" pattern.\n\n## Install\n\n```sh\npnpm add @cujuju/solidjs-editable-list-flyout \\\n         @cujuju/solidjs-anchored-popover \\\n         @cujuju/solidjs-editable-list-row \\\n         @cujuju/solidjs-hooks\n```\n\nPeer dependencies: `solid-js >= 1.7.0`, plus the three sibling toolkit\npackages.\n\n## Usage\n\n```tsx\nimport { createSignal } from 'solid-js';\nimport EditableListFlyout from '@cujuju/solidjs-editable-list-flyout';\n\nfunction CollectionPicker() {\n  const [open, setOpen] = createSignal(false);\n  const [anchor, setAnchor] = createSignal<HTMLButtonElement>();\n\n  return (\n    <>\n      <button ref={setAnchor} onClick={() => setOpen((o) => !o)}>\n        Collections\n      </button>\n      <EditableListFlyout\n        open={open}\n        anchor={anchor}\n        onDismiss={() => setOpen(false)}\n        placement=\"below-end\"\n        role=\"dialog\"\n        aria-label=\"Add to Collection\"\n        items={collections()}\n        itemConfig={(c) => ({\n          selection: {\n            kind: 'checkbox',\n            checked: isMember(c.id),\n            onToggle: (next) => toggleMembership(c.id, next),\n          },\n        })}\n        onRename={(c, name) => renameCollection(c.id, name)}\n        onDelete={(c) => deleteCollection(c.id)}\n        onCreate={(name) => createCollection(name)}\n        createButtonLabel=\"New Collection\"\n        createPlaceholder=\"Collection name…\"\n      />\n    </>\n  );\n}\n```\n\n## Props\n\n| Prop | Type | Description |\n|---|---|---|\n| `open` | `Accessor<boolean>` | Reactive open state. |\n| `anchor` | `Accessor<HTMLElement>` | Element to anchor against. |\n| `onDismiss` | `() => void` | Outside-click / Escape handler. |\n| `placement` | `AnchoredPlacement` | Default `below-start`. |\n| `shouldSuppressDismiss` | `(target: Element) => boolean` | Forwarded to AnchoredPopover. |\n| `class` | `string` | Class on the popover content panel. |\n| `role` | `string` | ARIA role. |\n| `aria-label` | `string` | ARIA label. |\n| `items` | `TItem[]` | Items where `TItem extends { id; name }`. |\n| `itemConfig` | `(item) => EditableListFlyoutItemConfig` | Per-row overrides. |\n| `onActivate` | `(item) => void` | Body-click on a row. |\n| `onRename` | `(item, name) => Promise<void>` | Rename commit. Reject keeps row in rename. |\n| `onDelete` | `(item) => Promise<void>` | Delete commit. Runs after `confirmDelete`. |\n| `onCreate` | `(name) => Promise<void>` | Inline-create commit. Reject keeps input. |\n| `createButtonLabel` | `string` | Default `\"New\"`. |\n| `createPlaceholder` | `string` | Default `\"Name…\"`. |\n| `confirmDelete` | `(params) => Promise<boolean>` | Override the row delete-confirm. |\n| `emptyMessage` | `string` | Placeholder text when items is empty. |\n\n### `EditableListFlyoutItemConfig`\n\n```ts\ninterface EditableListFlyoutItemConfig {\n  leadingIcon?: () => JSX.Element;\n  leadingControl?: () => JSX.Element;\n  trailingLabel?: () => JSX.Element;\n  selection?: SelectionMode;          // { kind: 'none' } | { kind: 'checkbox'; ... }\n  deleteDisabled?: boolean;\n  busy?: () => boolean;\n  infoTooltip?: string;\n  reorderProps?: Record<string, unknown>;\n  deleteConfirmTitle?: string;\n  deleteConfirmMessage?: string;\n  renameAriaLabel?: string;\n  deleteAriaLabel?: string;\n  pendingRename?: () => boolean;\n  onRenameClose?: () => void;\n  onActivate?: () => void;            // per-row override; wins over flyout-level onActivate\n}\n```\n\n## Behavior\n\n- Footer add affordance only renders when `onCreate` is provided.\n- Button morphs to input on click. Enter commits the trimmed value, Escape\n  cancels, blur-empty cancels, blur-with-value commits. Reject keeps the\n  input open with the typed value so the consumer can show an error toast\n  and let the user retry.\n- Delete uses the parent `confirmDelete` prop; rows fall back to\n  `window.confirm` if it's omitted.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}