2b:null 2c:["$","title",null,{"children":"React Multiselect | Selene Blok | Observable"}] 31:Ta27,MultiSelect = component(({ options, onChange, label, selection, debug }) => { const inputLabel = label ?? 'Search'; // The label to apply to the search input const enableDebug = debug ?? false; // Whether to enable debug mode (to show internal state) if (!options) { throw new Error('Please provide options to the MultiSelect component'); } if (!onChange) { throw new Error( 'Please provide an onChange function to MultiSelect component' ); } if (debug) { console.debug(selection || []); } const [query, setQuery] = useState(''); const [queryResults, setQueryResults] = useState(options); const [selected, setSelected] = useState(selection || []); const selectInverse = () => { setSelected(options.filter(option => !selected.includes(option))); }; const handleSelection = (event, value) => { event.stopPropagation(); if (event.ctrlKey) { if (selected.includes(value)) { const newSelected = selected.filter(el => el != value); setSelected(newSelected); } else { const newSelected = [...selected, value]; setSelected(newSelected); } } }; useEffect(() => setQueryResults(options), [options]); useEffect(() => onChange(selected), [selected]); useEffect(() => { const regexp = new RegExp(query, 'i'); const newQueryResults = options.filter(result => regexp.test(result)); setQueryResults(newQueryResults); }, [query]); return jsx`

${ debug ? jsx`

${JSON.stringify({ query, selected })}

${JSON.stringify({ queryResults })}

` : '' } ${styles}

${inputLabel}: setQuery(e.target.value)}/>

${queryResults.map( (result, idx) => jsx`

handleSelection(e, result)} >${result}

` )}

`; })32:[] 2f:{"id":"130196c2c1b230fe","slug":"react-multiselect","title":"React Multiselect","thumbnail":"0bcc3601778b4e9197471bc70d234008390cd26d5e87219ac3d32c7655b4b4ca","access_level":"public","create_time":"$D2020-12-10T14:04:58.705Z","update_time":"$D2020-12-15T13:45:32.441Z","view_time":null,"first_public_time":"$D2020-12-11T11:21:10.600Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"3cdeccc1ad2f7c8e","login":"selenecodes","name":"Selene Blok","avatar_url":"https://avatars-next.observableusercontent.com/100c4338f6c570d93da1037a8d94a51f2040e227a3480ee2b464abd22afaa553","tier":"starter_2024"},"version":171,"publish_version":171,"role":null,"authored":false,"authors":[{"type":"individual","id":"7fe63d183a47404d","login":"selenecodes","name":"Selene Blok","avatar_url":"https://avatars-next.observableusercontent.com/25a7c960cccc8fbc811dfa2c0c4a56f86a2f798f0c0ab2995624797232075f8f","tier":null}],"members":[{"type":"individual","id":"7fe63d183a47404d","login":"selenecodes","name":"Selene Blok","avatar_url":"https://avatars-next.observableusercontent.com/25a7c960cccc8fbc811dfa2c0c4a56f86a2f798f0c0ab2995624797232075f8f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"React Multiselect","cells":[{"id":0,"value":"md`# React Multiselect`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"multiselect","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof multiselect = render(({ setValue }) => {\n const dispatch = res => console.log(res);\n const debug = false;\n const label = 'Search';\n\n useEffect(() => {\n setValue([]);\n }, []);\n\n return jsx`\n <${MultiSelect}\n options=${options}\n onChange=${res => setValue(res)}\n label=${label}\n selection=${[1, 2, 3]}\n debug=${debug}\n />\n `;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`# Component`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md`## Component styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"styles = jsx`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"md`## Test data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"options = [\n 1,\n 2,\n 3,\n 4,\n 5,\n 6,\n 7,\n 8,\n 9,\n 10,\n 11,\n 12,\n 13,\n 14,\n 15,\n 16,\n 17,\n 18,\n 19,\n 20,\n 21,\n 22,\n 23,\n 24,\n 25,\n 26,\n 27,\n 28,\n 29,\n 30\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {\n render,\n component,\n jsx,\n memo,\n forwardRef,\n React,\n ReactDOM,\n createElement,\n Children,\n createRef,\n createContext,\n lazy,\n Fragment,\n StrictMode,\n Suspense,\n cloneElement,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useMemo,\n useReducer,\n useRef,\n useState,\n useDebugValue,\n createPortal,\n __SECRET_SWITCHER\n} from '@j-f1/react'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"