chore: update dependencies and improve sidebar component structure

- Updated various dependencies in package.json and bun.lock for better performance and security.
- Refactored sidebar component to remove unnecessary state management and improve layout structure.
- Enhanced sidebar styling for better responsiveness and visual consistency.
- Cleaned up unused properties and optimized code in sidebar-related files.

Author: prabhuignoto

bun.lock

@@ -13,24 +13,24 @@
     "@babel/preset-env": "^7.28.5",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@eslint/js": "^9.39.1",
+    "@eslint/js": "^9.39.2",
     "@relative-ci/agent": "^4.3.1",
-    "@sentry/react": "^10.29.0",
+    "@sentry/react": "^10.30.0",
     "@sentry/tracing": "^7.120.4",
     "@types/bluebird": "^3.5.42",
-    "@types/node": "^24.10.1",
+    "@types/node": "^24.10.4",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.48.1",
-    "@typescript-eslint/parser": "^8.48.1",
-    "autoprefixer": "^10.4.22",
+    "@typescript-eslint/eslint-plugin": "^8.49.0",
+    "@typescript-eslint/parser": "^8.49.0",
+    "autoprefixer": "^10.4.23",
     "cssnano": "^7.1.2",
-    "dompurify": "^3.3.0",
+    "dompurify": "^3.3.1",
     "esbuild": "^0.27.1",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-jest": "^29.2.1",
+    "eslint-plugin-jest": "^29.5.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-promise": "7.2.1",
@@ -47,10 +47,10 @@
     "postcss-reporter": "^7.1.0",
     "prettier": "^3.7.4",
     "pretty-quick": "^4.2.2",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
-    "sass": "^1.94.2",
-    "snyk": "^1.1301.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "sass": "^1.96.0",
+    "snyk": "^1.1301.1",
     "stylelint": "16.26.1",
     "stylelint-config-sass-guidelines": "^12.1.0",
     "stylelint-order": "^7.0.0",
@@ -131,9 +131,9 @@
     "@vitejs/plugin-react-swc": "^4.2.2",
     "@vitest/coverage-v8": "^4.0.15",
     "browserslist": "^4.28.1",
-    "knip": "^5.71.0",
+    "knip": "^5.73.4",
     "lightningcss": "^1.30.2",
-    "oxlint": "^1.31.0",
+    "oxlint": "^1.32.0",
     "postcss-scss": "^4.0.9",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-recommended": "^17.0.0",

package.json

@@ -37,8 +37,6 @@ export function useResponsiveColumns(
           width: 150,
           parseHtml: true,
         },
-        { name: 'optional', type: 'string' },
-        { name: 'type', type: 'string' },
       ];
     }
 
@@ -87,8 +85,6 @@ export function useResponsiveColumns(
           width: widths.default,
           parseHtml: true,
         },
-        { name: 'optional', type: 'string' },
-        { name: 'type', type: 'string' },
       ];
     }
 

packages/documentation/common/hooks/useResponsiveColumns.ts

@@ -76,3 +76,4 @@ const App = () => (
   />
 );`;
 
+

packages/documentation/components/data-grid/code-strings.tsx

@@ -36,3 +36,4 @@ export default function App() {
   return <Sidebar enableSearch focusable groups={groups} />;
 }`;
 
+

packages/documentation/components/sidebar/code-strings.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useMemo } from 'react';
+import React from 'react';
 import { AccordionGroup } from '../accordion-group/accordion-group';
 import { List } from '../list/list';
 import { SidebarGroupsModel } from './sidebar-model';
@@ -11,19 +11,12 @@ const SidebarGroups: React.FunctionComponent<SidebarGroupsModel> = ({
   listMaxHeight,
   focusable,
   onSelection,
-  sideBarHeight,
   sectionsCollapsible,
   icons,
   enableSearch,
 }) => {
-  const groupsWrapperStyle = useMemo(() => {
-    return {
-      height: `${sideBarHeight}px`,
-    } as CSSProperties;
-  }, [sideBarHeight]);
-
   return (
-    <div className={styles.groups_wrapper} style={groupsWrapperStyle}>
+    <div className={styles.groups_wrapper}>
       <AccordionGroup
         titles={groups.filter(grp => grp.visible).map(grp => grp.title)}
         expanded

packages/lib/components/sidebar/sidebar-groups.tsx

@@ -44,5 +44,4 @@ export type SidebarGroupsModel = Pick<
 > & {
   groups: SidebarGroupModel[];
   onSelection: (option: ListOption[], id?: string) => void;
-  sideBarHeight?: number;
 };

packages/lib/components/sidebar/sidebar-model.ts

@@ -6,9 +6,10 @@ $searchbar-height: 40px;
 
 .sidebar {
   align-items: flex-start;
-
   display: flex;
+  flex-direction: column;
   height: var(--sidebar-height, 100%);
+  min-height: 100%;
   overflow: hidden;
   position: relative;
 
@@ -70,6 +71,11 @@ $searchbar-height: 40px;
 }
 
 .content_wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+
   &.border {
     @extend %border;
   }
@@ -97,7 +103,8 @@ $searchbar-height: 40px;
 }
 
 .groups_wrapper {
-  height: calc(100% - $searchbar-height);
+  flex: 1;
+  min-height: 0;
   overflow-x: hidden;
   overflow-y: auto;
   padding-top: 0.2rem;

packages/lib/components/sidebar/sidebar.module.scss

@@ -45,16 +45,6 @@ const Sidebar: React.FunctionComponent<SidebarProps> = ({
       : []
   );
 
-  const [sidebarHeight, setSidebarHeight] = useState(0);
-
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  // Stabilize onSelect callback to prevent infinite loops
-  const onSelectRef = useRef(onSelect);
-  useLayoutEffect(() => {
-    onSelectRef.current = onSelect;
-  });
-
   const isDarkMode = useMemo(() => isDark(), []);
 
   const handleSelection = useCallback(
@@ -71,7 +61,6 @@ const Sidebar: React.FunctionComponent<SidebarProps> = ({
             })),
           }));
 
-          // Find group from the updated state, not stale _groups
           updatedGroup = updated.find(grp => grp.id === groupId);
           return updated;
         });
@@ -120,25 +109,21 @@ const Sidebar: React.FunctionComponent<SidebarProps> = ({
     return {
       '--sidebar-height': Number.isInteger(height) ? `${height}px` : height,
     } as CSSProperties;
-  }, []);
+  }, [height]);
 
   const contentWrapper = useMemo(() => {
     return classNames(styles.content_wrapper, {
       [styles.border]: border,
     });
   }, [border]);
 
-  const onRef = useCallback((node: HTMLDivElement) => {
-    if (node) {
-      ref.current = node;
-      setSidebarHeight(
-        node.clientHeight ? node.clientHeight : window.innerHeight
-      );
-    }
-  }, []);
+  const onSelectRef = useRef(onSelect);
+  useLayoutEffect(() => {
+    onSelectRef.current = onSelect;
+  });
 
   return (
-    <div className={sideBarClass} style={style} ref={onRef}>
+    <div className={sideBarClass} style={style}>
       <div className={contentWrapper}>
         {enableSearch && (
           <div className={styles.search_wrapper}>
@@ -160,7 +145,6 @@ const Sidebar: React.FunctionComponent<SidebarProps> = ({
           onSelection={handleSelection}
           groupIconColor={groupIconColor}
           groupTitleColor={groupTitleColor}
-          sideBarHeight={sidebarHeight}
           listMaxHeight={listMaxHeight}
           sectionsCollapsible={sectionsCollapsible}
           icons={icons}