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

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/examples/select-right.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 (this item has very long text)'
}, {
  id: '2',
  name: 'Albert Banana (this item has very long text)'
}, {
  id: '3',
  name: 'Bernard California (this item has very long text)'
}, {
  id: '4',
  name: 'Cecelia Davenport (this item has very long text)'
}, {
  id: '5',
  name: 'Doris Evanescence (this item has very long text)'
}];
function ItemContainer({
  item
}) {
  return _jsxDEV("div", {
    className: "flex",
    children: [_jsxDEV("div", {
      className: "rounded px-2 mr-2 bg-grey-7 text-white",
      children: item.id
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 18,
      columnNumber: 7
    }, this), _jsxDEV("div", {
      className: "truncate",
      children: item.name
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 19,
      columnNumber: 7
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 17,
    columnNumber: 5
  }, this);
}
export default function App() {
  const [value, setSelected] = useState();
  const selectId = useId();
  return _jsxDEV("div", {
    className: "mx-auto",
    children: [_jsxDEV("label", {
      htmlFor: selectId,
      children: "Select a person"
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 30,
      columnNumber: 7
    }, this), _jsxDEV(Select, {
      alignListbox: "right",
      value: value,
      onChange: setSelected,
      buttonId: selectId,
      buttonContent: value ? _jsxDEV(ItemContainer, {
        item: value
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 37,
        columnNumber: 19
      }, this) : _jsxDEV(_Fragment, {
        children: "Select one\u2026"
      }, void 0, false),
      buttonClasses: "!w-36",
      children: items.map(item => _jsxDEV(Select.Option, {
        value: item,
        children: _jsxDEV(ItemContainer, {
          item: item
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 43,
          columnNumber: 13
        }, this)
      }, item.id, false, {
        fileName: _jsxFileName,
        lineNumber: 42,
        columnNumber: 11
      }, this))
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 31,
      columnNumber: 7
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 29,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=select-right.js.map