@primer/components 31.0.2-rc.1e80de40 → 31.0.2-rc.95622264

package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap

@@ -1,5 +1,363 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
+.c1 {
+  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;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-left: -0.25rem;
+  margin-bottom: -0.25rem;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c1 > * {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.c2 {
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c3 {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  height: 100%;
+}
+
+.c3:focus {
+  outline: 0;
+}
+
+.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  min-height: 34px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #24292f;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
+  padding: 6px 12px;
+}
+
+.c0 .TextInput-icon {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #57606a;
+  margin: 0 8px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c0:focus-within {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c7 {
+  font-size: 16px;
+  color: #57606a;
+}
+
+.c6 {
+  background-color: transparent;
+  font-family: inherit;
+  color: currentColor;
+  cursor: pointer;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0;
+  -webkit-transform: translate(1px,-1px);
+  -ms-transform: translate(1px,-1px);
+  transform: translate(1px,-1px);
+  -webkit-align-self: baseline;
+  -ms-flex-item-align: baseline;
+  align-self: baseline;
+  border: 0;
+  border-radius: 999px;
+  margin-left: 8px;
+  height: 32px;
+  width: 32px;
+  position: relative;
+  z-index: 1;
+}
+
+.c6:hover,
+.c6:focus {
+  background-color: rgba(175,184,193,0.2);
+}
+
+.c6:active {
+  background-color: rgba(234,238,242,0.5);
+}
+
+.c5 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: transparent;
+  border: none;
+  color: inherit;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  padding: 0;
+  width: auto;
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  -webkit-appearance: none;
+  line-height: 1;
+  color: currentColor;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c5:is(a,button,[tabIndex='0']) {
+  cursor: pointer;
+}
+
+.c5:is(a,button,[tabIndex='0']):after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.c4 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 999px;
+  cursor: pointer;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-weight: 600;
+  font-family: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  font-size: 14px;
+  height: 32px;
+  line-height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 0;
+  padding-bottom: 0;
+  background-color: rgba(234,238,242,0.5);
+  border-color: rgba(27,31,36,0.15);
+  border-style: solid;
+  border-width: 1px;
+  color: #57606a;
+  max-width: 100%;
+  padding-right: 0;
+  position: relative;
+}
+
+.c4:hover {
+  background-color: rgba(175,184,193,0.2);
+  color: #24292f;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 14px;
+  }
+}
+
+<span
+  className="c0"
+  onClick={[Function]}
+>
+  <div
+    className="c1"
+    display="flex"
+  >
+    <div
+      className="c2"
+    >
+      <input
+        className="c3"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        type="text"
+      />
+    </div>
+    <span
+      aria-label="zero, press backspace or delete to remove"
+      className="c4"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
+      size="extralarge"
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+        onClick={[Function]}
+      >
+        zero
+      </span>
+      <span
+        aria-hidden="true"
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      aria-label="one, press backspace or delete to remove"
+      className="c4"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onRemove={[Function]}
+      size="extralarge"
+      tabIndex={0}
+    >
+      <span
+        className="c5"
+        onClick={[Function]}
+      >
+        one
+      </span>
+      <span
+        aria-hidden="true"
+        className="c6"
+        onClick={[Function]}
+        size="extralarge"
+        tabIndex={-1}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-x"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z\\"></path>",
+            }
+          }
+          fill="currentColor"
+          height={24}
+          role="img"
+          style={
+            Object {
+              "display": "inline-block",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+        />
+      </span>
+    </span>
+    <span
+      className="c7"
+      color="fg.muted"
+      fontSize={2}
+    >
+      +
+      6
+    </span>
+  </div>
+</span>
+`;
+
 exports[`TextInputWithTokens renders as block layout 1`] = `
 .c1 {
   display: -webkit-box;
@@ -74,6 +432,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
   display: block;
   width: 100%;
@@ -108,6 +467,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 
 <span
   className="c0"
+  onClick={[Function]}
 >
   <div
     className="c1"
@@ -118,6 +478,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
     >
       <input
         className="c3"
+        onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         type="text"
@@ -201,6 +562,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
   max-height: 20px;
   overflow: auto;
@@ -358,6 +720,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 
 <span
   className="c0"
+  onClick={[Function]}
 >
   <div
     className="c1"
@@ -368,6 +731,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
     >
       <input
         className="c3"
+        onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         type="text"
@@ -386,6 +750,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         zero
       </span>
@@ -432,6 +797,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         one
       </span>
@@ -478,6 +844,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         two
       </span>
@@ -524,6 +891,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         three
       </span>
@@ -570,6 +938,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         four
       </span>
@@ -616,6 +985,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         five
       </span>
@@ -662,6 +1032,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         six
       </span>
@@ -708,6 +1079,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         seven
       </span>
@@ -819,6 +1191,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -974,6 +1347,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 
 <span
   className="c0"
+  onClick={[Function]}
 >
   <div
     className="c1"
@@ -984,6 +1358,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
     >
       <input
         className="c3"
+        onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         type="text"
@@ -1002,6 +1377,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         zero
       </span>
@@ -1048,6 +1424,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         one
       </span>
@@ -1094,6 +1471,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         two
       </span>
@@ -1140,6 +1518,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         three
       </span>
@@ -1186,6 +1565,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         four
       </span>
@@ -1232,6 +1612,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         five
       </span>
@@ -1278,6 +1659,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         six
       </span>
@@ -1324,6 +1706,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         seven
       </span>
@@ -1435,6 +1818,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -1590,6 +1974,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 
 <span
   className="c0"
+  onClick={[Function]}
 >
   <div
     className="c1"
@@ -1600,6 +1985,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
     >
       <input
         className="c3"
+        onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         type="text"
@@ -1618,6 +2004,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         zero
       </span>
@@ -1664,6 +2051,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         one
       </span>
@@ -1710,6 +2098,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         two
       </span>
@@ -1756,6 +2145,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         three
       </span>
@@ -1802,6 +2192,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         four
       </span>
@@ -1848,6 +2239,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         five
       </span>
@@ -1894,6 +2286,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         six
       </span>
@@ -1940,6 +2333,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         seven
       </span>
@@ -2051,6 +2445,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -2206,6 +2601,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 
 <span
   className="c0"
+  onClick={[Function]}
 >
   <div
     className="c1"
@@ -2216,6 +2612,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
     >
       <input
         className="c3"
+        onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         type="text"
@@ -2234,6 +2631,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         zero
       </span>
@@ -2280,6 +2678,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         one
       </span>
@@ -2326,6 +2725,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         two
       </span>
@@ -2372,6 +2772,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         three
       </span>
@@ -2418,6 +2819,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         four
       </span>
@@ -2464,6 +2866,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         five
       </span>
@@ -2510,6 +2913,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         six
       </span>
@@ -2556,6 +2960,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         seven
       </span>
@@ -2667,6 +3072,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -2822,6 +3228,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 
 <span
   className="c0"
+  onClick={[Function]}
 >
   <div
     className="c1"
@@ -2832,6 +3239,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
     >
       <input
         className="c3"
+        onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         type="text"
@@ -2850,6 +3258,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         zero
       </span>
@@ -2896,6 +3305,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         one
       </span>
@@ -2942,6 +3352,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         two
       </span>
@@ -2988,6 +3399,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         three
       </span>
@@ -3034,6 +3446,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         four
       </span>
@@ -3080,6 +3493,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         five
       </span>
@@ -3126,6 +3540,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         six
       </span>
@@ -3172,6 +3587,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         seven
       </span>
@@ -3283,6 +3699,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
   overflow: auto;
 }
@@ -3439,6 +3856,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 
 <span
   className="c0"
+  onClick={[Function]}
 >
   <div
     className="c1"
@@ -3449,6 +3867,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
     >
       <input
         className="c3"
+        onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         type="text"
@@ -3467,6 +3886,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         zero
       </span>
@@ -3513,6 +3933,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         one
       </span>
@@ -3559,6 +3980,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         two
       </span>
@@ -3605,6 +4027,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         three
       </span>
@@ -3651,6 +4074,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         four
       </span>
@@ -3697,6 +4121,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         five
       </span>
@@ -3743,6 +4168,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         six
       </span>
@@ -3789,6 +4215,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         seven
       </span>
@@ -3900,6 +4327,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -4003,6 +4431,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 
 <span
   className="c0"
+  onClick={[Function]}
 >
   <div
     className="c1"
@@ -4013,6 +4442,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
     >
       <input
         className="c3"
+        onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         type="text"
@@ -4022,6 +4452,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       aria-label="zero, press backspace or delete to remove"
       className="c4"
       onBlur={[Function]}
+      onClick={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
@@ -4039,6 +4470,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       aria-label="one, press backspace or delete to remove"
       className="c4"
       onBlur={[Function]}
+      onClick={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
@@ -4056,6 +4488,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       aria-label="two, press backspace or delete to remove"
       className="c4"
       onBlur={[Function]}
+      onClick={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
@@ -4073,6 +4506,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       aria-label="three, press backspace or delete to remove"
       className="c4"
       onBlur={[Function]}
+      onClick={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
@@ -4090,6 +4524,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       aria-label="four, press backspace or delete to remove"
       className="c4"
       onBlur={[Function]}
+      onClick={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
@@ -4107,6 +4542,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       aria-label="five, press backspace or delete to remove"
       className="c4"
       onBlur={[Function]}
+      onClick={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
@@ -4124,6 +4560,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       aria-label="six, press backspace or delete to remove"
       className="c4"
       onBlur={[Function]}
+      onClick={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
@@ -4141,6 +4578,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
       aria-label="seven, press backspace or delete to remove"
       className="c4"
       onBlur={[Function]}
+      onClick={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
@@ -4232,6 +4670,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -4387,6 +4826,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 
 <span
   className="c0"
+  onClick={[Function]}
 >
   <div
     className="c1"
@@ -4397,6 +4837,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
     >
       <input
         className="c3"
+        onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         type="text"
@@ -4415,6 +4856,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         zero
       </span>
@@ -4461,6 +4903,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         one
       </span>
@@ -4507,6 +4950,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         two
       </span>
@@ -4553,6 +4997,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         three
       </span>
@@ -4599,6 +5044,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         four
       </span>
@@ -4645,6 +5091,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         five
       </span>
@@ -4691,6 +5138,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         six
       </span>
@@ -4737,6 +5185,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         seven
       </span>
@@ -4848,6 +5297,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -5008,6 +5458,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 
 <span
   className="c0"
+  onClick={[Function]}
 >
   <div
     className="c1"
@@ -5018,6 +5469,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
     >
       <input
         className="c3"
+        onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         type="text"
@@ -5036,6 +5488,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         zero
       </span>
@@ -5082,6 +5535,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         one
       </span>
@@ -5128,6 +5582,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         two
       </span>
@@ -5174,6 +5629,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         three
       </span>
@@ -5220,6 +5676,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         four
       </span>
@@ -5266,6 +5723,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         five
       </span>
@@ -5312,6 +5770,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         six
       </span>
@@ -5358,6 +5817,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
     >
       <span
         className="c5"
+        onClick={[Function]}
       >
         seven
       </span>
@@ -5469,6 +5929,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -5496,6 +5957,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 
 <span
   className="c0"
+  onClick={[Function]}
 >
   <div
     className="c1"
@@ -5506,6 +5968,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
     >
       <input
         className="c3"
+        onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         type="text"