@synerise/ds-avatar 1.3.3 → 1.3.5

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.5](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@1.3.4...@synerise/ds-avatar@1.3.5) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-avatar
+
+## [1.3.4](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@1.3.3...@synerise/ds-avatar@1.3.4) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-avatar
+
 ## [1.3.3](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@1.3.2...@synerise/ds-avatar@1.3.3) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-avatar

package/README.md

@@ -122,15 +122,15 @@ yarn add @synerise/ds-avatar
 ```jsx static
 import Avatar from '@synerise/ds-avatar';
 
-<Avatar shape={'circle'} backgroundColor={'grey'} size={20} />;
+<Avatar shape={'circle'} backgroundColor={'grey'} size="medium" />;
 ```
 
 ## API
 
 | Property           | Description                                                                                        | Type                                                                                                 | Default  |
 | ------------------ | -------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | -------- |
-| backgroundColor    | Background color of the avatar                                                                     | `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet` | `orange` |
-| backgroundColorHue | Background color hue of the avatar                                                                 | `900` / `800` / `700` / `600` / `500` / `400` / `300` / `200` / `100` / `050`                        | `400`    |
+| backgroundColor    | Background color of the avatar                                                                     | `red` / `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet` | -        |
+| backgroundColorHue | Background color hue of the avatar                                                                 | `900` / `800` / `700` / `600` / `500` / `400` / `300` / `200` / `100` / `050`                        | `500`    |
 | disabled           | Determines if avatar is disabled                                                                   | boolean                                                                                              | `false`  |
 | hasStatus          | Aligns a badge with the avatar                                                                     | boolean                                                                                              | `false`  |
 | iconComponent      | Provides a custom component as a child. If both are provided, the prop icon has a greater priority | React.ReactNode                                                                                      | -        |
@@ -138,7 +138,7 @@ import Avatar from '@synerise/ds-avatar';
 | shape              | Shape of the avatar                                                                                | `circle` / `square`                                                                                  | `circle` |
 | size               | Size of the avatar                                                                                 | `small` / `medium` / `large` / `extraLarge`                                                          | `medium` |
 | src                | Image source path                                                                                  | string                                                                                               | -        |
-| tooltip            | Tooltip text displayed on hover                                                                    | { name: string, email: string }                                                                      | -        |
+| tooltip            | Tooltip text displayed on hover                                                                    | `TooltipObject` / `boolean`                                                                                   | -        |
 
 ## UserAvatar
 
@@ -159,7 +159,7 @@ import { UserAvatar } from '@synerise/ds-avatar';
 
 | Property        | Description                                    | Type                                                                                                          | Default  |
 | --------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------- |
-| user            | User information                               | { firstName: string, lastName: string, email: string, avatar: string }                                        | -        |
+| user            | User information                               | { firstName?: string, lastName?: string, email?: string, avatar?: string, avatarId?: string / number } | -        |
 | backgroundColor | Background color of the avatar                 | `auto` / `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet` | `auto`   |
 | badgeStatus     | Badge status                                   | `active` / `error` / `warning`                                                                                | -        |
 | disabled        | Determines if avatar is disabled               | boolean                                                                                                       | `false`  |
@@ -183,13 +183,13 @@ import { ObjectAvatar } from '@synerise/ds-avatar';
 }} />
 ```
 
-|                 | Property                                       | Description                                                                                                   | Type     | Default |
-| --------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------- | ------- |
-| object          | Object information                             | { name: string, description: string, status: string, avatar: string }                                         | -        |         |
-| color           | Background color of the avatar                 | `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet`          | `grey`   |         |
-| backgroundColor | Background color of the avatar                 | `auto` / `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet` | `auto`   |         |
-| badgeStatus     | Badge status                                   | `active` / `error` / `warning`                                                                                | -        |         |
-| disabled        | Determines if avatar is disabled               | boolean                                                                                                       | `false`  |         |
-| iconComponent   | Replace default user icon                      | React.ReactNode                                                                                               | -        |         |
-| size            | Size of the avatar                             | `small` / `medium` / `large` / `extraLarge`                                                                   | `medium` |         |
-| tooltip         | Change default tooltip text displayed on hover | { title: string, description: string, status: string } / `false`                                              | -        |         |
+| Property        | Description                                    | Type                                                                                                          | Default  |
+| --------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------- |
+| object          | Object information                             | { name?: string, description?: string, status?: string, avatar?: string }                                     | -        |
+| color           | Color for the fallback icon                    | `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet`         | `grey`   |
+| backgroundColor | Background color of the avatar                 | `auto` / `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet` | -        |
+| badgeStatus     | Badge status                                   | `active` / `error` / `warning`                                                                                | -        |
+| disabled        | Determines if avatar is disabled               | boolean                                                                                                       | -        |
+| iconComponent   | Replace default mail icon                      | React.ReactNode                                                                                               | -        |
+| size            | Size of the avatar                             | `small` / `medium` / `large` / `extraLarge`                                                                   | -        |
+| tooltip         | Change default tooltip text displayed on hover | `TooltipObject` / `false`                                                                                     | -        |

package/dist/Avatar.d.ts

@@ -1,7 +1,5 @@
-import React from 'react';
-import '@synerise/ds-core/dist/js/style';
-import { type AvatarProps } from './Avatar.types';
-import './style/index.less';
+import { default as React } from 'react';
+import { AvatarProps } from './Avatar.types';
 export declare const DEFAULT_SIZE = "medium";
 export declare const ICON_SIZES: {
     small: number;

package/dist/Avatar.js

@@ -1,69 +1,51 @@
-var _excluded = ["backgroundColor", "backgroundColorHue", "children", "disabled", "hasStatus", "iconComponent", "iconScale", "tooltip", "size", "src"],
-  _excluded2 = ["type"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { cloneElement } from 'react';
-import '@synerise/ds-core/dist/js/style';
-import Tooltip from '@synerise/ds-tooltip';
-import * as S from './Avatar.styles';
+import { jsx } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import Tooltip from "@synerise/ds-tooltip";
+import { AntdAvatar } from "./Avatar.styles.js";
+import { isIconComponent, isSmallIconVariant, getTooltipProps } from "./utils.js";
 import "./style/index.css";
-import { getTooltipProps, isIconComponent } from './utils';
-export var DEFAULT_SIZE = 'medium';
-export var ICON_SIZES = {
+const DEFAULT_SIZE = "medium";
+const ICON_SIZES = {
   small: 16,
   medium: 24,
   large: 30,
   extraLarge: 42
 };
-var Avatar = function Avatar(_ref) {
-  var backgroundColor = _ref.backgroundColor,
-    _ref$backgroundColorH = _ref.backgroundColorHue,
-    backgroundColorHue = _ref$backgroundColorH === void 0 ? '500' : _ref$backgroundColorH,
-    children = _ref.children,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$hasStatus = _ref.hasStatus,
-    hasStatus = _ref$hasStatus === void 0 ? false : _ref$hasStatus,
-    iconComponent = _ref.iconComponent,
-    _ref$iconScale = _ref.iconScale,
-    iconScale = _ref$iconScale === void 0 ? true : _ref$iconScale,
-    _ref$tooltip = _ref.tooltip,
-    tooltip = _ref$tooltip === void 0 ? false : _ref$tooltip,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? DEFAULT_SIZE : _ref$size,
-    src = _ref.src,
-    antdProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var sizes = _extends({}, ICON_SIZES);
-  var iconElement = iconComponent;
-
-  // Enforce icon to be scaled
+const Avatar = ({
+  backgroundColor,
+  backgroundColorHue = "500",
+  children,
+  disabled = false,
+  hasStatus = false,
+  iconComponent,
+  iconScale = true,
+  tooltip = false,
+  size = DEFAULT_SIZE,
+  src,
+  ...antdProps
+}) => {
+  const sizes = {
+    ...ICON_SIZES
+  };
+  let iconElement = iconComponent;
   if (isIconComponent(iconComponent) && iconScale) {
-    var _iconElement$props$co;
-    if ((_iconElement$props$co = iconElement.props.component) != null && (_iconElement$props$co = _iconElement$props$co.type) != null && (_iconElement$props$co = _iconElement$props$co.name) != null && _iconElement$props$co.match(/S$/)) {
+    if (isSmallIconVariant(iconElement)) {
       sizes.small = 24;
     }
-    var iconSize = sizes[size] || sizes[DEFAULT_SIZE];
-    iconElement = /*#__PURE__*/cloneElement(iconElement, {
+    const iconSize = sizes[size] || sizes[DEFAULT_SIZE];
+    iconElement = cloneElement(iconElement, {
       size: iconSize
     });
   }
-  var _getTooltipProps = getTooltipProps(tooltip),
-    type = _getTooltipProps.type,
-    tooltipProps = _objectWithoutPropertiesLoose(_getTooltipProps, _excluded2);
-  var hasTooltip = Object.keys(tooltipProps).length && !!Object.values(tooltipProps).reduce(function (prev, next) {
-    return next || prev;
-  });
-  return /*#__PURE__*/React.createElement(Tooltip, _extends({
-    type: type
-  }, tooltipProps), /*#__PURE__*/React.createElement(S.AntdAvatar, _extends({
-    className: "ds-avatar",
-    hasStatus: hasStatus,
-    hasTooltip: !!hasTooltip,
-    backgroundColor: backgroundColor,
-    backgroundColorHue: backgroundColorHue,
-    disabled: disabled,
-    size: size,
-    src: src !== '' ? src : undefined
-  }, antdProps), iconElement || children));
+  const {
+    type,
+    ...tooltipProps
+  } = getTooltipProps(tooltip);
+  const hasTooltip = Object.keys(tooltipProps).length && !!Object.values(tooltipProps).reduce((prev, next) => next || prev);
+  return /* @__PURE__ */ jsx(Tooltip, { type, ...tooltipProps, children: /* @__PURE__ */ jsx(AntdAvatar, { className: "ds-avatar", hasStatus, hasTooltip: !!hasTooltip, backgroundColor, backgroundColorHue, disabled, size, src: src !== "" ? src : void 0, ...antdProps, children: iconElement || children }) });
+};
+export {
+  DEFAULT_SIZE,
+  ICON_SIZES,
+  Avatar as default
 };
-export default Avatar;

package/dist/Avatar.styles.d.ts

@@ -1,18 +1,18 @@
-import React from 'react';
-export declare const TooltipGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { default as React } from 'react';
+export declare const TooltipGroup: import('styled-components').StyledComponent<"div", any, {}, never>;
 type ExtraAvatarProps = {
     hasTooltip?: boolean;
 };
-export declare const AntdAvatar: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<import("antd/lib/avatar").AvatarProps, "icon" | "size" | "src"> & {
+export declare const AntdAvatar: import('styled-components').StyledComponent<React.ForwardRefExoticComponent<Omit<import('antd/lib/avatar').AvatarProps, "icon" | "size" | "src"> & {
     src?: string;
     hasStatus?: boolean;
-    size?: import("./Avatar.types").Size;
+    size?: import('./Avatar.types').Size;
     iconComponent?: React.ReactNode;
     iconScale?: boolean;
-    backgroundColor?: import("./Avatar.types").Color | string;
-    backgroundColorHue?: import("./Avatar.types").ColorHue;
+    backgroundColor?: import('./Avatar.types').Color | string;
+    backgroundColorHue?: import('./Avatar.types').ColorHue;
     disabled?: boolean;
-    tooltip?: import("./Avatar.types").TooltipObject | boolean;
+    tooltip?: import('./Avatar.types').TooltipObject | boolean;
     children?: React.ReactNode;
 } & ExtraAvatarProps & React.RefAttributes<HTMLButtonElement>>, any, ExtraAvatarProps, never>;
 export {};

package/dist/Avatar.styles.js

@@ -1,81 +1,56 @@
-var _excluded = ["backgroundColorHue", "backgroundColor", "hasStatus", "hasTooltip", "size"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import Avatar from 'antd/lib/avatar';
-import React, { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { macro } from '@synerise/ds-typography';
-export var TooltipGroup = styled.div.withConfig({
+import { jsx } from "react/jsx-runtime";
+import Avatar from "antd/lib/avatar";
+import { forwardRef } from "react";
+import styled, { css } from "styled-components";
+import { macro } from "@synerise/ds-typography";
+const TooltipGroup = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Avatarstyles__TooltipGroup",
   componentId: "sc-xcn5o4-0"
 })(["margin:13px 8px;font-size:11px;line-height:1.45;text-align:center;p{margin:0;font-weight:normal;&:first-child{font-weight:500;}}"]);
-var applyBgColors = function applyBgColors(props) {
-  return css(["background:", ";"], props.theme.palette[props.backgroundColor + "-" + (props.backgroundColorHue ? props.backgroundColorHue : '400')]);
+const applyBgColors = (props) => css(["background:", ";"], props.theme.palette[`${props.backgroundColor}-${props.backgroundColorHue ? props.backgroundColorHue : "400"}`]);
+const applyDisabledStyles = (props) => props.disabled && css(["opacity:0.4;pointer-events:none;"]);
+const BADGE_POSITION = {
+  circlesmall: "2px",
+  circlemedium: "5px",
+  circlelarge: "12px",
+  circleextraLarge: "17px",
+  squaresmall: "3px",
+  squaremedium: "3px",
+  squarelarge: "3px",
+  squareextraLarge: "3px"
 };
-var applyDisabledStyles = function applyDisabledStyles(props) {
-  return props.disabled && css(["opacity:0.4;pointer-events:none;"]);
-};
-var BADGE_POSITION = {
-  circlesmall: '2px',
-  circlemedium: '5px',
-  circlelarge: '12px',
-  circleextraLarge: '17px',
-  squaresmall: '3px',
-  squaremedium: '3px',
-  squarelarge: '3px',
-  squareextraLarge: '3px'
-};
-var MACRO_MAPPING = {
+const MACRO_MAPPING = {
   small: macro.xsAvatar,
   medium: macro.small,
   large: macro.small,
   extraLarge: macro.xlAvatar
 };
-var applyBadgePosition = function applyBadgePosition(props) {
-  var _props$shape = props.shape,
-    shape = _props$shape === void 0 ? 'circle' : _props$shape,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'medium' : _props$size;
-  var badgeKey = "" + shape + size;
-  return css(["top:", ";right:", ";"], BADGE_POSITION[badgeKey] || '0', BADGE_POSITION[badgeKey] || '0');
+const applyBadgePosition = (props) => {
+  const {
+    shape = "circle",
+    size = "medium"
+  } = props;
+  const badgeKey = `${shape}${size}`;
+  return css(["top:", ";right:", ";"], BADGE_POSITION[badgeKey] || "0", BADGE_POSITION[badgeKey] || "0");
 };
-var applyFontSize = function applyFontSize(props) {
-  var _props$size2 = props.size,
-    size = _props$size2 === void 0 ? 'medium' : _props$size2;
+const applyFontSize = (props) => {
+  const {
+    size = "medium"
+  } = props;
   return css(["", ";"], MACRO_MAPPING[size]);
 };
-export var AntdAvatar = styled(/*#__PURE__*/forwardRef(function (_ref, ref) {
-  var backgroundColorHue = _ref.backgroundColorHue,
-    backgroundColor = _ref.backgroundColor,
-    hasStatus = _ref.hasStatus,
-    hasTooltip = _ref.hasTooltip,
-    size = _ref.size,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Avatar, _extends({
-    ref: ref,
-    size: size === 'medium' || size === 'extraLarge' ? 'default' : size
-  }, rest));
-})).withConfig({
+const AntdAvatar = /* @__PURE__ */ styled(forwardRef(({
+  backgroundColorHue,
+  backgroundColor,
+  hasStatus,
+  hasTooltip,
+  size,
+  ...rest
+}, ref) => /* @__PURE__ */ jsx(Avatar, { ref, size: size === "medium" || size === "extraLarge" ? "default" : size, ...rest }))).withConfig({
   displayName: "Avatarstyles__AntdAvatar",
   componentId: "sc-xcn5o4-1"
-})(["&&{", ";", ";transition:background 0.3s ease;user-select:none;min-width:24px;span{color:", " !important;}&.ant-avatar-square{border-radius:8px;}.ant-avatar-string{width:100%;height:100%;left:0;position:relative;font-size:11px;transform:none !important;", ";", ";user-select:none;pointer-events:none;& > div{max-width:100%;max-height:100%;svg{width:100%;height:100%;}}}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0;border-radius:inherit;}", ";", " & ~ .ant-badge-dot{display:none;}", ";", ";", ";", ";}"], function (props) {
-  return applyBgColors(props);
-}, function (props) {
-  return applyDisabledStyles(props);
-}, function (props) {
-  return props.theme.palette.white;
-}, function (props) {
-  return applyFontSize(props);
-}, macro.flexCentered, function (props) {
-  return (props.onClick || props.hasTooltip) && css(["&:hover{&::before{opacity:0.05;}}"]);
-}, function (props) {
-  return props.onClick ? css(["cursor:pointer;&:active{&::before{opacity:0.1;}}"]) : false;
-}, function (props) {
-  return props.hasStatus && css(["& ~ .ant-badge-dot{display:flex;border:2px solid ", ";box-sizing:border-box;width:10px;height:10px;box-shadow:none;", ";}"], props.theme.palette.white, applyBadgePosition(props));
-}, function (props) {
-  return props.size === 'medium' && css(["width:40px;min-width:40px;height:40px;.ant-avatar-string{line-height:40px;}"]);
-}, function (props) {
-  return props.size === 'large' && css(["width:84px;min-width:84px;height:84px;.ant-avatar-string{line-height:84px;font-size:18px;}"]);
-}, function (props) {
-  return props.size === 'extraLarge' && css(["width:120px;min-width:120px;height:120px;font-size:22px;.ant-avatar-string{line-height:120px;", ";}"], macro.xlAvatar);
-});
+})(["&&{", ";", ";transition:background 0.3s ease;user-select:none;min-width:24px;span{color:", " !important;}&.ant-avatar-square{border-radius:8px;}.ant-avatar-string{width:100%;height:100%;left:0;position:relative;font-size:11px;transform:none !important;", ";", ";user-select:none;pointer-events:none;& > div{max-width:100%;max-height:100%;svg{width:100%;height:100%;}}}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0;border-radius:inherit;}", ";", " & ~ .ant-badge-dot{display:none;}", ";", ";", ";", ";}"], (props) => applyBgColors(props), (props) => applyDisabledStyles(props), (props) => props.theme.palette.white, (props) => applyFontSize(props), macro.flexCentered, (props) => (props.onClick || props.hasTooltip) && css(["&:hover{&::before{opacity:0.05;}}"]), (props) => props.onClick ? css(["cursor:pointer;&:active{&::before{opacity:0.1;}}"]) : false, (props) => props.hasStatus && css(["& ~ .ant-badge-dot{display:flex;border:2px solid ", ";box-sizing:border-box;width:10px;height:10px;box-shadow:none;", ";}"], props.theme.palette.white, applyBadgePosition(props)), (props) => props.size === "medium" && css(["width:40px;min-width:40px;height:40px;.ant-avatar-string{line-height:40px;}"]), (props) => props.size === "large" && css(["width:84px;min-width:84px;height:84px;.ant-avatar-string{line-height:84px;font-size:18px;}"]), (props) => props.size === "extraLarge" && css(["width:120px;min-width:120px;height:120px;font-size:22px;.ant-avatar-string{line-height:120px;", ";}"], macro.xlAvatar));
+export {
+  AntdAvatar,
+  TooltipGroup
+};

package/dist/Avatar.types.d.ts

@@ -1,7 +1,7 @@
-import { type AvatarProps as AntAvatarProps } from 'antd/lib/avatar';
-import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
-import type { BadgeStatus } from '@synerise/ds-badge';
-import { type TooltipProps } from '@synerise/ds-tooltip';
+import { AvatarProps as AntAvatarProps } from 'antd/lib/avatar';
+import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+import { BadgeStatus } from '@synerise/ds-badge';
+import { TooltipProps } from '@synerise/ds-tooltip';
 export type Color = 'red' | 'green' | 'grey' | 'yellow' | 'blue' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
 export type ColorHue = '900' | '800' | '700' | '600' | '500' | '400' | '300' | '200' | '100' | '050';
 export type Size = 'small' | 'medium' | 'large' | 'extraLarge' | undefined;

package/dist/Avatar.types.js

@@ -1 +1 @@
-export {};
+

package/dist/DefaultAvatarIcon.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { TOTAL_DEFAULT_AVATARS } from './defaultAvatars';
 export { TOTAL_DEFAULT_AVATARS };
 type DefaultAvatarIconProps = {

package/dist/DefaultAvatarIcon.js

@@ -1,23 +1,19 @@
-import React from 'react';
-import { DEFAULT_AVATARS, TOTAL_DEFAULT_AVATARS } from './defaultAvatars';
-export { TOTAL_DEFAULT_AVATARS };
-var DefaultAvatarIcon = function DefaultAvatarIcon(_ref) {
-  var index = _ref.index;
-  var total = TOTAL_DEFAULT_AVATARS;
-  if (total === 0) {
-    return null;
-  }
-  var safeIndex = (index % total + total) % total;
-  var SvgComponent = DEFAULT_AVATARS[safeIndex];
+import { jsx } from "react/jsx-runtime";
+import { DEFAULT_AVATARS, TOTAL_DEFAULT_AVATARS } from "./defaultAvatars/index.js";
+const DefaultAvatarIcon = ({
+  index
+}) => {
+  const total = TOTAL_DEFAULT_AVATARS;
+  const safeIndex = (index % total + total) % total;
+  const SvgComponent = DEFAULT_AVATARS[safeIndex];
   if (!SvgComponent) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(SvgComponent, {
-    width: "100%",
-    height: "100%",
-    style: {
-      display: 'block'
-    }
-  });
+  return /* @__PURE__ */ jsx(SvgComponent, { width: "100%", height: "100%", style: {
+    display: "block"
+  } });
+};
+export {
+  TOTAL_DEFAULT_AVATARS,
+  DefaultAvatarIcon as default
 };
-export default DefaultAvatarIcon;

package/dist/ObjectAvatar/ObjectAvatar.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type ObjectAvatarProps } from '../Avatar.types';
+import { default as React } from 'react';
+import { ObjectAvatarProps } from '../Avatar.types';
 export declare const DEFAULT_COLOR_HUE = "600";
 export declare const DEFAULT_COLOR = "grey";
 declare const ObjectAvatar: ({ backgroundColor, badgeStatus, iconComponent, color, object, size, src, tooltip, text, children, disabled, style, ...restProps }: ObjectAvatarProps) => React.JSX.Element;

package/dist/ObjectAvatar/ObjectAvatar.js

@@ -1,71 +1,49 @@
-var _excluded = ["backgroundColor", "badgeStatus", "iconComponent", "color", "object", "size", "src", "tooltip", "text", "children", "disabled", "style"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React from 'react';
-import Badge from '@synerise/ds-badge';
-import { theme } from '@synerise/ds-core';
-import Icon, { MailM } from '@synerise/ds-icon';
-import Status from '@synerise/ds-status';
-import Avatar from '../Avatar';
-import { addIconColor, getColorByText, getObjectName } from '../utils';
-export var DEFAULT_COLOR_HUE = '600';
-export var DEFAULT_COLOR = 'grey';
-var ObjectAvatar = function ObjectAvatar(_ref) {
-  var backgroundColor = _ref.backgroundColor,
-    badgeStatus = _ref.badgeStatus,
-    iconComponent = _ref.iconComponent,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'grey' : _ref$color,
-    _ref$object = _ref.object,
-    object = _ref$object === void 0 ? {} : _ref$object,
-    size = _ref.size,
-    src = _ref.src,
-    tooltip = _ref.tooltip,
-    text = _ref.text,
-    children = _ref.children,
-    disabled = _ref.disabled,
-    style = _ref.style,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _ref2 = object || {},
-    objectName = _ref2.name,
-    objectDescription = _ref2.description,
-    objectStatus = _ref2.status,
-    avatar = _ref2.avatar;
-  var defaultTooltip = {
-    title: objectName || '',
-    description: objectDescription || '',
-    status: objectStatus ? /*#__PURE__*/React.createElement(Status, {
-      label: objectStatus,
-      type: "disabled"
-    }) : ''
+import { jsx } from "react/jsx-runtime";
+import Badge from "@synerise/ds-badge";
+import { theme } from "@synerise/ds-core";
+import Icon, { MailM } from "@synerise/ds-icon";
+import Status from "@synerise/ds-status";
+import Avatar from "../Avatar.js";
+import { getObjectName, getColorByText, addIconColor } from "../utils.js";
+const DEFAULT_COLOR_HUE = "600";
+const DEFAULT_COLOR = "grey";
+const ObjectAvatar = ({
+  backgroundColor,
+  badgeStatus,
+  iconComponent,
+  color = "grey",
+  object = {},
+  size,
+  src,
+  tooltip,
+  text,
+  children,
+  disabled,
+  style,
+  ...restProps
+}) => {
+  const {
+    name: objectName,
+    description: objectDescription,
+    status: objectStatus,
+    avatar
+  } = object || {};
+  const defaultTooltip = {
+    title: objectName || "",
+    description: objectDescription || "",
+    status: objectStatus ? /* @__PURE__ */ jsx(Status, { label: objectStatus, type: "disabled" }) : ""
   };
-  var avatarText = getObjectName(objectName, text);
-  var _getColorByText = getColorByText(avatarText, backgroundColor),
-    avatarBackgroundColor = _getColorByText[0],
-    avatarBackgroundHue = _getColorByText[1];
-  var iconColor = theme.palette[(color || DEFAULT_COLOR) + "-" + DEFAULT_COLOR_HUE];
-  var avatarTooltip = tooltip === undefined && (defaultTooltip.title || defaultTooltip.description) ? defaultTooltip : tooltip;
-  var iconElement = addIconColor(iconComponent, iconColor);
-  var icon = !avatarText ? iconElement || /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(MailM, null),
-    color: iconColor
-  }) : null;
-  var avatarRender = /*#__PURE__*/React.createElement(Avatar, _extends({
-    iconComponent: icon,
-    shape: "square",
-    backgroundColor: avatarBackgroundColor,
-    backgroundColorHue: avatarBackgroundHue,
-    size: size,
-    hasStatus: disabled === true ? false : !!badgeStatus,
-    src: avatar || src,
-    tooltip: avatarTooltip,
-    disabled: disabled,
-    style: badgeStatus ? {} : style
-  }, restProps), children || avatarText);
-  return badgeStatus ? /*#__PURE__*/React.createElement("span", {
-    style: style
-  }, /*#__PURE__*/React.createElement(Badge, {
-    status: badgeStatus
-  }, avatarRender)) : avatarRender;
+  const avatarText = getObjectName(objectName, text);
+  const [avatarBackgroundColor, avatarBackgroundHue] = getColorByText(avatarText, backgroundColor);
+  const iconColor = theme.palette[`${color || DEFAULT_COLOR}-${DEFAULT_COLOR_HUE}`];
+  const avatarTooltip = tooltip === void 0 && (defaultTooltip.title || defaultTooltip.description) ? defaultTooltip : tooltip;
+  const iconElement = addIconColor(iconComponent, iconColor);
+  const icon = !avatarText ? iconElement || /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(MailM, {}), color: iconColor }) : null;
+  const avatarRender = /* @__PURE__ */ jsx(Avatar, { iconComponent: icon, shape: "square", backgroundColor: avatarBackgroundColor, backgroundColorHue: avatarBackgroundHue, size, hasStatus: disabled === true ? false : !!badgeStatus, src: avatar || src, tooltip: avatarTooltip, disabled, style: badgeStatus ? {} : style, ...restProps, children: children || avatarText });
+  return badgeStatus ? /* @__PURE__ */ jsx("span", { style, children: /* @__PURE__ */ jsx(Badge, { status: badgeStatus, children: avatarRender }) }) : avatarRender;
+};
+export {
+  DEFAULT_COLOR,
+  DEFAULT_COLOR_HUE,
+  ObjectAvatar as default
 };
-export default ObjectAvatar;

package/dist/ObjectAvatar/index.js

@@ -1 +1,4 @@
-export { default } from './ObjectAvatar';
+import { default as default2 } from "./ObjectAvatar.js";
+export {
+  default2 as default
+};

package/dist/UserAvatar/UserAvatar.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type UserAvatarProps } from '../Avatar.types';
+import { default as React } from 'react';
+import { UserAvatarProps } from '../Avatar.types';
 export declare const DEFAULT_COLOR = "grey";
 export declare const DEFAULT_COLOR_HUE = "500";
 declare const UserAvatar: React.FC<UserAvatarProps>;