@carbon/ibm-products 2.28.0-alpha.4 → 2.28.1

package/es/components/Datagrid/useSortableColumns.js

@@ -94,7 +94,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
         return /*#__PURE__*/React__default.createElement(ArrowsVertical, iconProps);
       };
       var Header = function Header(headerProp) {
-        return column.disableSortBy === true || column.id === 'datagridSelection' ? column.disableSortBy ? column.Header : /*#__PURE__*/React__default.createElement(SelectAll, instance) : /*#__PURE__*/React__default.createElement(Button, {
+        return column.disableSortBy === true || column.id === 'datagridSelection' || column.isAction ? column.disableSortBy || column.isAction ? column.Header : /*#__PURE__*/React__default.createElement(SelectAll, instance) : /*#__PURE__*/React__default.createElement(Button, {
           "aria-sort": getAriaSortValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, {
             ascendingSortableLabelText: ascendingSortableLabelText,
             descendingSortableLabelText: descendingSortableLabelText,

package/es/components/UserAvatar/UserAvatar.js

@@ -13,9 +13,10 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { usePrefix, Tooltip } from '@carbon/react';
 import { User } from '@carbon/react/icons';
+import '../../global/js/utils/props-helper.js';
 import { TooltipTrigger } from '../TooltipTrigger/TooltipTrigger.js';
 
-var _excluded = ["backgroundColor", "className", "name", "renderIcon", "size", "tooltipText", "tooltipAlignment"];
+var _excluded = ["backgroundColor", "className", "image", "imageDescription", "name", "renderIcon", "size", "tooltipText", "tooltipAlignment"];
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
@@ -50,6 +51,8 @@ var defaults = {
 var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var backgroundColor = _ref.backgroundColor,
     className = _ref.className,
+    image = _ref.image,
+    imageDescription = _ref.imageDescription,
     name = _ref.name,
     RenderIcon = _ref.renderIcon,
     _ref$size = _ref.size,
@@ -84,6 +87,13 @@ var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     var iconProps = {
       size: iconSize[size]
     };
+    if (image) {
+      return /*#__PURE__*/React__default.createElement("img", {
+        alt: imageDescription,
+        src: image,
+        className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
+      });
+    }
     if (RenderIcon) {
       return /*#__PURE__*/React__default.createElement(RenderIcon, iconProps);
     }
@@ -136,6 +146,17 @@ UserAvatar.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+  /**
+   * When passing the image prop, supply a full path to the image to be displayed.
+   */
+  image: PropTypes.string,
+  /**
+   * When passing the image prop use the imageDescription prop to describe the image for screen reader.
+   */
+  imageDescription: PropTypes.string.isRequired.if(function (_ref3) {
+    var image = _ref3.image;
+    return !!image;
+  }),
   /**
    * When passing the name prop, either send the initials to be used or the user's full name. The first two capital letters of the user's name will be used as the name.
    */

package/lib/components/Datagrid/useSortableColumns.js

@@ -103,7 +103,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
         return /*#__PURE__*/React__default["default"].createElement(icons.ArrowsVertical, iconProps);
       };
       var Header = function Header(headerProp) {
-        return column.disableSortBy === true || column.id === 'datagridSelection' ? column.disableSortBy ? column.Header : /*#__PURE__*/React__default["default"].createElement(DatagridSelectAll.SelectAll, instance) : /*#__PURE__*/React__default["default"].createElement(react.Button, {
+        return column.disableSortBy === true || column.id === 'datagridSelection' || column.isAction ? column.disableSortBy || column.isAction ? column.Header : /*#__PURE__*/React__default["default"].createElement(DatagridSelectAll.SelectAll, instance) : /*#__PURE__*/React__default["default"].createElement(react.Button, {
           "aria-sort": getAriaSortValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, {
             ascendingSortableLabelText: ascendingSortableLabelText,
             descendingSortableLabelText: descendingSortableLabelText,

package/lib/components/UserAvatar/UserAvatar.js

@@ -17,6 +17,7 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
+require('../../global/js/utils/props-helper.js');
 var TooltipTrigger = require('../TooltipTrigger/TooltipTrigger.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -24,7 +25,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["backgroundColor", "className", "name", "renderIcon", "size", "tooltipText", "tooltipAlignment"];
+var _excluded = ["backgroundColor", "className", "image", "imageDescription", "name", "renderIcon", "size", "tooltipText", "tooltipAlignment"];
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
@@ -59,6 +60,8 @@ var defaults = {
 exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var backgroundColor = _ref.backgroundColor,
     className = _ref.className,
+    image = _ref.image,
+    imageDescription = _ref.imageDescription,
     name = _ref.name,
     RenderIcon = _ref.renderIcon,
     _ref$size = _ref.size,
@@ -93,6 +96,13 @@ exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function
     var iconProps = {
       size: iconSize[size]
     };
+    if (image) {
+      return /*#__PURE__*/React__default["default"].createElement("img", {
+        alt: imageDescription,
+        src: image,
+        className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
+      });
+    }
     if (RenderIcon) {
       return /*#__PURE__*/React__default["default"].createElement(RenderIcon, iconProps);
     }
@@ -145,6 +155,17 @@ exports.UserAvatar.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: index["default"].string,
+  /**
+   * When passing the image prop, supply a full path to the image to be displayed.
+   */
+  image: index["default"].string,
+  /**
+   * When passing the image prop use the imageDescription prop to describe the image for screen reader.
+   */
+  imageDescription: index["default"].string.isRequired.if(function (_ref3) {
+    var image = _ref3.image;
+    return !!image;
+  }),
   /**
    * When passing the name prop, either send the initials to be used or the user's full name. The first two capital letters of the user's name will be used as the name.
    */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.28.0-alpha.4+3702c93bd",
+  "version": "2.28.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -90,7 +90,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@carbon/ibm-products-styles": "^2.27.0-alpha.4+3702c93bd",
+    "@carbon/ibm-products-styles": "^2.27.1",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^8.0.0",
@@ -113,5 +113,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "3702c93bd2cba587ecea6e441dcf0fd204f7ad95"
+  "gitHead": "e1566439aee5c531b63c6591828e21119c7c5ec8"
 }

package/scss/components/Tearsheet/_tearsheet.scss

@@ -311,7 +311,7 @@ $motion-duration: $duration-moderate-02;
     flex-grow: 1;
   }
 
-  &.#{$block-class}--has-slug .#{$block-class}__main {
+  &.#{$block-class}--has-slug .#{$block-class}__content {
     @include utilities.callout-gradient('default', 0);
 
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;

package/scss/components/UserAvatar/_user-avatar.scss

@@ -64,6 +64,12 @@ $sizes: (
   }
 }
 
+@mixin photo-styling {
+  position: fixed;
+  border-radius: 100%;
+  object-fit: fill;
+}
+
 @mixin setBgColor($color) {
   // stylelint-disable-next-line carbon/theme-token-use
   background-color: $color;
@@ -95,3 +101,24 @@ $sizes: (
   @include size('sm');
   @include type.type-style('label-01');
 }
+
+.#{$block-class}__photo {
+  border-radius: 100%;
+  object-fit: contain;
+}
+.#{$block-class}__photo--xl {
+  @include photo-styling;
+  @include size('xl');
+}
+.#{$block-class}__photo--lg {
+  @include photo-styling;
+  @include size('lg');
+}
+.#{$block-class}__photo--md {
+  @include photo-styling;
+  @include size('md');
+}
+.#{$block-class}__photo--sm {
+  @include photo-styling;
+  @include size('sm');
+}