@instructure/outcomes-ui 4.1.2 → 4.1.4

package/es/components/Gradebook/popovers/StudentPopover/__mocks__/mockData.js

@@ -0,0 +1,139 @@
+export var mockCaptionDefault = {
+  description: 'Introduction to Computer Science',
+  metadata: 'Section A, Section B'
+};
+export var mockCaptionSingleSection = {
+  description: 'Advanced Mathematics',
+  metadata: 'Honors Section'
+};
+export var mockCaptionManySections = {
+  description: 'World History',
+  metadata: 'Section A - Morning, Section B - Afternoon, Section C - Evening, Section D - Online'
+};
+export var mockCaptionLongCourseName = {
+  description: 'Advanced Placement European History: Renaissance to Modern Era',
+  metadata: 'AP Section'
+};
+export var mockCaptionNoSections = {
+  description: 'Independent Study'
+};
+var mixedPerformanceAverage = {
+  averageScore: 3,
+  averageMasteryLevel: 'near_mastery'
+};
+var highPerformanceAverage = {
+  averageScore: 4.67,
+  averageMasteryLevel: 'exceeds_mastery'
+};
+var lowPerformanceAverage = {
+  averageScore: 1.67,
+  averageMasteryLevel: 'remediation'
+};
+export var mockMasteryScores = {
+  grossAverage: mixedPerformanceAverage.averageScore,
+  averageIcon: mixedPerformanceAverage.averageMasteryLevel,
+  averageText: 'Mixed Performance',
+  buckets: {
+    exceeds_mastery: {
+      name: 'Exceeds Mastery',
+      icon: 'exceeds_mastery',
+      count: 2
+    },
+    mastery: {
+      name: 'Mastery',
+      icon: 'mastery',
+      count: 3
+    },
+    near_mastery: {
+      name: 'Near Mastery',
+      icon: 'near_mastery',
+      count: 1
+    },
+    remediation: {
+      name: 'Remediation',
+      icon: 'remediation',
+      count: 4
+    }
+  }
+};
+export var highMasteryScores = {
+  grossAverage: highPerformanceAverage.averageScore,
+  averageIcon: highPerformanceAverage.averageMasteryLevel,
+  averageText: 'Exceeds Mastery',
+  buckets: {
+    exceeds_mastery: {
+      name: 'Exceeds Mastery',
+      icon: 'exceeds_mastery',
+      count: 5
+    },
+    mastery: {
+      name: 'Mastery',
+      icon: 'mastery',
+      count: 2
+    },
+    near_mastery: {
+      name: 'Near Mastery',
+      icon: 'near_mastery',
+      count: 1
+    },
+    remediation: {
+      name: 'Remediation',
+      icon: 'remediation',
+      count: 0
+    }
+  }
+};
+export var lowMasteryScores = {
+  grossAverage: lowPerformanceAverage.averageScore,
+  averageIcon: lowPerformanceAverage.averageMasteryLevel,
+  averageText: 'Remediation',
+  buckets: {
+    exceeds_mastery: {
+      name: 'Exceeds Mastery',
+      icon: 'exceeds_mastery',
+      count: 0
+    },
+    mastery: {
+      name: 'Mastery',
+      icon: 'mastery',
+      count: 1
+    },
+    near_mastery: {
+      name: 'Near Mastery',
+      icon: 'near_mastery',
+      count: 2
+    },
+    remediation: {
+      name: 'Remediation',
+      icon: 'remediation',
+      count: 5
+    }
+  }
+};
+export var unassessedMasteryScores = {
+  grossAverage: null,
+  averageIcon: 'unassessed',
+  averageText: 'Unassessed',
+  buckets: {
+    exceeds_mastery: {
+      name: 'Exceeds Mastery',
+      icon: 'exceeds_mastery',
+      count: 0
+    },
+    mastery: {
+      name: 'Mastery',
+      icon: 'mastery',
+      count: 0
+    },
+    near_mastery: {
+      name: 'Near Mastery',
+      icon: 'near_mastery',
+      count: 0
+    },
+    remediation: {
+      name: 'Remediation',
+      icon: 'remediation',
+      count: 0
+    }
+  }
+};

package/es/components/Gradebook/popovers/StudentPopover/__tests__/index.test.js

@@ -5,7 +5,8 @@ import React from 'react';
 import { render, screen, waitFor, within, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { GradebookConfigProvider } from "../../../context/GradebookConfigContext/index.js";
-import { mockStudent, mockStudentLongName, mockUserDetailsDefault, mockUserDetailsNoSections, mockMasteryScores } from "../../../__mocks__/mockData.js";
+import { mockStudent, mockStudentLongName } from "../../../gradebook-table/StudentCell/__mocks__/mockData.js";
+import { mockCaptionDefault, mockCaptionNoSections, mockMasteryScores } from "../__mocks__/mockData.js";
 import { StudentPopover } from "../../../../../../lib/index.js";
 jest.mock('format-message', function () {
   return function (msg) {
@@ -13,13 +14,12 @@ jest.mock('format-message', function () {
   };
 });
 describe('StudentPopover', function () {
-  var defaultProps = {
-    student: mockStudent,
-    studentName: mockStudent.display_name,
-    userDetails: mockUserDetailsDefault,
+  var defaultProps = _objectSpread(_objectSpread({
+    studentName: mockStudent.displayName
+  }, mockCaptionDefault), {}, {
     masteryScores: mockMasteryScores,
     studentGradesUrl: '/courses/123/grades/1'
-  };
+  });
   var renderComponent = function renderComponent() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     return render(/*#__PURE__*/React.createElement(GradebookConfigProvider, {
@@ -31,12 +31,11 @@ describe('StudentPopover', function () {
       renderComponent();
       var link = screen.getByTestId('student-cell-link');
       expect(link).toBeInTheDocument();
-      expect(within(link).getByText(mockStudent.display_name)).toBeInTheDocument();
+      expect(within(link).getByText(mockStudent.displayName)).toBeInTheDocument();
     });
     it('renders long student names with truncation', function () {
       renderComponent({
-        student: mockStudentLongName,
-        studentName: mockStudentLongName.display_name
+        studentName: mockStudentLongName.displayName
       });
       var link = screen.getByTestId('student-cell-link');
       expect(link).toBeInTheDocument();
@@ -136,8 +135,8 @@ describe('StudentPopover', function () {
       }, _callee4);
     })));
   });
-  describe('User Details Display', function () {
-    it('displays user details including avatar, name, course, and sections', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+  describe('Header Display', function () {
+    it('displays avatar, name, description, and metadata', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
       return _regenerator().w(function (_context5) {
         while (1) switch (_context5.n) {
           case 0:
@@ -146,26 +145,26 @@ describe('StudentPopover', function () {
             _context5.n = 1;
             return screen.findByTestId('lmgb-student-popover-avatar');
           case 1:
-            expect(screen.getAllByText(mockStudent.display_name).length).toBeGreaterThan(0);
-            expect(screen.getByText('Introduction to Computer Science')).toBeInTheDocument();
-            expect(screen.getByText('Section A, Section B')).toBeInTheDocument();
+            expect(screen.getAllByText(mockStudent.displayName).length).toBeGreaterThan(0);
+            expect(screen.getByText(mockCaptionDefault.description)).toBeInTheDocument();
+            expect(screen.getByText(mockCaptionDefault.metadata)).toBeInTheDocument();
           case 2:
             return _context5.a(2);
         }
       }, _callee5);
     })));
-    it('does not display sections when none exist', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
+    it('does not display metadata when not provided', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
       return _regenerator().w(function (_context6) {
         while (1) switch (_context6.n) {
           case 0:
-            renderComponent({
-              userDetails: mockUserDetailsNoSections
-            });
+            renderComponent(_objectSpread(_objectSpread({}, mockCaptionNoSections), {}, {
+              metadata: void 0
+            }));
             fireEvent.click(screen.getByTestId('student-cell-link'));
             _context6.n = 1;
             return screen.findByTestId('lmgb-student-popover-avatar');
           case 1:
-            expect(screen.queryByText(/Section/)).not.toBeInTheDocument();
+            expect(screen.queryByText(mockCaptionDefault.metadata)).not.toBeInTheDocument();
           case 2:
             return _context6.a(2);
         }
@@ -248,7 +247,7 @@ describe('StudentPopover', function () {
             _context0.n = 1;
             return screen.findByTestId('lmgb-student-popover-avatar');
           case 1:
-            expect(screen.getAllByText(mockStudent.display_name).length).toBeGreaterThan(0);
+            expect(screen.getAllByText(mockStudent.displayName).length).toBeGreaterThan(0);
           case 2:
             return _context0.a(2);
         }

package/es/components/Gradebook/popovers/StudentPopover/index.js

@@ -14,9 +14,10 @@ import { Spinner } from '@instructure/ui-spinner';
 import { useGradebookConfig } from "../../context/GradebookConfigContext/index.js";
 import MasteryLevelIcon from "../../icons/MasteryLevelIcon/index.js";
 var Header = function Header(_ref) {
-  var student = _ref.student,
+  var avatarUrl = _ref.avatarUrl,
     studentName = _ref.studentName,
-    userDetails = _ref.userDetails;
+    description = _ref.description,
+    metadata = _ref.metadata;
   return /*#__PURE__*/React.createElement(Flex, {
     gap: "small",
     alignItems: "start"
@@ -26,7 +27,7 @@ var Header = function Header(_ref) {
     as: "div",
     size: "large",
     name: studentName,
-    src: student.avatar_url,
+    src: avatarUrl,
     "data-testid": "lmgb-student-popover-avatar"
   })), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(View, {
     display: "block",
@@ -35,13 +36,11 @@ var Header = function Header(_ref) {
   }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
     size: "content",
     weight: "bold"
-  }, /*#__PURE__*/React.createElement(TruncateText, null, studentName))), userDetails.course.name && /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(TruncateText, null, studentName))), description && /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
     size: "contentSmall"
-  }, /*#__PURE__*/React.createElement(TruncateText, null, userDetails.course.name))), userDetails.user.sections.length && /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(TruncateText, null, description))), metadata && /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
     size: "legend"
-  }, /*#__PURE__*/React.createElement(TruncateText, null, userDetails.user.sections.map(function (section) {
-    return section.name;
-  }).join(', ')))))));
+  }, /*#__PURE__*/React.createElement(TruncateText, null, metadata))))));
 };
 var MasteryScores = function MasteryScores(_ref2) {
   var _masteryLevelConfig$m, _masteryLevelConfig$m2;
@@ -160,10 +159,11 @@ var ErrorMessage = function ErrorMessage(_ref5) {
 };
 export var StudentPopover = function StudentPopover(_ref6) {
   var studentName = _ref6.studentName,
-    headerOverride = _ref6.headerOverride,
-    student = _ref6.student,
-    userDetails = _ref6.userDetails,
+    avatarUrl = _ref6.avatarUrl,
+    description = _ref6.description,
+    metadata = _ref6.metadata,
     masteryScores = _ref6.masteryScores,
+    headerOverride = _ref6.headerOverride,
     masteryScoresOverride = _ref6.masteryScoresOverride,
     actionsOverride = _ref6.actionsOverride,
     studentGradesUrl = _ref6.studentGradesUrl,
@@ -183,7 +183,8 @@ export var StudentPopover = function StudentPopover(_ref6) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popover, {
     renderTrigger: /*#__PURE__*/React.createElement(Link, {
       isWithinText: false,
-      "data-testid": "student-cell-link"
+      "data-testid": "student-cell-link",
+      "aria-haspopup": "dialog"
     }, /*#__PURE__*/React.createElement(TruncateText, null, studentName)),
     isShowingContent: isShowingContent,
     onShowContent: function onShowContent() {
@@ -222,9 +223,10 @@ export var StudentPopover = function StudentPopover(_ref6) {
     direction: "column",
     alignItems: "start"
   }, /*#__PURE__*/React.createElement(Flex.Item, null, headerOverride !== null && headerOverride !== void 0 ? headerOverride : /*#__PURE__*/React.createElement(Header, {
-    student: student,
+    avatarUrl: avatarUrl,
     studentName: studentName,
-    userDetails: userDetails
+    description: description,
+    metadata: metadata
   })), /*#__PURE__*/React.createElement(Flex.Item, null, masteryScoresOverride !== null && masteryScoresOverride !== void 0 ? masteryScoresOverride : /*#__PURE__*/React.createElement(MasteryScores, {
     masteryScores: masteryScores
   }))), /*#__PURE__*/React.createElement(Divider, null), actionsOverride !== null && actionsOverride !== void 0 ? actionsOverride : /*#__PURE__*/React.createElement(Actions, {

package/es/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/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/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,45 @@ 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;
+
+  // Compare children by reference - function children must be stabilized with useCallback
+  // by the caller if re-renders should be avoided
+  if (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/components/Gradebook/table/ColumnHeader/index.js

@@ -3,7 +3,38 @@ 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
+
+  // Compare children by reference - function children must be stabilized with useCallback
+  // by the caller if re-renders should be avoided
+  if (prevProps.children !== nextProps.children) return false;
+  return true;
+};
+var ColumnHeaderComponent = function ColumnHeaderComponent(_ref) {
   var children = _ref.children,
     isSticky = _ref.isSticky,
     connectDragSource = _ref.connectDragSource,
@@ -35,13 +66,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 +88,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 +96,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';