@atlaskit/link-picker 1.1.1 → 1.1.2

package/dist/es2019/ui/list-item/index.js

@@ -0,0 +1,88 @@
+/** @jsx jsx */
+import { Fragment } from 'react';
+import { jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { transformTimeStamp } from '../../transformTimeStamp';
+import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles } from './styled';
+
+const LinkSearchListItem = ({
+  item,
+  selected,
+  active,
+  id,
+  role,
+  intl,
+  onSelect,
+  onMouseEnter,
+  onMouseLeave
+}) => {
+  const handleSelect = () => onSelect(item.objectId);
+
+  const handleMouseEnter = () => onMouseEnter(item.objectId);
+
+  const handleMouseLeave = () => onMouseLeave(item.objectId);
+
+  const container = item.container || null;
+  const date = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
+  return jsx("div", {
+    css: composeListItemStyles(active, selected),
+    role: role,
+    id: id,
+    "aria-selected": selected,
+    "data-testid": "link-search-list-item",
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onClick: handleSelect
+  }, jsx(ListItemIcon, {
+    item: item,
+    intl: intl
+  }), jsx("div", {
+    css: itemNameStyles
+  }, jsx("div", {
+    "data-testid": "link-search-list-item-title",
+    css: listItemNameStyles
+  }, item.name), jsx("div", {
+    "data-testid": "link-search-list-item-subtitle",
+    css: listItemContextStyles
+  }, container, container && date && jsx(Fragment, null, "\xA0 \u2022\xA0 "), date && jsx(Fragment, null, formatDate(date)))));
+};
+
+export default injectIntl(LinkSearchListItem);
+
+const formatDate = date => {
+  return [date.pageAction, date.dateString, date.timeSince].filter(Boolean).join(' ');
+};
+
+const ListItemIcon = props => {
+  const {
+    item,
+    intl
+  } = props;
+  const {
+    icon,
+    iconAlt
+  } = item;
+
+  if (!icon) {
+    return null;
+  }
+
+  const alt = typeof iconAlt === 'string' ? iconAlt : intl.formatMessage(iconAlt);
+
+  if (typeof icon !== 'string') {
+    const Glyph = icon;
+    return jsx("span", {
+      css: itemIconStyles
+    }, jsx(Glyph, {
+      alt: alt
+    }));
+  }
+
+  return jsx("span", {
+    css: itemIconStyles
+  }, jsx("img", {
+    src: icon,
+    alt: alt,
+    css: imgStyles
+  }));
+};

package/dist/es2019/ui/list-item/styled.js

@@ -0,0 +1,65 @@
+import { token } from '@atlaskit/tokens';
+import { css } from '@emotion/react';
+import { B50, N300, N800, N20, B400 } from '@atlaskit/theme/colors';
+import { gridSize } from '@atlaskit/theme/constants'; // AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+
+import { fontSizeSmall, fontSize } from '@atlaskit/theme';
+export const relativeFontSizeToBase16 = px => {
+  if (typeof px === 'string') {
+    px = parseInt(px);
+  }
+
+  if (isNaN(px)) {
+    throw new Error(`Invalid font size: '${px}'`);
+  }
+
+  return `${px / 16}rem`;
+};
+const listItemBaseStyles = css`
+  display: flex;
+  padding: ${gridSize()}px ${gridSize() * 2}px;
+  margin: 0 -${gridSize() * 2}px;
+  cursor: pointer;
+`;
+const listItemBoxShadow = css`
+  box-shadow: inset 2px 0px 0px ${token('color.border.selected', B400)};
+`;
+const listItemActive = css`
+  background-color: ${token('color.background.neutral.subtle.hovered', N20)};
+`;
+const listItemSelected = css`
+  background-color: ${token('color.background.selected', B50)};
+`;
+export const composeListItemStyles = (active = false, selected = false) => {
+  const hasShadow = active || selected;
+  return css`
+    ${listItemBaseStyles};
+    ${active && listItemActive};
+    ${selected && listItemSelected};
+    ${hasShadow && listItemBoxShadow};
+  `;
+};
+export const itemNameStyles = css`
+  overflow: hidden;
+`;
+export const listItemNameStyles = css`
+  color: ${token('color.text', N800)};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 20px;
+`;
+export const listItemContextStyles = css`
+  color: ${token('color.text', N300)};
+  font-size: ${relativeFontSizeToBase16(fontSizeSmall())};
+  line-height: ${fontSize()}px;
+`;
+export const itemIconStyles = css`
+  min-width: ${gridSize() * 2}px;
+  margin-top: 3px;
+  margin-right: 12px;
+`;
+export const imgStyles = css`
+  max-width: ${gridSize() * 2}px;
+`;

package/dist/es2019/ui/styled.js

@@ -0,0 +1,28 @@
+import { token } from '@atlaskit/tokens';
+import { css } from '@emotion/react';
+import { N500 } from '@atlaskit/theme/colors'; // AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+
+import { typography } from '@atlaskit/theme';
+import { gridSize } from '@atlaskit/theme/constants';
+const LINK_PICKER_WIDTH_IN_PX = 342;
+export const recentListStyles = css`
+  width: ${LINK_PICKER_WIDTH_IN_PX}px;
+`;
+export const containerStyles = css`
+  padding: ${gridSize() * 2}px;
+  width: 100%;
+  overflow: hidden;
+  line-height: initial;
+  box-sizing: border-box;
+`;
+export const searchIconStyles = css`
+  margin-left: ${gridSize() / 2}px;
+  color: ${token('color.icon', N500)};
+  cursor: default;
+`;
+export const listTitleStyles = css`
+  ${typography.h100()}
+  text-transform: uppercase;
+  margin-bottom: ${gridSize() / 2}px;
+`;

package/dist/es2019/ui/text-input/index.js

@@ -0,0 +1,99 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { useCallback, useRef, Fragment } from 'react';
+import { jsx } from '@emotion/react';
+import { ErrorMessage, Field } from '@atlaskit/form';
+import Tooltip from '@atlaskit/tooltip';
+import Textfield from '@atlaskit/textfield';
+import Selectclear from '@atlaskit/icon/glyph/select-clear';
+import { isRedoEvent, isUndoEvent } from '../../utils';
+import { clearTextButtonStyles, fieldStyles } from './styled';
+
+const PanelTextInput = props => {
+  const {
+    name,
+    label,
+    autoFocus,
+    onSubmit,
+    onRedo,
+    onUndo,
+    onChange,
+    onKeyDown,
+    onClear,
+    clearLabel,
+    error,
+    ...restProps
+  } = props;
+  const inputRef = useRef(null);
+  const handleRef = useCallback(input => {
+    if (input) {
+      inputRef.current = input;
+
+      if (autoFocus) {
+        // Need this to prevent jumping when we render TextInput inside Portal @see ED-2992
+        input.focus({
+          preventScroll: true
+        });
+      }
+    }
+  }, [autoFocus]);
+  const handleChange = useCallback(e => {
+    onChange(e.currentTarget.value);
+  }, [onChange]);
+  const handleKeydown = useCallback(e => {
+    const value = e.currentTarget.value;
+
+    if (e.keyCode === 13 && onSubmit) {
+      e.preventDefault(); // Prevent from submitting if an editor is inside a form.
+
+      onSubmit(value);
+    } else if (typeof onUndo === 'function' && isUndoEvent(e)) {
+      e.preventDefault();
+      onUndo();
+    } else if (typeof onRedo === 'function' && isRedoEvent(e)) {
+      e.preventDefault();
+      onRedo();
+    }
+
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+  }, [onSubmit, onUndo, onRedo, onKeyDown]);
+  const handleClear = useCallback(() => {
+    if (inputRef.current && onClear) {
+      inputRef.current.focus();
+      onClear();
+    }
+  }, [onClear]);
+  const clearText = restProps.value !== '' && jsx(Tooltip, {
+    content: clearLabel
+  }, jsx("button", {
+    css: clearTextButtonStyles,
+    onClick: handleClear,
+    "data-testid": "clear-text"
+  }, jsx(Selectclear, {
+    size: "medium",
+    label: clearLabel || ''
+  })));
+  return jsx("div", {
+    css: fieldStyles
+  }, jsx(Field, {
+    label: label,
+    name: name
+  }, ({
+    fieldProps
+  }) => {
+    return jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, restProps, {
+      onKeyDown: handleKeydown,
+      onChange: handleChange,
+      ref: handleRef,
+      elemAfterInput: clearText,
+      isInvalid: !!error
+    })), error && jsx(ErrorMessage, {
+      testId: "link-error"
+    }, error));
+  }));
+};
+
+export default PanelTextInput;

package/dist/es2019/ui/text-input/styled.js

@@ -0,0 +1,15 @@
+import { token } from '@atlaskit/tokens';
+import { css } from '@emotion/react';
+import { N500 } from '@atlaskit/theme/colors';
+import { gridSize } from '@atlaskit/theme/constants';
+export const clearTextButtonStyles = css`
+  padding: 0;
+  margin-right: ${gridSize() / 2}px;
+  color: ${token('color.icon.subtle', N500)};
+  background: transparent;
+  border: none;
+  cursor: pointer;
+`;
+export const fieldStyles = css`
+  margin-bottom: ${gridSize() * 2}px;
+`;

package/dist/es2019/url.js

@@ -0,0 +1,88 @@
+import LinkifyIt from 'linkify-it';
+const linkify = LinkifyIt();
+linkify.add('sourcetree:', 'http:');
+const tlds = 'biz|com|edu|gov|net|org|pro|web|xxx|aero|asia|coop|info|museum|name|shop|рф'.split('|');
+const tlds2Char = 'a[cdefgilmnoqrtuwxz]|b[abdefghijmnorstvwyz]|c[acdfghiklmnoruvwxyz]|d[ejkmoz]|e[cegrstu]|f[ijkmor]|g[abdefghilmnpqrstuwy]|h[kmnrtu]|i[delmnoqrst]|j[emop]|k[eghimnprwyz]|l[abcikrstuvy]|m[acdeghklmnopqrtuvwxyz]|n[acefgilopruz]|om|p[aefghkmnrtw]|qa|r[eosuw]|s[abcdegijklmnrtuvxyz]|t[cdfghjklmnortvwz]|u[agksyz]|v[aceginu]|w[fs]|y[et]|z[amw]';
+tlds.push(tlds2Char);
+linkify.tlds(tlds, false);
+const whitelistedURLPatterns = [/^https?:\/\/[^\s]*$/im, /^ftps?:\/\//im, /^\//im, /^mailto:/im, /^skype:/im, /^callto:[^\s]*$/im, /^facetime:[^\s]*$/im, /^git:/im, /^irc6?:/im, /^news:/im, /^nntp:/im, /^feed:/im, /^cvs:/im, /^svn:/im, /^mvn:/im, /^ssh:/im, /^scp:\/\//im, /^sftp:\/\//im, /^itms:/im, /^notes:/im, /^hipchat:\/\//im, /^sourcetree:/im, /^urn:/im, /^tel:/im, /^xmpp:/im, /^telnet:/im, /^vnc:/im, /^rdp:/im, /^whatsapp:/im, /^slack:/im, /^sips?:/im, /^magnet:/im, /^foo:/im, /^#/im];
+
+const normaliseLinkHref = url => {
+  const match = getLinkMatch(url);
+  return match && match.url || null;
+};
+
+const getLinkMatch = str => {
+  if (!str) {
+    return null;
+  }
+
+  let match = linkifyMatch(str);
+
+  if (!match.length) {
+    match = linkify.match(str);
+  }
+
+  return match && match.length > 0 && match[0].index === 0 && match[0].lastIndex === str.trim().length ? match[0] : null;
+};
+
+const LINK_REGEXP = /(https?|ftp):\/\/[^\s]+/;
+
+const linkifyMatch = text => {
+  const matches = [];
+
+  if (!LINK_REGEXP.test(text)) {
+    return matches;
+  }
+
+  let startpos = 0;
+  let substr;
+
+  while (substr = text.substr(startpos)) {
+    const link = (substr.match(LINK_REGEXP) || [''])[0];
+
+    if (link) {
+      const index = substr.search(LINK_REGEXP);
+      const start = index >= 0 ? index + startpos : index;
+      const end = start + link.length;
+      matches.push({
+        index: start,
+        lastIndex: end,
+        raw: link,
+        url: link,
+        text: link,
+        schema: ''
+      });
+      startpos += end;
+    } else {
+      break;
+    }
+  }
+
+  return matches;
+};
+
+export const isSafeUrl = url => {
+  const urlTrimmed = url.trim();
+
+  if (urlTrimmed.length === 0) {
+    return true;
+  }
+
+  return whitelistedURLPatterns.some(p => p.test(urlTrimmed));
+};
+/**
+ * Adds protocol to url if needed.
+ */
+
+export function normalizeUrl(url) {
+  if (!url) {
+    return '';
+  }
+
+  if (isSafeUrl(url)) {
+    return url.trim();
+  }
+
+  return normaliseLinkHref(url);
+}

package/dist/es2019/utils.js

@@ -0,0 +1,13 @@
+import { browser } from './browser';
+const KeyZCode = 90;
+const KeyYCode = 89;
+export const isUndoEvent = e => {
+  return e.keyCode === KeyZCode && ( // cmd + z for mac
+  browser.mac && e.metaKey && !e.shiftKey || // ctrl + z for non-mac
+  !browser.mac && e.ctrlKey);
+};
+export const isRedoEvent = e => {
+  return (// ctrl + y for non-mac
+    !browser.mac && e.ctrlKey && e.keyCode === KeyYCode || browser.mac && e.metaKey && e.shiftKey && e.keyCode === KeyZCode || e.ctrlKey && e.shiftKey && e.keyCode === KeyZCode
+  );
+};

package/dist/es2019/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/link-picker",
+	"version": "1.1.2",
+	"sideEffects": false
+}

package/dist/esm/browser.js

@@ -0,0 +1,34 @@
+var result = {
+  mac: false,
+  ie: false,
+  ie_version: 0,
+  gecko: false,
+  chrome: false,
+  chrome_version: 0,
+  android: false,
+  ios: false,
+  webkit: false,
+  safari: false,
+  supportsIntersectionObserver: false,
+  supportsResizeObserver: false
+};
+
+if (typeof navigator !== 'undefined') {
+  var ieEdge = /Edge\/(\d+)/.exec(navigator.userAgent);
+  var ieUpTo10 = /MSIE \d/.test(navigator.userAgent);
+  var ie11up = /Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(navigator.userAgent);
+  result.mac = /Mac/.test(navigator.platform);
+  var ie = result.ie = !!(ieUpTo10 || ie11up || ieEdge);
+  result.ie_version = ieUpTo10 ? document.documentMode || 6 : ie11up ? +ie11up[1] : ieEdge ? +ieEdge[1] : null;
+  result.gecko = !ie && /gecko\/\d/i.test(navigator.userAgent);
+  result.chrome = !ie && /Chrome\//.test(navigator.userAgent);
+  result.chrome_version = parseInt((navigator.userAgent.match(/Chrome\/(\d+)/) || [])[1], 10);
+  result.android = /Android \d/.test(navigator.userAgent);
+  result.ios = !ie && /AppleWebKit/.test(navigator.userAgent) && /Mobile\/\w+/.test(navigator.userAgent);
+  result.webkit = !ie && !!document.documentElement && 'WebkitAppearance' in document.documentElement.style;
+  result.safari = Boolean(navigator.vendor && navigator.vendor.indexOf('Apple') > -1 && navigator.userAgent && navigator.userAgent.indexOf('CriOS') === -1 && navigator.userAgent.indexOf('FxiOS') === -1);
+  result.supportsIntersectionObserver = typeof window !== 'undefined' && 'IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype;
+  result.supportsResizeObserver = typeof window !== 'undefined' && 'ResizeObserver' in window && 'ResizeObserverEntry' in window;
+}
+
+export { result as browser };

package/dist/esm/index.js

@@ -0,0 +1 @@
+export { LinkPickerWithIntl as LinkPicker } from './ui/link-picker';

package/dist/esm/messages.js

@@ -0,0 +1,103 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  placeholder: {
+    id: 'fabric.linkPicker.hyperlinkToolbarPlaceholder',
+    defaultMessage: 'Search or paste a link',
+    description: 'Search or paste a link'
+  },
+  linkPlaceholder: {
+    id: 'fabric.linkPicker.linkPlaceholder',
+    defaultMessage: 'Paste link',
+    description: 'Create a new link by pasting a URL.'
+  },
+  linkTextPlaceholder: {
+    id: 'fabric.linkPicker.linkTextPlaceholder',
+    defaultMessage: 'Add a description',
+    description: 'Text to display'
+  },
+  linkLabel: {
+    id: 'fabric.linkPicker.linkAddress',
+    defaultMessage: 'Link',
+    description: 'Link Label'
+  },
+  linkInvalid: {
+    id: 'fabric.linkPicker.linkInvalid',
+    defaultMessage: 'Enter a valid URL.',
+    description: 'Input Error the URL is invalid'
+  },
+  linkTextLabel: {
+    id: 'fabric.linkPicker.displayText',
+    defaultMessage: 'Link text',
+    description: 'Link text label'
+  },
+  clearText: {
+    id: 'fabric.linkPicker.clearLinkText',
+    defaultMessage: 'Clear text',
+    description: 'Clears text on the link toolbar'
+  },
+  clearLink: {
+    id: 'fabric.linkPicker.clearLink',
+    defaultMessage: 'Clear link',
+    description: 'Clears link in the link toolbar'
+  },
+  searchLinkAriaDescription: {
+    id: 'fabric.linkPicker.hyperlink.searchLinkAriaDescription',
+    defaultMessage: 'Suggestions will appear below as you type into the field',
+    description: 'Describes what the search field does for screen reader users.'
+  },
+  searchLinkResults: {
+    id: 'fabric.linkPicker.hyperlink.searchLinkResults',
+    defaultMessage: '{count, plural, =0 {no results} one {# result} other {# results}} found',
+    description: 'Announce search results for screen-reader users.'
+  },
+  linkAriaLabel: {
+    id: 'fabric.linkPicker.hyperlink.linkAriaLabel',
+    defaultMessage: 'Link label',
+    description: 'aria label for a link'
+  },
+  timeUpdated: {
+    id: 'fabric.linkPicker.time.updated',
+    defaultMessage: 'Updated',
+    description: 'Time last updated'
+  },
+  timeViewed: {
+    id: 'fabric.linkPicker.time.viewed',
+    defaultMessage: 'Viewed',
+    description: 'Time last viewed'
+  },
+  timeAgo: {
+    id: 'fabric.linkPicker.time.ago',
+    defaultMessage: 'ago',
+    description: 'Some time ago'
+  },
+  titleRecentlyViewed: {
+    id: 'fabric.linkPicker.listTitle.recentlyViewed',
+    defaultMessage: 'Recently Viewed',
+    description: 'Describes type of items shown in the list for screen-reader users'
+  },
+  titleResults: {
+    id: 'fabric.linkPicker.listTitle.results',
+    defaultMessage: 'Results',
+    description: 'Describes type of items shown in the list for screen-reader users'
+  },
+  cancelButton: {
+    id: 'fabric.linkPicker.button.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Button to cancel and dismiss the link picker'
+  },
+  insertButton: {
+    id: 'fabric.linkPicker.button.insert',
+    defaultMessage: 'Insert',
+    description: 'Button to insert searched or selected link'
+  },
+  noResults: {
+    id: 'fabric.linkPicker.search.noResults.heading',
+    defaultMessage: 'We couldn’t find anything matching your search.',
+    description: 'Heading message shown when a search has no results'
+  },
+  noResultsDescription: {
+    id: 'fabric.linkPicker.search.noResults.description',
+    defaultMessage: 'Try again with a different term.',
+    description: 'Describes possible action when a search returns no results'
+  }
+});

package/dist/esm/transformTimeStamp.js

@@ -0,0 +1,41 @@
+import formatDistance from 'date-fns/formatDistance';
+import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
+import format from 'date-fns/format';
+import { messages } from './messages';
+
+var renderAbsoluteOrRelativeDate = function renderAbsoluteOrRelativeDate(timeStamp, pageAction, intl) {
+  var pageActionText = '';
+
+  switch (pageAction) {
+    case 'updated':
+      pageActionText = intl.formatMessage(messages.timeUpdated);
+      break;
+
+    case 'viewed':
+      pageActionText = intl.formatMessage(messages.timeViewed);
+      break;
+  }
+
+  if (differenceInCalendarDays(timeStamp, Date.now()) < -7) {
+    return {
+      pageAction: pageActionText,
+      dateString: format(timeStamp, 'MMMM dd, yyyy')
+    };
+  }
+
+  return {
+    pageAction: pageActionText,
+    dateString: formatDistance(timeStamp, Date.now()),
+    timeSince: intl.formatMessage(messages.timeAgo)
+  };
+};
+
+export var transformTimeStamp = function transformTimeStamp(intl, lastViewedDate, lastUpdatedDate) {
+  if (lastViewedDate) {
+    return renderAbsoluteOrRelativeDate(lastViewedDate, 'viewed', intl);
+  }
+
+  if (lastUpdatedDate) {
+    return renderAbsoluteOrRelativeDate(lastUpdatedDate, 'updated', intl);
+  }
+};

package/dist/esm/types.js

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

package/dist/esm/ui/announcer.js

@@ -0,0 +1,51 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { forwardRef, memo, useState, useEffect } 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
+var timer;
+var Announcer = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$ariaAtomic = _ref.ariaAtomic,
+      ariaAtomic = _ref$ariaAtomic === void 0 ? 'true' : _ref$ariaAtomic,
+      _ref$ariaLive = _ref.ariaLive,
+      ariaLive = _ref$ariaLive === void 0 ? 'polite' : _ref$ariaLive,
+      _ref$ariaRelevant = _ref.ariaRelevant,
+      ariaRelevant = _ref$ariaRelevant === void 0 ? 'all' : _ref$ariaRelevant,
+      _ref$role = _ref.role,
+      role = _ref$role === void 0 ? 'status' : _ref$role,
+      _ref$text = _ref.text,
+      text = _ref$text === void 0 ? '' : _ref$text,
+      _ref$delay = _ref.delay,
+      delay = _ref$delay === void 0 ? 0 : _ref$delay;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      contentRendered = _useState2[0],
+      setContentRendered = _useState2[1];
+
+  useEffect(function () {
+    clearTimeout(timer);
+    setContentRendered(false);
+    timer = setTimeout(function () {
+      setContentRendered(true);
+    }, delay);
+    return function () {
+      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);