@cloudscape-design/components 3.0.0

package/tutorial-panel/components/tutorial-list/styles.selectors.js

@@ -0,0 +1,24 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "content-enter": "awsui_content-enter_ig8mp_1eh3a_93",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_ig8mp_1eh3a_1",
+  "tutorial-list": "awsui_tutorial-list_ig8mp_1eh3a_119",
+  "tutorial-box": "awsui_tutorial-box_ig8mp_1eh3a_132",
+  "tutorial-box-title": "awsui_tutorial-box-title_ig8mp_1eh3a_150",
+  "tutorial-description-plaintext": "awsui_tutorial-description-plaintext_ig8mp_1eh3a_156",
+  "tutorial-description": "awsui_tutorial-description_ig8mp_1eh3a_156",
+  "expandable-section": "awsui_expandable-section_ig8mp_1eh3a_168",
+  "expanded": "awsui_expanded_ig8mp_1eh3a_172",
+  "button-wrapper": "awsui_button-wrapper_ig8mp_1eh3a_176",
+  "start": "awsui_start_ig8mp_1eh3a_180",
+  "expand-button": "awsui_expand-button_ig8mp_1eh3a_184",
+  "collapse-button": "awsui_collapse-button_ig8mp_1eh3a_188",
+  "learn-more-link": "awsui_learn-more-link_ig8mp_1eh3a_192",
+  "title": "awsui_title_ig8mp_1eh3a_196",
+  "prerequisites-alert": "awsui_prerequisites-alert_ig8mp_1eh3a_200",
+  "completed": "awsui_completed_ig8mp_1eh3a_204",
+  "download-link": "awsui_download-link_ig8mp_1eh3a_208"
+};
+  

package/tutorial-panel/index.d.ts

@@ -0,0 +1,4 @@
+import { TutorialPanelProps } from './interfaces';
+export { TutorialPanelProps };
+export default function TutorialPanel({ i18nStrings, loading, tutorials, onFeedbackClick, downloadUrl, ...restProps }: TutorialPanelProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/tutorial-panel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tutorial-panel/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAOlD,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAS9B,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,WAAW,EACX,OAAO,EACP,SAAS,EACT,eAAe,EACf,WAAW,EAGX,GAAG,SAAS,EACb,EAAE,kBAAkB,eAiCpB"}

package/tutorial-panel/index.js

@@ -0,0 +1,34 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from 'clsx';
+import React, { useContext } from 'react';
+import { getBaseProps } from '../internal/base-component';
+import styles from './styles.css.js';
+import TutorialList from './components/tutorial-list';
+import TutorialDetailView from './components/tutorial-detail-view';
+import { hotspotContext } from '../annotation-context/context';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import useBaseComponent from '../internal/hooks/use-base-component';
+var defaultFilteringFunction = function (tutorial, searchTerm) {
+    var _a;
+    if (searchTerm === '') {
+        return true;
+    }
+    return ((_a = tutorial.title) === null || _a === void 0 ? void 0 : _a.toLowerCase().indexOf(searchTerm.toLowerCase())) !== -1;
+};
+export default function TutorialPanel(_a) {
+    var i18nStrings = _a.i18nStrings, loading = _a.loading, tutorials = _a.tutorials, onFeedbackClick = _a.onFeedbackClick, downloadUrl = _a.downloadUrl, 
+    // Filtering is not available in the Beta release.
+    //filteringFunction: customFilteringFunction,
+    restProps = __rest(_a, ["i18nStrings", "loading", "tutorials", "onFeedbackClick", "downloadUrl"]);
+    var __internalRootRef = useBaseComponent('TutorialPanel').__internalRootRef;
+    var baseProps = getBaseProps(restProps);
+    var context = useContext(hotspotContext);
+    //const filteringFunction = customFilteringFunction ?? defaultFilteringFunction;
+    var filteringFunction = defaultFilteringFunction;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles['tutorial-panel']), ref: __internalRootRef }), context.currentTutorial ? (React.createElement(TutorialDetailView, { i18nStrings: i18nStrings, tutorial: context.currentTutorial, onExitTutorial: context.onExitTutorial, currentStepIndex: context.currentStepIndex, onFeedbackClick: onFeedbackClick })) : (React.createElement(TutorialList, { i18nStrings: i18nStrings, tutorials: tutorials, loading: loading, onStartTutorial: context.onStartTutorial, filteringFunction: filteringFunction, downloadUrl: downloadUrl })))));
+}
+applyDisplayName(TutorialPanel, 'TutorialPanel');
+//# sourceMappingURL=index.js.map

package/tutorial-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tutorial-panel/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,kBAAkB,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAIpE,IAAM,wBAAwB,GAAG,UAAC,QAAqC,EAAE,UAAkB;;IACzF,IAAI,UAAU,KAAK,EAAE,EAAE;QACrB,OAAO,IAAI,CAAC;KACb;IACD,OAAO,CAAA,MAAA,QAAQ,CAAC,KAAK,0CAAE,WAAW,GAAG,OAAO,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,MAAK,CAAC,CAAC,CAAC;AAChF,CAAC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EASjB;IARnB,IAAA,WAAW,iBAAA,EACX,OAAO,aAAA,EACP,SAAS,eAAA,EACT,eAAe,qBAAA,EACf,WAAW,iBAAA;IACX,kDAAkD;IAClD,6CAA6C;IAC1C,SAAS,cARwB,yEASrC,CADa;IAEJ,IAAA,iBAAiB,GAAK,gBAAgB,CAAC,eAAe,CAAC,kBAAtC,CAAuC;IAEhE,IAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,IAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAE3C,gFAAgF;IAChF,IAAM,iBAAiB,GAAG,wBAAwB,CAAC;IAEnD,OAAO,CACL;QACE,wCAAS,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,GAAG,EAAE,iBAAiB,KACvG,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CACzB,oBAAC,kBAAkB,IACjB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,OAAO,CAAC,eAAe,EACjC,cAAc,EAAE,OAAO,CAAC,cAAc,EACtC,gBAAgB,EAAE,OAAO,CAAC,gBAAgB,EAC1C,eAAe,EAAE,eAAe,GAChC,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,YAAY,IACX,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,OAAO,CAAC,eAAe,EACxC,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,WAAW,GACxB,CACH,CACG,CACL,CACJ,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useContext } from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport styles from './styles.css.js';\n\nimport { TutorialPanelProps } from './interfaces';\nimport TutorialList from './components/tutorial-list';\nimport TutorialDetailView from './components/tutorial-detail-view';\nimport { hotspotContext } from '../annotation-context/context';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { TutorialPanelProps };\n\nconst defaultFilteringFunction = (tutorial: TutorialPanelProps.Tutorial, searchTerm: string) => {\n  if (searchTerm === '') {\n    return true;\n  }\n  return tutorial.title?.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1;\n};\n\nexport default function TutorialPanel({\n  i18nStrings,\n  loading,\n  tutorials,\n  onFeedbackClick,\n  downloadUrl,\n  // Filtering is not available in the Beta release.\n  //filteringFunction: customFilteringFunction,\n  ...restProps\n}: TutorialPanelProps) {\n  const { __internalRootRef } = useBaseComponent('TutorialPanel');\n\n  const baseProps = getBaseProps(restProps);\n  const context = useContext(hotspotContext);\n\n  //const filteringFunction = customFilteringFunction ?? defaultFilteringFunction;\n  const filteringFunction = defaultFilteringFunction;\n\n  return (\n    <>\n      <div {...baseProps} className={clsx(baseProps.className, styles['tutorial-panel'])} ref={__internalRootRef}>\n        {context.currentTutorial ? (\n          <TutorialDetailView\n            i18nStrings={i18nStrings}\n            tutorial={context.currentTutorial}\n            onExitTutorial={context.onExitTutorial}\n            currentStepIndex={context.currentStepIndex}\n            onFeedbackClick={onFeedbackClick}\n          />\n        ) : (\n          <TutorialList\n            i18nStrings={i18nStrings}\n            tutorials={tutorials}\n            loading={loading}\n            onStartTutorial={context.onStartTutorial}\n            filteringFunction={filteringFunction}\n            downloadUrl={downloadUrl}\n          />\n        )}\n      </div>\n    </>\n  );\n}\n\napplyDisplayName(TutorialPanel, 'TutorialPanel');\n"]}

package/tutorial-panel/interfaces.d.ts

@@ -0,0 +1,184 @@
+import React from 'react';
+import { BaseComponentProps } from '../internal/base-component';
+import { NonCancelableEventHandler } from '../internal/events';
+export interface TutorialPanelProps extends BaseComponentProps {
+    /**
+     * Whether the content of the panel is currently loading. If this property
+     * is set to `true`, the panel displays a spinner and the loadingText that is
+     * specified in the `i18nStrings` property.
+     */
+    loading?: boolean;
+    /**
+     * List of all available tutorials. An array of objects with the following properties:
+     *
+     * * `title` (string) - Name of the tutorial
+     *
+     * * `description` (ReactNode) - Short description of the tutorial's content.
+     *
+     * * `tasks` - Array of tasks (in intended order). Each Task has the following properties:
+     *   * `title` (string) - Name of this task. This is shown in the task list overview of the tutorial's detail view.
+     *   * `steps` - Array of steps in this task (in intended order). Each step has the following properties:
+     *     * `title` (string) - Title of this step. This is shown in the step list in the tutorial's detail view.
+     *     * `content` (ReactNode) - Content to be shown in the popover of this step. Can be JSX or plain text.
+     *     * `warningAlert` (ReactNode) - (Optional) If this field is present, a warning alert will be displayed
+     *        inside the step's popover, showing this field's content. Can be JSX or plain text.
+     *     * `hotspotId` (string) - ID of the hotspot that this tutorial step points to.
+     *
+     *        A hotspot with this ID needs to be added manually to the code of the application and represents a location
+     *        in the application that a tutorial step can be attached to. It can be re-used by multiple tutorials. Hotspot
+     *        IDs need to be unique in the scope of the whole application that uses this tutorial.
+     *
+     * * `completedScreenDescription` (ReactNode) - Description to be shown on the last page of the tutorial, when the
+     *    user has successfully completed the tutorial.
+     *
+     * * `prerequisitesAlert` (ReactNode) - (Optional) If the application determines that the user cannot start the tutorial
+     *    yet (by specifying the property `prerequisitesNeeded` on the tutorial object), the content of `prerequisitesAlert`
+     *    will be shown in the tutorial list underneath the tutorial title.
+     *
+     *    Example: `<><Link>Create a bucket first</Link> to complete this tutorial.</>`
+     *
+     * * `prerequisitesNeeded` (boolean) - (Optional) If this property is set to `true`, the tutorial list will disable the
+     *   `Start tutorial` button for this tutorial, and it will show the contents of the tutorial's `prerequisitesAlert` field
+     *    in an alert underneath the tutorial title.
+     *
+     * * `learnMoreUrl` (string | null) - (Optional) If present, the tutorial list will show a "Learn More" link pointing to
+     *    this URL underneath the tutorial's description.
+     *
+     * * `completed` (boolean) - Whether the user has already completed this tutorial.
+     *
+     *   If this property is set to `true`, the tutorial list will show a status indicator underneath the tutorial title with
+     *   a message that indicates that this tutorial has already been completed by the user (e.g. "Tutorial completed"), and
+     *   the "Start tutorial" button will be replaced by a "Restart tutorial" button.
+     */
+    tutorials: ReadonlyArray<TutorialPanelProps.Tutorial>;
+    /**
+     * The link to a file documenting all tutorials (usually a PDF).
+     */
+    downloadUrl: string;
+    /**
+     * An object containing all the necessary localized strings required by the component.
+     */
+    i18nStrings: TutorialPanelProps.I18nStrings;
+    /**
+     * Fired when the user clicks on the feedback link at the end of a tutorial.
+     */
+    onFeedbackClick: NonCancelableEventHandler<TutorialPanelProps.TutorialDetail>;
+}
+export declare namespace TutorialPanelProps {
+    interface TutorialDetail {
+        tutorial: Tutorial;
+    }
+    interface Tutorial {
+        /**
+         * Title of the tutorial
+         * */
+        title: string;
+        /**
+         * Short description of the tutorial's content. This is displayed in the tutorial list.
+         */
+        description: React.ReactNode;
+        /**
+         * List of tasks (in intended order)
+         */
+        tasks: ReadonlyArray<Task>;
+        /**
+         * Description to be shown on the last page of the tutorial, when the user has
+         * successfully completed the tutorial.
+         */
+        completedScreenDescription: React.ReactNode;
+        /**
+         * If the application determines that the user cannot start
+         * the tutorial yet (by specifying the property `prerequisitesNeeded` on the
+         * tutorial object), the content of `prerequisitesAlert` will be shown in the
+         * tutorial list underneath the tutorial title.
+         *
+         * Example: `<><Link>Create a bucket first</Link> to complete this tutorial.</>`
+         */
+        prerequisitesAlert?: React.ReactNode;
+        /**
+         * If this property is set to `true`, the tutorial list
+         * will disable the `Start tutorial` button for this
+         * tutorial, and it will show the contents of the
+         * tutorial's `prerequisitesAlert` field in an alert underneath
+         * the tutorial title.
+         */
+        prerequisitesNeeded?: boolean;
+        /**
+         * If present, the tutorial list will show a "Learn More" link pointing to
+         * this URL underneath the tutorial's description.
+         */
+        learnMoreUrl?: string | null;
+        /**
+         * Whether the user has already completed this tutorial.
+         *
+         * If this property is set to `true`, the tutorial list
+         * will show a status indicator underneath the tutorial
+         * title with a message that indicates that this tutorial
+         * has already been completed by the user (e.g.
+         * "Tutorial completed"), and the "Start tutorial" button
+         * will be replaced by a "Restart tutorial" button.
+         *
+         */
+        completed: boolean;
+    }
+    interface Task {
+        /**
+         * Title of this task. This is shown in the task list overview of the tutorial's
+         * detail view.
+         */
+        title: string;
+        /**
+         * Steps in this task (in intended order)
+         */
+        steps: ReadonlyArray<Step>;
+    }
+    interface Step {
+        /**
+         * Title of this step. This is shown in the step list in the tutorial's
+         * detail view.
+         */
+        title: string;
+        /**
+         * Content to be shown in the popover of this step. Can be JSX or plain text.
+         */
+        content: React.ReactNode;
+        /**
+         * If this field is present, a warning alert will be displayed inside
+         * the step's popover, showing this field's content. Can be JSX or plain text.
+         */
+        warningAlert?: React.ReactNode;
+        /**
+         * ID of the hotspot that this tutorial step points to.
+         *
+         * A hotspot with this ID needs to be added manually to the code of the application
+         * and represents a location in the application that a tutorial step can be
+         * attached to. It can be re-used by multiple tutorials. Hotspot IDs need
+         * to be unique in the scope of the whole application that uses this tutorial.
+         */
+        hotspotId: string;
+    }
+    interface I18nStrings {
+        loadingText: string;
+        tutorialListTitle: string;
+        tutorialListDescription: React.ReactNode;
+        tutorialListDownloadLinkText: string;
+        tutorialCompletedText: string;
+        learnMoreLinkText: string;
+        startTutorialButtonText: string;
+        restartTutorialButtonText: string;
+        completionScreenTitle: string;
+        feedbackLinkText: string;
+        dismissTutorialButtonText: string;
+        taskTitle: (taskIndex: number, taskTitle: string) => string;
+        stepTitle: (stepIndex: number, stepTitle: string) => string;
+        labelExitTutorial: string;
+        labelTotalSteps: (totalStepCount: number) => string;
+        labelLearnMoreExternalIcon: string;
+        labelsTaskStatus: {
+            pending: string;
+            'in-progress': string;
+            success: string;
+        };
+    }
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/tutorial-panel/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/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,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,WAAW,EAAE,kBAAkB,CAAC,WAAW,CAAC;IAE5C;;OAEG;IACH,eAAe,EAAE,yBAAyB,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC;CAO/E;AAED,yBAAiB,kBAAkB,CAAC;IAClC,UAAiB,cAAc;QAC7B,QAAQ,EAAE,QAAQ,CAAC;KACpB;IAED,UAAiB,QAAQ;QACvB;;aAEK;QACL,KAAK,EAAE,MAAM,CAAC;QAEd;;WAEG;QACH,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;QAE7B;;WAEG;QACH,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QAE3B;;;WAGG;QACH,0BAA0B,EAAE,KAAK,CAAC,SAAS,CAAC;QAE5C;;;;;;;WAOG;QACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAErC;;;;;;WAMG;QACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;QAE9B;;;WAGG;QACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAE7B;;;;;;;;;;WAUG;QACH,SAAS,EAAE,OAAO,CAAC;KACpB;IAED,UAAiB,IAAI;QACnB;;;WAGG;QACH,KAAK,EAAE,MAAM,CAAC;QAEd;;WAEG;QACH,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;KAC5B;IAED,UAAiB,IAAI;QACnB;;;WAGG;QACH,KAAK,EAAE,MAAM,CAAC;QAEd;;WAEG;QACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QAEzB;;;WAGG;QACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAE/B;;;;;;;WAOG;QACH,SAAS,EAAE,MAAM,CAAC;KACnB;IAED,UAAiB,WAAW;QAC1B,WAAW,EAAE,MAAM,CAAC;QAEpB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,uBAAuB,EAAE,KAAK,CAAC,SAAS,CAAC;QACzC,4BAA4B,EAAE,MAAM,CAAC;QAErC,qBAAqB,EAAE,MAAM,CAAC;QAC9B,iBAAiB,EAAE,MAAM,CAAC;QAE1B,uBAAuB,EAAE,MAAM,CAAC;QAChC,yBAAyB,EAAE,MAAM,CAAC;QAElC,qBAAqB,EAAE,MAAM,CAAC;QAE9B,gBAAgB,EAAE,MAAM,CAAC;QACzB,yBAAyB,EAAE,MAAM,CAAC;QAElC,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;QAC5D,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;QAE5D,iBAAiB,EAAE,MAAM,CAAC;QAC1B,eAAe,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,MAAM,CAAC;QACpD,0BAA0B,EAAE,MAAM,CAAC;QAEnC,gBAAgB,EAAE;YAChB,OAAO,EAAE,MAAM,CAAC;YAChB,aAAa,EAAE,MAAM,CAAC;YACtB,OAAO,EAAE,MAAM,CAAC;SACjB,CAAC;KACH;CACF"}

package/tutorial-panel/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/tutorial-panel/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/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  /*\n  Filtering is not available in the Beta release.\n\n  filteringFunction?: (tutorial: TutorialPanelProps.Tutorial, searchTerm: string) => boolean;\n  */\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     * Example: `<><Link>Create a bucket first</Link> to complete this tutorial.</>`\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     */\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}\n"]}

package/tutorial-panel/styles.css.js

@@ -0,0 +1,6 @@
+
+    import './styles.scoped.css';
+    export default {
+  "tutorial-panel": "awsui_tutorial-panel_1oin5_1rx3w_93"
+};
+  

package/tutorial-panel/styles.scoped.css

@@ -0,0 +1,135 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_tutorial-panel_1oin5_1rx3w_93:not(#\9) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  border-collapse: separate;
+  border-spacing: 0;
+  caption-side: top;
+  cursor: auto;
+  direction: ltr;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: left;
+  text-align-last: auto;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  widows: 2;
+  word-spacing: normal;
+  box-sizing: border-box;
+  font-size: 14px;
+  font-size: var(--font-body-m-size-sregvd, 14px);
+  line-height: 22px;
+  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
+  color: #000716;
+  color: var(--color-text-body-default-ajf1h5, #000716);
+  font-weight: 400;
+  font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
+  font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  padding: 0 20px 16px;
+  padding: 0 var(--space-l-4vl6xu, 20px) var(--space-m-17eucw, 16px);
+}

package/tutorial-panel/styles.selectors.js

@@ -0,0 +1,7 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "tutorial-panel": "awsui_tutorial-panel_1oin5_1rx3w_93"
+};
+  

package/wizard/index.d.ts

@@ -0,0 +1,4 @@
+import { WizardProps } from './interfaces';
+export { WizardProps };
+export default function Wizard({ steps, activeStepIndex: controlledActiveStepIndex, i18nStrings, isLoadingNextStep, allowSkipTo, secondaryActions, onCancel, onSubmit, onNavigate, ...rest }: WizardProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/wizard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/wizard/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAO3C,OAAO,EAAE,WAAW,EAAE,CAAC;AAevB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,KAAK,EACL,eAAe,EAAE,yBAAyB,EAC1C,WAAW,EACX,iBAAyB,EACzB,WAAmB,EACnB,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,GAAG,IAAI,EACR,EAAE,WAAW,eAiGb"}

package/wizard/index.js

@@ -0,0 +1,79 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { getBaseProps } from '../internal/base-component';
+import { fireNonCancelableEvent } from '../internal/events';
+import { warnOnce } from '../internal/logging';
+import { useContainerBreakpoints } from '../internal/hooks/container-queries';
+import { useControllable } from '../internal/hooks/use-controllable';
+import WizardForm from './wizard-form';
+import WizardNavigation from './wizard-navigation';
+import styles from './styles.css.js';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+var scrollToTop = function (ref) {
+    var _a;
+    var overflowRegex = /(auto|scroll)/;
+    var parent = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+    while (parent && !overflowRegex.test(getComputedStyle(parent).overflow)) {
+        parent = parent.parentElement;
+    }
+    if (parent) {
+        parent.scrollTop = 0;
+    }
+    else {
+        window.scrollTo(window.pageXOffset, 0);
+    }
+};
+export default function Wizard(_a) {
+    var steps = _a.steps, controlledActiveStepIndex = _a.activeStepIndex, i18nStrings = _a.i18nStrings, _b = _a.isLoadingNextStep, isLoadingNextStep = _b === void 0 ? false : _b, _c = _a.allowSkipTo, allowSkipTo = _c === void 0 ? false : _c, secondaryActions = _a.secondaryActions, onCancel = _a.onCancel, onSubmit = _a.onSubmit, onNavigate = _a.onNavigate, rest = __rest(_a, ["steps", "activeStepIndex", "i18nStrings", "isLoadingNextStep", "allowSkipTo", "secondaryActions", "onCancel", "onSubmit", "onNavigate"]);
+    var __internalRootRef = useBaseComponent('Wizard').__internalRootRef;
+    var baseProps = getBaseProps(rest);
+    var _d = useContainerBreakpoints(['xs']), breakpoint = _d[0], breakpointsRef = _d[1];
+    var refObject = useRef(null);
+    var ref = useMergeRefs(breakpointsRef, refObject, __internalRootRef);
+    var smallContainer = breakpoint === 'default';
+    var _e = useControllable(controlledActiveStepIndex, onNavigate, 0, {
+        componentName: 'Wizard',
+        controlledProp: 'activeStepIndex',
+        changeHandler: 'onNavigate'
+    }), activeStepIndex = _e[0], setActiveStepIndex = _e[1];
+    var actualActiveStepIndex = activeStepIndex ? Math.min(activeStepIndex, steps.length - 1) : 0;
+    var farthestStepIndex = useRef(actualActiveStepIndex);
+    farthestStepIndex.current = Math.max(farthestStepIndex.current, actualActiveStepIndex);
+    var internalRef = useRef(null);
+    useEffect(function () {
+        scrollToTop(internalRef);
+    }, [actualActiveStepIndex]);
+    var isVisualRefresh = useVisualRefresh(refObject);
+    var isLastStep = actualActiveStepIndex >= steps.length - 1;
+    var navigationEvent = function (requestedStepIndex, reason) {
+        setActiveStepIndex(requestedStepIndex);
+        fireNonCancelableEvent(onNavigate, { requestedStepIndex: requestedStepIndex, reason: reason });
+    };
+    var onStepClick = function (stepIndex) { return navigationEvent(stepIndex, 'step'); };
+    var onSkipToClick = function (stepIndex) { return navigationEvent(stepIndex, 'skip'); };
+    var onCancelClick = function () { return fireNonCancelableEvent(onCancel); };
+    var onPreviousClick = function () { return navigationEvent(actualActiveStepIndex - 1, 'previous'); };
+    var onPrimaryClick = isLastStep
+        ? function () { return fireNonCancelableEvent(onSubmit); }
+        : function () { return navigationEvent(actualActiveStepIndex + 1, 'next'); };
+    if (activeStepIndex && activeStepIndex >= steps.length) {
+        warnOnce('Wizard', "You have set `activeStepIndex` to ".concat(activeStepIndex, " but you have provided only ").concat(steps.length, " steps. Its value is ignored and the component uses ").concat(steps.length - 1, " instead."));
+    }
+    if (allowSkipTo && !i18nStrings.skipToButtonLabel) {
+        warnOnce('Wizard', "You have set `allowSkipTo` but you have not provided `i18nStrings.skipToButtonLabel`. The skip-to button will not be rendered.");
+    }
+    return (React.createElement("div", __assign({}, baseProps, { className: clsx(styles.root, baseProps.className), ref: ref }),
+        React.createElement("div", { className: clsx(styles.wizard, isVisualRefresh && styles.refresh, smallContainer && styles['small-container']), ref: internalRef },
+            React.createElement(WizardNavigation, { activeStepIndex: actualActiveStepIndex, farthestStepIndex: farthestStepIndex.current, allowSkipTo: allowSkipTo, hidden: smallContainer, i18nStrings: i18nStrings, isVisualRefresh: isVisualRefresh, isLoadingNextStep: isLoadingNextStep, onStepClick: onStepClick, onSkipToClick: onSkipToClick, steps: steps }),
+            React.createElement("div", { className: clsx(styles.form, isVisualRefresh && styles.refresh, smallContainer && styles['small-container']) },
+                isVisualRefresh && React.createElement("div", { className: clsx(styles.background, 'awsui-context-content-header') }),
+                React.createElement(WizardForm, { steps: steps, isVisualRefresh: isVisualRefresh, showCollapsedSteps: smallContainer, i18nStrings: i18nStrings, activeStepIndex: actualActiveStepIndex, isPrimaryLoading: isLoadingNextStep, allowSkipTo: allowSkipTo, secondaryActions: secondaryActions, onCancelClick: onCancelClick, onPreviousClick: onPreviousClick, onSkipToClick: onSkipToClick, onPrimaryClick: onPrimaryClick })))));
+}
+applyDisplayName(Wizard, 'Wizard');
+//# sourceMappingURL=index.js.map

package/wizard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/wizard/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,gBAAgB,MAAM,qBAAqB,CAAC;AAEnD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAIrE,IAAM,WAAW,GAAG,UAAC,GAAoC;;IACvD,IAAM,aAAa,GAAG,eAAe,CAAC;IACtC,IAAI,MAAM,GAAG,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,0CAAE,aAAa,CAAC;IACzC,OAAO,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE;QACvE,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;KAC/B;IACD,IAAI,MAAM,EAAE;QACV,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC;KACtB;SAAM;QACL,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;KACxC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAWjB;IAVZ,IAAA,KAAK,WAAA,EACY,yBAAyB,qBAAA,EAC1C,WAAW,iBAAA,EACX,yBAAyB,EAAzB,iBAAiB,mBAAG,KAAK,KAAA,EACzB,mBAAmB,EAAnB,WAAW,mBAAG,KAAK,KAAA,EACnB,gBAAgB,sBAAA,EAChB,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,UAAU,gBAAA,EACP,IAAI,cAVsB,yIAW9B,CADQ;IAEC,IAAA,iBAAiB,GAAK,gBAAgB,CAAC,QAAQ,CAAC,kBAA/B,CAAgC;IACzD,IAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAE/B,IAAA,KAA+B,uBAAuB,CAAC,CAAC,IAAI,CAAC,CAAC,EAA7D,UAAU,QAAA,EAAE,cAAc,QAAmC,CAAC;IACrE,IAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC/B,IAAM,GAAG,GAAG,YAAY,CAAC,cAAc,EAAE,SAAS,EAAE,iBAAiB,CAAC,CAAC;IAEvE,IAAM,cAAc,GAAG,UAAU,KAAK,SAAS,CAAC;IAE1C,IAAA,KAAwC,eAAe,CAAC,yBAAyB,EAAE,UAAU,EAAE,CAAC,EAAE;QACtG,aAAa,EAAE,QAAQ;QACvB,cAAc,EAAE,iBAAiB;QACjC,aAAa,EAAE,YAAY;KAC5B,CAAC,EAJK,eAAe,QAAA,EAAE,kBAAkB,QAIxC,CAAC;IACH,IAAM,qBAAqB,GAAG,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhG,IAAM,iBAAiB,GAAG,MAAM,CAAS,qBAAqB,CAAC,CAAC;IAChE,iBAAiB,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAC;IAEvF,IAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,SAAS,CAAC;QACR,WAAW,CAAC,WAAW,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE5B,IAAM,eAAe,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACpD,IAAM,UAAU,GAAG,qBAAqB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAE7D,IAAM,eAAe,GAAG,UAAC,kBAA0B,EAAE,MAAoC;QACvF,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;QACvC,sBAAsB,CAAC,UAAU,EAAE,EAAE,kBAAkB,oBAAA,EAAE,MAAM,QAAA,EAAE,CAAC,CAAC;IACrE,CAAC,CAAC;IACF,IAAM,WAAW,GAAG,UAAC,SAAiB,IAAK,OAAA,eAAe,CAAC,SAAS,EAAE,MAAM,CAAC,EAAlC,CAAkC,CAAC;IAC9E,IAAM,aAAa,GAAG,UAAC,SAAiB,IAAK,OAAA,eAAe,CAAC,SAAS,EAAE,MAAM,CAAC,EAAlC,CAAkC,CAAC;IAChF,IAAM,aAAa,GAAG,cAAM,OAAA,sBAAsB,CAAC,QAAQ,CAAC,EAAhC,CAAgC,CAAC;IAC7D,IAAM,eAAe,GAAG,cAAM,OAAA,eAAe,CAAC,qBAAqB,GAAG,CAAC,EAAE,UAAU,CAAC,EAAtD,CAAsD,CAAC;IACrF,IAAM,cAAc,GAAG,UAAU;QAC/B,CAAC,CAAC,cAAM,OAAA,sBAAsB,CAAC,QAAQ,CAAC,EAAhC,CAAgC;QACxC,CAAC,CAAC,cAAM,OAAA,eAAe,CAAC,qBAAqB,GAAG,CAAC,EAAE,MAAM,CAAC,EAAlD,CAAkD,CAAC;IAE7D,IAAI,eAAe,IAAI,eAAe,IAAI,KAAK,CAAC,MAAM,EAAE;QACtD,QAAQ,CACN,QAAQ,EACR,4CAAuC,eAAe,yCACpD,KAAK,CAAC,MAAM,iEACyC,KAAK,CAAC,MAAM,GAAG,CAAC,cAAW,CACnF,CAAC;KACH;IAED,IAAI,WAAW,IAAI,CAAC,WAAW,CAAC,iBAAiB,EAAE;QACjD,QAAQ,CACN,QAAQ,EACR,gIAAoI,CACrI,CAAC;KACH;IAED,OAAO,CACL,wCAAS,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE,GAAG;QAC7E,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,IAAI,MAAM,CAAC,OAAO,EAAE,cAAc,IAAI,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAC9G,GAAG,EAAE,WAAW;YAEhB,oBAAC,gBAAgB,IACf,eAAe,EAAE,qBAAqB,EACtC,iBAAiB,EAAE,iBAAiB,CAAC,OAAO,EAC5C,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,cAAc,EACtB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,eAAe,EAChC,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,GACZ;YACF,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,IAAI,MAAM,CAAC,OAAO,EAAE,cAAc,IAAI,MAAM,CAAC,iBAAiB,CAAC,CAAC;gBAE3G,eAAe,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,8BAA8B,CAAC,GAAI;gBAE/F,oBAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,cAAc,EAClC,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,qBAAqB,EACtC,gBAAgB,EAAE,iBAAiB,EACnC,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,EAC5B,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,GAC9B,CACE,CACF,CACF,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { warnOnce } from '../internal/logging';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport WizardForm from './wizard-form';\nimport WizardNavigation from './wizard-navigation';\nimport { WizardProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nexport { WizardProps };\n\nconst scrollToTop = (ref: React.RefObject<HTMLDivElement>) => {\n  const overflowRegex = /(auto|scroll)/;\n  let parent = ref?.current?.parentElement;\n  while (parent && !overflowRegex.test(getComputedStyle(parent).overflow)) {\n    parent = parent.parentElement;\n  }\n  if (parent) {\n    parent.scrollTop = 0;\n  } else {\n    window.scrollTo(window.pageXOffset, 0);\n  }\n};\n\nexport default function Wizard({\n  steps,\n  activeStepIndex: controlledActiveStepIndex,\n  i18nStrings,\n  isLoadingNextStep = false,\n  allowSkipTo = false,\n  secondaryActions,\n  onCancel,\n  onSubmit,\n  onNavigate,\n  ...rest\n}: WizardProps) {\n  const { __internalRootRef } = useBaseComponent('Wizard');\n  const baseProps = getBaseProps(rest);\n\n  const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n  const refObject = useRef(null);\n  const ref = useMergeRefs(breakpointsRef, refObject, __internalRootRef);\n\n  const smallContainer = breakpoint === 'default';\n\n  const [activeStepIndex, setActiveStepIndex] = useControllable(controlledActiveStepIndex, onNavigate, 0, {\n    componentName: 'Wizard',\n    controlledProp: 'activeStepIndex',\n    changeHandler: 'onNavigate',\n  });\n  const actualActiveStepIndex = activeStepIndex ? Math.min(activeStepIndex, steps.length - 1) : 0;\n\n  const farthestStepIndex = useRef<number>(actualActiveStepIndex);\n  farthestStepIndex.current = Math.max(farthestStepIndex.current, actualActiveStepIndex);\n\n  const internalRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    scrollToTop(internalRef);\n  }, [actualActiveStepIndex]);\n\n  const isVisualRefresh = useVisualRefresh(refObject);\n  const isLastStep = actualActiveStepIndex >= steps.length - 1;\n\n  const navigationEvent = (requestedStepIndex: number, reason: WizardProps.NavigationReason) => {\n    setActiveStepIndex(requestedStepIndex);\n    fireNonCancelableEvent(onNavigate, { requestedStepIndex, reason });\n  };\n  const onStepClick = (stepIndex: number) => navigationEvent(stepIndex, 'step');\n  const onSkipToClick = (stepIndex: number) => navigationEvent(stepIndex, 'skip');\n  const onCancelClick = () => fireNonCancelableEvent(onCancel);\n  const onPreviousClick = () => navigationEvent(actualActiveStepIndex - 1, 'previous');\n  const onPrimaryClick = isLastStep\n    ? () => fireNonCancelableEvent(onSubmit)\n    : () => navigationEvent(actualActiveStepIndex + 1, 'next');\n\n  if (activeStepIndex && activeStepIndex >= steps.length) {\n    warnOnce(\n      'Wizard',\n      `You have set \\`activeStepIndex\\` to ${activeStepIndex} but you have provided only ${\n        steps.length\n      } steps. Its value is ignored and the component uses ${steps.length - 1} instead.`\n    );\n  }\n\n  if (allowSkipTo && !i18nStrings.skipToButtonLabel) {\n    warnOnce(\n      'Wizard',\n      `You have set \\`allowSkipTo\\` but you have not provided \\`i18nStrings.skipToButtonLabel\\`. The skip-to button will not be rendered.`\n    );\n  }\n\n  return (\n    <div {...baseProps} className={clsx(styles.root, baseProps.className)} ref={ref}>\n      <div\n        className={clsx(styles.wizard, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n        ref={internalRef}\n      >\n        <WizardNavigation\n          activeStepIndex={actualActiveStepIndex}\n          farthestStepIndex={farthestStepIndex.current}\n          allowSkipTo={allowSkipTo}\n          hidden={smallContainer}\n          i18nStrings={i18nStrings}\n          isVisualRefresh={isVisualRefresh}\n          isLoadingNextStep={isLoadingNextStep}\n          onStepClick={onStepClick}\n          onSkipToClick={onSkipToClick}\n          steps={steps}\n        />\n        <div\n          className={clsx(styles.form, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n        >\n          {isVisualRefresh && <div className={clsx(styles.background, 'awsui-context-content-header')} />}\n\n          <WizardForm\n            steps={steps}\n            isVisualRefresh={isVisualRefresh}\n            showCollapsedSteps={smallContainer}\n            i18nStrings={i18nStrings}\n            activeStepIndex={actualActiveStepIndex}\n            isPrimaryLoading={isLoadingNextStep}\n            allowSkipTo={allowSkipTo}\n            secondaryActions={secondaryActions}\n            onCancelClick={onCancelClick}\n            onPreviousClick={onPreviousClick}\n            onSkipToClick={onSkipToClick}\n            onPrimaryClick={onPrimaryClick}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n\napplyDisplayName(Wizard, 'Wizard');\n"]}