Fix lint

packages/polaris-viz/src/components/Legend/Legend.tsx

@@ -1,13 +1,12 @@
-import {Fragment, type RefObject} from 'react';
+import {Fragment} from 'react';
+import type {RefObject} from 'react';
 import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {useExternalHideEvents} from '../../hooks';
 import type {LegendData} from '../../types';
 
-import {LegendItem} from './components/';
-import type { LegendItemDimension } from './components/LegendItem/LegendItem';
-
-
+import {LegendItem} from './components';
+import type {LegendItemDimension} from './components';
 
 export interface LegendProps {
   data: LegendData[];
@@ -16,7 +15,7 @@ export interface LegendProps {
   theme?: string;
   itemDimensions?: RefObject<LegendItemDimension[]>;
   backgroundColor?: string;
-  lastVisibleIndex?: number,
+  lastVisibleIndex?: number;
 }
 
 export function Legend({
@@ -26,7 +25,7 @@ export function Legend({
   theme = DEFAULT_THEME_NAME,
   itemDimensions,
   lastVisibleIndex = 0,
-  backgroundColor
+  backgroundColor,
 }: LegendProps) {
   const {hiddenIndexes} = useExternalHideEvents();
 

packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx

@@ -2,7 +2,8 @@ import {
   getColorVisionEventAttrs,
   getColorVisionStylesForActiveIndex,
 } from '@shopify/polaris-viz-core';
-import {useEffect, type ReactNode, useRef} from 'react';
+import type {ReactNode} from 'react';
+import {useEffect, useRef} from 'react';
 
 import {
   LEGEND_ITEM_LEFT_PADDING,
@@ -18,7 +19,7 @@ import style from './LegendItem.scss';
 
 export interface LegendItemDimension {
   width: number;
-  height: number
+  height: number;
 }
 
 export interface LegendItemProps extends LegendData {
@@ -46,7 +47,7 @@ export function LegendItem({
   backgroundColor,
 }: LegendItemProps) {
   const selectedTheme = useTheme(theme);
-  const ref = useRef<HTMLButtonElement | null>(null)
+  const ref = useRef<HTMLButtonElement | null>(null);
 
   useEffect(() => {
     if (onDimensionChange && ref.current != null) {

packages/polaris-viz/src/components/Legend/components/LegendItem/index.ts

@@ -1 +1,2 @@
 export {LegendItem} from './LegendItem';
+export type {LegendItemDimension} from './LegendItem';

packages/polaris-viz/src/components/Legend/components/index.ts

@@ -1 +1,2 @@
 export {LegendItem} from './LegendItem';
+export type {LegendItemDimension} from './LegendItem';

packages/polaris-viz/src/components/Legend/index.ts

@@ -2,3 +2,4 @@ export {Legend} from './Legend';
 export {LegendItem} from './components';
 export type {LegendProps} from './Legend';
 export {estimateLegendItemWidth} from './utilities/estimateLegendItemWidth';
+export type {LegendItemDimension} from './components';

packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx

@@ -1,5 +1,5 @@
 import type {CSSProperties, Dispatch, SetStateAction} from 'react';
-import {useEffect, useMemo, useRef, useState} from 'react';
+import {Fragment, useEffect, useMemo, useRef, useState} from 'react';
 import isEqual from 'fast-deep-equal';
 import {
   getColorVisionEventAttrs,
@@ -94,7 +94,14 @@ export function LegendContainer({
       displayedData: allData.slice(0, lastVisibleIndex || 1),
       hiddenData: allData.slice(lastVisibleIndex || 1, allData.length),
     };
-  }, [allData, width, leftMargin, horizontalMargin, activatorWidth]);
+  }, [
+    allData,
+    width,
+    leftMargin,
+    horizontalMargin,
+    activatorWidth,
+    enableHideOverflow,
+  ]);
 
   const hasHiddenData =
     enableHideOverflow && displayedData.length < allData.length;
@@ -168,7 +175,7 @@ export function LegendContainer({
       style={{...styleMap[direction], ...shouldCenterTiles(position)}}
     >
       {renderLegendContent?.(colorVisionInteractionMethods) ?? (
-        <>
+        <Fragment>
           <Legend
             activeIndex={activeIndex}
             colorVisionType={colorVisionType}
@@ -189,7 +196,7 @@ export function LegendContainer({
               setActivatorWidth={setActivatorWidth}
             />
           )}
-        </>
+        </Fragment>
       )}
     </div>
   );

packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendTooltip.scss

@@ -9,11 +9,11 @@
 }
 
 .Tooltip {
+  position: absolute;
   display: flex;
   flex-direction: column;
   padding: 4px;
   backdrop-filter: blur(5px);
   border-radius: 5px;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.1);
-  position: absolute;
 }

packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendTooltip.tsx

@@ -1,14 +1,16 @@
-import {ReactNode, useCallback, useEffect, useRef, useState} from 'react';
-import {Legend} from '../../Legend/Legend';
-import type {LegendData} from '../../../types';
-
-import style from './HiddenLegendTooltip.scss';
+import {Fragment, useCallback, useEffect, useRef, useState} from 'react';
+import type {ReactNode} from 'react';
+import {createPortal} from 'react-dom';
 import {changeColorOpacity, useTheme} from '@shopify/polaris-viz-core';
+
+import type {LegendData} from '../../../types';
 import {TOOLTIP_BG_OPACITY} from '../../../constants';
 import {useBrowserCheck} from '../../../hooks/useBrowserCheck';
-import {createPortal} from 'react-dom';
 import {useRootContainer} from '../../../hooks/useRootContainer';
 import {TOOLTIP_MARGIN} from '../../TooltipWrapper';
+import {Legend} from '../../Legend';
+
+import style from './HiddenLegendTooltip.scss';
 
 interface Props {
   activeIndex: number;
@@ -87,10 +89,10 @@ export function HiddenLegendPopover({
       top: getYPosition(),
       left: getXPosition(),
     });
-  }, [setPosition, setActivatorWidth]);
+  }, [setPosition]);
 
   return (
-    <>
+    <Fragment>
       <button
         className={style.MoreText}
         ref={activatorRef}
@@ -127,6 +129,6 @@ export function HiddenLegendPopover({
         </div>,
         container,
       )}
-    </>
+    </Fragment>
   );
 }