@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
91 lines (89 loc) • 3.31 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { useEffect, useMemo, useState } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
import { css, jsx } from '@emotion/react';
import debounce from 'lodash/debounce';
var assitiveTextStyles = css({
border: 0,
clip: 'rect(0 0 0 0)',
height: '1px',
marginbottom: '-1px',
marginright: '-1px',
overflow: 'hidden',
padding: 0,
position: 'absolute',
whitespace: 'nowrap',
width: '1px'
});
export var AssistiveText = function AssistiveText(_ref) {
var _ref$assistiveText = _ref.assistiveText,
assistiveText = _ref$assistiveText === void 0 ? '' : _ref$assistiveText,
_ref$isInFocus = _ref.isInFocus,
isInFocus = _ref$isInFocus === void 0 ? false : _ref$isInFocus,
_ref$id = _ref.id,
id = _ref$id === void 0 ? '' : _ref$id,
_ref$statusDebounceMi = _ref.statusDebounceMillis,
_statusDebounceMillis = _ref$statusDebounceMi === void 0 ? 1400 : _ref$statusDebounceMi;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
bump = _useState2[0],
setBump = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
debounced = _useState4[0],
setDebounced = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
silenced = _useState6[0],
setSilenced = _useState6[1];
var debounceStatusUpdate = useMemo(function () {
return debounce(function () {
var shouldSilence = !isInFocus;
setBump(function (prevBump) {
return !prevBump;
});
setDebounced(true);
setSilenced(shouldSilence);
});
}, [isInFocus]);
useEffect(function () {
if (!debounced) {
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
debounceStatusUpdate();
return function () {
debounceStatusUpdate.cancel();
};
}
}, [assistiveText, isInFocus, debounced, debounceStatusUpdate]);
useEffect(function () {
if (debounced) {
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
setBump(function (prevBump) {
return !prevBump;
});
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
setDebounced(true);
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
setSilenced(!isInFocus);
}
}, [assistiveText, isInFocus, debounced]);
return jsx("div", {
css: assitiveTextStyles
}, jsx("div", {
"data-testid": id + '__status--A',
id: id + '__status--A',
role: "status",
"aria-atomic": "true",
"aria-live": "polite"
}, !silenced && debounced && bump ? assistiveText : ''), jsx("div", {
"data-testid": id + '__status--B',
id: id + '__status--B',
role: "status",
"aria-atomic": "true",
"aria-live": "polite"
}, !silenced && debounced && !bump ? assistiveText : ''));
};