@instructure/outcomes-ui 4.1.2 → 4.1.3

package/es/translated/da-x-k12/components/Gradebook/popovers/StudentPopover/index.stories.js

@@ -1,6 +1,6 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _regenerator from "@babel/runtime/helpers/esm/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { within, userEvent } from '@storybook/testing-library';
@@ -9,7 +9,8 @@ import { Flex } from '@instructure/ui-flex';
 import { Text } from '@instructure/ui-text';
 import { Button } from '@instructure/ui-buttons';
 import { StoryWrapper } from "../../storybook/decorators.js";
-import { createStudent, mockStudent, mockStudentLongName, mockMasteryScores, highMasteryScores, lowMasteryScores, unassessedMasteryScores, mockUserDetailsDefault, mockUserDetailsSingleSection, mockUserDetailsManySections, mockUserDetailsLongCourseName, mockUserDetailsNoSections } from "../../__mocks__/mockData.js";
+import { mockStudent, mockStudentLongName } from "../../gradebook-table/StudentCell/__mocks__/mockData.js";
+import { mockMasteryScores, highMasteryScores, lowMasteryScores, unassessedMasteryScores, mockCaptionDefault } from "./__mocks__/mockData.js";
 import { StudentPopover } from "../../../../index.js"; // Storybook's args type (Partial<Props>) doesn't handle discriminated
 // unions in StudentPopoverProps so define a flatten version of it
 var meta = {
@@ -25,13 +26,13 @@ var meta = {
 export default meta;
 var createStoryArgs = function createStoryArgs(student) {
   var masteryScores = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : mockMasteryScores;
-  return {
+  return _objectSpread(_objectSpread({
     student: student,
-    studentName: student.display_name,
-    userDetails: mockUserDetailsDefault,
+    studentName: student.displayName
+  }, mockCaptionDefault), {}, {
     masteryScores: masteryScores,
     studentGradesUrl: "/courses/123/grades/".concat(student.id)
-  };
+  });
 };
 var openPopover = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(_ref) {
@@ -76,27 +77,24 @@ export var LongStudentName = {
   args: createStoryArgs(mockStudentLongName),
   play: openPopover
 };
-export var LongCourseName = {
-  args: _objectSpread(_objectSpread({}, createStoryArgs(createStudent('4', 'Oliver', 'Brown'))), {}, {
-    userDetails: mockUserDetailsLongCourseName
-  }),
-  play: openPopover
-};
-export var ManySections = {
-  args: _objectSpread(_objectSpread({}, createStoryArgs(createStudent('3', 'Emma', 'Wilson'))), {}, {
-    userDetails: mockUserDetailsManySections
+export var WithDescriptionOnly = {
+  args: _objectSpread(_objectSpread({}, createStoryArgs(mockStudent)), {}, {
+    description: 'Introduction to Computer Science',
+    metadata: void 0
   }),
   play: openPopover
 };
-export var NoSections = {
-  args: _objectSpread(_objectSpread({}, createStoryArgs(createStudent('6', 'Liam', 'Miller'))), {}, {
-    userDetails: mockUserDetailsNoSections
+export var WithLongDescription = {
+  args: _objectSpread(_objectSpread({}, createStoryArgs(mockStudent)), {}, {
+    description: 'Advanced Placement European History: Renaissance to Modern Era',
+    metadata: 'AP Section'
   }),
   play: openPopover
 };
-export var SingleSection = {
-  args: _objectSpread(_objectSpread({}, createStoryArgs(createStudent('2', 'Jane', 'Doe'))), {}, {
-    userDetails: mockUserDetailsSingleSection
+export var WithLongMetaData = {
+  args: _objectSpread(_objectSpread({}, createStoryArgs(mockStudent)), {}, {
+    description: 'World History',
+    metadata: 'Section A - Morning, Section B - Afternoon, Section C - Evening, Section D - Online'
   }),
   play: openPopover
 };
@@ -104,9 +102,10 @@ export var CustomHeader = {
   args: createStoryArgs(mockStudent),
   render: function render(args) {
     return /*#__PURE__*/React.createElement(StudentPopover, Object.assign({}, args, {
-      student: void 0,
+      avatarUrl: void 0,
       studentName: "John Doe",
-      userDetails: void 0,
+      description: void 0,
+      metadata: void 0,
       headerOverride: /*#__PURE__*/React.createElement(Flex, {
         padding: "0 0 medium 0"
       }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Text, null, "Custom Header for ", args.studentName)))
@@ -152,7 +151,7 @@ export var CustomActions = {
 };
 export var Loading = {
   args: {
-    studentName: mockStudent.display_name,
+    studentName: mockStudent.displayName,
     studentGradesUrl: "/courses/123/grades/".concat(mockStudent.id),
     isLoading: true
   },
@@ -160,7 +159,7 @@ export var Loading = {
 };
 export var ErrorMessage = {
   args: {
-    studentName: mockStudent.display_name,
+    studentName: mockStudent.displayName,
     studentGradesUrl: "/courses/123/grades/".concat(mockStudent.id),
     error: 'Failed to load student details. Please try again.'
   },

package/es/translated/da-x-k12/components/Gradebook/storybook/decorators.js

@@ -6,26 +6,12 @@ import { action } from '@storybook/addon-actions';
 import { Checkbox } from '@instructure/ui-checkbox';
 import { Flex } from '@instructure/ui-flex';
 import { NameDisplayFormatSelector } from "../toolbar/SettingsTray/NameDisplaySelector.js";
-import { StudentPopover } from "../popovers/StudentPopover/index.js";
 import { NameDisplayFormat } from "../../../util/gradebook/constants.js";
 import { GradebookApp } from "../GradebookApp.js";
 import { GradebookAppProvider } from "../context/GradebookAppContext/index.js";
-import { createStudent, mockUserDetailsDefault } from "../__mocks__/mockData.js";
-export var createStudentPopover = function createStudentPopover(_ref) {
-  var studentName = _ref.studentName,
-    student = _ref.student,
-    masteryScores = _ref.masteryScores;
-  return /*#__PURE__*/React.createElement(StudentPopover, {
-    student: student || createStudent('1', 'John', 'Doe'),
-    studentName: studentName,
-    masteryScores: masteryScores,
-    studentGradesUrl: "/test-url",
-    userDetails: mockUserDetailsDefault
-  });
-};
-export var ExampleSettingsTrayContent = function ExampleSettingsTrayContent(_ref2) {
-  var settings = _ref2.settings,
-    _onChange = _ref2.onChange;
+export var ExampleSettingsTrayContent = function ExampleSettingsTrayContent(_ref) {
+  var settings = _ref.settings,
+    _onChange = _ref.onChange;
   return /*#__PURE__*/React.createElement(Flex, {
     direction: "column",
     gap: "large"
@@ -48,9 +34,9 @@ export var ExampleSettingsTrayContent = function ExampleSettingsTrayContent(_ref
     }
   }));
 };
-export var StoryWrapper = function StoryWrapper(_ref3) {
-  var children = _ref3.children,
-    masteryLevelConfig = _ref3.masteryLevelConfig;
+export var StoryWrapper = function StoryWrapper(_ref2) {
+  var children = _ref2.children,
+    masteryLevelConfig = _ref2.masteryLevelConfig;
   return /*#__PURE__*/React.createElement(GradebookApp, {
     config: {
       masteryLevelConfig: masteryLevelConfig

package/es/translated/da-x-k12/components/Gradebook/table/Cell/index.js

@@ -1,9 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["id", "children", "width", "boxShadow", "isSticky", "isStacked", "header"];
-import React from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { View } from '@instructure/ui-view';
-export var Cell = function Cell(_ref) {
+var CellComponent = function CellComponent(_ref) {
   var id = _ref.id,
     children = _ref.children,
     width = _ref.width,
@@ -12,19 +12,34 @@ export var Cell = function Cell(_ref) {
     isStacked = _ref.isStacked,
     header = _ref.header,
     props = _objectWithoutProperties(_ref, _excluded);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    focus = _React$useState2[0],
-    setFocus = _React$useState2[1];
-  var cellRef = React.useRef(null);
-  var handleBlur = function handleBlur(event) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    focus = _useState2[0],
+    setFocus = _useState2[1];
+  var cellRef = useRef(null);
+  var handleBlur = useCallback(function (event) {
     var _cellRef$current;
     var relatedTarget = event.relatedTarget;
     if (relatedTarget && (_cellRef$current = cellRef.current) !== null && _cellRef$current !== void 0 && _cellRef$current.contains(relatedTarget)) {
       return;
     }
     setFocus(false);
-  };
+  }, []);
+  var handleFocus = useCallback(function () {
+    return setFocus(true);
+  }, []);
+  var elementRef = useCallback(function (el) {
+    if (el instanceof HTMLElement) {
+      cellRef.current = el;
+    }
+  }, []);
+  var themeOverride = useMemo(function () {
+    return function (_componentTheme, currentTheme) {
+      return {
+        shadowAbove: boxShadow !== null && boxShadow !== void 0 ? boxShadow : "2px 0 0 0 ".concat(currentTheme.colors.contrasts.grey1214)
+      };
+    };
+  }, [boxShadow]);
   return /*#__PURE__*/React.createElement(View, Object.assign({
     id: id,
     width: width,
@@ -38,20 +53,55 @@ export var Cell = function Cell(_ref) {
     insetInlineStart: isSticky ? '0' : void 0,
     background: isSticky && !props.background ? 'primary' : props.background,
     focusPosition: "inset",
-    elementRef: function elementRef(el) {
-      if (el instanceof HTMLElement) {
-        cellRef.current = el;
-      }
-    },
-    onFocus: function onFocus() {
-      return setFocus(true);
-    },
+    elementRef: elementRef,
+    onFocus: handleFocus,
     onBlur: handleBlur,
-    themeOverride: function themeOverride(_componentTheme, currentTheme) {
-      return {
-        shadowAbove: boxShadow !== null && boxShadow !== void 0 ? boxShadow : "2px 0 0 0 ".concat(currentTheme.colors.contrasts.grey1214)
-      };
-    }
+    themeOverride: themeOverride
   }, props), header ? typeof header === 'function' ? header() : header : null, typeof children === 'function' ? children(focus) : children);
 };
+
+// Custom comparison function for React.memo
+// We need to compare most props, but be smart about function props
+var arePropsEqual = function arePropsEqual(prevProps, nextProps) {
+  // If the id changed, definitely re-render
+  if (prevProps.id !== nextProps.id) return false;
+
+  // Check data attributes that affect keyboard navigation
+  if (prevProps['data-row-index'] !== nextProps['data-row-index']) return false;
+  if (prevProps['data-col-key'] !== nextProps['data-col-key']) return false;
+  if (prevProps['data-cell-id'] !== nextProps['data-cell-id']) return false;
+
+  // Check visual props
+  if (prevProps.width !== nextProps.width) return false;
+  if (prevProps.boxShadow !== nextProps.boxShadow) return false;
+  if (prevProps.isSticky !== nextProps.isSticky) return false;
+  if (prevProps.isStacked !== nextProps.isStacked) return false;
+
+  // Check other props that could change
+  if (prevProps.tabIndex !== nextProps.tabIndex) return false;
+
+  // onKeyDown should be stable (useCallback), but check just in case
+  if (prevProps.onKeyDown !== nextProps.onKeyDown) return false;
+
+  // For function children (render functions), we can't compare the function itself
+  // Instead, we rely on the fact that if all other props (especially data-cell-id
+  // which includes col.key and row data) are the same, the function would produce
+  // the same output. This is safe because:
+  // - row data doesn't change during column reorder
+  // - col.key is stable per column
+  // - The function just calls col.render with that data
+  var prevChildrenIsFunction = typeof prevProps.children === 'function';
+  var nextChildrenIsFunction = typeof nextProps.children === 'function';
+  if (prevChildrenIsFunction !== nextChildrenIsFunction) return false;
+
+  // For non-function children, compare directly
+  if (!nextChildrenIsFunction && prevProps.children !== nextProps.children) return false;
+
+  // For function children, skip comparison - they're always new references but produce same output
+  // when all other props are the same
+
+  return true;
+};
+export var Cell = /*#__PURE__*/React.memo(CellComponent, arePropsEqual);
+Cell.displayName = 'Cell';
 export default Cell;

package/es/translated/da-x-k12/components/Gradebook/table/ColumnHeader/index.js

@@ -3,7 +3,40 @@ var _excluded = ["children", "isSticky", "connectDragSource", "connectDragPrevie
   _excluded2 = ["onMove", "onDragEnd", "itemId", "index", "type", "component"];
 import React, { useEffect } from 'react';
 import { View } from '@instructure/ui-view';
-export var ColumnHeader = function ColumnHeader(_ref) {
+// Custom comparison function to prevent re-renders when column order changes
+// but individual column data hasn't changed
+var arePropsEqual = function arePropsEqual(prevProps, nextProps) {
+  // Check stable identifier
+  if (prevProps.id !== nextProps.id) return false;
+  if (prevProps['data-cell-id'] !== nextProps['data-cell-id']) return false;
+  if (prevProps['data-col-key'] !== nextProps['data-col-key']) return false;
+
+  // Check visual props
+  if (prevProps.width !== nextProps.width) return false;
+  if (prevProps.isSticky !== nextProps.isSticky) return false;
+  if (prevProps.isStacked !== nextProps.isStacked) return false;
+
+  // Check keyboard navigation
+  if (prevProps.onKeyDown !== nextProps.onKeyDown) return false;
+  if (prevProps.tabIndex !== nextProps.tabIndex) return false;
+
+  // Check drag-drop state (these should be stable via useCallback)
+  if (prevProps.connectDragSource !== nextProps.connectDragSource) return false;
+  if (prevProps.connectDragPreview !== nextProps.connectDragPreview) return false;
+  if (prevProps.connectDropTarget !== nextProps.connectDropTarget) return false;
+  if (prevProps.isDragging !== nextProps.isDragging) return false;
+
+  // onMove and onDragEnd should be stable (useCallback in stories/parent)
+  // but we don't need to check them since they're filtered out before DOM
+
+  // Skip children comparison - children might be new React elements on each render,
+  // but if all stable identifiers (id, data-cell-id, data-col-key) are the same,
+  // the column hasn't actually changed and we can safely skip re-rendering.
+  // This matches Cell's approach of relying on stable props rather than comparing children.
+
+  return true;
+};
+var ColumnHeaderComponent = function ColumnHeaderComponent(_ref) {
   var children = _ref.children,
     isSticky = _ref.isSticky,
     connectDragSource = _ref.connectDragSource,
@@ -35,13 +68,21 @@ export var ColumnHeader = function ColumnHeader(_ref) {
       });
     }
   }, [connectDragPreview]);
-  var headerContent = /*#__PURE__*/React.createElement("div", {
-    style: {
+  var headerContentStyle = React.useMemo(function () {
+    return {
       opacity: isDragging ? 0.5 : 1,
       transition: 'opacity 0.15s ease-in-out',
       width: cleanViewProps.width,
       cursor: connectDragSource ? 'grab' : 'default'
-    },
+    };
+  }, [isDragging, cleanViewProps.width, connectDragSource]);
+  var elementRef = React.useCallback(function (ref) {
+    if (connectDropTarget && ref instanceof HTMLElement) {
+      connectDropTarget(ref);
+    }
+  }, [connectDropTarget]);
+  var headerContent = /*#__PURE__*/React.createElement("div", {
+    style: headerContentStyle,
     "data-testid": "column-header-content"
   }, children);
   var content = /*#__PURE__*/React.createElement(View, Object.assign({
@@ -49,11 +90,7 @@ export var ColumnHeader = function ColumnHeader(_ref) {
     as: isStacked ? 'div' : 'th',
     scope: "col",
     focusPosition: "inset",
-    elementRef: function elementRef(ref) {
-      if (connectDropTarget && ref instanceof HTMLElement) {
-        connectDropTarget(ref);
-      }
-    },
+    elementRef: elementRef,
     position: isSticky ? 'sticky' : 'static',
     insetInlineStart: isSticky ? '0' : void 0,
     background: !cleanViewProps.background ? 'primary' : cleanViewProps.background,
@@ -61,4 +98,6 @@ export var ColumnHeader = function ColumnHeader(_ref) {
     stacking: "above"
   }, cleanViewProps), connectDragSource ? connectDragSource(headerContent) : headerContent);
   return content;
-};
+};
+export var ColumnHeader = /*#__PURE__*/React.memo(ColumnHeaderComponent, arePropsEqual);
+ColumnHeader.displayName = 'ColumnHeader';

package/es/translated/da-x-k12/components/Gradebook/table/Row/index.js

@@ -2,7 +2,7 @@ import React, { Children, isValidElement, useContext } from 'react';
 import { View } from '@instructure/ui-view';
 import { TableContext } from '@instructure/ui-table';
 import { safeCloneElement } from '@instructure/ui-react-utils';
-export var Row = function Row(_ref) {
+export var Row = /*#__PURE__*/React.memo(function (_ref) {
   var children = _ref.children,
     setRef = _ref.setRef;
   var context = useContext(TableContext);
@@ -25,4 +25,5 @@ export var Row = function Row(_ref) {
     }
     return child;
   }));
-};
+});
+Row.displayName = 'Row';

package/es/translated/da-x-k12/components/Gradebook/table/RowHeader/index.js

@@ -2,7 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["children", "isSticky", "isStacked", "data-cell-id"];
 import React from 'react';
 import { View } from '@instructure/ui-view';
-export var RowHeader = function RowHeader(_ref) {
+export var RowHeader = /*#__PURE__*/React.memo(function (_ref) {
   var children = _ref.children,
     isSticky = _ref.isSticky,
     isStacked = _ref.isStacked,
@@ -21,4 +21,5 @@ export var RowHeader = function RowHeader(_ref) {
     focusPosition: "inset",
     "data-cell-id": dataCellId
   }, props), children);
-};
+});
+RowHeader.displayName = 'RowHeader';

package/es/translated/da-x-k12/components/Gradebook/table/Table/index.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["id", "columns", "data", "caption", "renderAboveHeader", "dragDropConfig"];
-import React, { useRef, useCallback } from 'react';
+import React, { useRef, useCallback, useEffect } from 'react';
 import { DragDropContext } from 'react-dnd';
 import ReactDnDHTML5Backend from 'react-dnd-html5-backend';
 import { Table as InstUITable } from '@instructure/ui-table';
@@ -22,27 +22,47 @@ export var TableComponent = function TableComponent(_ref) {
     dragDropConfig = _ref.dragDropConfig,
     tableProps = _objectWithoutProperties(_ref, _excluded);
   var tableRef = useRef(null);
-  var getCellElement = useCallback(function (rowIndex, colIndex) {
+  var columnsRef = useRef(columns);
+
+  // Keep columnsRef in sync with latest columns
+  useEffect(function () {
+    columnsRef.current = columns;
+  }, [columns]);
+  var getCellElement = useCallback(function (rowIndex, colKey) {
     if (!tableRef.current) return null;
-    var cellId;
-    if (rowIndex === -1) {
-      cellId = "header-".concat(colIndex);
-    } else {
-      cellId = "cell-".concat(rowIndex, "-").concat(colIndex);
-    }
-    return tableRef.current.querySelector("[data-cell-id=\"".concat(cellId, "\"]"));
+    var selector = "[data-row-index=\"".concat(rowIndex, "\"][data-col-key=\"").concat(colKey, "\"]");
+    return tableRef.current.querySelector(selector);
   }, []);
-  var focusCell = useCallback(function (rowIndex, colIndex) {
-    var cell = getCellElement(rowIndex, colIndex);
+  var focusCell = useCallback(function (rowIndex, colKey) {
+    var cell = getCellElement(rowIndex, colKey);
     if (cell) {
+      if (rowIndex === -1) {
+        var focusable = cell.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        if (focusable) {
+          focusable.focus();
+          return;
+        }
+      }
       cell.focus();
     }
   }, [getCellElement]);
-  var handleKeyDown = useCallback(function (event, rowIndex, colIndex) {
-    if (event.target !== event.currentTarget) return;
+  var handleKeyDown = useCallback(function (event) {
+    // Allow arrow key navigation from the cell itself or from buttons within the cell
+    // (e.g., header options menu), but prevent navigation from other interactive elements
+    // (e.g., chart components that have their own keyboard navigation)
+    if (event.target !== event.currentTarget) {
+      var _target = event.target;
+      var isButton = _target.tagName === 'BUTTON' || _target.getAttribute('role') === 'button';
+      if (!isButton) {
+        return;
+      }
+    }
+    var target = event.currentTarget;
+    var rowIndex = parseInt(target.dataset.rowIndex || '0', 10);
+    var colKey = target.dataset.colKey || '';
     var key = event.key;
     var newRowIndex = rowIndex;
-    var newColIndex = colIndex;
+    var newColKey = colKey;
     switch (key) {
       case 'ArrowUp':
         {
@@ -59,30 +79,44 @@ export var TableComponent = function TableComponent(_ref) {
         newRowIndex = Math.min(data.length - 1, rowIndex + 1);
         break;
       case 'ArrowLeft':
-        event.preventDefault();
-        newColIndex = Math.max(0, colIndex - 1);
-        break;
+        {
+          var _columnsRef$current$n;
+          event.preventDefault();
+          var currentColIndex = columnsRef.current.findIndex(function (col) {
+            return col.key === colKey;
+          });
+          var newColIndex = Math.max(0, currentColIndex - 1);
+          newColKey = ((_columnsRef$current$n = columnsRef.current[newColIndex]) === null || _columnsRef$current$n === void 0 ? void 0 : _columnsRef$current$n.key) || colKey;
+          break;
+        }
       case 'ArrowRight':
-        event.preventDefault();
-        newColIndex = Math.min(columns.length - 1, colIndex + 1);
-        break;
+        {
+          var _columnsRef$current$_;
+          event.preventDefault();
+          var _currentColIndex = columnsRef.current.findIndex(function (col) {
+            return col.key === colKey;
+          });
+          var _newColIndex = Math.min(columnsRef.current.length - 1, _currentColIndex + 1);
+          newColKey = ((_columnsRef$current$_ = columnsRef.current[_newColIndex]) === null || _columnsRef$current$_ === void 0 ? void 0 : _columnsRef$current$_.key) || colKey;
+          break;
+        }
       default:
         return;
     }
-    if (newRowIndex !== rowIndex || newColIndex !== colIndex) {
-      focusCell(newRowIndex, newColIndex);
+    if (newRowIndex !== rowIndex || newColKey !== colKey) {
+      focusCell(newRowIndex, newColKey);
     }
-  }, [data.length, columns.length, focusCell, renderAboveHeader]);
+  }, [data.length, focusCell, renderAboveHeader]);
   var renderColHeader = useCallback(function (col, colIndex, draggableIndex, dragDropConfig) {
     var colHeaderProps = _objectSpread({
       id: col.key,
       width: col.width,
       isSticky: col.isSticky,
-      'data-cell-id': "header-".concat(colIndex),
+      'data-cell-id': "header-".concat(col.key),
+      'data-row-index': -1,
+      'data-col-key': col.key,
       tabIndex: 0,
-      onKeyDown: function onKeyDown(e) {
-        return handleKeyDown(e, -1, colIndex);
-      }
+      onKeyDown: handleKeyDown
     }, col.colHeaderProps);
     var dragLabel = col.dragLabel || col.key;
     return col.draggable && dragDropConfig ? /*#__PURE__*/React.createElement(DragDropWrapper, Object.assign({
@@ -135,14 +169,14 @@ export var TableComponent = function TableComponent(_ref) {
     return /*#__PURE__*/React.createElement(InstUITable.Body, null, data.map(function (row, rowIndex) {
       return /*#__PURE__*/React.createElement(Row, {
         key: rowIndex
-      }, columns.map(function (col, colIndex) {
+      }, columns.map(function (col) {
         var props = _objectSpread({
           id: "".concat(rowIndex, "-").concat(col.key),
-          'data-cell-id': "cell-".concat(rowIndex, "-").concat(colIndex),
+          'data-cell-id': "cell-".concat(rowIndex, "-").concat(col.key),
+          'data-row-index': rowIndex,
+          'data-col-key': col.key,
           tabIndex: 0,
-          onKeyDown: function onKeyDown(e) {
-            return handleKeyDown(e, rowIndex, colIndex);
-          },
+          onKeyDown: handleKeyDown,
           isSticky: col.isSticky
         }, col.cellProps);
         if (col.isRowHeader) {
@@ -170,6 +204,7 @@ export var TableComponent = function TableComponent(_ref) {
   }), /*#__PURE__*/React.createElement(View, {
     as: "div",
     overflowX: "auto",
+    padding: "none none small none",
     elementRef: function elementRef(el) {
       if (el instanceof HTMLDivElement) {
         ;

package/es/translated/da-x-k12/components/Gradebook/table/Table/index.stories.js

@@ -212,22 +212,66 @@ export var WithCustomCell = {
     data: sampleData
   }
 };
+
+// Performance test data generation
+
+// Stable render function for performance test cells (defined once, reused everywhere)
+var renderPerformanceCell = function renderPerformanceCell(cellData) {
+  return /*#__PURE__*/React.createElement(Text, null, cellData);
+};
+var generatePerformanceTestData = function generatePerformanceTestData(numRows, numCols) {
+  var data = Array.from({
+    length: numRows
+  }, function (_, i) {
+    var row = {
+      id: "".concat(i + 1),
+      student: "Student ".concat(i + 1)
+    };
+    // Dynamically add columns
+    for (var j = 1; j <= numCols; j++) {
+      row["col".concat(j)] = Math.floor(Math.random() * 100);
+    }
+    return row;
+  });
+  var columns = [{
+    key: 'student',
+    header: 'Student Name',
+    width: '150px',
+    isRowHeader: true,
+    draggable: false
+  }].concat(_toConsumableArray(Array.from({
+    length: numCols
+  }, function (_, i) {
+    return {
+      key: "col".concat(i + 1),
+      header: "Column ".concat(i + 1),
+      width: '120px',
+      draggable: true,
+      render: renderPerformanceCell // Use the stable function reference
+    };
+  })));
+  return {
+    data: data,
+    columns: columns
+  };
+};
 export var WithDraggableColumns = {
   parameters: {
     storyshots: {
       disable: true
     }
   },
-  render: function render(args) {
-    var _React$useState = React.useState(basicColumns.map(function (col) {
-        return _objectSpread(_objectSpread({}, col), {}, {
-          draggable: col.key !== 'name' // All columns except name are draggable
-        });
-      })),
+  render: function render() {
+    var testData = React.useMemo(function () {
+      return generatePerformanceTestData(100, 99);
+    }, []);
+    var _React$useState = React.useState(function () {
+        return testData.columns;
+      }),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       columns = _React$useState2[0],
       setColumns = _React$useState2[1];
-    var handleMove = function handleMove(draggedId, hoverIndex) {
+    var handleMove = React.useCallback(function (draggedId, hoverIndex) {
       setColumns(function (prevColumns) {
         // Get only draggable columns
         var draggableColumns = prevColumns.filter(function (col) {
@@ -255,28 +299,23 @@ export var WithDraggableColumns = {
         });
         return [].concat(_toConsumableArray(nonDraggableColumns), _toConsumableArray(newDraggableColumns));
       });
-    };
-    var handleDragEnd = function handleDragEnd() {
-      // eslint-disable-next-line no-console
-      console.log('Drag ended - final column order:', columns.map(function (c) {
-        return c.key;
-      }));
-    };
+    }, []);
+    var dragDropConfig = React.useMemo(function () {
+      return {
+        type: 'COLUMN',
+        enabled: true,
+        onMove: handleMove
+      };
+    }, [handleMove]);
     var DraggableTable = Table;
-    return /*#__PURE__*/React.createElement(DraggableTable, Object.assign({}, args, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, "\n            #performance-test-table {\n              border-spacing: 24px 0;\n              border-collapse: separate;\n            }\n          "), /*#__PURE__*/React.createElement(DraggableTable, {
+      id: "performance-test-table",
+      caption: "Table with Draggable Columns (100\xD7100) - Drag columns to reorder",
       columns: columns,
+      data: testData.data,
       layout: "fixed",
-      dragDropConfig: {
-        type: 'COLUMN',
-        enabled: true,
-        onMove: handleMove,
-        onDragEnd: handleDragEnd
-      }
+      dragDropConfig: dragDropConfig
     }));
-  },
-  args: {
-    caption: 'Table with Draggable Columns (drag columns to reorder)',
-    data: sampleData
   }
 };
 export var WithAboveHeaderRow = {