@cloudscape-design/components 3.0.239 → 3.0.241
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/internal/components/focus-lock/index.d.ts +8 -1
- package/internal/components/focus-lock/index.d.ts.map +1 -1
- package/internal/components/focus-lock/index.js +8 -2
- package/internal/components/focus-lock/index.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/table/body-cell/inline-editor.d.ts.map +1 -1
- package/table/body-cell/inline-editor.js +16 -10
- package/table/body-cell/inline-editor.js.map +1 -1
- package/tutorial-panel/components/tutorial-detail-view/congratulation-screen.d.ts +1 -1
- package/tutorial-panel/components/tutorial-detail-view/congratulation-screen.d.ts.map +1 -1
- package/tutorial-panel/components/tutorial-detail-view/congratulation-screen.js +1 -1
- package/tutorial-panel/components/tutorial-detail-view/congratulation-screen.js.map +1 -1
- package/tutorial-panel/components/tutorial-detail-view/index.d.ts.map +1 -1
- package/tutorial-panel/components/tutorial-detail-view/index.js +2 -4
- package/tutorial-panel/components/tutorial-detail-view/index.js.map +1 -1
- package/tutorial-panel/interfaces.d.ts +1 -1
- package/tutorial-panel/interfaces.d.ts.map +1 -1
- package/tutorial-panel/interfaces.js.map +1 -1
|
@@ -6,5 +6,12 @@ export interface FocusLockProps {
|
|
|
6
6
|
restoreFocus?: boolean;
|
|
7
7
|
children: React.ReactNode;
|
|
8
8
|
}
|
|
9
|
-
export
|
|
9
|
+
export interface FocusLockRef {
|
|
10
|
+
/**
|
|
11
|
+
* Focuses the first element in the component.
|
|
12
|
+
*/
|
|
13
|
+
focusFirst(): void;
|
|
14
|
+
}
|
|
15
|
+
declare const _default: React.ForwardRefExoticComponent<FocusLockProps & React.RefAttributes<FocusLockRef>>;
|
|
16
|
+
export default _default;
|
|
10
17
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/focus-lock/index.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/focus-lock/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,UAAU,IAAI,IAAI,CAAC;CACpB;;AAqED,wBAA2C"}
|
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
3
|
+
import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
|
4
4
|
import { useMergeRefs } from '../../hooks/use-merge-refs';
|
|
5
5
|
import TabTrap from '../tab-trap/index';
|
|
6
6
|
import { getFirstFocusable, getLastFocusable } from './utils';
|
|
7
|
-
|
|
7
|
+
function FocusLock({ className, disabled, autoFocus, restoreFocus, children }, ref) {
|
|
8
|
+
useImperativeHandle(ref, () => {
|
|
9
|
+
return {
|
|
10
|
+
focusFirst,
|
|
11
|
+
};
|
|
12
|
+
});
|
|
8
13
|
const returnFocusToRef = useRef(null);
|
|
9
14
|
const containerRef = useRef(null);
|
|
10
15
|
// Using a callback ref to detect component unmounts, which is safer than using useEffect.
|
|
@@ -50,4 +55,5 @@ export default function FocusLock({ className, disabled, autoFocus, restoreFocus
|
|
|
50
55
|
React.createElement("div", { className: className, ref: mergedRef }, children),
|
|
51
56
|
React.createElement(TabTrap, { disabled: disabled, focusNextCallback: focusFirst })));
|
|
52
57
|
}
|
|
58
|
+
export default React.forwardRef(FocusLock);
|
|
53
59
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/focus-lock/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/focus-lock/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAiB9D,SAAS,SAAS,CAChB,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAkB,EAC1E,GAA4B;IAE5B,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE;QAC5B,OAAO;YACL,UAAU;SACX,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAC/D,MAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEzD,0FAA0F;IAC1F,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,IAA2B,EAAE,EAAE;;QAC9B,IAAI,IAAI,KAAK,IAAI,IAAI,YAAY,EAAE;YACjC,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SACnC;IACH,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,MAAM,SAAS,GAAG,YAAY,CAAC,YAAY,EAAE,mBAAmB,CAAC,CAAC;IAElE,MAAM,UAAU,GAAG,GAAG,EAAE;;QACtB,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,MAAA,iBAAiB,CAAC,YAAY,CAAC,OAAO,CAAC,0CAAE,KAAK,EAAE,CAAC;SAClD;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;;QACrB,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,MAAA,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,0CAAE,KAAK,EAAE,CAAC;SACjD;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,CAAC,QAAQ,EAAE;YAC1B,gBAAgB,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAwC,CAAC;YAC7E,UAAU,EAAE,CAAC;SACd;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1B,0DAA0D;IAC1D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC7D,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,YAAY,KAAK,CAAC,CAAC,QAAQ,EAAE;YAC/B,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;YAC5B,IAAI,QAAQ,IAAI,YAAY,EAAE;gBAC5B,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAClC,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC;aACjC;SACF;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IAE3C,OAAO,CACL;QACE,oBAAC,OAAO,IAAC,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,EAAE,SAAS,GAAI;QAC7D,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,IACtC,QAAQ,CACL;QACN,oBAAC,OAAO,IAAC,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,EAAE,UAAU,GAAI,CAC7D,CACJ,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport { useMergeRefs } from '../../hooks/use-merge-refs';\n\nimport TabTrap from '../tab-trap/index';\nimport { getFirstFocusable, getLastFocusable } from './utils';\n\nexport interface FocusLockProps {\n className?: string;\n disabled?: boolean;\n autoFocus?: boolean;\n restoreFocus?: boolean;\n children: React.ReactNode;\n}\n\nexport interface FocusLockRef {\n /**\n * Focuses the first element in the component.\n */\n focusFirst(): void;\n}\n\nfunction FocusLock(\n { className, disabled, autoFocus, restoreFocus, children }: FocusLockProps,\n ref: React.Ref<FocusLockRef>\n) {\n useImperativeHandle(ref, () => {\n return {\n focusFirst,\n };\n });\n\n const returnFocusToRef = useRef<HTMLOrSVGElement | null>(null);\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n // Using a callback ref to detect component unmounts, which is safer than using useEffect.\n const restoreFocusHandler = useCallback(\n (elem: HTMLDivElement | null) => {\n if (elem === null && restoreFocus) {\n returnFocusToRef.current?.focus();\n }\n },\n [restoreFocus]\n );\n\n const mergedRef = useMergeRefs(containerRef, restoreFocusHandler);\n\n const focusFirst = () => {\n if (containerRef.current) {\n getFirstFocusable(containerRef.current)?.focus();\n }\n };\n\n const focusLast = () => {\n if (containerRef.current) {\n getLastFocusable(containerRef.current)?.focus();\n }\n };\n\n useEffect(() => {\n if (autoFocus && !disabled) {\n returnFocusToRef.current = document.activeElement as HTMLOrSVGElement | null;\n focusFirst();\n }\n }, [autoFocus, disabled]);\n\n // Returns focus when disabled changes from false to true.\n const [prevDisabled, setPrevDisabled] = useState(!!disabled);\n useEffect(() => {\n if (prevDisabled !== !!disabled) {\n setPrevDisabled(!!disabled);\n if (disabled && restoreFocus) {\n returnFocusToRef.current?.focus();\n returnFocusToRef.current = null;\n }\n }\n }, [prevDisabled, disabled, restoreFocus]);\n\n return (\n <>\n <TabTrap disabled={disabled} focusNextCallback={focusLast} />\n <div className={className} ref={mergedRef}>\n {children}\n </div>\n <TabTrap disabled={disabled} focusNextCallback={focusFirst} />\n </>\n );\n}\n\nexport default React.forwardRef(FocusLock);\n"]}
|
package/internal/environment.js
CHANGED
package/internal/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inline-editor.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/inline-editor.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"inline-editor.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/inline-editor.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAQ3C,UAAU,iBAAiB,CAAC,QAAQ;IAClC,UAAU,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACrC,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,EAAE,UAAU,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,EACrC,UAAU,EACV,IAAI,EACJ,MAAM,EACN,SAAS,EACT,UAAU,EACV,UAAU,GACX,EAAE,iBAAiB,CAAC,QAAQ,CAAC,eAiH7B"}
|
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
import { __awaiter } from "tslib";
|
|
2
2
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
|
-
import React, { useEffect, useState } from 'react';
|
|
4
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
5
5
|
import Button from '../../button/internal';
|
|
6
6
|
import FormField from '../../form-field/internal';
|
|
7
7
|
import SpaceBetween from '../../space-between/internal';
|
|
8
8
|
import { useClickAway } from './click-away';
|
|
9
9
|
import styles from './styles.css.js';
|
|
10
|
+
import FocusLock from '../../internal/components/focus-lock';
|
|
10
11
|
// A function that does nothing
|
|
11
12
|
const noop = () => undefined;
|
|
12
13
|
export function InlineEditor({ ariaLabels, item, column, onEditEnd, submitEdit, __onRender, }) {
|
|
13
|
-
var _a, _b;
|
|
14
|
+
var _a, _b, _c;
|
|
14
15
|
const [currentEditLoading, setCurrentEditLoading] = useState(false);
|
|
15
16
|
const [currentEditValue, setCurrentEditValue] = useState();
|
|
17
|
+
const focusLockRef = useRef(null);
|
|
16
18
|
const cellContext = {
|
|
17
19
|
currentValue: currentEditValue,
|
|
18
20
|
setValue: setCurrentEditValue,
|
|
@@ -24,6 +26,7 @@ export function InlineEditor({ ariaLabels, item, column, onEditEnd, submitEdit,
|
|
|
24
26
|
onEditEnd();
|
|
25
27
|
}
|
|
26
28
|
function onSubmitClick(evt) {
|
|
29
|
+
var _a;
|
|
27
30
|
return __awaiter(this, void 0, void 0, function* () {
|
|
28
31
|
evt.preventDefault();
|
|
29
32
|
if (currentEditValue === undefined) {
|
|
@@ -38,6 +41,7 @@ export function InlineEditor({ ariaLabels, item, column, onEditEnd, submitEdit,
|
|
|
38
41
|
}
|
|
39
42
|
catch (e) {
|
|
40
43
|
setCurrentEditLoading(false);
|
|
44
|
+
(_a = focusLockRef.current) === null || _a === void 0 ? void 0 : _a.focusFirst();
|
|
41
45
|
}
|
|
42
46
|
});
|
|
43
47
|
}
|
|
@@ -61,13 +65,15 @@ export function InlineEditor({ ariaLabels, item, column, onEditEnd, submitEdit,
|
|
|
61
65
|
}, [__onRender]);
|
|
62
66
|
// asserting non-undefined editConfig here because this component is unreachable otherwise
|
|
63
67
|
const { ariaLabel = undefined, validation = noop, errorIconAriaLabel, constraintText, editingCell, } = column.editConfig;
|
|
64
|
-
return (React.createElement(
|
|
65
|
-
React.createElement(
|
|
66
|
-
React.createElement("
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
68
|
+
return (React.createElement(FocusLock, { restoreFocus: true, ref: focusLockRef },
|
|
69
|
+
React.createElement("div", { role: "dialog", ref: clickAwayRef, "aria-label": (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.activateEditLabel) === null || _a === void 0 ? void 0 : _a.call(ariaLabels, column), onKeyDown: handleEscape },
|
|
70
|
+
React.createElement("form", { onSubmit: onSubmitClick, className: styles['body-cell-editor-form'] },
|
|
71
|
+
React.createElement(FormField, { stretch: true, label: ariaLabel, constraintText: constraintText, __hideLabel: true, __disableGutters: true, i18nStrings: { errorIconAriaLabel }, errorText: validation(item, currentEditValue) },
|
|
72
|
+
React.createElement("div", { className: styles['body-cell-editor-row'] },
|
|
73
|
+
editingCell(item, cellContext),
|
|
74
|
+
React.createElement("span", { className: styles['body-cell-editor-controls'] },
|
|
75
|
+
React.createElement(SpaceBetween, { direction: "horizontal", size: "xxs" },
|
|
76
|
+
!currentEditLoading ? (React.createElement(Button, { ariaLabel: (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.cancelEditLabel) === null || _b === void 0 ? void 0 : _b.call(ariaLabels, column), formAction: "none", iconName: "close", variant: "inline-icon", onClick: onCancel })) : null,
|
|
77
|
+
React.createElement(Button, { ariaLabel: (_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.submitEditLabel) === null || _c === void 0 ? void 0 : _c.call(ariaLabels, column), formAction: "submit", iconName: "check", variant: "inline-icon", loading: currentEditLoading })))))))));
|
|
72
78
|
}
|
|
73
79
|
//# sourceMappingURL=inline-editor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inline-editor.js","sourceRoot":"lib/default/","sources":["table/body-cell/inline-editor.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"inline-editor.js","sourceRoot":"lib/default/","sources":["table/body-cell/inline-editor.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 React, { useEffect, useRef, useState } from 'react';\nimport Button from '../../button/internal';\nimport FormField from '../../form-field/internal';\nimport SpaceBetween from '../../space-between/internal';\nimport { useClickAway } from './click-away';\nimport { TableProps } from '../interfaces';\nimport styles from './styles.css.js';\nimport { Optional } from '../../internal/types';\nimport FocusLock, { FocusLockRef } from '../../internal/components/focus-lock';\n\n// A function that does nothing\nconst noop = () => undefined;\n\ninterface InlineEditorProps<ItemType> {\n ariaLabels: TableProps['ariaLabels'];\n column: TableProps.ColumnDefinition<ItemType>;\n item: ItemType;\n onEditEnd: () => void;\n submitEdit: TableProps.SubmitEditFunction<ItemType>;\n __onRender?: () => void;\n}\n\nexport function InlineEditor<ItemType>({\n ariaLabels,\n item,\n column,\n onEditEnd,\n submitEdit,\n __onRender,\n}: InlineEditorProps<ItemType>) {\n const [currentEditLoading, setCurrentEditLoading] = useState(false);\n const [currentEditValue, setCurrentEditValue] = useState<Optional<any>>();\n\n const focusLockRef = useRef<FocusLockRef>(null);\n\n const cellContext = {\n currentValue: currentEditValue,\n setValue: setCurrentEditValue,\n };\n\n function finishEdit(cancel = false) {\n if (!cancel) {\n setCurrentEditValue(undefined);\n }\n onEditEnd();\n }\n\n async function onSubmitClick(evt: React.FormEvent) {\n evt.preventDefault();\n if (currentEditValue === undefined) {\n finishEdit();\n return;\n }\n\n setCurrentEditLoading(true);\n try {\n await submitEdit(item, column, currentEditValue);\n setCurrentEditLoading(false);\n finishEdit();\n } catch (e) {\n setCurrentEditLoading(false);\n focusLockRef.current?.focusFirst();\n }\n }\n\n function onCancel() {\n if (currentEditLoading) {\n return;\n }\n finishEdit(true);\n }\n\n function handleEscape(event: React.KeyboardEvent): void {\n if (event.key === 'Escape') {\n onCancel();\n }\n }\n\n const clickAwayRef = useClickAway(onCancel);\n\n useEffect(() => {\n if (__onRender) {\n const timer = setTimeout(__onRender, 1);\n return () => clearTimeout(timer);\n }\n }, [__onRender]);\n\n // asserting non-undefined editConfig here because this component is unreachable otherwise\n const {\n ariaLabel = undefined,\n validation = noop,\n errorIconAriaLabel,\n constraintText,\n editingCell,\n } = column.editConfig!;\n\n return (\n <FocusLock restoreFocus={true} ref={focusLockRef}>\n <div\n role=\"dialog\"\n ref={clickAwayRef}\n aria-label={ariaLabels?.activateEditLabel?.(column)}\n onKeyDown={handleEscape}\n >\n <form onSubmit={onSubmitClick} className={styles['body-cell-editor-form']}>\n <FormField\n stretch={true}\n label={ariaLabel}\n constraintText={constraintText}\n __hideLabel={true}\n __disableGutters={true}\n i18nStrings={{ errorIconAriaLabel }}\n errorText={validation(item, currentEditValue)}\n >\n <div className={styles['body-cell-editor-row']}>\n {editingCell(item, cellContext)}\n <span className={styles['body-cell-editor-controls']}>\n <SpaceBetween direction=\"horizontal\" size=\"xxs\">\n {!currentEditLoading ? (\n <Button\n ariaLabel={ariaLabels?.cancelEditLabel?.(column)}\n formAction=\"none\"\n iconName=\"close\"\n variant=\"inline-icon\"\n onClick={onCancel}\n />\n ) : null}\n <Button\n ariaLabel={ariaLabels?.submitEditLabel?.(column)}\n formAction=\"submit\"\n iconName=\"check\"\n variant=\"inline-icon\"\n loading={currentEditLoading}\n />\n </SpaceBetween>\n </span>\n </div>\n </FormField>\n </form>\n </div>\n </FocusLock>\n );\n}\n"]}
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { TutorialPanelProps } from '../../interfaces';
|
|
3
3
|
interface CongratulationScreenProps {
|
|
4
4
|
children: React.ReactNode;
|
|
5
|
-
onFeedbackClick
|
|
5
|
+
onFeedbackClick?: () => void;
|
|
6
6
|
i18nStrings: TutorialPanelProps['i18nStrings'];
|
|
7
7
|
}
|
|
8
8
|
export declare function CongratulationScreen({ children, onFeedbackClick, i18nStrings }: CongratulationScreenProps): JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"congratulation-screen.d.ts","sourceRoot":"lib/default/","sources":["tutorial-panel/components/tutorial-detail-view/congratulation-screen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAOtD,UAAU,yBAAyB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"congratulation-screen.d.ts","sourceRoot":"lib/default/","sources":["tutorial-panel/components/tutorial-detail-view/congratulation-screen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAOtD,UAAU,yBAAyB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;CAChD;AAED,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAE,EAAE,yBAAyB,eAiCzG"}
|
|
@@ -19,6 +19,6 @@ export function CongratulationScreen({ children, onFeedbackClick, i18nStrings })
|
|
|
19
19
|
[styles['plaintext-congratulation-description']]: typeof children === 'string',
|
|
20
20
|
}) }, children))),
|
|
21
21
|
React.createElement("div", { className: styles.divider }),
|
|
22
|
-
React.createElement(InternalLink, { onFollow: onFeedbackClick, className: styles['feedback-link'] }, i18nStrings.feedbackLinkText)));
|
|
22
|
+
onFeedbackClick && (React.createElement(InternalLink, { onFollow: onFeedbackClick, className: styles['feedback-link'] }, i18nStrings.feedbackLinkText))));
|
|
23
23
|
}
|
|
24
24
|
//# sourceMappingURL=congratulation-screen.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"congratulation-screen.js","sourceRoot":"lib/default/","sources":["tutorial-panel/components/tutorial-detail-view/congratulation-screen.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,uBAAuB,MAAM,oCAAoC,CAAC;AACzE,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AACnE,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAQhD,MAAM,UAAU,oBAAoB,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,WAAW,EAA6B;IACxG,OAAO,CACL,oBAAC,oBAAoB,IAAC,IAAI,EAAC,KAAK;QAC9B,oBAAC,oBAAoB,IAAC,IAAI,EAAC,IAAI;YAC7B,6BAAK,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC;gBAC9C,oBAAC,uBAAuB,IACtB,MAAM,EAAC,SAAS,EAChB,IAAI,EAAC,SAAS,EACd,SAAS,EAAE,MAAM,CAAC,gCAAgC,CAAC,GACnD;gBACF,6BAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC,IAAG,WAAW,CAAC,qBAAqB,CAAO,CACxF;YACN,oBAAC,WAAW,IAAC,KAAK,EAAC,qBAAqB;gBACtC,6BACE,SAAS,EAAE,IAAI,CAAC;wBACd,CAAC,MAAM,CAAC,+BAA+B,CAAC,CAAC,EAAE,IAAI;wBAC/C,CAAC,MAAM,CAAC,sCAAsC,CAAC,CAAC,EAAE,OAAO,QAAQ,KAAK,QAAQ;qBAC/E,CAAC,IAED,QAAQ,CACL,CACM,CACO;QAEvB,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI;
|
|
1
|
+
{"version":3,"file":"congratulation-screen.js","sourceRoot":"lib/default/","sources":["tutorial-panel/components/tutorial-detail-view/congratulation-screen.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,uBAAuB,MAAM,oCAAoC,CAAC;AACzE,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AACnE,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAQhD,MAAM,UAAU,oBAAoB,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,WAAW,EAA6B;IACxG,OAAO,CACL,oBAAC,oBAAoB,IAAC,IAAI,EAAC,KAAK;QAC9B,oBAAC,oBAAoB,IAAC,IAAI,EAAC,IAAI;YAC7B,6BAAK,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC;gBAC9C,oBAAC,uBAAuB,IACtB,MAAM,EAAC,SAAS,EAChB,IAAI,EAAC,SAAS,EACd,SAAS,EAAE,MAAM,CAAC,gCAAgC,CAAC,GACnD;gBACF,6BAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC,IAAG,WAAW,CAAC,qBAAqB,CAAO,CACxF;YACN,oBAAC,WAAW,IAAC,KAAK,EAAC,qBAAqB;gBACtC,6BACE,SAAS,EAAE,IAAI,CAAC;wBACd,CAAC,MAAM,CAAC,+BAA+B,CAAC,CAAC,EAAE,IAAI;wBAC/C,CAAC,MAAM,CAAC,sCAAsC,CAAC,CAAC,EAAE,OAAO,QAAQ,KAAK,QAAQ;qBAC/E,CAAC,IAED,QAAQ,CACL,CACM,CACO;QAEvB,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI;QAEjC,eAAe,IAAI,CAClB,oBAAC,YAAY,IAAC,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,IACxE,WAAW,CAAC,gBAAgB,CAChB,CAChB,CACoB,CACxB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from './styles.css.js';\nimport { TutorialPanelProps } from '../../interfaces';\nimport InternalStatusIndicator from '../../../status-indicator/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport InternalLink from '../../../link/internal';\nimport clsx from 'clsx';\nimport InternalBox from '../../../box/internal';\n\ninterface CongratulationScreenProps {\n children: React.ReactNode;\n onFeedbackClick?: () => void;\n i18nStrings: TutorialPanelProps['i18nStrings'];\n}\n\nexport function CongratulationScreen({ children, onFeedbackClick, i18nStrings }: CongratulationScreenProps) {\n return (\n <InternalSpaceBetween size=\"xxl\">\n <InternalSpaceBetween size=\"xl\">\n <div className={styles['congratulation-message']}>\n <InternalStatusIndicator\n __size=\"inherit\"\n type=\"success\"\n className={styles['congratulation-message--status']}\n />\n <div className={styles['completion-screen-title']}>{i18nStrings.completionScreenTitle}</div>\n </div>\n <InternalBox color=\"text-body-secondary\">\n <div\n className={clsx({\n [styles['completion-screen-description']]: true,\n [styles['plaintext-congratulation-description']]: typeof children === 'string',\n })}\n >\n {children}\n </div>\n </InternalBox>\n </InternalSpaceBetween>\n\n <div className={styles.divider} />\n\n {onFeedbackClick && (\n <InternalLink onFollow={onFeedbackClick} className={styles['feedback-link']}>\n {i18nStrings.feedbackLinkText}\n </InternalLink>\n )}\n </InternalSpaceBetween>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["tutorial-panel/components/tutorial-detail-view/index.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtD,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAKrE,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,QAAQ,EACR,cAAc,EAAE,qBAAqB,EACrC,gBAAoB,EACpB,eAAe,EAAE,sBAAsB,EACvC,WAAW,GACZ,EAAE;IACD,QAAQ,EAAE,kBAAkB,CAAC,QAAQ,CAAC;IACtC,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IACjD,gBAAgB,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC;IACrD,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IACvD,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;CAChD,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["tutorial-panel/components/tutorial-detail-view/index.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtD,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAKrE,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,QAAQ,EACR,cAAc,EAAE,qBAAqB,EACrC,gBAAoB,EACpB,eAAe,EAAE,sBAAsB,EACvC,WAAW,GACZ,EAAE;IACD,QAAQ,EAAE,kBAAkB,CAAC,QAAQ,CAAC;IACtC,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IACjD,gBAAgB,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC;IACrD,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IACvD,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;CAChD,eAqDA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import React, { useCallback } from 'react';
|
|
3
|
+
import React, { useCallback, useMemo } from 'react';
|
|
4
4
|
import InternalBox from '../../../box/internal';
|
|
5
5
|
import { InternalButton } from '../../../button/internal';
|
|
6
6
|
import InternalSpaceBetween from '../../../space-between/internal';
|
|
@@ -14,9 +14,7 @@ export default function TutorialDetailView({ tutorial, onExitTutorial: onExitTut
|
|
|
14
14
|
const onExitTutorial = useCallback(() => {
|
|
15
15
|
fireNonCancelableEvent(onExitTutorialHandler, { tutorial });
|
|
16
16
|
}, [onExitTutorialHandler, tutorial]);
|
|
17
|
-
const onFeedbackClick =
|
|
18
|
-
fireNonCancelableEvent(onFeedbackClickHandler, { tutorial });
|
|
19
|
-
}, [onFeedbackClickHandler, tutorial]);
|
|
17
|
+
const onFeedbackClick = useMemo(() => onFeedbackClickHandler && (() => fireNonCancelableEvent(onFeedbackClickHandler, { tutorial })), [onFeedbackClickHandler, tutorial]);
|
|
20
18
|
return (React.createElement(React.Fragment, null,
|
|
21
19
|
React.createElement(InternalSpaceBetween, { size: "xl" },
|
|
22
20
|
React.createElement("div", { className: styles['tutorial-title'] },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["tutorial-panel/components/tutorial-detail-view/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["tutorial-panel/components/tutorial-detail-view/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AACnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAExE,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAE3E,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,QAAQ,EACR,cAAc,EAAE,qBAAqB,EACrC,gBAAgB,GAAG,CAAC,EACpB,eAAe,EAAE,sBAAsB,EACvC,WAAW,GAOZ;IACC,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,sBAAsB,CAAC,qBAAqB,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC9D,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtC,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CAAC,sBAAsB,IAAI,CAAC,GAAG,EAAE,CAAC,sBAAsB,CAAC,sBAAsB,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,EACpG,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CACnC,CAAC;IAEF,OAAO,CACL;QACE,oBAAC,oBAAoB,IAAC,IAAI,EAAC,IAAI;YAC7B,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;gBACtC,oBAAC,cAAc,IACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,WAAW,CAAC,iBAAiB,EACxC,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAC,YAAY,GACrB;gBAEF,oBAAC,WAAW,IACV,OAAO,EAAC,IAAI,EACZ,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAC/C,OAAO,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EACvB,MAAM,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,IAEpB,QAAQ,CAAC,KAAK,CACH,CACV;YACN;gBACE,6BAAK,IAAI,EAAC,QAAQ,IACf,QAAQ,CAAC,SAAS,IAAI,CACrB,oBAAC,oBAAoB,IAAC,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,WAAW,IAC7E,QAAQ,CAAC,0BAA0B,CACf,CACxB,CACG;gBACL,CAAC,QAAQ,CAAC,SAAS,IAAI,CACtB,oBAAC,QAAQ,IACP,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,cAAc,EAAE,cAAc,EAC9B,sBAAsB,EAAE,gBAAgB,EACxC,WAAW,EAAE,WAAW,GACxB,CACH,CACG,CACe,CACtB,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useMemo } from 'react';\nimport { TutorialPanelProps } from '../../interfaces';\nimport InternalBox from '../../../box/internal';\nimport { InternalButton } from '../../../button/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport styles from './styles.css.js';\nimport { fireNonCancelableEvent } from '../../../internal/events/index';\nimport { HotspotContext } from '../../../annotation-context/context';\nimport { CongratulationScreen } from './congratulation-screen';\nimport { TaskList } from './task-list';\nimport { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';\n\nexport default function TutorialDetailView({\n tutorial,\n onExitTutorial: onExitTutorialHandler,\n currentStepIndex = 0,\n onFeedbackClick: onFeedbackClickHandler,\n i18nStrings,\n}: {\n tutorial: TutorialPanelProps.Tutorial;\n onExitTutorial: HotspotContext['onExitTutorial'];\n currentStepIndex: HotspotContext['currentStepIndex'];\n onFeedbackClick: TutorialPanelProps['onFeedbackClick'];\n i18nStrings: TutorialPanelProps['i18nStrings'];\n}) {\n const isRefresh = useVisualRefresh();\n\n const onExitTutorial = useCallback(() => {\n fireNonCancelableEvent(onExitTutorialHandler, { tutorial });\n }, [onExitTutorialHandler, tutorial]);\n\n const onFeedbackClick = useMemo(\n () => onFeedbackClickHandler && (() => fireNonCancelableEvent(onFeedbackClickHandler, { tutorial })),\n [onFeedbackClickHandler, tutorial]\n );\n\n return (\n <>\n <InternalSpaceBetween size=\"xl\">\n <div className={styles['tutorial-title']}>\n <InternalButton\n variant=\"icon\"\n onClick={onExitTutorial}\n ariaLabel={i18nStrings.labelExitTutorial}\n formAction=\"none\"\n iconName=\"arrow-left\"\n />\n\n <InternalBox\n variant=\"h2\"\n fontSize={isRefresh ? 'heading-m' : 'heading-l'}\n padding={{ top: 'xxs' }}\n margin={{ left: 's' }}\n >\n {tutorial.title}\n </InternalBox>\n </div>\n <div>\n <div role=\"status\">\n {tutorial.completed && (\n <CongratulationScreen onFeedbackClick={onFeedbackClick} i18nStrings={i18nStrings}>\n {tutorial.completedScreenDescription}\n </CongratulationScreen>\n )}\n </div>\n {!tutorial.completed && (\n <TaskList\n tasks={tutorial.tasks}\n onExitTutorial={onExitTutorial}\n currentGlobalStepIndex={currentStepIndex}\n i18nStrings={i18nStrings}\n />\n )}\n </div>\n </InternalSpaceBetween>\n </>\n );\n}\n"]}
|
|
@@ -62,7 +62,7 @@ export interface TutorialPanelProps extends BaseComponentProps {
|
|
|
62
62
|
/**
|
|
63
63
|
* Fired when the user clicks on the feedback link at the end of a tutorial.
|
|
64
64
|
*/
|
|
65
|
-
onFeedbackClick
|
|
65
|
+
onFeedbackClick?: NonCancelableEventHandler<TutorialPanelProps.TutorialDetail>;
|
|
66
66
|
}
|
|
67
67
|
export declare namespace TutorialPanelProps {
|
|
68
68
|
interface TutorialDetail {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["tutorial-panel/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAyCG;IACH,SAAS,EAAE,aAAa,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAEtD;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,kBAAkB,CAAC,WAAW,CAAC;IAE5C;;OAEG;IACH,eAAe,EAAE,yBAAyB,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["tutorial-panel/interfaces.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["tutorial-panel/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface TutorialPanelProps extends BaseComponentProps {\n /**\n * Whether the content of the panel is currently loading. If this property\n * is set to `true`, the panel displays a spinner and the loadingText that is\n * specified in the `i18nStrings` property.\n */\n loading?: boolean;\n\n /**\n * List of all available tutorials. An array of objects with the following properties:\n *\n * * `title` (string) - Name of the tutorial\n *\n * * `description` (ReactNode) - Short description of the tutorial's content.\n *\n * * `tasks` - Array of tasks (in intended order). Each Task has the following properties:\n * * `title` (string) - Name of this task. This is shown in the task list overview of the tutorial's detail view.\n * * `steps` - Array of steps in this task (in intended order). Each step has the following properties:\n * * `title` (string) - Title of this step. This is shown in the step list in the tutorial's detail view.\n * * `content` (ReactNode) - Content to be shown in the popover of this step. Can be JSX or plain text.\n * * `warningAlert` (ReactNode) - (Optional) If this field is present, a warning alert will be displayed\n * inside the step's popover, showing this field's content. Can be JSX or plain text.\n * * `hotspotId` (string) - ID of the hotspot that this tutorial step points to.\n *\n * A hotspot with this ID needs to be added manually to the code of the application and represents a location\n * in the application that a tutorial step can be attached to. It can be re-used by multiple tutorials. Hotspot\n * IDs need to be unique in the scope of the whole application that uses this tutorial.\n *\n * * `completedScreenDescription` (ReactNode) - Description to be shown on the last page of the tutorial, when the\n * user has successfully completed the tutorial.\n *\n * * `prerequisitesAlert` (ReactNode) - (Optional) If the application determines that the user cannot start the tutorial\n * yet (by specifying the property `prerequisitesNeeded` on the tutorial object), the content of `prerequisitesAlert`\n * will be shown in the tutorial list underneath the tutorial title.\n *\n * Example: `<><Link>Create a bucket first</Link> to complete this tutorial.</>`\n *\n * * `prerequisitesNeeded` (boolean) - (Optional) If this property is set to `true`, the tutorial list will disable the\n * `Start tutorial` button for this tutorial, and it will show the contents of the tutorial's `prerequisitesAlert` field\n * in an alert underneath the tutorial title.\n *\n * * `learnMoreUrl` (string | null) - (Optional) If present, the tutorial list will show a \"Learn More\" link pointing to\n * this URL underneath the tutorial's description.\n *\n * * `completed` (boolean) - Whether the user has already completed this tutorial.\n *\n * If this property is set to `true`, the tutorial list will show a status indicator underneath the tutorial title with\n * a message that indicates that this tutorial has already been completed by the user (e.g. \"Tutorial completed\"), and\n * the \"Start tutorial\" button will be replaced by a \"Restart tutorial\" button.\n */\n tutorials: ReadonlyArray<TutorialPanelProps.Tutorial>;\n\n /**\n * The link to a file documenting all tutorials (usually a PDF).\n */\n downloadUrl?: string;\n\n /**\n * An object containing all the necessary localized strings required by the component.\n */\n i18nStrings: TutorialPanelProps.I18nStrings;\n\n /**\n * Fired when the user clicks on the feedback link at the end of a tutorial.\n */\n onFeedbackClick
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["tutorial-panel/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface TutorialPanelProps extends BaseComponentProps {\n /**\n * Whether the content of the panel is currently loading. If this property\n * is set to `true`, the panel displays a spinner and the loadingText that is\n * specified in the `i18nStrings` property.\n */\n loading?: boolean;\n\n /**\n * List of all available tutorials. An array of objects with the following properties:\n *\n * * `title` (string) - Name of the tutorial\n *\n * * `description` (ReactNode) - Short description of the tutorial's content.\n *\n * * `tasks` - Array of tasks (in intended order). Each Task has the following properties:\n * * `title` (string) - Name of this task. This is shown in the task list overview of the tutorial's detail view.\n * * `steps` - Array of steps in this task (in intended order). Each step has the following properties:\n * * `title` (string) - Title of this step. This is shown in the step list in the tutorial's detail view.\n * * `content` (ReactNode) - Content to be shown in the popover of this step. Can be JSX or plain text.\n * * `warningAlert` (ReactNode) - (Optional) If this field is present, a warning alert will be displayed\n * inside the step's popover, showing this field's content. Can be JSX or plain text.\n * * `hotspotId` (string) - ID of the hotspot that this tutorial step points to.\n *\n * A hotspot with this ID needs to be added manually to the code of the application and represents a location\n * in the application that a tutorial step can be attached to. It can be re-used by multiple tutorials. Hotspot\n * IDs need to be unique in the scope of the whole application that uses this tutorial.\n *\n * * `completedScreenDescription` (ReactNode) - Description to be shown on the last page of the tutorial, when the\n * user has successfully completed the tutorial.\n *\n * * `prerequisitesAlert` (ReactNode) - (Optional) If the application determines that the user cannot start the tutorial\n * yet (by specifying the property `prerequisitesNeeded` on the tutorial object), the content of `prerequisitesAlert`\n * will be shown in the tutorial list underneath the tutorial title.\n *\n * Example: `<><Link>Create a bucket first</Link> to complete this tutorial.</>`\n *\n * * `prerequisitesNeeded` (boolean) - (Optional) If this property is set to `true`, the tutorial list will disable the\n * `Start tutorial` button for this tutorial, and it will show the contents of the tutorial's `prerequisitesAlert` field\n * in an alert underneath the tutorial title.\n *\n * * `learnMoreUrl` (string | null) - (Optional) If present, the tutorial list will show a \"Learn More\" link pointing to\n * this URL underneath the tutorial's description.\n *\n * * `completed` (boolean) - Whether the user has already completed this tutorial.\n *\n * If this property is set to `true`, the tutorial list will show a status indicator underneath the tutorial title with\n * a message that indicates that this tutorial has already been completed by the user (e.g. \"Tutorial completed\"), and\n * the \"Start tutorial\" button will be replaced by a \"Restart tutorial\" button.\n */\n tutorials: ReadonlyArray<TutorialPanelProps.Tutorial>;\n\n /**\n * The link to a file documenting all tutorials (usually a PDF).\n */\n downloadUrl?: string;\n\n /**\n * An object containing all the necessary localized strings required by the component.\n */\n i18nStrings: TutorialPanelProps.I18nStrings;\n\n /**\n * Fired when the user clicks on the feedback link at the end of a tutorial.\n */\n onFeedbackClick?: NonCancelableEventHandler<TutorialPanelProps.TutorialDetail>;\n}\n\nexport namespace TutorialPanelProps {\n export interface TutorialDetail {\n tutorial: Tutorial;\n }\n\n export interface Tutorial {\n /**\n * Title of the tutorial\n * */\n title: string;\n\n /**\n * Short description of the tutorial's content. This is displayed in the tutorial list.\n */\n description: React.ReactNode;\n\n /**\n * List of tasks (in intended order)\n */\n tasks: ReadonlyArray<Task>;\n\n /**\n * Description to be shown on the last page of the tutorial, when the user has\n * successfully completed the tutorial.\n */\n completedScreenDescription: React.ReactNode;\n\n /**\n * If the application determines that the user cannot start\n * the tutorial yet (by specifying the property `prerequisitesNeeded` on the\n * tutorial object), the content of `prerequisitesAlert` will be shown in the\n * tutorial list underneath the tutorial title.\n *\n * @deprecated Use alert component inside description property directly.\n */\n prerequisitesAlert?: React.ReactNode;\n\n /**\n * If this property is set to `true`, the tutorial list\n * will disable the `Start tutorial` button for this\n * tutorial, and it will show the contents of the\n * tutorial's `prerequisitesAlert` field in an alert underneath\n * the tutorial title.\n */\n prerequisitesNeeded?: boolean;\n\n /**\n * If present, the tutorial list will show a \"Learn More\" link pointing to\n * this URL underneath the tutorial's description.\n */\n learnMoreUrl?: string | null;\n\n /**\n * Whether the user has already completed this tutorial.\n *\n * If this property is set to `true`, the tutorial list\n * will show a status indicator underneath the tutorial\n * title with a message that indicates that this tutorial\n * has already been completed by the user (e.g.\n * \"Tutorial completed\"), and the \"Start tutorial\" button\n * will be replaced by a \"Restart tutorial\" button.\n *\n */\n completed: boolean;\n }\n\n export interface Task {\n /**\n * Title of this task. This is shown in the task list overview of the tutorial's\n * detail view.\n */\n title: string;\n\n /**\n * Steps in this task (in intended order)\n */\n steps: ReadonlyArray<Step>;\n }\n\n export interface Step {\n /**\n * Title of this step. This is shown in the step list in the tutorial's\n * detail view.\n */\n title: string;\n\n /**\n * Content to be shown in the popover of this step. Can be JSX or plain text.\n */\n content: React.ReactNode;\n\n /**\n * If this field is present, a warning alert will be displayed inside\n * the step's popover, showing this field's content. Can be JSX or plain text.\n * @deprecated Use alert component inside content property directly.\n */\n warningAlert?: React.ReactNode;\n\n /**\n * ID of the hotspot that this tutorial step points to.\n *\n * A hotspot with this ID needs to be added manually to the code of the application\n * and represents a location in the application that a tutorial step can be\n * attached to. It can be re-used by multiple tutorials. Hotspot IDs need\n * to be unique in the scope of the whole application that uses this tutorial.\n */\n hotspotId: string;\n }\n\n export interface I18nStrings {\n loadingText: string;\n\n tutorialListTitle: string;\n tutorialListDescription: React.ReactNode;\n tutorialListDownloadLinkText: string;\n\n tutorialCompletedText: string;\n learnMoreLinkText: string;\n\n startTutorialButtonText: string;\n restartTutorialButtonText: string;\n\n completionScreenTitle: string;\n\n feedbackLinkText: string;\n dismissTutorialButtonText: string;\n\n taskTitle: (taskIndex: number, taskTitle: string) => string;\n stepTitle: (stepIndex: number, stepTitle: string) => string;\n\n labelExitTutorial: string;\n labelTotalSteps: (totalStepCount: number) => string;\n labelLearnMoreExternalIcon: string;\n\n labelsTaskStatus: {\n pending: string;\n 'in-progress': string;\n success: string;\n };\n\n labelTutorialListDownloadLink?: string;\n labelLearnMoreLink?: string;\n }\n}\n"]}
|