From 45df6f6a00b1cc725f4c334d9bf6b238e16c540a Mon Sep 17 00:00:00 2001 From: Sergey Myssak Date: Fri, 14 Apr 2023 11:44:42 +0600 Subject: [PATCH] Add functionality to OuiBottomBar to have the same width as the container element (#707) Co-authored-by: Andrey Myssak Signed-off-by: Sergey Myssak --- src-docs/src/views/app_view.js | 2 +- .../bottom_bar/bottom_bar_container_width.js | 44 +++++++ .../views/bottom_bar/bottom_bar_example.js | 27 ++++ .../resize_observer/resize_observer_hook.js | 2 +- src/components/bottom_bar/bottom_bar.tsx | 40 +++++- src/components/code/_code_block.tsx | 32 +++-- src/components/datagrid/data_grid.tsx | 27 ++-- src/components/datagrid/data_grid_body.tsx | 20 ++- src/components/flyout/flyout.tsx | 17 +-- .../markdown_editor_drop_zone.tsx | 17 +-- .../mutation_observer.test.tsx | 6 +- .../mutation_observer/mutation_observer.ts | 29 ++--- .../resize_observer/resize_observer.test.tsx | 8 +- .../resize_observer/resize_observer.tsx | 120 ++++++++++++------ .../resizable_container.tsx | 8 +- 15 files changed, 271 insertions(+), 128 deletions(-) create mode 100644 src-docs/src/views/bottom_bar/bottom_bar_container_width.js diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js index 023d158871..e5167ee433 100644 --- a/src-docs/src/views/app_view.js +++ b/src-docs/src/views/app_view.js @@ -97,7 +97,7 @@ export class AppView extends Component { /> - + {(context) => { diff --git a/src-docs/src/views/bottom_bar/bottom_bar_container_width.js b/src-docs/src/views/bottom_bar/bottom_bar_container_width.js new file mode 100644 index 0000000000..89cd70d553 --- /dev/null +++ b/src-docs/src/views/bottom_bar/bottom_bar_container_width.js @@ -0,0 +1,44 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useState } from 'react'; + +import { + OuiBottomBar, + OuiButton, + OuiFlexGroup, + OuiFlexItem, +} from '../../../../src/components'; + +export default () => { + const [isBottomBarVisible, setBottomBarVisibility] = useState(null); + + return ( +
+ setBottomBarVisibility((prevVal) => !prevVal)}> + {isBottomBarVisible ? 'Hide' : 'Show'} bottom bar + + + {isBottomBarVisible && ( + + + + setBottomBarVisibility(false)} + color="ghost" + size="s" + iconType="cross"> + Close + + + + + )} +
+ ); +}; diff --git a/src-docs/src/views/bottom_bar/bottom_bar_example.js b/src-docs/src/views/bottom_bar/bottom_bar_example.js index 34457e3714..c7f626fc25 100644 --- a/src-docs/src/views/bottom_bar/bottom_bar_example.js +++ b/src-docs/src/views/bottom_bar/bottom_bar_example.js @@ -24,6 +24,9 @@ const bottomBarSource = require('!!raw-loader!./bottom_bar'); import BottomBarDisplacement from './bottom_bar_displacement'; const bottomBarDisplacementSource = require('!!raw-loader!./bottom_bar_displacement'); +import BottomBarContainerWidth from './bottom_bar_container_width'; +const bottomBarContainerWidthSource = require('!!raw-loader!./bottom_bar_container_width'); + import BottomBarPosition from './bottom_bar_position'; import { OuiCallOut } from '../../../../src/components/call_out'; const bottomBarPositionSource = require('!!raw-loader!./bottom_bar_position'); @@ -129,6 +132,30 @@ export const BottomBarExample = { demo: , snippet: ` +`, + }, + { + title: 'Container width', + source: [ + { + type: GuideSectionTypes.JS, + code: bottomBarContainerWidthSource, + }, + ], + text: ( +

+ The props containerElementRef and{' '} + containerElementId are optional and can be used to + control how the component determines its width. They allow you to + specify a container element, and the component will take the width of + that element instead of its default behavior of taking up the full + width available to it. +

+ ), + props: { OuiBottomBar }, + demo: , + snippet: ` + `, }, ], diff --git a/src-docs/src/views/resize_observer/resize_observer_hook.js b/src-docs/src/views/resize_observer/resize_observer_hook.js index 4a317be0ec..a22abe3b6a 100644 --- a/src-docs/src/views/resize_observer/resize_observer_hook.js +++ b/src-docs/src/views/resize_observer/resize_observer_hook.js @@ -36,7 +36,7 @@ export const ResizeObserverHookExample = () => { }; const resizeRef = useRef(); - const dimensions = useResizeObserver(resizeRef.current); + const dimensions = useResizeObserver({ elementRef: resizeRef }); return (
diff --git a/src/components/bottom_bar/bottom_bar.tsx b/src/components/bottom_bar/bottom_bar.tsx index 7e173a8442..9f26587874 100644 --- a/src/components/bottom_bar/bottom_bar.tsx +++ b/src/components/bottom_bar/bottom_bar.tsx @@ -33,8 +33,9 @@ import React, { CSSProperties, forwardRef, HTMLAttributes, + RefObject, useEffect, - useState, + useRef, } from 'react'; import { useCombinedRefs } from '../../services'; import { OuiScreenReaderOnly } from '../accessibility'; @@ -82,6 +83,14 @@ type _BottomBarExclusivePositions = ExclusiveUnion< export type OuiBottomBarProps = CommonProps & HTMLAttributes & _BottomBarExclusivePositions & { + /** + * Whether the bottom bar should be the same width as the container element, using its ref. + */ + containerElementRef?: RefObject; + /** + * Whether the bottom bar should be the same width as the container element, using its id. + */ + containerElementId?: string; /** * Padding applied to the bar. Default is 'm'. */ @@ -124,6 +133,8 @@ export const OuiBottomBar = forwardRef< >( ( { + containerElementRef, + containerElementId, position = 'fixed', paddingSize = 'm', affordForDisplacement = true, @@ -146,10 +157,21 @@ export const OuiBottomBar = forwardRef< position !== 'fixed' ? false : affordForDisplacement; usePortal = position !== 'fixed' ? false : usePortal; - const [resizeRef, setResizeRef] = useState(null); - const setRef = useCombinedRefs([setResizeRef, ref]); - // TODO: Allow this hooke to be conditional - const dimensions = useResizeObserver(resizeRef); + const resizeRef = useRef(null); + const combinedRef = useCombinedRefs([ref, resizeRef]); + + const dimensions = useResizeObserver({ + elementRef: resizeRef, + observableDimension: 'height', + shouldObserve: affordForDisplacement, + }); + + const containerDimensions = useResizeObserver({ + elementRef: containerElementRef, + elementId: containerElementId, + observableDimension: 'width', + shouldObserve: !!containerElementRef || !!containerElementId, + }); useEffect(() => { if (affordForDisplacement && usePortal) { @@ -178,7 +200,7 @@ export const OuiBottomBar = forwardRef< className ); - const newStyle = { + const newStyle: CSSProperties = { left, right, bottom, @@ -186,6 +208,10 @@ export const OuiBottomBar = forwardRef< ...style, }; + if (containerElementRef || containerElementId) { + newStyle.width = containerDimensions.width; + } + const bar = ( <> diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx index 18dd31bfdf..42f1f2f23f 100644 --- a/src/components/code/_code_block.tsx +++ b/src/components/code/_code_block.tsx @@ -35,6 +35,7 @@ import React, { ReactNode, useEffect, useMemo, + useRef, useState, } from 'react'; import classNames from 'classnames'; @@ -227,19 +228,19 @@ export const OuiCodeBlockImpl: FunctionComponent = ({ overflowHeight, ...rest }) => { - const [isFullScreen, setIsFullScreen] = useState(false); - const [wrapperRef, setWrapperRef] = useState(null); + const ref = useRef(null); const [innerTextRef, _innerText] = useInnerText(''); + const combinedRef = useCombinedRefs([ref, innerTextRef]); + + const [isFullScreen, setIsFullScreen] = useState(false); + const [tabIndex, setTabIndex] = useState<-1 | 0>(-1); + + const { width, height } = useResizeObserver({ elementRef: ref }); + const innerText = useMemo( () => _innerText?.replace(/[\r\n?]{2}|\n\n/g, '\n'), [_innerText] ); - const [tabIndex, setTabIndex] = useState<-1 | 0>(-1); - const combinedRef = useCombinedRefs([ - innerTextRef, - setWrapperRef, - ]); - const { width, height } = useResizeObserver(wrapperRef); const content = useMemo(() => { if (!language || typeof children !== 'string') { @@ -252,21 +253,26 @@ export const OuiCodeBlockImpl: FunctionComponent = ({ }, [children, language, inline]); const doesOverflow = () => { - if (!wrapperRef) return; - - const { clientWidth, clientHeight, scrollWidth, scrollHeight } = wrapperRef; + if (!ref.current) return; + + const { + clientWidth, + clientHeight, + scrollWidth, + scrollHeight, + } = ref.current; const doesOverflow = scrollHeight > clientHeight || scrollWidth > clientWidth; setTabIndex(doesOverflow ? 0 : -1); }; - useMutationObserver(wrapperRef, doesOverflow, { + useMutationObserver(ref, doesOverflow, { subtree: true, childList: true, }); - useEffect(doesOverflow, [width, height, wrapperRef]); + useEffect(doesOverflow, [width, height, ref]); const onKeyDown = (event: KeyboardEvent) => { if (event.key === keys.ESCAPE) { diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index 3ed5002f2f..ff6d9f2e77 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -41,6 +41,7 @@ import React, { useRef, MutableRefObject, CSSProperties, + RefObject, } from 'react'; import classNames from 'classnames'; import { tabbable } from 'tabbable'; @@ -325,16 +326,16 @@ function renderPagination(props: OuiDataGridProps, controls: string) { * @param pageSize the currently applied page size */ function useVirtualizeContainerWidth( - resizeRef: HTMLDivElement | null, + resizeRef: RefObject, pageSize: number | undefined ) { const [virtualizeContainerWidth, setVirtualizeContainerWidth] = useState(0); - const virtualizeContainer = resizeRef?.getElementsByClassName( + const virtualizeContainer = resizeRef.current?.getElementsByClassName( VIRTUALIZED_CONTAINER_CLASS )[0] as HTMLDivElement | null; // re-render data grid on size changes - useResizeObserver(virtualizeContainer); + useResizeObserver({ element: virtualizeContainer }); useEffect(() => { if (virtualizeContainer?.clientWidth) { @@ -788,10 +789,16 @@ export const OuiDataGrid: FunctionComponent = (props) => { }; // enables/disables grid controls based on available width - const [resizeRef, setResizeRef] = useState(null); - const [toolbarRef, setToolbarRef] = useState(null); - const gridDimensions = useResizeObserver(resizeRef, 'width'); - const toolbarDemensions = useResizeObserver(toolbarRef, 'height'); + const resizeRef = useRef(null); + const toolbarRef = useRef(null); + const gridDimensions = useResizeObserver({ + elementRef: resizeRef, + observableDimension: 'width', + }); + const toolbarDimensions = useResizeObserver({ + elementRef: toolbarRef, + observableDimension: 'height', + }); useEffect(() => { if (resizeRef) { const { width } = gridDimensions; @@ -1077,13 +1084,13 @@ export const OuiDataGrid: FunctionComponent = (props) => { className={classes} onKeyDown={handleGridKeyDown} style={isFullScreen ? undefined : { width, height }} - ref={setResizeRef} + ref={resizeRef} {...rest}> {(IS_JEST_ENVIRONMENT || defaultColumnWidth) && ( <> {showToolbar ? (
{hasRoomForGridControls ? gridControls : null} @@ -1136,7 +1143,7 @@ export const OuiDataGrid: FunctionComponent = (props) => { columns={orderedVisibleColumns} columnWidths={columnWidths} defaultColumnWidth={defaultColumnWidth} - toolbarHeight={toolbarDemensions.height} + toolbarHeight={toolbarDimensions.height} leadingControlColumns={leadingControlColumns} schema={mergedSchema} trailingControlColumns={trailingControlColumns} diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx index b67372621d..a1d15c01af 100644 --- a/src/components/datagrid/data_grid_body.tsx +++ b/src/components/datagrid/data_grid_body.tsx @@ -363,15 +363,21 @@ export const OuiDataGridBody: FunctionComponent = ( gridStyles, } = props; - const [headerRowRef, setHeaderRowRef] = useState(null); - const [footerRowRef, setFooterRowRef] = useState(null); + const headerRowRef = useRef(null); + const footerRowRef = useRef(null); useMutationObserver(headerRowRef, handleHeaderMutation, { subtree: true, childList: true, }); - const { height: headerRowHeight } = useResizeObserver(headerRowRef, 'height'); - const { height: footerRowHeight } = useResizeObserver(footerRowRef, 'height'); + const { height: headerRowHeight } = useResizeObserver({ + elementRef: headerRowRef, + observableDimension: 'height', + }); + const { height: footerRowHeight } = useResizeObserver({ + elementRef: footerRowRef, + observableDimension: 'height', + }); const startRow = pagination ? pagination.pageIndex * pagination.pageSize : 0; let endRow = pagination @@ -462,7 +468,7 @@ export const OuiDataGridBody: FunctionComponent = ( const headerRow = useMemo(() => { return ( = ( if (renderFooterCellValue == null) return null; return ( = ( const [width, setWidth] = useState(undefined); const wrapperRef = useRef(null); - const wrapperDimensions = useResizeObserver(wrapperRef.current); + const wrapperDimensions = useResizeObserver({ elementRef: wrapperRef }); // reset height constraint when rowCount changes useEffect(() => { diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx index 94e3107c5a..56b72ecb28 100644 --- a/src/components/flyout/flyout.tsx +++ b/src/components/flyout/flyout.tsx @@ -44,7 +44,6 @@ import classnames from 'classnames'; import { keys, OuiWindowEvent, - useCombinedRefs, OuiBreakpointSize, isWithinMinBreakpoint, throttle, @@ -250,16 +249,10 @@ const OuiFlyout = forwardRef( // reacts every 50ms to resize changes and always gets the final update }, 50); - /** - * Setting up the refs on the actual flyout element in order to - * accommodate for the `isPushed` state by adding padding to the body equal to the width of the element - */ - const [resizeRef, setResizeRef] = useState | null>( - null - ); - const setRef = useCombinedRefs([setResizeRef, ref]); - // TODO: Allow this hooke to be conditional - const dimensions = useResizeObserver(resizeRef as Element); + const dimensions = useResizeObserver({ + elementRef: ref as MutableRefObject | null>, + shouldObserve: isPushed, + }); useEffect(() => { // This class doesn't actually do anything by OUI, but is nice to add for consumers (JIC) @@ -374,7 +367,7 @@ const OuiFlyout = forwardRef( className={classes} tabIndex={-1} style={newStyle || style} - ref={setRef}> + ref={ref}> {closeButton} {children} diff --git a/src/components/markdown_editor/markdown_editor_drop_zone.tsx b/src/components/markdown_editor/markdown_editor_drop_zone.tsx index 4fb017e97a..bff01eafae 100644 --- a/src/components/markdown_editor/markdown_editor_drop_zone.tsx +++ b/src/components/markdown_editor/markdown_editor_drop_zone.tsx @@ -28,7 +28,7 @@ * under the License. */ -import React, { FunctionComponent, useEffect } from 'react'; +import React, { FunctionComponent, useEffect, useRef } from 'react'; import classNames from 'classnames'; import { useDropzone } from 'react-dropzone'; import { OuiMarkdownEditorFooter } from './markdown_editor_footer'; @@ -102,15 +102,12 @@ export const OuiMarkdownEditorDropZone: FunctionComponent(null); + const editorFooterRef = useRef(null); - const { height: editorFooterHeight } = useResizeObserver( - editorFooterRef, - 'height' - ); + const { height: editorFooterHeight } = useResizeObserver({ + elementRef: editorFooterRef, + observableDimension: 'height', + }); useEffect(() => { if (editorFooterHeight !== 0) { @@ -222,7 +219,7 @@ export const OuiMarkdownEditorDropZone: FunctionComponent {children} { setHasUnacceptedItems(false); diff --git a/src/components/observer/mutation_observer/mutation_observer.test.tsx b/src/components/observer/mutation_observer/mutation_observer.test.tsx index 2b2765b7dd..6a5ced9e2d 100644 --- a/src/components/observer/mutation_observer/mutation_observer.test.tsx +++ b/src/components/observer/mutation_observer/mutation_observer.test.tsx @@ -28,7 +28,7 @@ * under the License. */ -import React, { FunctionComponent, useState } from 'react'; +import React, { FunctionComponent, useRef } from 'react'; import { mount } from 'enzyme'; import { OuiMutationObserver, useMutationObserver } from './mutation_observer'; import { sleep } from '../../../test'; @@ -73,12 +73,12 @@ describe('useMutationObserver', () => { const mutationCallback = jest.fn(); const Wrapper: FunctionComponent<{}> = jest.fn(({ children }) => { - const [ref, setRef] = useState(null); + const ref = useRef(null); useMutationObserver(ref, mutationCallback, { childList: true, subtree: true, }); - return
{children}
; + return
{children}
; }); const component = mount(Hello World
} />); diff --git a/src/components/observer/mutation_observer/mutation_observer.ts b/src/components/observer/mutation_observer/mutation_observer.ts index 7aa50d4feb..0878d1aec8 100644 --- a/src/components/observer/mutation_observer/mutation_observer.ts +++ b/src/components/observer/mutation_observer/mutation_observer.ts @@ -28,7 +28,7 @@ * under the License. */ -import { ReactNode, useEffect } from 'react'; +import { ReactNode, RefObject, useEffect } from 'react'; import { OuiObserver } from '../observer'; @@ -87,23 +87,20 @@ const makeMutationObserver = ( }; export const useMutationObserver = ( - container: Element | null, + elementRef: RefObject, callback: MutationCallback, observerOptions?: MutationObserverInit ) => { - useEffect( - () => { - if (container != null) { - const observer = makeMutationObserver( - container, - observerOptions, - callback - ); - return () => observer.disconnect(); - } - }, + useEffect(() => { + if (elementRef.current != null) { + const observer = makeMutationObserver( + elementRef.current, + observerOptions, + callback + ); + return () => observer.disconnect(); + } // ignore changing observerOptions - // eslint-disable-next-line - [container, callback] - ); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [elementRef, callback]); }; diff --git a/src/components/observer/resize_observer/resize_observer.test.tsx b/src/components/observer/resize_observer/resize_observer.test.tsx index d22c5fa602..31dad19f59 100644 --- a/src/components/observer/resize_observer/resize_observer.test.tsx +++ b/src/components/observer/resize_observer/resize_observer.test.tsx @@ -28,7 +28,7 @@ * under the License. */ -import React, { FunctionComponent, useState } from 'react'; +import React, { FunctionComponent, useRef } from 'react'; import { mount } from 'enzyme'; import { OuiResizeObserver, useResizeObserver } from './resize_observer'; import { sleep } from '../../../test'; @@ -105,9 +105,9 @@ describe.skip('testResizeObservers', () => { expect.assertions(2); const Wrapper: FunctionComponent<{}> = jest.fn(({ children }) => { - const [ref, setRef] = useState(null); - useResizeObserver(ref); - return
{children}
; + const ref = useRef(null); + useResizeObserver({ elementRef: ref }); + return
{children}
; }); const component = mount(Hello World
} />); diff --git a/src/components/observer/resize_observer/resize_observer.tsx b/src/components/observer/resize_observer/resize_observer.tsx index b2f42ba1f5..5d4a48f1f6 100644 --- a/src/components/observer/resize_observer/resize_observer.tsx +++ b/src/components/observer/resize_observer/resize_observer.tsx @@ -28,7 +28,15 @@ * under the License. */ -import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'; +import { + MutableRefObject, + ReactNode, + RefObject, + useCallback, + useEffect, + useRef, + useState, +} from 'react'; import { OuiObserver } from '../observer'; export interface OuiResizeObserverProps { @@ -87,58 +95,90 @@ const makeResizeObserver = ( return observer; }; -export const useResizeObserver = ( - container: Element | null, - dimension?: 'width' | 'height' -) => { - const [size, _setSize] = useState({ width: 0, height: 0 }); +export interface UseResizeObserverProps { + element?: HTMLElement | null; + elementRef?: MutableRefObject | RefObject | null; + elementId?: string; + observableDimension?: 'all' | 'width' | 'height'; + shouldObserve?: boolean; +} + +export const useResizeObserver = ({ + element, + elementRef, + elementId, + observableDimension = 'all', + shouldObserve = true, +}: UseResizeObserverProps) => { + const animationFrameRef = useRef(null); + const [size, setSize] = useState({ width: 0, height: 0 }); - // _currentDimensions and _setSize are used to only store the + // currentDimensions and handleElementResize are used to only store the // new state (and trigger a re-render) when the new dimensions actually differ - const _currentDimensions = useRef(size); - const setSize = useCallback( + const currentDimensions = useRef(size); + const handleElementResize = useCallback( (dimensions) => { - const doesWidthMatter = dimension !== 'height'; - const doesHeightMatter = dimension !== 'width'; + const isAllObservable = observableDimension === 'all'; + const isWidthObservable = observableDimension === 'width'; + const isHeightObservable = observableDimension === 'height'; + + const isWidthChanged = + currentDimensions.current.width !== dimensions.width; + const isHeightChanged = + currentDimensions.current.height !== dimensions.height; + if ( - (doesWidthMatter && - _currentDimensions.current.width !== dimensions.width) || - (doesHeightMatter && - _currentDimensions.current.height !== dimensions.height) + (isAllObservable && (isWidthChanged || isHeightChanged)) || + (isWidthObservable && isWidthChanged) || + (isHeightObservable && isHeightChanged) ) { - _currentDimensions.current = dimensions; - _setSize(dimensions); + cancelAnimationFrame(animationFrameRef.current!); + animationFrameRef.current = requestAnimationFrame(() => { + currentDimensions.current = dimensions; + setSize(dimensions); + }); } }, - [dimension] + [observableDimension] ); useEffect(() => { - if (container != null) { - // ResizeObserver's first call to the observation callback is scheduled in the future - // so find the container's initial dimensions now - const boundingRect = container.getBoundingClientRect(); - setSize({ - width: boundingRect.width, - height: boundingRect.height, - }); - - const observer = makeResizeObserver(container, () => { - // `entry.contentRect` provides incomplete `height` and `width` data. - // Use `getBoundingClientRect` to account for padding and border. - // https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly - const { height, width } = container.getBoundingClientRect(); - setSize({ - width, - height, + if (shouldObserve) { + let observableElement: HTMLElement | undefined | null = element; + if (elementRef) observableElement = elementRef.current; + if (elementId) observableElement = document.getElementById(elementId); + + if (observableElement) { + // ResizeObserver's first call to the observation callback is scheduled in the future + // so find the container's initial dimensions now + const { height, width } = observableElement.getBoundingClientRect(); + setSize({ width, height }); + + const observer = makeResizeObserver(observableElement, () => { + // `entry.contentRect` provides incomplete `height` and `width` data. + // Use `getBoundingClientRect` to account for padding and border. + // https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly + const { height, width } = observableElement!.getBoundingClientRect(); + handleElementResize({ width, height }); }); - }); - return () => observer && observer.disconnect(); - } else { - setSize({ width: 0, height: 0 }); + return () => { + observer && observer.disconnect(); + animationFrameRef.current && + cancelAnimationFrame(animationFrameRef.current); + }; + } else { + handleElementResize({ width: 0, height: 0 }); + } } - }, [container, setSize]); + }, [ + element, + elementRef, + elementId, + shouldObserve, + setSize, + handleElementResize, + ]); return size; }; diff --git a/src/components/resizable_container/resizable_container.tsx b/src/components/resizable_container/resizable_container.tsx index 59132cd1e1..3666f3ba5e 100644 --- a/src/components/resizable_container/resizable_container.tsx +++ b/src/components/resizable_container/resizable_container.tsx @@ -129,10 +129,10 @@ export const OuiResizableContainer: FunctionComponent { actions.initContainer(isHorizontal);