@instructure/outcomes-ui 4.1.2 → 4.1.4

package/es/translated/ar/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/ar/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/ar/components/Gradebook/table/Table/index.js

@@ -1,7 +1,8 @@
 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';
+var _excluded = ["colRender", "rowData", "cellData"],
+  _excluded2 = ["id", "columns", "data", "caption", "renderAboveHeader", "dragDropConfig"];
+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';
@@ -12,37 +13,69 @@ import { DragDropContainer } from "../../dragdrop/DragDropContainer/index.js";
 import { Cell } from "../Cell/index.js";
 import { Row } from "../Row/index.js";
 import { RowHeader } from "../RowHeader/index.js";
-import { ColumnHeader } from "../ColumnHeader/index.js";
-export var TableComponent = function TableComponent(_ref) {
-  var id = _ref.id,
-    columns = _ref.columns,
-    data = _ref.data,
-    caption = _ref.caption,
-    renderAboveHeader = _ref.renderAboveHeader,
-    dragDropConfig = _ref.dragDropConfig,
-    tableProps = _objectWithoutProperties(_ref, _excluded);
+import { ColumnHeader } from "../ColumnHeader/index.js"; // DataCell keeps the Cell child arrow function out of the hot render
+// path. React.memo compares colRender/rowData/cellData by reference; when columns are
+// reordered those values don't change, so Cell never receives new props and skips render.
+var DataCellInner = function DataCellInner(_ref) {
+  var colRender = _ref.colRender,
+    rowData = _ref.rowData,
+    cellData = _ref.cellData,
+    cellProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Cell, cellProps, function (focused) {
+    return colRender(cellData, rowData, focused);
+  });
+};
+var DataCell = /*#__PURE__*/React.memo(DataCellInner);
+export var TableComponent = function TableComponent(_ref2) {
+  var id = _ref2.id,
+    columns = _ref2.columns,
+    data = _ref2.data,
+    caption = _ref2.caption,
+    renderAboveHeader = _ref2.renderAboveHeader,
+    dragDropConfig = _ref2.dragDropConfig,
+    tableProps = _objectWithoutProperties(_ref2, _excluded2);
   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 +92,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 +182,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) {
@@ -151,11 +198,12 @@ export var TableComponent = function TableComponent(_ref) {
           }, props), col.render ? col.render(row[col.key], row) : row[col.key]);
         }
         if (col.render) {
-          return /*#__PURE__*/React.createElement(Cell, Object.assign({
-            key: col.key
-          }, props), function (focused) {
-            return col.render(row[col.key], row, focused);
-          });
+          return /*#__PURE__*/React.createElement(DataCell, Object.assign({
+            key: col.key,
+            colRender: col.render,
+            rowData: row,
+            cellData: row[col.key]
+          }, props));
         }
         return /*#__PURE__*/React.createElement(Cell, Object.assign({
           key: col.key
@@ -170,6 +218,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/ar/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 = {

package/es/translated/ar/test/jest-setup/__mocks__/@instructure/canvas-media.js

@@ -0,0 +1,6 @@
+var UploadMedia = function UploadMedia() {
+  return null;
+};
+UploadMedia.displayName = 'UploadMedia';
+module.exports = UploadMedia;
+module.exports.default = UploadMedia;

package/es/translated/ar/util/gradebook/constants.js

@@ -32,6 +32,8 @@ export var ScoreDisplayFormat = /*#__PURE__*/function (ScoreDisplayFormat) {
   ScoreDisplayFormat["ICON_ONLY"] = "icon_only";
   ScoreDisplayFormat["ICON_AND_POINTS"] = "icon_and_points";
   ScoreDisplayFormat["ICON_AND_LABEL"] = "icon_and_label";
+  ScoreDisplayFormat["PERCENT"] = "percent";
+  ScoreDisplayFormat["PERCENT_AND_RATIO"] = "percent_and_ratio";
   return ScoreDisplayFormat;
 }({});
 export var OutcomeArrangement = /*#__PURE__*/function (OutcomeArrangement) {

package/es/translated/ar/util/gradebook/index.js

@@ -0,0 +1 @@
+export { masteryLevelToSvgUrl } from "./masteryLevelToSvgUrl.js";

package/es/translated/ar/util/gradebook/masteryLevelToSvgUrl.js

@@ -0,0 +1,44 @@
+import { DEFAULT_FILL_EXCEEDS_MASTERY, exceedsMasteryIconSvgPaths } from "../../components/Gradebook/icons/MasteryLevelIcon/ExceedsMasteryIcon.js";
+import { DEFAULT_FILL_MASTERY, masteryIconSvgPaths } from "../../components/Gradebook/icons/MasteryLevelIcon/MasteryIcon.js";
+import { DEFAULT_FILL_NEAR_MASTERY, nearMasteryIconSvgPaths } from "../../components/Gradebook/icons/MasteryLevelIcon/NearMasteryIcon.js";
+import { DEFAULT_FILL_NO_EVIDENCE, noEvidenceIconSvgPaths } from "../../components/Gradebook/icons/MasteryLevelIcon/NoEvidenceIcon.js";
+import { DEFAULT_FILL_REMEDIATION, remediationIconSvgPaths } from "../../components/Gradebook/icons/MasteryLevelIcon/RemediationIcon.js";
+import { DEFAULT_FILL_UNASSESSED, unassessedIconSvgPaths } from "../../components/Gradebook/icons/MasteryLevelIcon/UnassessedIcon.js";
+var MASTERY_LEVEL_SVG_CONFIG = {
+  exceeds_mastery: {
+    svgPaths: exceedsMasteryIconSvgPaths,
+    defaultFill: DEFAULT_FILL_EXCEEDS_MASTERY
+  },
+  mastery: {
+    svgPaths: masteryIconSvgPaths,
+    defaultFill: DEFAULT_FILL_MASTERY
+  },
+  near_mastery: {
+    svgPaths: nearMasteryIconSvgPaths,
+    defaultFill: DEFAULT_FILL_NEAR_MASTERY
+  },
+  no_evidence: {
+    svgPaths: noEvidenceIconSvgPaths,
+    defaultFill: DEFAULT_FILL_NO_EVIDENCE
+  },
+  remediation: {
+    svgPaths: remediationIconSvgPaths,
+    defaultFill: DEFAULT_FILL_REMEDIATION
+  },
+  unassessed: {
+    svgPaths: unassessedIconSvgPaths,
+    defaultFill: DEFAULT_FILL_UNASSESSED
+  }
+};
+export var masteryLevelToSvgUrl = function masteryLevelToSvgUrl(masteryLevel, options) {
+  var config = MASTERY_LEVEL_SVG_CONFIG[masteryLevel];
+  if (!config) {
+    console.warn("No SVG config found for mastery level \"".concat(masteryLevel, "\""));
+    return null;
+  }
+  var svgPaths = config.svgPaths,
+    defaultFill = config.defaultFill;
+  var fill = options === null || options === void 0 ? void 0 : options.fill;
+  var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-1 -1 20 20\" fill=\"".concat(fill || defaultFill, "\">").concat(svgPaths, "</svg>");
+  return "data:image/svg+xml;charset=utf-8,".concat(encodeURIComponent(svg));
+};

package/es/translated/ca/components/Gradebook/context/GradebookAppContext/GradebookAppProvider.js

@@ -11,6 +11,7 @@ export var GradebookAppProvider = function GradebookAppProvider(_ref) {
     settings = _useState2[0],
     setSettings = _useState2[1];
   var value = {
+    // If the settings will be implemented on the app level, we can remove this (MC won't use it)
     settings: {
       settings: settings,
       setSettings: setSettings,

package/es/translated/ca/components/Gradebook/dialogs/MessageStudentsWhoDialog/Pill.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Tag } from '@instructure/ui-tag';
+import { Text } from '@instructure/ui-text';
+import { Tooltip } from '@instructure/ui-tooltip';
+import { Flex } from '@instructure/ui-flex';
+import { IconAddSolid, IconXSolid } from '@instructure/ui-icons';
+import { InstUISettingsProvider } from '@instructure/emotion';
+import { TruncateText } from '@instructure/ui-truncate-text';
+var componentOverrides = {
+  Tag: {
+    defaultBackground: 'white'
+  }
+};
+var ellipsis = function ellipsis() {
+  return "\u2026";
+};
+var truncate = function truncate(text) {
+  return text.length > 14 ? text.slice(0, 13) + ellipsis() : text;
+};
+function renderText(text, truncatedText, textColor) {
+  var isTruncated = text.length > truncatedText.length;
+  if (isTruncated) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      renderTip: text
+    }, /*#__PURE__*/React.createElement(Text, {
+      as: "div",
+      color: textColor
+    }, /*#__PURE__*/React.createElement(TruncateText, null, truncatedText)));
+  } else {
+    return /*#__PURE__*/React.createElement(Text, {
+      as: "div",
+      color: textColor
+    }, /*#__PURE__*/React.createElement(TruncateText, null, text));
+  }
+}
+function renderIcon(selected) {
+  if (selected) {
+    return /*#__PURE__*/React.createElement(IconXSolid, {
+      "data-testid": "item-selected"
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(IconAddSolid, {
+      "data-testid": "item-unselected",
+      color: "brand"
+    });
+  }
+}
+var Pill = function Pill(_ref) {
+  var studentId = _ref.studentId,
+    observerId = _ref.observerId,
+    text = _ref.text,
+    _onClick = _ref.onClick,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? false : _ref$selected;
+  var textColor = selected ? 'primary' : 'secondary';
+  var truncatedText = truncate(text);
+  var testId = observerId ? 'observer-pill' : 'student-pill';
+  var ariaLabel = selected ? "Remove " + text : "Add " + text;
+  var contents = /*#__PURE__*/React.createElement(Flex, {
+    as: "div",
+    margin: "0 xxx-small 0 0",
+    justifyItems: "space-between"
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    size: "0.75rem",
+    shouldGrow: true,
+    margin: "0 xx-small 0 0",
+    overflowX: "hidden",
+    "aria-label": ariaLabel
+  }, renderText(text, truncatedText, textColor)), /*#__PURE__*/React.createElement(Flex.Item, {
+    padding: "0 0 xxx-small 0"
+  }, renderIcon(selected)));
+  return /*#__PURE__*/React.createElement(InstUISettingsProvider, {
+    theme: {
+      componentOverrides: componentOverrides
+    }
+  }, /*#__PURE__*/React.createElement(Tag, {
+    text: contents,
+    "data-testid": testId,
+    onClick: function onClick() {
+      if (observerId !== void 0) {
+        _onClick(studentId, observerId);
+      } else {
+        _onClick(studentId);
+      }
+    }
+  }));
+};
+export default Pill;