= () => (
diff --git a/src-docs/src/views/elastic_charts/pie_slices.js b/src-docs/src/views/elastic_charts/pie_slices.js
index c09bdc95282..639cdc00994 100644
--- a/src-docs/src/views/elastic_charts/pie_slices.js
+++ b/src-docs/src/views/elastic_charts/pie_slices.js
@@ -88,8 +88,9 @@ export default () => {
};
const onSliceOrderChange = (optionId) => {
- const sliceOrderLabel = sliceOrderRadios.find(({ id }) => id === optionId)
- .label;
+ const sliceOrderLabel = sliceOrderRadios.find(
+ ({ id }) => id === optionId
+ ).label;
if (sliceOrderLabel.includes('Counter')) {
setSliceOrderConfig({ clockwiseSectors: false });
setSliceOrderConfigText('clockwiseSectors={false}');
diff --git a/src-docs/src/views/elastic_charts/shared.js b/src-docs/src/views/elastic_charts/shared.js
index 905ba9537f4..8fd26f31c61 100644
--- a/src-docs/src/views/elastic_charts/shared.js
+++ b/src-docs/src/views/elastic_charts/shared.js
@@ -14,9 +14,8 @@ import euiPackage from '../../../../package';
const { devDependencies } = euiPackage;
-export const chartsVersion = devDependencies['@elastic/charts'].match(
- /\d+\.\d+\.\d+/
-)[0];
+export const chartsVersion =
+ devDependencies['@elastic/charts'].match(/\d+\.\d+\.\d+/)[0];
export const CHART_COMPONENTS = {
BarSeries: BarSeries,
@@ -80,8 +79,9 @@ export const ChartTypeCard = (props) => {
const onChartTypeChange = (optionId) => {
setToggleIdSelectd(optionId);
- const chartType = toggleButtonsIcons.find(({ id }) => id === optionId)
- .label;
+ const chartType = toggleButtonsIcons.find(
+ ({ id }) => id === optionId
+ ).label;
props.onChange(chartType);
};
diff --git a/src-docs/src/views/empty_prompt/_types_of_empty_states.tsx b/src-docs/src/views/empty_prompt/_types_of_empty_states.tsx
index 163ea1dbc00..d08e56ecd71 100644
--- a/src-docs/src/views/empty_prompt/_types_of_empty_states.tsx
+++ b/src-docs/src/views/empty_prompt/_types_of_empty_states.tsx
@@ -324,7 +324,8 @@ export default () => {
className={classNames(
'guideDemo__emptyPromptPanelPickerThumb',
{
- 'guideDemo__emptyPromptPanelPickerThumb-isSelected': isSidebar,
+ 'guideDemo__emptyPromptPanelPickerThumb-isSelected':
+ isSidebar,
}
)}
alt="Page with sidebar thumbnail"
@@ -344,7 +345,8 @@ export default () => {
className={classNames(
'guideDemo__emptyPromptPanelPickerThumb',
{
- 'guideDemo__emptyPromptPanelPickerThumb-isSelected': isEmpty,
+ 'guideDemo__emptyPromptPanelPickerThumb-isSelected':
+ isEmpty,
}
)}
alt="Empty page thumbnail"
@@ -365,7 +367,8 @@ export default () => {
className={classNames(
'guideDemo__emptyPromptPanelPickerThumb',
{
- 'guideDemo__emptyPromptPanelPickerThumb-isSelected': isMultiple,
+ 'guideDemo__emptyPromptPanelPickerThumb-isSelected':
+ isMultiple,
}
)}
alt="Page with multiple panels thumbnail"
diff --git a/src-docs/src/views/empty_prompt/_types_of_use_cases.tsx b/src-docs/src/views/empty_prompt/_types_of_use_cases.tsx
index a2d553ab994..ee64c07a556 100644
--- a/src-docs/src/views/empty_prompt/_types_of_use_cases.tsx
+++ b/src-docs/src/views/empty_prompt/_types_of_use_cases.tsx
@@ -227,8 +227,7 @@ export const typesOfUseCases: {
iconLight2x: pageNotFoundLight2x,
iconDark2x: pageNotFoundDark2x,
title: Page not found
,
- alt:
- "An outer space illustration. In the background is a large moon and two planets. In the foreground is an astronaut floating in space and the numbers '404'.",
+ alt: "An outer space illustration. In the background is a large moon and two planets. In the foreground is an astronaut floating in space and the numbers '404'.",
body: (
Sorry, we can't find the page you're looking for. It might
diff --git a/src-docs/src/views/flyout/flyout_max_width.tsx b/src-docs/src/views/flyout/flyout_max_width.tsx
index 666e9626138..d60e0e6a611 100644
--- a/src-docs/src/views/flyout/flyout_max_width.tsx
+++ b/src-docs/src/views/flyout/flyout_max_width.tsx
@@ -21,9 +21,8 @@ import { useGeneratedHtmlId } from '../../../../src/services';
export default () => {
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
const [flyoutSize, setFlyoutSize] = useState('m');
- const [flyoutMaxWidth, setFlyoutMaxWidth] = useState<
- EuiFlyoutProps['maxWidth']
- >(false);
+ const [flyoutMaxWidth, setFlyoutMaxWidth] =
+ useState(false);
const maxWidthFlyoutTitleId = useGeneratedHtmlId({
prefix: 'maxWidthFlyoutTitle',
});
diff --git a/src-docs/src/views/form_compressed/form_compressed_popover.js b/src-docs/src/views/form_compressed/form_compressed_popover.js
index ff4cad88bfa..3dcf2c59f14 100644
--- a/src-docs/src/views/form_compressed/form_compressed_popover.js
+++ b/src-docs/src/views/form_compressed/form_compressed_popover.js
@@ -11,9 +11,8 @@ import {
export default () => {
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
- const [granularityIdSelected, setGranularityIdSelected] = useState(
- 'granularityButton1'
- );
+ const [granularityIdSelected, setGranularityIdSelected] =
+ useState('granularityButton1');
const onButtonClick = () =>
setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
diff --git a/src-docs/src/views/form_layouts/full_width_via_context.tsx b/src-docs/src/views/form_layouts/full_width_via_context.tsx
index ba85b140bd3..772b2fea67c 100644
--- a/src-docs/src/views/form_layouts/full_width_via_context.tsx
+++ b/src-docs/src/views/form_layouts/full_width_via_context.tsx
@@ -84,8 +84,7 @@ export default () => {
options={[
{
value: 'option_one',
- text:
- 'Option one is very long in order to try justifying the use of fullWidth on a select box',
+ text: 'Option one is very long in order to try justifying the use of fullWidth on a select box',
},
{ value: 'option_two', text: 'Option two' },
{ value: 'option_three', text: 'Option three' },
diff --git a/src-docs/src/views/header/header_alert.tsx b/src-docs/src/views/header/header_alert.tsx
index c6e8221460d..f96b78d54ec 100644
--- a/src-docs/src/views/header/header_alert.tsx
+++ b/src-docs/src/views/header/header_alert.tsx
@@ -49,8 +49,7 @@ const HeaderUpdates = () => {
},
{
title: 'Kibana 7.0 is turning heads',
- text:
- 'Simplified navigation, responsive dashboards, dark mode… pick your favorite.',
+ text: 'Simplified navigation, responsive dashboards, dark mode… pick your favorite.',
action: (
{
},
{
title: 'Enter dark mode',
- text:
- 'Kibana now supports the easy-on-the-eyes theme across the entire UI.',
+ text: 'Kibana now supports the easy-on-the-eyes theme across the entire UI.',
action: Go to Advanced Settings,
date: '10 April 2019',
badge: 7.0,
@@ -103,8 +101,7 @@ const HeaderUpdates = () => {
},
{
title: 'Rollups made simple in Kibana',
- text:
- 'Save space and preserve the integrity of your data directly in the UI.',
+ text: 'Save space and preserve the integrity of your data directly in the UI.',
action: (
{
};
export default () => {
- const [position, setPosition] = useState(
- 'static'
- );
+ const [position, setPosition] =
+ useState('static');
const [theme, setTheme] = useState('default');
return (
diff --git a/src-docs/src/views/header/header_position.tsx b/src-docs/src/views/header/header_position.tsx
index e539f21b346..dac561016cd 100644
--- a/src-docs/src/views/header/header_position.tsx
+++ b/src-docs/src/views/header/header_position.tsx
@@ -10,9 +10,8 @@ import {
} from '../../../../src/components';
export default () => {
- const [position, setPosition] = useState(
- 'static'
- );
+ const [position, setPosition] =
+ useState('static');
const sections: EuiHeaderSections[] = [
{
diff --git a/src-docs/src/views/header/props.tsx b/src-docs/src/views/header/props.tsx
index a0e1a733ad2..4259e7d9842 100644
--- a/src-docs/src/views/header/props.tsx
+++ b/src-docs/src/views/header/props.tsx
@@ -2,6 +2,6 @@ import React, { FunctionComponent } from 'react';
import { EuiHeaderSections } from '../../../../src/components/header';
-export const EuiHeaderSectionsProp: FunctionComponent = () => (
-
-);
+export const EuiHeaderSectionsProp: FunctionComponent<
+ EuiHeaderSections
+> = () => ;
diff --git a/src-docs/src/views/html_id_generator/use_generated_html_id_props.tsx b/src-docs/src/views/html_id_generator/use_generated_html_id_props.tsx
index af7d17c1897..876dea6552b 100644
--- a/src-docs/src/views/html_id_generator/use_generated_html_id_props.tsx
+++ b/src-docs/src/views/html_id_generator/use_generated_html_id_props.tsx
@@ -3,7 +3,9 @@ import React, { FunctionComponent } from 'react';
import { UseGeneratedHtmlIdOptions } from '../../../../src/services/accessibility/html_id_generator';
-export const UseGeneratedHtmlIdProps: FunctionComponent = ({
+export const UseGeneratedHtmlIdProps: FunctionComponent<
+ UseGeneratedHtmlIdOptions
+> = ({
// They're unused in this mock component, but these props must be destructured for our
// props generator to correctly read the comment docblocks associated with them
prefix,
diff --git a/src-docs/src/views/i18n/context.js b/src-docs/src/views/i18n/context.js
index 948034cb0b7..db31bb71e07 100644
--- a/src-docs/src/views/i18n/context.js
+++ b/src-docs/src/views/i18n/context.js
@@ -84,11 +84,12 @@ export default () => {
mapping: mappings[language],
formatNumber: (value) => new Intl.NumberFormat(language).format(value),
render: useDiv
- ? (children) => () => (
-
- {children}
-
- )
+ ? (children) => () =>
+ (
+
+ {children}
+
+ )
: undefined,
};
diff --git a/src-docs/src/views/inline_edit/inline_edit_text.tsx b/src-docs/src/views/inline_edit/inline_edit_text.tsx
index 04d837e4e42..a35f7b82538 100644
--- a/src-docs/src/views/inline_edit/inline_edit_text.tsx
+++ b/src-docs/src/views/inline_edit/inline_edit_text.tsx
@@ -23,9 +23,8 @@ export default () => {
},
];
- const [toggleTextButtonSize, setToggleTextButtonSize] = useState<
- EuiInlineEditTextProps['size']
- >('m');
+ const [toggleTextButtonSize, setToggleTextButtonSize] =
+ useState('m');
const textSizeOnChange = (optionId: EuiInlineEditTextProps['size']) => {
setToggleTextButtonSize(optionId);
diff --git a/src-docs/src/views/inline_edit/inline_edit_title.tsx b/src-docs/src/views/inline_edit/inline_edit_title.tsx
index edd3794ceed..addf74b1fd6 100644
--- a/src-docs/src/views/inline_edit/inline_edit_title.tsx
+++ b/src-docs/src/views/inline_edit/inline_edit_title.tsx
@@ -35,9 +35,8 @@ export default () => {
},
];
- const [toggleTitleButtonSize, setToggleTitleButtonSize] = useState<
- EuiTitleSize
- >('m');
+ const [toggleTitleButtonSize, setToggleTitleButtonSize] =
+ useState('m');
const titleSizeOnChange = (optionId: EuiTitleSize) => {
setToggleTitleButtonSize(optionId);
diff --git a/src-docs/src/views/key_pad_menu/props.tsx b/src-docs/src/views/key_pad_menu/props.tsx
index 28e2778bc9a..558e45115dd 100644
--- a/src-docs/src/views/key_pad_menu/props.tsx
+++ b/src-docs/src/views/key_pad_menu/props.tsx
@@ -2,6 +2,6 @@ import React, { FunctionComponent } from 'react';
import { _EuiKeyPadMenuCheckableProps } from '../../../../src/components/key_pad_menu/key_pad_menu';
-export const EuiKeyPadMenuCheckableProps: FunctionComponent<_EuiKeyPadMenuCheckableProps> = () => (
-
-);
+export const EuiKeyPadMenuCheckableProps: FunctionComponent<
+ _EuiKeyPadMenuCheckableProps
+> = () => ;
diff --git a/src-docs/src/views/list_group/pinnable_list_group.tsx b/src-docs/src/views/list_group/pinnable_list_group.tsx
index 78eecbf09f5..468cb9826cd 100644
--- a/src-docs/src/views/list_group/pinnable_list_group.tsx
+++ b/src-docs/src/views/list_group/pinnable_list_group.tsx
@@ -48,9 +48,8 @@ const someListItems: EuiPinnableListGroupItemProps[] = [
];
export default () => {
- const [itemList, setItemList] = useState(
- someListItems
- );
+ const [itemList, setItemList] =
+ useState(someListItems);
return (
<>
diff --git a/src-docs/src/views/list_group/props.tsx b/src-docs/src/views/list_group/props.tsx
index 9e860cb0014..0f3183c99ae 100644
--- a/src-docs/src/views/list_group/props.tsx
+++ b/src-docs/src/views/list_group/props.tsx
@@ -5,10 +5,10 @@ import {
EuiListGroupItemExtraActionProps,
} from '../../../../src/components/list_group';
-export const EuiPinnableListGroupItem: FunctionComponent = () => (
-
-);
+export const EuiPinnableListGroupItem: FunctionComponent<
+ EuiPinnableListGroupItemProps
+> = () => ;
-export const EuiListGroupItemExtraAction: FunctionComponent = () => (
-
-);
+export const EuiListGroupItemExtraAction: FunctionComponent<
+ EuiListGroupItemExtraActionProps
+> = () => ;
diff --git a/src-docs/src/views/loading/loading_example.tsx b/src-docs/src/views/loading/loading_example.tsx
index 75d9c14ee53..502de9e5f91 100644
--- a/src-docs/src/views/loading/loading_example.tsx
+++ b/src-docs/src/views/loading/loading_example.tsx
@@ -21,9 +21,9 @@ import {
import { EuiLoadingSpinnerColor as EuiLoadingSpinnerColorProps } from '../../../../src/components/loading/loading_spinner';
-export const EuiLoadingSpinnerColor: FunctionComponent = () => (
-
-);
+export const EuiLoadingSpinnerColor: FunctionComponent<
+ EuiLoadingSpinnerColorProps
+> = () => ;
import LoadingLogo from './loading_kibana';
const loadingLogoSource = require('!!raw-loader!./loading_kibana');
diff --git a/src-docs/src/views/markdown_editor/markdown_editor_no_plugins.js b/src-docs/src/views/markdown_editor/markdown_editor_no_plugins.js
index 09c85890662..5b4dc9b2e64 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor_no_plugins.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor_no_plugins.js
@@ -14,11 +14,8 @@ And the following syntax no longer works.
!{tooltip[anchor text](Tooltip content)}
`;
-const {
- parsingPlugins,
- processingPlugins,
- uiPlugins,
-} = getDefaultEuiMarkdownPlugins({ exclude: ['tooltip'] });
+const { parsingPlugins, processingPlugins, uiPlugins } =
+ getDefaultEuiMarkdownPlugins({ exclude: ['tooltip'] });
export default () => {
const [value, setValue] = useState(initialContent);
diff --git a/src-docs/src/views/package/changelog.js b/src-docs/src/views/package/changelog.js
index 78d80ac056d..a3652b6e885 100644
--- a/src-docs/src/views/package/changelog.js
+++ b/src-docs/src/views/package/changelog.js
@@ -4,10 +4,11 @@ import { EuiMarkdownFormat } from '../../../../src';
import { GuideSection } from '../../components';
import { GuideTabbedPage } from '../../components/guide_tabbed_page';
-const changelogSource = require('!!raw-loader!../../../../CHANGELOG.md').default.replace(
- /## \[`main`\].+?##(?= \[`\d)/s, // remove the `main` heading & contents
- '##'
-);
+const changelogSource =
+ require('!!raw-loader!../../../../CHANGELOG.md').default.replace(
+ /## \[`main`\].+?##(?= \[`\d)/s, // remove the `main` heading & contents
+ '##'
+ );
export const Changelog = {
name: 'Changelog',
diff --git a/src-docs/src/views/page_components/page_demo.tsx b/src-docs/src/views/page_components/page_demo.tsx
index 25d1ee4032a..e6acf7e0f2c 100644
--- a/src-docs/src/views/page_components/page_demo.tsx
+++ b/src-docs/src/views/page_components/page_demo.tsx
@@ -26,9 +26,8 @@ import { pageConfig } from './playground';
export const PageComponentDemo: FunctionComponent = () => {
const [showSideBar, setShowSideBar] = useState(true);
const [horizontal, setHorizontal] = useState(true);
- const [restrictWidth, setRestrictWidth] = useState<
- EuiPageProps['restrictWidth']
- >(false);
+ const [restrictWidth, setRestrictWidth] =
+ useState(false);
const [grow, setGrow] = useState(true);
const content = (
diff --git a/src-docs/src/views/page_template/_page_demo.tsx b/src-docs/src/views/page_template/_page_demo.tsx
index cf4e9c43a78..b70a0df8d71 100644
--- a/src-docs/src/views/page_template/_page_demo.tsx
+++ b/src-docs/src/views/page_template/_page_demo.tsx
@@ -97,12 +97,10 @@ export const PageDemo: FunctionComponent<
);
// Restrict width combos
- const [restrictWidth, setRestrictWidth] = useState<
- EuiPageTemplateProps['restrictWidth']
- >(true);
- const [bottomBorder, setBottomBorder] = useState<
- EuiPageTemplateProps['bottomBorder']
- >(undefined);
+ const [restrictWidth, setRestrictWidth] =
+ useState(true);
+ const [bottomBorder, setBottomBorder] =
+ useState(undefined);
const button = fullscreen ? (
diff --git a/src-docs/src/views/popover/props.tsx b/src-docs/src/views/popover/props.tsx
index 0beada7ecfc..05fe8c63a36 100644
--- a/src-docs/src/views/popover/props.tsx
+++ b/src-docs/src/views/popover/props.tsx
@@ -2,6 +2,6 @@ import React, { FunctionComponent } from 'react';
import { EuiPopoverPanelProps as _EuiPopoverPanelProps } from '../../../../src/components/popover/popover_panel/_popover_panel';
-export const EuiPopoverPanelProps: FunctionComponent<_EuiPopoverPanelProps> = () => (
-
-);
+export const EuiPopoverPanelProps: FunctionComponent<
+ _EuiPopoverPanelProps
+> = () => ;
diff --git a/src-docs/src/views/range/input.tsx b/src-docs/src/views/range/input.tsx
index 9800d0238b4..ea18f8e86b6 100644
--- a/src-docs/src/views/range/input.tsx
+++ b/src-docs/src/views/range/input.tsx
@@ -11,8 +11,7 @@ import {
export default () => {
const [value, setValue] = useState('20');
const [dualValue, setDualValue] = useState([
- 20,
- 100,
+ 20, 100,
]);
const inputRangeSliderId = useGeneratedHtmlId({ prefix: 'inputRangeSlider' });
diff --git a/src-docs/src/views/range/input_only.tsx b/src-docs/src/views/range/input_only.tsx
index 574127a6965..43df623c4b7 100644
--- a/src-docs/src/views/range/input_only.tsx
+++ b/src-docs/src/views/range/input_only.tsx
@@ -14,8 +14,7 @@ import { DisplayToggles } from '../form_controls/display_toggles';
export default () => {
const [value, setValue] = useState('20');
const [dualValue, setDualValue] = useState([
- 20,
- 100,
+ 20, 100,
]);
const inputRangeSliderId = useGeneratedHtmlId({ prefix: 'inputRangeSlider' });
diff --git a/src-docs/src/views/range/levels.tsx b/src-docs/src/views/range/levels.tsx
index 943e24e9ba0..949e4583088 100644
--- a/src-docs/src/views/range/levels.tsx
+++ b/src-docs/src/views/range/levels.tsx
@@ -13,8 +13,7 @@ export default () => {
const [value, setValue] = useState('20');
const [customColorsValue, setCustomColorsValue] = useState('15');
const [dualValue, setDualValue] = useState([
- 20,
- 100,
+ 20, 100,
]);
const levels = [
diff --git a/src-docs/src/views/range/states.tsx b/src-docs/src/views/range/states.tsx
index 19167196366..e49148d5a70 100644
--- a/src-docs/src/views/range/states.tsx
+++ b/src-docs/src/views/range/states.tsx
@@ -13,8 +13,7 @@ import { useGeneratedHtmlId } from '../../../../src/services';
export default () => {
const [value, setValue] = useState('20');
const [dualValue, setDualValue] = useState([
- 20,
- 100,
+ 20, 100,
]);
const levels = [
diff --git a/src-docs/src/views/range/ticks.tsx b/src-docs/src/views/range/ticks.tsx
index 2de5fed0f6b..f9ed4b3aaae 100644
--- a/src-docs/src/views/range/ticks.tsx
+++ b/src-docs/src/views/range/ticks.tsx
@@ -13,8 +13,7 @@ import {
export default () => {
const [value, setValue] = useState('20');
const [dualValue, setDualValue] = useState([
- 20,
- 100,
+ 20, 100,
]);
const [noLinearValue, setNoLinearValue] = useState('28');
diff --git a/src-docs/src/views/search_bar/props_info.js b/src-docs/src/views/search_bar/props_info.js
index 06b8a927e2d..900b7d37224 100644
--- a/src-docs/src/views/search_bar/props_info.js
+++ b/src-docs/src/views/search_bar/props_info.js
@@ -9,8 +9,7 @@ export const propsInfo = {
'the callback ill receive the query text and an error object (holding the error message)',
required: true,
type: {
- name:
- '({ query?: #Query, queryText: string, error?: { message: string } }) => void',
+ name: '({ query?: #Query, queryText: string, error?: { message: string } }) => void',
},
},
query: {
@@ -57,16 +56,14 @@ export const propsInfo = {
description:
'Executes the given query over an array if objects and returns the an array of objects that match it',
type: {
- name:
- 'static (query: #Query | string, items: Object[], options?: #ExecuteQueryOptions) => Object[]',
+ name: 'static (query: #Query | string, items: Object[], options?: #ExecuteQueryOptions) => Object[]',
},
},
toESQuery: {
description:
'Builds and returns an Elasticsearch query object out of the given query',
type: {
- name:
- 'static (query: #Query | string, options?: #ToESQueryOptions) => ESQuery',
+ name: 'static (query: #Query | string, options?: #ToESQueryOptions) => ESQuery',
},
},
},
diff --git a/src-docs/src/views/selectable/props.tsx b/src-docs/src/views/selectable/props.tsx
index eb0a39e7af0..16d778b98a6 100644
--- a/src-docs/src/views/selectable/props.tsx
+++ b/src-docs/src/views/selectable/props.tsx
@@ -7,22 +7,22 @@ import {
EuiSelectableTemplateSitewideMetaData,
} from '../../../../src';
-export const EuiSelectableOptionProps: FunctionComponent = () => (
-
-);
+export const EuiSelectableOptionProps: FunctionComponent<
+ EuiSelectableOption
+> = () => ;
-export const EuiSelectableOptionsList: FunctionComponent = () => (
-
-);
+export const EuiSelectableOptionsList: FunctionComponent<
+ EuiSelectableOptionsListProps
+> = () => ;
-export const EuiSelectableSearchProps: FunctionComponent> = () => ;
+export const EuiSelectableSearchProps: FunctionComponent<
+ EuiSelectableSearchableSearchProps
+> = () => ;
-export const Options: FunctionComponent = () => (
-
-);
+export const Options: FunctionComponent<
+ EuiSelectableTemplateSitewideOption
+> = () => ;
-export const MetaData: FunctionComponent = () => (
-
-);
+export const MetaData: FunctionComponent<
+ EuiSelectableTemplateSitewideMetaData
+> = () => ;
diff --git a/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx b/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx
index 2b791a9c709..cb80843b43c 100644
--- a/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx
+++ b/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx
@@ -218,8 +218,7 @@ const searchData: EuiSelectableTemplateSitewideOption[] = [
type: 'article',
},
{
- text:
- 'https://discuss.elastic.co/t/generate-har-archive-of-network-timings',
+ text: 'https://discuss.elastic.co/t/generate-har-archive-of-network-timings',
highlightSearchString: true,
},
],
diff --git a/src-docs/src/views/side_nav/props.tsx b/src-docs/src/views/side_nav/props.tsx
index ba73c04621f..d459d01a20c 100644
--- a/src-docs/src/views/side_nav/props.tsx
+++ b/src-docs/src/views/side_nav/props.tsx
@@ -1,11 +1,11 @@
import React, { FunctionComponent } from 'react';
import { EuiSideNavItemType } from '../../../../src/components/side_nav/side_nav_types';
-export const EuiSideNavItem: FunctionComponent> = () => ;
+export const EuiSideNavItem: FunctionComponent<
+ EuiSideNavItemType
+> = () => ;
import { EuiSideNavHeadingProps } from '../../../../src/components/side_nav/side_nav';
-export const EuiSideNavHeading: FunctionComponent = () => (
-
-);
+export const EuiSideNavHeading: FunctionComponent<
+ EuiSideNavHeadingProps
+> = () => ;
diff --git a/src-docs/src/views/super_date_picker/props.tsx b/src-docs/src/views/super_date_picker/props.tsx
index 7812167c010..fbf9b785aad 100644
--- a/src-docs/src/views/super_date_picker/props.tsx
+++ b/src-docs/src/views/super_date_picker/props.tsx
@@ -2,6 +2,6 @@ import React, { FunctionComponent } from 'react';
import { EuiSuperUpdateButtonProps as _EuiSuperUpdateButtonProps } from '../../../../src/components';
-export const EuiSuperUpdateButtonProps: FunctionComponent<_EuiSuperUpdateButtonProps> = () => (
-
-);
+export const EuiSuperUpdateButtonProps: FunctionComponent<
+ _EuiSuperUpdateButtonProps
+> = () => ;
diff --git a/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select.tsx b/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select.tsx
index 39569ff9254..44d72ac3ad1 100644
--- a/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select.tsx
+++ b/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select.tsx
@@ -24,9 +24,8 @@ function MyCustomQuickSelectPanel({ applyTime }: { applyTime?: ApplyTime }) {
export default () => {
const { euiTheme } = useEuiTheme();
- const [showCustomQuickSelectPanel, setShowCustomQuickSelectPanel] = useState(
- true
- );
+ const [showCustomQuickSelectPanel, setShowCustomQuickSelectPanel] =
+ useState(true);
const [showRecentlyUsed, setShowRecentlyUsed] = useState(true);
const [showQuickSelectOnly, setShowQuickSelectOnly] = useState(false);
diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_callback.tsx b/src-docs/src/views/tables/in_memory/in_memory_search_callback.tsx
index 5ce220cc63c..391f010a980 100644
--- a/src-docs/src/views/tables/in_memory/in_memory_search_callback.tsx
+++ b/src-docs/src/views/tables/in_memory/in_memory_search_callback.tsx
@@ -124,7 +124,8 @@ export default () => {
requestTimeoutId = setTimeout(() => {
const items = users.filter((user) => {
- const normalizedName = `${user.firstName} ${user.lastName}`.toLowerCase();
+ const normalizedName =
+ `${user.firstName} ${user.lastName}`.toLowerCase();
const normalizedQuery = query?.text.toLowerCase() || '';
return normalizedName.indexOf(normalizedQuery) !== -1;
});
diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_external.tsx b/src-docs/src/views/tables/in_memory/in_memory_search_external.tsx
index 71b757ff1b2..e0fff0d4cc5 100644
--- a/src-docs/src/views/tables/in_memory/in_memory_search_external.tsx
+++ b/src-docs/src/views/tables/in_memory/in_memory_search_external.tsx
@@ -49,7 +49,7 @@ type User = {
dateOfBirth: Date;
online: boolean;
location: string;
- locationData: typeof countries[number];
+ locationData: (typeof countries)[number];
};
const users: User[] = [];
diff --git a/src-docs/src/views/tables/props/props.tsx b/src-docs/src/views/tables/props/props.tsx
index 3ad66d8b6a3..05a4af848db 100644
--- a/src-docs/src/views/tables/props/props.tsx
+++ b/src-docs/src/views/tables/props/props.tsx
@@ -7,16 +7,16 @@ import { EuiTableRowCellMobileOptionsShape as _EuiTableRowCellMobileOptionsShape
// Simulating the `item` generic
type T = {};
-export const DefaultItemActionProps: FunctionComponent> = () => ;
+export const DefaultItemActionProps: FunctionComponent<
+ DefaultItemAction
+> = () => ;
export const SearchProps: FunctionComponent = () => ;
-export const SearchFilterConfigProps: FunctionComponent = () => (
-
-);
+export const SearchFilterConfigProps: FunctionComponent<
+ SearchFilterConfig
+> = () => ;
-export const EuiTableRowCellMobileOptionsShape: FunctionComponent<_EuiTableRowCellMobileOptionsShape> = () => (
-
-);
+export const EuiTableRowCellMobileOptionsShape: FunctionComponent<
+ _EuiTableRowCellMobileOptionsShape
+> = () => ;
diff --git a/src-docs/src/views/theme/_props.tsx b/src-docs/src/views/theme/_props.tsx
index c430e4b2e96..802782b2aa3 100644
--- a/src-docs/src/views/theme/_props.tsx
+++ b/src-docs/src/views/theme/_props.tsx
@@ -20,9 +20,9 @@ export const EuiThemeColors: FunctionComponent<_EuiThemeColorsMode> = () => (
);
-export const EuiThemeConstantColors: FunctionComponent<_EuiThemeConstantColors> = () => (
-
-);
+export const EuiThemeConstantColors: FunctionComponent<
+ _EuiThemeConstantColors
+> = () => ;
import { _EuiThemeSizes } from '../../../../src/global_styling/variables/size';
@@ -38,9 +38,9 @@ import {
export const EuiThemeFontBase: FunctionComponent<_EuiThemeFontBase> = () => (
);
-export const EuiThemeFontWeight: FunctionComponent<_EuiThemeFontWeights> = () => (
-
-);
+export const EuiThemeFontWeight: FunctionComponent<
+ _EuiThemeFontWeights
+> = () => ;
export const EuiThemeFontScale: FunctionComponent<_EuiThemeFontScales> = () => (
);
@@ -53,18 +53,18 @@ import {
_EuiThemeBorderWidthValues,
} from '../../../../src/global_styling/variables/borders';
-export const EuiThemeBorderRadiusValues: FunctionComponent<_EuiThemeBorderRadiusValues> = () => (
-
-);
-export const EuiThemeBorderWidthValues: FunctionComponent<_EuiThemeBorderWidthValues> = () => (
-
-);
-export const EuiThemeBorderColorValues: FunctionComponent<_EuiThemeBorderColorValues> = () => (
-
-);
-export const EuiThemeBorderTypes: FunctionComponent<_EuiThemeBorderTypes> = () => (
-
-);
+export const EuiThemeBorderRadiusValues: FunctionComponent<
+ _EuiThemeBorderRadiusValues
+> = () => ;
+export const EuiThemeBorderWidthValues: FunctionComponent<
+ _EuiThemeBorderWidthValues
+> = () => ;
+export const EuiThemeBorderColorValues: FunctionComponent<
+ _EuiThemeBorderColorValues
+> = () => ;
+export const EuiThemeBorderTypes: FunctionComponent<
+ _EuiThemeBorderTypes
+> = () => ;
import { _EuiThemeFocus } from '../../../../src/global_styling/variables/states';
@@ -75,12 +75,12 @@ import {
_EuiThemeAnimationEasings,
} from '../../../../src/global_styling/variables/animations';
-export const EuiThemeAnimationSpeed: FunctionComponent<_EuiThemeAnimationSpeeds> = () => (
-
-);
-export const EuiThemeAnimationEasing: FunctionComponent<_EuiThemeAnimationEasings> = () => (
-
-);
+export const EuiThemeAnimationSpeed: FunctionComponent<
+ _EuiThemeAnimationSpeeds
+> = () => ;
+export const EuiThemeAnimationEasing: FunctionComponent<
+ _EuiThemeAnimationEasings
+> = () => ;
export const euiThemeBreakpointType = {
custom: { origin: { type: { name: 'number' } } },
diff --git a/src-docs/src/views/theme/color/_color_js.tsx b/src-docs/src/views/theme/color/_color_js.tsx
index 8174aa930a0..b4749bb0575 100644
--- a/src-docs/src/views/theme/color/_color_js.tsx
+++ b/src-docs/src/views/theme/color/_color_js.tsx
@@ -388,7 +388,8 @@ export const UtilsValuesJS = () => {
? `useEuiBackgroundColor('${color}', 'transparent')`
: `useEuiBackgroundColor('${color}')`,
value: euiBackgroundColor(euiTheme, color, {
- method: backgroundSelected as _EuiBackgroundColorOptions['method'],
+ method:
+ backgroundSelected as _EuiBackgroundColorOptions['method'],
}),
};
})}
diff --git a/src-docs/src/views/theme/color/contrast.tsx b/src-docs/src/views/theme/color/contrast.tsx
index 5d533f949bb..b4b3efa0da3 100644
--- a/src-docs/src/views/theme/color/contrast.tsx
+++ b/src-docs/src/views/theme/color/contrast.tsx
@@ -65,9 +65,8 @@ export default () => {
};
});
- const [backgroundColors, setBackgroundColors] = useState(
- background_colors
- );
+ const [backgroundColors, setBackgroundColors] =
+ useState(background_colors);
const [backgroundFunction, setBackgroundFunction] = useState(
'useEuiBackgroundColor'
);
diff --git a/src-docs/src/views/theme/color_mode/inverse_complex.tsx b/src-docs/src/views/theme/color_mode/inverse_complex.tsx
index 30888bf994a..ff3dd9247d9 100644
--- a/src-docs/src/views/theme/color_mode/inverse_complex.tsx
+++ b/src-docs/src/views/theme/color_mode/inverse_complex.tsx
@@ -40,9 +40,8 @@ export default () => {
},
];
- const [boxColorModeSelected, setBoxColorMode] = useState(
- 'light'
- );
+ const [boxColorModeSelected, setBoxColorMode] =
+ useState('light');
const onChange = (colorMode: EuiThemeColorMode) => {
setBoxColorMode(colorMode);
diff --git a/src-docs/src/views/theme/other/_animation_js.tsx b/src-docs/src/views/theme/other/_animation_js.tsx
index 3989d3b7447..6f17793f798 100644
--- a/src-docs/src/views/theme/other/_animation_js.tsx
+++ b/src-docs/src/views/theme/other/_animation_js.tsx
@@ -56,9 +56,9 @@ export const SpeedValuesJS = () => {
const { euiTheme } = useEuiTheme();
const animation = euiTheme.animation;
- const speedTypes = (getPropsFromComponent(
+ const speedTypes = getPropsFromComponent(
EuiThemeAnimationSpeed
- ) as unknown) as _EuiThemeAnimationSpeeds;
+ ) as unknown as _EuiThemeAnimationSpeeds;
const speeds = keysOf(speedTypes);
return (
@@ -125,9 +125,9 @@ export const EasingJS: FunctionComponent = ({ description }) => {
export const EasingValuesJS = () => {
const { euiTheme } = useEuiTheme();
const animation = euiTheme.animation;
- const easingTypes = (getPropsFromComponent(
+ const easingTypes = getPropsFromComponent(
EuiThemeAnimationEasing
- ) as unknown) as _EuiThemeAnimationEasings;
+ ) as unknown as _EuiThemeAnimationEasings;
const eases = keysOf(easingTypes);
return (
diff --git a/src-docs/src/views/theme/other/_levels_js.tsx b/src-docs/src/views/theme/other/_levels_js.tsx
index 5be01d71c04..6b20a4ee4ae 100644
--- a/src-docs/src/views/theme/other/_levels_js.tsx
+++ b/src-docs/src/views/theme/other/_levels_js.tsx
@@ -12,9 +12,9 @@ import { EuiThemeLevelsProps } from '../_props';
export default () => {
const { euiTheme } = useEuiTheme();
- const levelsTypes = (getPropsFromComponent(
+ const levelsTypes = getPropsFromComponent(
EuiThemeLevelsProps
- ) as unknown) as _EuiThemeLevels;
+ ) as unknown as _EuiThemeLevels;
return (
<>
diff --git a/src-docs/src/views/utility_classes/utility_classes_section.tsx b/src-docs/src/views/utility_classes/utility_classes_section.tsx
index af0d9f6e01e..7614493739c 100644
--- a/src-docs/src/views/utility_classes/utility_classes_section.tsx
+++ b/src-docs/src/views/utility_classes/utility_classes_section.tsx
@@ -8,10 +8,9 @@ type UtilityClassesSection = ThemeExample & {
code: string;
};
-export const UtilityClassesSection: FunctionComponent = ({
- code,
- ...rest
-}) => {
+export const UtilityClassesSection: FunctionComponent<
+ UtilityClassesSection
+> = ({ code, ...rest }) => {
return (
{
fallback: {
fs: false,
os: false,
+ assert: false,
process: require.resolve('process/browser'),
-
// provide requirements for playground
path: require.resolve('path'),
buffer: require.resolve('buffer/'),
diff --git a/src/components/accessibility/screen_reader_live/screen_reader_live.tsx b/src/components/accessibility/screen_reader_live/screen_reader_live.tsx
index 5f19e17b4de..6c4c8eee169 100644
--- a/src/components/accessibility/screen_reader_live/screen_reader_live.tsx
+++ b/src/components/accessibility/screen_reader_live/screen_reader_live.tsx
@@ -46,7 +46,9 @@ export interface EuiScreenReaderLiveProps {
focusRegionOnTextChange?: boolean;
}
-export const EuiScreenReaderLive: FunctionComponent = ({
+export const EuiScreenReaderLive: FunctionComponent<
+ EuiScreenReaderLiveProps
+> = ({
children,
isActive = true,
role = 'status',
diff --git a/src/components/accessibility/screen_reader_only/screen_reader_only.tsx b/src/components/accessibility/screen_reader_only/screen_reader_only.tsx
index b86114c9847..faf1b9d38f3 100644
--- a/src/components/accessibility/screen_reader_only/screen_reader_only.tsx
+++ b/src/components/accessibility/screen_reader_only/screen_reader_only.tsx
@@ -25,11 +25,9 @@ export interface EuiScreenReaderOnlyProps {
className?: string;
}
-export const EuiScreenReaderOnly: FunctionComponent = ({
- children,
- className,
- showOnFocus,
-}) => {
+export const EuiScreenReaderOnly: FunctionComponent<
+ EuiScreenReaderOnlyProps
+> = ({ children, className, showOnFocus }) => {
const classes = classNames(className, children.props.className);
const styles = euiScreenReaderOnlyStyles(showOnFocus);
diff --git a/src/components/accessibility/skip_link/skip_link.tsx b/src/components/accessibility/skip_link/skip_link.tsx
index 8dc8ab60027..0b8a89c0670 100644
--- a/src/components/accessibility/skip_link/skip_link.tsx
+++ b/src/components/accessibility/skip_link/skip_link.tsx
@@ -16,7 +16,7 @@ import { EuiScreenReaderOnly } from '../screen_reader_only';
import { euiSkipLinkStyles } from './skip_link.styles';
export const POSITIONS = ['static', 'fixed', 'absolute'] as const;
-type Positions = typeof POSITIONS[number];
+type Positions = (typeof POSITIONS)[number];
interface EuiSkipLinkInterface extends EuiButtonProps {
/**
diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx
index 567c44868af..c316b58fb8e 100644
--- a/src/components/avatar/avatar.tsx
+++ b/src/components/avatar/avatar.tsx
@@ -21,13 +21,13 @@ import { IconType, EuiIcon, IconSize, IconColor } from '../icon';
import { euiAvatarStyles } from './avatar.styles';
export const SIZES = ['s', 'm', 'l', 'xl'] as const;
-export type EuiAvatarSize = typeof SIZES[number];
+export type EuiAvatarSize = (typeof SIZES)[number];
export const TYPES = ['space', 'user'] as const;
-export type EuiAvatarType = typeof TYPES[number];
+export type EuiAvatarType = (typeof TYPES)[number];
export const CASING = ['capitalize', 'uppercase', 'lowercase', 'none'] as const;
-export type EuiAvatarCasing = typeof CASING[number];
+export type EuiAvatarCasing = (typeof CASING)[number];
/**
* The avatar can only display one type of content,
diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
index 4c56fa20cda..1b9fd2afda4 100644
--- a/src/components/badge/badge.tsx
+++ b/src/components/badge/badge.tsx
@@ -34,7 +34,7 @@ import { euiBadgeStyles } from './badge.styles';
import { euiButtonFillColor } from '../../themes/amsterdam/global_styling/mixins';
export const ICON_SIDES = ['left', 'right'] as const;
-type IconSide = typeof ICON_SIDES[number];
+type IconSide = (typeof ICON_SIDES)[number];
export const COLORS = [
'default',
@@ -45,7 +45,7 @@ export const COLORS = [
'warning',
'danger',
] as const;
-type BadgeColor = typeof COLORS[number];
+type BadgeColor = (typeof COLORS)[number];
type WithButtonProps = {
/**
@@ -155,8 +155,10 @@ export const EuiBadge: FunctionComponent = ({
| 'accent'
| 'warning'
| 'danger';
- colorHex = euiButtonFillColor(euiTheme, color as RemainingColors)
- .backgroundColor;
+ colorHex = euiButtonFillColor(
+ euiTheme,
+ color as RemainingColors
+ ).backgroundColor;
break;
}
diff --git a/src/components/badge/badge_group/badge_group.tsx b/src/components/badge/badge_group/badge_group.tsx
index 29ae779d684..83099b899ce 100644
--- a/src/components/badge/badge_group/badge_group.tsx
+++ b/src/components/badge/badge_group/badge_group.tsx
@@ -14,7 +14,7 @@ import { useEuiTheme } from '../../../services';
import { euiBadgeGroupStyles } from './badge_group.styles';
export const GUTTER_SIZES = ['none', 'xs', 's'] as const;
-type BadgeGroupGutterSize = typeof GUTTER_SIZES[number];
+type BadgeGroupGutterSize = (typeof GUTTER_SIZES)[number];
export interface EuiBadgeGroupProps {
/**
diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx
index 7b9d82cc744..89f60ccce68 100644
--- a/src/components/badge/beta_badge/beta_badge.tsx
+++ b/src/components/badge/beta_badge/beta_badge.tsx
@@ -25,13 +25,13 @@ import { EuiIcon, IconType } from '../../icon';
import { euiBetaBadgeStyles } from './beta_badge.styles';
export const COLORS = ['accent', 'subdued', 'hollow'] as const;
-export type BetaBadgeColor = typeof COLORS[number];
+export type BetaBadgeColor = (typeof COLORS)[number];
export const SIZES = ['s', 'm'] as const;
-export type BetaBadgeSize = typeof SIZES[number];
+export type BetaBadgeSize = (typeof SIZES)[number];
export const ALIGNMENTS = ['baseline', 'middle'] as const;
-export type BetaBadgeAlignment = typeof ALIGNMENTS[number];
+export type BetaBadgeAlignment = (typeof ALIGNMENTS)[number];
type WithButtonProps = {
/**
diff --git a/src/components/badge/notification_badge/badge_notification.tsx b/src/components/badge/notification_badge/badge_notification.tsx
index 054f32d6586..a4e9ad8d746 100644
--- a/src/components/badge/notification_badge/badge_notification.tsx
+++ b/src/components/badge/notification_badge/badge_notification.tsx
@@ -14,10 +14,10 @@ import { useEuiTheme } from '../../../services';
import { euiNotificationBadgeStyles } from './badge_notification.styles';
export const COLORS = ['accent', 'subdued'] as const;
-export type BadgeNotificationColor = typeof COLORS[number];
+export type BadgeNotificationColor = (typeof COLORS)[number];
export const SIZES = ['s', 'm'] as const;
-export type BadgeNotificationSize = typeof SIZES[number];
+export type BadgeNotificationSize = (typeof SIZES)[number];
export interface EuiNotificationBadgeProps
extends CommonProps,
@@ -30,13 +30,9 @@ export interface EuiNotificationBadgeProps
color?: BadgeNotificationColor;
}
-export const EuiNotificationBadge: FunctionComponent = ({
- children,
- className,
- size = 's',
- color = 'accent',
- ...rest
-}) => {
+export const EuiNotificationBadge: FunctionComponent<
+ EuiNotificationBadgeProps
+> = ({ children, className, size = 's', color = 'accent', ...rest }) => {
const euiTheme = useEuiTheme();
const styles = euiNotificationBadgeStyles(euiTheme);
diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx
index deb089be3b8..23498c19b05 100644
--- a/src/components/basic_table/basic_table.tsx
+++ b/src/components/basic_table/basic_table.tsx
@@ -848,11 +848,8 @@ export class EuiBasicTable extends Component<
columns.forEach((column: EuiBasicTableColumn) => {
const footer = getColumnFooter(column, { items, pagination });
- const {
- mobileOptions,
- field,
- align,
- } = column as EuiTableFieldDataColumnType;
+ const { mobileOptions, field, align } =
+ column as EuiTableFieldDataColumnType;
if (mobileOptions?.only) {
return; // exclude columns that only exist for mobile headers
diff --git a/src/components/basic_table/collapsed_item_actions.tsx b/src/components/basic_table/collapsed_item_actions.tsx
index cf1b0363de2..4e63e31dc1c 100644
--- a/src/components/basic_table/collapsed_item_actions.tsx
+++ b/src/components/basic_table/collapsed_item_actions.tsx
@@ -89,14 +89,8 @@ export class CollapsedItemActions extends Component<
};
render() {
- const {
- actions,
- itemId,
- item,
- actionEnabled,
- onFocus,
- className,
- } = this.props;
+ const { actions, itemId, item, actionEnabled, onFocus, className } =
+ this.props;
const isOpen = this.state.popoverOpen;
diff --git a/src/components/basic_table/in_memory_table.tsx b/src/components/basic_table/in_memory_table.tsx
index e1480094822..9c959c265f7 100644
--- a/src/components/basic_table/in_memory_table.tsx
+++ b/src/components/basic_table/in_memory_table.tsx
@@ -237,10 +237,9 @@ function getInitialSorting(
};
}
- const {
- field: sortable,
- direction: sortDirection,
- } = (sorting as SortingOptions).sort;
+ const { field: sortable, direction: sortDirection } = (
+ sorting as SortingOptions
+ ).sort;
const sortColumn = findColumnByFieldOrName(columns, sortable);
@@ -367,12 +366,8 @@ export class EuiInMemoryTable extends Component<
super(props);
const { columns, search, pagination, sorting, allowNeutralSort } = props;
- const {
- pageIndex,
- pageSize,
- pageSizeOptions,
- showPerPageOptions,
- } = getInitialPagination(pagination);
+ const { pageIndex, pageSize, pageSizeOptions, showPerPageOptions } =
+ getInitialPagination(pagination);
const { sortName, sortDirection } = getInitialSorting(columns, sorting);
this.state = {
diff --git a/src/components/beacon/beacon.tsx b/src/components/beacon/beacon.tsx
index 2e58cce188b..b0070e00217 100644
--- a/src/components/beacon/beacon.tsx
+++ b/src/components/beacon/beacon.tsx
@@ -22,7 +22,7 @@ export const COLORS = [
'warning',
] as const;
-export type EuiBeaconColor = typeof COLORS[number];
+export type EuiBeaconColor = (typeof COLORS)[number];
export type EuiBeaconProps = Omit<
HTMLAttributes,
diff --git a/src/components/bottom_bar/bottom_bar.tsx b/src/components/bottom_bar/bottom_bar.tsx
index bd29f85c67a..5a3be3656a5 100644
--- a/src/components/bottom_bar/bottom_bar.tsx
+++ b/src/components/bottom_bar/bottom_bar.tsx
@@ -36,7 +36,7 @@ export const paddingSizeToClassNameMap: {
};
export const POSITIONS = ['static', 'fixed', 'sticky'] as const;
-export type _BottomBarPosition = typeof POSITIONS[number];
+export type _BottomBarPosition = (typeof POSITIONS)[number];
type _BottomBarExclusivePositions = ExclusiveUnion<
{
diff --git a/src/components/breadcrumbs/breadcrumbs.test.tsx b/src/components/breadcrumbs/breadcrumbs.test.tsx
index d7007954ba9..6d348186998 100644
--- a/src/components/breadcrumbs/breadcrumbs.test.tsx
+++ b/src/components/breadcrumbs/breadcrumbs.test.tsx
@@ -32,8 +32,7 @@ const breadcrumbs: EuiBreadcrumb[] = [
text: 'Chordates',
},
{
- text:
- 'Nebulosa subspecies is also a real mouthful, especially for creatures without mouths',
+ text: 'Nebulosa subspecies is also a real mouthful, especially for creatures without mouths',
truncate: true,
},
{
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index a7b85eecf7b..874c02f4b7e 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -41,7 +41,7 @@ export const COLORS = [...BUTTON_COLORS, 'ghost'] as const;
export type EuiButtonColor = _EuiButtonColor | 'ghost';
export const SIZES = ['s', 'm'] as const;
-export type EuiButtonSize = typeof SIZES[number];
+export type EuiButtonSize = (typeof SIZES)[number];
interface BaseProps {
children?: ReactNode;
diff --git a/src/components/button/button_display/_button_display.tsx b/src/components/button/button_display/_button_display.tsx
index af4e79e6705..d52f2bd8dd6 100644
--- a/src/components/button/button_display/_button_display.tsx
+++ b/src/components/button/button_display/_button_display.tsx
@@ -35,7 +35,7 @@ import { validateHref } from '../../../services/security/href_validator';
import { useEuiButtonRadiusCSS } from '../../../themes/amsterdam/global_styling/mixins';
const SIZES = ['xs', 's', 'm'] as const;
-export type EuiButtonDisplaySizes = typeof SIZES[number];
+export type EuiButtonDisplaySizes = (typeof SIZES)[number];
/**
* Extends EuiButtonDisplayContentProps which provides
diff --git a/src/components/button/button_display/_button_display_content.tsx b/src/components/button/button_display/_button_display_content.tsx
index 77963013aa6..88ca51b1df4 100644
--- a/src/components/button/button_display/_button_display_content.tsx
+++ b/src/components/button/button_display/_button_display_content.tsx
@@ -15,10 +15,10 @@ import { euiButtonDisplayContentStyles } from './_button_display_content.styles'
import classNames from 'classnames';
export const ICON_SIZES = ['s', 'm'] as const;
-export type ButtonContentIconSize = typeof ICON_SIZES[number];
+export type ButtonContentIconSize = (typeof ICON_SIZES)[number];
export const ICON_SIDES = ['left', 'right'] as const;
-export type ButtonContentIconSide = typeof ICON_SIDES[number] | undefined;
+export type ButtonContentIconSide = (typeof ICON_SIDES)[number] | undefined;
export type EuiButtonDisplayContentType = HTMLAttributes;
diff --git a/src/components/button/button_empty/button_empty.tsx b/src/components/button/button_empty/button_empty.tsx
index de9cad61f73..66d72c2b7aa 100644
--- a/src/components/button/button_empty/button_empty.tsx
+++ b/src/components/button/button_empty/button_empty.tsx
@@ -91,9 +91,8 @@ export interface CommonEuiButtonEmptyProps
type EuiButtonEmptyPropsForAnchor = PropsForAnchor;
-export type EuiButtonEmptyPropsForButton = PropsForButton<
- CommonEuiButtonEmptyProps
->;
+export type EuiButtonEmptyPropsForButton =
+ PropsForButton;
export type EuiButtonEmptyProps = ExclusiveUnion<
EuiButtonEmptyPropsForAnchor,
diff --git a/src/components/call_out/call_out.tsx b/src/components/call_out/call_out.tsx
index 0e6c09613db..ea25ab23e43 100644
--- a/src/components/call_out/call_out.tsx
+++ b/src/components/call_out/call_out.tsx
@@ -21,10 +21,10 @@ import { EuiTitle } from '../title';
import { euiCallOutStyles, euiCallOutHeadingStyles } from './call_out.styles';
export const COLORS = ['primary', 'success', 'warning', 'danger'] as const;
-export type Color = typeof COLORS[number];
+export type Color = (typeof COLORS)[number];
export const HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'] as const;
-type Heading = typeof HEADINGS[number];
+type Heading = (typeof HEADINGS)[number];
type Size = 's' | 'm';
diff --git a/src/components/card/card.styles.ts b/src/components/card/card.styles.ts
index ba57c5c47c7..e424ce12cb1 100644
--- a/src/components/card/card.styles.ts
+++ b/src/components/card/card.styles.ts
@@ -45,7 +45,9 @@ export const euiCardStyles = (
flex-direction: column;
// Apply the outline to the whole card when the internal text button has focus
- &:has([class*='euiCard__text'][class*='-interactive']:focus:focus-visible) {
+ &:has(
+ [class*='euiCard__text'][class*='-interactive']:focus:focus-visible
+ ) {
outline: ${euiTheme.focus.width} solid currentColor;
}
`,
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index 0be5be7fe7a..4174e148a3e 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -34,7 +34,7 @@ import {
} from './card.styles';
export const ALIGNMENTS = ['left', 'center', 'right'] as const;
-type CardAlignment = typeof ALIGNMENTS[number];
+type CardAlignment = (typeof ALIGNMENTS)[number];
/**
* Certain props are only allowed when the layout is vertical
diff --git a/src/components/code/code.tsx b/src/components/code/code.tsx
index 6ab01b02df8..2f7a4013a18 100644
--- a/src/components/code/code.tsx
+++ b/src/components/code/code.tsx
@@ -27,9 +27,10 @@ export const EuiCode: FunctionComponent = ({
className,
...rest
}) => {
- const language = useMemo(() => checkSupportedLanguage(_language), [
- _language,
- ]);
+ const language = useMemo(
+ () => checkSupportedLanguage(_language),
+ [_language]
+ );
const data: RefractorNode[] = useMemo(() => {
if (typeof children !== 'string') {
@@ -38,10 +39,10 @@ export const EuiCode: FunctionComponent = ({
return highlight(children, language);
}, [children, language]);
- const content = useMemo(() => getHtmlContent(data, children), [
- data,
- children,
- ]);
+ const content = useMemo(
+ () => getHtmlContent(data, children),
+ [data, children]
+ );
const classes = classNames('euiCode', className);
diff --git a/src/components/code/code_block.tsx b/src/components/code/code_block.tsx
index ef0b6a84577..199f84562e4 100644
--- a/src/components/code/code_block.tsx
+++ b/src/components/code/code_block.tsx
@@ -41,10 +41,10 @@ const fontSizeToRowHeightMap = {
};
export const FONT_SIZES = ['s', 'm', 'l'] as const;
-export type EuiCodeBlockFontSize = typeof FONT_SIZES[number];
+export type EuiCodeBlockFontSize = (typeof FONT_SIZES)[number];
export const PADDING_SIZES = ['none', 's', 'm', 'l'] as const;
-export type EuiCodeBlockPaddingSize = typeof PADDING_SIZES[number];
+export type EuiCodeBlockPaddingSize = (typeof PADDING_SIZES)[number];
// This exclusive union enforces specific props based on isVirtualized
type VirtualizedOptionProps = ExclusiveUnion<
@@ -122,9 +122,10 @@ export const EuiCodeBlock: FunctionComponent = ({
...rest
}) => {
const euiTheme = useEuiTheme();
- const language = useMemo(() => checkSupportedLanguage(_language), [
- _language,
- ]);
+ const language = useMemo(
+ () => checkSupportedLanguage(_language),
+ [_language]
+ );
const lineNumbersConfig = useMemo(() => {
const config = typeof lineNumbers === 'object' ? lineNumbers : {};
@@ -142,10 +143,10 @@ export const EuiCodeBlock: FunctionComponent = ({
}, [children, language, lineNumbersConfig, euiTheme]);
// Used by `pre` when `isVirtualized=false` or `children` is not parsable
- const content = useMemo(() => getHtmlContent(data, children), [
- data,
- children,
- ]);
+ const content = useMemo(
+ () => getHtmlContent(data, children),
+ [data, children]
+ );
const isVirtualized = useMemo(
() => !!(_isVirtualized && Array.isArray(data)),
diff --git a/src/components/code/utils.tsx b/src/components/code/utils.tsx
index 905774eec35..3f343fc5006 100644
--- a/src/components/code/utils.tsx
+++ b/src/components/code/utils.tsx
@@ -259,11 +259,11 @@ function wrapLines(
// Annotation element
const hasAnnotation = options.annotations?.hasOwnProperty(lineNumber);
if (hasAnnotation) {
- const annotationElement = ({
+ const annotationElement = {
type: 'annotation',
annotation: options.annotations[lineNumber],
lineNumber,
- } as unknown) as RefractorNode;
+ } as unknown as RefractorNode;
lineNumberWrapperElement.children.push(annotationElement);
}
diff --git a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx
index 20982bed6b2..8849645c2cf 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx
+++ b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx
@@ -97,7 +97,9 @@ export type EuiCollapsibleNavGroupProps = ExclusiveUnion<
GroupAsDiv
>;
-export const EuiCollapsibleNavGroup: FunctionComponent = ({
+export const EuiCollapsibleNavGroup: FunctionComponent<
+ EuiCollapsibleNavGroupProps
+> = ({
className,
children,
id,
diff --git a/src/components/color_picker/color_palette_display/color_palette_display.tsx b/src/components/color_picker/color_palette_display/color_palette_display.tsx
index 53acce39731..f43a8fa440a 100644
--- a/src/components/color_picker/color_palette_display/color_palette_display.tsx
+++ b/src/components/color_picker/color_palette_display/color_palette_display.tsx
@@ -58,13 +58,9 @@ export type EuiColorPaletteDisplayProps = {
size?: EuiColorPaletteDisplaySize;
} & ExclusiveUnion;
-export const EuiColorPaletteDisplay: FunctionComponent = ({
- type = 'fixed',
- palette,
- className,
- size = 's',
- ...rest
-}) => {
+export const EuiColorPaletteDisplay: FunctionComponent<
+ EuiColorPaletteDisplayProps
+> = ({ type = 'fixed', palette, className, size = 's', ...rest }) => {
const classes = classnames(
'euiColorPaletteDisplay',
className,
diff --git a/src/components/color_picker/color_palette_display/color_palette_display_fixed.tsx b/src/components/color_picker/color_palette_display/color_palette_display_fixed.tsx
index ecfceee1006..f36e133c6a9 100644
--- a/src/components/color_picker/color_palette_display/color_palette_display_fixed.tsx
+++ b/src/components/color_picker/color_palette_display/color_palette_display_fixed.tsx
@@ -22,11 +22,9 @@ interface paletteItem {
width: string;
}
-export const EuiColorPaletteDisplayFixed: FunctionComponent = ({
- palette,
- title,
- ...rest
-}) => {
+export const EuiColorPaletteDisplayFixed: FunctionComponent<
+ EuiColorPaletteDisplayFixedProps
+> = ({ palette, title, ...rest }) => {
const fixedGradient = getFixedLinearGradient(palette);
const paletteStops = fixedGradient.map((item: paletteItem, index: number) => (
diff --git a/src/components/color_picker/color_palette_display/color_palette_display_gradient.tsx b/src/components/color_picker/color_palette_display/color_palette_display_gradient.tsx
index a46231c8777..2a08df65a8a 100644
--- a/src/components/color_picker/color_palette_display/color_palette_display_gradient.tsx
+++ b/src/components/color_picker/color_palette_display/color_palette_display_gradient.tsx
@@ -17,12 +17,9 @@ export interface EuiColorPaletteDisplayGradientProps
CommonProps,
EuiColorPaletteDisplayShared {}
-export const EuiColorPaletteDisplayGradient: FunctionComponent = ({
- palette,
- title,
- style = {},
- ...rest
-}) => {
+export const EuiColorPaletteDisplayGradient: FunctionComponent<
+ EuiColorPaletteDisplayGradientProps
+> = ({ palette, title, style = {}, ...rest }) => {
const gradient = getLinearGradient(palette);
return (
diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx
index f6011ea0d9e..7ef19c10d97 100644
--- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx
+++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx
@@ -95,9 +95,9 @@ export type EuiColorPalettePickerProps = CommonProps &
palettes: EuiColorPalettePickerPaletteProps[];
};
-export const EuiColorPalettePicker: FunctionComponent> = ({
+export const EuiColorPalettePicker: FunctionComponent<
+ EuiColorPalettePickerProps
+> = ({
className,
compressed = false,
disabled,
diff --git a/src/components/color_picker/color_picker.tsx b/src/components/color_picker/color_picker.tsx
index f1493a8560c..4411f311866 100644
--- a/src/components/color_picker/color_picker.tsx
+++ b/src/components/color_picker/color_picker.tsx
@@ -239,10 +239,10 @@ export const EuiColorPicker: FunctionComponent = ({
const parsed = parseColor(color);
return parsed != null && typeof parsed === 'object' ? 'rgba' : 'hex';
}, [color, format]);
- const chromaColor = useMemo(() => getChromaColor(color, showAlpha), [
- color,
- showAlpha,
- ]);
+ const chromaColor = useMemo(
+ () => getChromaColor(color, showAlpha),
+ [color, showAlpha]
+ );
const [alphaRangeValue, setAlphaRangeValue] = useState('100');
const alphaChannel = useMemo(() => {
return chromaColor ? chromaColor.alpha() : 1;
diff --git a/src/components/color_picker/color_stops/color_stop_thumb.tsx b/src/components/color_picker/color_stops/color_stop_thumb.tsx
index dcc95795e92..271b0ab2aaa 100644
--- a/src/components/color_picker/color_stops/color_stop_thumb.tsx
+++ b/src/components/color_picker/color_stops/color_stop_thumb.tsx
@@ -224,9 +224,8 @@ export const EuiColorStopThumb: FunctionComponent = ({
}
};
- const [handleMouseDown, handleInteraction] = useMouseMove(
- handlePointerChange
- );
+ const [handleMouseDown, handleInteraction] =
+ useMouseMove(handlePointerChange);
const handleOnMouseDown = (e: React.MouseEvent) => {
if (!readOnly) {
diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index 14a012fc55c..8343a58bdd1 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/src/components/combo_box/combo_box.tsx
@@ -167,7 +167,7 @@ export interface _EuiComboBoxProps
* - export (Props - Defaults) & Partial
*/
type DefaultProps = Omit<
- typeof EuiComboBox['defaultProps'],
+ (typeof EuiComboBox)['defaultProps'],
'options' | 'selectedOptions'
> & {
options: Array>;
@@ -271,9 +271,8 @@ export class EuiComboBox extends Component<
this.listRefInstance = ref;
};
- toggleButtonRefInstance: RefInstance<
- HTMLButtonElement | HTMLSpanElement
- > = null;
+ toggleButtonRefInstance: RefInstance =
+ null;
toggleButtonRefCallback: RefCallback = (
ref
) => {
@@ -867,12 +866,8 @@ export class EuiComboBox extends Component<
};
componentDidUpdate() {
- const {
- options,
- selectedOptions,
- singleSelection,
- sortMatchesBy,
- } = this.props;
+ const { options, selectedOptions, singleSelection, sortMatchesBy } =
+ this.props;
const { searchValue } = this.state;
// React 16.3 has a bug (fixed in 16.4) where getDerivedStateFromProps
diff --git a/src/components/combo_box/matching_options.test.ts b/src/components/combo_box/matching_options.test.ts
index 29d2dad2367..419b5892dc7 100644
--- a/src/components/combo_box/matching_options.test.ts
+++ b/src/components/combo_box/matching_options.test.ts
@@ -262,7 +262,7 @@ const testCases: GetMatchingOptionsTestCase[] = [
describe('getMatchingOptions', () => {
test.each(testCases)(
'.getMatchingOptions(%o)',
- (testCase: typeof testCases[number]) => {
+ (testCase: (typeof testCases)[number]) => {
const { expected, ...rest } = testCase;
expect(getMatchingOptions(rest)).toMatchObject(expected);
}
diff --git a/src/components/common.ts b/src/components/common.ts
index 8e857e7e4c6..8817c1c6852 100644
--- a/src/components/common.ts
+++ b/src/components/common.ts
@@ -91,9 +91,7 @@ export type ApplyClassComponentDefaults<
P = ExtractProps
> =
// definition of Props that are not defaulted
- Omit &
- // definition of Props, made optional, that are have keys in defaultProps
- { [K in keyof D]?: K extends keyof P ? P[K] : never };
+ Omit
& { [K in keyof D]?: K extends keyof P ? P[K] : never }; // definition of Props, made optional, that are have keys in defaultProps
/*
https://github.com/Microsoft/TypeScript/issues/28339
diff --git a/src/components/context_menu/context_menu.tsx b/src/components/context_menu/context_menu.tsx
index e3dbd9c56dd..141dec0cb7f 100644
--- a/src/components/context_menu/context_menu.tsx
+++ b/src/components/context_menu/context_menu.tsx
@@ -237,9 +237,10 @@ export class EuiContextMenu extends Component {
return;
}
- const nextPanelId = this.state.idAndItemIndexToPanelIdMap[
- this.state.incomingPanelId!
- ][itemIndex];
+ const nextPanelId =
+ this.state.idAndItemIndexToPanelIdMap[this.state.incomingPanelId!][
+ itemIndex
+ ];
if (nextPanelId) {
if (this.state.isUsingKeyboardToNavigate) {
@@ -255,9 +256,8 @@ export class EuiContextMenu extends Component {
showPreviousPanel = () => {
// If there's a previous panel, then we can close the current panel to go back to it.
if (this.hasPreviousPanel(this.state.incomingPanelId!)) {
- const previousPanelId = this.state.idToPreviousPanelIdMap[
- this.state.incomingPanelId!
- ];
+ const previousPanelId =
+ this.state.idToPreviousPanelIdMap[this.state.incomingPanelId!];
// Set focus on the item which shows the panel we're leaving.
const previousPanel = this.state.idToPanelMap[previousPanelId];
@@ -416,14 +416,8 @@ export class EuiContextMenu extends Component {
}
render() {
- const {
- panels,
- onPanelChange,
- className,
- initialPanelId,
- size,
- ...rest
- } = this.props;
+ const { panels, onPanelChange, className, initialPanelId, size, ...rest } =
+ this.props;
const incomingPanel = this.renderPanel(this.state.incomingPanelId!, 'in');
let outgoingPanel;
diff --git a/src/components/context_menu/context_menu_panel.tsx b/src/components/context_menu/context_menu_panel.tsx
index 97f77e5b612..8cacaff10b1 100644
--- a/src/components/context_menu/context_menu_panel.tsx
+++ b/src/components/context_menu/context_menu_panel.tsx
@@ -54,7 +54,7 @@ export interface EuiContextMenuPanelProps {
/**
* Alters the size of the items and the title
*/
- size?: typeof SIZES[number];
+ size?: (typeof SIZES)[number];
}
type Props = CommonProps &
diff --git a/src/components/control_bar/control_bar.tsx b/src/components/control_bar/control_bar.tsx
index 48df529f36a..9a0c0608890 100644
--- a/src/components/control_bar/control_bar.tsx
+++ b/src/components/control_bar/control_bar.tsx
@@ -380,14 +380,8 @@ export class EuiControlBar extends Component<
);
}
case 'tab': {
- const {
- controlType,
- id,
- label,
- onClick,
- className,
- ...rest
- } = control;
+ const { controlType, id, label, onClick, className, ...rest } =
+ control;
const tabClasses = classNames(
'euiControlBar__tab',
diff --git a/src/components/copy/copy.tsx b/src/components/copy/copy.tsx
index cdcb025d9d9..a435cf87a5c 100644
--- a/src/components/copy/copy.tsx
+++ b/src/components/copy/copy.tsx
@@ -67,13 +67,8 @@ export class EuiCopy extends Component {
};
render() {
- const {
- children,
- textToCopy,
- beforeMessage,
- afterMessage,
- ...rest
- } = this.props;
+ const { children, textToCopy, beforeMessage, afterMessage, ...rest } =
+ this.props;
return (
// See `src/components/tool_tip/tool_tip.js` for explanation of below eslint-disable
diff --git a/src/components/datagrid/body/data_grid_body_custom.tsx b/src/components/datagrid/body/data_grid_body_custom.tsx
index 38139f40a39..d87b5009fe0 100644
--- a/src/components/datagrid/body/data_grid_body_custom.tsx
+++ b/src/components/datagrid/body/data_grid_body_custom.tsx
@@ -25,7 +25,9 @@ import { useDataGridHeader } from './header';
import { useDataGridFooter } from './footer';
import { Cell } from './data_grid_cell_wrapper';
-export const EuiDataGridBodyCustomRender: FunctionComponent = ({
+export const EuiDataGridBodyCustomRender: FunctionComponent<
+ EuiDataGridBodyProps
+> = ({
renderCustomGridBody,
leadingControlColumns,
trailingControlColumns,
@@ -157,9 +159,8 @@ export const EuiDataGridBodyCustomRender: FunctionComponent({});
+ const [customGridBodyProps, setCustomGridBodyProps] =
+ useState({});
return (
= ({
// Context is required to pass props to react-window's innerElementType
// @see https://github.com/bvaughn/react-window/issues/404
-export const DataGridWrapperRowsContext = createContext<
- DataGridWrapperRowsContentsShape
->({ headerRow:
, headerRowHeight: 0, footerRow: null });
+export const DataGridWrapperRowsContext =
+ createContext
({
+ headerRow: ,
+ headerRowHeight: 0,
+ footerRow: null,
+ });
const InnerElement: VariableSizeGridProps['innerElementType'] = forwardRef<
HTMLDivElement,
@@ -91,7 +94,9 @@ const InnerElement: VariableSizeGridProps['innerElementType'] = forwardRef<
});
InnerElement.displayName = 'EuiDataGridInnerElement';
-export const EuiDataGridBodyVirtualized: FunctionComponent = ({
+export const EuiDataGridBodyVirtualized: FunctionComponent<
+ EuiDataGridBodyProps
+> = ({
leadingControlColumns,
trailingControlColumns,
columns,
diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
index e603d2bf8c4..011e089a7e0 100644
--- a/src/components/datagrid/body/data_grid_cell.tsx
+++ b/src/components/datagrid/body/data_grid_cell.tsx
@@ -63,9 +63,8 @@ const EuiDataGridCellContent: FunctionComponent<
...rest
}) => {
// React is more permissible than the TS types indicate
- const CellElement = renderCellValue as JSXElementConstructor<
- EuiDataGridCellValueElementProps
- >;
+ const CellElement =
+ renderCellValue as JSXElementConstructor;
return (
<>
@@ -416,8 +415,8 @@ export class EuiDataGridCell extends Component<
if (EuiDataGridCell.activeFocusTimeoutId) {
window.clearTimeout(EuiDataGridCell.activeFocusTimeoutId);
}
- EuiDataGridCell.activeFocusTimeoutId = this.focusTimeout = window.setTimeout(
- () => {
+ EuiDataGridCell.activeFocusTimeoutId = this.focusTimeout =
+ window.setTimeout(() => {
this.context.setFocusedCell([colIndex, visibleRowIndex]);
const interactables = this.getInteractables();
@@ -425,9 +424,7 @@ export class EuiDataGridCell extends Component<
interactables[0].focus();
this.setState({ disableCellTabIndex: true });
}
- },
- 0
- );
+ }, 0);
// Close the cell popover if the popover was open and the user clicked the cell
if (this.props.popoverContext.popoverIsOpen) {
this.props.popoverContext.closeCellPopover();
@@ -483,11 +480,8 @@ export class EuiDataGridCell extends Component<
handleCellPopover = () => {
if (this.isPopoverOpen()) {
- const {
- setPopoverAnchor,
- setPopoverContent,
- setCellPopoverProps,
- } = this.props.popoverContext;
+ const { setPopoverAnchor, setPopoverContent, setCellPopoverProps } =
+ this.props.popoverContext;
// Set popover anchor
const cellAnchorEl = this.popoverAnchorRef.current!;
@@ -504,12 +498,9 @@ export class EuiDataGridCell extends Component<
columnType,
} = this.props;
const PopoverElement = (renderCellPopover ||
- DefaultCellPopover) as JSXElementConstructor<
- EuiDataGridCellPopoverElementProps
- >;
- const CellElement = renderCellValue as JSXElementConstructor<
- EuiDataGridCellValueElementProps
- >;
+ DefaultCellPopover) as JSXElementConstructor;
+ const CellElement =
+ renderCellValue as JSXElementConstructor;
const sharedProps = {
rowIndex,
colIndex,
diff --git a/src/components/datagrid/body/data_grid_cell_actions.tsx b/src/components/datagrid/body/data_grid_cell_actions.tsx
index ea2c0ae902d..21bac608c36 100644
--- a/src/components/datagrid/body/data_grid_cell_actions.tsx
+++ b/src/components/datagrid/body/data_grid_cell_actions.tsx
@@ -75,9 +75,8 @@ export const EuiDataGridCellActions = ({
return visibleCellActions.map(
(Action: EuiDataGridColumnCellAction, idx: number) => {
// React is more permissible than the TS types indicate
- const ActionButtonElement = Action as JSXElementConstructor<
- EuiDataGridColumnCellActionProps
- >;
+ const ActionButtonElement =
+ Action as JSXElementConstructor;
return (
{
- const ActionButtonElement = Action as JSXElementConstructor<
- EuiDataGridColumnCellActionProps
- >;
+ const ActionButtonElement =
+ Action as JSXElementConstructor;
return (
diff --git a/src/components/datagrid/body/data_grid_cell_popover.tsx b/src/components/datagrid/body/data_grid_cell_popover.tsx
index 67c60944754..060ec7d630d 100644
--- a/src/components/datagrid/body/data_grid_cell_popover.tsx
+++ b/src/components/datagrid/body/data_grid_cell_popover.tsx
@@ -16,17 +16,16 @@ import {
EuiDataGridCellPopoverElementProps,
} from '../data_grid_types';
-export const DataGridCellPopoverContext = createContext<
- DataGridCellPopoverContextShape
->({
- popoverIsOpen: false,
- cellLocation: { rowIndex: 0, colIndex: 0 },
- openCellPopover: () => {},
- closeCellPopover: () => {},
- setPopoverAnchor: () => {},
- setPopoverContent: () => {},
- setCellPopoverProps: () => {},
-});
+export const DataGridCellPopoverContext =
+ createContext
({
+ popoverIsOpen: false,
+ cellLocation: { rowIndex: 0, colIndex: 0 },
+ openCellPopover: () => {},
+ closeCellPopover: () => {},
+ setPopoverAnchor: () => {},
+ setPopoverContent: () => {},
+ setCellPopoverProps: () => {},
+ });
export const useCellPopover = (): {
cellPopoverContext: DataGridCellPopoverContextShape;
diff --git a/src/components/datagrid/body/data_grid_row_manager.test.ts b/src/components/datagrid/body/data_grid_row_manager.test.ts
index f5021c1aa70..83ee562adba 100644
--- a/src/components/datagrid/body/data_grid_row_manager.test.ts
+++ b/src/components/datagrid/body/data_grid_row_manager.test.ts
@@ -116,9 +116,11 @@ describe('row manager', () => {
let row1: HTMLDivElement;
const mockRowArgs = { visibleRowIndex: 99, top: '15px', height: 30 };
- const { return: rowManager, updateHookArgs } = testCustomHook<
- EuiDataGridRowManager
- >(useRowManager, { innerGridRef: mockGridRef, rowClasses });
+ const { return: rowManager, updateHookArgs } =
+ testCustomHook(useRowManager, {
+ innerGridRef: mockGridRef,
+ rowClasses,
+ });
beforeAll(() => {
row0 = rowManager.getRow({ ...mockRowArgs, rowIndex: 0 });
diff --git a/src/components/datagrid/body/header/data_grid_control_header_cell.tsx b/src/components/datagrid/body/header/data_grid_control_header_cell.tsx
index b42bb779d60..90925b2b3b0 100644
--- a/src/components/datagrid/body/header/data_grid_control_header_cell.tsx
+++ b/src/components/datagrid/body/header/data_grid_control_header_cell.tsx
@@ -12,11 +12,9 @@ import classNames from 'classnames';
import { EuiDataGridControlHeaderCellProps } from '../../data_grid_types';
import { EuiDataGridHeaderCellWrapper } from './data_grid_header_cell_wrapper';
-export const EuiDataGridControlHeaderCell: FunctionComponent = ({
- controlColumn,
- index,
- headerIsInteractive,
-}) => {
+export const EuiDataGridControlHeaderCell: FunctionComponent<
+ EuiDataGridControlHeaderCellProps
+> = ({ controlColumn, index, headerIsInteractive }) => {
const {
headerCellRender: HeaderCellRender,
headerCellProps,
diff --git a/src/components/datagrid/body/header/data_grid_header_cell.tsx b/src/components/datagrid/body/header/data_grid_header_cell.tsx
index 1519d795cf8..01802e4bd2a 100644
--- a/src/components/datagrid/body/header/data_grid_header_cell.tsx
+++ b/src/components/datagrid/body/header/data_grid_header_cell.tsx
@@ -35,7 +35,9 @@ import { getColumnActions } from './column_actions';
import { EuiDataGridColumnResizer } from './data_grid_column_resizer';
import { EuiDataGridHeaderCellWrapper } from './data_grid_header_cell_wrapper';
-export const EuiDataGridHeaderCell: FunctionComponent = ({
+export const EuiDataGridHeaderCell: FunctionComponent<
+ EuiDataGridHeaderCellProps
+> = ({
column,
index,
columns,
@@ -57,9 +59,8 @@ export const EuiDataGridHeaderCell: FunctionComponent = ({
+export const EuiDataGridHeaderCellWrapper: FunctionComponent<
+ EuiDataGridHeaderCellWrapperProps
+> = ({
id,
index,
headerIsInteractive,
diff --git a/src/components/datagrid/controls/column_selector.tsx b/src/components/datagrid/controls/column_selector.tsx
index a4a46dc0fd1..0cbbbeaf823 100644
--- a/src/components/datagrid/controls/column_selector.tsx
+++ b/src/components/datagrid/controls/column_selector.tsx
@@ -63,9 +63,10 @@ export const useDataGridColumnSelector = (
);
const { visibleColumns, setVisibleColumns } = columnVisibility;
- const visibleColumnIds = useMemo(() => new Set(visibleColumns), [
- visibleColumns,
- ]);
+ const visibleColumnIds = useMemo(
+ () => new Set(visibleColumns),
+ [visibleColumns]
+ );
const [isOpen, setIsOpen] = useState(false);
@@ -232,14 +233,14 @@ export const useDataGridColumnSelector = (
const {
target: { checked },
} = event;
- const nextVisibleColumns = sortedColumns.filter(
- (columnId) =>
+ const nextVisibleColumns =
+ sortedColumns.filter((columnId) =>
checked
? visibleColumnIds.has(columnId) ||
id === columnId
: visibleColumnIds.has(columnId) &&
id !== columnId
- );
+ );
setVisibleColumns(nextVisibleColumns);
}}
data-test-subj={`dataGridColumnSelectorToggleColumnVisibility-${id}`}
diff --git a/src/components/datagrid/controls/column_sorting_draggable.tsx b/src/components/datagrid/controls/column_sorting_draggable.tsx
index 7af6732e0ca..a26b08b00c0 100644
--- a/src/components/datagrid/controls/column_sorting_draggable.tsx
+++ b/src/components/datagrid/controls/column_sorting_draggable.tsx
@@ -25,7 +25,9 @@ export const defaultSortDescLabel = (
);
-export const EuiDataGridColumnSortingDraggable: FunctionComponent = ({
+export const EuiDataGridColumnSortingDraggable: FunctionComponent<
+ EuiDataGridColumnSortingDraggableProps
+> = ({
id,
display,
direction,
diff --git a/src/components/datagrid/controls/display_selector.test.tsx b/src/components/datagrid/controls/display_selector.test.tsx
index 63ab77eb86d..5cf516684e2 100644
--- a/src/components/datagrid/controls/display_selector.test.tsx
+++ b/src/components/datagrid/controls/display_selector.test.tsx
@@ -41,10 +41,12 @@ describe('useDataGridDisplaySelector', () => {
};
const closePopover = (component: ReactWrapper) => {
act(() => {
- (component
- .find('[data-test-subj="dataGridDisplaySelectorPopover"]')
- .first()
- .prop('closePopover') as Function)();
+ (
+ component
+ .find('[data-test-subj="dataGridDisplaySelectorPopover"]')
+ .first()
+ .prop('closePopover') as Function
+ )();
});
};
@@ -461,10 +463,9 @@ describe('useDataGridDisplaySelector', () => {
);
};
const diveIntoEuiI18n = (component: ShallowWrapper) => {
- return (component
- .find('EuiI18n')
- .last()
- .renderProp('children') as Function)(['', '', '', '']);
+ return (
+ component.find('EuiI18n').last().renderProp('children') as Function
+ )(['', '', '', '']);
};
const setRowHeight = (component: ShallowWrapper, selection = '') => {
diveIntoEuiI18n(component)
diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
index 64e516f387f..8722e9ee77b 100644
--- a/src/components/datagrid/data_grid.test.tsx
+++ b/src/components/datagrid/data_grid.test.tsx
@@ -56,9 +56,9 @@ function extractGridData(datagrid: ReactWrapper) {
}
function extractRowHeights(datagrid: ReactWrapper) {
- return (findTestSubject(datagrid, 'dataGridRowCell') as ReactWrapper<
- any
- >).reduce((heights: { [key: string]: number }, cell) => {
+ return (
+ findTestSubject(datagrid, 'dataGridRowCell') as ReactWrapper
+ ).reduce((heights: { [key: string]: number }, cell) => {
const cellProps = cell.props();
const cellContentProps = cell
.find('[data-test-subj="cell-content"]')
@@ -69,9 +69,9 @@ function extractRowHeights(datagrid: ReactWrapper) {
}
function extractColumnWidths(datagrid: ReactWrapper) {
- return (findTestSubject(datagrid, 'dataGridHeaderCell', '|=') as ReactWrapper<
- any
- >).reduce((widths: { [key: string]: number }, cell) => {
+ return (
+ findTestSubject(datagrid, 'dataGridHeaderCell', '|=') as ReactWrapper
+ ).reduce((widths: { [key: string]: number }, cell) => {
const [, columnId] = cell
.props()
['data-test-subj'].match(/dataGridHeaderCell-(.*)/);
@@ -187,9 +187,11 @@ function getColumnSortDirection(
'label[className*="euiButtonGroupButton-isSelected"]'
);
- const sortDirection = (activeSort.props() as {
- 'data-test-subj': string;
- })['data-test-subj'].match(/(?[^-]+)$/)!.groups!.direction;
+ const sortDirection = (
+ activeSort.props() as {
+ 'data-test-subj': string;
+ }
+ )['data-test-subj'].match(/(?[^-]+)$/)!.groups!.direction;
return [columnSorter, sortDirection];
}
@@ -1049,8 +1051,8 @@ describe('EuiDataGrid', () => {
expect(component.props().pagination.onChangePage).toHaveBeenCalledTimes(
1
);
- const firstCallPageIndex = component.props().pagination.onChangePage
- .mock.calls[0][0];
+ const firstCallPageIndex =
+ component.props().pagination.onChangePage.mock.calls[0][0];
expect(firstCallPageIndex).toBe(1);
expect(extractGridData(component)).toEqual([
@@ -1065,8 +1067,8 @@ describe('EuiDataGrid', () => {
expect(component.props().pagination.onChangePage).toHaveBeenCalledTimes(
2
);
- const secondCallPageIndex = component.props().pagination.onChangePage
- .mock.calls[1][0];
+ const secondCallPageIndex =
+ component.props().pagination.onChangePage.mock.calls[1][0];
expect(secondCallPageIndex).toBe(2);
expect(extractGridData(component)).toEqual([['Column'], ['6'], ['7']]);
@@ -1111,8 +1113,8 @@ describe('EuiDataGrid', () => {
expect(component.props().pagination.onChangePage).toHaveBeenCalledTimes(
1
);
- const firstCallPageIndex = component.props().pagination.onChangePage
- .mock.calls[0][0];
+ const firstCallPageIndex =
+ component.props().pagination.onChangePage.mock.calls[0][0];
expect(firstCallPageIndex).toBe(2);
expect(extractGridData(component)).toEqual([['Column'], ['6'], ['7']]);
@@ -1123,8 +1125,8 @@ describe('EuiDataGrid', () => {
expect(component.props().pagination.onChangePage).toHaveBeenCalledTimes(
2
);
- const secondCallPageIndex = component.props().pagination.onChangePage
- .mock.calls[1][0];
+ const secondCallPageIndex =
+ component.props().pagination.onChangePage.mock.calls[1][0];
expect(secondCallPageIndex).toBe(1);
expect(extractGridData(component)).toEqual([
@@ -1172,9 +1174,8 @@ describe('EuiDataGrid', () => {
findTestSubject(component, 'tablePaginationPopoverButton').simulate(
'click'
);
- const rowButtons: NodeListOf = document.body.querySelectorAll(
- '.euiContextMenuItem'
- );
+ const rowButtons: NodeListOf =
+ document.body.querySelectorAll('.euiContextMenuItem');
expect(
Array.prototype.map.call(
rowButtons,
@@ -1186,8 +1187,8 @@ describe('EuiDataGrid', () => {
expect(
component.props().pagination.onChangeItemsPerPage
).toHaveBeenCalledTimes(1);
- const firstCallPageIndex = component.props().pagination
- .onChangeItemsPerPage.mock.calls[0][0];
+ const firstCallPageIndex =
+ component.props().pagination.onChangeItemsPerPage.mock.calls[0][0];
expect(firstCallPageIndex).toBe(6);
expect(extractGridData(component)).toEqual([
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index 912eee7223f..9a62eae3ffd 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -191,18 +191,15 @@ export const EuiDataGrid = forwardRef(
);
}, [columns]);
- const [
- displaySelector,
- gridStyles,
- rowHeightsOptions,
- ] = useDataGridDisplaySelector(
- checkOrDefaultToolBarDisplayOptions(
- toolbarVisibility,
- 'showDisplaySelector'
- ),
- gridStyleWithDefaults,
- _rowHeightsOptions
- );
+ const [displaySelector, gridStyles, rowHeightsOptions] =
+ useDataGridDisplaySelector(
+ checkOrDefaultToolBarDisplayOptions(
+ toolbarVisibility,
+ 'showDisplaySelector'
+ ),
+ gridStyleWithDefaults,
+ _rowHeightsOptions
+ );
/**
* Column order & visibility
@@ -259,10 +256,8 @@ export const EuiDataGrid = forwardRef(
/**
* Focus
*/
- const {
- headerIsInteractive,
- handleHeaderMutation,
- } = useHeaderIsInteractive(contentRef.current);
+ const { headerIsInteractive, handleHeaderMutation } =
+ useHeaderIsInteractive(contentRef.current);
const { focusProps: wrappingDivFocusProps, ...focusContext } = useFocus({
headerIsInteractive,
gridItemsRendered,
diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
index 0d36769c2b1..3d17c777638 100644
--- a/src/components/datagrid/data_grid_types.ts
+++ b/src/components/datagrid/data_grid_types.ts
@@ -453,9 +453,10 @@ export interface EuiDataGridCustomBodyProps {
* that `EuiDataGridCell` accepts, such as `isExpandable` or `renderCellValue`.
*/
Cell: JSXElementConstructor<
- { colIndex: number; visibleRowIndex: number } & Partial<
- EuiDataGridCellProps
- >
+ {
+ colIndex: number;
+ visibleRowIndex: number;
+ } & Partial
>;
/**
* The currently visible columns are passed to your data grid renderer so that your
diff --git a/src/components/datagrid/utils/__mocks__/row_heights.ts b/src/components/datagrid/utils/__mocks__/row_heights.ts
index 7b19672dcf5..0528c89d2cb 100644
--- a/src/components/datagrid/utils/__mocks__/row_heights.ts
+++ b/src/components/datagrid/utils/__mocks__/row_heights.ts
@@ -43,5 +43,5 @@ export const RowHeightUtils = jest.fn().mockImplementation(() => {
compensateForLayoutShift: jest.fn(),
};
- return (rowHeightUtilsMock as unknown) as RowHeightUtilsType;
+ return rowHeightUtilsMock as unknown as RowHeightUtilsType;
});
diff --git a/src/components/datagrid/utils/col_widths.test.ts b/src/components/datagrid/utils/col_widths.test.ts
index c3ebc8d98c6..2ddbf97e843 100644
--- a/src/components/datagrid/utils/col_widths.test.ts
+++ b/src/components/datagrid/utils/col_widths.test.ts
@@ -99,9 +99,8 @@ describe('useColumnWidths', () => {
});
it('recomputes column widths on columns change', () => {
- const { updateHookArgs, getUpdatedState } = testCustomHook<
- ReturnedValues
- >(useColumnWidths, args);
+ const { updateHookArgs, getUpdatedState } =
+ testCustomHook(useColumnWidths, args);
updateHookArgs({
columns: [{ id: 'c', initialWidth: 125 }],
diff --git a/src/components/datagrid/utils/col_widths.ts b/src/components/datagrid/utils/col_widths.ts
index 30fc4b64255..a71f9f574db 100644
--- a/src/components/datagrid/utils/col_widths.ts
+++ b/src/components/datagrid/utils/col_widths.ts
@@ -88,9 +88,8 @@ export const useColumnWidths = ({
}, {});
}, [columns]);
- const [columnWidths, setColumnWidths] = useState(
- computeColumnWidths
- );
+ const [columnWidths, setColumnWidths] =
+ useState(computeColumnWidths);
useUpdateEffect(() => {
setColumnWidths(computeColumnWidths());
diff --git a/src/components/datagrid/utils/focus.ts b/src/components/datagrid/utils/focus.ts
index 80d9e177493..d896efff152 100644
--- a/src/components/datagrid/utils/focus.ts
+++ b/src/components/datagrid/utils/focus.ts
@@ -105,10 +105,8 @@ export const useFocus = ({
// The header (rowIndex -1) is sticky and will always be in view
setFocusedCell([0, -1]);
} else if (gridItemsRendered.current) {
- const {
- visibleColumnStartIndex,
- visibleRowStartIndex,
- } = gridItemsRendered.current;
+ const { visibleColumnStartIndex, visibleRowStartIndex } =
+ gridItemsRendered.current;
setFocusedCell([visibleColumnStartIndex, visibleRowStartIndex]);
} else {
diff --git a/src/components/datagrid/utils/in_memory.tsx b/src/components/datagrid/utils/in_memory.tsx
index fdf50cdc40a..8903913eaff 100644
--- a/src/components/datagrid/utils/in_memory.tsx
+++ b/src/components/datagrid/utils/in_memory.tsx
@@ -47,10 +47,10 @@ export const useInMemoryValues = (
const _inMemoryValues = useRef({});
const [inMemoryValuesVersion, setInMemoryValuesVersion] = useState(0);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- const inMemoryValues = useMemo(() => ({ ..._inMemoryValues.current }), [
- inMemoryValuesVersion,
- ]);
+ const inMemoryValues = useMemo(
+ () => ({ ..._inMemoryValues.current }),
+ [inMemoryValuesVersion] // eslint-disable-line react-hooks/exhaustive-deps
+ );
const onCellRender = useCallback((rowIndex, columnId, value) => {
const nextInMemoryValues = _inMemoryValues.current;
@@ -83,19 +83,14 @@ export const useInMemoryValues = (
/**
* InMemory renderer
*/
-export const EuiDataGridInMemoryRenderer: FunctionComponent = ({
- inMemory,
- columns,
- rowCount,
- renderCellValue,
- onCellRender,
-}) => {
+export const EuiDataGridInMemoryRenderer: FunctionComponent<
+ EuiDataGridInMemoryRendererProps
+> = ({ inMemory, columns, rowCount, renderCellValue, onCellRender }) => {
const [documentFragment] = useState(() => document.createDocumentFragment());
const cells = useMemo(() => {
- const CellElement = renderCellValue as JSXElementConstructor<
- EuiDataGridCellValueElementProps
- >;
+ const CellElement =
+ renderCellValue as JSXElementConstructor;
const cells = [];
@@ -193,7 +188,7 @@ export const EuiDataGridInMemoryRenderer: FunctionComponent
{(ref) => {cells}
}
,
- (documentFragment as unknown) as Element
+ documentFragment as unknown as Element
);
};
diff --git a/src/components/datagrid/utils/ref.ts b/src/components/datagrid/utils/ref.ts
index f3e2409651c..bbf5099120b 100644
--- a/src/components/datagrid/utils/ref.ts
+++ b/src/components/datagrid/utils/ref.ts
@@ -60,10 +60,8 @@ export const useImperativeGridRef = ({
);
// Popover APIs
- const {
- openCellPopover: _openCellPopover,
- closeCellPopover,
- } = cellPopoverContext;
+ const { openCellPopover: _openCellPopover, closeCellPopover } =
+ cellPopoverContext;
// When we pass this API to the consumer, we can't know for sure that
// the targeted cell is valid or in view (unlike our internal state, where
diff --git a/src/components/datagrid/utils/row_heights.ts b/src/components/datagrid/utils/row_heights.ts
index 8a4271cf077..3aed6933c4b 100644
--- a/src/components/datagrid/utils/row_heights.ts
+++ b/src/components/datagrid/utils/row_heights.ts
@@ -360,11 +360,8 @@ export const useRowHeightUtils = ({
const forceRenderRef = useLatest(useForceRender());
const [rowHeightUtils] = useState(() => {
if (virtualization) {
- const {
- gridRef,
- outerGridElementRef,
- gridItemsRenderedRef,
- } = virtualization;
+ const { gridRef, outerGridElementRef, gridItemsRenderedRef } =
+ virtualization;
return new RowHeightVirtualizationUtils(
gridRef,
outerGridElementRef,
diff --git a/src/components/datagrid/utils/sorting.ts b/src/components/datagrid/utils/sorting.ts
index 59a9d11fce7..c697b30045c 100644
--- a/src/components/datagrid/utils/sorting.ts
+++ b/src/components/datagrid/utils/sorting.ts
@@ -17,13 +17,12 @@ import {
} from '../data_grid_types';
import { defaultComparator } from './data_grid_schema';
-export const DataGridSortingContext = createContext<
- DataGridSortingContextShape
->({
- sorting: undefined,
- sortedRowMap: [],
- getCorrectRowIndex: (number) => number,
-});
+export const DataGridSortingContext =
+ createContext({
+ sorting: undefined,
+ sortedRowMap: [],
+ getCorrectRowIndex: (number) => number,
+ });
export const useSorting = ({
sorting,
diff --git a/src/components/date_picker/auto_refresh/auto_refresh.tsx b/src/components/date_picker/auto_refresh/auto_refresh.tsx
index 807b50a32fc..47f5cd96f60 100644
--- a/src/components/date_picker/auto_refresh/auto_refresh.tsx
+++ b/src/components/date_picker/auto_refresh/auto_refresh.tsx
@@ -102,7 +102,9 @@ export type EuiAutoRefreshButtonProps = EuiAutoRefreshSharedProps & {
'isSelected' | 'iconType' | 'iconSide' | 'iconSize' | 'onClick' | 'type'
>;
-export const EuiAutoRefreshButton: FunctionComponent = ({
+export const EuiAutoRefreshButton: FunctionComponent<
+ EuiAutoRefreshButtonProps
+> = ({
className,
onRefreshChange,
isDisabled,
diff --git a/src/components/date_picker/date_picker.tsx b/src/components/date_picker/date_picker.tsx
index d141e1e925c..38c7ab79633 100644
--- a/src/components/date_picker/date_picker.tsx
+++ b/src/components/date_picker/date_picker.tsx
@@ -61,7 +61,7 @@ const unsupportedProps = [
'popperPlacement',
] as const;
-type UnsupportedProps = typeof unsupportedProps[number];
+type UnsupportedProps = (typeof unsupportedProps)[number];
interface EuiExtendedDatePickerProps
extends Omit {
diff --git a/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx b/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx
index 9bb4b1e1b5d..be56c08e08c 100644
--- a/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx
+++ b/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx
@@ -93,13 +93,8 @@ export class EuiAbsoluteTab extends Component<
};
render() {
- const {
- dateFormat,
- timeFormat,
- locale,
- utcOffset,
- labelPrefix,
- } = this.props;
+ const { dateFormat, timeFormat, locale, utcOffset, labelPrefix } =
+ this.props;
const { valueAsMoment, isTextInvalid, textInputValue } = this.state;
return (
diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx
index 27fc5dcdee5..5122482e826 100644
--- a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx
+++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx
@@ -46,9 +46,9 @@ export interface EuiDatePopoverButtonProps {
timeOptions: TimeOptions;
}
-export const EuiDatePopoverButton: FunctionComponent = (
- props
-) => {
+export const EuiDatePopoverButton: FunctionComponent<
+ EuiDatePopoverButtonProps
+> = (props) => {
const {
position,
isDisabled,
diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx
index 422b4d06b49..98dfb45f5de 100644
--- a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx
+++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx
@@ -37,7 +37,9 @@ export interface EuiDatePopoverContentProps {
timeOptions: TimeOptions;
}
-export const EuiDatePopoverContent: FunctionComponent = ({
+export const EuiDatePopoverContent: FunctionComponent<
+ EuiDatePopoverContentProps
+> = ({
value,
roundUp = false,
onChange,
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx
index dd152aca945..7d12ceaaef5 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx
@@ -19,10 +19,9 @@ export interface EuiCommonlyUsedTimeRangesProps {
commonlyUsedRanges: DurationRange[];
}
-export const EuiCommonlyUsedTimeRanges: FunctionComponent = ({
- applyTime,
- commonlyUsedRanges,
-}) => {
+export const EuiCommonlyUsedTimeRanges: FunctionComponent<
+ EuiCommonlyUsedTimeRangesProps
+> = ({ applyTime, commonlyUsedRanges }) => {
const legendId = useGeneratedHtmlId();
const links = commonlyUsedRanges.map(({ start, end, label }) => {
const applyCommonlyUsed = () => {
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx
index df9c52132f7..565dbc71e95 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx
@@ -61,10 +61,9 @@ export interface EuiQuickSelectPopoverProps {
timeOptions: TimeOptions;
}
-export const EuiQuickSelectPopover: FunctionComponent = ({
- applyTime: _applyTime,
- ...props
-}) => {
+export const EuiQuickSelectPopover: FunctionComponent<
+ EuiQuickSelectPopoverProps
+> = ({ applyTime: _applyTime, ...props }) => {
const [prevQuickSelect, setQuickSelect] = useState();
const [isOpen, setIsOpen] = useState(false);
const closePopover = useCallback(() => setIsOpen(false), []);
diff --git a/src/components/date_picker/super_date_picker/super_date_picker.test.tsx b/src/components/date_picker/super_date_picker/super_date_picker.test.tsx
index d1cb489f6d3..76046c6f8f6 100644
--- a/src/components/date_picker/super_date_picker/super_date_picker.test.tsx
+++ b/src/components/date_picker/super_date_picker/super_date_picker.test.tsx
@@ -76,20 +76,16 @@ describe('EuiSuperDatePicker', () => {
// If we update the prop `isPaused` we expect the interval to be stopped too.
component.setProps({ isPaused: true });
- const [
- instanceUpdatedPaused,
- componentUpdatedPaused,
- ] = findInternalInstance(component);
+ const [instanceUpdatedPaused, componentUpdatedPaused] =
+ findInternalInstance(component);
expect(typeof instanceUpdatedPaused.asyncInterval).toBe('object');
expect(instanceUpdatedPaused.asyncInterval!.isStopped).toBe(true);
expect(componentUpdatedPaused.prop('isPaused')).toBe(true);
// Let's start refresh again for a final sanity check.
component.setProps({ isPaused: false });
- const [
- instanceUpdatedRefresh,
- componentUpdatedRefresh,
- ] = findInternalInstance(component);
+ const [instanceUpdatedRefresh, componentUpdatedRefresh] =
+ findInternalInstance(component);
expect(typeof instanceUpdatedRefresh.asyncInterval).toBe('object');
expect(instanceUpdatedRefresh.asyncInterval!.isStopped).toBe(false);
expect(componentUpdatedRefresh.prop('isPaused')).toBe(false);
diff --git a/src/components/date_picker/super_date_picker/super_update_button.tsx b/src/components/date_picker/super_date_picker/super_update_button.tsx
index c100e6e617b..dab442fe5ee 100644
--- a/src/components/date_picker/super_date_picker/super_update_button.tsx
+++ b/src/components/date_picker/super_date_picker/super_update_button.tsx
@@ -78,9 +78,9 @@ export class EuiSuperUpdateButton extends Component<
!this.props.isLoading
) {
this.showTooltip();
- this.tooltipTimeout = (setTimeout(() => {
+ this.tooltipTimeout = setTimeout(() => {
this.hideTooltip();
- }, 2000) as unknown) as number | undefined;
+ }, 2000) as unknown as number | undefined;
}
}
diff --git a/src/components/description_list/description_list_context.tsx b/src/components/description_list/description_list_context.tsx
index 434330898d2..5b8d3636373 100644
--- a/src/components/description_list/description_list_context.tsx
+++ b/src/components/description_list/description_list_context.tsx
@@ -20,6 +20,5 @@ export const contextDefaults: EuiDescriptionListContextValues = {
gutterSize: 'm',
};
-export const EuiDescriptionListContext = createContext<
- EuiDescriptionListContextValues
->(contextDefaults);
+export const EuiDescriptionListContext =
+ createContext(contextDefaults);
diff --git a/src/components/description_list/description_list_description.tsx b/src/components/description_list/description_list_description.tsx
index 2d34d394a8b..af815ac83f1 100644
--- a/src/components/description_list/description_list_description.tsx
+++ b/src/components/description_list/description_list_description.tsx
@@ -18,11 +18,9 @@ export interface EuiDescriptionListDescriptionProps
extends CommonProps,
HTMLAttributes {}
-export const EuiDescriptionListDescription: FunctionComponent = ({
- children,
- className,
- ...rest
-}) => {
+export const EuiDescriptionListDescription: FunctionComponent<
+ EuiDescriptionListDescriptionProps
+> = ({ children, className, ...rest }) => {
const { type, textStyle, compressed, align, gutterSize } = useContext(
EuiDescriptionListContext
);
diff --git a/src/components/description_list/description_list_title.tsx b/src/components/description_list/description_list_title.tsx
index 3924eecf573..9c557ea99ab 100644
--- a/src/components/description_list/description_list_title.tsx
+++ b/src/components/description_list/description_list_title.tsx
@@ -18,11 +18,9 @@ export interface EuiDescriptionListTitleProps
extends CommonProps,
HTMLAttributes {}
-export const EuiDescriptionListTitle: FunctionComponent = ({
- children,
- className,
- ...rest
-}) => {
+export const EuiDescriptionListTitle: FunctionComponent<
+ EuiDescriptionListTitleProps
+> = ({ children, className, ...rest }) => {
const { type, textStyle, compressed, align, gutterSize } = useContext(
EuiDescriptionListContext
);
diff --git a/src/components/description_list/description_list_types.ts b/src/components/description_list/description_list_types.ts
index 535971b24b8..3a196919c23 100644
--- a/src/components/description_list/description_list_types.ts
+++ b/src/components/description_list/description_list_types.ts
@@ -46,13 +46,13 @@ export interface EuiDescriptionListProps {
}
export const TYPES = ['row', 'inline', 'column', 'responsiveColumn'] as const;
-export type EuiDescriptionListType = typeof TYPES[number];
+export type EuiDescriptionListType = (typeof TYPES)[number];
export const ALIGNMENTS = ['center', 'left'] as const;
-export type EuiDescriptionListAlignment = typeof ALIGNMENTS[number];
+export type EuiDescriptionListAlignment = (typeof ALIGNMENTS)[number];
export const TEXT_STYLES = ['normal', 'reverse'] as const;
-export type EuiDescriptionListTextStyle = typeof TEXT_STYLES[number];
+export type EuiDescriptionListTextStyle = (typeof TEXT_STYLES)[number];
export const GUTTER_SIZES = ['s', 'm'] as const;
-export type EuiDescriptionListGutterSizes = typeof GUTTER_SIZES[number];
+export type EuiDescriptionListGutterSizes = (typeof GUTTER_SIZES)[number];
diff --git a/src/components/empty_prompt/empty_prompt.tsx b/src/components/empty_prompt/empty_prompt.tsx
index 965fa43c2a8..455da694045 100644
--- a/src/components/empty_prompt/empty_prompt.tsx
+++ b/src/components/empty_prompt/empty_prompt.tsx
@@ -27,7 +27,7 @@ const paddingSizeToClassNameMap = {
export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
-export type PaddingSize = typeof PADDING_SIZES[number];
+export type PaddingSize = (typeof PADDING_SIZES)[number];
export type EuiEmptyPromptProps = CommonProps &
Omit<
diff --git a/src/components/expression/expression.tsx b/src/components/expression/expression.tsx
index 61db07c733b..796c2fab912 100644
--- a/src/components/expression/expression.tsx
+++ b/src/components/expression/expression.tsx
@@ -34,7 +34,7 @@ export const COLORS = [
'danger',
] as const;
-export type ExpressionColor = typeof COLORS[number];
+export type ExpressionColor = (typeof COLORS)[number];
export type EuiExpressionProps = CommonProps & {
/**
@@ -92,10 +92,9 @@ type Buttonlike = EuiExpressionProps &
type Spanlike = EuiExpressionProps &
Omit, 'value'>;
-export const EuiExpression: FunctionComponent> = ({
+export const EuiExpression: FunctionComponent<
+ ExclusiveUnion
+> = ({
className,
description,
descriptionProps,
diff --git a/src/components/facet/facet_group.tsx b/src/components/facet/facet_group.tsx
index ba1b1052e5e..5fc33057574 100644
--- a/src/components/facet/facet_group.tsx
+++ b/src/components/facet/facet_group.tsx
@@ -15,10 +15,10 @@ import { useEuiTheme } from '../../services';
import { euiFacetGroupStyles } from './facet_group.styles';
export const LAYOUTS = ['vertical', 'horizontal'] as const;
-export type EuiFacetGroupLayout = typeof LAYOUTS[number];
+export type EuiFacetGroupLayout = (typeof LAYOUTS)[number];
export const GUTTER_SIZES = ['none', 's', 'm', 'l'] as const;
-export type EuiFacetGroupGutterSizes = typeof GUTTER_SIZES[number];
+export type EuiFacetGroupGutterSizes = (typeof GUTTER_SIZES)[number];
export type EuiFacetGroupProps = CommonProps &
HTMLAttributes & {
diff --git a/src/components/flex/flex_grid.tsx b/src/components/flex/flex_grid.tsx
index 00576c47437..dff529e33e2 100644
--- a/src/components/flex/flex_grid.tsx
+++ b/src/components/flex/flex_grid.tsx
@@ -19,7 +19,7 @@ import { useEuiTheme } from '../../services';
import { euiFlexGridStyles } from './flex_grid.styles';
export const DIRECTIONS = ['row', 'column'] as const;
-export type FlexGridDirection = typeof DIRECTIONS[number];
+export type FlexGridDirection = (typeof DIRECTIONS)[number];
export const ALIGN_ITEMS = [
'stretch',
@@ -28,10 +28,10 @@ export const ALIGN_ITEMS = [
'center',
'baseline',
] as const;
-export type FlexGridAlignItems = typeof ALIGN_ITEMS[number];
+export type FlexGridAlignItems = (typeof ALIGN_ITEMS)[number];
export const GUTTER_SIZES = ['none', 's', 'm', 'l', 'xl'] as const;
-export type FlexGridGutterSize = typeof GUTTER_SIZES[number];
+export type FlexGridGutterSize = (typeof GUTTER_SIZES)[number];
export interface EuiFlexGridProps {
/**
diff --git a/src/components/flex/flex_group.tsx b/src/components/flex/flex_group.tsx
index 7c450f4fae2..52297610f5b 100644
--- a/src/components/flex/flex_group.tsx
+++ b/src/components/flex/flex_group.tsx
@@ -14,7 +14,7 @@ import { useEuiTheme } from '../../services';
import { euiFlexGroupStyles } from './flex_group.styles';
export const GUTTER_SIZES = ['none', 'xs', 's', 'm', 'l', 'xl'] as const;
-export type EuiFlexGroupGutterSize = typeof GUTTER_SIZES[number];
+export type EuiFlexGroupGutterSize = (typeof GUTTER_SIZES)[number];
export const ALIGN_ITEMS = [
'stretch',
@@ -23,7 +23,7 @@ export const ALIGN_ITEMS = [
'center',
'baseline',
] as const;
-export type FlexGroupAlignItems = typeof ALIGN_ITEMS[number];
+export type FlexGroupAlignItems = (typeof ALIGN_ITEMS)[number];
export const JUSTIFY_CONTENTS = [
'flexStart',
@@ -33,7 +33,7 @@ export const JUSTIFY_CONTENTS = [
'spaceAround',
'spaceEvenly',
] as const;
-type FlexGroupJustifyContent = typeof JUSTIFY_CONTENTS[number];
+type FlexGroupJustifyContent = (typeof JUSTIFY_CONTENTS)[number];
export const DIRECTIONS = [
'row',
@@ -41,7 +41,7 @@ export const DIRECTIONS = [
'column',
'columnReverse',
] as const;
-type FlexGroupDirection = typeof DIRECTIONS[number];
+type FlexGroupDirection = (typeof DIRECTIONS)[number];
type FlexGroupComponentType = 'div' | 'span';
const isValidElement = (
diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
index af06a2cea3d..3955079b7a9 100644
--- a/src/components/flyout/flyout.tsx
+++ b/src/components/flyout/flyout.tsx
@@ -43,13 +43,13 @@ import { EuiScreenReaderOnly } from '../accessibility';
import { euiFlyoutStyles, euiFlyoutCloseButtonStyles } from './flyout.styles';
export const TYPES = ['push', 'overlay'] as const;
-type _EuiFlyoutType = typeof TYPES[number];
+type _EuiFlyoutType = (typeof TYPES)[number];
export const SIDES = ['left', 'right'] as const;
-type _EuiFlyoutSide = typeof SIDES[number];
+type _EuiFlyoutSide = (typeof SIDES)[number];
export const SIZES = ['s', 'm', 'l'] as const;
-export type EuiFlyoutSize = typeof SIZES[number];
+export type EuiFlyoutSize = (typeof SIZES)[number];
/**
* Custom type checker for named flyout sizes since the prop
@@ -60,7 +60,7 @@ function isEuiFlyoutSizeNamed(value: any): value is EuiFlyoutSize {
}
export const PADDING_SIZES = ['none', 's', 'm', 'l'] as const;
-export type _EuiFlyoutPaddingSize = typeof PADDING_SIZES[number];
+export type _EuiFlyoutPaddingSize = (typeof PADDING_SIZES)[number];
interface _EuiFlyoutProps {
onClose: (event: MouseEvent | TouchEvent | KeyboardEvent) => void;
@@ -158,9 +158,8 @@ type Props = CommonProps & {
} & _EuiFlyoutProps &
Omit, keyof _EuiFlyoutProps>;
-export type EuiFlyoutProps<
- T extends ElementType = typeof defaultElement
-> = Props & Omit, keyof Props>;
+export type EuiFlyoutProps =
+ Props & Omit, keyof Props>;
export const EuiFlyout = forwardRef(
(
@@ -194,9 +193,8 @@ export const EuiFlyout = forwardRef(
const Element = as || defaultElement;
const maskRef = useRef(null);
- const windowIsLargeEnoughToPush = useIsWithinMinBreakpoint(
- pushMinBreakpoint
- );
+ const windowIsLargeEnoughToPush =
+ useIsWithinMinBreakpoint(pushMinBreakpoint);
const isPushed = type === 'push' && windowIsLargeEnoughToPush;
/**
diff --git a/src/components/focus_trap/focus_trap.test.tsx b/src/components/focus_trap/focus_trap.test.tsx
index 988d9e96125..8de7f717d3e 100644
--- a/src/components/focus_trap/focus_trap.test.tsx
+++ b/src/components/focus_trap/focus_trap.test.tsx
@@ -117,7 +117,9 @@ describe('EuiFocusTrap', () => {
e: React.MouseEvent
) => {
const event = new Event('mousedown') as EuiEvent;
- event.euiGeneratedBy = ((e.nativeEvent as unknown) as EuiEvent).euiGeneratedBy;
+ event.euiGeneratedBy = (
+ e.nativeEvent as unknown as EuiEvent
+ ).euiGeneratedBy;
document.dispatchEvent(event);
};
@@ -125,7 +127,9 @@ describe('EuiFocusTrap', () => {
e: React.MouseEvent
) => {
const event = new Event('mousedown') as EuiEvent;
- event.euiGeneratedBy = ((e.nativeEvent as unknown) as EuiEvent).euiGeneratedBy;
+ event.euiGeneratedBy = (
+ e.nativeEvent as unknown as EuiEvent
+ ).euiGeneratedBy;
document.dispatchEvent(event);
};
diff --git a/src/components/form/described_form_group/described_form_group.tsx b/src/components/form/described_form_group/described_form_group.tsx
index 5546587adc4..a1339e4663c 100644
--- a/src/components/form/described_form_group/described_form_group.tsx
+++ b/src/components/form/described_form_group/described_form_group.tsx
@@ -70,9 +70,9 @@ export type EuiDescribedFormGroupProps = CommonProps &
fieldFlexItemProps?: PropsOf;
};
-export const EuiDescribedFormGroup: FunctionComponent = (
- props
-) => {
+export const EuiDescribedFormGroup: FunctionComponent<
+ EuiDescribedFormGroupProps
+> = (props) => {
const { defaultFullWidth } = useFormContext();
const {
diff --git a/src/components/form/form_control_layout/form_control_layout_clear_button.tsx b/src/components/form/form_control_layout/form_control_layout_clear_button.tsx
index 0380ff17102..9d128ffde21 100644
--- a/src/components/form/form_control_layout/form_control_layout_clear_button.tsx
+++ b/src/components/form/form_control_layout/form_control_layout_clear_button.tsx
@@ -22,15 +22,12 @@ export const SIZES = keysOf(sizeToClassNameMap);
export type EuiFormControlLayoutClearButtonProps = CommonProps &
ButtonHTMLAttributes & {
- size?: typeof SIZES[number];
+ size?: (typeof SIZES)[number];
};
-export const EuiFormControlLayoutClearButton: FunctionComponent = ({
- className,
- onClick,
- size = 'm',
- ...rest
-}) => {
+export const EuiFormControlLayoutClearButton: FunctionComponent<
+ EuiFormControlLayoutClearButtonProps
+> = ({ className, onClick, size = 'm', ...rest }) => {
const classes = classNames(
'euiFormControlLayoutClearButton',
sizeToClassNameMap[size],
diff --git a/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx b/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx
index 227c2334822..7440ccd14d5 100644
--- a/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx
+++ b/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx
@@ -28,15 +28,9 @@ export type EuiFormControlLayoutCustomIconProps = CommonProps &
| ((el: HTMLButtonElement | HTMLSpanElement | null) => void);
};
-export const EuiFormControlLayoutCustomIcon: FunctionComponent = ({
- className,
- onClick,
- type,
- iconRef,
- size,
- color,
- ...rest
-}) => {
+export const EuiFormControlLayoutCustomIcon: FunctionComponent<
+ EuiFormControlLayoutCustomIconProps
+> = ({ className, onClick, type, iconRef, size, color, ...rest }) => {
const classes = classNames('euiFormControlLayoutCustomIcon', className, {
'euiFormControlLayoutCustomIcon--clickable': onClick,
});
diff --git a/src/components/form/form_control_layout/form_control_layout_delimited.tsx b/src/components/form/form_control_layout/form_control_layout_delimited.tsx
index 8f0199eeddc..f6c5919976c 100644
--- a/src/components/form/form_control_layout/form_control_layout_delimited.tsx
+++ b/src/components/form/form_control_layout/form_control_layout_delimited.tsx
@@ -23,32 +23,27 @@ import {
EuiFormControlLayoutProps,
} from './form_control_layout';
-export type EuiFormControlLayoutDelimitedProps = Partial<
- EuiFormControlLayoutProps
-> & {
- /**
- * Left side control
- */
- startControl: ReactElement;
- /**
- * Right side control
- */
- endControl: ReactElement;
- /**
- * The center content. Accepts a string to be wrapped in a subdued EuiText
- * or a single ReactElement
- */
- delimiter?: ReactNode;
- className?: string;
-};
+export type EuiFormControlLayoutDelimitedProps =
+ Partial & {
+ /**
+ * Left side control
+ */
+ startControl: ReactElement;
+ /**
+ * Right side control
+ */
+ endControl: ReactElement;
+ /**
+ * The center content. Accepts a string to be wrapped in a subdued EuiText
+ * or a single ReactElement
+ */
+ delimiter?: ReactNode;
+ className?: string;
+ };
-export const EuiFormControlLayoutDelimited: FunctionComponent = ({
- startControl,
- endControl,
- delimiter,
- className,
- ...rest
-}) => {
+export const EuiFormControlLayoutDelimited: FunctionComponent<
+ EuiFormControlLayoutDelimitedProps
+> = ({ startControl, endControl, delimiter, className, ...rest }) => {
const { isInvalid, isDisabled, readOnly } = rest;
const showInvalidState = isInvalid && !isDisabled && !readOnly;
diff --git a/src/components/form/form_control_layout/form_control_layout_icons.tsx b/src/components/form/form_control_layout/form_control_layout_icons.tsx
index 80d199802f5..e8d23bd2fc3 100644
--- a/src/components/form/form_control_layout/form_control_layout_icons.tsx
+++ b/src/components/form/form_control_layout/form_control_layout_icons.tsx
@@ -28,7 +28,7 @@ export type IconShape = DistributiveOmit<
'type' | 'iconRef'
> & {
type: IconType;
- side?: typeof ICON_SIDES[number];
+ side?: (typeof ICON_SIDES)[number];
color?: IconColor;
ref?: EuiFormControlLayoutCustomIconProps['iconRef'];
};
@@ -41,7 +41,7 @@ function isIconShape(
export interface EuiFormControlLayoutIconsProps {
icon?: IconType | IconShape;
- side?: typeof ICON_SIDES[number];
+ side?: (typeof ICON_SIDES)[number];
iconsPosition?: 'absolute' | 'static';
clear?: EuiFormControlLayoutClearButtonProps;
isLoading?: boolean;
@@ -50,9 +50,7 @@ export interface EuiFormControlLayoutIconsProps {
compressed?: boolean;
}
-export class EuiFormControlLayoutIcons extends Component<
- EuiFormControlLayoutIconsProps
-> {
+export class EuiFormControlLayoutIcons extends Component {
render() {
const { side = 'left', iconsPosition = 'absolute' } = this.props;
diff --git a/src/components/form/range/range_input.tsx b/src/components/form/range/range_input.tsx
index ad3d41271d2..e0bed7c5495 100644
--- a/src/components/form/range/range_input.tsx
+++ b/src/components/form/range/range_input.tsx
@@ -70,9 +70,8 @@ export const EuiRangeInput: FunctionComponent = ({
const inputCharWidth = Math.min(String(value).length, maxChars);
// Calculate the form padding based on `compressed` state
- const { controlPadding, controlCompressedPadding } = euiFormVariables(
- euiTheme
- );
+ const { controlPadding, controlCompressedPadding } =
+ euiFormVariables(euiTheme);
const inputPadding = compressed ? controlCompressedPadding : controlPadding;
// Calculate the invalid icon (if being displayed), also based on `compressed` state
diff --git a/src/components/form/range/range_levels_colors.ts b/src/components/form/range/range_levels_colors.ts
index 3de042969e4..49a5cdd6485 100644
--- a/src/components/form/range/range_levels_colors.ts
+++ b/src/components/form/range/range_levels_colors.ts
@@ -16,7 +16,7 @@ export const LEVEL_COLORS = [
'warning',
'danger',
] as const;
-export type EuiRangeLevelColor = typeof LEVEL_COLORS[number];
+export type EuiRangeLevelColor = (typeof LEVEL_COLORS)[number];
export const isNamedLevelColor = (color?: EuiRangeLevelColor | string) =>
LEVEL_COLORS.includes(color as EuiRangeLevelColor);
diff --git a/src/components/form/switch/switch.tsx b/src/components/form/switch/switch.tsx
index 063993bccf3..27a0a54303f 100644
--- a/src/components/form/switch/switch.tsx
+++ b/src/components/form/switch/switch.tsx
@@ -75,7 +75,7 @@ export const EuiSwitch: FunctionComponent = ({
return;
}
- const event = (e as unknown) as EuiSwitchEvent;
+ const event = e as unknown as EuiSwitchEvent;
event.target.checked = !checked;
onChange(event);
},
diff --git a/src/components/header/header_links/header_links.tsx b/src/components/header/header_links/header_links.tsx
index 131692185c5..69fc3ed999c 100644
--- a/src/components/header/header_links/header_links.tsx
+++ b/src/components/header/header_links/header_links.tsx
@@ -28,11 +28,10 @@ import { EuiBreakpointSize } from '../../../services/breakpoint';
import { EuiHideFor, EuiShowFor } from '../../responsive';
type EuiHeaderLinksGutterSize = 'xs' | 's' | 'm' | 'l';
-type EuiHeaderLinksPopoverButtonProps = Partial<
- EuiHeaderSectionItemButtonProps
-> & {
- iconType?: IconType;
-};
+type EuiHeaderLinksPopoverButtonProps =
+ Partial & {
+ iconType?: IconType;
+ };
export type EuiHeaderLinksProps = CommonProps &
HTMLAttributes & {
@@ -74,8 +73,11 @@ export const EuiHeaderLinks: FunctionComponent = ({
popoverProps,
...rest
}) => {
- const { onClick, iconType = 'apps', ...popoverButtonRest } =
- popoverButtonProps || {};
+ const {
+ onClick,
+ iconType = 'apps',
+ ...popoverButtonRest
+ } = popoverButtonProps || {};
const [mobileMenuIsOpen, setMobileMenuIsOpen] = useState(false);
diff --git a/src/components/header/header_section/header_section_item.tsx b/src/components/header/header_section/header_section_item.tsx
index 89920574d82..57fcf744712 100644
--- a/src/components/header/header_section/header_section_item.tsx
+++ b/src/components/header/header_section/header_section_item.tsx
@@ -31,12 +31,9 @@ export type EuiHeaderSectionItemProps = CommonProps & {
children?: ReactNode;
};
-export const EuiHeaderSectionItem: FunctionComponent = ({
- border = 'left',
- children,
- className,
- ...rest
-}) => {
+export const EuiHeaderSectionItem: FunctionComponent<
+ EuiHeaderSectionItemProps
+> = ({ border = 'left', children, className, ...rest }) => {
const classes = classNames(
'euiHeaderSectionItem',
borderToClassNameMap[border],
diff --git a/src/components/health/health.tsx b/src/components/health/health.tsx
index 566318358b6..c858a4b3f01 100644
--- a/src/components/health/health.tsx
+++ b/src/components/health/health.tsx
@@ -29,7 +29,7 @@ export type EuiHealthProps = CommonProps &
* Matches the text scales of EuiText.
* The `inherit` style will get its font size from the parent element
*/
- textSize?: typeof TEXT_SIZES[number];
+ textSize?: (typeof TEXT_SIZES)[number];
};
export const EuiHealth: FunctionComponent = ({
diff --git a/src/components/horizontal_rule/horizontal_rule.tsx b/src/components/horizontal_rule/horizontal_rule.tsx
index 66dbf6520c3..297af7d8378 100644
--- a/src/components/horizontal_rule/horizontal_rule.tsx
+++ b/src/components/horizontal_rule/horizontal_rule.tsx
@@ -16,8 +16,8 @@ import { euiHorizontalRuleStyles } from './horizontal_rule.styles';
export const SIZES = ['full', 'half', 'quarter'] as const;
export const MARGINS = ['none', 'xs', 's', 'm', 'l', 'xl', 'xxl'] as const;
-export type EuiHorizontalRuleSize = typeof SIZES[number];
-export type EuiHorizontalRuleMargin = typeof MARGINS[number];
+export type EuiHorizontalRuleSize = (typeof SIZES)[number];
+export type EuiHorizontalRuleMargin = (typeof MARGINS)[number];
export interface EuiHorizontalRuleProps
extends CommonProps,
diff --git a/src/components/i18n/i18n.tsx b/src/components/i18n/i18n.tsx
index 7a1ad5ad041..9a2c988badf 100644
--- a/src/components/i18n/i18n.tsx
+++ b/src/components/i18n/i18n.tsx
@@ -46,14 +46,8 @@ function lookupToken<
DEFAULT extends Renderable,
RESOLVED extends ResolvedType
>(options: lookupTokenOptions): RESOLVED {
- const {
- token,
- i18nMapping,
- valueDefault,
- i18nMappingFunc,
- values,
- render,
- } = options;
+ const { token, i18nMapping, valueDefault, i18nMappingFunc, values, render } =
+ options;
let renderable = (i18nMapping && i18nMapping[token]) || valueDefault;
if (typeof renderable === 'function') {
@@ -62,9 +56,11 @@ function lookupToken<
}
// @ts-ignore TypeScript complains that `DEFAULT` doesn't have a call signature but we verified `renderable` is a function
const rendered = renderable(values);
- return (i18nMappingFunc && typeof rendered === 'string'
- ? i18nMappingFunc(rendered)
- : rendered) as RESOLVED;
+ return (
+ i18nMappingFunc && typeof rendered === 'string'
+ ? i18nMappingFunc(rendered)
+ : rendered
+ ) as RESOLVED;
} else if (values === undefined || typeof renderable !== 'string') {
if (i18nMappingFunc && typeof valueDefault === 'string') {
renderable = i18nMappingFunc(valueDefault);
@@ -169,9 +165,8 @@ type DefaultRenderType> = K extends ReactChild
: never;
// An array with multiple defaults can only be an array of strings or elements
-type DefaultsRenderType<
- K extends Array
-> = K extends Array ? Item : never;
+type DefaultsRenderType> =
+ K extends Array ? Item : never;
function useEuiI18n>(
token: string,
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 30eadbe0335..b920ad0c40d 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -47,7 +47,7 @@ export type IconType = EuiIconType | string | ComponentType;
export type IconColor = string | NamedColor;
export const SIZES = ['original', 's', 'm', 'l', 'xl', 'xxl'] as const;
-export type IconSize = typeof SIZES[number];
+export type IconSize = (typeof SIZES)[number];
export type EuiIconProps = CommonProps &
Omit, 'type' | 'color' | 'size'> & {
diff --git a/src/components/icon/named_colors.tsx b/src/components/icon/named_colors.tsx
index fb27be3a040..a538cd919b4 100644
--- a/src/components/icon/named_colors.tsx
+++ b/src/components/icon/named_colors.tsx
@@ -19,7 +19,7 @@ export const COLORS = [
'inherit',
] as const;
-export type NamedColor = typeof COLORS[number];
+export type NamedColor = (typeof COLORS)[number];
export function isNamedColor(name: string): boolean {
return COLORS.includes(name as NamedColor);
diff --git a/src/components/image/image_fullscreen_wrapper.tsx b/src/components/image/image_fullscreen_wrapper.tsx
index a6a26aa65ae..dfa5a374165 100644
--- a/src/components/image/image_fullscreen_wrapper.tsx
+++ b/src/components/image/image_fullscreen_wrapper.tsx
@@ -23,7 +23,9 @@ import { euiImageButtonIconStyles } from './image_button.styles';
import { EuiImageCaption } from './image_caption';
-export const EuiImageFullScreenWrapper: FunctionComponent = ({
+export const EuiImageFullScreenWrapper: FunctionComponent<
+ EuiImageWrapperProps
+> = ({
alt,
hasShadow,
caption,
diff --git a/src/components/image/image_types.ts b/src/components/image/image_types.ts
index 5a46a3f2204..5df81ec0378 100644
--- a/src/components/image/image_types.ts
+++ b/src/components/image/image_types.ts
@@ -10,13 +10,13 @@ import { HTMLAttributes, ReactNode, ImgHTMLAttributes } from 'react';
import { CommonProps, ExclusiveUnion } from '../common';
export const SIZES = ['s', 'm', 'l', 'xl', 'fullWidth', 'original'] as const;
-export type EuiImageSize = typeof SIZES[number];
+export type EuiImageSize = (typeof SIZES)[number];
const FLOATS = ['left', 'right'] as const;
-export type EuiImageWrapperFloat = typeof FLOATS[number];
+export type EuiImageWrapperFloat = (typeof FLOATS)[number];
const MARGINS = ['s', 'm', 'l', 'xl'] as const;
-export type EuiImageWrapperMargin = typeof MARGINS[number];
+export type EuiImageWrapperMargin = (typeof MARGINS)[number];
export type EuiImageButtonIconColor = 'light' | 'dark';
diff --git a/src/components/inline_edit/inline_edit_title.tsx b/src/components/inline_edit/inline_edit_title.tsx
index ffa1b7ea077..37c1ebae218 100644
--- a/src/components/inline_edit/inline_edit_title.tsx
+++ b/src/components/inline_edit/inline_edit_title.tsx
@@ -19,7 +19,7 @@ import { useEuiTheme } from '../../services';
import { euiInlineEditTitleStyles } from './inline_edit_title.styles';
export const HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'] as const;
-type Heading = typeof HEADINGS[number];
+type Heading = (typeof HEADINGS)[number];
export type EuiInlineEditTitleProps = EuiInlineEditCommonProps & {
/**
diff --git a/src/components/inner_text/render_to_text.tsx b/src/components/inner_text/render_to_text.tsx
index dd1df1b7079..b8dda57f3b6 100644
--- a/src/components/inner_text/render_to_text.tsx
+++ b/src/components/inner_text/render_to_text.tsx
@@ -31,7 +31,7 @@ export function useRenderToText(node: ReactNode, placeholder = ''): string {
);
useEffect(() => {
- hostNode.current = (document.createDocumentFragment() as unknown) as Element;
+ hostNode.current = document.createDocumentFragment() as unknown as Element;
render({node}
, hostNode.current);
return () => {
onUnmount();
diff --git a/src/components/key_pad_menu/key_pad_menu.styles.tsx b/src/components/key_pad_menu/key_pad_menu.styles.tsx
index e044cc54237..07b9d1881b3 100644
--- a/src/components/key_pad_menu/key_pad_menu.styles.tsx
+++ b/src/components/key_pad_menu/key_pad_menu.styles.tsx
@@ -19,9 +19,8 @@ export const euiKeyPadMenuVariables = ({ euiTheme }: UseEuiTheme) => {
export const euiKeyPadMenuStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme } = euiThemeContext;
- const { euiKeyPadMenuSize, euiKeyPadMenuMarginSize } = euiKeyPadMenuVariables(
- euiThemeContext
- );
+ const { euiKeyPadMenuSize, euiKeyPadMenuMarginSize } =
+ euiKeyPadMenuVariables(euiThemeContext);
return {
euiKeyPadMenu: css`
diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx
index 15f334ce091..434352b3641 100644
--- a/src/components/link/link.tsx
+++ b/src/components/link/link.tsx
@@ -34,7 +34,7 @@ export const COLORS = [
'ghost',
] as const;
-export type EuiLinkColor = typeof COLORS[number];
+export type EuiLinkColor = (typeof COLORS)[number];
export interface LinkButtonProps {
type?: EuiLinkType;
diff --git a/src/components/list_group/list_group.tsx b/src/components/list_group/list_group.tsx
index ce496960fb0..c780131602f 100644
--- a/src/components/list_group/list_group.tsx
+++ b/src/components/list_group/list_group.tsx
@@ -18,7 +18,7 @@ import { logicalStyle } from '../../global_styling';
import { euiListGroupStyles } from './list_group.styles';
export const GUTTER_SIZES = ['none', 's', 'm'] as const;
-export type EuiListGroupGutterSize = typeof GUTTER_SIZES[number];
+export type EuiListGroupGutterSize = (typeof GUTTER_SIZES)[number];
export type EuiListGroupProps = CommonProps &
Omit, 'color'> & {
diff --git a/src/components/list_group/list_group_item.tsx b/src/components/list_group/list_group_item.tsx
index 80e114c9a28..01aceaab6d7 100644
--- a/src/components/list_group/list_group_item.tsx
+++ b/src/components/list_group/list_group_item.tsx
@@ -40,10 +40,10 @@ import {
} from './list_group_item.styles';
export const SIZES = ['xs', 's', 'm', 'l'] as const;
-export type EuiListGroupItemSize = typeof SIZES[number];
+export type EuiListGroupItemSize = (typeof SIZES)[number];
export const COLORS = ['primary', 'text', 'subdued'] as const;
-export type EuiListGroupItemColor = typeof COLORS[number];
+export type EuiListGroupItemColor = (typeof COLORS)[number];
export type EuiListGroupItemProps = CommonProps &
Omit<
diff --git a/src/components/list_group/pinnable_list_group/pinnable_list_group.tsx b/src/components/list_group/pinnable_list_group/pinnable_list_group.tsx
index 5a6e039ec11..424e837281c 100644
--- a/src/components/list_group/pinnable_list_group/pinnable_list_group.tsx
+++ b/src/components/list_group/pinnable_list_group/pinnable_list_group.tsx
@@ -56,19 +56,13 @@ export interface EuiPinnableListGroupProps
unpinTitle?: (item: EuiPinnableListGroupItemProps) => string;
}
-export const EuiPinnableListGroup: FunctionComponent = ({
- className,
- listItems,
- pinTitle,
- unpinTitle,
- onPinClick,
- ...rest
-}) => {
+export const EuiPinnableListGroup: FunctionComponent<
+ EuiPinnableListGroupProps
+> = ({ className, listItems, pinTitle, unpinTitle, onPinClick, ...rest }) => {
const classes = classNames('euiPinnableListGroup', className);
const euiTheme = useEuiTheme();
- const itemExtraActionStyles = euiPinnableListGroupItemExtraActionStyles(
- euiTheme
- );
+ const itemExtraActionStyles =
+ euiPinnableListGroupItemExtraActionStyles(euiTheme);
const pinExtraAction: EuiListGroupItemProps['extraAction'] = {
iconType: 'pinFilled',
diff --git a/src/components/loading/loading_chart.tsx b/src/components/loading/loading_chart.tsx
index d8678711b54..749baf314cd 100644
--- a/src/components/loading/loading_chart.tsx
+++ b/src/components/loading/loading_chart.tsx
@@ -19,7 +19,7 @@ import {
import { useEuiI18n } from '../i18n';
export const SIZES = ['m', 'l', 'xl'] as const;
-export type EuiLoadingChartSize = typeof SIZES[number];
+export type EuiLoadingChartSize = (typeof SIZES)[number];
export type EuiLoadingChartProps = CommonProps &
HTMLAttributes & {
diff --git a/src/components/loading/loading_elastic.tsx b/src/components/loading/loading_elastic.tsx
index 2ffc3b022c2..691b4b1fc73 100644
--- a/src/components/loading/loading_elastic.tsx
+++ b/src/components/loading/loading_elastic.tsx
@@ -14,7 +14,7 @@ import { useLoadingAriaLabel } from './_loading_strings';
import { euiLoadingElasticStyles } from './loading_elastic.styles';
export const SIZES = ['m', 'l', 'xl', 'xxl'] as const;
-export type EuiLoadingElasticSize = typeof SIZES[number];
+export type EuiLoadingElasticSize = (typeof SIZES)[number];
export interface EuiLoadingElasticProps {
size?: EuiLoadingElasticSize;
diff --git a/src/components/loading/loading_logo.tsx b/src/components/loading/loading_logo.tsx
index acf20aba2fe..d7fd43fbd43 100644
--- a/src/components/loading/loading_logo.tsx
+++ b/src/components/loading/loading_logo.tsx
@@ -18,7 +18,7 @@ import {
} from './loading_logo.styles';
export const SIZES = ['m', 'l', 'xl'] as const;
-export type EuiLoadingLogoSize = typeof SIZES[number];
+export type EuiLoadingLogoSize = (typeof SIZES)[number];
export type EuiLoadingLogoProps = CommonProps &
HTMLAttributes & {
diff --git a/src/components/loading/loading_spinner.tsx b/src/components/loading/loading_spinner.tsx
index 968305b9a14..b72e3a28ffe 100644
--- a/src/components/loading/loading_spinner.tsx
+++ b/src/components/loading/loading_spinner.tsx
@@ -17,7 +17,7 @@ import {
} from './loading_spinner.styles';
export const SIZES = ['s', 'm', 'l', 'xl', 'xxl'] as const;
-export type EuiLoadingSpinnerSize = typeof SIZES[number];
+export type EuiLoadingSpinnerSize = (typeof SIZES)[number];
export type EuiLoadingSpinnerColor = {
border?: CSSProperties['color'];
diff --git a/src/components/markdown_editor/markdown_actions.ts b/src/components/markdown_editor/markdown_actions.ts
index 35ef55117b6..cb253f5e2fe 100644
--- a/src/components/markdown_editor/markdown_actions.ts
+++ b/src/components/markdown_editor/markdown_actions.ts
@@ -532,10 +532,8 @@ function multilineStyle(textarea: HTMLTextAreaElement, arg: StyleArgs) {
} else {
text = lines.map((line) => prefix + line + suffix).join('\n');
if (surroundWithNewlines) {
- const {
- newlinesToAppend,
- newlinesToPrepend,
- } = newlinesToSurroundSelectedText(textarea);
+ const { newlinesToAppend, newlinesToPrepend } =
+ newlinesToSurroundSelectedText(textarea);
selectionStart += newlinesToAppend.length;
selectionEnd = selectionStart + text.length;
text = newlinesToAppend + text + newlinesToPrepend;
@@ -594,10 +592,8 @@ function orderedList(textarea: HTMLTextAreaElement): SelectionRange {
return results;
})();
text = lines.join('\n');
- const {
- newlinesToAppend,
- newlinesToPrepend,
- } = newlinesToSurroundSelectedText(textarea);
+ const { newlinesToAppend, newlinesToPrepend } =
+ newlinesToSurroundSelectedText(textarea);
selectionStart = textarea.selectionStart + newlinesToAppend.length;
selectionEnd = selectionStart + text.length;
if (noInitialSelection) selectionStart = selectionEnd;
diff --git a/src/components/markdown_editor/markdown_editor.test.tsx b/src/components/markdown_editor/markdown_editor.test.tsx
index 4eabf706cb7..d12aaeafa52 100644
--- a/src/components/markdown_editor/markdown_editor.test.tsx
+++ b/src/components/markdown_editor/markdown_editor.test.tsx
@@ -159,11 +159,8 @@ describe('EuiMarkdownEditor', () => {
});
test('custom plugins are excluded and popover is rendered', () => {
- const {
- parsingPlugins,
- processingPlugins,
- uiPlugins,
- } = getDefaultEuiMarkdownPlugins({ exclude: ['tooltip'] });
+ const { parsingPlugins, processingPlugins, uiPlugins } =
+ getDefaultEuiMarkdownPlugins({ exclude: ['tooltip'] });
const component = mount(
= (
- props
-) => {
+export const EuiMarkdownEditorDropZone: FunctionComponent<
+ EuiMarkdownEditorDropZoneProps
+> = (props) => {
const [isDragging, toggleDragging] = React.useState(false);
const [isUploadingFiles, toggleUploadingFiles] = React.useState(false);
const [isDraggingError, toggleDraggingError] = React.useState(false);
@@ -80,10 +80,8 @@ export const EuiMarkdownEditorDropZone: FunctionComponent(null);
+ const [editorFooterRef, setEditorFooterRef] =
+ React.useState(null);
const { height: editorFooterHeight } = useResizeObserver(
editorFooterRef,
diff --git a/src/components/markdown_editor/markdown_editor_text_area.tsx b/src/components/markdown_editor/markdown_editor_text_area.tsx
index e3298b2775d..cada4930d35 100644
--- a/src/components/markdown_editor/markdown_editor_text_area.tsx
+++ b/src/components/markdown_editor/markdown_editor_text_area.tsx
@@ -11,16 +11,15 @@ import classNames from 'classnames';
import { CommonProps } from '../common';
import { EuiMarkdownContext } from './markdown_context';
-export type EuiMarkdownEditorTextAreaProps = TextareaHTMLAttributes<
- HTMLTextAreaElement
-> &
- CommonProps & {
- isInvalid?: boolean;
- fullWidth?: boolean;
- compressed?: boolean;
- height: string;
- maxHeight: string;
- };
+export type EuiMarkdownEditorTextAreaProps =
+ TextareaHTMLAttributes &
+ CommonProps & {
+ isInvalid?: boolean;
+ fullWidth?: boolean;
+ compressed?: boolean;
+ height: string;
+ maxHeight: string;
+ };
export const EuiMarkdownEditorTextArea = forwardRef<
HTMLTextAreaElement,
diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins/processing_plugins.tsx b/src/components/markdown_editor/plugins/markdown_default_plugins/processing_plugins.tsx
index f693c6635d5..d770f2c415d 100644
--- a/src/components/markdown_editor/plugins/markdown_default_plugins/processing_plugins.tsx
+++ b/src/components/markdown_editor/plugins/markdown_default_plugins/processing_plugins.tsx
@@ -109,4 +109,5 @@ export const getDefaultEuiMarkdownProcessingPlugins = ({
return plugins;
};
-export const defaultProcessingPlugins = getDefaultEuiMarkdownProcessingPlugins();
+export const defaultProcessingPlugins =
+ getDefaultEuiMarkdownProcessingPlugins();
diff --git a/src/components/notification/notification_event.tsx b/src/components/notification/notification_event.tsx
index 77b6eefff9a..3ca54867ce0 100644
--- a/src/components/notification/notification_event.tsx
+++ b/src/components/notification/notification_event.tsx
@@ -96,7 +96,9 @@ export type EuiNotificationEventProps = Omit<
>;
};
-export const EuiNotificationEvent: FunctionComponent = ({
+export const EuiNotificationEvent: FunctionComponent<
+ EuiNotificationEventProps
+> = ({
id,
type,
severity,
diff --git a/src/components/notification/notification_event_messages.tsx b/src/components/notification/notification_event_messages.tsx
index e5fc784babb..7f2f791dcaa 100644
--- a/src/components/notification/notification_event_messages.tsx
+++ b/src/components/notification/notification_event_messages.tsx
@@ -23,10 +23,9 @@ export type EuiNotificationEventMessagesProps = {
eventName: string;
};
-export const EuiNotificationEventMessages: FunctionComponent = ({
- messages,
- eventName,
-}) => {
+export const EuiNotificationEventMessages: FunctionComponent<
+ EuiNotificationEventMessagesProps
+> = ({ messages, eventName }) => {
const [isOpen, setIsOpen] = useState(false);
const messagesLength = messages.length;
diff --git a/src/components/notification/notification_event_meta.tsx b/src/components/notification/notification_event_meta.tsx
index abca23b9d46..03332cf8add 100644
--- a/src/components/notification/notification_event_meta.tsx
+++ b/src/components/notification/notification_event_meta.tsx
@@ -64,7 +64,9 @@ export type EuiNotificationEventMetaProps = {
>;
};
-export const EuiNotificationEventMeta: FunctionComponent = ({
+export const EuiNotificationEventMeta: FunctionComponent<
+ EuiNotificationEventMetaProps
+> = ({
id,
iconType,
type,
diff --git a/src/components/notification/notification_event_read_button.tsx b/src/components/notification/notification_event_read_button.tsx
index ac1508a18c7..83284fbdc58 100644
--- a/src/components/notification/notification_event_read_button.tsx
+++ b/src/components/notification/notification_event_read_button.tsx
@@ -30,13 +30,9 @@ export type EuiNotificationEventReadButtonProps = Omit<
eventName: string;
};
-export const EuiNotificationEventReadButton: FunctionComponent = ({
- id,
- isRead,
- onClick,
- eventName,
- ...rest
-}) => {
+export const EuiNotificationEventReadButton: FunctionComponent<
+ EuiNotificationEventReadButtonProps
+> = ({ id, isRead, onClick, eventName, ...rest }) => {
const classesReadState = classNames('euiNotificationEventReadButton', {
'euiNotificationEventReadButton--isRead': isRead,
});
diff --git a/src/components/notification/notification_event_read_icon.tsx b/src/components/notification/notification_event_read_icon.tsx
index 91b6163c89d..5239f561038 100644
--- a/src/components/notification/notification_event_read_icon.tsx
+++ b/src/components/notification/notification_event_read_icon.tsx
@@ -26,12 +26,9 @@ export type EuiNotificationEventReadIconProps = Omit<
eventName: string;
};
-export const EuiNotificationEventReadIcon: FunctionComponent = ({
- id,
- isRead,
- eventName,
- ...rest
-}) => {
+export const EuiNotificationEventReadIcon: FunctionComponent<
+ EuiNotificationEventReadIconProps
+> = ({ id, isRead, eventName, ...rest }) => {
const classesReadState = classNames('euiNotificationEventReadIcon', {
'euiNotificationEventReadIcon--isRead': isRead,
});
diff --git a/src/components/observer/resize_observer/resize_observer.test.tsx b/src/components/observer/resize_observer/resize_observer.test.tsx
index f95777d45eb..7632e050fef 100644
--- a/src/components/observer/resize_observer/resize_observer.test.tsx
+++ b/src/components/observer/resize_observer/resize_observer.test.tsx
@@ -25,20 +25,23 @@ export async function waitforResizeObserver(period = 30) {
describe.skip('testResizeObservers', () => {
// refactor the tests structure to make sure that `EuiResizeObserver` test can get
// the proper size of the dom element.
- type GetBoundingClientRect = typeof HTMLElement['prototype']['getBoundingClientRect'];
+ type GetBoundingClientRect =
+ (typeof HTMLElement)['prototype']['getBoundingClientRect'];
let _originalgetBoundingClientRect: undefined | GetBoundingClientRect;
beforeAll(() => {
_originalgetBoundingClientRect =
HTMLElement.prototype.getBoundingClientRect;
HTMLElement.prototype.getBoundingClientRect = function () {
// use the length of the element's HTML to represent its height
- return { width: 100, height: this.innerHTML.length } as ReturnType<
- GetBoundingClientRect
- >;
+ return {
+ width: 100,
+ height: this.innerHTML.length,
+ } as ReturnType;
};
});
afterAll(() => {
- HTMLElement.prototype.getBoundingClientRect = _originalgetBoundingClientRect!;
+ HTMLElement.prototype.getBoundingClientRect =
+ _originalgetBoundingClientRect!;
});
describe('EuiResizeObserver', () => {
diff --git a/src/components/outside_click_detector/outside_click_detector.test.tsx b/src/components/outside_click_detector/outside_click_detector.test.tsx
index 025537f83b3..6a210e71e42 100644
--- a/src/components/outside_click_detector/outside_click_detector.test.tsx
+++ b/src/components/outside_click_detector/outside_click_detector.test.tsx
@@ -39,7 +39,9 @@ describe('EuiOutsideClickDetector', () => {
e: ReactMouseEvent
) => {
const event = new Event('mousedown') as EuiEvent;
- event.euiGeneratedBy = ((e.nativeEvent as unknown) as EuiEvent).euiGeneratedBy;
+ event.euiGeneratedBy = (
+ e.nativeEvent as unknown as EuiEvent
+ ).euiGeneratedBy;
document.dispatchEvent(event);
};
@@ -47,7 +49,9 @@ describe('EuiOutsideClickDetector', () => {
e: ReactMouseEvent
) => {
const event = new Event('mouseup') as EuiEvent;
- event.euiGeneratedBy = ((e.nativeEvent as unknown) as EuiEvent).euiGeneratedBy;
+ event.euiGeneratedBy = (
+ e.nativeEvent as unknown as EuiEvent
+ ).euiGeneratedBy;
document.dispatchEvent(event);
};
diff --git a/src/components/outside_click_detector/outside_click_detector.ts b/src/components/outside_click_detector/outside_click_detector.ts
index 14fa8b133c4..e15a7c0cde6 100644
--- a/src/components/outside_click_detector/outside_click_detector.ts
+++ b/src/components/outside_click_detector/outside_click_detector.ts
@@ -33,9 +33,7 @@ export interface EuiOutsideClickDetectorProps {
onTouchEnd?: (event: ReactMouseEvent) => void;
}
-export class EuiOutsideClickDetector extends Component<
- EuiOutsideClickDetectorProps
-> {
+export class EuiOutsideClickDetector extends Component {
// We are working with the assumption that a click event is
// equivalent to a sequential, compound press and release of
// the pointing device (mouse, finger, stylus, etc.).
@@ -83,7 +81,7 @@ export class EuiOutsideClickDetector extends Component<
return;
}
- const event = (e as unknown) as EuiEvent;
+ const event = e as unknown as EuiEvent;
if (
(event.euiGeneratedBy && event.euiGeneratedBy.includes(this.id)) ||
@@ -114,16 +112,16 @@ export class EuiOutsideClickDetector extends Component<
// to support nested click detectors, build an array
// of detector ids that have been encountered;
if (event.nativeEvent.hasOwnProperty('euiGeneratedBy')) {
- ((event.nativeEvent as unknown) as EuiEvent).euiGeneratedBy.push(this.id);
+ (event.nativeEvent as unknown as EuiEvent).euiGeneratedBy.push(this.id);
} else {
- ((event.nativeEvent as unknown) as EuiEvent).euiGeneratedBy = [this.id];
+ (event.nativeEvent as unknown as EuiEvent).euiGeneratedBy = [this.id];
}
if (cb) cb(event);
};
onChildMouseDown = (event: ReactMouseEvent) => {
this.onChildClick(event, (e) => {
- const nativeEvent = (e.nativeEvent as unknown) as EuiEvent;
+ const nativeEvent = e.nativeEvent as unknown as EuiEvent;
this.capturedDownIds = nativeEvent.euiGeneratedBy;
if (this.props.onMouseDown) this.props.onMouseDown(e);
if (this.props.onTouchStart) this.props.onTouchStart(e);
diff --git a/src/components/page/page_content/page_content.tsx b/src/components/page/page_content/page_content.tsx
index 0327af4d6a2..55a13aa0c68 100644
--- a/src/components/page/page_content/page_content.tsx
+++ b/src/components/page/page_content/page_content.tsx
@@ -43,7 +43,9 @@ export type EuiPageContentProps = CommonProps &
/**
* @deprecated Use EuiPageSection instead
*/
-export const EuiPageContent_Deprecated: FunctionComponent = ({
+export const EuiPageContent_Deprecated: FunctionComponent<
+ EuiPageContentProps
+> = ({
verticalPosition,
horizontalPosition,
paddingSize = 'l',
diff --git a/src/components/page/page_content/page_content_body.tsx b/src/components/page/page_content/page_content_body.tsx
index 5eb3234cf03..e55e0ae55c7 100644
--- a/src/components/page/page_content/page_content_body.tsx
+++ b/src/components/page/page_content/page_content_body.tsx
@@ -31,13 +31,15 @@ export interface EuiPageContentBodyProps
* Adjust the padding.
* When using this setting it's best to be consistent throughout all similar usages
*/
- paddingSize?: typeof PADDING_SIZES[number];
+ paddingSize?: (typeof PADDING_SIZES)[number];
}
/**
* @deprecated Use EuiPageSection instead
*/
-export const EuiPageContentBody_Deprecated: FunctionComponent = ({
+export const EuiPageContentBody_Deprecated: FunctionComponent<
+ EuiPageContentBodyProps
+> = ({
children,
restrictWidth = false,
paddingSize = 'none',
diff --git a/src/components/page/page_content/page_content_header.tsx b/src/components/page/page_content/page_content_header.tsx
index 65c5637557f..ff3fbe0b59c 100644
--- a/src/components/page/page_content/page_content_header.tsx
+++ b/src/components/page/page_content/page_content_header.tsx
@@ -23,12 +23,9 @@ export interface EuiPageContentHeaderProps
/**
* @deprecated Use EuiPageHeader instead
*/
-export const EuiPageContentHeader_Deprecated: FunctionComponent = ({
- children,
- className,
- responsive = true,
- ...rest
-}) => {
+export const EuiPageContentHeader_Deprecated: FunctionComponent<
+ EuiPageContentHeaderProps
+> = ({ children, className, responsive = true, ...rest }) => {
const classes = classNames(
'euiPageContentHeader',
{
diff --git a/src/components/page/page_content/page_content_header_section.tsx b/src/components/page/page_content/page_content_header_section.tsx
index 7da907356b3..b721352c7db 100644
--- a/src/components/page/page_content/page_content_header_section.tsx
+++ b/src/components/page/page_content/page_content_header_section.tsx
@@ -17,11 +17,9 @@ export interface EuiPageContentHeaderSectionProps
/**
* @deprecated Use EuiPageHeader instead
*/
-export const EuiPageContentHeaderSection_Deprecated: FunctionComponent = ({
- children,
- className,
- ...rest
-}) => {
+export const EuiPageContentHeaderSection_Deprecated: FunctionComponent<
+ EuiPageContentHeaderSectionProps
+> = ({ children, className, ...rest }) => {
const classes = classNames('euiPageContentHeaderSection', className);
return (
diff --git a/src/components/page/page_header/page_header_content.tsx b/src/components/page/page_header/page_header_content.tsx
index 372ad249a08..184a717f057 100644
--- a/src/components/page/page_header/page_header_content.tsx
+++ b/src/components/page/page_header/page_header_content.tsx
@@ -109,7 +109,7 @@ export interface _EuiPageHeaderContentProps
* Adjust the padding.
* When using this setting it's best to be consistent throughout all similar usages
*/
- paddingSize?: typeof PADDING_SIZES[number];
+ paddingSize?: (typeof PADDING_SIZES)[number];
/**
* Set to false if you don't want the children to stack at small screen sizes.
* Set to `reverse` to display the right side content first for the sake of hierarchy (like global time)
@@ -119,7 +119,7 @@ export interface _EuiPageHeaderContentProps
* Vertical alignment of the left and right side content;
* Default is `center` for custom content, but `top` for when `pageTitle` or `tabs` are included
*/
- alignItems?: typeof ALIGN_ITEMS[number];
+ alignItems?: (typeof ALIGN_ITEMS)[number];
/**
* Pass custom an array of content to this side usually up to 3 buttons.
* The first button should be primary, usually with `fill` and will be visually displayed as the last item,
@@ -141,7 +141,9 @@ export interface EuiPageHeaderContentProps
HTMLAttributes,
_EuiPageHeaderContentProps {}
-export const EuiPageHeaderContent: FunctionComponent = ({
+export const EuiPageHeaderContent: FunctionComponent<
+ EuiPageHeaderContentProps
+> = ({
className,
pageTitle,
pageTitleProps,
diff --git a/src/components/page/page_header/page_header_section.tsx b/src/components/page/page_header/page_header_section.tsx
index cb2905bca75..ac57e9fa44d 100644
--- a/src/components/page/page_header/page_header_section.tsx
+++ b/src/components/page/page_header/page_header_section.tsx
@@ -14,11 +14,9 @@ export interface EuiPageHeaderSectionProps
extends CommonProps,
HTMLAttributes {}
-export const EuiPageHeaderSection: FunctionComponent = ({
- children,
- className,
- ...rest
-}) => {
+export const EuiPageHeaderSection: FunctionComponent<
+ EuiPageHeaderSectionProps
+> = ({ children, className, ...rest }) => {
const classes = classNames('euiPageHeaderSection', className);
return (
diff --git a/src/components/page/page_section/page_section.tsx b/src/components/page/page_section/page_section.tsx
index b12a7a85564..f5ee5eb3250 100644
--- a/src/components/page/page_section/page_section.tsx
+++ b/src/components/page/page_section/page_section.tsx
@@ -44,7 +44,7 @@ export type EuiPageSectionProps = CommonProps &
/**
* Horizontal and/or vertical alignment of the section contents
*/
- alignment?: typeof ALIGNMENTS[number];
+ alignment?: (typeof ALIGNMENTS)[number];
/**
* When true the panel will grow in height to fill container if parent is a flex group
*/
diff --git a/src/components/page/page_side_bar/page_side_bar.tsx b/src/components/page/page_side_bar/page_side_bar.tsx
index 32b517d093e..ea6d94d32c2 100644
--- a/src/components/page/page_side_bar/page_side_bar.tsx
+++ b/src/components/page/page_side_bar/page_side_bar.tsx
@@ -32,19 +32,15 @@ export interface EuiPageSideBarProps_Deprecated
/**
* Adds padding around the children
*/
- paddingSize?: typeof PADDING_SIZES[number];
+ paddingSize?: (typeof PADDING_SIZES)[number];
}
/**
* @deprecated Use the new EuiPageSidebar in page/page_sidebar instead
*/
-export const EuiPageSideBar_Deprecated: FunctionComponent = ({
- children,
- className,
- sticky,
- paddingSize = 'none',
- ...rest
-}) => {
+export const EuiPageSideBar_Deprecated: FunctionComponent<
+ EuiPageSideBarProps_Deprecated
+> = ({ children, className, sticky, paddingSize = 'none', ...rest }) => {
const classes = classNames(
'euiPageSideBar',
paddingSizeToClassNameMap[paddingSize],
diff --git a/src/components/page/page_template.tsx b/src/components/page/page_template.tsx
index 8a29e119b40..fa66c61ce23 100644
--- a/src/components/page/page_template.tsx
+++ b/src/components/page/page_template.tsx
@@ -45,7 +45,7 @@ export type EuiPageTemplateProps_Deprecated = Omit<
* `centeredContent`: The content inside the panel is centered
* `empty`: Removes the panneling of the page content
*/
- template?: typeof TEMPLATES[number];
+ template?: (typeof TEMPLATES)[number];
/**
* Padding size will not get applied to the over-arching #EuiPage,
* but will propogate through all the components to keep them in sync
@@ -105,7 +105,9 @@ export type EuiPageTemplateProps_Deprecated = Omit<
*
* @deprecated use EuiPageTemplate from page_template/page_template instead
*/
-export const EuiPageTemplate_Deprecated: FunctionComponent = ({
+export const EuiPageTemplate_Deprecated: FunctionComponent<
+ EuiPageTemplateProps_Deprecated
+> = ({
template = 'default',
restrictWidth = true,
grow = true,
diff --git a/src/components/page_template/empty_prompt/page_empty_prompt.tsx b/src/components/page_template/empty_prompt/page_empty_prompt.tsx
index 950acd143d8..830bfba5b8e 100644
--- a/src/components/page_template/empty_prompt/page_empty_prompt.tsx
+++ b/src/components/page_template/empty_prompt/page_empty_prompt.tsx
@@ -18,7 +18,9 @@ export type _EuiPageEmptyPromptProps = Omit<
panelled?: boolean;
};
-export const _EuiPageEmptyPrompt: FunctionComponent<_EuiPageEmptyPromptProps> = ({
+export const _EuiPageEmptyPrompt: FunctionComponent<
+ _EuiPageEmptyPromptProps
+> = ({
children,
alignment = 'center',
restrictWidth = false,
diff --git a/src/components/page_template/inner/page_inner.tsx b/src/components/page_template/inner/page_inner.tsx
index accfe8c4da9..47f06f351de 100644
--- a/src/components/page_template/inner/page_inner.tsx
+++ b/src/components/page_template/inner/page_inner.tsx
@@ -18,32 +18,31 @@ import { euiPageInnerStyles } from './page_inner.styles';
export type ComponentTypes = keyof JSX.IntrinsicElements | ComponentType;
-export type _EuiPageInnerProps<
- T extends ComponentTypes = 'main'
-> = CommonProps &
- ComponentProps & {
- /**
- * Sets which HTML element to render.
- */
- component?: T;
- /**
- * Adds a white background and shadow to define the area.
- */
- panelled?: boolean;
- /**
- * Adds a single side border, based on the `responsive` state.
- * Typically added when a side bar exists.
- */
- border?: boolean;
- /**
- * Adjust the overall padding.
- */
- paddingSize?: EuiPaddingSize;
- /**
- * Decides at which point the main content wrapper will be 100vw.
- */
- responsive?: _EuiThemeBreakpoint[];
- };
+export type _EuiPageInnerProps =
+ CommonProps &
+ ComponentProps & {
+ /**
+ * Sets which HTML element to render.
+ */
+ component?: T;
+ /**
+ * Adds a white background and shadow to define the area.
+ */
+ panelled?: boolean;
+ /**
+ * Adds a single side border, based on the `responsive` state.
+ * Typically added when a side bar exists.
+ */
+ border?: boolean;
+ /**
+ * Adjust the overall padding.
+ */
+ paddingSize?: EuiPaddingSize;
+ /**
+ * Decides at which point the main content wrapper will be 100vw.
+ */
+ responsive?: _EuiThemeBreakpoint[];
+ };
export const _EuiPageInner = ({
children,
diff --git a/src/components/pagination/pagination_button.tsx b/src/components/pagination/pagination_button.tsx
index bb6ded97fe8..c2fbfb5421d 100644
--- a/src/components/pagination/pagination_button.tsx
+++ b/src/components/pagination/pagination_button.tsx
@@ -25,13 +25,11 @@ export type EuiPaginationButtonProps = EuiButtonEmptyProps & {
totalPages?: number;
};
-type EuiPaginationButtonPropsForAnchor = PropsForAnchor<
- EuiPaginationButtonProps
->;
+type EuiPaginationButtonPropsForAnchor =
+ PropsForAnchor;
-type EuiPaginationButtonPropsForButton = PropsForButton<
- EuiPaginationButtonProps
->;
+type EuiPaginationButtonPropsForButton =
+ PropsForButton;
type Props = ExclusiveUnion<
EuiPaginationButtonPropsForAnchor,
diff --git a/src/components/pagination/pagination_button_arrow.tsx b/src/components/pagination/pagination_button_arrow.tsx
index e2b48cd5ea1..f5a3a138495 100644
--- a/src/components/pagination/pagination_button_arrow.tsx
+++ b/src/components/pagination/pagination_button_arrow.tsx
@@ -26,7 +26,7 @@ const typeToIconTypeMap = {
};
export const TYPES = keysOf(typeToIconTypeMap);
-export type EuiPaginationButtonArrowType = typeof TYPES[number];
+export type EuiPaginationButtonArrowType = (typeof TYPES)[number];
export type Props = Partial> & {
type: EuiPaginationButtonArrowType;
diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx
index b4f6956a42d..7cdaae3e9f4 100644
--- a/src/components/panel/panel.tsx
+++ b/src/components/panel/panel.tsx
@@ -38,10 +38,10 @@ const paddingSizeToClassNameMap: {
l: 'paddingLarge',
};
const _SIZES = keysOf(paddingSizeToClassNameMap);
-export type PanelPaddingSize = typeof _SIZES[number];
+export type PanelPaddingSize = (typeof _SIZES)[number];
export const BORDER_RADII = ['none', 'm'] as const;
-export type PanelBorderRadius = typeof BORDER_RADII[number];
+export type PanelBorderRadius = (typeof BORDER_RADII)[number];
export const COLORS = BACKGROUND_COLORS;
export type PanelColor = _EuiBackgroundColor;
@@ -128,9 +128,8 @@ export const EuiPanel: FunctionComponent = ({
'euiPanel',
`euiPanel--${color}`,
{
- [`euiPanel--${paddingSizeToClassNameMap[paddingSize]}`]: paddingSizeToClassNameMap[
- paddingSize
- ],
+ [`euiPanel--${paddingSizeToClassNameMap[paddingSize]}`]:
+ paddingSizeToClassNameMap[paddingSize],
},
className
);
diff --git a/src/components/panel/split_panel/split_panel.tsx b/src/components/panel/split_panel/split_panel.tsx
index 3c3eed57708..86eacd59ce3 100644
--- a/src/components/panel/split_panel/split_panel.tsx
+++ b/src/components/panel/split_panel/split_panel.tsx
@@ -21,11 +21,9 @@ export type _EuiSplitPanelInnerProps = HTMLAttributes