@hypothesis/frontend-shared/lib/pattern-library/examples/select-multi-select.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/examples/select-multi-select.tsx";
import { useId, useState } from 'preact/hooks';
import { MultiSelect } from '../..';
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "preact/jsx-dev-runtime";
const items = [{
  id: '1',
  name: 'John Doe'
}, {
  id: '2',
  name: 'Albert Banana'
}, {
  id: '3',
  name: 'Bernard California'
}, {
  id: '4',
  name: 'Cecelia Davenport'
}, {
  id: '5',
  name: 'Doris Evanescence'
}];
export default function App() {
  const [values, setSelected] = useState([items[0], items[3]]);
  const selectId = useId();
  return _jsxDEV("div", {
    className: "w-96 mx-auto",
    children: [_jsxDEV("label", {
      htmlFor: selectId,
      children: "Select students"
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 24,
      columnNumber: 7
    }, this), _jsxDEV(MultiSelect, {
      value: values,
      onChange: newStudents => setSelected(newStudents),
      buttonId: selectId,
      buttonContent: values.length === 0 ? _jsxDEV(_Fragment, {
        children: "All students"
      }, void 0, false) : values.length === 1 ? values[0].name : _jsxDEV(_Fragment, {
        children: [values.length, " students selected"]
      }, void 0, true),
      children: [_jsxDEV(MultiSelect.Option, {
        value: undefined,
        children: "All students"
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 39,
        columnNumber: 9
      }, this), items.map(item => _jsxDEV(MultiSelect.Option, {
        value: item,
        children: item.name
      }, item.id, false, {
        fileName: _jsxFileName,
        lineNumber: 41,
        columnNumber: 11
      }, this))]
    }, void 0, true, {
      fileName: _jsxFileName,
      lineNumber: 25,
      columnNumber: 7
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 23,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=select-multi-select.js.map