@hypothesis/frontend-shared/lib/pattern-library/examples/select-non-popover-listbox.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/examples/select-non-popover-listbox.tsx";
import { useId, useState } from 'preact/hooks';
import { Select } from '../..';
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "preact/jsx-dev-runtime";
const items = [{
  id: '1',
  name: 'All students'
}, {
  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 [value, setValue] = useState();
  const buttonId = useId();
  return _jsxDEV("div", {
    className: "w-full",
    children: [_jsxDEV("p", {
      children: ["When not using the ", _jsxDEV("code", {
        children: "popover"
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 26,
        columnNumber: 28
      }, this), " API, the listbox may be clipped by parent elements that are styled to hide overflow."]
    }, void 0, true, {
      fileName: _jsxFileName,
      lineNumber: 25,
      columnNumber: 7
    }, this), _jsxDEV("div", {
      className: "w-96 h-32 mx-auto overflow-auto",
      children: _jsxDEV(_Fragment, {
        children: [_jsxDEV("label", {
          htmlFor: buttonId,
          children: "Select a person"
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 31,
          columnNumber: 11
        }, this), _jsxDEV(Select, {
          listboxAsPopover: false,
          buttonId: buttonId,
          value: value,
          onChange: setValue,
          buttonContent: value ? value.name : _jsxDEV(_Fragment, {
            children: "Select one\u2026"
          }, void 0, false),
          children: items.map(item => _jsxDEV(Select.Option, {
            value: item,
            disabled: item.disabled,
            children: item.name
          }, item.id, false, {
            fileName: _jsxFileName,
            lineNumber: 40,
            columnNumber: 15
          }, this))
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 32,
          columnNumber: 11
        }, this)]
      }, void 0, true)
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 29,
      columnNumber: 7
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 24,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=select-non-popover-listbox.js.map