@cloudscape-design/chat-components 1.0.96 → 1.0.98

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.
Files changed (27) hide show
  1. package/chat-bubble/interfaces.d.ts +2 -0
  2. package/chat-bubble/interfaces.js.map +1 -1
  3. package/chat-bubble/style.d.ts +4 -0
  4. package/chat-bubble/style.js +8 -6
  5. package/chat-bubble/style.js.map +1 -1
  6. package/internal/api-docs/components/chat-bubble.js +11 -1
  7. package/internal/api-docs/components/support-prompt-group.js +1 -1
  8. package/internal/environment.js +1 -1
  9. package/internal/environment.json +1 -1
  10. package/internal/generated/styles/tokens.d.ts +1 -0
  11. package/internal/generated/styles/tokens.js +1 -0
  12. package/internal/generated/theming/index.cjs +5 -0
  13. package/internal/generated/theming/index.cjs.d.ts +9 -0
  14. package/internal/generated/theming/index.d.ts +9 -0
  15. package/internal/generated/theming/index.js +5 -0
  16. package/internal/manifest.json +1 -1
  17. package/package.json +1 -1
  18. package/support-prompt-group/interfaces.d.ts +11 -0
  19. package/support-prompt-group/interfaces.js.map +1 -1
  20. package/support-prompt-group/internal.js +1 -1
  21. package/support-prompt-group/internal.js.map +1 -1
  22. package/support-prompt-group/prompt.d.ts +6 -0
  23. package/support-prompt-group/prompt.js +13 -4
  24. package/support-prompt-group/prompt.js.map +1 -1
  25. package/support-prompt-group/styles.css.js +8 -3
  26. package/support-prompt-group/styles.scoped.css +29 -8
  27. package/support-prompt-group/styles.selectors.js +8 -3
package/chat-bubble/interfaces.d.ts CHANGED
@@ -42,8 +42,10 @@ export declare namespace ChatBubbleProps {
42
42
  borderWidth?: string;
43
43
  boxShadow?: string;
44
44
  color?: string;
45
+ fontFamily?: string;
45
46
  fontSize?: string;
46
47
  fontWeight?: string;
48
+ letterSpacing?: string;
47
49
  rowGap?: string;
48
50
  paddingBlock?: string;
49
51
  paddingInline?: string;
package/chat-bubble/interfaces.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/chat-bubble/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface ChatBubbleProps {\n /** Avatar slot paired with the chat bubble content. Use [avatar](/components/avatar/). */\n avatar: React.ReactNode;\n\n /** Defines the type of the chat bubble and sets its color accordingly. */\n type: ChatBubbleProps.Type;\n\n /** Content of the chat bubble */\n children: React.ReactNode;\n\n /** Actions slot of the chat bubble, placed at the footer. Use [button group](/components/button-group/). */\n actions?: React.ReactNode;\n\n /**\n * Adds a loading bar to the bottom of the chat bubble. This property should only be used for Generative AI loading state.\n * If avatar is being used, set its `loading` state to true.\n */\n showLoadingBar?: boolean;\n\n /**\n * Adds aria-label to the chat bubble container. Use this to provide a unique accessible name for each chat bubble on the page.\n * For example, \"John Doe at 3:42:10am\".\n */\n ariaLabel: string;\n\n /**\n * Hides the avatar while preserving its space.\n * Useful for when there are multiple consecutive messages coming from the same author.\n */\n hideAvatar?: boolean;\n\n /**\n * An object containing CSS properties to customize the chat bubble's visual appearance.\n * Refer to the [style](/components/chat-bubble/?tabId=style) tab for more details.\n * @awsuiSystem core\n */\n style?: ChatBubbleProps.Style;\n}\n\nexport namespace ChatBubbleProps {\n export type Type = \"incoming\" | \"outgoing\";\n export interface Style {\n root?: {\n columnGap?: string;\n };\n bubble?: {\n background?: string;\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n boxShadow?: string;\n color?: string;\n fontSize?: string;\n fontWeight?: string;\n rowGap?: string;\n paddingBlock?: string;\n paddingInline?: string;\n };\n }\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/chat-bubble/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface ChatBubbleProps {\n /** Avatar slot paired with the chat bubble content. Use [avatar](/components/avatar/). */\n avatar: React.ReactNode;\n\n /** Defines the type of the chat bubble and sets its color accordingly. */\n type: ChatBubbleProps.Type;\n\n /** Content of the chat bubble */\n children: React.ReactNode;\n\n /** Actions slot of the chat bubble, placed at the footer. Use [button group](/components/button-group/). */\n actions?: React.ReactNode;\n\n /**\n * Adds a loading bar to the bottom of the chat bubble. This property should only be used for Generative AI loading state.\n * If avatar is being used, set its `loading` state to true.\n */\n showLoadingBar?: boolean;\n\n /**\n * Adds aria-label to the chat bubble container. Use this to provide a unique accessible name for each chat bubble on the page.\n * For example, \"John Doe at 3:42:10am\".\n */\n ariaLabel: string;\n\n /**\n * Hides the avatar while preserving its space.\n * Useful for when there are multiple consecutive messages coming from the same author.\n */\n hideAvatar?: boolean;\n\n /**\n * An object containing CSS properties to customize the chat bubble's visual appearance.\n * Refer to the [style](/components/chat-bubble/?tabId=style) tab for more details.\n * @awsuiSystem core\n */\n style?: ChatBubbleProps.Style;\n}\n\nexport namespace ChatBubbleProps {\n export type Type = \"incoming\" | \"outgoing\";\n export interface Style {\n root?: {\n columnGap?: string;\n };\n bubble?: {\n background?: string;\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n boxShadow?: string;\n color?: string;\n fontFamily?: string;\n fontSize?: string;\n fontWeight?: string;\n letterSpacing?: string;\n rowGap?: string;\n paddingBlock?: string;\n paddingInline?: string;\n };\n }\n}\n"]}
package/chat-bubble/style.d.ts CHANGED
@@ -12,8 +12,10 @@ export declare function getBubbleStyle(style: ChatBubbleProps.Style | undefined)
12
12
  borderWidth?: undefined;
13
13
  boxShadow?: undefined;
14
14
  color?: undefined;
15
+ fontFamily?: undefined;
15
16
  fontSize?: undefined;
16
17
  fontWeight?: undefined;
18
+ letterSpacing?: undefined;
17
19
  paddingBlock?: undefined;
18
20
  paddingInline?: undefined;
19
21
  rowGap?: undefined;
@@ -25,8 +27,10 @@ export declare function getBubbleStyle(style: ChatBubbleProps.Style | undefined)
25
27
  borderWidth: string | undefined;
26
28
  boxShadow: string | undefined;
27
29
  color: string | undefined;
30
+ fontFamily: string | undefined;
28
31
  fontSize: string | undefined;
29
32
  fontWeight: string | undefined;
33
+ letterSpacing: string | undefined;
30
34
  paddingBlock: string | undefined;
31
35
  paddingInline: string | undefined;
32
36
  rowGap: string | undefined;
package/chat-bubble/style.js CHANGED
@@ -11,7 +11,7 @@ export function getChatBubbleRootStyle(style) {
11
11
  };
12
12
  }
13
13
  export function getBubbleStyle(style) {
14
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
14
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
15
15
  if (SYSTEM !== "core") {
16
16
  return {};
17
17
  }
@@ -23,11 +23,13 @@ export function getBubbleStyle(style) {
23
23
  borderWidth: (_e = style === null || style === void 0 ? void 0 : style.bubble) === null || _e === void 0 ? void 0 : _e.borderWidth,
24
24
  boxShadow: (_f = style === null || style === void 0 ? void 0 : style.bubble) === null || _f === void 0 ? void 0 : _f.boxShadow,
25
25
  color: (_g = style === null || style === void 0 ? void 0 : style.bubble) === null || _g === void 0 ? void 0 : _g.color,
26
- fontSize: (_h = style === null || style === void 0 ? void 0 : style.bubble) === null || _h === void 0 ? void 0 : _h.fontSize,
27
- fontWeight: (_j = style === null || style === void 0 ? void 0 : style.bubble) === null || _j === void 0 ? void 0 : _j.fontWeight,
28
- paddingBlock: (_k = style === null || style === void 0 ? void 0 : style.bubble) === null || _k === void 0 ? void 0 : _k.paddingBlock,
29
- paddingInline: (_l = style === null || style === void 0 ? void 0 : style.bubble) === null || _l === void 0 ? void 0 : _l.paddingInline,
30
- rowGap: (_m = style === null || style === void 0 ? void 0 : style.bubble) === null || _m === void 0 ? void 0 : _m.rowGap,
26
+ fontFamily: (_h = style === null || style === void 0 ? void 0 : style.bubble) === null || _h === void 0 ? void 0 : _h.fontFamily,
27
+ fontSize: (_j = style === null || style === void 0 ? void 0 : style.bubble) === null || _j === void 0 ? void 0 : _j.fontSize,
28
+ fontWeight: (_k = style === null || style === void 0 ? void 0 : style.bubble) === null || _k === void 0 ? void 0 : _k.fontWeight,
29
+ letterSpacing: (_l = style === null || style === void 0 ? void 0 : style.bubble) === null || _l === void 0 ? void 0 : _l.letterSpacing,
30
+ paddingBlock: (_m = style === null || style === void 0 ? void 0 : style.bubble) === null || _m === void 0 ? void 0 : _m.paddingBlock,
31
+ paddingInline: (_o = style === null || style === void 0 ? void 0 : style.bubble) === null || _o === void 0 ? void 0 : _o.paddingInline,
32
+ rowGap: (_p = style === null || style === void 0 ? void 0 : style.bubble) === null || _p === void 0 ? void 0 : _p.rowGap,
31
33
  };
32
34
  }
33
35
  //# sourceMappingURL=style.js.map
package/chat-bubble/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/chat-bubble/style.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAGjD,MAAM,UAAU,sBAAsB,CAAC,KAAwC;;IAC7E,IAAI,MAAM,KAAK,MAAM,EAAE;QACrB,OAAO,EAAE,CAAC;KACX;IAED,OAAO;QACL,SAAS,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,SAAS;KAClC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAAwC;;IACrE,IAAI,MAAM,KAAK,MAAM,EAAE;QACrB,OAAO,EAAE,CAAC;KACX;IAED,OAAO;QACL,UAAU,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,UAAU;QACrC,WAAW,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,WAAW;QACvC,YAAY,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,YAAY;QACzC,WAAW,EAAE,CAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,WAAW,EAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;QAC7D,WAAW,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,WAAW;QACvC,SAAS,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,SAAS;QACnC,KAAK,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,KAAK;QAC3B,QAAQ,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,QAAQ;QACjC,UAAU,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,UAAU;QACrC,YAAY,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,YAAY;QACzC,aAAa,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,aAAa;QAC3C,MAAM,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,MAAM;KAC9B,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { SYSTEM } from \"../internal/environment\";\nimport { ChatBubbleProps } from \"./interfaces\";\n\nexport function getChatBubbleRootStyle(style: ChatBubbleProps.Style | undefined) {\n if (SYSTEM !== \"core\") {\n return {};\n }\n\n return {\n columnGap: style?.root?.columnGap,\n };\n}\n\nexport function getBubbleStyle(style: ChatBubbleProps.Style | undefined) {\n if (SYSTEM !== \"core\") {\n return {};\n }\n\n return {\n background: style?.bubble?.background,\n borderColor: style?.bubble?.borderColor,\n borderRadius: style?.bubble?.borderRadius,\n borderStyle: style?.bubble?.borderWidth ? \"solid\" : undefined,\n borderWidth: style?.bubble?.borderWidth,\n boxShadow: style?.bubble?.boxShadow,\n color: style?.bubble?.color,\n fontSize: style?.bubble?.fontSize,\n fontWeight: style?.bubble?.fontWeight,\n paddingBlock: style?.bubble?.paddingBlock,\n paddingInline: style?.bubble?.paddingInline,\n rowGap: style?.bubble?.rowGap,\n };\n}\n"]}
1
+ {"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/chat-bubble/style.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAGjD,MAAM,UAAU,sBAAsB,CAAC,KAAwC;;IAC7E,IAAI,MAAM,KAAK,MAAM,EAAE;QACrB,OAAO,EAAE,CAAC;KACX;IAED,OAAO;QACL,SAAS,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,SAAS;KAClC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAAwC;;IACrE,IAAI,MAAM,KAAK,MAAM,EAAE;QACrB,OAAO,EAAE,CAAC;KACX;IAED,OAAO;QACL,UAAU,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,UAAU;QACrC,WAAW,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,WAAW;QACvC,YAAY,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,YAAY;QACzC,WAAW,EAAE,CAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,WAAW,EAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;QAC7D,WAAW,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,WAAW;QACvC,SAAS,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,SAAS;QACnC,KAAK,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,KAAK;QAC3B,UAAU,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,UAAU;QACrC,QAAQ,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,QAAQ;QACjC,UAAU,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,UAAU;QACrC,aAAa,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,aAAa;QAC3C,YAAY,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,YAAY;QACzC,aAAa,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,aAAa;QAC3C,MAAM,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,MAAM;KAC9B,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { SYSTEM } from \"../internal/environment\";\nimport { ChatBubbleProps } from \"./interfaces\";\n\nexport function getChatBubbleRootStyle(style: ChatBubbleProps.Style | undefined) {\n if (SYSTEM !== \"core\") {\n return {};\n }\n\n return {\n columnGap: style?.root?.columnGap,\n };\n}\n\nexport function getBubbleStyle(style: ChatBubbleProps.Style | undefined) {\n if (SYSTEM !== \"core\") {\n return {};\n }\n\n return {\n background: style?.bubble?.background,\n borderColor: style?.bubble?.borderColor,\n borderRadius: style?.bubble?.borderRadius,\n borderStyle: style?.bubble?.borderWidth ? \"solid\" : undefined,\n borderWidth: style?.bubble?.borderWidth,\n boxShadow: style?.bubble?.boxShadow,\n color: style?.bubble?.color,\n fontFamily: style?.bubble?.fontFamily,\n fontSize: style?.bubble?.fontSize,\n fontWeight: style?.bubble?.fontWeight,\n letterSpacing: style?.bubble?.letterSpacing,\n paddingBlock: style?.bubble?.paddingBlock,\n paddingInline: style?.bubble?.paddingInline,\n rowGap: style?.bubble?.rowGap,\n };\n}\n"]}
package/internal/api-docs/components/chat-bubble.js CHANGED
@@ -49,7 +49,7 @@ module.exports = {
49
49
  {
50
50
  "name": "bubble",
51
51
  "optional": true,
52
- "type": "{ background?: string | undefined; borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; boxShadow?: string | undefined; color?: string | undefined; ... 4 more ...; paddingInline?: string | undefined; }",
52
+ "type": "{ background?: string | undefined; borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; boxShadow?: string | undefined; color?: string | undefined; ... 6 more ...; paddingInline?: string | undefined; }",
53
53
  "inlineType": {
54
54
  "name": "object",
55
55
  "type": "object",
@@ -84,6 +84,11 @@ module.exports = {
84
84
  "optional": true,
85
85
  "type": "string"
86
86
  },
87
+ {
88
+ "name": "fontFamily",
89
+ "optional": true,
90
+ "type": "string"
91
+ },
87
92
  {
88
93
  "name": "fontSize",
89
94
  "optional": true,
@@ -94,6 +99,11 @@ module.exports = {
94
99
  "optional": true,
95
100
  "type": "string"
96
101
  },
102
+ {
103
+ "name": "letterSpacing",
104
+ "optional": true,
105
+ "type": "string"
106
+ },
97
107
  {
98
108
  "name": "paddingBlock",
99
109
  "optional": true,
package/internal/api-docs/components/support-prompt-group.js CHANGED
@@ -41,7 +41,7 @@ module.exports = {
41
41
  "name": "items",
42
42
  "type": "ReadonlyArray<SupportPromptGroupProps.Item>",
43
43
  "optional": false,
44
- "description": "An array of objects representing support prompts.\nEach item has the following properties:\n - text: The text of the support prompt.\n - id: The ID of the support prompt."
44
+ "description": "An array of objects representing support prompts.\nEach item has the following properties:\n - text: The text of the support prompt.\n - id: The ID of the support prompt.\n - iconName (optional): The name of a built-in icon to display.\n - iconSvg (optional): A custom SVG icon to display. Takes precedence over iconName.\n - iconPosition (optional): Position of the icon relative to text. Can be \"left\" (default) or \"right\".\n - iconVerticalAlignment (optional): Vertical alignment of the icon. Can be \"center\", \"start\" (default), or \"end\".\n - ariaLabel (optional): Custom accessible label for the prompt."
45
45
  }
46
46
  ],
47
47
  "events": [
package/internal/environment.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export var PACKAGE_SOURCE = "chat-components";
2
- export var PACKAGE_VERSION = "1.0.0 (d77e3ef0)";
2
+ export var PACKAGE_VERSION = "1.0.0 (0a2f72ae)";
3
3
  export var THEME = "open-source-visual-refresh";
4
4
  export var SYSTEM = "core";
5
5
  export var ALWAYS_VISUAL_REFRESH = true;
package/internal/environment.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "PACKAGE_SOURCE": "chat-components",
3
- "PACKAGE_VERSION": "1.0.0 (d77e3ef0)",
3
+ "PACKAGE_VERSION": "1.0.0 (0a2f72ae)",
4
4
  "THEME": "open-source-visual-refresh",
5
5
  "SYSTEM": "core",
6
6
  "ALWAYS_VISUAL_REFRESH": true
package/internal/generated/styles/tokens.d.ts CHANGED
@@ -558,6 +558,7 @@ export const fontChartDetailSize: string;
558
558
  export const fontDisplayLabelWeight: string;
559
559
  export const fontExpandableHeadingSize: string;
560
560
  export const fontFamilyBase: string;
561
+ export const fontFamilyHeading: string;
561
562
  export const fontFamilyMonospace: string;
562
563
  export const fontHeaderH2DescriptionLineHeight: string;
563
564
  export const fontHeaderH2DescriptionSize: string;
package/internal/generated/styles/tokens.js CHANGED
@@ -558,6 +558,7 @@ export var fontChartDetailSize = "var(--font-chart-detail-size-9qr25q, 12px)";
558
558
  export var fontDisplayLabelWeight = "var(--font-display-label-weight-zavpeo, 700)";
559
559
  export var fontExpandableHeadingSize = "var(--font-expandable-heading-size-0uk059, 16px)";
560
560
  export var fontFamilyBase = "var(--font-family-base-gmnpzl, 'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif)";
561
+ export var fontFamilyHeading = "var(--font-family-heading-ugphat, 'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif)";
561
562
  export var fontFamilyMonospace = "var(--font-family-monospace-q47m7k, Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace)";
562
563
  export var fontHeaderH2DescriptionLineHeight = "var(--font-header-h2-description-line-height-ts2s6o, 20px)";
563
564
  export var fontHeaderH2DescriptionSize = "var(--font-header-h2-description-size-g2wws3, 14px)";
package/internal/generated/theming/index.cjs CHANGED
@@ -2261,6 +2261,7 @@ module.exports.preset = {
2261
2261
  "fontDisplayLabelWeight": "700",
2262
2262
  "fontExpandableHeadingSize": "{fontSizeHeadingS}",
2263
2263
  "fontFamilyBase": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
2264
+ "fontFamilyHeading": "{fontFamilyBase}",
2264
2265
  "fontFamilyMonospace": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
2265
2266
  "fontHeaderH2DescriptionLineHeight": "{lineHeightBodyM}",
2266
2267
  "fontHeaderH2DescriptionSize": "{fontSizeBodyM}",
@@ -11731,6 +11732,7 @@ module.exports.preset = {
11731
11732
  "colorDropzoneBorderHover",
11732
11733
  "colorTreeViewConnectorLine",
11733
11734
  "fontFamilyBase",
11735
+ "fontFamilyHeading",
11734
11736
  "fontFamilyMonospace",
11735
11737
  "fontSizeBodyM",
11736
11738
  "fontSizeBodyS",
@@ -12109,6 +12111,7 @@ module.exports.preset = {
12109
12111
  "colorDropzoneBorderHover",
12110
12112
  "colorTreeViewConnectorLine",
12111
12113
  "fontFamilyBase",
12114
+ "fontFamilyHeading",
12112
12115
  "fontFamilyMonospace",
12113
12116
  "fontSizeBodyM",
12114
12117
  "fontSizeBodyS",
@@ -12758,6 +12761,7 @@ module.exports.preset = {
12758
12761
  "fontDisplayLabelWeight": "font-display-label-weight",
12759
12762
  "fontExpandableHeadingSize": "font-expandable-heading-size",
12760
12763
  "fontFamilyBase": "font-family-base",
12764
+ "fontFamilyHeading": "font-family-heading",
12761
12765
  "fontFamilyMonospace": "font-family-monospace",
12762
12766
  "fontHeaderH2DescriptionLineHeight": "font-header-h2-description-line-height",
12763
12767
  "fontHeaderH2DescriptionSize": "font-header-h2-description-size",
@@ -13577,6 +13581,7 @@ module.exports.preset = {
13577
13581
  "fontDisplayLabelWeight": "--font-display-label-weight-zavpeo",
13578
13582
  "fontExpandableHeadingSize": "--font-expandable-heading-size-0uk059",
13579
13583
  "fontFamilyBase": "--font-family-base-gmnpzl",
13584
+ "fontFamilyHeading": "--font-family-heading-ugphat",
13580
13585
  "fontFamilyMonospace": "--font-family-monospace-q47m7k",
13581
13586
  "fontHeaderH2DescriptionLineHeight": "--font-header-h2-description-line-height-ts2s6o",
13582
13587
  "fontHeaderH2DescriptionSize": "--font-header-h2-description-size-g2wws3",
package/internal/generated/theming/index.cjs.d.ts CHANGED
@@ -230,6 +230,7 @@ export declare interface TypedOverride {
230
230
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
231
231
  colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
232
232
  fontFamilyBase?: GlobalValue;
233
+ fontFamilyHeading?: GlobalValue;
233
234
  fontFamilyMonospace?: GlobalValue;
234
235
  fontSizeBodyM?: GlobalValue;
235
236
  fontSizeBodyS?: GlobalValue;
@@ -512,6 +513,7 @@ export declare interface TypedOverride {
512
513
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
513
514
  colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
514
515
  fontFamilyBase?: GlobalValue;
516
+ fontFamilyHeading?: GlobalValue;
515
517
  fontFamilyMonospace?: GlobalValue;
516
518
  fontSizeBodyM?: GlobalValue;
517
519
  fontSizeBodyS?: GlobalValue;
@@ -794,6 +796,7 @@ export declare interface TypedOverride {
794
796
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
795
797
  colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
796
798
  fontFamilyBase?: GlobalValue;
799
+ fontFamilyHeading?: GlobalValue;
797
800
  fontFamilyMonospace?: GlobalValue;
798
801
  fontSizeBodyM?: GlobalValue;
799
802
  fontSizeBodyS?: GlobalValue;
@@ -1076,6 +1079,7 @@ export declare interface TypedOverride {
1076
1079
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1077
1080
  colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1078
1081
  fontFamilyBase?: GlobalValue;
1082
+ fontFamilyHeading?: GlobalValue;
1079
1083
  fontFamilyMonospace?: GlobalValue;
1080
1084
  fontSizeBodyM?: GlobalValue;
1081
1085
  fontSizeBodyS?: GlobalValue;
@@ -1358,6 +1362,7 @@ export declare interface TypedOverride {
1358
1362
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1359
1363
  colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1360
1364
  fontFamilyBase?: GlobalValue;
1365
+ fontFamilyHeading?: GlobalValue;
1361
1366
  fontFamilyMonospace?: GlobalValue;
1362
1367
  fontSizeBodyM?: GlobalValue;
1363
1368
  fontSizeBodyS?: GlobalValue;
@@ -1640,6 +1645,7 @@ export declare interface TypedOverride {
1640
1645
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1641
1646
  colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1642
1647
  fontFamilyBase?: GlobalValue;
1648
+ fontFamilyHeading?: GlobalValue;
1643
1649
  fontFamilyMonospace?: GlobalValue;
1644
1650
  fontSizeBodyM?: GlobalValue;
1645
1651
  fontSizeBodyS?: GlobalValue;
@@ -1922,6 +1928,7 @@ export declare interface TypedOverride {
1922
1928
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1923
1929
  colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1924
1930
  fontFamilyBase?: GlobalValue;
1931
+ fontFamilyHeading?: GlobalValue;
1925
1932
  fontFamilyMonospace?: GlobalValue;
1926
1933
  fontSizeBodyM?: GlobalValue;
1927
1934
  fontSizeBodyS?: GlobalValue;
@@ -2204,6 +2211,7 @@ export declare interface TypedOverride {
2204
2211
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2205
2212
  colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2206
2213
  fontFamilyBase?: GlobalValue;
2214
+ fontFamilyHeading?: GlobalValue;
2207
2215
  fontFamilyMonospace?: GlobalValue;
2208
2216
  fontSizeBodyM?: GlobalValue;
2209
2217
  fontSizeBodyS?: GlobalValue;
@@ -2486,6 +2494,7 @@ export declare interface TypedOverride {
2486
2494
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2487
2495
  colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2488
2496
  fontFamilyBase?: GlobalValue;
2497
+ fontFamilyHeading?: GlobalValue;
2489
2498
  fontFamilyMonospace?: GlobalValue;
2490
2499
  fontSizeBodyM?: GlobalValue;
2491
2500
  fontSizeBodyS?: GlobalValue;
package/internal/generated/theming/index.d.ts CHANGED
@@ -230,6 +230,7 @@ export declare interface TypedOverride {
230
230
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
231
231
  colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
232
232
  fontFamilyBase?: GlobalValue;
233
+ fontFamilyHeading?: GlobalValue;
233
234
  fontFamilyMonospace?: GlobalValue;
234
235
  fontSizeBodyM?: GlobalValue;
235
236
  fontSizeBodyS?: GlobalValue;
@@ -512,6 +513,7 @@ export declare interface TypedOverride {
512
513
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
513
514
  colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
514
515
  fontFamilyBase?: GlobalValue;
516
+ fontFamilyHeading?: GlobalValue;
515
517
  fontFamilyMonospace?: GlobalValue;
516
518
  fontSizeBodyM?: GlobalValue;
517
519
  fontSizeBodyS?: GlobalValue;
@@ -794,6 +796,7 @@ export declare interface TypedOverride {
794
796
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
795
797
  colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
796
798
  fontFamilyBase?: GlobalValue;
799
+ fontFamilyHeading?: GlobalValue;
797
800
  fontFamilyMonospace?: GlobalValue;
798
801
  fontSizeBodyM?: GlobalValue;
799
802
  fontSizeBodyS?: GlobalValue;
@@ -1076,6 +1079,7 @@ export declare interface TypedOverride {
1076
1079
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1077
1080
  colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1078
1081
  fontFamilyBase?: GlobalValue;
1082
+ fontFamilyHeading?: GlobalValue;
1079
1083
  fontFamilyMonospace?: GlobalValue;
1080
1084
  fontSizeBodyM?: GlobalValue;
1081
1085
  fontSizeBodyS?: GlobalValue;
@@ -1358,6 +1362,7 @@ export declare interface TypedOverride {
1358
1362
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1359
1363
  colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1360
1364
  fontFamilyBase?: GlobalValue;
1365
+ fontFamilyHeading?: GlobalValue;
1361
1366
  fontFamilyMonospace?: GlobalValue;
1362
1367
  fontSizeBodyM?: GlobalValue;
1363
1368
  fontSizeBodyS?: GlobalValue;
@@ -1640,6 +1645,7 @@ export declare interface TypedOverride {
1640
1645
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1641
1646
  colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1642
1647
  fontFamilyBase?: GlobalValue;
1648
+ fontFamilyHeading?: GlobalValue;
1643
1649
  fontFamilyMonospace?: GlobalValue;
1644
1650
  fontSizeBodyM?: GlobalValue;
1645
1651
  fontSizeBodyS?: GlobalValue;
@@ -1922,6 +1928,7 @@ export declare interface TypedOverride {
1922
1928
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1923
1929
  colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1924
1930
  fontFamilyBase?: GlobalValue;
1931
+ fontFamilyHeading?: GlobalValue;
1925
1932
  fontFamilyMonospace?: GlobalValue;
1926
1933
  fontSizeBodyM?: GlobalValue;
1927
1934
  fontSizeBodyS?: GlobalValue;
@@ -2204,6 +2211,7 @@ export declare interface TypedOverride {
2204
2211
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2205
2212
  colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2206
2213
  fontFamilyBase?: GlobalValue;
2214
+ fontFamilyHeading?: GlobalValue;
2207
2215
  fontFamilyMonospace?: GlobalValue;
2208
2216
  fontSizeBodyM?: GlobalValue;
2209
2217
  fontSizeBodyS?: GlobalValue;
@@ -2486,6 +2494,7 @@ export declare interface TypedOverride {
2486
2494
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2487
2495
  colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2488
2496
  fontFamilyBase?: GlobalValue;
2497
+ fontFamilyHeading?: GlobalValue;
2489
2498
  fontFamilyMonospace?: GlobalValue;
2490
2499
  fontSizeBodyM?: GlobalValue;
2491
2500
  fontSizeBodyS?: GlobalValue;
package/internal/generated/theming/index.js CHANGED
@@ -2261,6 +2261,7 @@ export var preset = {
2261
2261
  "fontDisplayLabelWeight": "700",
2262
2262
  "fontExpandableHeadingSize": "{fontSizeHeadingS}",
2263
2263
  "fontFamilyBase": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
2264
+ "fontFamilyHeading": "{fontFamilyBase}",
2264
2265
  "fontFamilyMonospace": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
2265
2266
  "fontHeaderH2DescriptionLineHeight": "{lineHeightBodyM}",
2266
2267
  "fontHeaderH2DescriptionSize": "{fontSizeBodyM}",
@@ -11731,6 +11732,7 @@ export var preset = {
11731
11732
  "colorDropzoneBorderHover",
11732
11733
  "colorTreeViewConnectorLine",
11733
11734
  "fontFamilyBase",
11735
+ "fontFamilyHeading",
11734
11736
  "fontFamilyMonospace",
11735
11737
  "fontSizeBodyM",
11736
11738
  "fontSizeBodyS",
@@ -12109,6 +12111,7 @@ export var preset = {
12109
12111
  "colorDropzoneBorderHover",
12110
12112
  "colorTreeViewConnectorLine",
12111
12113
  "fontFamilyBase",
12114
+ "fontFamilyHeading",
12112
12115
  "fontFamilyMonospace",
12113
12116
  "fontSizeBodyM",
12114
12117
  "fontSizeBodyS",
@@ -12758,6 +12761,7 @@ export var preset = {
12758
12761
  "fontDisplayLabelWeight": "font-display-label-weight",
12759
12762
  "fontExpandableHeadingSize": "font-expandable-heading-size",
12760
12763
  "fontFamilyBase": "font-family-base",
12764
+ "fontFamilyHeading": "font-family-heading",
12761
12765
  "fontFamilyMonospace": "font-family-monospace",
12762
12766
  "fontHeaderH2DescriptionLineHeight": "font-header-h2-description-line-height",
12763
12767
  "fontHeaderH2DescriptionSize": "font-header-h2-description-size",
@@ -13577,6 +13581,7 @@ export var preset = {
13577
13581
  "fontDisplayLabelWeight": "--font-display-label-weight-zavpeo",
13578
13582
  "fontExpandableHeadingSize": "--font-expandable-heading-size-0uk059",
13579
13583
  "fontFamilyBase": "--font-family-base-gmnpzl",
13584
+ "fontFamilyHeading": "--font-family-heading-ugphat",
13580
13585
  "fontFamilyMonospace": "--font-family-monospace-q47m7k",
13581
13586
  "fontHeaderH2DescriptionLineHeight": "--font-header-h2-description-line-height-ts2s6o",
13582
13587
  "fontHeaderH2DescriptionSize": "--font-header-h2-description-size-g2wws3",
package/internal/manifest.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "d77e3ef0509a8a0cc86fb038f100072e8a875646"
2
+ "commit": "0a2f72aec4ed1a1916aef9ef2d52dbd1e213d058"
3
3
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloudscape-design/chat-components",
3
- "version": "1.0.96",
3
+ "version": "1.0.98",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/cloudscape-design/chat-components.git"
package/support-prompt-group/interfaces.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { IconProps } from "@cloudscape-design/components/icon";
1
2
  import { ClickDetail as _ClickDetail, NonCancelableEventHandler } from "../internal/events";
2
3
  export interface SupportPromptGroupProps {
3
4
  /**
@@ -9,6 +10,11 @@ export interface SupportPromptGroupProps {
9
10
  * Each item has the following properties:
10
11
  * - text: The text of the support prompt.
11
12
  * - id: The ID of the support prompt.
13
+ * - iconName (optional): The name of a built-in icon to display.
14
+ * - iconSvg (optional): A custom SVG icon to display. Takes precedence over iconName.
15
+ * - iconPosition (optional): Position of the icon relative to text. Can be "left" (default) or "right".
16
+ * - iconVerticalAlignment (optional): Vertical alignment of the icon. Can be "center", "start" (default), or "end".
17
+ * - ariaLabel (optional): Custom accessible label for the prompt.
12
18
  **/
13
19
  items: ReadonlyArray<SupportPromptGroupProps.Item>;
14
20
  /**
@@ -26,6 +32,11 @@ export declare namespace SupportPromptGroupProps {
26
32
  interface Item {
27
33
  text: string;
28
34
  id: string;
35
+ iconName?: IconProps.Name;
36
+ iconSvg?: React.ReactNode;
37
+ iconPosition?: "left" | "right";
38
+ iconVerticalAlignment?: "center" | "start" | "end";
39
+ ariaLabel?: string;
29
40
  }
30
41
  interface ItemClickDetail extends _ClickDetail {
31
42
  id: string;
package/support-prompt-group/interfaces.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/support-prompt-group/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { ClickDetail as _ClickDetail, NonCancelableEventHandler } from \"../internal/events\";\n\nexport interface SupportPromptGroupProps {\n /**\n * Alignment of the prompts. Defaults to `vertical`.\n **/\n alignment?: SupportPromptGroupProps.Alignment;\n\n /**\n * An array of objects representing support prompts.\n * Each item has the following properties:\n * - text: The text of the support prompt.\n * - id: The ID of the support prompt.\n **/\n items: ReadonlyArray<SupportPromptGroupProps.Item>;\n\n /**\n * Called when the user clicks on a support prompt. The event detail object contains the ID of the clicked item.\n */\n onItemClick: NonCancelableEventHandler<SupportPromptGroupProps.ItemClickDetail>;\n\n /**\n * Adds an aria label to the support prompt group.\n * Use this to provide a unique accessible name for each support prompt group on the page.\n */\n ariaLabel: string;\n}\n\nexport namespace SupportPromptGroupProps {\n export type Alignment = \"vertical\" | \"horizontal\";\n\n export interface Item {\n text: string;\n id: string;\n }\n\n export interface ItemClickDetail extends _ClickDetail {\n id: string;\n }\n\n export interface Ref {\n /**\n * Focuses support prompt group item by ID.\n */\n focus(itemId: string): void;\n }\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/support-prompt-group/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { IconProps } from \"@cloudscape-design/components/icon\";\n\nimport { ClickDetail as _ClickDetail, NonCancelableEventHandler } from \"../internal/events\";\n\nexport interface SupportPromptGroupProps {\n /**\n * Alignment of the prompts. Defaults to `vertical`.\n **/\n alignment?: SupportPromptGroupProps.Alignment;\n\n /**\n * An array of objects representing support prompts.\n * Each item has the following properties:\n * - text: The text of the support prompt.\n * - id: The ID of the support prompt.\n * - iconName (optional): The name of a built-in icon to display.\n * - iconSvg (optional): A custom SVG icon to display. Takes precedence over iconName.\n * - iconPosition (optional): Position of the icon relative to text. Can be \"left\" (default) or \"right\".\n * - iconVerticalAlignment (optional): Vertical alignment of the icon. Can be \"center\", \"start\" (default), or \"end\".\n * - ariaLabel (optional): Custom accessible label for the prompt.\n **/\n items: ReadonlyArray<SupportPromptGroupProps.Item>;\n\n /**\n * Called when the user clicks on a support prompt. The event detail object contains the ID of the clicked item.\n */\n onItemClick: NonCancelableEventHandler<SupportPromptGroupProps.ItemClickDetail>;\n\n /**\n * Adds an aria label to the support prompt group.\n * Use this to provide a unique accessible name for each support prompt group on the page.\n */\n ariaLabel: string;\n}\n\nexport namespace SupportPromptGroupProps {\n export type Alignment = \"vertical\" | \"horizontal\";\n\n export interface Item {\n text: string;\n id: string;\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n iconPosition?: \"left\" | \"right\";\n iconVerticalAlignment?: \"center\" | \"start\" | \"end\";\n ariaLabel?: string;\n }\n\n export interface ItemClickDetail extends _ClickDetail {\n id: string;\n }\n\n export interface Ref {\n /**\n * Focuses support prompt group item by ID.\n */\n focus(itemId: string): void;\n }\n}\n"]}
package/support-prompt-group/internal.js CHANGED
@@ -96,7 +96,7 @@ export const InternalSupportPromptGroup = forwardRef(({ alignment = "vertical",
96
96
  return _jsx("div", {});
97
97
  }
98
98
  return (_jsx("div", { ...getDataAttributes(rest), role: "menubar", className: clsx(styles.root, { [styles.vertical]: alignment !== "horizontal" }), "aria-label": ariaLabel, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, ref: mergedRef, children: _jsx(SingleTabStopNavigationProvider, { ref: navigationAPI, navigationActive: true, getNextFocusTarget: () => getNextFocusTarget(containerObjectRef, focusedIdRef), onUnregisterActive: (element) => onUnregisterActive(element, navigationAPI), children: items.map((item, index) => {
99
- return (_jsx(Prompt, { onClick: (event) => handleClick(event, item.id), id: item.id, ref: (element) => (itemsRef.current[item.id] = element), children: item.text }, index));
99
+ return (_jsx(Prompt, { onClick: (event) => handleClick(event, item.id), id: item.id, ref: (element) => (itemsRef.current[item.id] = element), iconName: item.iconName, iconSvg: item.iconSvg, iconPosition: item.iconPosition, iconVerticalAlignment: item.iconVerticalAlignment, ariaLabel: item.ariaLabel, children: item.text }, index));
100
100
  }) }) }));
101
101
  });
102
102
  //# sourceMappingURL=internal.js.map
package/support-prompt-group/internal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/support-prompt-group/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 { forwardRef, Ref, useEffect, useImperativeHandle, useRef } from \"react\";\nimport clsx from \"clsx\";\n\nimport {\n circleIndex,\n getAllFocusables,\n handleKey,\n KeyCode,\n SingleTabStopNavigationAPI,\n SingleTabStopNavigationProvider,\n useMergeRefs,\n warnOnce,\n} from \"@cloudscape-design/component-toolkit/internal\";\n\nimport { getDataAttributes } from \"../internal/base-component/get-data-attributes\";\nimport { InternalBaseComponentProps } from \"../internal/base-component/use-base-component\";\nimport { fireNonCancelableEvent } from \"../internal/events\";\nimport { getNextFocusTarget, onUnregisterActive } from \"./focus-helpers\";\nimport { SupportPromptGroupProps } from \"./interfaces\";\nimport { Prompt } from \"./prompt\";\n\nimport styles from \"./styles.css.js\";\n\nexport const InternalSupportPromptGroup = forwardRef(\n (\n {\n alignment = \"vertical\",\n onItemClick,\n items,\n __internalRootRef,\n ariaLabel,\n ...rest\n }: SupportPromptGroupProps & InternalBaseComponentProps,\n ref: Ref<SupportPromptGroupProps.Ref>,\n ) => {\n const focusedIdRef = useRef<null | string>(null);\n const navigationAPI = useRef<SingleTabStopNavigationAPI>(null);\n const containerObjectRef = useRef<HTMLDivElement>(null);\n const itemsRef = useRef<Record<string, any | null>>({});\n\n const mergedRef = useMergeRefs(containerObjectRef, __internalRootRef);\n\n useImperativeHandle(ref, () => ({\n focus: (id) => {\n if (!itemsRef.current[id]) {\n warnOnce(\"SupportPromptGroup\", \"No matching ID found to focus.\");\n }\n itemsRef.current[id]?.focus();\n },\n }));\n\n const handleClick = (event: React.MouseEvent, id: string) => {\n const { altKey, button, ctrlKey, metaKey, shiftKey } = event;\n\n fireNonCancelableEvent(onItemClick, { id, altKey, button, ctrlKey, metaKey, shiftKey });\n };\n\n useEffect(() => {\n navigationAPI.current?.updateFocusTarget();\n });\n\n function onFocus(event: React.FocusEvent) {\n if (event.target instanceof HTMLElement && event.target.dataset.itemid) {\n focusedIdRef.current = event.target.dataset.itemid;\n }\n\n navigationAPI.current?.updateFocusTarget();\n }\n\n function onBlur() {\n navigationAPI.current?.updateFocusTarget();\n }\n\n function onKeyDown(event: React.KeyboardEvent) {\n const focusTarget = navigationAPI.current?.getFocusTarget();\n const specialKeys = [\n KeyCode.right,\n KeyCode.left,\n KeyCode.up,\n KeyCode.down,\n KeyCode.end,\n KeyCode.home,\n KeyCode.pageUp,\n KeyCode.pageDown,\n ];\n\n const hasModifierKeys = (event: React.MouseEvent | React.KeyboardEvent) => {\n return event.ctrlKey || event.altKey || event.shiftKey || event.metaKey;\n };\n\n if (hasModifierKeys(event) || !specialKeys.includes(event.keyCode)) {\n return;\n }\n if (!containerObjectRef.current || !focusTarget) {\n return;\n }\n // Ignore navigation when the focused element is not an item.\n if (document.activeElement && !document.activeElement.matches(`.${styles[\"support-prompt\"]}`)) {\n return;\n }\n event.preventDefault();\n\n const focusables = getFocusablesFrom(containerObjectRef.current);\n const activeIndex = focusables.indexOf(focusTarget);\n handleKey(event as any, {\n onHome: () => focusElement(focusables[0]),\n onEnd: () => focusElement(focusables[focusables.length - 1]),\n onInlineStart: () => focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),\n onInlineEnd: () => focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),\n onBlockStart: () => focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),\n onBlockEnd: () => focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),\n });\n }\n\n function focusElement(element: HTMLElement) {\n element.focus();\n }\n\n // List all non-disabled and registered focusables: those are eligible for keyboard navigation.\n function getFocusablesFrom(target: HTMLElement) {\n function isElementRegistered(element: HTMLElement) {\n return navigationAPI.current?.isRegistered(element) ?? false;\n }\n\n return getAllFocusables(target).filter((el) => isElementRegistered(el));\n }\n\n if (!items || items.length === 0) {\n return <div />;\n }\n\n return (\n <div\n {...getDataAttributes(rest)}\n role=\"menubar\"\n className={clsx(styles.root, { [styles.vertical]: alignment !== \"horizontal\" })}\n aria-label={ariaLabel}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n ref={mergedRef}\n >\n <SingleTabStopNavigationProvider\n ref={navigationAPI}\n navigationActive={true}\n getNextFocusTarget={() => getNextFocusTarget(containerObjectRef, focusedIdRef)}\n onUnregisterActive={(element: HTMLElement) => onUnregisterActive(element, navigationAPI)}\n >\n {items.map((item, index) => {\n return (\n <Prompt\n key={index}\n onClick={(event) => handleClick(event, item.id)}\n id={item.id}\n ref={(element) => (itemsRef.current[item.id] = element)}\n >\n {item.text}\n </Prompt>\n );\n })}\n </SingleTabStopNavigationProvider>\n </div>\n );\n },\n);\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/support-prompt-group/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 { forwardRef, Ref, useEffect, useImperativeHandle, useRef } from \"react\";\nimport clsx from \"clsx\";\n\nimport {\n circleIndex,\n getAllFocusables,\n handleKey,\n KeyCode,\n SingleTabStopNavigationAPI,\n SingleTabStopNavigationProvider,\n useMergeRefs,\n warnOnce,\n} from \"@cloudscape-design/component-toolkit/internal\";\n\nimport { getDataAttributes } from \"../internal/base-component/get-data-attributes\";\nimport { InternalBaseComponentProps } from \"../internal/base-component/use-base-component\";\nimport { fireNonCancelableEvent } from \"../internal/events\";\nimport { getNextFocusTarget, onUnregisterActive } from \"./focus-helpers\";\nimport { SupportPromptGroupProps } from \"./interfaces\";\nimport { Prompt } from \"./prompt\";\n\nimport styles from \"./styles.css.js\";\n\nexport const InternalSupportPromptGroup = forwardRef(\n (\n {\n alignment = \"vertical\",\n onItemClick,\n items,\n __internalRootRef,\n ariaLabel,\n ...rest\n }: SupportPromptGroupProps & InternalBaseComponentProps,\n ref: Ref<SupportPromptGroupProps.Ref>,\n ) => {\n const focusedIdRef = useRef<null | string>(null);\n const navigationAPI = useRef<SingleTabStopNavigationAPI>(null);\n const containerObjectRef = useRef<HTMLDivElement>(null);\n const itemsRef = useRef<Record<string, any | null>>({});\n\n const mergedRef = useMergeRefs(containerObjectRef, __internalRootRef);\n\n useImperativeHandle(ref, () => ({\n focus: (id) => {\n if (!itemsRef.current[id]) {\n warnOnce(\"SupportPromptGroup\", \"No matching ID found to focus.\");\n }\n itemsRef.current[id]?.focus();\n },\n }));\n\n const handleClick = (event: React.MouseEvent, id: string) => {\n const { altKey, button, ctrlKey, metaKey, shiftKey } = event;\n\n fireNonCancelableEvent(onItemClick, { id, altKey, button, ctrlKey, metaKey, shiftKey });\n };\n\n useEffect(() => {\n navigationAPI.current?.updateFocusTarget();\n });\n\n function onFocus(event: React.FocusEvent) {\n if (event.target instanceof HTMLElement && event.target.dataset.itemid) {\n focusedIdRef.current = event.target.dataset.itemid;\n }\n\n navigationAPI.current?.updateFocusTarget();\n }\n\n function onBlur() {\n navigationAPI.current?.updateFocusTarget();\n }\n\n function onKeyDown(event: React.KeyboardEvent) {\n const focusTarget = navigationAPI.current?.getFocusTarget();\n const specialKeys = [\n KeyCode.right,\n KeyCode.left,\n KeyCode.up,\n KeyCode.down,\n KeyCode.end,\n KeyCode.home,\n KeyCode.pageUp,\n KeyCode.pageDown,\n ];\n\n const hasModifierKeys = (event: React.MouseEvent | React.KeyboardEvent) => {\n return event.ctrlKey || event.altKey || event.shiftKey || event.metaKey;\n };\n\n if (hasModifierKeys(event) || !specialKeys.includes(event.keyCode)) {\n return;\n }\n if (!containerObjectRef.current || !focusTarget) {\n return;\n }\n // Ignore navigation when the focused element is not an item.\n if (document.activeElement && !document.activeElement.matches(`.${styles[\"support-prompt\"]}`)) {\n return;\n }\n event.preventDefault();\n\n const focusables = getFocusablesFrom(containerObjectRef.current);\n const activeIndex = focusables.indexOf(focusTarget);\n handleKey(event as any, {\n onHome: () => focusElement(focusables[0]),\n onEnd: () => focusElement(focusables[focusables.length - 1]),\n onInlineStart: () => focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),\n onInlineEnd: () => focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),\n onBlockStart: () => focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),\n onBlockEnd: () => focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),\n });\n }\n\n function focusElement(element: HTMLElement) {\n element.focus();\n }\n\n // List all non-disabled and registered focusables: those are eligible for keyboard navigation.\n function getFocusablesFrom(target: HTMLElement) {\n function isElementRegistered(element: HTMLElement) {\n return navigationAPI.current?.isRegistered(element) ?? false;\n }\n\n return getAllFocusables(target).filter((el) => isElementRegistered(el));\n }\n\n if (!items || items.length === 0) {\n return <div />;\n }\n\n return (\n <div\n {...getDataAttributes(rest)}\n role=\"menubar\"\n className={clsx(styles.root, { [styles.vertical]: alignment !== \"horizontal\" })}\n aria-label={ariaLabel}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n ref={mergedRef}\n >\n <SingleTabStopNavigationProvider\n ref={navigationAPI}\n navigationActive={true}\n getNextFocusTarget={() => getNextFocusTarget(containerObjectRef, focusedIdRef)}\n onUnregisterActive={(element: HTMLElement) => onUnregisterActive(element, navigationAPI)}\n >\n {items.map((item, index) => {\n return (\n <Prompt\n key={index}\n onClick={(event) => handleClick(event, item.id)}\n id={item.id}\n ref={(element) => (itemsRef.current[item.id] = element)}\n iconName={item.iconName}\n iconSvg={item.iconSvg}\n iconPosition={item.iconPosition}\n iconVerticalAlignment={item.iconVerticalAlignment}\n ariaLabel={item.ariaLabel}\n >\n {item.text}\n </Prompt>\n );\n })}\n </SingleTabStopNavigationProvider>\n </div>\n );\n },\n);\n"]}
package/support-prompt-group/prompt.d.ts CHANGED
@@ -1,6 +1,12 @@
1
+ import { IconProps } from "@cloudscape-design/components/icon";
1
2
  export interface PromptProps {
2
3
  children: string;
3
4
  id: string;
4
5
  onClick: (event: React.MouseEvent, id: string) => void;
6
+ iconName?: IconProps.Name;
7
+ iconSvg?: React.ReactNode;
8
+ iconPosition?: "left" | "right";
9
+ iconVerticalAlignment?: "center" | "start" | "end";
10
+ ariaLabel?: string;
5
11
  }
6
12
  export declare const Prompt: import("react").ForwardRefExoticComponent<PromptProps & import("react").RefAttributes<HTMLButtonElement>>;
package/support-prompt-group/prompt.js CHANGED
@@ -1,17 +1,26 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3
3
  // SPDX-License-Identifier: Apache-2.0
4
4
  import { forwardRef, useRef } from "react";
5
5
  import clsx from "clsx";
6
6
  import { useSingleTabStopNavigation } from "@cloudscape-design/component-toolkit/internal";
7
+ import Icon from "@cloudscape-design/components/icon";
7
8
  import useForwardFocus from "../internal/utils/use-forward-focus";
8
9
  import styles from "./styles.css.js";
9
- export const Prompt = forwardRef(({ children, id, onClick }, ref) => {
10
+ export const Prompt = forwardRef(({ children, id, onClick, iconName, iconSvg, iconPosition = "left", iconVerticalAlignment = "start", ariaLabel, }, ref) => {
10
11
  const buttonRef = useRef(null);
11
12
  useForwardFocus(ref, buttonRef);
12
13
  const { tabIndex } = useSingleTabStopNavigation(buttonRef);
13
- return (_jsx("button", { role: "menuitem", tabIndex: tabIndex, ref: buttonRef, onClick: (event) => {
14
+ // Helper function to conditionally render the icon
15
+ // iconSvg takes precedence over iconName
16
+ const renderIcon = () => {
17
+ if (!iconSvg && !iconName) {
18
+ return null;
19
+ }
20
+ return (_jsx("span", { className: clsx(styles["support-prompt-icon"], styles[`icon-align-${iconVerticalAlignment}`]), children: _jsx(Icon, { name: iconName, svg: iconSvg, size: "inherit" }) }));
21
+ };
22
+ return (_jsxs("button", { role: "menuitem", tabIndex: tabIndex, ref: buttonRef, onClick: (event) => {
14
23
  onClick(event, id);
15
- }, id: id, "data-testid": id, "data-itemid": id, className: clsx(styles["support-prompt"]), children: children }));
24
+ }, id: id, "data-testid": id, "data-itemid": id, className: clsx(styles["support-prompt"]), "aria-label": ariaLabel, children: [iconPosition !== "right" && renderIcon(), _jsx("span", { className: styles["support-prompt-text"], children: children }), iconPosition === "right" && renderIcon()] }));
16
25
  });
17
26
  //# sourceMappingURL=prompt.js.map
package/support-prompt-group/prompt.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"prompt.js","sourceRoot":"","sources":["../../../src/support-prompt-group/prompt.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAO,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAE3F,OAAO,eAAe,MAAM,qCAAqC,CAAC;AAElE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAe,EAAE,GAAkC,EAAE,EAAE;IAC9G,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,eAAe,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;IAEhC,MAAM,EAAE,QAAQ,EAAE,GAAG,0BAA0B,CAAC,SAAS,CAAC,CAAC;IAE3D,OAAO,CACL,iBACE,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACrB,CAAC,EACD,EAAE,EAAE,EAAE,iBACO,EAAE,iBACF,EAAE,EACf,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,YAExC,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { forwardRef, Ref, useRef } from \"react\";\nimport clsx from \"clsx\";\n\nimport { useSingleTabStopNavigation } from \"@cloudscape-design/component-toolkit/internal\";\n\nimport useForwardFocus from \"../internal/utils/use-forward-focus\";\n\nimport styles from \"./styles.css.js\";\n\nexport interface PromptProps {\n children: string;\n id: string;\n onClick: (event: React.MouseEvent, id: string) => void;\n}\n\nexport const Prompt = forwardRef(({ children, id, onClick }: PromptProps, ref: Ref<HTMLButtonElement | null>) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n useForwardFocus(ref, buttonRef);\n\n const { tabIndex } = useSingleTabStopNavigation(buttonRef);\n\n return (\n <button\n role=\"menuitem\"\n tabIndex={tabIndex}\n ref={buttonRef}\n onClick={(event) => {\n onClick(event, id);\n }}\n id={id}\n data-testid={id}\n data-itemid={id}\n className={clsx(styles[\"support-prompt\"])}\n >\n {children}\n </button>\n );\n});\n"]}
1
+ {"version":3,"file":"prompt.js","sourceRoot":"","sources":["../../../src/support-prompt-group/prompt.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAO,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAC3F,OAAO,IAAmB,MAAM,oCAAoC,CAAC;AAErE,OAAO,eAAe,MAAM,qCAAqC,CAAC;AAElE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAarC,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,QAAQ,EACR,EAAE,EACF,OAAO,EACP,QAAQ,EACR,OAAO,EACP,YAAY,GAAG,MAAM,EACrB,qBAAqB,GAAG,OAAO,EAC/B,SAAS,GACG,EACd,GAAkC,EAClC,EAAE;IACF,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,eAAe,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;IAEhC,MAAM,EAAE,QAAQ,EAAE,GAAG,0BAA0B,CAAC,SAAS,CAAC,CAAC;IAE3D,mDAAmD;IACnD,yCAAyC;IACzC,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;YACzB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,CACL,eAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,EAAE,MAAM,CAAC,cAAc,qBAAqB,EAAE,CAAC,CAAC,YACjG,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAC,SAAS,GAAG,GAChD,CACR,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,kBACE,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACrB,CAAC,EACD,EAAE,EAAE,EAAE,iBACO,EAAE,iBACF,EAAE,EACf,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,gBAC7B,SAAS,aAEpB,YAAY,KAAK,OAAO,IAAI,UAAU,EAAE,EACzC,eAAM,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC,YAAG,QAAQ,GAAQ,EAChE,YAAY,KAAK,OAAO,IAAI,UAAU,EAAE,IAClC,CACV,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { forwardRef, Ref, useRef } from \"react\";\nimport clsx from \"clsx\";\n\nimport { useSingleTabStopNavigation } from \"@cloudscape-design/component-toolkit/internal\";\nimport Icon, { IconProps } from \"@cloudscape-design/components/icon\";\n\nimport useForwardFocus from \"../internal/utils/use-forward-focus\";\n\nimport styles from \"./styles.css.js\";\n\nexport interface PromptProps {\n children: string;\n id: string;\n onClick: (event: React.MouseEvent, id: string) => void;\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n iconPosition?: \"left\" | \"right\";\n iconVerticalAlignment?: \"center\" | \"start\" | \"end\";\n ariaLabel?: string;\n}\n\nexport const Prompt = forwardRef(\n (\n {\n children,\n id,\n onClick,\n iconName,\n iconSvg,\n iconPosition = \"left\",\n iconVerticalAlignment = \"start\",\n ariaLabel,\n }: PromptProps,\n ref: Ref<HTMLButtonElement | null>,\n ) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n useForwardFocus(ref, buttonRef);\n\n const { tabIndex } = useSingleTabStopNavigation(buttonRef);\n\n // Helper function to conditionally render the icon\n // iconSvg takes precedence over iconName\n const renderIcon = () => {\n if (!iconSvg && !iconName) {\n return null;\n }\n\n return (\n <span className={clsx(styles[\"support-prompt-icon\"], styles[`icon-align-${iconVerticalAlignment}`])}>\n <Icon name={iconName} svg={iconSvg} size=\"inherit\" />\n </span>\n );\n };\n\n return (\n <button\n role=\"menuitem\"\n tabIndex={tabIndex}\n ref={buttonRef}\n onClick={(event) => {\n onClick(event, id);\n }}\n id={id}\n data-testid={id}\n data-itemid={id}\n className={clsx(styles[\"support-prompt\"])}\n aria-label={ariaLabel}\n >\n {iconPosition !== \"right\" && renderIcon()}\n <span className={styles[\"support-prompt-text\"]}>{children}</span>\n {iconPosition === \"right\" && renderIcon()}\n </button>\n );\n },\n);\n"]}
package/support-prompt-group/styles.css.js CHANGED
@@ -1,8 +1,13 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "root": "awsui_root_1wevk_mhx5q_11",
5
- "vertical": "awsui_vertical_1wevk_mhx5q_41",
6
- "support-prompt": "awsui_support-prompt_1wevk_mhx5q_45"
4
+ "root": "awsui_root_1wevk_fboqd_11",
5
+ "vertical": "awsui_vertical_1wevk_fboqd_41",
6
+ "support-prompt": "awsui_support-prompt_1wevk_fboqd_45",
7
+ "support-prompt-icon": "awsui_support-prompt-icon_1wevk_fboqd_102",
8
+ "icon-align-center": "awsui_icon-align-center_1wevk_fboqd_106",
9
+ "icon-align-start": "awsui_icon-align-start_1wevk_fboqd_109",
10
+ "icon-align-end": "awsui_icon-align-end_1wevk_fboqd_112",
11
+ "support-prompt-text": "awsui_support-prompt-text_1wevk_fboqd_116"
7
12
  };
8
13
 
package/support-prompt-group/styles.scoped.css CHANGED
@@ -8,7 +8,7 @@
8
8
  */
9
9
  /* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
10
10
  /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
11
- .awsui_root_1wevk_mhx5q_11:not(#\9) {
11
+ .awsui_root_1wevk_fboqd_11:not(#\9) {
12
12
  border-collapse: separate;
13
13
  border-spacing: 0;
14
14
  box-sizing: border-box;
@@ -38,12 +38,15 @@
38
38
  flex-wrap: wrap;
39
39
  gap: var(--space-scaled-xs-xwoogq, 8px);
40
40
  }
41
- .awsui_root_1wevk_mhx5q_11.awsui_vertical_1wevk_mhx5q_41:not(#\9) {
41
+ .awsui_root_1wevk_fboqd_11.awsui_vertical_1wevk_fboqd_41:not(#\9) {
42
42
  flex-direction: column;
43
43
  }
44
44
 
45
- .awsui_support-prompt_1wevk_mhx5q_45:not(#\9) {
45
+ .awsui_support-prompt_1wevk_fboqd_45:not(#\9) {
46
46
  cursor: pointer;
47
+ display: inline-flex;
48
+ align-items: center;
49
+ gap: var(--space-scaled-xs-xwoogq, 8px);
47
50
  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
48
51
  font-size: var(--font-size-body-m-a7nh2n, 14px);
49
52
  line-height: var(--line-height-heading-m-uoaqdh, 22px);
@@ -60,26 +63,26 @@
60
63
  border-end-end-radius: var(--space-static-xs-gnm0mz, 8px);
61
64
  inline-size: fit-content;
62
65
  }
63
- .awsui_support-prompt_1wevk_mhx5q_45:not(#\9):hover {
66
+ .awsui_support-prompt_1wevk_fboqd_45:not(#\9):hover {
64
67
  color: var(--color-text-button-normal-hover-gusgyv, #002b66);
65
68
  background: var(--color-background-button-normal-hover-53op9s, #f0fbff);
66
69
  border-color: var(--color-border-button-normal-hover-6a2tdq, #002b66);
67
70
  }
68
- .awsui_support-prompt_1wevk_mhx5q_45:not(#\9):active {
71
+ .awsui_support-prompt_1wevk_fboqd_45:not(#\9):active {
69
72
  color: var(--color-text-button-normal-active-vihsxh, #002b66);
70
73
  background: var(--color-background-button-normal-active-5imwxd, #d1f1ff);
71
74
  border-color: var(--color-border-button-normal-active-ru7yhb, #002b66);
72
75
  }
73
- .awsui_support-prompt_1wevk_mhx5q_45:not(#\9):focus {
76
+ .awsui_support-prompt_1wevk_fboqd_45:not(#\9):focus {
74
77
  outline: none;
75
78
  }
76
- .awsui_support-prompt_1wevk_mhx5q_45:not(#\9):focus-visible {
79
+ .awsui_support-prompt_1wevk_fboqd_45:not(#\9):focus-visible {
77
80
  position: relative;
78
81
  box-sizing: border-box;
79
82
  outline: 2px dotted transparent;
80
83
  outline-offset: 5px;
81
84
  }
82
- .awsui_support-prompt_1wevk_mhx5q_45:not(#\9):focus-visible::before {
85
+ .awsui_support-prompt_1wevk_fboqd_45:not(#\9):focus-visible::before {
83
86
  content: " ";
84
87
  display: block;
85
88
  position: absolute;
@@ -94,4 +97,22 @@
94
97
  border-end-end-radius: 6px;
95
98
  border-block: 2px solid var(--color-border-item-focused-uk47pl, #006ce0);
96
99
  border-inline: 2px solid var(--color-border-item-focused-uk47pl, #006ce0);
100
+ }
101
+
102
+ .awsui_support-prompt-icon_1wevk_fboqd_102:not(#\9) {
103
+ display: inline-flex;
104
+ flex-shrink: 0;
105
+ }
106
+ .awsui_support-prompt-icon_1wevk_fboqd_102.awsui_icon-align-center_1wevk_fboqd_106:not(#\9) {
107
+ align-self: center;
108
+ }
109
+ .awsui_support-prompt-icon_1wevk_fboqd_102.awsui_icon-align-start_1wevk_fboqd_109:not(#\9) {
110
+ align-self: flex-start;
111
+ }
112
+ .awsui_support-prompt-icon_1wevk_fboqd_102.awsui_icon-align-end_1wevk_fboqd_112:not(#\9) {
113
+ align-self: flex-end;
114
+ }
115
+
116
+ .awsui_support-prompt-text_1wevk_fboqd_116:not(#\9) {
117
+ display: inline-flex;
97
118
  }
package/support-prompt-group/styles.selectors.js CHANGED
@@ -2,8 +2,13 @@
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_1wevk_mhx5q_11",
6
- "vertical": "awsui_vertical_1wevk_mhx5q_41",
7
- "support-prompt": "awsui_support-prompt_1wevk_mhx5q_45"
5
+ "root": "awsui_root_1wevk_fboqd_11",
6
+ "vertical": "awsui_vertical_1wevk_fboqd_41",
7
+ "support-prompt": "awsui_support-prompt_1wevk_fboqd_45",
8
+ "support-prompt-icon": "awsui_support-prompt-icon_1wevk_fboqd_102",
9
+ "icon-align-center": "awsui_icon-align-center_1wevk_fboqd_106",
10
+ "icon-align-start": "awsui_icon-align-start_1wevk_fboqd_109",
11
+ "icon-align-end": "awsui_icon-align-end_1wevk_fboqd_112",
12
+ "support-prompt-text": "awsui_support-prompt-text_1wevk_fboqd_116"
8
13
  };
9
14