@instructure/outcomes-ui 4.1.3 → 4.1.4

package/es/components/Gradebook/icons/MasteryLevelIcon/UnassessedIcon.js

@@ -1,9 +1,15 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["fill"];
 import React from 'react';
+var SVG_PATHS = [{
+  fillRule: 'evenodd',
+  clipRule: 'evenodd',
+  d: 'M17.8287 10.7565L15.8667 10.3683C15.9539 9.92738 16 9.47006 16 9C16 8.52994 15.9539 8.07262 15.8667 7.63168L17.8287 7.24354C17.9411 7.81162 18 8.39893 18 9C18 9.60107 17.9411 10.1884 17.8287 10.7565ZM16.4841 3.99946L14.8222 5.1121C14.3105 4.34788 13.6521 3.68948 12.8879 3.17785L14.0005 1.51591C14.982 2.17298 15.827 3.018 16.4841 3.99946ZM10.7565 0.171306L10.3683 2.13328C9.92738 2.04605 9.47006 2 9 2C8.52994 2 8.07262 2.04605 7.63168 2.13328L7.24354 0.171307C7.81163 0.0589225 8.39893 0 9 0C9.60107 0 10.1884 0.0589224 10.7565 0.171306ZM3.99946 1.51591L5.1121 3.17785C4.34788 3.68948 3.68948 4.34788 3.17785 5.1121L1.51591 3.99946C2.17298 3.018 3.018 2.17298 3.99946 1.51591ZM0.171306 7.24354C0.0589224 7.81163 0 8.39893 0 9C0 9.60107 0.0589225 10.1884 0.171306 10.7565L2.13328 10.3683C2.04605 9.92738 2 9.47006 2 9C2 8.52994 2.04605 8.07262 2.13328 7.63168L0.171306 7.24354ZM1.51591 14.0005L3.17785 12.8879C3.68948 13.6521 4.34788 14.3105 5.1121 14.8222L3.99946 16.4841C3.018 15.827 2.17298 14.982 1.51591 14.0005ZM7.24354 17.8287L7.63168 15.8667C8.07262 15.9539 8.52994 16 9 16C9.47006 16 9.92738 15.9539 10.3683 15.8667L10.7565 17.8287C10.1884 17.9411 9.60107 18 9 18C8.39893 18 7.81163 17.9411 7.24354 17.8287ZM14.0005 16.4841C14.982 15.827 15.827 14.982 16.4841 14.0005L14.8222 12.8879C14.3105 13.6521 13.6521 14.3105 12.8879 14.8222L14.0005 16.4841Z'
+}];
+export var DEFAULT_FILL_UNASSESSED = '#C7CDD1';
 export var UnassessedIcon = function UnassessedIcon(_ref) {
   var _ref$fill = _ref.fill,
-    fill = _ref$fill === void 0 ? '#C7CDD1' : _ref$fill,
+    fill = _ref$fill === void 0 ? DEFAULT_FILL_UNASSESSED : _ref$fill,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     id: "unassessed",
@@ -14,9 +20,12 @@ export var UnassessedIcon = function UnassessedIcon(_ref) {
     xmlns: "http://www.w3.org/2000/svg",
     role: "img",
     "aria-label": "Unassessed"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M17.8287 10.7565L15.8667 10.3683C15.9539 9.92738 16 9.47006 16 9C16 8.52994 15.9539 8.07262 15.8667 7.63168L17.8287 7.24354C17.9411 7.81162 18 8.39893 18 9C18 9.60107 17.9411 10.1884 17.8287 10.7565ZM16.4841 3.99946L14.8222 5.1121C14.3105 4.34788 13.6521 3.68948 12.8879 3.17785L14.0005 1.51591C14.982 2.17298 15.827 3.018 16.4841 3.99946ZM10.7565 0.171306L10.3683 2.13328C9.92738 2.04605 9.47006 2 9 2C8.52994 2 8.07262 2.04605 7.63168 2.13328L7.24354 0.171307C7.81163 0.0589225 8.39893 0 9 0C9.60107 0 10.1884 0.0589224 10.7565 0.171306ZM3.99946 1.51591L5.1121 3.17785C4.34788 3.68948 3.68948 4.34788 3.17785 5.1121L1.51591 3.99946C2.17298 3.018 3.018 2.17298 3.99946 1.51591ZM0.171306 7.24354C0.0589224 7.81163 0 8.39893 0 9C0 9.60107 0.0589225 10.1884 0.171306 10.7565L2.13328 10.3683C2.04605 9.92738 2 9.47006 2 9C2 8.52994 2.04605 8.07262 2.13328 7.63168L0.171306 7.24354ZM1.51591 14.0005L3.17785 12.8879C3.68948 13.6521 4.34788 14.3105 5.1121 14.8222L3.99946 16.4841C3.018 15.827 2.17298 14.982 1.51591 14.0005ZM7.24354 17.8287L7.63168 15.8667C8.07262 15.9539 8.52994 16 9 16C9.47006 16 9.92738 15.9539 10.3683 15.8667L10.7565 17.8287C10.1884 17.9411 9.60107 18 9 18C8.39893 18 7.81163 17.9411 7.24354 17.8287ZM14.0005 16.4841C14.982 15.827 15.827 14.982 16.4841 14.0005L14.8222 12.8879C14.3105 13.6521 13.6521 14.3105 12.8879 14.8222L14.0005 16.4841Z"
+  }, props), SVG_PATHS.map(function (pathProps, index) {
+    return /*#__PURE__*/React.createElement("path", Object.assign({
+      key: index
+    }, pathProps));
   }));
-};
+};
+export var unassessedIconSvgPaths = SVG_PATHS.map(function (p) {
+  return "<path fill-rule=\"".concat(p.fillRule, "\" d=\"").concat(p.d, "\"/>");
+}).join('');

package/es/components/Gradebook/table/Cell/index.js

@@ -83,19 +83,9 @@ var arePropsEqual = function arePropsEqual(prevProps, nextProps) {
   // 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;
+  // 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

package/es/components/Gradebook/table/ColumnHeader/index.js

@@ -29,11 +29,9 @@ var arePropsEqual = function arePropsEqual(prevProps, nextProps) {
   // 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.
-
+  // 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) {

package/es/components/Gradebook/table/Table/index.js

@@ -1,6 +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"];
+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';
@@ -12,15 +13,27 @@ 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 columnsRef = useRef(columns);
 
@@ -185,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

package/es/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/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;