@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
181 lines (179 loc) • 7.43 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React, { memo, useLayoutEffect, useRef, useState } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { injectIntl } from 'react-intl';
import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
import SearchIcon from '@atlaskit/icon/core/search';
import { fg } from '@atlaskit/platform-feature-flags';
import Textfield from '@atlaskit/textfield';
import { GRID_SIZE, SEARCH_ITEM_HEIGHT_WIDTH } from '../constants';
import useFocus from '../hooks/use-focus';
import commonMessages from '../messages';
import { Modes } from '../types';
function ElementSearch({
onSearch,
mode,
intl: {
formatMessage
},
focus,
onClick,
onKeyDown,
searchTerm,
items,
selectedItemIndex,
ariaControlsId
}) {
const ref = useFocus(focus);
const assistiveTextRef = useRef(null);
const [inputFocused, setInputFocused] = useState(false);
useLayoutEffect(() => {
if (assistiveTextRef) {
const assistiveDiv = assistiveTextRef.current;
/**
* We need to remove and set attributes, for the proper working of screen readers.
*/
assistiveDiv === null || assistiveDiv === void 0 ? void 0 : assistiveDiv.removeAttribute('aria-live');
assistiveDiv === null || assistiveDiv === void 0 ? void 0 : assistiveDiv.setAttribute('aria-live', 'polite');
}
}, [items, formatMessage]);
const onChange = ({
target: {
value
}
}) => {
onSearch(value);
};
const onFocus = _e => {
setInputFocused(true);
};
const onBlur = _e => {
setInputFocused(false);
};
const getFormattedMessage = itemsCount => {
if (searchTerm === '') {
return `${formatMessage(commonMessages.assistiveTextDefault, {
count: itemsCount
})}`;
}
if (itemsCount > 1) {
return `${formatMessage(commonMessages.assistiveTextResult, {
count: itemsCount
})}`;
}
if (itemsCount === 1) {
return `${formatMessage(commonMessages.assistiveTextResult, {
count: itemsCount
})}`;
}
return formatMessage(commonMessages.assistiveTextResult, {
count: itemsCount
});
};
const assistiveMessage = getFormattedMessage(items === null || items === void 0 ? void 0 : items.length);
const isInputNotFocusedAndItemSelected = !inputFocused && selectedItemIndex !== undefined;
const ariaActiveDescendant = isInputNotFocusedAndItemSelected ? `searched-item-${selectedItemIndex}` : undefined;
return (
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
jsx("div", {
css: [wrapper, mode === Modes.inline && wrapperInline]
}, jsx(Textfield, {
ref: ref,
onChange: onChange,
onClick: onClick,
onFocus: onFocus,
onKeyDown: onKeyDown,
onBlur: onBlur,
elemBeforeInput: jsx("div", {
css: elementBeforeInput,
"data-testid": "element_search__element_before_input",
"aria-hidden": "true"
}, jsx(SearchIcon, {
spacing: "spacious",
label: "Advanced search",
color: "var(--ds-icon-subtle, #505258)"
})),
elemAfterInput: jsx("div", {
css: elementAfterInput,
"data-testid": "element_search__element_after_input"
}, jsx("div", {
css: styledShortcut
}, "\u23CE ", formatMessage(commonMessages.elementAfterInputMessage))),
placeholder: formatMessage(commonMessages.placeHolderMessage),
"aria-label": formatMessage(fg('ally_30205_accessibility_label_fix') ? commonMessages.searchAriaLabelNew : commonMessages.searchAriaLabel),
"aria-labelledby": fg('platform_editor_ally_remove_role_tabpanel') ? undefined : 'search-assistive',
"aria-describedby": fg('platform_editor_ally_remove_role_tabpanel') ? 'search-assistive' : undefined
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: "js-search-input",
role: "combobox",
"aria-expanded": "true",
"aria-controls": ariaControlsId,
"aria-activedescendant": ariaActiveDescendant,
value: searchTerm
}), jsx("span", {
id: "search-assistive",
ref: assistiveTextRef,
"aria-live": "polite",
"aria-atomic": "true"
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: "assistive"
}, assistiveMessage))
);
}
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
const styledShortcut = css(shortcutStyle, {
padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`,
width: "var(--ds-space-600, 48px)"
});
const wrapper = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& > [data-ds--text-field--container]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
height: `${GRID_SIZE * 6}px`,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
borderRadius: `${GRID_SIZE}px`,
flex: '1 1 100%',
overflow: 'visible',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& > [data-ds--text-field--input]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
fontSize: relativeFontSizeToBase16(14),
padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-100, 8px)"} 0`
}
}
});
const wrapperInline = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& > [data-ds--text-field--container]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
height: `40px`,
flex: 'none',
overflow: 'revert'
}
});
const elementBeforeInput = css({
margin: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-075, 6px)"} 0 ${"var(--ds-space-100, 8px)"}`,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'span, svg': {
height: '20px',
width: '20px'
}
});
const elementAfterInput = css({
margin: `0 ${"var(--ds-space-100, 8px)"}`,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
height: SEARCH_ITEM_HEIGHT_WIDTH,
textAlign: 'center'
});
const MemoizedElementSearchWithAnalytics = /*#__PURE__*/memo(withAnalyticsContext({
component: 'Searchbar'
})(injectIntl(ElementSearch)));
export default MemoizedElementSearchWithAnalytics;