From c87812e45a06c6bc2dbae2b9dadc29eac2680155 Mon Sep 17 00:00:00 2001
From: devadula-nandan <devadula.nandan@gmail.com>
Date: Thu, 7 Nov 2024 14:42:10 +0530
Subject: [PATCH] fix: hover token and useMemo in header story

---
 .../src/components/Datagrid/styles/_datagrid.scss               | 2 +-
 .../ibm-products/src/components/Datagrid/Datagrid.stories.jsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss
index 80af63d535..cfe32c5c14 100644
--- a/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss
+++ b/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss
@@ -532,7 +532,7 @@
 }
 
 .#{$block-class}__resizableColumn:hover {
-  background-color: $background-selected-hover;
+  background-color: $layer-selected-hover;
 
   .#{$block-class}__resizer {
     border-right: $spacing-01 solid $border-strong-01;
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.stories.jsx b/packages/ibm-products/src/components/Datagrid/Datagrid.stories.jsx
index d4f4c02110..e144fc7ff3 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid.stories.jsx
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid.stories.jsx
@@ -315,7 +315,7 @@ export const SelectableRow = () => {
 
 export const Header = () => {
   const [data] = useState(makeData(10));
-  const columns = getColumns(data);
+  const columns = React.useMemo(() => getColumns(data), []);
   const emptyStateTitle = 'Empty state title';
   const emptyStateDescription = 'Description explaining why the table is empty';
   const datagridState = useDatagrid({