31:Tece,yamultiselect = (data, options = {}) => { const { width, locale, disabled, label, placeholder } = Object.assign( { width: 240, disabled: false, placeholder: "Search…" }, options ); const keyof = options.keyof ? options.keyof : isMap(data) ? first : identity; const valueof = options.valueof ? options.valueof : isMap(data) ? second : identity; const keys = getKeys(data, keyof); const values = getValues(data, valueof); const initialIndices = Array.isArray(options.value) ? indicesFromValues(options.value) : []; let selectedIndices = new Set(initialIndices); const id = newId(); const datalistId = `${id}-datalist`; const inputEl = html``; const selectionEl = html`

`; const labelEl = label ? html`${label}` : ""; const datalistEl = html``; const form = html``; function dispatchInputEvent() { form.dispatchEvent(new Event("input", { bubbles: true })); } function indicesFromValues(value) { let indices = []; value.forEach((v) => { const index = values.indexOf(v); if (index >= 0) { indices.push(index); } }); return indices; } function oninput(event) { preventDefault(event); const pickedKey = event.target?.value; if (pickedKey) { const iOfIndex = keys.indexOf(pickedKey); if (iOfIndex >= 0) { inputEl.value = ""; selectedIndices.add(iOfIndex); updateUI(); dispatchInputEvent(); } } } function removeIndex(index) { const result = selectedIndices.delete(index); if (result) { updateUI(); dispatchInputEvent(); } } function updateOptions() { datalistEl.innerHTML = null; const options = dataList(keys, selectedIndices); options.forEach((option) => datalistEl.append(option)); } function updateSelectedPills() { selectionEl.innerHTML = null; let items = []; for (let i of selectedIndices) { const k = keys[i]; items.push(html`

${k}

`); } items.forEach((el) => selectionEl.append(el)); } function updateUI() { updateOptions(); updateSelectedPills(); } function generateValues() { let items = []; for (let i of selectedIndices) { items.push(values[i]); } return items; } form.onchange = preventDefault; form.oninput = oninput; form.onsubmit = preventDefault; attachStyles(invalidation); updateUI(); return Object.defineProperty(form, "value", { get() { return selectedIndices.size ? generateValues() : []; }, set(value) { if (Array.isArray(value)) { const indices = indicesFromValues(value); selectedIndices = new Set(indices); updateUI(); dispatchInputEvent(); } } }); }32:Ta12,attachStyles = (placeOfUseInvalidation) => { const elId = `${msns}-style`; if (document.getElementById(elId)) return; const style = html``; document.head.append(style); placeOfUseInvalidation.then(() => style.remove()); invalidation.then(() => style.remove()); }33:T8b0,x11colors = [ "aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen", "darkgrey", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkslategrey", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold", "goldenrod", "gray", "green", "greenyellow", "grey", "honeydew", "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightgrey", "lightpink", "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey", "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta", "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "purple", "rebeccapurple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "slategrey", "snow", "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen" ]34:[{"id":"e50e3cc6ed348b150173470566242e9360e24ba20c181a6f46412c414d33612a1c925e7bab746dc8fb0fe2cf68ed43481dd4e74ae5720f53f03fc0065b66a215","href":"https://static.observableusercontent.com/files/e50e3cc6ed348b150173470566242e9360e24ba20c181a6f46412c414d33612a1c925e7bab746dc8fb0fe2cf68ed43481dd4e74ae5720f53f03fc0065b66a215","name":"cover.jpg","type":"image/jpeg","lastModified":1640571005042.063,"size":18075}] 2f:{"title":"Yet Another Multi-select","cells":[{"id":0,"value":"# Yet Another Multi-select","pinned":false,"hidden":false,"mode":"md"},{"id":986,"value":"A replacement for [Observable Input: Select][1] with autocomplete and means to pick multiple options. Uses [`datalist`][2], making it accessible and usable within Observable Notebooks.\n\n[1]: https://observablehq.com/@observablehq/input-select\n[2]: http://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist","pinned":false,"hidden":false,"mode":"md"},{"id":937,"value":"FileAttachment(\"cover.jpg\").image({\n width: 480\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"toc({\n headers: \"h2,h3,h4,h5\",\n hideStartingFrom: \"Sample Data\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"## Usage\n\nImport into your notebook using:\n~~~js\n import {yamultiselect} from '@saneef/yet-another-multi-select'\n~~~\n\n... then, declare a `yamultiselect` with `viewof`, like so:\n~~~js\n viewof flavor = yamultiselect(\n [\"salty\", \"sweet\", \"bitter\", \"sour\", \"umami\"], // data\n {label: \"Flavors\"} // options\n )\n~~~\n\n... you can access the value in any cell using `flavor` variable.\n\n~~~js\n flavor\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":576,"value":"viewof flavor = yamultiselect([\"salty\", \"sweet\", \"bitter\", \"sour\", \"umami\"], {\n label: \"Flavors\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":592,"value":"flavor","pinned":true,"hidden":false,"mode":"ojs"},{"id":745,"value":"## Options\n\nThe available `options` are:\n\n* `label`: a label; either a string or an HTML element.\n* `value`: an array of initial values.\n* `placeholder`: the [placeholder][placeholder] attribute.\n* `keyof`: a function to return the key for the given element in `data` (not used when `data` is of type [`Map`][Map]).\n* `valueof`: a function to return the value of the given element in `data` (not used when `data` is of type [`Map`][Map]).\n* `width`: the width of the input (not including the label).\n* `disabled`: whether input is disabled; defaults to `false`.\n\n[placeholder]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder\n[Map]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map","pinned":false,"hidden":false,"mode":"md"},{"id":229,"value":"## Examples","pinned":false,"hidden":false,"mode":"md"},{"id":518,"value":"### Initial values","pinned":false,"hidden":false,"mode":"md"},{"id":522,"value":"viewof colors2 = yamultiselect(x11colors, {\n value: [\"azure\", \"darksalmon\"],\n label: \"Colors\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":534,"value":"colors2","pinned":true,"hidden":false,"mode":"ojs"},{"id":870,"value":"### Types of `data`","pinned":false,"hidden":false,"mode":"md"},{"id":232,"value":"#### Data as Array of Strings","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"viewof color = yamultiselect(x11colors, { label: \"Colors\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"color","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"#### Data as Array of Objects","pinned":false,"hidden":false,"mode":"md"},{"id":126,"value":"viewof objOfTeams = yamultiselect(teams, {\n valueof: (d) => d.name,\n keyof: (d) => d.name,\n label: \"Teams\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"objOfTeams","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"#### Data as a Map","pinned":false,"hidden":false,"mode":"md"},{"id":691,"value":"viewof sizes = yamultiselect(\n new Map([\n [\"Short\", 8],\n [\"Tall\", 12],\n [\"Grande\", 16],\n [\"Venti\", 20]\n ]),\n { value: [8], label: \"Sizes\" }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":695,"value":"sizes","pinned":true,"hidden":false,"mode":"ojs"},{"id":528,"value":"### Disabled Input","pinned":false,"hidden":false,"mode":"md"},{"id":531,"value":"viewof disableMultiSelect = yamultiselect(x11colors, {\n disabled: true,\n value: [\"darksalmon\"],\n label: \"Colors\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":536,"value":"disableMultiSelect","pinned":true,"hidden":false,"mode":"ojs"},{"id":756,"value":"### Setting input `width`","pinned":false,"hidden":false,"mode":"md"},{"id":761,"value":"viewof colors3 = yamultiselect(x11colors, {\n value: [\"darksalmon\"],\n label: \"Colors\",\n width: 320\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":865,"value":"### Write into `value`","pinned":false,"hidden":false,"mode":"md"},{"id":864,"value":"viewof writableMultiselect = yamultiselect(x11colors, {\n label: \"Colors\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":877,"value":"writableMultiselect","pinned":true,"hidden":false,"mode":"ojs"},{"id":863,"value":"Inputs.button(\"Write a random color\", {\n reduce: () => {\n viewof writableMultiselect.value = [pick(x11colors)];\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":513,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"dataList = (keys, selectedIndices) =>\n keys.reduce((acc, v, i) => {\n if (!selectedIndices.has(i)) {\n return [...acc, html.fragment``];\n }\n return acc;\n }, [])","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"getKeys = (data, keyof) => {\n if (isMap(data)) {\n return Array.from(data.keys()).map((k) => stringify(k));\n }\n\n let keys = [];\n data.forEach((d, i) => keys.push(stringify(keyof(d, i, data))));\n return keys;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"getValues = (data, valueof) => {\n if (isMap(data)) {\n return Array.from(data.values());\n }\n\n let values = [];\n data.forEach((d, i) => values.push(valueof(d, i, data)));\n return values;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"ns = Inputs.text().classList[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"msns = {\n return ns.replace(\"oi-\", \"yams-\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":411,"value":"blockClass = `${msns}-form`","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"newId = {\n let nextId = 0;\n\n return function newId() {\n return `${msns}-${++nextId}`;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"length = (x) => {\n return x == null ? null : typeof x === \"number\" ? `${x}px` : `${x}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"// Default width based on @observablehq/inputs\nfunction cssPropWidth(width) {\n return { \"--input-width\": length(width) };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"function preventDefault(event) {\n event.preventDefault();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"function identity(x) {\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":959,"value":"function first([x]) {\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":955,"value":"function second([, x]) {\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":947,"value":"isMap = (data) => data instanceof Map","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"function stringify(x) {\n return x == null ? \"\" : `${x}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":861,"value":"pick = (arr) => arr[Math.floor(Math.random() * arr.length)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":382,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":830,"value":"icons = ({\n close: () =>\n svg``\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"## Credits\n\n* Inspiration\n * Thanks to [Aaron](https://observablehq.com/@aaronkyle), for inspiring me to take a crack at this problem.\n* Code References\n * [Observable Inputs](https://observablehq.com/@observablehq/inputs)\n * [Jeremy’s Inputs](https://observablehq.com/@jashkenas/inputs)\n * [John Alexis Guerra Gómez’s Multi Auto Select](https://observablehq.com/@john-guerra/multi-auto-select)\n* Icons\n * [Feather Icons](https://feathericons.com/)\n* Support\n * Thanks to [Harris Lapiroff](https://observablehq.com/@harrislapiroff) for pointing out some bugs.","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"## Sample Data","pinned":false,"hidden":false,"mode":"md"},{"id":84,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"teams = [\n {name: \"Lakers\", location: \"Los Angeles, California\"},\n {name: \"Warriors\", location: \"San Francisco, California\"},\n {name: \"Celtics\", location: \"Boston, Massachusetts\"},\n {name: \"Nets\", location: \"New York City, New York\"},\n {name: \"Raptors\", location: \"Toronto, Ontario\"},\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"html = htl.html","pinned":false,"hidden":false,"mode":"ojs"},{"id":764,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":772,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1020,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1026,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}