@happeouikit/avatar - npm Package Compare versions

Comparing version 1.5.2 to 1.5.3

dist/Avatar.js

@@ -0,6 +1,9 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState } from "react";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { useMemo, useState } from "react";
 import PropTypes from "prop-types";
+import { decode as decodeHtmlEntities } from "html-entities";
 import styled, { keyframes, css } from "styled-components";
-import { bgGray, white, success, warn, alert, navy, active, violet, gray06, bgWhite, darken20, lighten20 } from "@happeouikit/colors";
 import { TinyText, TextEta, TextZeta, TextDelta, TextBeta, TextAlpha } from "@happeouikit/typography";
@@ -11,7 +14,9 @@ import { IconGroupAvatar } from "@happeouikit/icons";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var baseFontStyle = css(["color:", ";user-select:none;"], white);
+var baseFontStyle = css(["color:var(--color-white100);user-select:none;"]);
 var sizeMap = {
   xxs: {
     avatar: "18px",
-    initialsFont: styled(TinyText).withConfig({
+    initialsFont: styled(TinyText).attrs({
+      as: "span"
+    }).withConfig({
       displayName: "Avatar__initialsFont",
@@ -23,3 +28,5 @@ componentId: "sc-1gbyqf4-0"
     avatar: "24px",
-    initialsFont: styled(TinyText).withConfig({
+    initialsFont: styled(TinyText).attrs({
+      as: "span"
+    }).withConfig({
       displayName: "Avatar__initialsFont",
@@ -35,3 +42,5 @@ componentId: "sc-1gbyqf4-1"
     emojiBgSize: "16px",
-    initialsFont: styled(TextEta).withConfig({
+    initialsFont: styled(TextEta).attrs({
+      as: "span"
+    }).withConfig({
       displayName: "Avatar__initialsFont",
@@ -47,3 +56,5 @@ componentId: "sc-1gbyqf4-2"
     emojiBgSize: "18px",
-    initialsFont: styled(TextZeta).withConfig({
+    initialsFont: styled(TextZeta).attrs({
+      as: "span"
+    }).withConfig({
       displayName: "Avatar__initialsFont",
@@ -59,3 +70,5 @@ componentId: "sc-1gbyqf4-3"
     emojiBgSize: "20px",
-    initialsFont: styled(TextDelta).withConfig({
+    initialsFont: styled(TextDelta).attrs({
+      as: "span"
+    }).withConfig({
       displayName: "Avatar__initialsFont",
@@ -71,3 +84,5 @@ componentId: "sc-1gbyqf4-4"
     emojiBgSize: "24px",
-    initialsFont: styled(TextBeta).withConfig({
+    initialsFont: styled(TextBeta).attrs({
+      as: "span"
+    }).withConfig({
       displayName: "Avatar__initialsFont",
@@ -83,3 +98,5 @@ componentId: "sc-1gbyqf4-5"
     emojiBgSize: "28px",
-    initialsFont: styled(TextAlpha).withConfig({
+    initialsFont: styled(TextAlpha).attrs({
+      as: "span"
+    }).withConfig({
       displayName: "Avatar__initialsFont",
@@ -90,5 +107,5 @@ componentId: "sc-1gbyqf4-6"
 };
-var initialsBackgroundColors = [lighten20(navy), darken20(navy), lighten20(success), darken20(success), lighten20(warn), darken20(warn), lighten20(alert), darken20(alert), lighten20(active), darken20(active), lighten20(violet), darken20(violet)];
+var initialsBackgroundColors = ["var(--color-navy800)", "var(--color-navy600)", "var(--color-green800)", "var(--color-green600)", "var(--color-red800)", "var(--color-red600)", "var(--color-orange800)", "var(--color-orange600)", "var(--color-yellow800)", "var(--color-yellow600)", "var(--color-violet800)", "var(--color-violet600)", "var(--color-pink800)", "var(--color-pink600)", "var(--color-blue800)", "var(--color-blue600)"];
 var getInitialsBgColor = function getInitialsBgColor(user) {
-  if (getInitials(user) === "?") return gray06;
+  if (getInitials(user) === "?") return "var(--color-gray600)";
   var name = getNameString(user);
@@ -105,3 +122,3 @@ return initialsBackgroundColors[name.length % initialsBackgroundColors.length];
   componentId: "sc-1gbyqf4-8"
-})(["display:flex;justify-content:center;align-items:center;border:1px solid transparent;border-radius:50%;height:", ";width:", ";overflow:hidden;&:focus{outline:0;border:1px solid ", ";}", " .hover-event:hover &{box-shadow:0 1px 6px 0 rgba(0,0,0,0.2);transform:translate3d(0,-1px,0);}.click-event:active &{transform:scale(0.95);}"], function (_ref) {
+})(["display:flex;justify-content:center;align-items:center;border:1px solid transparent;border-radius:50%;height:", ";width:", ";overflow:hidden;&:focus{outline:0;border:1px solid var(--color-focus-indicator);}", " .hover-event:hover &{box-shadow:var(--box-shadow-shadow-float);transform:translate3d(0,-1px,0);}.click-event:active &{transform:scale(0.95);}"], function (_ref) {
   var size = _ref.size;
@@ -112,3 +129,3 @@ return sizeMap[size].avatar;
   return sizeMap[size].avatar;
-}, active, function (_ref3) {
+}, function (_ref3) {
   var bgColor = _ref3.bgColor;
@@ -122,3 +139,3 @@ return bgColor && css(["background-color:", ";"], bgColor);
   var showBackground = _ref4.showBackground;
-  return showBackground && css(["background-color:", ";"], bgGray);
+  return showBackground && css(["background-color:var(--color-surface-darken);"]);
 });
@@ -128,3 +145,3 @@ var Presence = styled.div.withConfig({
   componentId: "sc-1gbyqf4-10"
-})(["border-radius:50%;position:absolute;right:0;bottom:0;height:", ";width:", ";border:", " solid ", ";font-size:", ";line-height:", ";animation:", " 700ms;&.presence-free{background-color:", ";}&.presence-busy{background-color:", ";}&.presence-outOfOffice{background-color:", ";}&.presence-unknown{background-color:", ";}"], function (_ref5) {
+})(["border-radius:50%;position:absolute;right:0;bottom:0;height:", ";width:", ";border:", " solid var(--color-white100);font-size:", ";line-height:", ";animation:", " var(--animation-duration-slow-sm);&.presence-free{background-color:var(--color-success-primary);}&.presence-busy{background-color:var(--color-alert-primary);}&.presence-outOfOffice{background-color:var(--color-warning-lighten50);}&.presence-unknown{background-color:var(--color-gray400);}"], function (_ref5) {
   var size = _ref5.size;
@@ -138,3 +155,3 @@ return sizeMap[size].presenceSize;
   return sizeMap[size].presenceBorder;
-}, white, function (_ref8) {
+}, function (_ref8) {
   var size = _ref8.size;
@@ -145,7 +162,7 @@ return sizeMap[size].presenceSize;
   return sizeMap[size].presenceSize;
-}, scaleAndFadeIn, success, alert, warn, gray06);
+}, scaleAndFadeIn);
 var EmojiWrapper = styled.div.withConfig({
   displayName: "Avatar__EmojiWrapper",
   componentId: "sc-1gbyqf4-11"
-})(["position:absolute;z-index:1;bottom:0;left:100%;display:flex;justify-content:center;align-items:center;margin-left:-", ";width:", ";height:", ";background-color:", ";border-radius:50%;"], function (_ref10) {
+})(["position:absolute;z-index:1;bottom:0;left:100%;display:flex;justify-content:center;align-items:center;margin-left:-", ";width:", ";height:", ";background-color:var(--color-surface);border-radius:50%;"], function (_ref10) {
   var size = _ref10.size;
@@ -159,3 +176,3 @@ return sizeMap[size].emojiBgSize;
   return sizeMap[size].emojiBgSize;
-}, bgWhite);
+});
 var Emoji = styled.div.withConfig({
@@ -180,3 +197,3 @@ displayName: "Avatar__Emoji",
   componentId: "sc-1gbyqf4-13"
-})(["fill:", ";"], violet);
+})(["fill:var(--color-violet600);"]);
 var Avatar = function Avatar(_ref17) {
@@ -190,3 +207,4 @@ var hoverEvent = _ref17.hoverEvent,
     onClick = _ref17.onClick,
-    tabIndex = _ref17.tabIndex;
+    tabIndex = _ref17.tabIndex,
+    ariaLabel = _ref17.ariaLabel;
   var _useState = useState(false),
@@ -200,14 +218,18 @@ _useState2 = _slicedToArray(_useState, 2),
     setLoading = _useState4[1];
-  var canShowPresence = function canShowPresence() {
+  var canShowPresence = useMemo(function () {
     return showPresence && size !== "xxs" && size !== "xs" && !emoji;
-  };
-  var initials = getInitials(user);
+  }, [emoji, showPresence, size]);
+  var initials = useMemo(function () {
+    return getInitials(user);
+  }, [user]);
   var InitialsFont = sizeMap[size].initialsFont;
+  var name = useMemo(function () {
+    return getNameString(user);
+  }, [user]);
   var isGroup = user.isGroup || user.type === "group";
-  var imageAlt = user.fullName ? "".concat(user.fullName, " avatar") : "Avatar";
-  var renderAvatar = function renderAvatar() {
+  var imageAlt = name ? "".concat(name, " avatar") : "";
+  var renderAvatar = useMemo(function () {
     if (isGroup) {
       return /*#__PURE__*/_jsx(AvatarDiv, {
         size: size,
-        tabIndex: tabIndex,
         onPointerDown: function onPointerDown(e) {
@@ -225,3 +247,2 @@ return e.preventDefault();
         size: size,
-        tabIndex: tabIndex,
         onPointerDown: function onPointerDown(e) {
@@ -231,4 +252,5 @@ return e.preventDefault();
         children: /*#__PURE__*/_jsx(Image, {
-          alt: imageAlt,
-          src: user.thumbnailPhotoUrl,
+          alt: imageAlt
+          /* thumbnailPhotoUrl seems to be stored in encoded form for at least some users */,
+          src: decodeHtmlEntities(user.thumbnailPhotoUrl),
           onError: function onError() {
@@ -246,3 +268,2 @@ return setError(true);
       size: size,
-      tabIndex: tabIndex,
       onPointerDown: function onPointerDown(e) {
@@ -257,7 +278,20 @@ return e.preventDefault();
     });
-  };
-  return /*#__PURE__*/_jsxs(Container, {
+  }, [error, imageAlt, initials, isGroup, loading, size, user]);
+  var containerTabIndex = useMemo(function () {
+    if (typeof tabIndex === "number") {
+      return tabIndex;
+    }
+    return 0;
+  }, [tabIndex]);
+  return /*#__PURE__*/_jsxs(Container, _objectSpread(_objectSpread({
     className: "".concat(hoverEvent ? "hover-event" : "", " ").concat(clickEvent ? "click-event" : ""),
-    onClick: clickEvent ? onClick : null,
-    children: [renderAvatar(), canShowPresence() && /*#__PURE__*/_jsx(Presence, {
+    onClick: clickEvent ? onClick : null
+  }, onClick ? {
+    tabIndex: containerTabIndex,
+    role: "button",
+    "aria-label": ariaLabel
+  } : {
+    role: "presentation"
+  }), {}, {
+    children: [renderAvatar, canShowPresence && /*#__PURE__*/_jsx(Presence, {
       size: size,
@@ -272,3 +306,3 @@ className: "presence-".concat(user.status || "unknown")
     })]
-  });
+  }));
 };
@@ -287,3 +321,10 @@ Avatar.propTypes = {
   emoji: PropTypes.string,
-  tabIndex: PropTypes.number
+  tabIndex: PropTypes.number,
+  // If there is a clickEvent, then we require ariaLabel
+  // eslint-disable-next-line consistent-return
+  ariaLabel: function ariaLabel(props) {
+    if (props.clickEvent && !props.ariaLabel) {
+      return new Error("ariaLabel is required when clickEvent is true. Please provide a meaningful ariaLabel.");
+    }
+  }
 };
@@ -297,4 +338,5 @@ Avatar.defaultProps = {
   showPresence: false,
-  emoji: ""
+  emoji: "",
+  ariaLabel: ""
 };
 export default Avatar;

package.json

 {
   "name": "@happeouikit/avatar",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "",
@@ -17,3 +17,2 @@ "main": "dist/index.js",
   "dependencies": {
-    "@happeouikit/colors": "^1.0.4",
     "@happeouikit/icons": "^2.1.13",
@@ -24,2 +23,3 @@ "@happeouikit/typography": "^1.0.7",
   "peerDependencies": {
+    "@happeouikit/theme": "^1.9.4",
     "prop-types": "^15.6.2",
@@ -31,3 +31,4 @@ "react": "^17.0.2",
     "access": "public"
-  }
+  },
+  "gitHead": "81b6264b59d69dc9580689ef161ac86929375f87"
 }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14659

increased by17.92%

Lines of code

340

increased by14.86%

Dependency changes

• - Removed@happeouikit/colors@^1.0.4

• - Removed@babel/runtime@7.26.7(transitive)

• - Removed@happeouikit/colors@1.1.0(transitive)

• - Removedpolished@2.3.3(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)