@activecollab/components 1.0.292 → 1.0.294
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Avatar/Avatar.js +5 -2
- package/dist/cjs/components/Avatar/Avatar.js.map +1 -1
- package/dist/cjs/components/AvatarGroup/AvatarGroup.js +4 -2
- package/dist/cjs/components/AvatarGroup/AvatarGroup.js.map +1 -1
- package/dist/esm/components/Avatar/Avatar.d.ts +3 -0
- package/dist/esm/components/Avatar/Avatar.d.ts.map +1 -1
- package/dist/esm/components/Avatar/Avatar.js +5 -2
- package/dist/esm/components/Avatar/Avatar.js.map +1 -1
- package/dist/esm/components/AvatarGroup/AvatarGroup.d.ts.map +1 -1
- package/dist/esm/components/AvatarGroup/AvatarGroup.js +4 -2
- package/dist/esm/components/AvatarGroup/AvatarGroup.js.map +1 -1
- package/dist/index.js +9 -4
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.Avatar = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _Styles = require("./Styles");
|
|
10
|
-
var _excluded = ["url", "alt", "size", "className", "children"];
|
|
10
|
+
var _excluded = ["url", "alt", "size", "className", "imgClassName", "children"];
|
|
11
11
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
12
12
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
13
13
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
@@ -21,6 +21,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
21
21
|
* @prop {url} - The image url of the Avatar.
|
|
22
22
|
* @prop {size} - controls the size of an Avatar (width and height) in pixels.
|
|
23
23
|
* @prop {alt} - alt attribute of the img.
|
|
24
|
+
* @prop {imgClassName} - class name that attaches to img element nested in Wrapper
|
|
24
25
|
*
|
|
25
26
|
* @example
|
|
26
27
|
* <Avatar url="https://faces-img.xcdn.link/image-lorem-face-954.jpg" alt="Profile picture of John" />
|
|
@@ -44,6 +45,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
44
45
|
_ref$size = _ref.size,
|
|
45
46
|
size = _ref$size === void 0 ? 24 : _ref$size,
|
|
46
47
|
className = _ref.className,
|
|
48
|
+
imgClassName = _ref.imgClassName,
|
|
47
49
|
children = _ref.children,
|
|
48
50
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
49
51
|
return /*#__PURE__*/_react.default.createElement(_Styles.StyledWrapper, {
|
|
@@ -53,7 +55,8 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
53
55
|
ref: ref,
|
|
54
56
|
src: url,
|
|
55
57
|
alt: alt,
|
|
56
|
-
role: "img"
|
|
58
|
+
role: "img",
|
|
59
|
+
className: imgClassName
|
|
57
60
|
}, rest)));
|
|
58
61
|
});
|
|
59
62
|
exports.Avatar = Avatar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","names":["Avatar","forwardRef","ref","url","alt","size","className","children","rest","displayName"],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren } from \"react\";\nimport { StyledAvatar, StyledWrapper } from \"./Styles\";\n\nexport interface AvatarProps extends React.ComponentPropsWithoutRef<\"img\"> {\n /** Path url. */\n url: string;\n /** Alt text. */\n alt?: string;\n /** Image size. */\n size?: number;\n /** Custom class. */\n className?: string;\n}\n\n/**\n * @component Avatar\n * @description\n * The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @prop {url} - The image url of the Avatar.\n * @prop {size} - controls the size of an Avatar (width and height) in pixels.\n * @prop {alt} - alt attribute of the img.\n *\n * @example\n * <Avatar url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\" alt=\"Profile picture of John\" />\n *\n * @example\n * <Avatar\n * url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\"\n * alt=\"Profile picture of John\">\n * <Badge size={8} backgroundColor=\"green\" position=\"bottom-left\" />\n * </Avatar>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar\n * @see\n * https://design.activecollab.com/docs/components/avatar\n */\nexport const Avatar = forwardRef<\n HTMLImageElement,\n PropsWithChildren<AvatarProps>\n>(\n (\n {
|
|
1
|
+
{"version":3,"file":"Avatar.js","names":["Avatar","forwardRef","ref","url","alt","size","className","imgClassName","children","rest","displayName"],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren } from \"react\";\nimport { StyledAvatar, StyledWrapper } from \"./Styles\";\n\nexport interface AvatarProps extends React.ComponentPropsWithoutRef<\"img\"> {\n /** Path url. */\n url: string;\n /** Alt text. */\n alt?: string;\n /** Image size. */\n size?: number;\n /** Custom class. */\n className?: string;\n /** img custom class. */\n imgClassName?: string;\n}\n\n/**\n * @component Avatar\n * @description\n * The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @prop {url} - The image url of the Avatar.\n * @prop {size} - controls the size of an Avatar (width and height) in pixels.\n * @prop {alt} - alt attribute of the img.\n * @prop {imgClassName} - class name that attaches to img element nested in Wrapper\n *\n * @example\n * <Avatar url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\" alt=\"Profile picture of John\" />\n *\n * @example\n * <Avatar\n * url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\"\n * alt=\"Profile picture of John\">\n * <Badge size={8} backgroundColor=\"green\" position=\"bottom-left\" />\n * </Avatar>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar\n * @see\n * https://design.activecollab.com/docs/components/avatar\n */\nexport const Avatar = forwardRef<\n HTMLImageElement,\n PropsWithChildren<AvatarProps>\n>(\n (\n {\n url,\n alt = \"Avatar Image\",\n size = 24,\n className,\n imgClassName,\n children,\n ...rest\n },\n ref\n ) => (\n <StyledWrapper className={className}>\n {children}\n <StyledAvatar\n size={size}\n ref={ref}\n src={url}\n alt={alt}\n role=\"img\"\n className={imgClassName}\n {...rest}\n />\n </StyledWrapper>\n )\n);\n\nAvatar.displayName = \"Avatar\";\n"],"mappings":";;;;;;;AAAA;AACA;AAAuD;AAAA;AAAA;AAAA;AAAA;AAAA;AAevD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,MAAM,gBAAG,IAAAC,iBAAU,EAI9B,gBAUEC,GAAG;EAAA,IARDC,GAAG,QAAHA,GAAG;IAAA,gBACHC,GAAG;IAAHA,GAAG,yBAAG,cAAc;IAAA,iBACpBC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,SAAS,QAATA,SAAS;IACTC,YAAY,QAAZA,YAAY;IACZC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAAA,oBAIT,6BAAC,qBAAa;IAAC,SAAS,EAAEH;EAAU,GACjCE,QAAQ,eACT,6BAAC,oBAAY;IACX,IAAI,EAAEH,IAAK;IACX,GAAG,EAAEH,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,IAAI,EAAC,KAAK;IACV,SAAS,EAAEG;EAAa,GACpBE,IAAI,EACR,CACY;AAAA,CACjB,CACF;AAAC;AAEFT,MAAM,CAACU,WAAW,GAAG,QAAQ"}
|
|
@@ -22,7 +22,9 @@ var AvatarGroup = function AvatarGroup(_ref) {
|
|
|
22
22
|
size = _ref$size === void 0 ? 34 : _ref$size,
|
|
23
23
|
children = _ref.children,
|
|
24
24
|
counterProps = _ref.counterProps;
|
|
25
|
-
|
|
25
|
+
// always display counter with min +2 as +1 can require 1 more Avatar
|
|
26
|
+
var minChildren = _react.Children.count(children) - limit > 1 ? false : true;
|
|
27
|
+
var _children = minChildren ? _react.Children.toArray(children) : _react.Children.toArray(children).slice(0, limit);
|
|
26
28
|
var handleVariant = (0, _react.useMemo)(function () {
|
|
27
29
|
if (size >= 34) return "Caption 1";
|
|
28
30
|
return "Caption 2";
|
|
@@ -36,7 +38,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
|
|
|
36
38
|
outline: "1px solid var(--page-paper-main)"
|
|
37
39
|
}
|
|
38
40
|
}));
|
|
39
|
-
}), limit >= _react.Children.count(children) ? null : /*#__PURE__*/_react.default.createElement(_StyledLengthCountStyles, _extends({
|
|
41
|
+
}), limit >= _react.Children.count(children) || minChildren ? null : /*#__PURE__*/_react.default.createElement(_StyledLengthCountStyles, _extends({
|
|
40
42
|
size: size,
|
|
41
43
|
role: "status",
|
|
42
44
|
"aria-label": "Rest of the users"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.js","names":["AvatarGroup","limit","size","children","counterProps","
|
|
1
|
+
{"version":3,"file":"AvatarGroup.js","names":["AvatarGroup","limit","size","children","counterProps","minChildren","Children","count","_children","toArray","slice","handleVariant","useMemo","map","child","item","cloneElement","props","style","marginInlineStart","outline"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n Children,\n cloneElement,\n HTMLAttributes,\n PropsWithChildren,\n ReactElement,\n useMemo,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n limit: number;\n size?: number;\n counterProps?: HTMLAttributes<HTMLDivElement> & {\n [dataAttibute: `data-${string}`]: string;\n };\n}\n\nexport const AvatarGroup = ({\n limit,\n size = 34,\n children,\n counterProps,\n}: PropsWithChildren<AvatarGroupsProps>) => {\n // always display counter with min +2 as +1 can require 1 more Avatar\n const minChildren = Children.count(children) - limit > 1 ? false : true;\n const _children = minChildren\n ? Children.toArray(children)\n : Children.toArray(children).slice(0, limit);\n\n const handleVariant = useMemo(() => {\n if (size >= 34) return \"Caption 1\";\n return \"Caption 2\";\n }, [size]);\n\n return (\n <AvatarGroupsStyles>\n {_children.map((child) => {\n const item = child as ReactElement<AvatarProps>;\n\n return cloneElement(item, {\n ...item.props,\n size: size,\n style: {\n marginInlineStart: \"-8px\",\n outline: \"1px solid var(--page-paper-main)\",\n },\n });\n })}\n\n {limit >= Children.count(children) || minChildren ? null : (\n <LengthCountStyles\n size={size}\n role=\"status\"\n aria-label=\"Rest of the users\"\n css={{ marginInlineStart: \"-8px\" }}\n {...counterProps}\n >\n <Typography variant={handleVariant} weight=\"medium\">\n +{Children.count(children) - limit}\n </Typography>\n </LengthCountStyles>\n )}\n </AvatarGroupsStyles>\n );\n};\n"],"mappings":";;;;;;;;AAAA;AASA;AACA;AAAiE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1D,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAKoB;EAAA,IAJ1CC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;EAEZ;EACA,IAAMC,WAAW,GAAGC,eAAQ,CAACC,KAAK,CAACJ,QAAQ,CAAC,GAAGF,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,IAAI;EACvE,IAAMO,SAAS,GAAGH,WAAW,GACzBC,eAAQ,CAACG,OAAO,CAACN,QAAQ,CAAC,GAC1BG,eAAQ,CAACG,OAAO,CAACN,QAAQ,CAAC,CAACO,KAAK,CAAC,CAAC,EAAET,KAAK,CAAC;EAE9C,IAAMU,aAAa,GAAG,IAAAC,cAAO,EAAC,YAAM;IAClC,IAAIV,IAAI,IAAI,EAAE,EAAE,OAAO,WAAW;IAClC,OAAO,WAAW;EACpB,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,oBACE,6BAAC,0BAAkB,QAChBM,SAAS,CAACK,GAAG,CAAC,UAACC,KAAK,EAAK;IACxB,IAAMC,IAAI,GAAGD,KAAkC;IAE/C,oBAAO,IAAAE,mBAAY,EAACD,IAAI,kCACnBA,IAAI,CAACE,KAAK;MACbf,IAAI,EAAEA,IAAI;MACVgB,KAAK,EAAE;QACLC,iBAAiB,EAAE,MAAM;QACzBC,OAAO,EAAE;MACX;IAAC,GACD;EACJ,CAAC,CAAC,EAEDnB,KAAK,IAAIK,eAAQ,CAACC,KAAK,CAACJ,QAAQ,CAAC,IAAIE,WAAW,GAAG,IAAI,gBACtD;IACE,IAAI,EAAEH,IAAK;IACX,IAAI,EAAC,QAAQ;IACb,cAAW;EAAmB,GAE1BE,YAAY,gBAEhB,6BAAC,sBAAU;IAAC,OAAO,EAAEO,aAAc;IAAC,MAAM,EAAC;EAAQ,QAC/CL,eAAQ,CAACC,KAAK,CAACJ,QAAQ,CAAC,GAAGF,KAAK,CACvB,CAEhB,CACkB;AAEzB,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA,GAVa;EAAEkB,iBAAiB,EAAE;AAAO,CAAC"}
|
|
@@ -8,6 +8,8 @@ export interface AvatarProps extends React.ComponentPropsWithoutRef<"img"> {
|
|
|
8
8
|
size?: number;
|
|
9
9
|
/** Custom class. */
|
|
10
10
|
className?: string;
|
|
11
|
+
/** img custom class. */
|
|
12
|
+
imgClassName?: string;
|
|
11
13
|
}
|
|
12
14
|
/**
|
|
13
15
|
* @component Avatar
|
|
@@ -17,6 +19,7 @@ export interface AvatarProps extends React.ComponentPropsWithoutRef<"img"> {
|
|
|
17
19
|
* @prop {url} - The image url of the Avatar.
|
|
18
20
|
* @prop {size} - controls the size of an Avatar (width and height) in pixels.
|
|
19
21
|
* @prop {alt} - alt attribute of the img.
|
|
22
|
+
* @prop {imgClassName} - class name that attaches to img element nested in Wrapper
|
|
20
23
|
*
|
|
21
24
|
* @example
|
|
22
25
|
* <Avatar url="https://faces-img.xcdn.link/image-lorem-face-954.jpg" alt="Profile picture of John" />
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAG7D,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACxE,gBAAgB;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAG7D,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACxE,gBAAgB;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,MAAM;;0CA6BlB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["url", "alt", "size", "className", "children"];
|
|
3
|
+
var _excluded = ["url", "alt", "size", "className", "imgClassName", "children"];
|
|
4
4
|
import React, { forwardRef } from "react";
|
|
5
5
|
import { StyledAvatar, StyledWrapper } from "./Styles";
|
|
6
6
|
/**
|
|
@@ -11,6 +11,7 @@ import { StyledAvatar, StyledWrapper } from "./Styles";
|
|
|
11
11
|
* @prop {url} - The image url of the Avatar.
|
|
12
12
|
* @prop {size} - controls the size of an Avatar (width and height) in pixels.
|
|
13
13
|
* @prop {alt} - alt attribute of the img.
|
|
14
|
+
* @prop {imgClassName} - class name that attaches to img element nested in Wrapper
|
|
14
15
|
*
|
|
15
16
|
* @example
|
|
16
17
|
* <Avatar url="https://faces-img.xcdn.link/image-lorem-face-954.jpg" alt="Profile picture of John" />
|
|
@@ -34,6 +35,7 @@ export var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
34
35
|
_ref$size = _ref.size,
|
|
35
36
|
size = _ref$size === void 0 ? 24 : _ref$size,
|
|
36
37
|
className = _ref.className,
|
|
38
|
+
imgClassName = _ref.imgClassName,
|
|
37
39
|
children = _ref.children,
|
|
38
40
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
39
41
|
return /*#__PURE__*/React.createElement(StyledWrapper, {
|
|
@@ -43,7 +45,8 @@ export var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
43
45
|
ref: ref,
|
|
44
46
|
src: url,
|
|
45
47
|
alt: alt,
|
|
46
|
-
role: "img"
|
|
48
|
+
role: "img",
|
|
49
|
+
className: imgClassName
|
|
47
50
|
}, rest)));
|
|
48
51
|
});
|
|
49
52
|
Avatar.displayName = "Avatar";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","names":["React","forwardRef","StyledAvatar","StyledWrapper","Avatar","ref","url","alt","size","className","children","rest","displayName"],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren } from \"react\";\nimport { StyledAvatar, StyledWrapper } from \"./Styles\";\n\nexport interface AvatarProps extends React.ComponentPropsWithoutRef<\"img\"> {\n /** Path url. */\n url: string;\n /** Alt text. */\n alt?: string;\n /** Image size. */\n size?: number;\n /** Custom class. */\n className?: string;\n}\n\n/**\n * @component Avatar\n * @description\n * The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @prop {url} - The image url of the Avatar.\n * @prop {size} - controls the size of an Avatar (width and height) in pixels.\n * @prop {alt} - alt attribute of the img.\n *\n * @example\n * <Avatar url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\" alt=\"Profile picture of John\" />\n *\n * @example\n * <Avatar\n * url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\"\n * alt=\"Profile picture of John\">\n * <Badge size={8} backgroundColor=\"green\" position=\"bottom-left\" />\n * </Avatar>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar\n * @see\n * https://design.activecollab.com/docs/components/avatar\n */\nexport const Avatar = forwardRef<\n HTMLImageElement,\n PropsWithChildren<AvatarProps>\n>(\n (\n {
|
|
1
|
+
{"version":3,"file":"Avatar.js","names":["React","forwardRef","StyledAvatar","StyledWrapper","Avatar","ref","url","alt","size","className","imgClassName","children","rest","displayName"],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren } from \"react\";\nimport { StyledAvatar, StyledWrapper } from \"./Styles\";\n\nexport interface AvatarProps extends React.ComponentPropsWithoutRef<\"img\"> {\n /** Path url. */\n url: string;\n /** Alt text. */\n alt?: string;\n /** Image size. */\n size?: number;\n /** Custom class. */\n className?: string;\n /** img custom class. */\n imgClassName?: string;\n}\n\n/**\n * @component Avatar\n * @description\n * The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @prop {url} - The image url of the Avatar.\n * @prop {size} - controls the size of an Avatar (width and height) in pixels.\n * @prop {alt} - alt attribute of the img.\n * @prop {imgClassName} - class name that attaches to img element nested in Wrapper\n *\n * @example\n * <Avatar url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\" alt=\"Profile picture of John\" />\n *\n * @example\n * <Avatar\n * url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\"\n * alt=\"Profile picture of John\">\n * <Badge size={8} backgroundColor=\"green\" position=\"bottom-left\" />\n * </Avatar>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar\n * @see\n * https://design.activecollab.com/docs/components/avatar\n */\nexport const Avatar = forwardRef<\n HTMLImageElement,\n PropsWithChildren<AvatarProps>\n>(\n (\n {\n url,\n alt = \"Avatar Image\",\n size = 24,\n className,\n imgClassName,\n children,\n ...rest\n },\n ref\n ) => (\n <StyledWrapper className={className}>\n {children}\n <StyledAvatar\n size={size}\n ref={ref}\n src={url}\n alt={alt}\n role=\"img\"\n className={imgClassName}\n {...rest}\n />\n </StyledWrapper>\n )\n);\n\nAvatar.displayName = \"Avatar\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAA2B,OAAO;AAC5D,SAASC,YAAY,EAAEC,aAAa,QAAQ,UAAU;AAetD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,MAAM,gBAAGH,UAAU,CAI9B,gBAUEI,GAAG;EAAA,IARDC,GAAG,QAAHA,GAAG;IAAA,gBACHC,GAAG;IAAHA,GAAG,yBAAG,cAAc;IAAA,iBACpBC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,SAAS,QAATA,SAAS;IACTC,YAAY,QAAZA,YAAY;IACZC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAAA,oBAIT,oBAAC,aAAa;IAAC,SAAS,EAAEH;EAAU,GACjCE,QAAQ,eACT,oBAAC,YAAY;IACX,IAAI,EAAEH,IAAK;IACX,GAAG,EAAEH,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,GAAG,EAAEC,GAAI;IACT,IAAI,EAAC,KAAK;IACV,SAAS,EAAEG;EAAa,GACpBE,IAAI,EACR,CACY;AAAA,CACjB,CACF;AAEDR,MAAM,CAACS,WAAW,GAAG,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAc,EAGZ,cAAc,EACd,iBAAiB,EAGlB,MAAM,OAAO,CAAC;AAKf,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;QAC9C,CAAC,YAAY,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;KAC1C,CAAC;CACH;AAED,eAAO,MAAM,WAAW,6CAKrB,kBAAkB,iBAAiB,CAAC,
|
|
1
|
+
{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAc,EAGZ,cAAc,EACd,iBAAiB,EAGlB,MAAM,OAAO,CAAC;AAKf,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;QAC9C,CAAC,YAAY,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;KAC1C,CAAC;CACH;AAED,eAAO,MAAM,WAAW,6CAKrB,kBAAkB,iBAAiB,CAAC,gBA0CtC,CAAC"}
|
|
@@ -9,7 +9,9 @@ export var AvatarGroup = function AvatarGroup(_ref) {
|
|
|
9
9
|
size = _ref$size === void 0 ? 34 : _ref$size,
|
|
10
10
|
children = _ref.children,
|
|
11
11
|
counterProps = _ref.counterProps;
|
|
12
|
-
|
|
12
|
+
// always display counter with min +2 as +1 can require 1 more Avatar
|
|
13
|
+
var minChildren = Children.count(children) - limit > 1 ? false : true;
|
|
14
|
+
var _children = minChildren ? Children.toArray(children) : Children.toArray(children).slice(0, limit);
|
|
13
15
|
var handleVariant = useMemo(function () {
|
|
14
16
|
if (size >= 34) return "Caption 1";
|
|
15
17
|
return "Caption 2";
|
|
@@ -23,7 +25,7 @@ export var AvatarGroup = function AvatarGroup(_ref) {
|
|
|
23
25
|
outline: "1px solid var(--page-paper-main)"
|
|
24
26
|
}
|
|
25
27
|
}));
|
|
26
|
-
}), limit >= Children.count(children) ? null : /*#__PURE__*/React.createElement(_StyledLengthCountStyles, _extends({
|
|
28
|
+
}), limit >= Children.count(children) || minChildren ? null : /*#__PURE__*/React.createElement(_StyledLengthCountStyles, _extends({
|
|
27
29
|
size: size,
|
|
28
30
|
role: "status",
|
|
29
31
|
"aria-label": "Rest of the users"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.js","names":["React","Children","cloneElement","useMemo","Typography","AvatarGroupsStyles","LengthCountStyles","AvatarGroup","limit","size","children","counterProps","_children","toArray","slice","handleVariant","map","child","item","props","style","marginInlineStart","outline"
|
|
1
|
+
{"version":3,"file":"AvatarGroup.js","names":["React","Children","cloneElement","useMemo","Typography","AvatarGroupsStyles","LengthCountStyles","AvatarGroup","limit","size","children","counterProps","minChildren","count","_children","toArray","slice","handleVariant","map","child","item","props","style","marginInlineStart","outline"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n Children,\n cloneElement,\n HTMLAttributes,\n PropsWithChildren,\n ReactElement,\n useMemo,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n limit: number;\n size?: number;\n counterProps?: HTMLAttributes<HTMLDivElement> & {\n [dataAttibute: `data-${string}`]: string;\n };\n}\n\nexport const AvatarGroup = ({\n limit,\n size = 34,\n children,\n counterProps,\n}: PropsWithChildren<AvatarGroupsProps>) => {\n // always display counter with min +2 as +1 can require 1 more Avatar\n const minChildren = Children.count(children) - limit > 1 ? false : true;\n const _children = minChildren\n ? Children.toArray(children)\n : Children.toArray(children).slice(0, limit);\n\n const handleVariant = useMemo(() => {\n if (size >= 34) return \"Caption 1\";\n return \"Caption 2\";\n }, [size]);\n\n return (\n <AvatarGroupsStyles>\n {_children.map((child) => {\n const item = child as ReactElement<AvatarProps>;\n\n return cloneElement(item, {\n ...item.props,\n size: size,\n style: {\n marginInlineStart: \"-8px\",\n outline: \"1px solid var(--page-paper-main)\",\n },\n });\n })}\n\n {limit >= Children.count(children) || minChildren ? null : (\n <LengthCountStyles\n size={size}\n role=\"status\"\n aria-label=\"Rest of the users\"\n css={{ marginInlineStart: \"-8px\" }}\n {...counterProps}\n >\n <Typography variant={handleVariant} weight=\"medium\">\n +{Children.count(children) - limit}\n </Typography>\n </LengthCountStyles>\n )}\n </AvatarGroupsStyles>\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAK,IACVC,QAAQ,EACRC,YAAY,EAIZC,OAAO,QACF,OAAO;AAEd,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,kBAAkB,EAAEC,iBAAiB,QAAQ,UAAU;AAUhE,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAKoB;EAAA,IAJ1CC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;EAEZ;EACA,IAAMC,WAAW,GAAGX,QAAQ,CAACY,KAAK,CAACH,QAAQ,CAAC,GAAGF,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,IAAI;EACvE,IAAMM,SAAS,GAAGF,WAAW,GACzBX,QAAQ,CAACc,OAAO,CAACL,QAAQ,CAAC,GAC1BT,QAAQ,CAACc,OAAO,CAACL,QAAQ,CAAC,CAACM,KAAK,CAAC,CAAC,EAAER,KAAK,CAAC;EAE9C,IAAMS,aAAa,GAAGd,OAAO,CAAC,YAAM;IAClC,IAAIM,IAAI,IAAI,EAAE,EAAE,OAAO,WAAW;IAClC,OAAO,WAAW;EACpB,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,oBACE,oBAAC,kBAAkB,QAChBK,SAAS,CAACI,GAAG,CAAC,UAACC,KAAK,EAAK;IACxB,IAAMC,IAAI,GAAGD,KAAkC;IAE/C,oBAAOjB,YAAY,CAACkB,IAAI,eACnBA,IAAI,CAACC,KAAK;MACbZ,IAAI,EAAEA,IAAI;MACVa,KAAK,EAAE;QACLC,iBAAiB,EAAE,MAAM;QACzBC,OAAO,EAAE;MACX;IAAC,GACD;EACJ,CAAC,CAAC,EAEDhB,KAAK,IAAIP,QAAQ,CAACY,KAAK,CAACH,QAAQ,CAAC,IAAIE,WAAW,GAAG,IAAI,gBACtD;IACE,IAAI,EAAEH,IAAK;IACX,IAAI,EAAC,QAAQ;IACb,cAAW;EAAmB,GAE1BE,YAAY,gBAEhB,oBAAC,UAAU;IAAC,OAAO,EAAEM,aAAc;IAAC,MAAM,EAAC;EAAQ,QAC/ChB,QAAQ,CAACY,KAAK,CAACH,QAAQ,CAAC,GAAGF,KAAK,CACvB,CAEhB,CACkB;AAEzB,CAAC;AAAC;EAAA;EAAA;AAAA,GAVa;EAAEe,iBAAiB,EAAE;AAAO,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -9683,7 +9683,7 @@
|
|
|
9683
9683
|
return props.size + "px";
|
|
9684
9684
|
});
|
|
9685
9685
|
|
|
9686
|
-
var _excluded$L = ["url", "alt", "size", "className", "children"];
|
|
9686
|
+
var _excluded$L = ["url", "alt", "size", "className", "imgClassName", "children"];
|
|
9687
9687
|
/**
|
|
9688
9688
|
* @component Avatar
|
|
9689
9689
|
* @description
|
|
@@ -9692,6 +9692,7 @@
|
|
|
9692
9692
|
* @prop {url} - The image url of the Avatar.
|
|
9693
9693
|
* @prop {size} - controls the size of an Avatar (width and height) in pixels.
|
|
9694
9694
|
* @prop {alt} - alt attribute of the img.
|
|
9695
|
+
* @prop {imgClassName} - class name that attaches to img element nested in Wrapper
|
|
9695
9696
|
*
|
|
9696
9697
|
* @example
|
|
9697
9698
|
* <Avatar url="https://faces-img.xcdn.link/image-lorem-face-954.jpg" alt="Profile picture of John" />
|
|
@@ -9715,6 +9716,7 @@
|
|
|
9715
9716
|
_ref$size = _ref.size,
|
|
9716
9717
|
size = _ref$size === void 0 ? 24 : _ref$size,
|
|
9717
9718
|
className = _ref.className,
|
|
9719
|
+
imgClassName = _ref.imgClassName,
|
|
9718
9720
|
children = _ref.children,
|
|
9719
9721
|
rest = _objectWithoutProperties(_ref, _excluded$L);
|
|
9720
9722
|
return /*#__PURE__*/React__default["default"].createElement(StyledWrapper, {
|
|
@@ -9724,7 +9726,8 @@
|
|
|
9724
9726
|
ref: ref,
|
|
9725
9727
|
src: url,
|
|
9726
9728
|
alt: alt,
|
|
9727
|
-
role: "img"
|
|
9729
|
+
role: "img",
|
|
9730
|
+
className: imgClassName
|
|
9728
9731
|
}, rest)));
|
|
9729
9732
|
});
|
|
9730
9733
|
Avatar.displayName = "Avatar";
|
|
@@ -16010,7 +16013,9 @@
|
|
|
16010
16013
|
size = _ref$size === void 0 ? 34 : _ref$size,
|
|
16011
16014
|
children = _ref.children,
|
|
16012
16015
|
counterProps = _ref.counterProps;
|
|
16013
|
-
|
|
16016
|
+
// always display counter with min +2 as +1 can require 1 more Avatar
|
|
16017
|
+
var minChildren = React.Children.count(children) - limit > 1 ? false : true;
|
|
16018
|
+
var _children = minChildren ? React.Children.toArray(children) : React.Children.toArray(children).slice(0, limit);
|
|
16014
16019
|
var handleVariant = React.useMemo(function () {
|
|
16015
16020
|
if (size >= 34) return "Caption 1";
|
|
16016
16021
|
return "Caption 2";
|
|
@@ -16024,7 +16029,7 @@
|
|
|
16024
16029
|
outline: "1px solid var(--page-paper-main)"
|
|
16025
16030
|
}
|
|
16026
16031
|
}));
|
|
16027
|
-
}), limit >= React.Children.count(children) ? null : /*#__PURE__*/React__default["default"].createElement(_StyledLengthCountStyles, _extends({
|
|
16032
|
+
}), limit >= React.Children.count(children) || minChildren ? null : /*#__PURE__*/React__default["default"].createElement(_StyledLengthCountStyles, _extends({
|
|
16028
16033
|
size: size,
|
|
16029
16034
|
role: "status",
|
|
16030
16035
|
"aria-label": "Rest of the users"
|