@cloudscape-design/chat-components 1.0.46 → 1.0.48
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/avatar/internal.js +2 -5
- package/avatar/internal.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/support-prompt-group/internal.js +2 -5
- package/support-prompt-group/internal.js.map +1 -1
- package/internal/utils/use-merge-refs.d.ts +0 -9
- package/internal/utils/use-merge-refs.js +0 -30
- package/internal/utils/use-merge-refs.js.map +0 -1
package/avatar/internal.js
CHANGED
|
@@ -3,12 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
4
|
import { useRef, useState } from "react";
|
|
5
5
|
import clsx from "clsx";
|
|
6
|
-
import { warnOnce } from "@cloudscape-design/component-toolkit/internal";
|
|
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
9
|
import * as awsui from "@cloudscape-design/design-tokens";
|
|
10
10
|
import { getDataAttributes } from "../internal/base-component/get-data-attributes";
|
|
11
|
-
import { useMergeRefs } from "../internal/utils/use-merge-refs";
|
|
12
11
|
import LoadingDots from "./loading-dots";
|
|
13
12
|
import styles from "./styles.css.js";
|
|
14
13
|
const AvatarContent = ({ color, loading, initials, iconName, iconSvg, iconUrl, ariaLabel, width, imgUrl, }) => {
|
|
@@ -52,9 +51,7 @@ export default function InternalAvatar({ color, tooltipText, initials, loading =
|
|
|
52
51
|
setShowTooltip(false);
|
|
53
52
|
},
|
|
54
53
|
};
|
|
55
|
-
return (_jsxs("div", { ...getDataAttributes(rest), ref: mergedRef, tabIndex: 0, className: clsx(styles.root, styles[`avatar-color-${color}`], {
|
|
56
|
-
[styles.initials]: initials,
|
|
57
|
-
}), 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: { height: computedSize, width: computedSize }, children: [showTooltip && tooltipText && (_jsx(Tooltip, { value: tooltipText, trackRef: handleRef,
|
|
58
55
|
// This is added to ensure tooltip is closed when clicked for consistency with other tooltip usages
|
|
59
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 }) })] }));
|
|
60
57
|
}
|
package/avatar/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/avatar/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/avatar/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AACvF,OAAO,IAAI,MAAM,oCAAoC,CAAC;AACtD,OAAO,OAAO,MAAM,2DAA2D,CAAC;AAChF,OAAO,KAAK,KAAK,MAAM,kCAAkC,CAAC;AAE1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAGnF,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,aAAa,GAAG,CAAC,EACrB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,KAAK,EACL,MAAM,GACM,EAAE,EAAE;IAChB,IAAI,OAAO,EAAE;QACX,OAAO,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;KACpD;IAED,IAAI,MAAM,EAAE;QACV,OAAO,cAAK,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAI,CAAC;KAC9F;IAED,IAAI,QAAQ,EAAE;QACZ,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAEtE,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;YACvB,QAAQ,CAAC,QAAQ,EAAE,kFAAkF,CAAC,CAAC;SACxG;QAED,OAAO,CACL,eAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,KAAK,CAAC,aAAa,kBAAkB,KAAK,mBAAmB,KAAK,IAAI,EAAE,YACvG,OAAO,GACH,CACR,CAAC;KACH;IAED,OAAO,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAC,SAAS,GAAG,CAAC;AAC7F,CAAC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAO,EACP,MAAM,EACN,KAAK,GAAG,EAAE,EACV,iBAAiB,GAAG,IAAI,EACxB,GAAG,IAAI,EACa;IACpB,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;IAC7D,MAAM,YAAY,GAAG,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;IAE7C,MAAM,iBAAiB,GAAG;QACxB,OAAO,EAAE,GAAG,EAAE;YACZ,cAAc,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC;QACD,MAAM,EAAE,GAAG,EAAE;YACX,cAAc,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;QACD,YAAY,EAAE,GAAG,EAAE;YACjB,cAAc,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC;QACD,YAAY,EAAE,GAAG,EAAE;YACjB,cAAc,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;QACD,YAAY,EAAE,GAAG,EAAE;YACjB,cAAc,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC;QACD,UAAU,EAAE,GAAG,EAAE;YACf,cAAc,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;KACF,CAAC;IAEF,OAAO,CACL,kBACM,iBAAiB,CAAC,IAAI,CAAC,EAC3B,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,gBAAgB,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,EAC9F,IAAI,EAAC,KAAK,gBACE,SAAS,KACjB,iBAAiB,EACrB,KAAK,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,aAEnD,WAAW,IAAI,WAAW,IAAI,CAC7B,KAAC,OAAO,IACN,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,SAAS;gBACnB,mGAAmG;gBACnG,iBAAiB,EAAE,EAAE,aAAa,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,GACjE,CACH,EAID,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,iBAAc,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,eAAe,YAAY,GAAG,EAAE,YACtG,KAAC,aAAa,IACZ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,YAAY,GACnB,GACE,IACF,CACP,CAAC;AACJ,CAAC","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"]}
|
package/internal/environment.js
CHANGED
package/internal/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -3,10 +3,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
4
|
import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
|
|
5
5
|
import clsx from "clsx";
|
|
6
|
-
import { circleIndex, getAllFocusables, handleKey, KeyCode, SingleTabStopNavigationProvider, warnOnce, } from "@cloudscape-design/component-toolkit/internal";
|
|
6
|
+
import { circleIndex, getAllFocusables, handleKey, KeyCode, SingleTabStopNavigationProvider, useMergeRefs, warnOnce, } from "@cloudscape-design/component-toolkit/internal";
|
|
7
7
|
import { getDataAttributes } from "../internal/base-component/get-data-attributes";
|
|
8
8
|
import { fireNonCancelableEvent } from "../internal/events";
|
|
9
|
-
import { useMergeRefs } from "../internal/utils/use-merge-refs";
|
|
10
9
|
import { getNextFocusTarget, onUnregisterActive } from "./focus-helpers";
|
|
11
10
|
import { Prompt } from "./prompt";
|
|
12
11
|
import styles from "./styles.css.js";
|
|
@@ -96,9 +95,7 @@ export const InternalSupportPromptGroup = forwardRef(({ alignment = "vertical",
|
|
|
96
95
|
if (!items || items.length === 0) {
|
|
97
96
|
return _jsx("div", {});
|
|
98
97
|
}
|
|
99
|
-
return (_jsx("div", { ...getDataAttributes(rest), role: "menubar", className: clsx(styles.root, {
|
|
100
|
-
[styles.vertical]: alignment !== "horizontal",
|
|
101
|
-
}), "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) => {
|
|
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) => {
|
|
102
99
|
return (_jsx(Prompt, { onClick: (event) => handleClick(event, item.id), id: item.id, ref: (element) => (itemsRef.current[item.id] = element), children: item.text }, index));
|
|
103
100
|
}) }) }));
|
|
104
101
|
});
|
|
@@ -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 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 { useMergeRefs } from \"../internal/utils/use-merge-refs\";\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, {\n [styles.vertical]: alignment !== \"horizontal\",\n })}\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 >\n {item.text}\n </Prompt>\n );\n })}\n </SingleTabStopNavigationProvider>\n </div>\n );\n },\n);\n"]}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { MutableRefObject, RefCallback } from "react";
|
|
2
|
-
/**
|
|
3
|
-
* useMergeRefs merges multiple refs into a single ref callback.
|
|
4
|
-
*
|
|
5
|
-
* For example:
|
|
6
|
-
* const mergedRef = useMergeRefs(ref1, ref2, ref3)
|
|
7
|
-
* <div ref={refs}>...</div>
|
|
8
|
-
*/
|
|
9
|
-
export declare function useMergeRefs(...refs: Array<RefCallback<any> | MutableRefObject<any> | null | undefined>): ((value: any) => void) | null;
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
-
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import { useMemo } from "react";
|
|
4
|
-
/**
|
|
5
|
-
* useMergeRefs merges multiple refs into a single ref callback.
|
|
6
|
-
*
|
|
7
|
-
* For example:
|
|
8
|
-
* const mergedRef = useMergeRefs(ref1, ref2, ref3)
|
|
9
|
-
* <div ref={refs}>...</div>
|
|
10
|
-
*/
|
|
11
|
-
export function useMergeRefs(...refs) {
|
|
12
|
-
return useMemo(() => {
|
|
13
|
-
if (refs.every((ref) => ref === null || ref === undefined)) {
|
|
14
|
-
return null;
|
|
15
|
-
}
|
|
16
|
-
return (value) => {
|
|
17
|
-
refs.forEach((ref) => {
|
|
18
|
-
if (typeof ref === "function") {
|
|
19
|
-
ref(value);
|
|
20
|
-
}
|
|
21
|
-
else if (ref !== null && ref !== undefined) {
|
|
22
|
-
ref.current = value;
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
|
-
};
|
|
26
|
-
// ESLint expects an array literal which we can not provide here
|
|
27
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
28
|
-
}, refs);
|
|
29
|
-
}
|
|
30
|
-
//# sourceMappingURL=use-merge-refs.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-merge-refs.js","sourceRoot":"","sources":["../../../../src/internal/utils/use-merge-refs.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAiC,OAAO,EAAE,MAAM,OAAO,CAAC;AAE/D;;;;;;GAMG;AACH,MAAM,UAAU,YAAY,CAAC,GAAG,IAAwE;IACtG,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,CAAC,EAAE;YAC1D,OAAO,IAAI,CAAC;SACb;QACD,OAAO,CAAC,KAAU,EAAE,EAAE;YACpB,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBACnB,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;oBAC7B,GAAG,CAAC,KAAK,CAAC,CAAC;iBACZ;qBAAM,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,EAAE;oBAC3C,GAA6B,CAAC,OAAO,GAAG,KAAK,CAAC;iBAChD;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QACF,gEAAgE;QAChE,uDAAuD;IACzD,CAAC,EAAE,IAAI,CAAC,CAAC;AACX,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { MutableRefObject, RefCallback, useMemo } from \"react\";\n\n/**\n * useMergeRefs merges multiple refs into a single ref callback.\n *\n * For example:\n * const mergedRef = useMergeRefs(ref1, ref2, ref3)\n * <div ref={refs}>...</div>\n */\nexport function useMergeRefs(...refs: Array<RefCallback<any> | MutableRefObject<any> | null | undefined>) {\n return useMemo(() => {\n if (refs.every((ref) => ref === null || ref === undefined)) {\n return null;\n }\n return (value: any) => {\n refs.forEach((ref) => {\n if (typeof ref === \"function\") {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as MutableRefObject<any>).current = value;\n }\n });\n };\n // ESLint expects an array literal which we can not provide here\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, refs);\n}\n"]}
|