@hitachivantara/uikit-react-core 5.63.1 → 5.63.2
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/Avatar/Avatar.cjs +4 -1
- package/dist/cjs/AvatarGroup/AvatarGroup.cjs +95 -51
- package/dist/cjs/AvatarGroup/AvatarGroup.styles.cjs +54 -4
- package/dist/cjs/AvatarGroup/AvatarGroupContext.cjs +19 -0
- package/dist/cjs/providers/ThemeProvider.cjs +7 -0
- package/dist/esm/Avatar/Avatar.js +4 -1
- package/dist/esm/Avatar/Avatar.js.map +1 -1
- package/dist/esm/AvatarGroup/AvatarGroup.js +97 -53
- package/dist/esm/AvatarGroup/AvatarGroup.js.map +1 -1
- package/dist/esm/AvatarGroup/AvatarGroup.styles.js +54 -4
- package/dist/esm/AvatarGroup/AvatarGroup.styles.js.map +1 -1
- package/dist/esm/AvatarGroup/AvatarGroupContext.js +19 -0
- package/dist/esm/AvatarGroup/AvatarGroupContext.js.map +1 -0
- package/dist/esm/providers/ThemeProvider.js +7 -0
- package/dist/esm/providers/ThemeProvider.js.map +1 -1
- package/dist/types/index.d.ts +7 -2
- package/package.json +2 -2
|
@@ -5,6 +5,7 @@ const React = require("react");
|
|
|
5
5
|
const MuiAvatar = require("@mui/material/Avatar");
|
|
6
6
|
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
7
7
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
8
|
+
const AvatarGroupContext = require("../AvatarGroup/AvatarGroupContext.cjs");
|
|
8
9
|
const useDefaultProps = require("../hooks/useDefaultProps.cjs");
|
|
9
10
|
const useImageLoaded = require("../hooks/useImageLoaded.cjs");
|
|
10
11
|
const sizes = require("../utils/sizes.cjs");
|
|
@@ -18,7 +19,7 @@ const HvAvatar = React.forwardRef((props, ref) => {
|
|
|
18
19
|
classes: classesProp,
|
|
19
20
|
children: childrenProp,
|
|
20
21
|
component = "div",
|
|
21
|
-
size
|
|
22
|
+
size: sizeProp,
|
|
22
23
|
backgroundColor = "secondary",
|
|
23
24
|
color = "atmo1",
|
|
24
25
|
src,
|
|
@@ -33,6 +34,8 @@ const HvAvatar = React.forwardRef((props, ref) => {
|
|
|
33
34
|
...others
|
|
34
35
|
} = useDefaultProps.useDefaultProps("HvAvatar", props);
|
|
35
36
|
const { classes, cx } = Avatar_styles.useClasses(classesProp);
|
|
37
|
+
const avatarGroupContext = AvatarGroupContext.useAvatarGroupContext();
|
|
38
|
+
const size = sizeProp || avatarGroupContext?.size || "sm";
|
|
36
39
|
let children;
|
|
37
40
|
const imageLoaded = useImageLoaded.useImageLoaded(src, srcSet);
|
|
38
41
|
const hasImg = src || srcSet;
|
|
@@ -7,6 +7,7 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
|
7
7
|
const Avatar = require("../Avatar/Avatar.cjs");
|
|
8
8
|
const useDefaultProps = require("../hooks/useDefaultProps.cjs");
|
|
9
9
|
const AvatarGroup_styles = require("./AvatarGroup.styles.cjs");
|
|
10
|
+
const AvatarGroupContext = require("./AvatarGroupContext.cjs");
|
|
10
11
|
const getSpacingValue = (spacing, size) => {
|
|
11
12
|
switch (size) {
|
|
12
13
|
case "xs":
|
|
@@ -23,83 +24,126 @@ const getSpacingValue = (spacing, size) => {
|
|
|
23
24
|
return spacing === "compact" ? 30 : 18;
|
|
24
25
|
}
|
|
25
26
|
};
|
|
27
|
+
const getFontSize = (size) => {
|
|
28
|
+
switch (size) {
|
|
29
|
+
case "xs":
|
|
30
|
+
return "1em";
|
|
31
|
+
case "sm":
|
|
32
|
+
return "1.25em";
|
|
33
|
+
case "md":
|
|
34
|
+
return "1.5em";
|
|
35
|
+
case "lg":
|
|
36
|
+
return "1.75em";
|
|
37
|
+
case "xl":
|
|
38
|
+
return "3em";
|
|
39
|
+
default:
|
|
40
|
+
return "1em";
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
const Overflow = ({
|
|
44
|
+
direction,
|
|
45
|
+
childrenToShow,
|
|
46
|
+
spacingValue,
|
|
47
|
+
overflowComponent,
|
|
48
|
+
totalChildren,
|
|
49
|
+
maxVisible,
|
|
50
|
+
size
|
|
51
|
+
}) => {
|
|
52
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
53
|
+
"div",
|
|
54
|
+
{
|
|
55
|
+
style: {
|
|
56
|
+
marginLeft: direction === "row" && childrenToShow.length > 0 ? -spacingValue : 0,
|
|
57
|
+
marginTop: direction === "column" && childrenToShow.length > 0 ? -spacingValue : 0,
|
|
58
|
+
zIndex: 0
|
|
59
|
+
},
|
|
60
|
+
children: overflowComponent ? overflowComponent(totalChildren - maxVisible) : /* @__PURE__ */ jsxRuntime.jsxs(
|
|
61
|
+
Avatar.HvAvatar,
|
|
62
|
+
{
|
|
63
|
+
size,
|
|
64
|
+
backgroundColor: uikitStyles.theme.colors.atmo4,
|
|
65
|
+
classes: {
|
|
66
|
+
avatar: css.css({
|
|
67
|
+
[`&.HvAvatar-${size}`]: {
|
|
68
|
+
fontSize: getFontSize(size)
|
|
69
|
+
}
|
|
70
|
+
})
|
|
71
|
+
},
|
|
72
|
+
children: [
|
|
73
|
+
"+",
|
|
74
|
+
totalChildren - maxVisible
|
|
75
|
+
]
|
|
76
|
+
}
|
|
77
|
+
)
|
|
78
|
+
}
|
|
79
|
+
);
|
|
80
|
+
};
|
|
26
81
|
const HvAvatarGroup = React.forwardRef(
|
|
27
82
|
(props, ref) => {
|
|
28
83
|
const {
|
|
29
84
|
className,
|
|
85
|
+
style,
|
|
30
86
|
classes: classesProp,
|
|
31
87
|
children,
|
|
32
88
|
size = "sm",
|
|
33
89
|
spacing = "loose",
|
|
34
90
|
direction = "row",
|
|
35
|
-
toBack = true,
|
|
36
91
|
maxVisible = 3,
|
|
37
92
|
overflowComponent,
|
|
38
93
|
highlight = false,
|
|
94
|
+
toBack = false,
|
|
39
95
|
...others
|
|
40
96
|
} = useDefaultProps.useDefaultProps("HvAvatarGroup", props);
|
|
41
97
|
const { classes, cx } = AvatarGroup_styles.useClasses(classesProp);
|
|
42
98
|
const spacingValue = getSpacingValue(spacing, size);
|
|
43
99
|
const totalChildren = React.Children.count(children);
|
|
44
|
-
const zIndexMultiplier = toBack ? -1 : 1;
|
|
45
100
|
const willOverflow = totalChildren > maxVisible;
|
|
46
|
-
|
|
101
|
+
const childrenToShow = React.Children.toArray(children).slice(0, maxVisible);
|
|
102
|
+
if (toBack)
|
|
103
|
+
childrenToShow.reverse();
|
|
104
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
47
105
|
"div",
|
|
48
106
|
{
|
|
49
|
-
className: cx(
|
|
107
|
+
className: cx(
|
|
108
|
+
classes.root,
|
|
109
|
+
classes[direction],
|
|
110
|
+
{ [classes.highlight]: highlight },
|
|
111
|
+
{ [classes.toBack]: toBack },
|
|
112
|
+
className
|
|
113
|
+
),
|
|
114
|
+
style: {
|
|
115
|
+
["--spacing"]: `-${spacingValue}px`,
|
|
116
|
+
...style
|
|
117
|
+
},
|
|
50
118
|
ref,
|
|
51
119
|
...others,
|
|
52
|
-
children: [
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
...highlight && {
|
|
64
|
-
"&:hover": {
|
|
65
|
-
zIndex: 100 + totalChildren + 1
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
})
|
|
69
|
-
},
|
|
70
|
-
size
|
|
71
|
-
});
|
|
120
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(AvatarGroupContext.HvAvatarGroupProvider, { size, children: [
|
|
121
|
+
toBack && willOverflow && /* @__PURE__ */ jsxRuntime.jsx(
|
|
122
|
+
Overflow,
|
|
123
|
+
{
|
|
124
|
+
childrenToShow,
|
|
125
|
+
direction,
|
|
126
|
+
maxVisible,
|
|
127
|
+
overflowComponent,
|
|
128
|
+
size,
|
|
129
|
+
spacingValue,
|
|
130
|
+
totalChildren
|
|
72
131
|
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
132
|
+
),
|
|
133
|
+
childrenToShow,
|
|
134
|
+
!toBack && willOverflow && /* @__PURE__ */ jsxRuntime.jsx(
|
|
135
|
+
Overflow,
|
|
76
136
|
{
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
{
|
|
85
|
-
size,
|
|
86
|
-
backgroundColor: uikitStyles.theme.colors.atmo4,
|
|
87
|
-
classes: {
|
|
88
|
-
avatar: css.css({
|
|
89
|
-
[`&.HvAvatar-${size}`]: {
|
|
90
|
-
fontSize: "unset"
|
|
91
|
-
}
|
|
92
|
-
})
|
|
93
|
-
},
|
|
94
|
-
children: [
|
|
95
|
-
"+",
|
|
96
|
-
totalChildren - maxVisible
|
|
97
|
-
]
|
|
98
|
-
}
|
|
99
|
-
)
|
|
137
|
+
childrenToShow,
|
|
138
|
+
direction,
|
|
139
|
+
maxVisible,
|
|
140
|
+
overflowComponent,
|
|
141
|
+
size,
|
|
142
|
+
spacingValue,
|
|
143
|
+
totalChildren
|
|
100
144
|
}
|
|
101
145
|
)
|
|
102
|
-
]
|
|
146
|
+
] })
|
|
103
147
|
}
|
|
104
148
|
);
|
|
105
149
|
}
|
|
@@ -10,14 +10,64 @@ const { staticClasses, useClasses } = classes.createClasses("HvAvatarGroup", {
|
|
|
10
10
|
[`& .${Avatar_styles.staticClasses.root}`]: {
|
|
11
11
|
border: `2px solid ${uikitStyles.theme.colors.atmo2}`,
|
|
12
12
|
boxSizing: "content-box"
|
|
13
|
+
},
|
|
14
|
+
"&$row": {
|
|
15
|
+
flexDirection: "row",
|
|
16
|
+
justifyContent: "flex-start",
|
|
17
|
+
[`& .${Avatar_styles.staticClasses.container}`]: {
|
|
18
|
+
"&:not(:first-of-type)": {
|
|
19
|
+
marginLeft: "var(--spacing)"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
"&$toBack": {
|
|
23
|
+
flexDirection: "row-reverse",
|
|
24
|
+
justifyContent: "flex-end",
|
|
25
|
+
[`& .${Avatar_styles.staticClasses.container}`]: {
|
|
26
|
+
"&:last-of-type": {
|
|
27
|
+
marginLeft: 0
|
|
28
|
+
},
|
|
29
|
+
"&:not(:last-of-type)": {
|
|
30
|
+
marginLeft: "var(--spacing)"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
"&$column": {
|
|
36
|
+
flexDirection: "column",
|
|
37
|
+
[`& .${Avatar_styles.staticClasses.container}`]: {
|
|
38
|
+
"&:not(:first-of-type)": {
|
|
39
|
+
marginTop: "var(--spacing)"
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
"&$toBack": {
|
|
43
|
+
flexDirection: "column-reverse",
|
|
44
|
+
[`& .${Avatar_styles.staticClasses.container}`]: {
|
|
45
|
+
"&:last-of-type": {
|
|
46
|
+
marginTop: 0
|
|
47
|
+
},
|
|
48
|
+
"&:not(:last-of-type)": {
|
|
49
|
+
marginTop: "var(--spacing)"
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
[`&$highlight`]: {
|
|
55
|
+
[`& .${Avatar_styles.staticClasses.status}:hover`]: {
|
|
56
|
+
zIndex: uikitStyles.theme.zIndices.popover
|
|
57
|
+
}
|
|
13
58
|
}
|
|
14
59
|
},
|
|
15
60
|
row: {
|
|
16
|
-
flexDirection: "row"
|
|
61
|
+
flexDirection: "row",
|
|
62
|
+
justifyContent: "flex-start",
|
|
63
|
+
"&$toBack": {
|
|
64
|
+
flexDirection: "row-reverse",
|
|
65
|
+
justifyContent: "flex-end"
|
|
66
|
+
}
|
|
17
67
|
},
|
|
18
|
-
column: {
|
|
19
|
-
|
|
20
|
-
}
|
|
68
|
+
column: {},
|
|
69
|
+
highlight: {},
|
|
70
|
+
toBack: {}
|
|
21
71
|
});
|
|
22
72
|
exports.staticClasses = staticClasses;
|
|
23
73
|
exports.useClasses = useClasses;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
4
|
+
const React = require("react");
|
|
5
|
+
const HvAvatarGroupContext = React.createContext(null);
|
|
6
|
+
const HvAvatarGroupProvider = ({
|
|
7
|
+
size,
|
|
8
|
+
children
|
|
9
|
+
}) => {
|
|
10
|
+
const value = React.useMemo(() => ({ size }), [size]);
|
|
11
|
+
return /* @__PURE__ */ jsxRuntime.jsx(HvAvatarGroupContext.Provider, { value, children });
|
|
12
|
+
};
|
|
13
|
+
const useAvatarGroupContext = () => {
|
|
14
|
+
const context = React.useContext(HvAvatarGroupContext);
|
|
15
|
+
return context;
|
|
16
|
+
};
|
|
17
|
+
exports.HvAvatarGroupContext = HvAvatarGroupContext;
|
|
18
|
+
exports.HvAvatarGroupProvider = HvAvatarGroupProvider;
|
|
19
|
+
exports.useAvatarGroupContext = useAvatarGroupContext;
|
|
@@ -3,6 +3,7 @@ import { forwardRef } from "react";
|
|
|
3
3
|
import MuiAvatar from "@mui/material/Avatar";
|
|
4
4
|
import { User } from "@hitachivantara/uikit-react-icons";
|
|
5
5
|
import { getColor, theme } from "@hitachivantara/uikit-styles";
|
|
6
|
+
import { useAvatarGroupContext } from "../AvatarGroup/AvatarGroupContext.js";
|
|
6
7
|
import { useDefaultProps } from "../hooks/useDefaultProps.js";
|
|
7
8
|
import { useImageLoaded } from "../hooks/useImageLoaded.js";
|
|
8
9
|
import { decreaseSize } from "../utils/sizes.js";
|
|
@@ -15,7 +16,7 @@ const HvAvatar = forwardRef((props, ref) => {
|
|
|
15
16
|
classes: classesProp,
|
|
16
17
|
children: childrenProp,
|
|
17
18
|
component = "div",
|
|
18
|
-
size
|
|
19
|
+
size: sizeProp,
|
|
19
20
|
backgroundColor = "secondary",
|
|
20
21
|
color = "atmo1",
|
|
21
22
|
src,
|
|
@@ -30,6 +31,8 @@ const HvAvatar = forwardRef((props, ref) => {
|
|
|
30
31
|
...others
|
|
31
32
|
} = useDefaultProps("HvAvatar", props);
|
|
32
33
|
const { classes, cx } = useClasses(classesProp);
|
|
34
|
+
const avatarGroupContext = useAvatarGroupContext();
|
|
35
|
+
const size = sizeProp || avatarGroupContext?.size || "sm";
|
|
33
36
|
let children;
|
|
34
37
|
const imageLoaded = useImageLoaded(src, srcSet);
|
|
35
38
|
const hasImg = src || srcSet;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../../../src/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\nimport { User } from \"@hitachivantara/uikit-react-icons\";\nimport {
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../../../src/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\nimport { User } from \"@hitachivantara/uikit-react-icons\";\nimport {\n getColor,\n HvColorAny,\n HvSize,\n theme,\n} from \"@hitachivantara/uikit-styles\";\n\nimport { useAvatarGroupContext } from \"../AvatarGroup/AvatarGroupContext\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useImageLoaded } from \"../hooks/useImageLoaded\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { decreaseSize } from \"../utils/sizes\";\nimport { staticClasses, useClasses } from \"./Avatar.styles\";\n\nexport { staticClasses as avatarClasses };\n\nexport type HvAvatarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvAvatarVariant = \"circular\" | \"square\";\n\n/** @deprecated use `HvSize` instead */\nexport type HvAvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface HvAvatarProps extends HvBaseProps {\n /** The component used for the root node. Either a string to use a DOM element or a component. */\n component?: React.ElementType;\n /** Sets one of the standard sizes of the icons */\n size?: HvSize;\n /** A color representing the foreground color of the avatar's letters or the generic User icon fallback. */\n color?: HvColorAny;\n /** A String representing the background color of the avatar. */\n backgroundColor?: HvColorAny;\n /** The `src` attribute for the `img` element. */\n src?: string;\n /** The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. */\n srcSet?: string;\n /** The `sizes` attribute for the `img` element. */\n sizes?: string;\n /** Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. */\n alt?: string;\n /**\n * Attributes applied to the `img` element if the component is used to display an image.\n * It can be used to listen for the loading error event.\n */\n imgProps?: React.HTMLAttributes<HTMLImageElement>;\n /** A string representing the type of avatar to display, circular or square. */\n variant?: HvAvatarVariant;\n /** A string representing the color of the avatar border that represents its status. */\n status?: string;\n /** A string representing the color of the avatar badge. */\n badge?: string;\n /** Attributes applied to the avatar element. */\n avatarProps?: MuiAvatarProps;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvAvatarClasses;\n}\n\n/**\n * Avatars can be used to represent a user or a brand.\n * They can show an image, an icon or the initial letters of a name, for example.\n */\nexport const HvAvatar = forwardRef<any, HvAvatarProps>((props, ref) => {\n const {\n className,\n style,\n classes: classesProp,\n children: childrenProp,\n component = \"div\",\n size: sizeProp,\n backgroundColor = \"secondary\",\n color = \"atmo1\",\n src,\n srcSet,\n sizes,\n alt,\n imgProps,\n status,\n badge,\n variant = \"circular\",\n avatarProps,\n ...others\n } = useDefaultProps(\"HvAvatar\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const avatarGroupContext = useAvatarGroupContext();\n\n const size = sizeProp || avatarGroupContext?.size || \"sm\";\n\n let children: React.ReactNode;\n\n // Use a hook instead of onError on the img element to support server-side rendering.\n const imageLoaded = useImageLoaded(src, srcSet);\n const hasImg = src || srcSet;\n const hasImgNotFailing = hasImg && imageLoaded !== \"error\";\n\n if (hasImgNotFailing) {\n children = (\n <img\n alt={alt}\n src={src}\n srcSet={srcSet}\n sizes={sizes}\n className={classes.img}\n {...imgProps}\n />\n );\n } else if (childrenProp != null) {\n children = childrenProp;\n } else if (hasImg && alt) {\n [children] = alt;\n } else {\n children = (\n <User\n color={color}\n iconSize={decreaseSize(size)}\n className={classes.fallback}\n />\n );\n }\n\n const inlineStyle: React.CSSProperties = {\n ...style,\n };\n\n if (component != null && typeof component !== \"string\") {\n // override border-radius with custom components\n inlineStyle.borderRadius = \"50%\";\n }\n\n if (!hasImgNotFailing) {\n inlineStyle.backgroundColor = getColor(\n backgroundColor,\n theme.colors.secondary,\n );\n inlineStyle.color = getColor(color, theme.colors.atmo1);\n }\n\n const statusInlineStyle: React.CSSProperties = {};\n if (status) {\n // set the status border. we're using the boxShadow property to set the border\n // to be inside the container and not on its edge.\n const statusColor = getColor(status, theme.colors.positive);\n statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;\n }\n\n const badgeColor = getColor(badge || \"\", theme.colors.positive);\n\n return (\n <div ref={ref} className={classes.container} {...others}>\n <div\n className={cx(classes.status, classes[variant], classes[size])}\n style={statusInlineStyle}\n >\n {badge && (\n <div\n className={classes.badge}\n style={{ backgroundColor: badgeColor }}\n />\n )}\n <MuiAvatar\n component={component}\n // Consider not using the root and className classes in this component\n className={cx(classes.root, classes.avatar, classes[size], className)}\n style={inlineStyle}\n variant={variant}\n size={size}\n {...avatarProps}\n >\n {children}\n </MuiAvatar>\n </div>\n </div>\n );\n});\n"],"names":[],"mappings":";;;;;;;;;;;AAiEO,MAAM,WAAW,WAA+B,CAAC,OAAO,QAAQ;AAC/D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,kBAAkB;AAAA,IAClB,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,qBAAqB;AAErB,QAAA,OAAO,YAAY,oBAAoB,QAAQ;AAEjD,MAAA;AAGE,QAAA,cAAc,eAAe,KAAK,MAAM;AAC9C,QAAM,SAAS,OAAO;AAChB,QAAA,mBAAmB,UAAU,gBAAgB;AAEnD,MAAI,kBAAkB;AAElB,eAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,QAAQ;AAAA,QAClB,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,WAEO,gBAAgB,MAAM;AACpB,eAAA;AAAA,EAAA,WACF,UAAU,KAAK;AACxB,KAAC,QAAQ,IAAI;AAAA,EAAA,OACR;AAEH,eAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,UAAU,aAAa,IAAI;AAAA,QAC3B,WAAW,QAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGzB;AAEA,QAAM,cAAmC;AAAA,IACvC,GAAG;AAAA,EAAA;AAGL,MAAI,aAAa,QAAQ,OAAO,cAAc,UAAU;AAEtD,gBAAY,eAAe;AAAA,EAC7B;AAEA,MAAI,CAAC,kBAAkB;AACrB,gBAAY,kBAAkB;AAAA,MAC5B;AAAA,MACA,MAAM,OAAO;AAAA,IAAA;AAEf,gBAAY,QAAQ,SAAS,OAAO,MAAM,OAAO,KAAK;AAAA,EACxD;AAEA,QAAM,oBAAyC,CAAA;AAC/C,MAAI,QAAQ;AAGV,UAAM,cAAc,SAAS,QAAQ,MAAM,OAAO,QAAQ;AACxC,sBAAA,YAAY,yBAAyB,WAAW;AAAA,EACpE;AAEA,QAAM,aAAa,SAAS,SAAS,IAAI,MAAM,OAAO,QAAQ;AAE9D,6BACG,OAAI,EAAA,KAAU,WAAW,QAAQ,WAAY,GAAG,QAC/C,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,QAAQ,QAAQ,OAAO,GAAG,QAAQ,IAAI,CAAC;AAAA,MAC7D,OAAO;AAAA,MAEN,UAAA;AAAA,QACC,SAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,OAAO,EAAE,iBAAiB,WAAW;AAAA,UAAA;AAAA,QACvC;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YAEA,WAAW,GAAG,QAAQ,MAAM,QAAQ,QAAQ,QAAQ,IAAI,GAAG,SAAS;AAAA,YACpE,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YAEH;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { forwardRef, Children
|
|
1
|
+
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { forwardRef, Children } from "react";
|
|
3
3
|
import { css } from "@emotion/css";
|
|
4
4
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
5
5
|
import { HvAvatar } from "../Avatar/Avatar.js";
|
|
6
6
|
import { useDefaultProps } from "../hooks/useDefaultProps.js";
|
|
7
7
|
import { useClasses } from "./AvatarGroup.styles.js";
|
|
8
8
|
import { staticClasses } from "./AvatarGroup.styles.js";
|
|
9
|
+
import { HvAvatarGroupProvider } from "./AvatarGroupContext.js";
|
|
9
10
|
const getSpacingValue = (spacing, size) => {
|
|
10
11
|
switch (size) {
|
|
11
12
|
case "xs":
|
|
@@ -22,83 +23,126 @@ const getSpacingValue = (spacing, size) => {
|
|
|
22
23
|
return spacing === "compact" ? 30 : 18;
|
|
23
24
|
}
|
|
24
25
|
};
|
|
26
|
+
const getFontSize = (size) => {
|
|
27
|
+
switch (size) {
|
|
28
|
+
case "xs":
|
|
29
|
+
return "1em";
|
|
30
|
+
case "sm":
|
|
31
|
+
return "1.25em";
|
|
32
|
+
case "md":
|
|
33
|
+
return "1.5em";
|
|
34
|
+
case "lg":
|
|
35
|
+
return "1.75em";
|
|
36
|
+
case "xl":
|
|
37
|
+
return "3em";
|
|
38
|
+
default:
|
|
39
|
+
return "1em";
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
const Overflow = ({
|
|
43
|
+
direction,
|
|
44
|
+
childrenToShow,
|
|
45
|
+
spacingValue,
|
|
46
|
+
overflowComponent,
|
|
47
|
+
totalChildren,
|
|
48
|
+
maxVisible,
|
|
49
|
+
size
|
|
50
|
+
}) => {
|
|
51
|
+
return /* @__PURE__ */ jsx(
|
|
52
|
+
"div",
|
|
53
|
+
{
|
|
54
|
+
style: {
|
|
55
|
+
marginLeft: direction === "row" && childrenToShow.length > 0 ? -spacingValue : 0,
|
|
56
|
+
marginTop: direction === "column" && childrenToShow.length > 0 ? -spacingValue : 0,
|
|
57
|
+
zIndex: 0
|
|
58
|
+
},
|
|
59
|
+
children: overflowComponent ? overflowComponent(totalChildren - maxVisible) : /* @__PURE__ */ jsxs(
|
|
60
|
+
HvAvatar,
|
|
61
|
+
{
|
|
62
|
+
size,
|
|
63
|
+
backgroundColor: theme.colors.atmo4,
|
|
64
|
+
classes: {
|
|
65
|
+
avatar: css({
|
|
66
|
+
[`&.HvAvatar-${size}`]: {
|
|
67
|
+
fontSize: getFontSize(size)
|
|
68
|
+
}
|
|
69
|
+
})
|
|
70
|
+
},
|
|
71
|
+
children: [
|
|
72
|
+
"+",
|
|
73
|
+
totalChildren - maxVisible
|
|
74
|
+
]
|
|
75
|
+
}
|
|
76
|
+
)
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
};
|
|
25
80
|
const HvAvatarGroup = forwardRef(
|
|
26
81
|
(props, ref) => {
|
|
27
82
|
const {
|
|
28
83
|
className,
|
|
84
|
+
style,
|
|
29
85
|
classes: classesProp,
|
|
30
86
|
children,
|
|
31
87
|
size = "sm",
|
|
32
88
|
spacing = "loose",
|
|
33
89
|
direction = "row",
|
|
34
|
-
toBack = true,
|
|
35
90
|
maxVisible = 3,
|
|
36
91
|
overflowComponent,
|
|
37
92
|
highlight = false,
|
|
93
|
+
toBack = false,
|
|
38
94
|
...others
|
|
39
95
|
} = useDefaultProps("HvAvatarGroup", props);
|
|
40
96
|
const { classes, cx } = useClasses(classesProp);
|
|
41
97
|
const spacingValue = getSpacingValue(spacing, size);
|
|
42
98
|
const totalChildren = Children.count(children);
|
|
43
|
-
const zIndexMultiplier = toBack ? -1 : 1;
|
|
44
99
|
const willOverflow = totalChildren > maxVisible;
|
|
45
|
-
|
|
100
|
+
const childrenToShow = Children.toArray(children).slice(0, maxVisible);
|
|
101
|
+
if (toBack)
|
|
102
|
+
childrenToShow.reverse();
|
|
103
|
+
return /* @__PURE__ */ jsx(
|
|
46
104
|
"div",
|
|
47
105
|
{
|
|
48
|
-
className: cx(
|
|
106
|
+
className: cx(
|
|
107
|
+
classes.root,
|
|
108
|
+
classes[direction],
|
|
109
|
+
{ [classes.highlight]: highlight },
|
|
110
|
+
{ [classes.toBack]: toBack },
|
|
111
|
+
className
|
|
112
|
+
),
|
|
113
|
+
style: {
|
|
114
|
+
["--spacing"]: `-${spacingValue}px`,
|
|
115
|
+
...style
|
|
116
|
+
},
|
|
49
117
|
ref,
|
|
50
118
|
...others,
|
|
51
|
-
children: [
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
...highlight && {
|
|
63
|
-
"&:hover": {
|
|
64
|
-
zIndex: 100 + totalChildren + 1
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
})
|
|
68
|
-
},
|
|
69
|
-
size
|
|
70
|
-
});
|
|
119
|
+
children: /* @__PURE__ */ jsxs(HvAvatarGroupProvider, { size, children: [
|
|
120
|
+
toBack && willOverflow && /* @__PURE__ */ jsx(
|
|
121
|
+
Overflow,
|
|
122
|
+
{
|
|
123
|
+
childrenToShow,
|
|
124
|
+
direction,
|
|
125
|
+
maxVisible,
|
|
126
|
+
overflowComponent,
|
|
127
|
+
size,
|
|
128
|
+
spacingValue,
|
|
129
|
+
totalChildren
|
|
71
130
|
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
131
|
+
),
|
|
132
|
+
childrenToShow,
|
|
133
|
+
!toBack && willOverflow && /* @__PURE__ */ jsx(
|
|
134
|
+
Overflow,
|
|
75
135
|
{
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
{
|
|
84
|
-
size,
|
|
85
|
-
backgroundColor: theme.colors.atmo4,
|
|
86
|
-
classes: {
|
|
87
|
-
avatar: css({
|
|
88
|
-
[`&.HvAvatar-${size}`]: {
|
|
89
|
-
fontSize: "unset"
|
|
90
|
-
}
|
|
91
|
-
})
|
|
92
|
-
},
|
|
93
|
-
children: [
|
|
94
|
-
"+",
|
|
95
|
-
totalChildren - maxVisible
|
|
96
|
-
]
|
|
97
|
-
}
|
|
98
|
-
)
|
|
136
|
+
childrenToShow,
|
|
137
|
+
direction,
|
|
138
|
+
maxVisible,
|
|
139
|
+
overflowComponent,
|
|
140
|
+
size,
|
|
141
|
+
spacingValue,
|
|
142
|
+
totalChildren
|
|
99
143
|
}
|
|
100
144
|
)
|
|
101
|
-
]
|
|
145
|
+
] })
|
|
102
146
|
}
|
|
103
147
|
);
|
|
104
148
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.js","sources":["../../../src/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import { Children,
|
|
1
|
+
{"version":3,"file":"AvatarGroup.js","sources":["../../../src/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import { Children, forwardRef } from \"react\";\nimport { css } from \"@emotion/css\";\nimport { HvSize, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../Avatar/Avatar\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { staticClasses, useClasses } from \"./AvatarGroup.styles\";\nimport { HvAvatarGroupProvider } from \"./AvatarGroupContext\";\n\nexport { staticClasses as avatarGroupClasses };\n\nexport type HvAvatarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAvatarGroupProps extends HvBaseProps {\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvAvatarGroupClasses;\n /** The avatar size. */\n size?: HvSize;\n /** The spacing between avatars. */\n spacing?: \"compact\" | \"loose\";\n /** The direction of the group. */\n direction?: \"row\" | \"column\";\n /** Whether the avatars display behind the previous avatar or on top. */\n toBack?: boolean;\n /**\n * The maximum number of visible avatars. If there are more avatars then the value of this property, an added avatar will\n * be added to the end of the list, indicating the number of hidden avatars.\n */\n maxVisible?: number;\n /**\n * What to show as an overflow representation.\n * If `undefined` a default `HvAvatar` will be displayed along with a HvTooltip with the count of overflowing items.\n * */\n overflowComponent?: (overflowCount: number) => React.ReactNode;\n /**\n * If `true` the avatars will be brought to the front when hovered.\n */\n highlight?: boolean;\n}\n\nconst getSpacingValue = (\n spacing: HvAvatarGroupProps[\"spacing\"],\n size: HvAvatarGroupProps[\"size\"],\n) => {\n switch (size) {\n case \"xs\":\n return spacing === \"compact\" ? 24 : 16;\n case \"sm\":\n return spacing === \"compact\" ? 30 : 18;\n case \"md\":\n return spacing === \"compact\" ? 36 : 20;\n case \"lg\":\n return spacing === \"compact\" ? 44 : 24;\n case \"xl\":\n return spacing === \"compact\" ? 72 : 34;\n default:\n return spacing === \"compact\" ? 30 : 18;\n }\n};\n\nconst getFontSize = (size: HvAvatarGroupProps[\"size\"]) => {\n switch (size) {\n case \"xs\":\n return \"1em\";\n case \"sm\":\n return \"1.25em\";\n case \"md\":\n return \"1.5em\";\n case \"lg\":\n return \"1.75em\";\n case \"xl\":\n return \"3em\";\n default:\n return \"1em\";\n }\n};\n\nconst Overflow = ({\n direction,\n childrenToShow,\n spacingValue,\n overflowComponent,\n totalChildren,\n maxVisible,\n size,\n}) => {\n return (\n <div\n style={{\n marginLeft:\n direction === \"row\" && childrenToShow.length > 0 ? -spacingValue : 0,\n marginTop:\n direction === \"column\" && childrenToShow.length > 0\n ? -spacingValue\n : 0,\n zIndex: 0,\n }}\n >\n {overflowComponent ? (\n overflowComponent(totalChildren - maxVisible)\n ) : (\n <HvAvatar\n size={size}\n backgroundColor={theme.colors.atmo4}\n classes={{\n avatar: css({\n [`&.HvAvatar-${size}`]: {\n fontSize: getFontSize(size),\n },\n }),\n }}\n >\n +{totalChildren - maxVisible}\n </HvAvatar>\n )}\n </div>\n );\n};\n\n/**\n * The AvatarGroup component is used to group multiple avatars.\n */\nexport const HvAvatarGroup = forwardRef<HTMLDivElement, HvAvatarGroupProps>(\n (props, ref) => {\n const {\n className,\n style,\n classes: classesProp,\n children,\n size = \"sm\",\n spacing = \"loose\",\n direction = \"row\",\n maxVisible = 3,\n overflowComponent,\n highlight = false,\n toBack = false,\n ...others\n } = useDefaultProps(\"HvAvatarGroup\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const spacingValue = getSpacingValue(spacing, size);\n\n const totalChildren = Children.count(children);\n const willOverflow = totalChildren > maxVisible;\n\n const childrenToShow = Children.toArray(children).slice(0, maxVisible);\n\n // Since the `HvAvatar` components are displayed in reverse order using `row-reverse`, we need to reverse the array.\n if (toBack) childrenToShow.reverse();\n\n return (\n <div\n className={cx(\n classes.root,\n classes[direction],\n { [classes.highlight]: highlight },\n { [classes.toBack]: toBack },\n className,\n )}\n style={{\n [\"--spacing\" as string]: `-${spacingValue}px`,\n ...style,\n }}\n ref={ref}\n {...others}\n >\n <HvAvatarGroupProvider size={size}>\n {toBack && willOverflow && (\n <Overflow\n childrenToShow={childrenToShow}\n direction={direction}\n maxVisible={maxVisible}\n overflowComponent={overflowComponent}\n size={size}\n spacingValue={spacingValue}\n totalChildren={totalChildren}\n />\n )}\n {childrenToShow}\n {!toBack && willOverflow && (\n <Overflow\n childrenToShow={childrenToShow}\n direction={direction}\n maxVisible={maxVisible}\n overflowComponent={overflowComponent}\n size={size}\n spacingValue={spacingValue}\n totalChildren={totalChildren}\n />\n )}\n </HvAvatarGroupProvider>\n </div>\n );\n },\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -8,14 +8,64 @@ const { staticClasses, useClasses } = createClasses("HvAvatarGroup", {
|
|
|
8
8
|
[`& .${staticClasses$1.root}`]: {
|
|
9
9
|
border: `2px solid ${theme.colors.atmo2}`,
|
|
10
10
|
boxSizing: "content-box"
|
|
11
|
+
},
|
|
12
|
+
"&$row": {
|
|
13
|
+
flexDirection: "row",
|
|
14
|
+
justifyContent: "flex-start",
|
|
15
|
+
[`& .${staticClasses$1.container}`]: {
|
|
16
|
+
"&:not(:first-of-type)": {
|
|
17
|
+
marginLeft: "var(--spacing)"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
"&$toBack": {
|
|
21
|
+
flexDirection: "row-reverse",
|
|
22
|
+
justifyContent: "flex-end",
|
|
23
|
+
[`& .${staticClasses$1.container}`]: {
|
|
24
|
+
"&:last-of-type": {
|
|
25
|
+
marginLeft: 0
|
|
26
|
+
},
|
|
27
|
+
"&:not(:last-of-type)": {
|
|
28
|
+
marginLeft: "var(--spacing)"
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
"&$column": {
|
|
34
|
+
flexDirection: "column",
|
|
35
|
+
[`& .${staticClasses$1.container}`]: {
|
|
36
|
+
"&:not(:first-of-type)": {
|
|
37
|
+
marginTop: "var(--spacing)"
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
"&$toBack": {
|
|
41
|
+
flexDirection: "column-reverse",
|
|
42
|
+
[`& .${staticClasses$1.container}`]: {
|
|
43
|
+
"&:last-of-type": {
|
|
44
|
+
marginTop: 0
|
|
45
|
+
},
|
|
46
|
+
"&:not(:last-of-type)": {
|
|
47
|
+
marginTop: "var(--spacing)"
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
[`&$highlight`]: {
|
|
53
|
+
[`& .${staticClasses$1.status}:hover`]: {
|
|
54
|
+
zIndex: theme.zIndices.popover
|
|
55
|
+
}
|
|
11
56
|
}
|
|
12
57
|
},
|
|
13
58
|
row: {
|
|
14
|
-
flexDirection: "row"
|
|
59
|
+
flexDirection: "row",
|
|
60
|
+
justifyContent: "flex-start",
|
|
61
|
+
"&$toBack": {
|
|
62
|
+
flexDirection: "row-reverse",
|
|
63
|
+
justifyContent: "flex-end"
|
|
64
|
+
}
|
|
15
65
|
},
|
|
16
|
-
column: {
|
|
17
|
-
|
|
18
|
-
}
|
|
66
|
+
column: {},
|
|
67
|
+
highlight: {},
|
|
68
|
+
toBack: {}
|
|
19
69
|
});
|
|
20
70
|
export {
|
|
21
71
|
staticClasses,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.styles.js","sources":["../../../src/AvatarGroup/AvatarGroup.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { avatarClasses } from \"../Avatar/Avatar\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAvatarGroup\", {\n root: {\n display: \"flex\",\n [`& .${avatarClasses.root}`]: {\n border: `2px solid ${theme.colors.atmo2}`,\n boxSizing: \"content-box\",\n },\n
|
|
1
|
+
{"version":3,"file":"AvatarGroup.styles.js","sources":["../../../src/AvatarGroup/AvatarGroup.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { avatarClasses } from \"../Avatar/Avatar\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAvatarGroup\", {\n root: {\n display: \"flex\",\n [`& .${avatarClasses.root}`]: {\n border: `2px solid ${theme.colors.atmo2}`,\n boxSizing: \"content-box\",\n },\n \"&$row\": {\n flexDirection: \"row\",\n justifyContent: \"flex-start\",\n\n [`& .${avatarClasses.container}`]: {\n \"&:not(:first-of-type)\": {\n marginLeft: \"var(--spacing)\",\n },\n },\n \"&$toBack\": {\n flexDirection: \"row-reverse\",\n justifyContent: \"flex-end\",\n [`& .${avatarClasses.container}`]: {\n \"&:last-of-type\": {\n marginLeft: 0,\n },\n \"&:not(:last-of-type)\": {\n marginLeft: \"var(--spacing)\",\n },\n },\n },\n },\n \"&$column\": {\n flexDirection: \"column\",\n [`& .${avatarClasses.container}`]: {\n \"&:not(:first-of-type)\": {\n marginTop: \"var(--spacing)\",\n },\n },\n \"&$toBack\": {\n flexDirection: \"column-reverse\",\n [`& .${avatarClasses.container}`]: {\n \"&:last-of-type\": {\n marginTop: 0,\n },\n \"&:not(:last-of-type)\": {\n marginTop: \"var(--spacing)\",\n },\n },\n },\n },\n [`&$highlight`]: {\n [`& .${avatarClasses.status}:hover`]: {\n zIndex: theme.zIndices.popover,\n },\n },\n },\n row: {\n flexDirection: \"row\",\n justifyContent: \"flex-start\",\n \"&$toBack\": {\n flexDirection: \"row-reverse\",\n justifyContent: \"flex-end\",\n },\n },\n column: {},\n highlight: {},\n toBack: {},\n});\n"],"names":["avatarClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,CAAC,MAAMA,gBAAc,IAAI,EAAE,GAAG;AAAA,MAC5B,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,MACvC,WAAW;AAAA,IACb;AAAA,IACA,SAAS;AAAA,MACP,eAAe;AAAA,MACf,gBAAgB;AAAA,MAEhB,CAAC,MAAMA,gBAAc,SAAS,EAAE,GAAG;AAAA,QACjC,yBAAyB;AAAA,UACvB,YAAY;AAAA,QACd;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,eAAe;AAAA,QACf,gBAAgB;AAAA,QAChB,CAAC,MAAMA,gBAAc,SAAS,EAAE,GAAG;AAAA,UACjC,kBAAkB;AAAA,YAChB,YAAY;AAAA,UACd;AAAA,UACA,wBAAwB;AAAA,YACtB,YAAY;AAAA,UACd;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,eAAe;AAAA,MACf,CAAC,MAAMA,gBAAc,SAAS,EAAE,GAAG;AAAA,QACjC,yBAAyB;AAAA,UACvB,WAAW;AAAA,QACb;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,eAAe;AAAA,QACf,CAAC,MAAMA,gBAAc,SAAS,EAAE,GAAG;AAAA,UACjC,kBAAkB;AAAA,YAChB,WAAW;AAAA,UACb;AAAA,UACA,wBAAwB;AAAA,YACtB,WAAW;AAAA,UACb;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,MACf,CAAC,MAAMA,gBAAc,MAAM,QAAQ,GAAG;AAAA,QACpC,QAAQ,MAAM,SAAS;AAAA,MACzB;AAAA,IACF;AAAA,EACF;AAAA,EACA,KAAK;AAAA,IACH,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,MACV,eAAe;AAAA,MACf,gBAAgB;AAAA,IAClB;AAAA,EACF;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,WAAW,CAAC;AAAA,EACZ,QAAQ,CAAC;AACX,CAAC;"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { createContext, useMemo, useContext } from "react";
|
|
3
|
+
const HvAvatarGroupContext = createContext(null);
|
|
4
|
+
const HvAvatarGroupProvider = ({
|
|
5
|
+
size,
|
|
6
|
+
children
|
|
7
|
+
}) => {
|
|
8
|
+
const value = useMemo(() => ({ size }), [size]);
|
|
9
|
+
return /* @__PURE__ */ jsx(HvAvatarGroupContext.Provider, { value, children });
|
|
10
|
+
};
|
|
11
|
+
const useAvatarGroupContext = () => {
|
|
12
|
+
const context = useContext(HvAvatarGroupContext);
|
|
13
|
+
return context;
|
|
14
|
+
};
|
|
15
|
+
export {
|
|
16
|
+
HvAvatarGroupContext,
|
|
17
|
+
HvAvatarGroupProvider,
|
|
18
|
+
useAvatarGroupContext
|
|
19
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarGroupContext.js","sources":["../../../src/AvatarGroup/AvatarGroupContext.tsx"],"sourcesContent":["import { createContext, useContext, useMemo } from \"react\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\ntype HvAvatarGroupContextProviderProps = {\n size: HvSize;\n children: React.ReactNode;\n};\n\ntype HvAvatarGroupContextProp = {\n size: HvSize;\n};\n\nexport const HvAvatarGroupContext =\n createContext<HvAvatarGroupContextProp | null>(null);\n\nexport const HvAvatarGroupProvider = ({\n size,\n children,\n}: HvAvatarGroupContextProviderProps) => {\n const value = useMemo(() => ({ size }), [size]);\n\n return (\n <HvAvatarGroupContext.Provider value={value}>\n {children}\n </HvAvatarGroupContext.Provider>\n );\n};\n\nexport const useAvatarGroupContext = () => {\n const context = useContext(HvAvatarGroupContext);\n return context;\n};\n"],"names":[],"mappings":";;AAYa,MAAA,uBACX,cAA+C,IAAI;AAE9C,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AACF,MAAyC;AACjC,QAAA,QAAQ,QAAQ,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC;AAE9C,SACG,oBAAA,qBAAqB,UAArB,EAA8B,OAC5B,SACH,CAAA;AAEJ;AAEO,MAAM,wBAAwB,MAAM;AACnC,QAAA,UAAU,WAAW,oBAAoB;AACxC,SAAA;AACT;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.js","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { EmotionCache } from \"@emotion/cache\";\nimport {\n createTheme,\n ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport {\n defaultCacheKey,\n defaultEmotionCache,\n EmotionContext,\n HvThemeContext,\n type HvThemeContextValue,\n} from \"@hitachivantara/uikit-react-shared\";\nimport { HvThemeStructure, parseTheme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvTheme } from \"../types/theme\";\nimport { setElementAttrs } from \"../utils/theme\";\n\nexport { HvThemeContext };\nexport type { HvThemeContextValue };\n\nexport { defaultCacheKey, defaultEmotionCache, EmotionContext };\n\ninterface HvThemeProviderProps {\n children: React.ReactNode;\n themes: (HvTheme | HvThemeStructure)[];\n theme: string;\n emotionCache: EmotionCache;\n colorMode: string;\n themeRootId?: string;\n}\n\nexport const HvThemeProvider = ({\n children,\n themes: themesList,\n theme,\n emotionCache,\n colorMode,\n themeRootId: rootId,\n}: HvThemeProviderProps) => {\n const initTheme = parseTheme(themesList, theme, colorMode);\n\n const [parsedTheme, setParsedTheme] = useState(initTheme);\n const [activeTheme, setActiveTheme] = useState(parsedTheme.theme);\n const [selectedTheme, setSelectedTheme] = useState(parsedTheme.selectedTheme);\n const [selectedMode, setThemeMode] = useState(parsedTheme.selectedMode);\n const [colorModes, setColorModes] = useState(parsedTheme.colorModes);\n const [themes, setThemes] = useState(themesList.map((t) => t.name));\n\n useEffect(() => {\n const pTheme = parseTheme(themesList, theme, colorMode);\n setThemes(themesList.map((t) => t.name));\n setParsedTheme(pTheme);\n }, [themesList, theme, colorMode]);\n\n useEffect(() => {\n setActiveTheme(parsedTheme.theme);\n setSelectedTheme(parsedTheme.selectedTheme);\n setThemeMode(parsedTheme.selectedMode);\n setColorModes(parsedTheme.colorModes);\n\n setElementAttrs(\n parsedTheme.selectedTheme,\n parsedTheme.selectedMode,\n parsedTheme.colorScheme,\n rootId,\n );\n }, [parsedTheme, rootId]);\n\n const changeTheme = useCallback(\n (newTheme = selectedTheme, newMode = selectedMode) => {\n const pTheme = parseTheme(themesList, newTheme, newMode);\n setParsedTheme(pTheme);\n },\n [selectedMode, selectedTheme, themesList],\n );\n\n const value = useMemo<HvThemeContextValue>(\n () => ({\n themes,\n colorModes,\n activeTheme: activeTheme as HvTheme,\n selectedTheme,\n selectedMode,\n changeTheme,\n rootId,\n }),\n [\n themes,\n colorModes,\n activeTheme,\n selectedTheme,\n selectedMode,\n changeTheme,\n rootId,\n ],\n );\n\n const MuiTheme = createTheme({\n breakpoints: {\n values: {\n ...activeTheme.breakpoints.values,\n },\n },\n });\n\n const emotionCacheValue = useMemo(\n () => ({ cache: emotionCache }),\n [emotionCache],\n );\n\n return (\n <MuiThemeProvider theme={MuiTheme}>\n <HvThemeContext.Provider value={value}>\n <EmotionContext.Provider value={emotionCacheValue}>\n {children}\n </EmotionContext.Provider>\n </HvThemeContext.Provider>\n </MuiThemeProvider>\n );\n};\n"],"names":["MuiThemeProvider"],"mappings":";;;;;;;AAgCO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAA4B;AAC1B,QAAM,YAAY,WAAW,YAAY,OAAO,SAAS;AAEzD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,SAAS;AACxD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,YAAY,KAAK;AAChE,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,YAAY,aAAa;AAC5E,QAAM,CAAC,cAAc,YAAY,IAAI,SAAS,YAAY,YAAY;AACtE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,YAAY,UAAU;AAC7D,QAAA,CAAC,QAAQ,SAAS,IAAI,SAAS,WAAW,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AAElE,YAAU,MAAM;AACd,UAAM,SAAS,WAAW,YAAY,OAAO,SAAS;AACtD,cAAU,WAAW,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACvC,mBAAe,MAAM;AAAA,EACpB,GAAA,CAAC,YAAY,OAAO,SAAS,CAAC;AAEjC,YAAU,MAAM;AACd,mBAAe,YAAY,KAAK;AAChC,qBAAiB,YAAY,aAAa;AAC1C,iBAAa,YAAY,YAAY;AACrC,kBAAc,YAAY,UAAU;AAEpC;AAAA,MACE,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ;AAAA,IAAA;AAAA,EACF,GACC,CAAC,aAAa,MAAM,CAAC;AAExB,QAAM,cAAc;AAAA,IAClB,CAAC,WAAW,eAAe,UAAU,iBAAiB;AACpD,YAAM,SAAS,WAAW,YAAY,UAAU,OAAO;AACvD,qBAAe,MAAM;AAAA,IACvB;AAAA,IACA,CAAC,cAAc,eAAe,UAAU;AAAA,EAAA;AAG1C,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,QAAM,WAAW,YAAY;AAAA,IAC3B,aAAa;AAAA,MACX,QAAQ;AAAA,QACN,GAAG,YAAY,YAAY;AAAA,MAC7B;AAAA,IACF;AAAA,EAAA,CACD;AAED,QAAM,oBAAoB;AAAA,IACxB,OAAO,EAAE,OAAO;IAChB,CAAC,YAAY;AAAA,EAAA;AAGf,6BACGA,eAAiB,EAAA,OAAO,UACvB,UAAA,oBAAC,eAAe,UAAf,EAAwB,OACvB,UAAA,oBAAC,eAAe,UAAf,EAAwB,OAAO,mBAC7B,SACH,CAAA,GACF,EACF,CAAA;AAEJ;"}
|
|
1
|
+
{"version":3,"file":"ThemeProvider.js","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { EmotionCache } from \"@emotion/cache\";\nimport {\n createTheme,\n ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport {\n defaultCacheKey,\n defaultEmotionCache,\n EmotionContext,\n HvThemeContext,\n type HvThemeContextValue,\n} from \"@hitachivantara/uikit-react-shared\";\nimport { HvThemeStructure, parseTheme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvTheme } from \"../types/theme\";\nimport { setElementAttrs } from \"../utils/theme\";\n\nexport { HvThemeContext };\nexport type { HvThemeContextValue };\n\nexport { defaultCacheKey, defaultEmotionCache, EmotionContext };\n\ninterface HvThemeProviderProps {\n children: React.ReactNode;\n themes: (HvTheme | HvThemeStructure)[];\n theme: string;\n emotionCache: EmotionCache;\n colorMode: string;\n themeRootId?: string;\n}\n\nexport const HvThemeProvider = ({\n children,\n themes: themesList,\n theme,\n emotionCache,\n colorMode,\n themeRootId: rootId,\n}: HvThemeProviderProps) => {\n const initTheme = parseTheme(themesList, theme, colorMode);\n\n const [parsedTheme, setParsedTheme] = useState(initTheme);\n const [activeTheme, setActiveTheme] = useState(parsedTheme.theme);\n const [selectedTheme, setSelectedTheme] = useState(parsedTheme.selectedTheme);\n const [selectedMode, setThemeMode] = useState(parsedTheme.selectedMode);\n const [colorModes, setColorModes] = useState(parsedTheme.colorModes);\n const [themes, setThemes] = useState(themesList.map((t) => t.name));\n\n useEffect(() => {\n const pTheme = parseTheme(themesList, theme, colorMode);\n setThemes(themesList.map((t) => t.name));\n setParsedTheme(pTheme);\n }, [themesList, theme, colorMode]);\n\n useEffect(() => {\n setActiveTheme(parsedTheme.theme);\n setSelectedTheme(parsedTheme.selectedTheme);\n setThemeMode(parsedTheme.selectedMode);\n setColorModes(parsedTheme.colorModes);\n\n setElementAttrs(\n parsedTheme.selectedTheme,\n parsedTheme.selectedMode,\n parsedTheme.colorScheme,\n rootId,\n );\n }, [parsedTheme, rootId]);\n\n const changeTheme = useCallback(\n (newTheme = selectedTheme, newMode = selectedMode) => {\n const pTheme = parseTheme(themesList, newTheme, newMode);\n setParsedTheme(pTheme);\n },\n [selectedMode, selectedTheme, themesList],\n );\n\n const value = useMemo<HvThemeContextValue>(\n () => ({\n themes,\n colorModes,\n activeTheme: activeTheme as HvTheme,\n selectedTheme,\n selectedMode,\n changeTheme,\n rootId,\n }),\n [\n themes,\n colorModes,\n activeTheme,\n selectedTheme,\n selectedMode,\n changeTheme,\n rootId,\n ],\n );\n\n const MuiTheme = createTheme({\n components: {\n MuiButtonBase: {\n defaultProps: {\n disableRipple: true,\n },\n },\n },\n breakpoints: {\n values: {\n ...activeTheme.breakpoints.values,\n },\n },\n });\n\n const emotionCacheValue = useMemo(\n () => ({ cache: emotionCache }),\n [emotionCache],\n );\n\n return (\n <MuiThemeProvider theme={MuiTheme}>\n <HvThemeContext.Provider value={value}>\n <EmotionContext.Provider value={emotionCacheValue}>\n {children}\n </EmotionContext.Provider>\n </HvThemeContext.Provider>\n </MuiThemeProvider>\n );\n};\n"],"names":["MuiThemeProvider"],"mappings":";;;;;;;AAgCO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAA4B;AAC1B,QAAM,YAAY,WAAW,YAAY,OAAO,SAAS;AAEzD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,SAAS;AACxD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,YAAY,KAAK;AAChE,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,YAAY,aAAa;AAC5E,QAAM,CAAC,cAAc,YAAY,IAAI,SAAS,YAAY,YAAY;AACtE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,YAAY,UAAU;AAC7D,QAAA,CAAC,QAAQ,SAAS,IAAI,SAAS,WAAW,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AAElE,YAAU,MAAM;AACd,UAAM,SAAS,WAAW,YAAY,OAAO,SAAS;AACtD,cAAU,WAAW,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACvC,mBAAe,MAAM;AAAA,EACpB,GAAA,CAAC,YAAY,OAAO,SAAS,CAAC;AAEjC,YAAU,MAAM;AACd,mBAAe,YAAY,KAAK;AAChC,qBAAiB,YAAY,aAAa;AAC1C,iBAAa,YAAY,YAAY;AACrC,kBAAc,YAAY,UAAU;AAEpC;AAAA,MACE,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ;AAAA,IAAA;AAAA,EACF,GACC,CAAC,aAAa,MAAM,CAAC;AAExB,QAAM,cAAc;AAAA,IAClB,CAAC,WAAW,eAAe,UAAU,iBAAiB;AACpD,YAAM,SAAS,WAAW,YAAY,UAAU,OAAO;AACvD,qBAAe,MAAM;AAAA,IACvB;AAAA,IACA,CAAC,cAAc,eAAe,UAAU;AAAA,EAAA;AAG1C,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,QAAM,WAAW,YAAY;AAAA,IAC3B,YAAY;AAAA,MACV,eAAe;AAAA,QACb,cAAc;AAAA,UACZ,eAAe;AAAA,QACjB;AAAA,MACF;AAAA,IACF;AAAA,IACA,aAAa;AAAA,MACX,QAAQ;AAAA,QACN,GAAG,YAAY,YAAY;AAAA,MAC7B;AAAA,IACF;AAAA,EAAA,CACD;AAED,QAAM,oBAAoB;AAAA,IACxB,OAAO,EAAE,OAAO;IAChB,CAAC,YAAY;AAAA,EAAA;AAGf,6BACGA,eAAiB,EAAA,OAAO,UACvB,UAAA,oBAAC,eAAe,UAAf,EAAwB,OACvB,UAAA,oBAAC,eAAe,UAAf,EAAwB,OAAO,mBAC7B,SACH,CAAA,GACF,EACF,CAAA;AAEJ;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -270,6 +270,8 @@ export declare const avatarGroupClasses: {
|
|
|
270
270
|
root: "HvAvatarGroup-root";
|
|
271
271
|
row: "HvAvatarGroup-row";
|
|
272
272
|
column: "HvAvatarGroup-column";
|
|
273
|
+
highlight: "HvAvatarGroup-highlight";
|
|
274
|
+
toBack: "HvAvatarGroup-toBack";
|
|
273
275
|
};
|
|
274
276
|
|
|
275
277
|
export declare const badgeClasses: {
|
|
@@ -1391,7 +1393,7 @@ export declare interface HvAvatarProps extends HvBaseProps {
|
|
|
1391
1393
|
/** The component used for the root node. Either a string to use a DOM element or a component. */
|
|
1392
1394
|
component?: React.ElementType;
|
|
1393
1395
|
/** Sets one of the standard sizes of the icons */
|
|
1394
|
-
size?:
|
|
1396
|
+
size?: HvSize;
|
|
1395
1397
|
/** A color representing the foreground color of the avatar's letters or the generic User icon fallback. */
|
|
1396
1398
|
color?: HvColorAny;
|
|
1397
1399
|
/** A String representing the background color of the avatar. */
|
|
@@ -1421,6 +1423,7 @@ export declare interface HvAvatarProps extends HvBaseProps {
|
|
|
1421
1423
|
classes?: HvAvatarClasses;
|
|
1422
1424
|
}
|
|
1423
1425
|
|
|
1426
|
+
/** @deprecated use `HvSize` instead */
|
|
1424
1427
|
export declare type HvAvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
1425
1428
|
|
|
1426
1429
|
export declare type HvAvatarVariant = "circular" | "square";
|
|
@@ -9523,11 +9526,13 @@ declare const useClasses_24: (classesProp?: Partial<Record<"container" | "xs" |
|
|
|
9523
9526
|
cx: (...args: any) => string;
|
|
9524
9527
|
};
|
|
9525
9528
|
|
|
9526
|
-
declare const useClasses_25: (classesProp?: Partial<Record<"root" | "row" | "column", string>>, addStatic?: boolean) => {
|
|
9529
|
+
declare const useClasses_25: (classesProp?: Partial<Record<"root" | "row" | "column" | "highlight" | "toBack", string>>, addStatic?: boolean) => {
|
|
9527
9530
|
classes: {
|
|
9528
9531
|
root: string;
|
|
9529
9532
|
row: string;
|
|
9530
9533
|
column: string;
|
|
9534
|
+
highlight: string;
|
|
9535
|
+
toBack: string;
|
|
9531
9536
|
};
|
|
9532
9537
|
css: {
|
|
9533
9538
|
(template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.63.
|
|
3
|
+
"version": "5.63.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Core React components for the NEXT Design System.",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"access": "public",
|
|
63
63
|
"directory": "package"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "486e04c25523d3610342055dbe9f9e11cc35b4ce",
|
|
66
66
|
"main": "dist/cjs/index.cjs",
|
|
67
67
|
"exports": {
|
|
68
68
|
".": {
|