[bundle optimization] fix imports of react-use lib (#82847)

* [bundle optimization] fix imports of react-use lib

* add 2 more files

* add rule into eslintrc.js

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

.eslintrc.js

@@ -640,6 +640,10 @@ module.exports = {
                 name: 'lodash/fp/assocPath',
                 message: 'Please use @elastic/safer-lodash-set instead',
               },
+              {
+                name: 'react-use',
+                message: 'Please use react-use/lib/{method} instead.',
+              },
             ],
           },
         ],

src/plugins/home/public/application/components/home_app.js

@@ -28,7 +28,7 @@ import { HashRouter as Router, Switch, Route } from 'react-router-dom';
 import { getTutorial } from '../load_tutorials';
 import { replaceTemplateStrings } from './tutorial/replace_template_strings';
 import { getServices } from '../kibana_services';
-import { useMount } from 'react-use';
+import useMount from 'react-use/lib/useMount';
 
 const RedirectToDefaultApp = () => {
   useMount(() => {

src/plugins/vis_default_editor/public/components/controls/date_ranges.tsx

@@ -36,7 +36,7 @@ import dateMath from '@elastic/datemath';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { isEqual, omit } from 'lodash';
-import { useMount } from 'react-use';
+import useMount from 'react-use/lib/useMount';
 import { DocLinksStart } from 'src/core/public';
 
 import { useKibana } from '../../../../kibana_react/public';

src/plugins/vis_default_editor/public/components/controls/field.tsx

@@ -19,7 +19,7 @@
 
 import { get } from 'lodash';
 import React, { useState, useCallback } from 'react';
-import { useMount } from 'react-use';
+import useMount from 'react-use/lib/useMount';
 
 import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';

src/plugins/vis_default_editor/public/components/controls/filters.tsx

@@ -21,7 +21,7 @@ import React, { useState, useEffect } from 'react';
 import { omit, isEqual } from 'lodash';
 import { htmlIdGenerator, EuiButton, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { useMount } from 'react-use';
+import useMount from 'react-use/lib/useMount';
 
 import { Query, DataPublicPluginStart } from '../../../../data/public';
 import { IUiSettingsClient } from '../../../../../core/public';

src/plugins/vis_default_editor/public/components/controls/order_by.tsx

@@ -20,7 +20,7 @@
 import React from 'react';
 import { EuiFormRow, EuiSelect } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { useMount } from 'react-use';
+import useMount from 'react-use/lib/useMount';
 
 import {
   isCompatibleAggregation,

src/plugins/vis_default_editor/public/components/controls/radius_ratio_option.tsx

@@ -21,7 +21,7 @@ import React, { useCallback } from 'react';
 import { EuiFormRow, EuiIconTip, EuiRange, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { useMount } from 'react-use';
+import useMount from 'react-use/lib/useMount';
 
 import { AggControlProps } from './agg_control_props';
 

src/plugins/vis_default_editor/public/components/controls/sub_metric.tsx

@@ -20,7 +20,7 @@
 import React from 'react';
 import { EuiFormLabel, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { useMount } from 'react-use';
+import useMount from 'react-use/lib/useMount';
 
 import { AggParamType, IAggConfig, AggGroupNames } from '../../../../data/public';
 import { useSubAggParamsHandlers } from './utils';

src/plugins/vis_default_editor/public/components/sidebar/controls.tsx

@@ -21,7 +21,7 @@ import React, { useCallback, useState } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiButton, EuiButtonEmpty, EuiToolTip } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import { useDebounce } from 'react-use';
+import useDebounce from 'react-use/lib/useDebounce';
 
 import { Vis } from 'src/plugins/visualizations/public';
 import { discardChanges, EditorAction } from './state';

src/plugins/visualize/public/application/components/visualize_listing.tsx

@@ -21,7 +21,9 @@ import './visualize_listing.scss';
 
 import React, { useCallback, useRef, useMemo, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
-import { useUnmount, useMount } from 'react-use';
+import useUnmount from 'react-use/lib/useUnmount';
+import useMount from 'react-use/lib/useMount';
+
 import { useLocation } from 'react-router-dom';
 
 import { SavedObjectsFindOptionsReference } from '../../../../../core/public';

x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/SelectableUrlList.tsx

@@ -31,7 +31,7 @@ import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import { useEvent } from 'react-use';
+import useEvent from 'react-use/lib/useEvent';
 import {
   formatOptions,
   selectableRenderOptions,

x-pack/plugins/apm/public/components/app/ServiceMap/useRefDimensions.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { useRef } from 'react';
-import { useWindowSize } from 'react-use';
+import useWindowSize from 'react-use/lib/useWindowSize';
 
 export function useRefDimensions() {
   const ref = useRef<HTMLDivElement>(null);

x-pack/plugins/fleet/public/applications/fleet/index.tsx

@@ -5,7 +5,7 @@
  */
 import React, { memo, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { useObservable } from 'react-use';
+import useObservable from 'react-use/lib/useObservable';
 import { HashRouter as Router, Redirect, Switch, Route, RouteProps } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';

x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/criterion_preview_chart.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { useMemo } from 'react';
-import { useDebounce } from 'react-use';
+import useDebounce from 'react-use/lib/useDebounce';
 import {
   ScaleType,
   AnnotationDomainTypes,

x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/editor.tsx

@@ -7,7 +7,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiLoadingSpinner, EuiSpacer, EuiButton, EuiCallOut } from '@elastic/eui';
-import { useMount } from 'react-use';
+import useMount from 'react-use/lib/useMount';
 import { GroupByExpression } from '../../../common/group_by_expression/group_by_expression';
 import {
   ForLastExpression,

x-pack/plugins/infra/public/components/log_stream/index.tsx

@@ -6,7 +6,7 @@
 
 import React, { useMemo } from 'react';
 import { noop } from 'lodash';
-import { useMount } from 'react-use';
+import useMount from 'react-use/lib/useMount';
 import { euiStyled } from '../../../../observability/public';
 
 import { LogEntriesCursor } from '../../../common/http_api';

x-pack/plugins/infra/public/components/logging/log_analysis_setup/setup_flyout/log_entry_categories_setup_view.tsx

@@ -6,7 +6,7 @@
 
 import { EuiSpacer, EuiSteps, EuiText, EuiTitle } from '@elastic/eui';
 import React, { useCallback, useMemo } from 'react';
-import { useMount } from 'react-use';
+import useMount from 'react-use/lib/useMount';
 import { useLogEntryCategoriesSetup } from '../../../../containers/logs/log_analysis/modules/log_entry_categories';
 import { createInitialConfigurationStep } from '../initial_configuration_step';
 import { createProcessStep } from '../process_step';

x-pack/plugins/infra/public/containers/logs/log_analysis/log_analysis_setup_state.ts

@@ -6,7 +6,7 @@
 
 import { isEqual } from 'lodash';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { usePrevious } from 'react-use';
+import usePrevious from 'react-use/lib/usePrevious';
 import {
   combineDatasetFilters,
   DatasetFilter,

x-pack/plugins/infra/public/containers/logs/log_analysis/modules/log_entry_categories/use_log_entry_categories_quality.ts

@@ -5,7 +5,7 @@
  */
 
 import { useMemo, useState } from 'react';
-import { useDeepCompareEffect } from 'react-use';
+import useDeepCompareEffect from 'react-use/lib/useDeepCompareEffect';
 import {
   CategoryQualityWarningReason,
   QualityWarning,

x-pack/plugins/infra/public/containers/logs/log_entries/index.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { useEffect, useState, useReducer, useCallback } from 'react';
-import { useMountedState } from 'react-use';
+import useMountedState from 'react-use/lib/useMountedState';
 import createContainer from 'constate';
 import { pick, throttle } from 'lodash';
 import { TimeKey, timeKeyIsBetween } from '../../../../common/time';

x-pack/plugins/infra/public/containers/logs/log_highlights/log_highlights.tsx

@@ -6,7 +6,7 @@
 
 import createContainer from 'constate';
 import { useState, useContext } from 'react';
-import { useThrottle } from 'react-use';
+import useThrottle from 'react-use/lib/useThrottle';
 import { useLogEntryHighlights } from './log_entry_highlights';
 import { useLogSummaryHighlights } from './log_summary_highlights';
 import { useNextAndPrevious } from './next_and_previous';

x-pack/plugins/infra/public/containers/logs/log_position/log_position_state.ts

@@ -6,7 +6,7 @@
 
 import { useState, useMemo, useEffect, useCallback } from 'react';
 import createContainer from 'constate';
-import { useSetState } from 'react-use';
+import useSetState from 'react-use/lib/useSetState';
 import { TimeKey } from '../../../../common/time';
 import { datemathToEpochMillis, isValidDatemath } from '../../../utils/datemath';
 import { useKibanaTimefilterTime } from '../../../hooks/use_kibana_timefilter_time';

x-pack/plugins/infra/public/containers/logs/log_source/log_source.ts

@@ -6,7 +6,7 @@
 
 import createContainer from 'constate';
 import { useCallback, useMemo, useState } from 'react';
-import { useMountedState } from 'react-use';
+import useMountedState from 'react-use/lib/useMountedState';
 import type { HttpHandler } from 'src/core/public';
 import {
   LogSourceConfiguration,

x-pack/plugins/infra/public/containers/logs/log_summary/with_summary.ts

@@ -5,7 +5,7 @@
  */
 
 import { useContext } from 'react';
-import { useThrottle } from 'react-use';
+import useThrottle from 'react-use/lib/useThrottle';
 
 import { RendererFunction } from '../../../utils/typed_react';
 import { LogSummaryBuckets, useLogSummary } from './log_summary';

x-pack/plugins/infra/public/hooks/use_kibana_space.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useAsync } from 'react-use';
+import useAsync from 'react-use/lib/useAsync';
 import { useKibanaContextForPlugin } from '../hooks/use_kibana';
 import type { Space } from '../../../spaces/public';
 

x-pack/plugins/infra/public/hooks/use_kibana_timefilter_time.tsx

@@ -5,7 +5,10 @@
  */
 
 import { useCallback } from 'react';
-import { useUpdateEffect, useMount } from 'react-use';
+
+import useUpdateEffect from 'react-use/lib/useUpdateEffect';
+import useMount from 'react-use/lib/useMount';
+
 import { useKibanaContextForPlugin } from './use_kibana';
 import { TimeRange, TimefilterContract } from '../../../../../src/plugins/data/public';
 

x-pack/plugins/infra/public/pages/link_to/redirect_to_node_logs.tsx

@@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n';
 import flowRight from 'lodash/flowRight';
 import React from 'react';
 import { Redirect, RouteComponentProps } from 'react-router-dom';
-import { useMount } from 'react-use';
+import useMount from 'react-use/lib/useMount';
 import { HttpStart } from 'src/core/public';
 import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
 import { findInventoryFields } from '../../../common/inventory_models';

x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/top_categories_table.tsx

@@ -8,7 +8,7 @@ import { EuiBasicTable, EuiBasicTableColumn } from '@elastic/eui';
 import numeral from '@elastic/numeral';
 import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
-import { useSet } from 'react-use';
+import useSet from 'react-use/lib/useSet';
 
 import { euiStyled } from '../../../../../../../observability/public';
 import {

x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/expanded_row.tsx

@@ -8,7 +8,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiStat, EuiTitle } from '@elastic/eui';
 import numeral from '@elastic/numeral';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { useMount } from 'react-use';
+import useMount from 'react-use/lib/useMount';
 import { euiStyled } from '../../../../../../../observability/public';
 import { LogEntryAnomaly } from '../../../../../../common/http_api';
 import { TimeRange } from '../../../../../../common/http_api/shared/time_range';

x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/table.tsx

@@ -17,7 +17,7 @@ import { RIGHT_ALIGNMENT } from '@elastic/eui/lib/services';
 import moment from 'moment';
 import { i18n } from '@kbn/i18n';
 import React, { useCallback, useMemo } from 'react';
-import { useSet } from 'react-use';
+import useSet from 'react-use/lib/useSet';
 import { TimeRange } from '../../../../../../common/http_api/shared/time_range';
 import {
   formatAnomalyScore,

x-pack/plugins/infra/public/pages/logs/log_entry_rate/use_log_entry_anomalies_results.ts

@@ -5,7 +5,7 @@
  */
 
 import { useMemo, useState, useCallback, useEffect, useReducer } from 'react';
-import { useMount } from 'react-use';
+import useMount from 'react-use/lib/useMount';
 import { useTrackedPromise, CanceledPromiseError } from '../../../utils/use_tracked_promise';
 import { callGetLogEntryAnomaliesAPI } from './service_calls/get_log_entry_anomalies';
 import { callGetLogEntryAnomaliesDatasetsAPI } from './service_calls/get_log_entry_anomalies_datasets';

x-pack/plugins/infra/public/pages/logs/page_content.tsx

@@ -8,7 +8,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
-import { useMount } from 'react-use';
+import useMount from 'react-use/lib/useMount';
 
 import { AlertDropdown } from '../../alerting/log_threshold';
 import { useKibana } from '../../../../../../src/plugins/kibana_react/public';

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/layout.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { useCallback, useEffect } from 'react';
-import { useInterval } from 'react-use';
+import useInterval from 'react-use/lib/useInterval';
 
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { AutoSizer } from '../../../../components/auto_sizer';

x-pack/plugins/infra/public/utils/use_tracked_promise.ts

@@ -7,7 +7,7 @@
 /* eslint-disable max-classes-per-file */
 
 import { DependencyList, useEffect, useMemo, useRef, useState, useCallback } from 'react';
-import { useMountedState } from 'react-use';
+import useMountedState from 'react-use/lib/useMountedState';
 
 interface UseTrackedPromiseArgs<Arguments extends any[], Result> {
   createPromise: (...args: Arguments) => Promise<Result>;

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx

@@ -6,7 +6,7 @@
 import './filter_popover.scss';
 
 import React, { MouseEventHandler, useState } from 'react';
-import { useDebounce } from 'react-use';
+import useDebounce from 'react-use/lib/useDebounce';
 import { EuiPopover, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FilterValue, defaultLabel, isQueryValid } from '.';

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/advanced_editor.tsx

@@ -8,7 +8,7 @@ import './advanced_editor.scss';
 
 import React, { useState, MouseEventHandler } from 'react';
 import { i18n } from '@kbn/i18n';
-import { useDebounce } from 'react-use';
+import useDebounce from 'react-use/lib/useDebounce';
 import {
   EuiFlexGroup,
   EuiFlexItem,

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/range_editor.tsx

@@ -6,7 +6,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { i18n } from '@kbn/i18n';
-import { useDebounce } from 'react-use';
+import useDebounce from 'react-use/lib/useDebounce';
 import {
   EuiButtonEmpty,
   EuiFormRow,

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/shared_components/label_input.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import { useDebounce } from 'react-use';
+import useDebounce from 'react-use/lib/useDebounce';
 import { EuiFieldText, keys } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_range_input.test.tsx

@@ -10,9 +10,7 @@ import { shallow } from 'enzyme';
 import { EuiRange } from '@elastic/eui';
 import { ValuesRangeInput } from './values_range_input';
 
-jest.mock('react-use', () => ({
-  useDebounce: (fn: () => void) => fn(),
-}));
+jest.mock('react-use/lib/useDebounce', () => (fn: () => void) => fn());
 
 describe('ValuesRangeInput', () => {
   it('should render EuiRange correctly', () => {

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/terms/values_range_input.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { useState } from 'react';
-import { useDebounce } from 'react-use';
+import useDebounce from 'react-use/lib/useDebounce';
 import { i18n } from '@kbn/i18n';
 import { EuiRange } from '@elastic/eui';
 

x-pack/plugins/lens/public/pie_visualization/toolbar.tsx

@@ -6,7 +6,7 @@
 
 import './toolbar.scss';
 import React, { useState } from 'react';
-import { useDebounce } from 'react-use';
+import useDebounce from 'react-use/lib/useDebounce';
 import { i18n } from '@kbn/i18n';
 import {
   EuiFlexGroup,

x-pack/plugins/logstash/public/application/pipeline_edit_view.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { useState, useLayoutEffect, useCallback } from 'react';
-import { usePromise } from 'react-use';
+import usePromise from 'react-use/lib/usePromise';
 import { History } from 'history';
 
 import { i18n } from '@kbn/i18n';

x-pack/plugins/security_solution/public/common/mock/endpoint/app_root_provider.tsx

@@ -9,7 +9,7 @@ import { Provider } from 'react-redux';
 import { I18nProvider } from '@kbn/i18n/react';
 import { Router } from 'react-router-dom';
 import { History } from 'history';
-import { useObservable } from 'react-use';
+import useObservable from 'react-use/lib/useObservable';
 import { Store } from 'redux';
 import { EuiThemeProvider } from '../../../../../xpack_legacy/common';
 import { KibanaContextProvider } from '../../../../../../../src/plugins/kibana_react/public';

x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/popover_form.tsx

@@ -19,7 +19,7 @@ import {
 } from '@elastic/eui';
 
 import { cloneDeep } from 'lodash';
-import { useUpdateEffect } from 'react-use';
+import useUpdateEffect from 'react-use/lib/useUpdateEffect';
 import { AggName } from '../../../../../../common/types/aggregations';
 import { dictionaryToArray } from '../../../../../../common/types/common';
 import {

x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_agg_form.tsx

@@ -7,7 +7,7 @@
 import React, { useContext, useMemo } from 'react';
 import { EuiFormRow, EuiSelect } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { useUpdateEffect } from 'react-use';
+import useUpdateEffect from 'react-use/lib/useUpdateEffect';
 import { CreateTransformWizardContext } from '../../../../wizard/wizard';
 import { commonFilterAggs, filterAggsFieldSupport } from '../constants';
 import { IndexPattern } from '../../../../../../../../../../../../src/plugins/data/public';

x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_term_form.tsx

@@ -8,7 +8,7 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { EuiComboBox, EuiFormRow } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { debounce } from 'lodash';
-import { useUpdateEffect } from 'react-use';
+import useUpdateEffect from 'react-use/lib/useUpdateEffect';
 import { i18n } from '@kbn/i18n';
 import { isEsSearchResponse } from '../../../../../../../../../common/api_schemas/type_guards';
 import { useApi } from '../../../../../../../hooks';

x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/step_screenshot_display.test.tsx

@@ -6,15 +6,13 @@
 
 import { shallowWithIntl, mountWithIntl } from 'test_utils/enzyme_helpers';
 import React from 'react';
-import * as reactUse from 'react-use';
 import { StepScreenshotDisplay } from '../step_screenshot_display';
 
-describe('StepScreenshotDisplayProps', () => {
-  // @ts-ignore missing fields don't matter in this test, the component in question only relies on `isIntersecting`
-  jest.spyOn(reactUse, 'useIntersection').mockImplementation(() => ({
-    isIntersecting: true,
-  }));
+jest.mock('react-use/lib/useIntersection', () => () => ({
+  isIntersecting: true,
+}));
 
+describe('StepScreenshotDisplayProps', () => {
   it('displays screenshot thumbnail when present', () => {
     const wrapper = mountWithIntl(
       <StepScreenshotDisplay

x-pack/plugins/uptime/public/components/monitor/synthetics/step_screenshot_display.tsx

@@ -15,7 +15,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useContext, useEffect, useRef, useState, FC } from 'react';
-import { useIntersection } from 'react-use';
+import useIntersection from 'react-use/lib/useIntersection';
 import { UptimeSettingsContext, UptimeThemeContext } from '../../../contexts';
 
 interface StepScreenshotDisplayProps {