@cloudscape-design/chat-components 1.0.56 → 1.0.57

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.
@@ -6,8 +6,8 @@ import clsx from "clsx";
6
6
  import { useMergeRefs, warnOnce } from "@cloudscape-design/component-toolkit/internal";
7
7
  import Icon from "@cloudscape-design/components/icon";
8
8
  import Tooltip from "@cloudscape-design/components/internal/tooltip-do-not-use";
9
- import * as awsui from "@cloudscape-design/design-tokens";
10
9
  import { getDataAttributes } from "../internal/base-component/get-data-attributes";
10
+ import customCssProps from "../internal/generated/custom-css-properties";
11
11
  import LoadingDots from "./loading-dots";
12
12
  import styles from "./styles.css.js";
13
13
  const AvatarContent = ({ color, loading, initials, iconName, iconSvg, iconUrl, ariaLabel, width, imgUrl, }) => {
@@ -15,14 +15,14 @@ const AvatarContent = ({ color, loading, initials, iconName, iconSvg, iconUrl, a
15
15
  return _jsx(LoadingDots, { color: color, width: width });
16
16
  }
17
17
  if (imgUrl) {
18
- return _jsx("img", { className: styles.image, src: imgUrl, style: { height: width, width: width } });
18
+ return _jsx("img", { className: styles.image, src: imgUrl });
19
19
  }
20
20
  if (initials) {
21
21
  const letters = initials.length > 2 ? initials.slice(0, 2) : initials;
22
22
  if (initials.length > 2) {
23
23
  warnOnce("Avatar", `"initials" is longer than 2 characters. Only the first two characters are shown.`);
24
24
  }
25
- return (_jsx("span", { style: { fontSize: `clamp(${awsui.fontSizeBodyS}, calc(0.4px * ${width}), calc(0.4px * ${width}))` }, children: letters }));
25
+ return _jsx("span", { className: styles.initials, children: letters });
26
26
  }
27
27
  return _jsx(Icon, { name: iconName, svg: iconSvg, url: iconUrl, alt: ariaLabel, size: "inherit" });
28
28
  };
@@ -51,8 +51,8 @@ export default function InternalAvatar({ color, tooltipText, initials, loading =
51
51
  setShowTooltip(false);
52
52
  },
53
53
  };
54
- return (_jsxs("div", { ...getDataAttributes(rest), ref: mergedRef, tabIndex: 0, className: clsx(styles.root, styles[`avatar-color-${color}`], { [styles.initials]: initials }), role: "img", "aria-label": ariaLabel, ...tooltipAttributes, style: { height: computedSize, width: computedSize }, children: [showTooltip && tooltipText && (_jsx(Tooltip, { value: tooltipText, trackRef: handleRef,
54
+ return (_jsxs("div", { ...getDataAttributes(rest), ref: mergedRef, tabIndex: 0, className: clsx(styles.root, styles[`avatar-color-${color}`], { [styles.initials]: initials }), role: "img", "aria-label": ariaLabel, ...tooltipAttributes, style: { [customCssProps.avatarSize]: `${computedSize}px` }, children: [showTooltip && tooltipText && (_jsx(Tooltip, { value: tooltipText, trackRef: handleRef,
55
55
  // This is added to ensure tooltip is closed when clicked for consistency with other tooltip usages
56
- contentAttributes: { onPointerDown: () => setShowTooltip(false) } })), _jsx("div", { className: styles.content, "aria-hidden": "true", style: { lineHeight: `calc(.8px * ${computedSize})` }, children: _jsx(AvatarContent, { color: color, ariaLabel: ariaLabel, initials: initials, loading: loading, iconName: iconName, iconSvg: iconSvg, iconUrl: iconUrl, imgUrl: imgUrl, width: computedSize }) })] }));
56
+ contentAttributes: { onPointerDown: () => setShowTooltip(false) } })), _jsx("div", { className: styles.content, "aria-hidden": "true", children: _jsx(AvatarContent, { color: color, ariaLabel: ariaLabel, initials: initials, loading: loading, iconName: iconName, iconSvg: iconSvg, iconUrl: iconUrl, imgUrl: imgUrl, width: computedSize }) })] }));
57
57
  }
58
58
  //# sourceMappingURL=internal.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/avatar/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useRef, useState } from \"react\";\nimport clsx from \"clsx\";\n\nimport { useMergeRefs, warnOnce } from \"@cloudscape-design/component-toolkit/internal\";\nimport Icon from \"@cloudscape-design/components/icon\";\nimport Tooltip from \"@cloudscape-design/components/internal/tooltip-do-not-use\";\nimport * as awsui from \"@cloudscape-design/design-tokens\";\n\nimport { getDataAttributes } from \"../internal/base-component/get-data-attributes\";\nimport { InternalBaseComponentProps } from \"../internal/base-component/use-base-component\";\nimport { AvatarProps } from \"./interfaces.js\";\nimport LoadingDots from \"./loading-dots\";\n\nimport styles from \"./styles.css.js\";\n\nexport interface InternalAvatarProps extends AvatarProps, InternalBaseComponentProps {}\n\nconst AvatarContent = ({\n color,\n loading,\n initials,\n iconName,\n iconSvg,\n iconUrl,\n ariaLabel,\n width,\n imgUrl,\n}: AvatarProps) => {\n if (loading) {\n return <LoadingDots color={color} width={width} />;\n }\n\n if (imgUrl) {\n return <img className={styles.image} src={imgUrl} style={{ height: width, width: width }} />;\n }\n\n if (initials) {\n const letters = initials.length > 2 ? initials.slice(0, 2) : initials;\n\n if (initials.length > 2) {\n warnOnce(\"Avatar\", `\"initials\" is longer than 2 characters. Only the first two characters are shown.`);\n }\n\n return (\n <span style={{ fontSize: `clamp(${awsui.fontSizeBodyS}, calc(0.4px * ${width}), calc(0.4px * ${width}))` }}>\n {letters}\n </span>\n );\n }\n\n return <Icon name={iconName} svg={iconSvg} url={iconUrl} alt={ariaLabel} size=\"inherit\" />;\n};\n\nexport default function InternalAvatar({\n color,\n tooltipText,\n initials,\n loading = false,\n ariaLabel,\n iconName,\n iconSvg,\n iconUrl,\n imgUrl,\n width = 28,\n __internalRootRef = null,\n ...rest\n}: InternalAvatarProps) {\n const handleRef = useRef<HTMLDivElement>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n\n const mergedRef = useMergeRefs(handleRef, __internalRootRef);\n const computedSize = width < 28 ? 28 : width;\n\n const tooltipAttributes = {\n onFocus: () => {\n setShowTooltip(true);\n },\n onBlur: () => {\n setShowTooltip(false);\n },\n onMouseEnter: () => {\n setShowTooltip(true);\n },\n onMouseLeave: () => {\n setShowTooltip(false);\n },\n onTouchStart: () => {\n setShowTooltip(true);\n },\n onTouchEnd: () => {\n setShowTooltip(false);\n },\n };\n\n return (\n <div\n {...getDataAttributes(rest)}\n ref={mergedRef}\n tabIndex={0}\n className={clsx(styles.root, styles[`avatar-color-${color}`], { [styles.initials]: initials })}\n role=\"img\"\n aria-label={ariaLabel}\n {...tooltipAttributes}\n style={{ height: computedSize, width: computedSize }}\n >\n {showTooltip && tooltipText && (\n <Tooltip\n value={tooltipText}\n trackRef={handleRef}\n // This is added to ensure tooltip is closed when clicked for consistency with other tooltip usages\n contentAttributes={{ onPointerDown: () => setShowTooltip(false) }}\n />\n )}\n\n {/* aria-hidden is added so that screen readers focus only the parent div */}\n {/* when it is not hidden, it becomes unstable in JAWS */}\n <div className={styles.content} aria-hidden=\"true\" style={{ lineHeight: `calc(.8px * ${computedSize})` }}>\n <AvatarContent\n color={color}\n ariaLabel={ariaLabel}\n initials={initials}\n loading={loading}\n iconName={iconName}\n iconSvg={iconSvg}\n iconUrl={iconUrl}\n imgUrl={imgUrl}\n width={computedSize}\n />\n </div>\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/avatar/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useRef, useState } from \"react\";\nimport clsx from \"clsx\";\n\nimport { useMergeRefs, warnOnce } from \"@cloudscape-design/component-toolkit/internal\";\nimport Icon from \"@cloudscape-design/components/icon\";\nimport Tooltip from \"@cloudscape-design/components/internal/tooltip-do-not-use\";\n\nimport { getDataAttributes } from \"../internal/base-component/get-data-attributes\";\nimport { InternalBaseComponentProps } from \"../internal/base-component/use-base-component\";\nimport customCssProps from \"../internal/generated/custom-css-properties\";\nimport { AvatarProps } from \"./interfaces.js\";\nimport LoadingDots from \"./loading-dots\";\n\nimport styles from \"./styles.css.js\";\n\nexport interface InternalAvatarProps extends AvatarProps, InternalBaseComponentProps {}\n\nconst AvatarContent = ({\n color,\n loading,\n initials,\n iconName,\n iconSvg,\n iconUrl,\n ariaLabel,\n width,\n imgUrl,\n}: AvatarProps) => {\n if (loading) {\n return <LoadingDots color={color} width={width} />;\n }\n\n if (imgUrl) {\n return <img className={styles.image} src={imgUrl} />;\n }\n\n if (initials) {\n const letters = initials.length > 2 ? initials.slice(0, 2) : initials;\n\n if (initials.length > 2) {\n warnOnce(\"Avatar\", `\"initials\" is longer than 2 characters. Only the first two characters are shown.`);\n }\n\n return <span className={styles.initials}>{letters}</span>;\n }\n\n return <Icon name={iconName} svg={iconSvg} url={iconUrl} alt={ariaLabel} size=\"inherit\" />;\n};\n\nexport default function InternalAvatar({\n color,\n tooltipText,\n initials,\n loading = false,\n ariaLabel,\n iconName,\n iconSvg,\n iconUrl,\n imgUrl,\n width = 28,\n __internalRootRef = null,\n ...rest\n}: InternalAvatarProps) {\n const handleRef = useRef<HTMLDivElement>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n\n const mergedRef = useMergeRefs(handleRef, __internalRootRef);\n const computedSize = width < 28 ? 28 : width;\n\n const tooltipAttributes = {\n onFocus: () => {\n setShowTooltip(true);\n },\n onBlur: () => {\n setShowTooltip(false);\n },\n onMouseEnter: () => {\n setShowTooltip(true);\n },\n onMouseLeave: () => {\n setShowTooltip(false);\n },\n onTouchStart: () => {\n setShowTooltip(true);\n },\n onTouchEnd: () => {\n setShowTooltip(false);\n },\n };\n\n return (\n <div\n {...getDataAttributes(rest)}\n ref={mergedRef}\n tabIndex={0}\n className={clsx(styles.root, styles[`avatar-color-${color}`], { [styles.initials]: initials })}\n role=\"img\"\n aria-label={ariaLabel}\n {...tooltipAttributes}\n style={{ [customCssProps.avatarSize]: `${computedSize}px` }}\n >\n {showTooltip && tooltipText && (\n <Tooltip\n value={tooltipText}\n trackRef={handleRef}\n // This is added to ensure tooltip is closed when clicked for consistency with other tooltip usages\n contentAttributes={{ onPointerDown: () => setShowTooltip(false) }}\n />\n )}\n\n {/* aria-hidden is added so that screen readers focus only the parent div */}\n {/* when it is not hidden, it becomes unstable in JAWS */}\n <div className={styles.content} aria-hidden=\"true\">\n <AvatarContent\n color={color}\n ariaLabel={ariaLabel}\n initials={initials}\n loading={loading}\n iconName={iconName}\n iconSvg={iconSvg}\n iconUrl={iconUrl}\n imgUrl={imgUrl}\n width={computedSize}\n />\n </div>\n </div>\n );\n}\n"]}
@@ -1,11 +1,11 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "root": "awsui_root_1qkal_1u0rg_15",
5
- "avatar-color-default": "awsui_avatar-color-default_1qkal_1u0rg_50",
6
- "avatar-color-gen-ai": "awsui_avatar-color-gen-ai_1qkal_1u0rg_53",
7
- "initials": "awsui_initials_1qkal_1u0rg_56",
8
- "image": "awsui_image_1qkal_1u0rg_83",
9
- "content": "awsui_content_1qkal_1u0rg_87"
4
+ "root": "awsui_root_1qkal_1krd6_15",
5
+ "avatar-color-default": "awsui_avatar-color-default_1qkal_1krd6_50",
6
+ "avatar-color-gen-ai": "awsui_avatar-color-gen-ai_1qkal_1krd6_53",
7
+ "initials": "awsui_initials_1qkal_1krd6_56",
8
+ "image": "awsui_image_1qkal_1krd6_83",
9
+ "content": "awsui_content_1qkal_1krd6_87"
10
10
  };
11
11
 
@@ -12,7 +12,7 @@
12
12
  */
13
13
  /* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
14
14
  /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
15
- .awsui_root_1qkal_1u0rg_15:not(#\9) {
15
+ .awsui_root_1qkal_1krd6_15:not(#\9) {
16
16
  border-collapse: separate;
17
17
  border-spacing: 0;
18
18
  box-sizing: border-box;
@@ -39,36 +39,36 @@
39
39
  white-space: normal;
40
40
  word-spacing: normal;
41
41
  color: var(--color-text-avatar-kuhkoa, #ffffff);
42
- block-size: 28px;
43
- inline-size: 28px;
42
+ block-size: var(--awsui-avatar-size-n0cxze);
43
+ inline-size: var(--awsui-avatar-size-n0cxze);
44
44
  position: relative;
45
45
  border-start-start-radius: 50%;
46
46
  border-start-end-radius: 50%;
47
47
  border-end-start-radius: 50%;
48
48
  border-end-end-radius: 50%;
49
49
  }
50
- .awsui_root_1qkal_1u0rg_15.awsui_avatar-color-default_1qkal_1u0rg_50:not(#\9) {
50
+ .awsui_root_1qkal_1krd6_15.awsui_avatar-color-default_1qkal_1krd6_50:not(#\9) {
51
51
  background-color: var(--color-background-avatar-default-t427xm, #424650);
52
52
  }
53
- .awsui_root_1qkal_1u0rg_15.awsui_avatar-color-gen-ai_1qkal_1u0rg_53:not(#\9) {
53
+ .awsui_root_1qkal_1krd6_15.awsui_avatar-color-gen-ai_1qkal_1krd6_53:not(#\9) {
54
54
  background: var(--color-background-avatar-gen-ai-oxp2v6, radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40%, #8575ff 60%, #962eff 80%));
55
55
  }
56
- .awsui_root_1qkal_1u0rg_15.awsui_initials_1qkal_1u0rg_56:not(#\9) {
56
+ .awsui_root_1qkal_1krd6_15.awsui_initials_1qkal_1krd6_56:not(#\9) {
57
57
  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
58
58
  font-size: var(--font-size-body-s-smc8cv, 12px);
59
59
  line-height: var(--line-height-body-s-nu5hx1, 16px);
60
60
  font-weight: var(--font-weight-heading-l-0t6dwc, 700);
61
61
  }
62
- .awsui_root_1qkal_1u0rg_15:not(#\9):focus {
62
+ .awsui_root_1qkal_1krd6_15:not(#\9):focus {
63
63
  outline: none;
64
64
  }
65
- .awsui_root_1qkal_1u0rg_15:not(#\9):focus-visible {
65
+ .awsui_root_1qkal_1krd6_15:not(#\9):focus-visible {
66
66
  position: relative;
67
67
  box-sizing: border-box;
68
68
  outline: 2px dotted transparent;
69
69
  outline-offset: 3px;
70
70
  }
71
- .awsui_root_1qkal_1u0rg_15:not(#\9):focus-visible::before {
71
+ .awsui_root_1qkal_1krd6_15:not(#\9):focus-visible::before {
72
72
  content: " ";
73
73
  display: block;
74
74
  position: absolute;
@@ -80,24 +80,28 @@
80
80
  border-radius: 50%;
81
81
  border: 2px solid var(--color-border-item-focused-uk47pl, #006ce0);
82
82
  }
83
- .awsui_root_1qkal_1u0rg_15:not(#\9):has(.awsui_image_1qkal_1u0rg_83) {
83
+ .awsui_root_1qkal_1krd6_15:not(#\9):has(.awsui_image_1qkal_1krd6_83) {
84
84
  background: transparent;
85
85
  }
86
86
 
87
- .awsui_content_1qkal_1u0rg_87:not(#\9) {
87
+ .awsui_content_1qkal_1krd6_87:not(#\9) {
88
88
  display: flex;
89
89
  align-items: center;
90
90
  justify-content: center;
91
91
  block-size: inherit;
92
92
  inline-size: inherit;
93
93
  overflow: hidden;
94
+ line-height: calc(0.8 * var(--awsui-avatar-size-n0cxze));
94
95
  }
95
- .awsui_content_1qkal_1u0rg_87 .awsui_image_1qkal_1u0rg_83:not(#\9) {
96
+ .awsui_content_1qkal_1krd6_87 .awsui_image_1qkal_1krd6_83:not(#\9) {
96
97
  border-start-start-radius: 50%;
97
98
  border-start-end-radius: 50%;
98
99
  border-end-start-radius: 50%;
99
100
  border-end-end-radius: 50%;
100
- block-size: 28px;
101
- inline-size: 28px;
101
+ block-size: var(--awsui-avatar-size-n0cxze);
102
+ inline-size: var(--awsui-avatar-size-n0cxze);
102
103
  object-fit: cover;
104
+ }
105
+ .awsui_content_1qkal_1krd6_87 .awsui_initials_1qkal_1krd6_56:not(#\9) {
106
+ font-size: clamp(var(--font-size-body-s-smc8cv, 12px), 0.4 * var(--awsui-avatar-size-n0cxze), 0.4 * var(--awsui-avatar-size-n0cxze));
103
107
  }
@@ -2,11 +2,11 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "root": "awsui_root_1qkal_1u0rg_15",
6
- "avatar-color-default": "awsui_avatar-color-default_1qkal_1u0rg_50",
7
- "avatar-color-gen-ai": "awsui_avatar-color-gen-ai_1qkal_1u0rg_53",
8
- "initials": "awsui_initials_1qkal_1u0rg_56",
9
- "image": "awsui_image_1qkal_1u0rg_83",
10
- "content": "awsui_content_1qkal_1u0rg_87"
5
+ "root": "awsui_root_1qkal_1krd6_15",
6
+ "avatar-color-default": "awsui_avatar-color-default_1qkal_1krd6_50",
7
+ "avatar-color-gen-ai": "awsui_avatar-color-gen-ai_1qkal_1krd6_53",
8
+ "initials": "awsui_initials_1qkal_1krd6_56",
9
+ "image": "awsui_image_1qkal_1krd6_83",
10
+ "content": "awsui_content_1qkal_1krd6_87"
11
11
  };
12
12
 
@@ -1,5 +1,5 @@
1
1
  export var PACKAGE_SOURCE = "chat-components";
2
- export var PACKAGE_VERSION = "1.0.0 (cba15f80)";
2
+ export var PACKAGE_VERSION = "1.0.0 (66e61b3b)";
3
3
  export var THEME = "open-source-visual-refresh";
4
4
  export var ALWAYS_VISUAL_REFRESH = true;
5
5
  export var SYSTEM = "console";
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "PACKAGE_SOURCE": "chat-components",
3
- "PACKAGE_VERSION": "1.0.0 (cba15f80)",
3
+ "PACKAGE_VERSION": "1.0.0 (66e61b3b)",
4
4
  "THEME": "open-source-visual-refresh",
5
5
  "ALWAYS_VISUAL_REFRESH": true,
6
6
  "SYSTEM": "console"
@@ -0,0 +1,4 @@
1
+ declare const customCSSPropertiesMap: {
2
+ avatarSize: string;
3
+ };
4
+ export default customCSSPropertiesMap;
@@ -0,0 +1,5 @@
1
+ const customCSSPropertiesMap = {
2
+ "avatarSize": "--awsui-avatar-size-n0cxze",
3
+ };
4
+ export default customCSSPropertiesMap;
5
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/generated/custom-css-properties/index.ts"],"names":[],"mappings":"AACM,MAAM,sBAAsB,GAAG;IAC7B,YAAY,EAAE,4BAA4B;CAC3C,CAAC;AACF,eAAe,sBAAsB,CAAC","sourcesContent":["\n const customCSSPropertiesMap = {\n \"avatarSize\": \"--awsui-avatar-size-n0cxze\",\n };\n export default customCSSPropertiesMap;\n "]}
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "cba15f803e8e1efc333393a1588bdd3fea30c9dc"
2
+ "commit": "66e61b3ba9fa7082d538236effc15cbbe4c7929e"
3
3
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloudscape-design/chat-components",
3
- "version": "1.0.56",
3
+ "version": "1.0.57",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/cloudscape-design/chat-components.git"
@@ -47,6 +47,7 @@
47
47
  "@vitejs/plugin-react": "^4.2.1",
48
48
  "@vitest/coverage-v8": "^3.0.7",
49
49
  "@vitest/eslint-plugin": "^1.1.31",
50
+ "change-case": "^4.1.2",
50
51
  "chokidar-cli": "^3.0.0",
51
52
  "deep-freeze-es6": "^1.4.1",
52
53
  "delay-cli": "^2.0.0",