feat: token list and height related improvements

packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls.tsx

@@ -1,6 +1,6 @@
 import { defaultMaxHeight } from '@lifi/widget';
 import { MenuItem, type SelectChangeEvent } from '@mui/material';
-import type { CSSProperties } from 'react';
+import type { CSSProperties, FocusEventHandler } from 'react';
 import { type ChangeEventHandler, useEffect, useId, useState } from 'react';
 import {
   type Layout,
@@ -96,10 +96,8 @@ export const LayoutControls = () => {
     setSelectedLayoutId(getLayoutMode(config?.theme?.container));
   }, [config?.theme?.container, setSelectedLayoutId]);
 
-  const handleSelectChange = (event: SelectChangeEvent<any>) => {
-    const newLayoutId = event.target.value;
-
-    switch (newLayoutId) {
+  const setInitialLayout = (layoutId: Layout) => {
+    switch (layoutId) {
       case 'restricted-height':
         setHeader();
 
@@ -166,6 +164,21 @@ export const LayoutControls = () => {
     }
   };
 
+  const handleSelectChange = (event: SelectChangeEvent<any>) => {
+    setHeightValue(undefined);
+    const newLayoutId = event.target.value;
+    setInitialLayout(newLayoutId);
+  };
+
+  const handleInputBlur: FocusEventHandler<HTMLInputElement> = (e) => {
+    const valueConvertedToNumber = parseInt(e.target.value, 10);
+
+    if (valueConvertedToNumber < defaultMaxHeight) {
+      setHeightValue(undefined);
+      setInitialLayout(selectedLayoutId);
+    }
+  };
+
   const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
     const valueConvertedToNumber = parseInt(e.target.value, 10);
     const height = Number.isFinite(valueConvertedToNumber)
@@ -260,6 +273,7 @@ export const LayoutControls = () => {
             value={heightValue ?? ''}
             placeholder={`${defaultMaxHeight}`}
             onChange={handleInputChange}
+            onBlur={handleInputBlur}
           />
         </CardRowContainer>
       ) : null}

packages/widget/src/components/AppContainer.tsx

@@ -60,28 +60,40 @@ export const RelativeContainer = styled(Box, {
 interface CssBaselineContainerProps {
   variant?: WidgetVariant;
   paddingTopAdjustment: number;
+  elementId: string;
 }
 
 const CssBaselineContainer = styled(ScopedCssBaseline, {
   shouldForwardProp: (prop) =>
-    !['variant', 'paddingTopAdjustment'].includes(prop as string),
-})<CssBaselineContainerProps>(({ theme, variant, paddingTopAdjustment }) => ({
-  display: 'flex',
-  flex: 1,
-  flexDirection: 'column',
-  overflowX: 'clip',
-  margin: 0,
-  width: '100%',
-  maxHeight:
-    variant === 'drawer' || theme.container?.display === 'flex'
-      ? 'none'
-      : theme.container?.maxHeight
-        ? theme.container?.maxHeight
-        : theme.container?.height || defaultMaxHeight,
-  overflowY: 'auto',
-  height: theme.container?.display === 'flex' ? 'auto' : '100%',
-  paddingTop: paddingTopAdjustment,
-}));
+    !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop as string),
+})<CssBaselineContainerProps>(
+  ({ theme, variant, paddingTopAdjustment, elementId }) => ({
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    overflowX: 'clip',
+    margin: 0,
+    width: '100%',
+    maxHeight:
+      variant === 'drawer' || theme.container?.display === 'flex'
+        ? 'none'
+        : theme.container?.maxHeight
+          ? theme.container?.maxHeight
+          : theme.container?.height || defaultMaxHeight,
+    overflowY: 'auto',
+    height: theme.container?.display === 'flex' ? 'auto' : '100%',
+    paddingTop: paddingTopAdjustment,
+    // The following allows for the token list to always fill the available height
+    // use of CSS.escape here is to deal with characters such as ':' returned by reacts useId hook
+    //   related issue - https://github.com/facebook/react/issues/26839
+    [`&:has(#${CSS.escape(createElementId(ElementId.TokenList, elementId))})`]:
+      {
+        height: theme.container?.maxHeight
+          ? theme.container?.maxHeight
+          : theme.container?.height || defaultMaxHeight,
+      },
+  }),
+);
 
 export const FlexContainer = styled(Container)(({ theme }) => ({
   display: 'flex',
@@ -110,6 +122,7 @@ export const AppContainer: React.FC<PropsWithChildren<{}>> = ({ children }) => {
         variant={variant}
         enableColorScheme
         paddingTopAdjustment={positionFixedAdjustment}
+        elementId={elementId}
         // ref={ref}
       >
         <FlexContainer disableGutters>{children}</FlexContainer>

packages/widget/src/components/TokenList/TokenList.tsx

@@ -5,9 +5,11 @@ import { useChain } from '../../hooks/useChain.js';
 import { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js';
 import { useTokenBalances } from '../../hooks/useTokenBalances.js';
 import { useTokenSearch } from '../../hooks/useTokenSearch.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { FormKeyHelper } from '../../stores/form/types.js';
 import { useFieldValues } from '../../stores/form/useFieldValues.js';
 import type { TokenAmount } from '../../types/token.js';
+import { createElementId, ElementId } from '../../utils/elements.js';
 import { TokenNotFound } from './TokenNotFound.js';
 import { VirtualizedTokenList } from './VirtualizedTokenList.js';
 import type { TokenListProps } from './types.js';
@@ -25,6 +27,7 @@ export const TokenList: FC<TokenListProps> = ({
     320,
     'tokenSearchFilter',
   );
+  const { elementId } = useWidgetConfig();
 
   const { chain, isLoading: isChainLoading } = useChain(selectedChainId);
   const { account } = useAccount({ chainType: chain?.chainType });
@@ -81,7 +84,11 @@ export const TokenList: FC<TokenListProps> = ({
     !tokenSearchFilter;
 
   return (
-    <Box ref={parentRef} style={{ height, overflow: 'auto' }}>
+    <Box
+      ref={parentRef}
+      style={{ height, overflow: 'auto' }}
+      id={createElementId(ElementId.TokenList, elementId)}
+    >
       {!tokens.length && !isLoading ? (
         <TokenNotFound formType={formType} />
       ) : null}

packages/widget/src/config/constants.ts

@@ -1 +1 @@
-export const defaultMaxHeight = 682;
+export const defaultMaxHeight = 686;

packages/widget/src/pages/SelectTokenPage/useTokenListHeight.ts

@@ -78,6 +78,9 @@ export const useTokenListHeight = ({
 
     const processResize = debounce(() => handleResize(), 40);
 
+    // calling this on initial mount prevents the lists resizing appearing glitchy
+    handleResize();
+
     const appContainer = document.getElementById(
       createElementId(ElementId.AppExpandedContainer, elementId),
     );

packages/widget/src/utils/elements.ts

@@ -3,6 +3,7 @@ export enum ElementId {
   Header = 'widget-header',
   RelativeContainer = 'widget-relative-container',
   ScrollableContainer = 'widget-scrollable-container',
+  TokenList = 'token-list',
 }
 
 export const createElementId = (ElementId: ElementId, elementId: string) =>