@atlaskit/editor-common 74.19.2 → 74.21.0

package/dist/es2019/quick-insert/assets/list-number.js

@@ -0,0 +1,43 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import React from 'react';
+export default function IconListOrdered() {
+  return /*#__PURE__*/React.createElement("svg", {
+    focusable: "false",
+    "aria-hidden": true,
+    width: 40,
+    height: 40
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    d: "M0 0h40v40H0z"
+  }), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(9 9)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    fill: "#C1C7D0",
+    x: 6,
+    y: 10,
+    width: 17,
+    height: 2,
+    rx: 1
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#C1C7D0",
+    x: 6,
+    y: 2,
+    width: 17,
+    height: 2,
+    rx: 1
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#C1C7D0",
+    x: 6,
+    y: 18,
+    width: 17,
+    height: 2,
+    rx: 1
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#6C798F",
+    d: "M1.159 4.996v-3.58h-.056L0 2.176v-.875L1.162.5H2.1v4.496zM0 9.97C0 9.094.67 8.5 1.648 8.5c.943 0 1.6.542 1.6 1.319 0 .492-.266.915-1.049 1.65l-.864.825v.056h1.98v.786H.052v-.66L1.53 11.03c.636-.62.795-.855.795-1.15 0-.363-.294-.62-.708-.62-.438 0-.739.288-.739.705v.019H0v-.016zm1.172 9.22v-.71h.554c.431 0 .724-.251.724-.623 0-.365-.283-.598-.727-.598-.441 0-.734.249-.76.642H.086c.032-.86.67-1.401 1.663-1.401.932 0 1.603.51 1.603 1.225 0 .526-.33.935-.838 1.04v.056c.624.07 1.014.485 1.014 1.083 0 .797-.75 1.373-1.785 1.373-1.015 0-1.701-.56-1.742-1.417h.91c.028.384.353.627.841.627.475 0 .806-.268.806-.655 0-.397-.312-.643-.822-.643h-.563z"
+  }))));
+}

package/dist/es2019/quick-insert/assets/list.js

@@ -0,0 +1,57 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import React from 'react';
+export default function IconList() {
+  return /*#__PURE__*/React.createElement("svg", {
+    focusable: "false",
+    "aria-hidden": true,
+    width: 40,
+    height: 40
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    d: "M0 0h40v40H0z"
+  }), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(8 10)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    fill: "#6C798F",
+    width: 4,
+    height: 4,
+    rx: 2
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#C1C7D0",
+    x: 7,
+    y: 9,
+    width: 17,
+    height: 2,
+    rx: 1
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#C1C7D0",
+    x: 7,
+    y: 1,
+    width: 17,
+    height: 2,
+    rx: 1
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#C1C7D0",
+    x: 7,
+    y: 17,
+    width: 17,
+    height: 2,
+    rx: 1
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#6C798F",
+    y: 8,
+    width: 4,
+    height: 4,
+    rx: 2
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#6C798F",
+    y: 16,
+    width: 4,
+    height: 4,
+    rx: 2
+  }))));
+}

package/dist/es2019/quick-insert/assets/mention.js

@@ -0,0 +1,48 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import React from 'react';
+export default function IconMention() {
+  return /*#__PURE__*/React.createElement("svg", {
+    focusable: "false",
+    "aria-hidden": true,
+    width: 40,
+    height: 40
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    d: "M0 0h40v40H0z"
+  }), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(6 12)"
+  }, /*#__PURE__*/React.createElement("circle", {
+    fill: "#2684FF",
+    cx: 8,
+    cy: 8,
+    r: 8
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12.875 12.767A6.891 6.891 0 018.02 14.75a6.889 6.889 0 01-4.895-2.026V11.9c0-1.049.873-1.9 1.95-1.9h5.85c1.077 0 1.95.851 1.95 1.9v.867zM8 3a2.874 2.874 0 10-.001 5.748 2.874 2.874 0 000-5.748",
+    fill: "#B3D4FF"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#A5ADBA",
+    x: 19,
+    y: 3,
+    width: 12,
+    height: 1,
+    rx: 0.5
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#A5ADBA",
+    x: 19,
+    y: 7,
+    width: 6,
+    height: 1,
+    rx: 0.5
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#A5ADBA",
+    x: 19,
+    y: 11,
+    width: 8,
+    height: 1,
+    rx: 0.5
+  }))));
+}

package/dist/es2019/quick-insert/assets/panel-error.js

@@ -0,0 +1,27 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import React from 'react';
+export default function IconPanelError() {
+  return /*#__PURE__*/React.createElement("svg", {
+    focusable: "false",
+    "aria-hidden": true,
+    width: 40,
+    height: 40
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    d: "M0 0h40v40H0z"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#FFEBE6",
+    x: 8,
+    y: 12,
+    width: 32,
+    height: 16,
+    rx: 1
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M16.743 19.964l1.06-1.06a.5.5 0 00-.707-.707l-1.06 1.06-1.061-1.06a.5.5 0 00-.707.707l1.06 1.06-1.06 1.061a.5.5 0 10.707.707l1.06-1.06 1.061 1.06a.5.5 0 10.707-.707l-1.06-1.06zM16 24a4 4 0 110-8 4 4 0 010 8z",
+    fill: "#DE350B"
+  })));
+}

package/dist/es2019/quick-insert/assets/panel-note.js

@@ -0,0 +1,27 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import React from 'react';
+export default function IconPanelNote() {
+  return /*#__PURE__*/React.createElement("svg", {
+    focusable: "false",
+    "aria-hidden": true,
+    width: 40,
+    height: 40
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    d: "M0 0h40v40H0z"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#EAE6FF",
+    x: 8,
+    y: 12,
+    width: 32,
+    height: 16,
+    rx: 1
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M13 16h4a1 1 0 011 1v6a1 1 0 01-1 1h-4a1 1 0 01-1-1v-6a1 1 0 011-1zm1 2a.5.5 0 100 1h2a.5.5 0 100-1h-2zm0 2a.5.5 0 100 1h1a.5.5 0 100-1h-1z",
+    fill: "#403294"
+  })));
+}

package/dist/es2019/quick-insert/assets/panel-success.js

@@ -0,0 +1,27 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import React from 'react';
+export default function IconPanelSuccess() {
+  return /*#__PURE__*/React.createElement("svg", {
+    focusable: "false",
+    "aria-hidden": true,
+    width: 40,
+    height: 40
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    d: "M0 0h40v40H0z"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#C3F8DF",
+    x: 8,
+    y: 12,
+    width: 32,
+    height: 16,
+    rx: 1
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M15 24a4 4 0 110-8 4 4 0 010 8zm.682-5.482l-1.076 2.055-.772-.695a.5.5 0 00-.668.744l1.25 1.125a.5.5 0 00.777-.14l1.375-2.625a.5.5 0 00-.886-.464z",
+    fill: "#00875A"
+  })));
+}

package/dist/es2019/quick-insert/assets/panel-warning.js

@@ -0,0 +1,27 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import React from 'react';
+export default function IconPanelWarning() {
+  return /*#__PURE__*/React.createElement("svg", {
+    focusable: "false",
+    "aria-hidden": true,
+    width: 40,
+    height: 40
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    d: "M0 0h40v40H0z"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#FFF0B3",
+    x: 8,
+    y: 12,
+    width: 32,
+    height: 16,
+    rx: 1
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M16.847 16.83l2.808 5.73a1 1 0 01-.898 1.44h-6.514a1 1 0 01-.898-1.44l2.808-5.73a1.5 1.5 0 012.694 0zm-1.347.46a.568.568 0 00-.564.635l.278 2.32a.288.288 0 00.572 0l.278-2.32a.568.568 0 00-.564-.635zm0 5.035c.318 0 .576-.293.576-.656 0-.362-.258-.656-.576-.656-.318 0-.576.294-.576.656 0 .363.258.656.576.656z",
+    fill: "#FF8B00"
+  })));
+}

package/dist/es2019/quick-insert/assets/panel.js

@@ -0,0 +1,42 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import React from 'react';
+export default function IconPanel() {
+  return /*#__PURE__*/React.createElement("svg", {
+    focusable: "false",
+    "aria-hidden": true,
+    width: 40,
+    height: 40
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    d: "M0 0h40v40H0z"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#DEEBFF",
+    x: 8,
+    y: 12,
+    width: 32,
+    height: 16,
+    rx: 1
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 20a4 4 0 108 0 4 4 0 00-8 0z",
+    fill: "#0052CC",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#FFF",
+    fillRule: "nonzero",
+    x: 15.556,
+    y: 19.722,
+    width: 1,
+    height: 2.2,
+    rx: 0.5
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "#FFF",
+    fillRule: "nonzero",
+    cx: 16,
+    cy: 18.444,
+    r: 1
+  })));
+}

package/dist/es2019/quick-insert/assets/quote.js

@@ -0,0 +1,27 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import React from 'react';
+export default function IconQuote() {
+  return /*#__PURE__*/React.createElement("svg", {
+    focusable: "false",
+    "aria-hidden": true,
+    width: 40,
+    height: 40
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    d: "M0 0h40v40H0z"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#C1C7D0",
+    x: 6,
+    y: 8,
+    width: 2,
+    height: 24,
+    rx: 1
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M27.284 12c-1.888 0-3.422 1.577-3.422 3.522 0 1.944 1.534 3.521 3.422 3.521 3.245 0 1.365 6.118-2.727 6.755a.818.818 0 00-.695.806c0 .5.447.896.942.82C32.242 26.296 34.886 12 27.284 12m-9.86 0C15.533 12 14 13.577 14 15.522c0 1.944 1.533 3.521 3.424 3.521 3.243 0 1.363 6.118-2.73 6.755a.818.818 0 00-.694.806c0 .5.447.896.941.82C22.381 26.296 25.026 12 17.424 12",
+    fill: "#6C798F"
+  })));
+}

package/dist/es2019/quick-insert/assets/status.js

@@ -0,0 +1,101 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import React from 'react';
+export default function IconStatus() {
+  return /*#__PURE__*/React.createElement("svg", {
+    focusable: "false",
+    "aria-hidden": true,
+    width: 40,
+    height: 40
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    d: "M0 0h40v40H0z"
+  }), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(5 11)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    fill: "#B3D4FF",
+    width: 14,
+    height: 5,
+    rx: 1
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#0065FF",
+    x: 2,
+    y: 2,
+    width: 10,
+    height: 1,
+    rx: 0.5
+  })), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(5 18)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    fill: "#C3F8DF",
+    width: 14,
+    height: 5,
+    rx: 1
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#36B37E",
+    x: 2,
+    y: 2,
+    width: 10,
+    height: 1,
+    rx: 0.5
+  })), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(5 25)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    fill: "#DFE1E6",
+    width: 14,
+    height: 5,
+    rx: 1
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#8993A4",
+    x: 2,
+    y: 2,
+    width: 10,
+    height: 1,
+    rx: 0.5
+  })), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(21 25)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    fill: "#FFD3C8",
+    width: 14,
+    height: 5,
+    rx: 1
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#FF5230",
+    x: 2,
+    y: 2,
+    width: 10,
+    height: 1,
+    rx: 0.5
+  })), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(21 11)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    fill: "#EAE6FF",
+    width: 14,
+    height: 5,
+    rx: 1
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#8777D9",
+    x: 2,
+    y: 2,
+    width: 10,
+    height: 1,
+    rx: 0.5
+  })), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(21 18)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    fill: "#FFF0B3",
+    width: 14,
+    height: 5,
+    rx: 1
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#FF991F",
+    x: 2,
+    y: 2,
+    width: 10,
+    height: 1,
+    rx: 0.5
+  }))));
+}

package/dist/es2019/quick-insert/index.js

@@ -0,0 +1 @@
+export { IconAction, IconCode, IconDate, IconDecision, IconDivider, IconEmoji, IconImages, IconLayout, IconLink, IconListNumber, IconList, IconMention, IconPanelError, IconPanelNote, IconPanelSuccess, IconPanelWarning, IconPanel, IconQuote, IconStatus, IconHeading, IconFeedback, IconExpand, IconCustomPanel, IconFallback, IconDatasourceJiraIssue } from './assets';

package/dist/es2019/types/block-type.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/types/datasource.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/Announcer/announcer.js

@@ -0,0 +1,41 @@
+import React, { forwardRef, memo, useEffect, useState } from 'react';
+
+// How to use:
+// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles
+// Demo: https://dequeuniversity.com/library/aria/liveregion-playground
+
+// Important: Strongly recommend test your solution in all supported screen readers
+// if you use non default value of properties: ariaAtomic, ariaLive, ariaRelevant, role
+
+// Note: Text won't be announced if the text message doesn't change after the render.
+// For using a forced announcement in this case, set the 'key' attribute - key={Date.now()}
+// Note: Flag 'contentRendered' resolves bug with duplicates messages (NVDA + Firefox)
+// https://github.com/nvaccess/nvda/labels/bug%2Fdouble-speaking
+let timer;
+const Announcer = /*#__PURE__*/forwardRef(({
+  ariaAtomic = 'true',
+  ariaLive = 'polite',
+  ariaRelevant = 'all',
+  role = 'status',
+  text = '',
+  delay = 0
+}, ref) => {
+  const [contentRendered, setContentRendered] = useState(false);
+  useEffect(() => {
+    clearTimeout(timer);
+    setContentRendered(false);
+    timer = setTimeout(() => {
+      setContentRendered(true);
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [text, delay]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "assistive",
+    ref: ref,
+    role: role,
+    "aria-atomic": ariaAtomic,
+    "aria-relevant": ariaRelevant,
+    "aria-live": ariaLive
+  }, contentRendered && /*#__PURE__*/React.createElement("span", null, text));
+});
+export default /*#__PURE__*/memo(Announcer);

package/dist/es2019/ui/DropList/index.js

@@ -8,7 +8,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "74.19.2";
+const packageVersion = "74.21.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/ui/PanelTextInput/index.js

@@ -0,0 +1,149 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+import { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
+import { browser } from '../../utils';
+import { panelTextInput, panelTextInputWithCustomWidth } from './styles';
+const KeyZCode = 90;
+const KeyYCode = 89;
+export default class PanelTextInput extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onMouseDown", () => {
+      const {
+        onMouseDown
+      } = this.props;
+      if (onMouseDown) {
+        onMouseDown();
+      }
+    });
+    _defineProperty(this, "onBlur", e => {
+      const {
+        onBlur
+      } = this.props;
+      if (onBlur) {
+        onBlur(e);
+      }
+    });
+    _defineProperty(this, "handleChange", () => {
+      const {
+        onChange
+      } = this.props;
+      if (this.input) {
+        this.setState({
+          value: this.input.value
+        });
+      }
+      if (onChange && this.input) {
+        onChange(this.input.value);
+      }
+    });
+    _defineProperty(this, "handleKeydown", e => {
+      const {
+        onUndo,
+        onRedo,
+        onSubmit,
+        onCancel
+      } = this.props;
+      if (e.keyCode === 13 && onSubmit) {
+        e.preventDefault(); // Prevent from submitting if an editor is inside a form.
+        onSubmit(this.input.value);
+      } else if (e.keyCode === 27 && onCancel) {
+        onCancel(e);
+      } else if (typeof onUndo === 'function' && this.isUndoEvent(e)) {
+        e.preventDefault();
+        onUndo();
+      } else if (typeof onRedo === 'function' && this.isRedoEvent(e)) {
+        e.preventDefault();
+        onRedo();
+      }
+      if (this.props.onKeyDown) {
+        this.props.onKeyDown(e);
+      }
+    });
+    _defineProperty(this, "handleRef", input => {
+      if (input instanceof HTMLInputElement) {
+        this.input = input;
+        if (this.props.autoFocus) {
+          // Need this to prevent jumping when we render TextInput inside Portal @see ED-2992
+          this.focusTimeoutId = window.setTimeout(() => this.focus());
+        }
+      } else {
+        this.input = undefined;
+      }
+    });
+    this.state = {
+      value: props.defaultValue || ''
+    };
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.defaultValue !== this.props.defaultValue) {
+      this.setState({
+        value: this.props.defaultValue
+      });
+    }
+  }
+  componentWillUnmount() {
+    window.clearTimeout(this.focusTimeoutId);
+  }
+  render() {
+    const {
+      placeholder,
+      width,
+      maxLength,
+      testId,
+      ariaLabel,
+      describedById,
+      ariaActiveDescendant,
+      ariaControls,
+      ariaExpanded,
+      ariaAutoComplete,
+      role
+    } = this.props;
+    const {
+      value
+    } = this.state;
+    return jsx("input", {
+      css: [panelTextInput, width !== undefined && panelTextInputWithCustomWidth(width)],
+      role: role,
+      "aria-autocomplete": ariaAutoComplete ? 'list' : undefined,
+      "aria-expanded": ariaExpanded,
+      "aria-controls": ariaControls,
+      "aria-activedescendant": ariaActiveDescendant,
+      "aria-describedby": describedById,
+      "data-testid": testId || '',
+      type: "text",
+      placeholder: placeholder,
+      value: value,
+      onChange: this.handleChange,
+      onKeyDown: this.handleKeydown,
+      onMouseDown: this.onMouseDown,
+      onBlur: this.onBlur,
+      ref: this.handleRef,
+      maxLength: maxLength,
+      "aria-label": ariaLabel
+    });
+  }
+  focus() {
+    const {
+      input
+    } = this;
+    if (input) {
+      const focusOpts = typeof this.props.autoFocus === 'object' ? this.props.autoFocus : {};
+      input.focus(focusOpts);
+    }
+  }
+  isUndoEvent(event) {
+    return event.keyCode === KeyZCode && (
+    // cmd + z for mac
+    browser.mac && event.metaKey && !event.shiftKey ||
+    // ctrl + z for non-mac
+    !browser.mac && event.ctrlKey);
+  }
+  isRedoEvent(event) {
+    return (
+      // ctrl + y for non-mac
+      !browser.mac && event.ctrlKey && event.keyCode === KeyYCode || browser.mac && event.metaKey && event.shiftKey && event.keyCode === KeyZCode || event.ctrlKey && event.shiftKey && event.keyCode === KeyZCode
+    );
+  }
+}

package/dist/es2019/ui/PanelTextInput/styles.js

@@ -0,0 +1,36 @@
+import { css } from '@emotion/react';
+import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { N100, N400 } from '@atlaskit/theme/colors';
+// Normal .className gets overridden by input[type=text] hence this hack to produce input.className
+export const panelTextInput = css`
+  input& {
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    box-sizing: content-box;
+    color: ${`var(--ds-text-subtle, ${N400})`};
+    flex-grow: 1;
+    font-size: ${relativeFontSizeToBase16(13)};
+    line-height: 20px;
+    padding: 0;
+    min-width: 145px;
+
+    /* Hides IE10+ built-in [x] clear input button */
+    &::-ms-clear {
+      display: none;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &::placeholder {
+      color: ${`var(--ds-text-subtlest, ${N100})`};
+    }
+  }
+`;
+export const panelTextInputWithCustomWidth = width => css`
+  input& {
+    width: ${width}px;
+  }
+`;