@transferwise/components 0.0.0-experimental-04d15ef → 0.0.0-experimental-bfbd26d

package/src/listItem/ListItem.css

@@ -5,21 +5,21 @@
   gap: 4px 16px;
   gap: var(--size-4) var(--size-16);
 }
-@container (min-width: 380px) {
+@container (min-width: 375px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto auto;
-    grid-template-areas: "media body control" "media info control" "media prompt prompt";
+    grid-template-areas: "media body control" "media info ." ". prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body control" "media info control";
+    grid-template-areas: "media body control" "media info .";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body control" "media prompt prompt";
+    grid-template-areas: "media body control" ". prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
     grid-template-columns: auto 1fr auto;
@@ -29,7 +29,7 @@
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body" "media info" "media prompt";
+    grid-template-areas: "media body" "media info" ". prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: auto 1fr;
@@ -52,12 +52,12 @@
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto;
-    grid-template-areas: "body control" "info control" "prompt prompt";
+    grid-template-areas: "body control" "info ." "prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "body control" "info control";
+    grid-template-areas: "body control" "info .";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
     grid-template-columns: 1fr auto;
@@ -93,7 +93,7 @@
     grid-template-areas: "body";
   }
 }
-@container (min-width: 290px) and (max-width: 380px) {
+@container (min-width: 297px) and (max-width: 375px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
     margin-bottom: 12px;
     margin-bottom: var(--size-12);
@@ -221,7 +221,7 @@
     grid-template-areas: "body";
   }
 }
-@container (max-width: 290px) {
+@container (max-width: 297px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto auto;
@@ -368,8 +368,8 @@
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   position: relative;
-  padding: 12px 0;
-  padding: var(--size-12) 0;
+  padding: 12px;
+  padding: var(--size-12);
   container-type: inline-size;
 }
 .wds-list-item + .wds-list-item-spotlight,
@@ -403,6 +403,12 @@
 .wds-list-item-interactive .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
   outline: none;
 }
+.wds-list-item-interactive:has(.wds-list-item-control:focus-visible),
+.wds-list-item-interactive:has(input[type="checkbox"]:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+  outline-offset: -1px;
+}
 .wds-list-item-interactive .wds-list-item-additional-info {
   --ring-outline-offset: 0;
 }
@@ -421,59 +427,24 @@
   position: absolute;
   inset: 0;
 }
-.wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-control:focus-visible),
-.wds-list-item-interactive.wds-list-item-spotlight:has(input[type="checkbox"]:focus-visible) {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-  outline-offset: -1px;
-}
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
+.wds-list-item-interactive:not(.disabled):not(:disabled):hover {
   background-color: var(--color-background-screen-hover);
 }
-.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-screen-active);
-}
-.wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
-  background-color: transparent;
-  background-color: initial;
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-control:focus-visible):before,
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(input[type="checkbox"]:focus-visible):before {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-  content: '';
-  position: absolute;
-  inset: 0 -8px;
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-  outline-offset: -1px;
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before,
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
-  content: '';
-  position: absolute;
-  inset: 0 -8px;
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
-  background-color: var(--color-background-screen-hover);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
-  background-color: var(--color-background-screen-active);
-}
-.wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
-  background-color: transparent;
-  background-color: initial;
-}
 .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
   background-color: var(--Button-background-hover);
   color: var(--Button-color-hover);
   transition: none;
 }
+.wds-list-item-interactive:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-screen-active);
+}
 .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
   transition: none;
 }
+.wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
+  background-color: transparent;
+  background-color: initial;
+}
 .wds-list-item-media {
   grid-area: media;
 }
@@ -510,6 +481,8 @@
 }
 .wds-list-item-control-wrapper {
   grid-area: control;
+  align-content: center;
+  max-height: var(--wds-list-item-control-wrapper-height);
 }
 .wds-list-item-control {
   flex: 0 0 auto;
@@ -525,12 +498,6 @@
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
-.wds-list-item-spotlight {
-  padding-left: 12px;
-  padding-left: var(--size-12);
-  padding-right: 12px;
-  padding-right: var(--size-12);
-}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);

package/src/listItem/ListItem.grid.css

@@ -5,21 +5,21 @@
   gap: 4px 16px;
   gap: var(--size-4) var(--size-16);
 }
-@container (min-width: 380px) {
+@container (min-width: 375px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto auto;
-    grid-template-areas: "media body control" "media info control" "media prompt prompt";
+    grid-template-areas: "media body control" "media info ." ". prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body control" "media info control";
+    grid-template-areas: "media body control" "media info .";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body control" "media prompt prompt";
+    grid-template-areas: "media body control" ". prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
     grid-template-columns: auto 1fr auto;
@@ -29,7 +29,7 @@
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body" "media info" "media prompt";
+    grid-template-areas: "media body" "media info" ". prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: auto 1fr;
@@ -52,12 +52,12 @@
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto;
-    grid-template-areas: "body control" "info control" "prompt prompt";
+    grid-template-areas: "body control" "info ." "prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "body control" "info control";
+    grid-template-areas: "body control" "info .";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
     grid-template-columns: 1fr auto;
@@ -93,7 +93,7 @@
     grid-template-areas: "body";
   }
 }
-@container (min-width: 290px) and (max-width: 380px) {
+@container (min-width: 297px) and (max-width: 375px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
     margin-bottom: 12px;
     margin-bottom: var(--size-12);
@@ -221,7 +221,7 @@
     grid-template-areas: "body";
   }
 }
-@container (max-width: 290px) {
+@container (max-width: 297px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto auto;

package/src/listItem/ListItem.grid.less

@@ -3,15 +3,15 @@
     display: grid;
     gap: var(--size-4) var(--size-16);
 
-    @container (min-width: 380px) {
+    @container (min-width: 375px) {
       &.wds-list-item-hasMedia-hasControl {
         &.wds-list-item-hasInfo-hasPrompt {
           grid-template-columns: auto 1fr auto;
           grid-template-rows: auto auto auto;
           grid-template-areas:
               "media body control"
-              "media info control"
-              "media prompt prompt";
+              "media info ."
+              ". prompt prompt";
         }
 
         &.wds-list-item-hasInfo-noPrompt {
@@ -19,7 +19,7 @@
           grid-template-rows: auto auto;
           grid-template-areas:
               "media body control"
-              "media info control"
+              "media info ."
         }
 
         &.wds-list-item-noInfo-hasPrompt {
@@ -27,7 +27,7 @@
           grid-template-rows: auto auto;
           grid-template-areas:
               "media body control"
-              "media prompt prompt";
+              ". prompt prompt";
         }
 
         &.wds-list-item-noInfo-noPrompt {
@@ -45,7 +45,7 @@
           grid-template-areas:
               "media body"
               "media info"
-              "media prompt";
+              ". prompt";
         }
 
         &.wds-list-item-hasInfo-noPrompt {
@@ -53,7 +53,7 @@
           grid-template-rows: auto auto auto;
           grid-template-areas:
               "media body"
-              "media info" 
+              "media info"
         }
 
         &.wds-list-item-noInfo-hasPrompt {
@@ -82,7 +82,7 @@
           grid-template-rows: auto auto auto;
           grid-template-areas:
               "body control"
-              "info control"
+              "info ."
               "prompt prompt";
         }
 
@@ -91,7 +91,7 @@
           grid-template-rows: auto auto;
           grid-template-areas:
               "body control"
-              "info control"
+              "info ."
         }
 
         &.wds-list-item-noInfo-hasPrompt {
@@ -149,7 +149,7 @@
       }
     }
 
-    @container (min-width: 290px) and (max-width: 380px) {
+    @container (min-width: 297px) and (max-width: 375px) {
       &.wds-list-item-hasMedia-hasControl {
         .wds-list-item-media {
           margin-bottom: var(--size-12);
@@ -246,7 +246,7 @@
           grid-template-rows: auto auto auto;
           grid-template-areas:
               "media media"
-              "body body" 
+              "body body"
               "info info";
         }
 
@@ -378,7 +378,7 @@
       }
     }
 
-    @container (max-width: 290px) {
+    @container (max-width: 297px) {
       &.wds-list-item-hasMedia-hasControl {
         &.wds-list-item-hasInfo-hasPrompt {
           grid-template-columns: auto 1fr;
@@ -461,7 +461,7 @@
           grid-template-rows: auto auto auto;
           grid-template-areas:
               "body"
-              "info" 
+              "info"
         }
 
         &.wds-list-item-noInfo-hasPrompt {

package/src/listItem/ListItem.less

@@ -7,7 +7,7 @@
   border-radius: var(--radius-medium);
   background-color: var(--color-background-screen);
   position: relative;
-  padding: var(--size-12) 0;
+  padding: var(--size-12);
   container-type: inline-size;
 
   & + .wds-list-item-spotlight,
@@ -47,6 +47,12 @@
       outline: none;
     }
 
+    &:has(.wds-list-item-control:focus-visible),
+    &:has(input[type="checkbox"]:focus-visible) {
+      .ring();
+      outline-offset: -1px;
+    }
+
     .wds-list-item-additional-info {
       .ring-offset-0
     }
@@ -70,88 +76,32 @@
       }
     }
 
-    // spotlighted list item has extra horizontal padding so the focus
-    // and hover styles can be rendered within the main container.
-    &.wds-list-item-spotlight {
-      &:has(.wds-list-item-control:focus-visible),
-      &:has(input[type="checkbox"]:focus-visible) {
-        .ring();
-        outline-offset: -1px;
-      }
-
-      &:not(.disabled, :disabled) {
-        &:hover {
-          background-color: var(--color-background-screen-hover);
-        }
-
-        &:active {
-          background-color: var(--color-background-screen-active);
-        }
-      }
-
-      &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
-        &:hover {
-          background-color: unset;
+    &:not(.disabled, :disabled):hover {
+        background-color: var(--color-background-screen-hover);
+
+        .wds-list-item-control-wrapper {
+            .wds-Button {
+              background-color: var(--Button-background-hover);
+              color: var(--Button-color-hover);
+              transition: none;
+            }
         }
-      }
     }
 
-    // non-spotlighted list item has no horizontal padding so the focus
-    // and hover styles have to be rendered out of bounds.
-    &:not(.wds-list-item-spotlight) {
-      &:has(.wds-list-item-control:focus-visible),
-      &:has(input[type="checkbox"]:focus-visible) {
-        &:before {
-          .ring();
-          content: '';
-          position: absolute;
-          inset: 0 -8px;
-          border-radius: var(--radius-medium);
-          outline-offset: -1px;
-        }
-      }
-
-      &:not(.disabled, :disabled) {
-        &:hover,
-        &:active {
-          &:before {
-            content: '';
-            position: absolute;
-            inset: 0 -8px;
-            border-radius: var(--radius-medium);
-          }
-        }
-
-        &:hover:before {
-          background-color: var(--color-background-screen-hover);
-        }
-
-        &:active:before {
-          background-color: var(--color-background-screen-active);
-        }
-      }
-
-      &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
-        &:hover:before {
-          background-color: unset;
-        }
-      }
+    &:not(.disabled, :disabled):active {
+        background-color: var(--color-background-screen-active);
     }
 
-    &:not(.disabled, :disabled):hover {
-      .wds-list-item-control-wrapper {
+    .wds-list-item-button-control {
         .wds-Button {
-          background-color: var(--Button-background-hover);
-          color: var(--Button-color-hover);
           transition: none;
         }
       }
-    }
 
-    .wds-list-item-button-control {
-        .wds-Button {
-          transition: none;
-        }
+    &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
+      &:hover {
+        background-color: unset;
+      }
     }
   }
 
@@ -190,6 +140,8 @@
 
   &-control-wrapper {
       grid-area: control;
+      align-content: center;
+      max-height: var(--wds-list-item-control-wrapper-height)
   }
 
   &-control {
@@ -212,9 +164,6 @@
 
 
   &-spotlight {
-      padding-left: var(--size-12);
-      padding-right: var(--size-12);
-
       &-active {
           background-color: var(--color-background-neutral);
           &:not(.disabled, :disabled):hover {

package/src/listItem/ListItem.tsx

@@ -4,6 +4,7 @@ import {
   useId,
   useMemo,
   useState,
+  useEffect,
   type PropsWithChildren,
   type ReactNode,
 } from 'react';
@@ -22,7 +23,11 @@ import { AvatarView } from './AvatarView';
 import { Image } from './Image';
 import { Prompt } from './Prompt';
 import { PrimitiveAnchor } from '../primitives';
-import { ListItemContext, type ListItemContextData } from './ListItemContext';
+import {
+  ListItemContext,
+  type ListItemContextData,
+  type ListItemMediaSize,
+} from './ListItemContext';
 
 export type ListItemTypes =
   | 'non-interactive'
@@ -119,6 +124,8 @@ export const ListItem = ({
   const idPrefix = useId();
   const [controlProps, setControlProps] = useState<ListItemControlProps>({});
   const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');
+  const [mediaSize, setMediaSize] = useState<ListItemMediaSize | undefined>();
+
   const ids: ListItemContextData['ids'] = {
     title: `${idPrefix}_title`,
     ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),
@@ -156,11 +163,13 @@ export const ListItem = ({
     () => ({
       setControlType,
       setControlProps,
+      setMediaSize,
       ids,
       props: { disabled, inverted },
+      mediaSize,
       describedByIds,
     }),
-    [describedByIds],
+    [describedByIds, mediaSize],
   );
   const gridColumnsStyle = {
     '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',
@@ -312,6 +321,11 @@ export const ListItem = ({
               className={clsx('wds-list-item-control-wrapper', {
                 'wds-list-item-button-control': controlType === 'button',
               })}
+              style={
+                {
+                  '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',
+                } as React.CSSProperties
+              }
             >
               {control}
             </Body>

package/src/listItem/ListItemContext.tsx

@@ -1,9 +1,13 @@
 import { createContext } from 'react';
 import type { ListItemTypes, ListItemControlProps, Props as ListItemProps } from './ListItem';
+import type { ListItemAvatarViewProps } from './AvatarView';
+
+export type ListItemMediaSize = 32 | 40 | 48 | 56 | 72;
 
 export type ListItemContextData = {
   setControlType: (type: ListItemTypes) => void;
   setControlProps: (props: ListItemControlProps) => void;
+  setMediaSize: (size: ListItemMediaSize | undefined) => void;
   ids: {
     title: string;
     subtitle?: string;
@@ -14,6 +18,7 @@ export type ListItemContextData = {
     prompt?: string;
   };
   props: Pick<ListItemProps, 'disabled' | 'inverted'>;
+  mediaSize?: ListItemAvatarViewProps['size'];
   describedByIds: string;
 };
 

package/src/listItem/_stories/ListItem.story.tsx

@@ -241,7 +241,7 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
     const [props, previewProps] = getPropsForPreview(args);
 
     return (
-      <ol key={args.disabled ? 'disabled' : 'enabled'} className="list-unstyled">
+      <ol className="list-unstyled">
         <ListItem {...props} {...previewProps} />
       </ol>
     );
@@ -277,9 +277,9 @@ export const Responsiveness: Story = {
     return (
       <ol
         className="list-unstyled"
-        style={{ display: 'grid', gridTemplateColumns: '290px 350px 381px', gap: 16 }}
+        style={{ display: 'grid', gridTemplateColumns: '320px 360px 400px', gap: 16 }}
       >
-        <div style={{ width: '290px' }}>
+        <div style={{ width: '320px' }}>
           <ListItem
             {...args}
             subtitle={lorem10}
@@ -289,7 +289,7 @@ export const Responsiveness: Story = {
             prompt={PROMPTS.interactive}
           />
         </div>
-        <div style={{ width: '350px' }}>
+        <div style={{ width: '360px' }}>
           <ListItem
             {...args}
             subtitle={lorem10}
@@ -299,7 +299,7 @@ export const Responsiveness: Story = {
             prompt={PROMPTS.interactive}
           />
         </div>
-        <div style={{ width: '381px' }}>
+        <div style={{ width: '400px' }}>
           <ListItem
             {...args}
             subtitle={lorem10}

package/src/listItem/_stories/ListItem.variants.test.story.tsx

@@ -71,18 +71,21 @@ const generateVariantsForControl = (controlType: ControlType): Story => {
   const additionalInfo = isInteractive ? infoWithLink : infoWithoutLink;
   const variants = [
     { title },
+    { title, valueTitle },
     { title, subtitle },
+    { title, valueTitle, valueSubtitle },
     { title, subtitle, inverted: true },
     { title, subtitle, valueTitle },
     { title, subtitle, valueTitle, inverted: true },
     { title, subtitle, valueTitle, valueSubtitle },
     { title, subtitle, valueTitle, valueSubtitle, inverted: true },
     { media, title },
+    { media, title, valueTitle },
+    { media, title, subtitle },
+    { media, title, valueTitle, valueSubtitle },
     { media, title, subtitle },
     { media, title, subtitle, valueTitle },
     { media, title, subtitle, valueTitle, valueSubtitle },
-    { media, title },
-    { media, title, subtitle },
     { media, title, subtitle, additionalInfo: infoWithoutLink },
     isInteractive ? { media, title, subtitle, additionalInfo: infoWithLink } : null,
     { media, title, subtitle, additionalInfo, valueTitle },

package/src/listItem/useListItemMedia.tsx

@@ -0,0 +1,13 @@
+import { useContext, useEffect } from 'react';
+import { ListItemContext, type ListItemContextData } from './ListItemContext';
+import type { ListItemAvatarViewProps } from './AvatarView';
+
+export function useListItemMedia(size?: ListItemAvatarViewProps['size']) {
+  const { setMediaSize, mediaSize } = useContext<ListItemContextData>(ListItemContext);
+
+  useEffect(() => {
+    setMediaSize(size);
+  }, [size, setMediaSize]);
+
+  return { mediaSize, setMediaSize };
+}