Combobox.tsx.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders 1`] = `
.emotion-0 {
  z-index: 2;
}

.emotion-1 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.emotion-2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.emotion-3 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  display: block;
  width: 100%;
  padding: 8px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  font-size: inherit;
  line-height: inherit;
  border: 1px solid;
  border-radius: 4px;
  color: inherit;
  background-color: transparent;
}

.emotion-3:autofill,
.emotion-3:autofill:hover,
.emotion-3:autofill:focus {
  box-shadow: inset 0 0 0 1000px var(--theme-ui-input-autofill-bg);
  font-size: inherit;
}

.emotion-3:autofill:first-line,
.emotion-3:autofill:hover:first-line,
.emotion-3:autofill:focus:first-line {
  font-size: 1rem;
}

.emotion-3:-webkit-autofill,
.emotion-3:-webkit-autofill:hover,
.emotion-3:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 1000px var(--theme-ui-input-autofill-bg);
  font-size: inherit;
}

.emotion-3:-webkit-autofill:first-line,
.emotion-3:-webkit-autofill:hover:first-line,
.emotion-3:-webkit-autofill:focus:first-line {
  font-size: 1rem;
}

.emotion-4 {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  color: inherit;
  background-color: transparent;
  border: 0;
  margin-left: -32px;
}

.emotion-5 {
  pointer-events: none;
}

.emotion-6 {
  left: 0;
  right: 0;
  top: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 512px;
  overflow-y: auto;
  background-color: white;
  color: black;
  border: 1px solid;
  border-top: 0;
  border-color: lightgray;
}

<div
  className="emotion-0"
  style={
    Object {
      "position": "static",
    }
  }
>
  <label
    className="emotion-1"
    htmlFor="beep"
  >
    beep
  </label>
  <div
    className="emotion-2"
  >
    <input
      aria-activedescendant="beep-1"
      aria-autocomplete="none"
      aria-expanded={false}
      aria-haspopup="true"
      aria-owns="beep-popup"
      className="emotion-3"
      id="beep"
      name="beep"
      onBlur={[Function]}
      onChange={[Function]}
      onKeyDown={[Function]}
      role="combobox"
      type="text"
      value="beep"
    />
    <button
      aria-label="Open"
      className="emotion-4"
      onClick={[Function]}
      tabIndex={-1}
    >
      <svg
        className="emotion-5"
        height="12"
        viewBox="0 0 16 16"
        width="12"
      >
        <path
          d="M14 6 L8 12 L2 6"
          fill="none"
          stroke="currentcolor"
          strokeWidth="2"
        />
      </svg>
    </button>
  </div>
  <ul
    aria-label="beep"
    className="emotion-6"
    id="beep-popup"
    role="listbox"
    style={
      Object {
        "position": "static",
        "visibility": "hidden",
      }
    }
    tabIndex={-1}
  />
</div>
`;