@cloudscape-design/components 3.0.0

package/code-editor/index.js

@@ -0,0 +1,221 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { ResizableBox } from 'react-resizable';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+import { getBaseProps } from '../internal/base-component';
+import { KeyCode } from '../internal/keycode';
+import { useUniqueId } from '../internal/hooks/use-unique-id';
+import { Pane } from './pane';
+import { useChangeEffect } from './listeners';
+import { getDefaultConfig, getAceTheme, getLanguageLabel, DEFAULT_DARK_THEME, DEFAULT_LIGHT_THEME, getDefaultTheme, } from './util';
+import { fireNonCancelableEvent } from '../internal/events';
+import { setupEditor } from './setup-editor';
+import handler from './resize-handler';
+import PreferencesModal from './preferences-modal';
+import LoadingScreen from './loading-screen';
+import ErrorScreen from './error-screen';
+import styles from './styles.css.js';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import { useContainerQuery } from '../internal/hooks/container-queries/use-container-query';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { useCurrentMode } from '../internal/hooks/use-visual-mode';
+import { StatusBar } from './status-bar';
+import { useFormFieldContext } from '../internal/context/form-field-context';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import { useControllable } from '../internal/hooks/use-controllable';
+export default function CodeEditor(props) {
+    var _a;
+    var __internalRootRef = useBaseComponent('CodeEditor').__internalRootRef;
+    var _b = useFormFieldContext(props), controlId = _b.controlId, ariaLabelledby = _b.ariaLabelledby, ariaDescribedby = _b.ariaDescribedby;
+    var ace = props.ace, value = props.value, language = props.language, i18nStrings = props.i18nStrings, editorContentHeight = props.editorContentHeight, onEditorContentResize = props.onEditorContentResize, rest = __rest(props, ["ace", "value", "language", "i18nStrings", "editorContentHeight", "onEditorContentResize"]);
+    var _c = useControllable(editorContentHeight, onEditorContentResize, 480, {
+        componentName: 'code-editor',
+        changeHandler: 'onEditorContentResize',
+        controlledProp: 'editorContentHeight'
+    }), _d = _c[0], editorHeight = _d === void 0 ? 480 : _d, setEditorHeight = _c[1];
+    var baseProps = getBaseProps(rest);
+    var _e = useState(), editor = _e[0], setEditor = _e[1];
+    var mode = useCurrentMode(__internalRootRef);
+    var defaultTheme = mode === 'dark' ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME;
+    var editorRef = useCallback(function (elem) {
+        if (!ace || !elem) {
+            return;
+        }
+        var config = getDefaultConfig();
+        setEditor(ace.edit(elem, __assign(__assign({}, config), { theme: getAceTheme(getDefaultTheme(elem)) })));
+    }, [ace]); // loads as soon as ace lib is available
+    useEffect(function () {
+        if (!editor) {
+            return;
+        }
+        var textarea = editor.renderer.textarea;
+        if (!textarea) {
+            return;
+        }
+        var updateAttribute = function (attribute, value) {
+            return value ? textarea.setAttribute(attribute, value) : textarea.removeAttribute(attribute);
+        };
+        updateAttribute('id', controlId);
+        updateAttribute('aria-labelledby', ariaLabelledby);
+        updateAttribute('aria-describedby', ariaDescribedby);
+    }, [ariaDescribedby, ariaLabelledby, controlId, editor]);
+    var _f = useState('hidden'), paneStatus = _f[0], setPaneStatus = _f[1];
+    var _g = useState([]), annotations = _g[0], setAnnotations = _g[1];
+    var _h = useState(), highlightedAnnotation = _h[0], setHighlightedAnnotation = _h[1];
+    var _j = useState(''), languageLabel = _j[0], setLanguageLabel = _j[1];
+    var _k = useState({ row: 0, column: 0 }), cursorPosition = _k[0], setCursorPosition = _k[1];
+    var _l = useState(false), isTabFocused = _l[0], setTabFocused = _l[1];
+    var errorsTabRef = useRef(null);
+    var warningsTabRef = useRef(null);
+    var _m = useContainerQuery(function (rect) { return rect.width; }), codeEditorWidth = _m[0], codeEditorMeasureRef = _m[1];
+    var refObject = useRef(null);
+    var mergedRef = useMergeRefs(codeEditorMeasureRef, refObject, __internalRootRef);
+    var isRefresh = useVisualRefresh(refObject);
+    useEffect(function () {
+        editor === null || editor === void 0 ? void 0 : editor.resize();
+    }, [editor, editorContentHeight, codeEditorWidth]);
+    var paneId = useUniqueId('code-editor-pane');
+    useEffect(function () {
+        if (!ace || !editor) {
+            return;
+        }
+        setupEditor(ace, editor, setAnnotations, setCursorPosition, setHighlightedAnnotation, setPaneStatus);
+        return function () {
+            editor === null || editor === void 0 ? void 0 : editor.destroy();
+        }; // TODO profile/monitor this
+    }, [ace, editor, __internalRootRef]);
+    useEffect(function () {
+        if (!editor) {
+            return;
+        }
+        if (value === editor.getValue()) {
+            return;
+        }
+        // TODO maintain cursor position?
+        var pos = editor.session.selection.toJSON();
+        editor.setValue(value, -1);
+        editor.session.selection.fromJSON(pos);
+    }, [editor, value]);
+    useEffect(function () {
+        if (!editor) {
+            return;
+        }
+        editor.session.setMode("ace/mode/".concat(language));
+        setLanguageLabel(getLanguageLabel(language));
+    }, [editor, language]);
+    useEffect(function () {
+        var _a, _b, _c, _d;
+        if (!editor) {
+            return;
+        }
+        var theme = (_b = (_a = props.preferences) === null || _a === void 0 ? void 0 : _a.theme) !== null && _b !== void 0 ? _b : defaultTheme;
+        editor.setTheme(getAceTheme(theme));
+        editor.session.setUseWrapMode((_d = (_c = props.preferences) === null || _c === void 0 ? void 0 : _c.wrapLines) !== null && _d !== void 0 ? _d : true);
+    }, [editor, defaultTheme, props.preferences]);
+    // listeners
+    useChangeEffect(editor, props.onChange, props.onDelayedChange);
+    // TODO implement other listeners
+    // Hide error panel when there are no errors to show.
+    useEffect(function () {
+        if (annotations.length === 0) {
+            setPaneStatus('hidden');
+        }
+        if (props.onValidate) {
+            fireNonCancelableEvent(props.onValidate, { annotations: annotations });
+        }
+    }, [annotations, props.onValidate]);
+    var errorCount = annotations.filter(function (a) { return a.type === 'error'; }).length;
+    var warningCount = annotations.filter(function (a) { return a.type === 'warning'; }).length;
+    var currentAnnotations = useMemo(function () { return annotations.filter(function (a) { return a.type === paneStatus; }); }, [annotations, paneStatus]);
+    /*
+     * Callbacks
+     */
+    var onEditorKeydown = useCallback(function (e) {
+        if (editor && e.target === editor.container && e.keyCode === KeyCode.enter) {
+            e.stopPropagation();
+            e.preventDefault();
+            editor.focus();
+        }
+    }, [editor]);
+    var onTabFocus = useCallback(function () { return setTabFocused(true); }, []);
+    var onTabBlur = useCallback(function () { return setTabFocused(false); }, []);
+    var onResize = useCallback(function () {
+        editor === null || editor === void 0 ? void 0 : editor.resize();
+    }, [editor]);
+    var onErrorPaneToggle = useCallback(function () {
+        setPaneStatus(paneStatus !== 'error' ? 'error' : 'hidden');
+    }, [paneStatus]);
+    var onWarningPaneToggle = useCallback(function () {
+        setPaneStatus(paneStatus !== 'warning' ? 'warning' : 'hidden');
+    }, [paneStatus]);
+    var onPaneClose = useCallback(function () {
+        if (paneStatus === 'error' && errorsTabRef.current) {
+            errorsTabRef.current.focus();
+        }
+        if (paneStatus === 'warning' && warningsTabRef.current) {
+            warningsTabRef.current.focus();
+        }
+        setPaneStatus('hidden');
+    }, [paneStatus]);
+    var onAnnotationClick = function (_a) {
+        var _b = _a.row, row = _b === void 0 ? 0 : _b, _c = _a.column, column = _c === void 0 ? 0 : _c;
+        if (!editor) {
+            return;
+        }
+        editor.focus();
+        editor.gotoLine(row + 1, column, false);
+        setHighlightedAnnotation(undefined);
+    };
+    var onAnnotationClear = useCallback(function () {
+        setHighlightedAnnotation(undefined);
+    }, []);
+    /**
+     * Ignore focus lock if focused element is the pane tab button or within editor tree.
+     * This check is required:
+     * - When closing the pane with `ESC` key: The panel closes asynchronously and its focus lock
+     *   still exists when trying to focus the tab button in higher-order component.
+     * - When clicking or hittin `Enter` on an annotation: The panel remains open but focus lock
+     *   deactivates asynchronously.
+     */
+    var shouldHandleFocus = useCallback(function (activeElement) {
+        return (activeElement !== errorsTabRef.current &&
+            activeElement !== warningsTabRef.current &&
+            !(editor === null || editor === void 0 ? void 0 : editor.container.contains(activeElement)));
+    }, [editor]);
+    var _o = useState(false), isPreferencesModalVisible = _o[0], setPreferencesModalVisible = _o[1];
+    var onPreferencesOpen = function () { return setPreferencesModalVisible(true); };
+    var onPreferencesConfirm = function (p) {
+        fireNonCancelableEvent(props.onPreferencesChange, p);
+        setPreferencesModalVisible(false);
+    };
+    var onPreferencesDismiss = function () { return setPreferencesModalVisible(false); };
+    return (React.createElement("div", __assign({}, baseProps, { className: clsx(styles['code-editor'], baseProps.className, (_a = {}, _a[styles['code-editor-refresh']] = isRefresh, _a)), ref: mergedRef }),
+        props.loading && React.createElement(LoadingScreen, null, i18nStrings.loadingState),
+        !ace && !props.loading && (React.createElement(ErrorScreen, { recoveryText: i18nStrings.errorStateRecovery, onRecoveryClick: props.onRecoveryClick }, i18nStrings.errorState)),
+        ace && !props.loading && (React.createElement(React.Fragment, null,
+            React.createElement(ResizableBox, { className: styles['resizable-box'], width: Infinity, height: Math.max(editorHeight, 20), minConstraints: [Infinity, 20], axis: "y", handle: handler, onResize: function (e, data) {
+                    setEditorHeight(data.size.height);
+                    onResize();
+                    fireNonCancelableEvent(onEditorContentResize, {
+                        height: data.size.height
+                    });
+                } },
+                React.createElement("div", { ref: editorRef, className: clsx(styles.editor, styles.ace), onKeyDown: onEditorKeydown, tabIndex: 0, role: "group", "aria-label": i18nStrings.editorGroupAriaLabel })),
+            React.createElement("div", { role: "group", "aria-label": i18nStrings.statusBarGroupAriaLabel },
+                React.createElement(StatusBar, { languageLabel: languageLabel, cursorPosition: i18nStrings.cursorPosition(cursorPosition.row + 1, cursorPosition.column + 1), errorCount: errorCount, warningCount: warningCount, paneStatus: paneStatus, onErrorPaneToggle: onErrorPaneToggle, onWarningPaneToggle: onWarningPaneToggle, onTabFocus: onTabFocus, onTabBlur: onTabBlur, errorsTabRef: errorsTabRef, warningsTabRef: warningsTabRef, i18nStrings: i18nStrings, isTabFocused: isTabFocused, paneId: paneId, onPreferencesOpen: onPreferencesOpen, isRefresh: isRefresh }),
+                React.createElement(Pane, { id: paneId, visible: paneStatus !== 'hidden', annotations: currentAnnotations, highlighted: highlightedAnnotation, onAnnotationClick: onAnnotationClick, onAnnotationClear: onAnnotationClear, onClose: onPaneClose, onAllowlist: shouldHandleFocus, cursorPositionLabel: i18nStrings.cursorPosition, closeButtonAriaLabel: i18nStrings.paneCloseButtonAriaLabel })),
+            isPreferencesModalVisible && (React.createElement(PreferencesModal, { onConfirm: onPreferencesConfirm, onDismiss: onPreferencesDismiss, preferences: props.preferences, defaultTheme: defaultTheme, i18nStrings: {
+                    header: i18nStrings.preferencesModalHeader,
+                    cancel: i18nStrings.preferencesModalCancel,
+                    confirm: i18nStrings.preferencesModalConfirm,
+                    wrapLines: i18nStrings.preferencesModalWrapLines,
+                    theme: i18nStrings.preferencesModalTheme,
+                    lightThemes: i18nStrings.preferencesModalLightThemes,
+                    darkThemes: i18nStrings.preferencesModalDarkThemes
+                } }))))));
+}
+applyDisplayName(CodeEditor, 'CodeEditor');
+//# sourceMappingURL=index.js.map

package/code-editor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/code-editor/index.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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Ace } from 'ace-builds';\nimport clsx from 'clsx';\nimport { ResizableBox } from 'react-resizable';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { KeyCode } from '../internal/keycode';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { CodeEditorProps } from './interfaces';\nimport { Pane } from './pane';\nimport { useChangeEffect } from './listeners';\nimport {\n  getDefaultConfig,\n  getAceTheme,\n  PaneStatus,\n  getLanguageLabel,\n  DEFAULT_DARK_THEME,\n  DEFAULT_LIGHT_THEME,\n  getDefaultTheme,\n} from './util';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { setupEditor } from './setup-editor';\nimport handler from './resize-handler';\nimport PreferencesModal from './preferences-modal';\nimport LoadingScreen from './loading-screen';\nimport ErrorScreen from './error-screen';\n\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { useContainerQuery } from '../internal/hooks/container-queries/use-container-query';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useCurrentMode } from '../internal/hooks/use-visual-mode';\nimport { StatusBar } from './status-bar';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useControllable } from '../internal/hooks/use-controllable';\nexport { CodeEditorProps };\n\nexport default function CodeEditor(props: CodeEditorProps) {\n  const { __internalRootRef } = useBaseComponent('CodeEditor');\n  const { controlId, ariaLabelledby, ariaDescribedby } = useFormFieldContext(props);\n  const { ace, value, language, i18nStrings, editorContentHeight, onEditorContentResize, ...rest } = props;\n  const [editorHeight = 480, setEditorHeight] = useControllable(editorContentHeight, onEditorContentResize, 480, {\n    componentName: 'code-editor',\n    changeHandler: 'onEditorContentResize',\n    controlledProp: 'editorContentHeight',\n  });\n  const baseProps = getBaseProps(rest);\n\n  const [editor, setEditor] = useState<Ace.Editor>();\n  const mode = useCurrentMode(__internalRootRef);\n  const defaultTheme = mode === 'dark' ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME;\n\n  const editorRef = useCallback(\n    (elem: HTMLDivElement) => {\n      if (!ace || !elem) {\n        return;\n      }\n\n      const config = getDefaultConfig();\n      setEditor(\n        ace.edit(elem, {\n          ...config,\n          theme: getAceTheme(getDefaultTheme(elem)),\n        })\n      );\n    },\n    [ace]\n  ); // loads as soon as ace lib is available\n\n  useEffect(() => {\n    if (!editor) {\n      return;\n    }\n    const { textarea } = editor.renderer as unknown as { textarea: HTMLTextAreaElement };\n    if (!textarea) {\n      return;\n    }\n    const updateAttribute = (attribute: string, value: string | undefined) =>\n      value ? textarea.setAttribute(attribute, value) : textarea.removeAttribute(attribute);\n    updateAttribute('id', controlId);\n    updateAttribute('aria-labelledby', ariaLabelledby);\n    updateAttribute('aria-describedby', ariaDescribedby);\n  }, [ariaDescribedby, ariaLabelledby, controlId, editor]);\n\n  const [paneStatus, setPaneStatus] = useState<PaneStatus>('hidden');\n  const [annotations, setAnnotations] = useState<Ace.Annotation[]>([]);\n  const [highlightedAnnotation, setHighlightedAnnotation] = useState<Ace.Annotation>();\n  const [languageLabel, setLanguageLabel] = useState<string>('');\n  const [cursorPosition, setCursorPosition] = useState<Ace.Point>({ row: 0, column: 0 });\n  const [isTabFocused, setTabFocused] = useState<boolean>(false);\n\n  const errorsTabRef = useRef<HTMLButtonElement>(null);\n  const warningsTabRef = useRef<HTMLButtonElement>(null);\n\n  const [codeEditorWidth, codeEditorMeasureRef] = useContainerQuery(rect => rect.width);\n  const refObject = useRef(null);\n  const mergedRef = useMergeRefs(codeEditorMeasureRef, refObject, __internalRootRef);\n\n  const isRefresh = useVisualRefresh(refObject);\n\n  useEffect(() => {\n    editor?.resize();\n  }, [editor, editorContentHeight, codeEditorWidth]);\n\n  const paneId = useUniqueId('code-editor-pane');\n\n  useEffect(() => {\n    if (!ace || !editor) {\n      return;\n    }\n\n    setupEditor(ace, editor, setAnnotations, setCursorPosition, setHighlightedAnnotation, setPaneStatus);\n\n    return () => {\n      editor?.destroy();\n    }; // TODO profile/monitor this\n  }, [ace, editor, __internalRootRef]);\n\n  useEffect(() => {\n    if (!editor) {\n      return;\n    }\n    if (value === editor.getValue()) {\n      return;\n    }\n    // TODO maintain cursor position?\n    const pos = editor.session.selection.toJSON();\n    editor.setValue(value, -1);\n    editor.session.selection.fromJSON(pos);\n  }, [editor, value]);\n\n  useEffect(() => {\n    if (!editor) {\n      return;\n    }\n    editor.session.setMode(`ace/mode/${language}`);\n\n    setLanguageLabel(getLanguageLabel(language));\n  }, [editor, language]);\n\n  useEffect(() => {\n    if (!editor) {\n      return;\n    }\n\n    const theme: CodeEditorProps.Theme = props.preferences?.theme ?? defaultTheme;\n\n    editor.setTheme(getAceTheme(theme));\n\n    editor.session.setUseWrapMode(props.preferences?.wrapLines ?? true);\n  }, [editor, defaultTheme, props.preferences]);\n\n  // listeners\n  useChangeEffect(editor, props.onChange, props.onDelayedChange);\n  // TODO implement other listeners\n\n  // Hide error panel when there are no errors to show.\n  useEffect(() => {\n    if (annotations.length === 0) {\n      setPaneStatus('hidden');\n    }\n\n    if (props.onValidate) {\n      fireNonCancelableEvent(props.onValidate, { annotations });\n    }\n  }, [annotations, props.onValidate]);\n\n  const errorCount = annotations.filter(a => a.type === 'error').length;\n  const warningCount = annotations.filter(a => a.type === 'warning').length;\n  const currentAnnotations = useMemo(() => annotations.filter(a => a.type === paneStatus), [annotations, paneStatus]);\n\n  /*\n   * Callbacks\n   */\n\n  const onEditorKeydown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (editor && e.target === editor.container && e.keyCode === KeyCode.enter) {\n        e.stopPropagation();\n        e.preventDefault();\n        editor.focus();\n      }\n    },\n    [editor]\n  );\n\n  const onTabFocus = useCallback(() => setTabFocused(true), []);\n  const onTabBlur = useCallback(() => setTabFocused(false), []);\n\n  const onResize = useCallback(() => {\n    editor?.resize();\n  }, [editor]);\n\n  const onErrorPaneToggle = useCallback(() => {\n    setPaneStatus(paneStatus !== 'error' ? 'error' : 'hidden');\n  }, [paneStatus]);\n\n  const onWarningPaneToggle = useCallback(() => {\n    setPaneStatus(paneStatus !== 'warning' ? 'warning' : 'hidden');\n  }, [paneStatus]);\n\n  const onPaneClose = useCallback(() => {\n    if (paneStatus === 'error' && errorsTabRef.current) {\n      errorsTabRef.current.focus();\n    }\n    if (paneStatus === 'warning' && warningsTabRef.current) {\n      warningsTabRef.current.focus();\n    }\n    setPaneStatus('hidden');\n  }, [paneStatus]);\n\n  const onAnnotationClick = ({ row = 0, column = 0 }: Ace.Annotation) => {\n    if (!editor) {\n      return;\n    }\n    editor.focus();\n    editor.gotoLine(row + 1, column, false);\n    setHighlightedAnnotation(undefined);\n  };\n\n  const onAnnotationClear = useCallback(() => {\n    setHighlightedAnnotation(undefined);\n  }, []);\n\n  /**\n   * Ignore focus lock if focused element is the pane tab button or within editor tree.\n   * This check is required:\n   * - When closing the pane with `ESC` key: The panel closes asynchronously and its focus lock\n   *   still exists when trying to focus the tab button in higher-order component.\n   * - When clicking or hittin `Enter` on an annotation: The panel remains open but focus lock\n   *   deactivates asynchronously.\n   */\n  const shouldHandleFocus = useCallback(\n    (activeElement: HTMLElement): boolean => {\n      return (\n        activeElement !== errorsTabRef.current &&\n        activeElement !== warningsTabRef.current &&\n        !editor?.container.contains(activeElement)\n      );\n    },\n    [editor]\n  );\n\n  const [isPreferencesModalVisible, setPreferencesModalVisible] = useState(false);\n  const onPreferencesOpen = () => setPreferencesModalVisible(true);\n  const onPreferencesConfirm = (p: CodeEditorProps.Preferences) => {\n    fireNonCancelableEvent(props.onPreferencesChange, p);\n    setPreferencesModalVisible(false);\n  };\n  const onPreferencesDismiss = () => setPreferencesModalVisible(false);\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(styles['code-editor'], baseProps.className, { [styles['code-editor-refresh']]: isRefresh })}\n      ref={mergedRef}\n    >\n      {props.loading && <LoadingScreen>{i18nStrings.loadingState}</LoadingScreen>}\n\n      {!ace && !props.loading && (\n        <ErrorScreen recoveryText={i18nStrings.errorStateRecovery} onRecoveryClick={props.onRecoveryClick}>\n          {i18nStrings.errorState}\n        </ErrorScreen>\n      )}\n\n      {ace && !props.loading && (\n        <>\n          <ResizableBox\n            className={styles['resizable-box']}\n            width={Infinity}\n            height={Math.max(editorHeight, 20)}\n            minConstraints={[Infinity, 20]}\n            axis=\"y\"\n            handle={handler}\n            onResize={(e, data) => {\n              setEditorHeight(data.size.height);\n              onResize();\n              fireNonCancelableEvent(onEditorContentResize, {\n                height: data.size.height,\n              });\n            }}\n          >\n            <div\n              ref={editorRef}\n              className={clsx(styles.editor, styles.ace)}\n              onKeyDown={onEditorKeydown}\n              tabIndex={0}\n              role=\"group\"\n              aria-label={i18nStrings.editorGroupAriaLabel}\n            />\n          </ResizableBox>\n          <div role=\"group\" aria-label={i18nStrings.statusBarGroupAriaLabel}>\n            <StatusBar\n              languageLabel={languageLabel}\n              cursorPosition={i18nStrings.cursorPosition(cursorPosition.row + 1, cursorPosition.column + 1)}\n              errorCount={errorCount}\n              warningCount={warningCount}\n              paneStatus={paneStatus}\n              onErrorPaneToggle={onErrorPaneToggle}\n              onWarningPaneToggle={onWarningPaneToggle}\n              onTabFocus={onTabFocus}\n              onTabBlur={onTabBlur}\n              errorsTabRef={errorsTabRef}\n              warningsTabRef={warningsTabRef}\n              i18nStrings={i18nStrings}\n              isTabFocused={isTabFocused}\n              paneId={paneId}\n              onPreferencesOpen={onPreferencesOpen}\n              isRefresh={isRefresh}\n            />\n            <Pane\n              id={paneId}\n              visible={paneStatus !== 'hidden'}\n              annotations={currentAnnotations}\n              highlighted={highlightedAnnotation}\n              onAnnotationClick={onAnnotationClick}\n              onAnnotationClear={onAnnotationClear}\n              onClose={onPaneClose}\n              onAllowlist={shouldHandleFocus}\n              cursorPositionLabel={i18nStrings.cursorPosition}\n              closeButtonAriaLabel={i18nStrings.paneCloseButtonAriaLabel}\n            />\n          </div>\n          {isPreferencesModalVisible && (\n            <PreferencesModal\n              onConfirm={onPreferencesConfirm}\n              onDismiss={onPreferencesDismiss}\n              preferences={props.preferences}\n              defaultTheme={defaultTheme}\n              i18nStrings={{\n                header: i18nStrings.preferencesModalHeader,\n                cancel: i18nStrings.preferencesModalCancel,\n                confirm: i18nStrings.preferencesModalConfirm,\n                wrapLines: i18nStrings.preferencesModalWrapLines,\n                theme: i18nStrings.preferencesModalTheme,\n                lightThemes: i18nStrings.preferencesModalLightThemes,\n                darkThemes: i18nStrings.preferencesModalDarkThemes,\n              }}\n            />\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\napplyDisplayName(CodeEditor, 'CodeEditor');\n"]}

package/code-editor/interfaces.d.ts

@@ -0,0 +1,122 @@
+import { Ace } from 'ace-builds';
+import { BaseComponentProps } from '../internal/base-component';
+import { NonCancelableEventHandler } from '../internal/events';
+import { AceModes } from './ace-modes';
+import { DarkThemes, LightThemes } from './ace-themes';
+import { FormFieldControlProps } from '../internal/context/form-field-context';
+export interface CodeEditorProps extends BaseComponentProps, FormFieldControlProps {
+    /**
+     * The ace object.
+     */
+    ace: any;
+    /**
+     * Specifies the content that's displayed in the code editor.
+     */
+    value: string;
+    /**
+     * Specifies the programming language. You can use any of the programming languages supported by the `ace` object that you provide.
+     */
+    language: CodeEditorProps.Language;
+    /**
+     * An event handler called when the value changes.
+     * The event `detail` contains the current value of the code editor content.
+     * **Deprecated**, replaced by `onDelayedChange`.
+     */
+    onChange?: NonCancelableEventHandler<CodeEditorProps.ChangeDetail>;
+    /**
+     * An event handler called when the value changes.
+     * The event `detail` contains the current value of the code editor content.
+     * A user interaction can cause multiple change events to be emitted by the Ace editor. They are batched together into a single `onDelayedChange` event to avoid bugs when controlling the `value` field.
+     */
+    onDelayedChange?: NonCancelableEventHandler<CodeEditorProps.ChangeDetail>;
+    /**
+     * Annotations returned from Ace syntax checker after code validation.
+     */
+    onValidate?: NonCancelableEventHandler<CodeEditorProps.ValidateDetail>;
+    /**
+     * Specifies the component preferences.
+     *
+     * If set to `undefined`, the component uses the following default value:
+     *
+     * ```
+     * {
+     *   wrapLines: true,
+     *   theme: 'dawn'
+     * }
+     * ```
+     *
+     * You can use any theme provided by Ace.
+     */
+    preferences?: Partial<CodeEditorProps.Preferences>;
+    /**
+     * Called when any of the preferences change.
+     * The event `detail` contains the value of all the preferences as submitted by the user.
+     *
+     */
+    onPreferencesChange: NonCancelableEventHandler<CodeEditorProps.Preferences>;
+    /**
+     * Renders the code editor in a loading state.
+     */
+    loading?: boolean;
+    /**
+     * Called when the user clicks the recovery button in the error state.
+     * Use this to retry loading the code editor or to provide another option for the user to recover from the error.
+     */
+    onRecoveryClick?: NonCancelableEventHandler<void>;
+    /**
+     * An object containing all the necessary localized strings required by the component.
+     * The object should contain, among others:
+     *
+     * * `loadingState` - Specifies the text to display while the component is loading.
+     * * `errorState` - Specifies the text to display if there is an error loading Ace.
+     * * `errorStateRecovery`: Specifies the text for the recovery button that's displayed next to the error text.
+     *    Use the `recoveryClick` event to do a recovery action (for example, retrying the request).
+     */
+    i18nStrings: CodeEditorProps.I18nStrings;
+    /**
+     * Specifies the height of the code editor document.
+     */
+    editorContentHeight?: number;
+    /**
+     * Called when the user resizes the editor by dragging the resize icon.
+     * The event `detail` contains the new height of the editor in pixels.
+     */
+    onEditorContentResize?: NonCancelableEventHandler<CodeEditorProps.ResizeDetail>;
+}
+export declare namespace CodeEditorProps {
+    type Language = typeof AceModes[number]['value'];
+    type Theme = typeof LightThemes[number]['value'] | typeof DarkThemes[number]['value'];
+    interface Preferences {
+        wrapLines: boolean;
+        theme: Theme;
+    }
+    interface I18nStrings {
+        loadingState: string;
+        errorState: string;
+        errorStateRecovery: string;
+        editorGroupAriaLabel: string;
+        statusBarGroupAriaLabel: string;
+        cursorPosition: (row: number, column: number) => string;
+        errorsTab: string;
+        warningsTab: string;
+        preferencesButtonAriaLabel: string;
+        paneCloseButtonAriaLabel: string;
+        preferencesModalHeader: string;
+        preferencesModalCancel: string;
+        preferencesModalConfirm: string;
+        preferencesModalWrapLines: string;
+        preferencesModalTheme: string;
+        preferencesModalLightThemes: string;
+        preferencesModalDarkThemes: string;
+    }
+    interface ResizeDetail {
+        height: number;
+    }
+    interface ChangeDetail {
+        value: string;
+    }
+    interface ValidateDetail {
+        annotations: Ace.Annotation[];
+    }
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/code-editor/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/code-editor/interfaces.ts"],"names":[],"mappings":"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"}

package/code-editor/interfaces.js

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

package/code-editor/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/code-editor/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { Ace } from 'ace-builds';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { AceModes } from './ace-modes';\nimport { DarkThemes, LightThemes } from './ace-themes';\nimport { FormFieldControlProps } from '../internal/context/form-field-context';\n\nexport interface CodeEditorProps extends BaseComponentProps, FormFieldControlProps {\n  /**\n   * The ace object.\n   */\n  ace: any;\n\n  /**\n   * Specifies the content that's displayed in the code editor.\n   */\n  value: string;\n\n  /**\n   * Specifies the programming language. You can use any of the programming languages supported by the `ace` object that you provide.\n   */\n  language: CodeEditorProps.Language;\n\n  /**\n   * An event handler called when the value changes.\n   * The event `detail` contains the current value of the code editor content.\n   * **Deprecated**, replaced by `onDelayedChange`.\n   */\n  onChange?: NonCancelableEventHandler<CodeEditorProps.ChangeDetail>;\n\n  /**\n   * An event handler called when the value changes.\n   * The event `detail` contains the current value of the code editor content.\n   * A user interaction can cause multiple change events to be emitted by the Ace editor. They are batched together into a single `onDelayedChange` event to avoid bugs when controlling the `value` field.\n   */\n  onDelayedChange?: NonCancelableEventHandler<CodeEditorProps.ChangeDetail>;\n\n  /**\n   * Annotations returned from Ace syntax checker after code validation.\n   */\n  onValidate?: NonCancelableEventHandler<CodeEditorProps.ValidateDetail>;\n\n  /**\n   * Specifies the component preferences.\n   *\n   * If set to `undefined`, the component uses the following default value:\n   *\n   * ```\n   * {\n   *   wrapLines: true,\n   *   theme: 'dawn'\n   * }\n   * ```\n   *\n   * You can use any theme provided by Ace.\n   */\n  preferences?: Partial<CodeEditorProps.Preferences>;\n\n  /**\n   * Called when any of the preferences change.\n   * The event `detail` contains the value of all the preferences as submitted by the user.\n   *\n   */\n  onPreferencesChange: NonCancelableEventHandler<CodeEditorProps.Preferences>;\n\n  /**\n   * Renders the code editor in a loading state.\n   */\n  loading?: boolean;\n\n  /**\n   * Called when the user clicks the recovery button in the error state.\n   * Use this to retry loading the code editor or to provide another option for the user to recover from the error.\n   */\n  onRecoveryClick?: NonCancelableEventHandler<void>;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * The object should contain, among others:\n   *\n   * * `loadingState` - Specifies the text to display while the component is loading.\n   * * `errorState` - Specifies the text to display if there is an error loading Ace.\n   * * `errorStateRecovery`: Specifies the text for the recovery button that's displayed next to the error text.\n   *    Use the `recoveryClick` event to do a recovery action (for example, retrying the request).\n   */\n  i18nStrings: CodeEditorProps.I18nStrings;\n\n  /**\n   * Specifies the height of the code editor document.\n   */\n  editorContentHeight?: number;\n\n  /**\n   * Called when the user resizes the editor by dragging the resize icon.\n   * The event `detail` contains the new height of the editor in pixels.\n   */\n  onEditorContentResize?: NonCancelableEventHandler<CodeEditorProps.ResizeDetail>;\n}\n\nexport namespace CodeEditorProps {\n  export type Language = typeof AceModes[number]['value'];\n  export type Theme = typeof LightThemes[number]['value'] | typeof DarkThemes[number]['value'];\n\n  export interface Preferences {\n    wrapLines: boolean;\n    theme: Theme;\n  }\n\n  export interface I18nStrings {\n    loadingState: string;\n    errorState: string;\n    errorStateRecovery: string;\n\n    editorGroupAriaLabel: string;\n    statusBarGroupAriaLabel: string;\n\n    cursorPosition: (row: number, column: number) => string;\n    errorsTab: string;\n    warningsTab: string;\n    preferencesButtonAriaLabel: string;\n    paneCloseButtonAriaLabel: string;\n\n    preferencesModalHeader: string;\n    preferencesModalCancel: string;\n    preferencesModalConfirm: string;\n    preferencesModalWrapLines: string;\n    preferencesModalTheme: string;\n    preferencesModalLightThemes: string;\n    preferencesModalDarkThemes: string;\n  }\n  export interface ResizeDetail {\n    height: number;\n  }\n  export interface ChangeDetail {\n    value: string;\n  }\n\n  export interface ValidateDetail {\n    annotations: Ace.Annotation[];\n  }\n}\n"]}

package/code-editor/listeners.d.ts

@@ -0,0 +1,5 @@
+import { Ace } from 'ace-builds';
+import { CodeEditorProps } from './interfaces';
+import { NonCancelableEventHandler } from '../internal/events';
+export declare function useChangeEffect(editor?: Ace.Editor, onChange?: NonCancelableEventHandler<CodeEditorProps.ChangeDetail>, onDelayedChange?: NonCancelableEventHandler<CodeEditorProps.ChangeDetail>): void;
+//# sourceMappingURL=listeners.d.ts.map

package/code-editor/listeners.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listeners.d.ts","sourceRoot":"","sources":["../../../src/code-editor/listeners.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAIvF,wBAAgB,eAAe,CAC7B,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,EACnB,QAAQ,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,YAAY,CAAC,EAClE,eAAe,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,YAAY,CAAC,QAkB1E"}

package/code-editor/listeners.js

@@ -0,0 +1,24 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect } from 'react';
+import { fireNonCancelableEvent } from '../internal/events';
+import { useDebounceCallback } from '../internal/hooks/use-debounce-callback';
+import { useStableEventHandler } from '../internal/hooks/use-stable-event-handler';
+export function useChangeEffect(editor, onChange, onDelayedChange) {
+    var debouncedChangeHandler = useDebounceCallback(function (detail) {
+        fireNonCancelableEvent(onDelayedChange, detail);
+    }, 0);
+    var handleChange = useStableEventHandler(function () {
+        var changeDetail = { value: (editor === null || editor === void 0 ? void 0 : editor.getValue()) || '' };
+        fireNonCancelableEvent(onChange, changeDetail);
+        debouncedChangeHandler(changeDetail);
+    });
+    useEffect(function () {
+        if (!editor) {
+            return;
+        }
+        editor.on('change', handleChange);
+        return function () { return editor.off('change', handleChange); };
+    }, [editor, handleChange]);
+}
+//# sourceMappingURL=listeners.js.map

package/code-editor/listeners.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listeners.js","sourceRoot":"","sources":["../../../src/code-editor/listeners.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAE,sBAAsB,EAA6B,MAAM,oBAAoB,CAAC;AACvF,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AAEnF,MAAM,UAAU,eAAe,CAC7B,MAAmB,EACnB,QAAkE,EAClE,eAAyE;IAEzE,IAAM,sBAAsB,GAAG,mBAAmB,CAAC,UAAC,MAAoC;QACtF,sBAAsB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IAClD,CAAC,EAAE,CAAC,CAAC,CAAC;IACN,IAAM,YAAY,GAAG,qBAAqB,CAAC;QACzC,IAAM,YAAY,GAAG,EAAE,KAAK,EAAE,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,EAAE,KAAI,EAAE,EAAE,CAAC;QACzD,sBAAsB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAC/C,sBAAsB,CAAC,YAAY,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;IACH,SAAS,CAAC;QACR,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QAED,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAClC,OAAO,cAAM,OAAA,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE,YAAY,CAAC,EAAlC,CAAkC,CAAC;IAClD,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;AAC7B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useEffect } from 'react';\nimport { Ace } from 'ace-builds';\nimport { CodeEditorProps } from './interfaces';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { useDebounceCallback } from '../internal/hooks/use-debounce-callback';\nimport { useStableEventHandler } from '../internal/hooks/use-stable-event-handler';\n\nexport function useChangeEffect(\n  editor?: Ace.Editor,\n  onChange?: NonCancelableEventHandler<CodeEditorProps.ChangeDetail>,\n  onDelayedChange?: NonCancelableEventHandler<CodeEditorProps.ChangeDetail>\n) {\n  const debouncedChangeHandler = useDebounceCallback((detail: CodeEditorProps.ChangeDetail) => {\n    fireNonCancelableEvent(onDelayedChange, detail);\n  }, 0);\n  const handleChange = useStableEventHandler(() => {\n    const changeDetail = { value: editor?.getValue() || '' };\n    fireNonCancelableEvent(onChange, changeDetail);\n    debouncedChangeHandler(changeDetail);\n  });\n  useEffect(() => {\n    if (!editor) {\n      return;\n    }\n\n    editor.on('change', handleChange);\n    return () => editor.off('change', handleChange);\n  }, [editor, handleChange]);\n}\n"]}

package/code-editor/loading-screen.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    children: React.ReactNode;
+}
+declare const _default: (props: Props) => JSX.Element;
+export default _default;
+//# sourceMappingURL=loading-screen.d.ts.map

package/code-editor/loading-screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-screen.d.ts","sourceRoot":"","sources":["../../../src/code-editor/loading-screen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,KAAK;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;gCAEsB,KAAK;AAA5B,wBAME"}

package/code-editor/loading-screen.js

@@ -0,0 +1,10 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import InternalSpinner from '../spinner/internal';
+import styles from './styles.css.js';
+export default (function (props) { return (React.createElement("div", { className: styles['loading-screen'] },
+    React.createElement(InternalSpinner, { size: "normal", variant: "normal" }),
+    "\u00A0",
+    props.children)); });
+//# sourceMappingURL=loading-screen.js.map

package/code-editor/loading-screen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-screen.js","sourceRoot":"","sources":["../../../src/code-editor/loading-screen.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,MAAM,qBAAqB,CAAC;AAElD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,gBAAe,UAAC,KAAY,IAAK,OAAA,CAC/B,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;IACtC,oBAAC,eAAe,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,GAAG;;IAEjD,KAAK,CAAC,QAAQ,CACX,CACP,EANgC,CAMhC,EAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport InternalSpinner from '../spinner/internal';\n\nimport styles from './styles.css.js';\n\ninterface Props {\n  children: React.ReactNode;\n}\n\nexport default (props: Props) => (\n  <div className={styles['loading-screen']}>\n    <InternalSpinner size=\"normal\" variant=\"normal\" />\n    &nbsp;\n    {props.children}\n  </div>\n);\n"]}

package/code-editor/pane.d.ts

@@ -0,0 +1,15 @@
+import { Ace } from 'ace-builds';
+export interface PaneProps {
+    id: string;
+    visible: boolean;
+    annotations: Ace.Annotation[];
+    highlighted?: Ace.Annotation;
+    cursorPositionLabel: (row: number, column: number) => string;
+    closeButtonAriaLabel: string;
+    onAllowlist: (activeElement: HTMLElement) => boolean;
+    onClose: () => void;
+    onAnnotationClick: (annotation: Ace.Annotation) => void;
+    onAnnotationClear: () => void;
+}
+export declare const Pane: ({ id, visible, annotations, highlighted, onAllowlist, onClose, onAnnotationClick, onAnnotationClear, cursorPositionLabel, closeButtonAriaLabel, }: PaneProps) => JSX.Element | null;
+//# sourceMappingURL=pane.d.ts.map

package/code-editor/pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pane.d.ts","sourceRoot":"","sources":["../../../src/code-editor/pane.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAcjC,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IAEX,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,GAAG,CAAC,UAAU,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC;IAE7B,mBAAmB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7D,oBAAoB,EAAE,MAAM,CAAC;IAE7B,WAAW,EAAE,CAAC,aAAa,EAAE,WAAW,KAAK,OAAO,CAAC;IACrD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,iBAAiB,EAAE,CAAC,UAAU,EAAE,GAAG,CAAC,UAAU,KAAK,IAAI,CAAC;IACxD,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,IAAI,sJAWd,SAAS,uBA6GX,CAAC"}

package/code-editor/pane.js

@@ -0,0 +1,75 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import FocusLock from 'react-focus-lock';
+import { ResizableBox } from 'react-resizable';
+import { KeyCode } from '../internal/keycode';
+import { scrollElementIntoView } from '../internal/utils/scrollable-containers';
+import { InternalButton } from '../button/internal';
+import handler from './resize-handler';
+import styles from './styles.css.js';
+var ANNOTATION_ITEM_HEIGHT = 31;
+var PANE_ANNOTATIONS_PADDING = 12;
+var MIN_HEIGHT = 3 * ANNOTATION_ITEM_HEIGHT + 2 * PANE_ANNOTATIONS_PADDING;
+export var Pane = function (_a) {
+    var id = _a.id, visible = _a.visible, annotations = _a.annotations, highlighted = _a.highlighted, onAllowlist = _a.onAllowlist, onClose = _a.onClose, onAnnotationClick = _a.onAnnotationClick, onAnnotationClear = _a.onAnnotationClear, cursorPositionLabel = _a.cursorPositionLabel, closeButtonAriaLabel = _a.closeButtonAriaLabel;
+    var listRef = useRef(null);
+    var _b = useState(false), isFocusTrapActive = _b[0], setFocusTrapActive = _b[1];
+    useEffect(function () {
+        var _a;
+        if (!highlighted) {
+            return;
+        }
+        var row = highlighted.row, column = highlighted.column;
+        var highlightedAnnotationIndex = annotations.indexOf(annotations.filter(function (a) { return a.row === row && a.column === column; })[0]);
+        if (highlightedAnnotationIndex > -1) {
+            var errorItem = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children[highlightedAnnotationIndex];
+            scrollElementIntoView(errorItem);
+        }
+    }, [highlighted, annotations]);
+    var onItemFocus = function () {
+        setFocusTrapActive(true);
+        onAnnotationClear();
+    };
+    var onItemClick = function (annotation) {
+        setFocusTrapActive(false);
+        onAnnotationClick(annotation);
+    };
+    var onItemKeyDown = function (annotation, event) {
+        if (event.keyCode === KeyCode.enter || event.keyCode === KeyCode.space) {
+            event.preventDefault();
+            setFocusTrapActive(false);
+            onAnnotationClick(annotation);
+        }
+    };
+    var onEscKeyDown = function (event) {
+        if (event.keyCode === KeyCode.escape) {
+            event.preventDefault();
+            setFocusTrapActive(false);
+            onClose();
+        }
+    };
+    if (!visible) {
+        return null;
+    }
+    return (React.createElement("div", { id: id, className: styles.pane, onKeyDown: onEscKeyDown, role: "tabpanel" },
+        React.createElement(ResizableBox, { className: styles['resizable-box'], width: Infinity, height: MIN_HEIGHT, minConstraints: [Infinity, MIN_HEIGHT], axis: "y", handle: handler },
+            React.createElement(FocusLock, { disabled: !isFocusTrapActive, className: styles['focus-lock'], autoFocus: false, returnFocus: false, whiteList: onAllowlist },
+                React.createElement("div", { className: styles.pane__list, tabIndex: -1 },
+                    React.createElement("table", { className: styles.pane__table, role: "presentation" },
+                        React.createElement("colgroup", null,
+                            React.createElement("col", { style: { width: 1 } /* shrink to fit content */ }),
+                            React.createElement("col", { style: { width: 'auto' } })),
+                        React.createElement("tbody", { ref: listRef }, annotations.map(function (annotation, i) {
+                            var _a;
+                            return (React.createElement("tr", { key: i, className: clsx(styles.pane__item, (_a = {},
+                                    _a[styles['pane__item--highlighted']] = annotation === highlighted,
+                                    _a)), onFocus: onItemFocus, onMouseOver: onAnnotationClear, onClick: onItemClick.bind(null, annotation), onKeyDown: onItemKeyDown.bind(null, annotation), tabIndex: 0, role: "link" },
+                                React.createElement("td", { className: clsx(styles.pane__location, styles.pane__cell), tabIndex: -1 }, cursorPositionLabel((annotation.row || 0) + 1, (annotation.column || 0) + 1)),
+                                React.createElement("td", { className: clsx(styles.pane__description, styles.pane__cell), tabIndex: -1 }, annotation.text)));
+                        })))),
+                React.createElement("div", { className: styles['pane__close-container'] },
+                    React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "close", onClick: onClose, ariaLabel: closeButtonAriaLabel }))))));
+};
+//# sourceMappingURL=pane.js.map

package/code-editor/pane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pane.js","sourceRoot":"","sources":["../../../src/code-editor/pane.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 clsx from 'clsx';\nimport FocusLock from 'react-focus-lock';\nimport { ResizableBox } from 'react-resizable';\nimport { Ace } from 'ace-builds';\n\nimport { KeyCode } from '../internal/keycode';\nimport { scrollElementIntoView } from '../internal/utils/scrollable-containers';\n\nimport { InternalButton } from '../button/internal';\nimport handler from './resize-handler';\n\nimport styles from './styles.css.js';\n\nconst ANNOTATION_ITEM_HEIGHT = 31;\nconst PANE_ANNOTATIONS_PADDING = 12;\nconst MIN_HEIGHT = 3 * ANNOTATION_ITEM_HEIGHT + 2 * PANE_ANNOTATIONS_PADDING;\n\nexport interface PaneProps {\n  id: string;\n\n  visible: boolean;\n  annotations: Ace.Annotation[];\n  highlighted?: Ace.Annotation;\n\n  cursorPositionLabel: (row: number, column: number) => string;\n  closeButtonAriaLabel: string;\n\n  onAllowlist: (activeElement: HTMLElement) => boolean;\n  onClose: () => void;\n  onAnnotationClick: (annotation: Ace.Annotation) => void;\n  onAnnotationClear: () => void;\n}\n\nexport const Pane = ({\n  id,\n  visible,\n  annotations,\n  highlighted,\n  onAllowlist,\n  onClose,\n  onAnnotationClick,\n  onAnnotationClear,\n  cursorPositionLabel,\n  closeButtonAriaLabel,\n}: PaneProps) => {\n  const listRef = useRef<HTMLTableSectionElement>(null);\n  const [isFocusTrapActive, setFocusTrapActive] = useState(false);\n\n  useEffect(() => {\n    if (!highlighted) {\n      return;\n    }\n    const { row, column } = highlighted;\n    const highlightedAnnotationIndex = annotations.indexOf(\n      annotations.filter(a => a.row === row && a.column === column)[0]\n    );\n\n    if (highlightedAnnotationIndex > -1) {\n      const errorItem = listRef.current?.children[highlightedAnnotationIndex] as HTMLElement | undefined;\n      scrollElementIntoView(errorItem);\n    }\n  }, [highlighted, annotations]);\n\n  const onItemFocus = () => {\n    setFocusTrapActive(true);\n    onAnnotationClear();\n  };\n\n  const onItemClick = (annotation: Ace.Annotation) => {\n    setFocusTrapActive(false);\n    onAnnotationClick(annotation);\n  };\n  const onItemKeyDown = (annotation: Ace.Annotation, event: React.KeyboardEvent) => {\n    if (event.keyCode === KeyCode.enter || event.keyCode === KeyCode.space) {\n      event.preventDefault();\n      setFocusTrapActive(false);\n      onAnnotationClick(annotation);\n    }\n  };\n\n  const onEscKeyDown = (event: React.KeyboardEvent) => {\n    if (event.keyCode === KeyCode.escape) {\n      event.preventDefault();\n      setFocusTrapActive(false);\n      onClose();\n    }\n  };\n\n  if (!visible) {\n    return null;\n  }\n\n  return (\n    <div id={id} className={styles.pane} onKeyDown={onEscKeyDown} role=\"tabpanel\">\n      <ResizableBox\n        className={styles['resizable-box']}\n        width={Infinity}\n        height={MIN_HEIGHT}\n        minConstraints={[Infinity, MIN_HEIGHT]}\n        axis=\"y\"\n        handle={handler}\n      >\n        <FocusLock\n          disabled={!isFocusTrapActive}\n          className={styles['focus-lock']}\n          autoFocus={false}\n          returnFocus={false}\n          whiteList={onAllowlist}\n        >\n          <div className={styles.pane__list} tabIndex={-1}>\n            <table className={styles.pane__table} role=\"presentation\">\n              <colgroup>\n                <col style={{ width: 1 } /* shrink to fit content */} />\n                <col style={{ width: 'auto' }} />\n              </colgroup>\n              <tbody ref={listRef}>\n                {annotations.map((annotation, i) => (\n                  <tr\n                    key={i}\n                    className={clsx(styles.pane__item, {\n                      [styles['pane__item--highlighted']]: annotation === highlighted,\n                    })}\n                    onFocus={onItemFocus}\n                    onMouseOver={onAnnotationClear}\n                    onClick={onItemClick.bind(null, annotation)}\n                    onKeyDown={onItemKeyDown.bind(null, annotation)}\n                    tabIndex={0}\n                    role=\"link\"\n                  >\n                    <td className={clsx(styles.pane__location, styles.pane__cell)} tabIndex={-1}>\n                      {cursorPositionLabel((annotation.row || 0) + 1, (annotation.column || 0) + 1)}\n                    </td>\n                    <td className={clsx(styles.pane__description, styles.pane__cell)} tabIndex={-1}>\n                      {annotation.text}\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n          <div className={styles['pane__close-container']}>\n            <InternalButton\n              formAction=\"none\"\n              variant=\"icon\"\n              iconName=\"close\"\n              onClick={onClose}\n              ariaLabel={closeButtonAriaLabel}\n            />\n          </div>\n        </FocusLock>\n      </ResizableBox>\n    </div>\n  );\n};\n"]}