@cloudscape-design/components 3.0.0

package/code-editor/preferences-modal.d.ts

@@ -0,0 +1,20 @@
+import { CodeEditorProps } from './interfaces';
+interface PreferencesModali18nStrings {
+    header: string;
+    cancel: string;
+    confirm: string;
+    wrapLines: string;
+    theme: string;
+    lightThemes: string;
+    darkThemes: string;
+}
+interface PreferencesModalProps {
+    preferences?: Partial<CodeEditorProps.Preferences>;
+    i18nStrings: PreferencesModali18nStrings;
+    defaultTheme: CodeEditorProps.Theme;
+    onConfirm: (preferences: CodeEditorProps.Preferences) => void;
+    onDismiss: () => void;
+}
+declare const _default: (props: PreferencesModalProps) => JSX.Element;
+export default _default;
+//# sourceMappingURL=preferences-modal.d.ts.map

package/code-editor/preferences-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preferences-modal.d.ts","sourceRoot":"","sources":["../../../src/code-editor/preferences-modal.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,UAAU,2BAA2B;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;IAEnD,WAAW,EAAE,2BAA2B,CAAC;IAEzC,YAAY,EAAE,eAAe,CAAC,KAAK,CAAC;IAEpC,SAAS,EAAE,CAAC,WAAW,EAAE,eAAe,CAAC,WAAW,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;gCAEsB,qBAAqB;AAA5C,wBAsDE"}

package/code-editor/preferences-modal.js

@@ -0,0 +1,39 @@
+import { __spreadArray } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import InternalBox from '../box/internal';
+import { InternalButton } from '../button/internal';
+import InternalCheckbox from '../checkbox/internal';
+import InternalColumnLayout from '../column-layout/internal';
+import InternalFormField from '../form-field/internal';
+import InternalModal from '../modal/internal';
+import InternalSelect from '../select/internal';
+import InternalSpaceBetween from '../space-between/internal';
+import { FormFieldDomContext } from '../internal/context/form-field-context';
+import { LightThemes, DarkThemes } from './ace-themes';
+export default (function (props) {
+    var _a, _b, _c, _d;
+    var _e = useState((_b = (_a = props.preferences) === null || _a === void 0 ? void 0 : _a.wrapLines) !== null && _b !== void 0 ? _b : true), wrapLines = _e[0], setWrapLines = _e[1];
+    var _f = useState((_d = (_c = props.preferences) === null || _c === void 0 ? void 0 : _c.theme) !== null && _d !== void 0 ? _d : props.defaultTheme), theme = _f[0], setTheme = _f[1];
+    var _g = useState(function () { return __spreadArray(__spreadArray([], LightThemes, true), DarkThemes, true).filter(function (t) { return t.value === theme; })[0]; }), selectedThemeOption = _g[0], setSelectedThemeOption = _g[1];
+    var onThemeSelected = function (e) {
+        setTheme(e.detail.selectedOption.value);
+        setSelectedThemeOption(e.detail.selectedOption);
+    };
+    return (React.createElement(FormFieldDomContext.RootProvider, { value: {} },
+        React.createElement(InternalModal, { size: "medium", visible: true, onDismiss: props.onDismiss, header: props.i18nStrings.header, closeAriaLabel: props.i18nStrings.cancel, footer: React.createElement(InternalBox, { float: "right" },
+                React.createElement(InternalSpaceBetween, { direction: "horizontal", size: "xs" },
+                    React.createElement(InternalButton, { onClick: props.onDismiss }, props.i18nStrings.cancel),
+                    React.createElement(InternalButton, { onClick: function () { return props.onConfirm({ wrapLines: wrapLines, theme: theme }); }, variant: "primary" }, props.i18nStrings.confirm))) },
+            React.createElement(InternalColumnLayout, { columns: 2, variant: "text-grid" },
+                React.createElement("div", null,
+                    React.createElement(InternalCheckbox, { checked: wrapLines, onChange: function (e) { return setWrapLines(e.detail.checked); } }, props.i18nStrings.wrapLines)),
+                React.createElement("div", null,
+                    React.createElement(InternalFormField, { label: props.i18nStrings.theme },
+                        React.createElement(InternalSelect, { selectedOption: selectedThemeOption, onChange: onThemeSelected, options: [
+                                { label: props.i18nStrings.lightThemes, options: LightThemes },
+                                { label: props.i18nStrings.darkThemes, options: DarkThemes },
+                            ], filteringType: "auto" })))))));
+});
+//# sourceMappingURL=preferences-modal.js.map

package/code-editor/preferences-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preferences-modal.js","sourceRoot":"","sources":["../../../src/code-editor/preferences-modal.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, { useState } from 'react';\n\nimport InternalBox from '../box/internal';\nimport { InternalButton } from '../button/internal';\nimport InternalCheckbox from '../checkbox/internal';\nimport InternalColumnLayout from '../column-layout/internal';\nimport InternalFormField from '../form-field/internal';\nimport InternalModal from '../modal/internal';\nimport { SelectProps } from '../select/interfaces';\nimport InternalSelect from '../select/internal';\nimport InternalSpaceBetween from '../space-between/internal';\nimport { FormFieldDomContext } from '../internal/context/form-field-context';\nimport { NonCancelableCustomEvent } from '../internal/events';\nimport { LightThemes, DarkThemes } from './ace-themes';\nimport { CodeEditorProps } from './interfaces';\n\ninterface PreferencesModali18nStrings {\n  header: string;\n  cancel: string;\n  confirm: string;\n  wrapLines: string;\n  theme: string;\n  lightThemes: string;\n  darkThemes: string;\n}\n\ninterface PreferencesModalProps {\n  preferences?: Partial<CodeEditorProps.Preferences>;\n\n  i18nStrings: PreferencesModali18nStrings;\n\n  defaultTheme: CodeEditorProps.Theme;\n\n  onConfirm: (preferences: CodeEditorProps.Preferences) => void;\n  onDismiss: () => void;\n}\n\nexport default (props: PreferencesModalProps) => {\n  const [wrapLines, setWrapLines] = useState<boolean>(props.preferences?.wrapLines ?? true);\n  const [theme, setTheme] = useState<CodeEditorProps.Theme>(props.preferences?.theme ?? props.defaultTheme);\n  const [selectedThemeOption, setSelectedThemeOption] = useState<SelectProps.Option>(\n    () => [...LightThemes, ...DarkThemes].filter(t => t.value === theme)[0]\n  );\n\n  const onThemeSelected = (e: NonCancelableCustomEvent<SelectProps.ChangeDetail>) => {\n    setTheme(e.detail.selectedOption.value as CodeEditorProps.Theme);\n    setSelectedThemeOption(e.detail.selectedOption);\n  };\n\n  return (\n    <FormFieldDomContext.RootProvider value={{}}>\n      <InternalModal\n        size=\"medium\"\n        visible={true}\n        onDismiss={props.onDismiss}\n        header={props.i18nStrings.header}\n        closeAriaLabel={props.i18nStrings.cancel}\n        footer={\n          <InternalBox float=\"right\">\n            <InternalSpaceBetween direction=\"horizontal\" size=\"xs\">\n              <InternalButton onClick={props.onDismiss}>{props.i18nStrings.cancel}</InternalButton>\n              <InternalButton onClick={() => props.onConfirm({ wrapLines, theme })} variant=\"primary\">\n                {props.i18nStrings.confirm}\n              </InternalButton>\n            </InternalSpaceBetween>\n          </InternalBox>\n        }\n      >\n        <InternalColumnLayout columns={2} variant=\"text-grid\">\n          <div>\n            <InternalCheckbox checked={wrapLines} onChange={e => setWrapLines(e.detail.checked)}>\n              {props.i18nStrings.wrapLines}\n            </InternalCheckbox>\n          </div>\n          <div>\n            <InternalFormField label={props.i18nStrings.theme}>\n              <InternalSelect\n                selectedOption={selectedThemeOption}\n                onChange={onThemeSelected}\n                options={[\n                  { label: props.i18nStrings.lightThemes, options: LightThemes },\n                  { label: props.i18nStrings.darkThemes, options: DarkThemes },\n                ]}\n                filteringType=\"auto\"\n              />\n            </InternalFormField>\n          </div>\n        </InternalColumnLayout>\n      </InternalModal>\n    </FormFieldDomContext.RootProvider>\n  );\n};\n"]}

package/code-editor/resize-handler.d.ts

@@ -0,0 +1,3 @@
+declare const ResizeHandler: JSX.Element;
+export default ResizeHandler;
+//# sourceMappingURL=resize-handler.d.ts.map

package/code-editor/resize-handler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize-handler.d.ts","sourceRoot":"","sources":["../../../src/code-editor/resize-handler.tsx"],"names":[],"mappings":"AAMA,QAAA,MAAM,aAAa,aAAsD,CAAC;AAE1E,eAAe,aAAa,CAAC"}

package/code-editor/resize-handler.js

@@ -0,0 +1,7 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import styles from './styles.css.js';
+var ResizeHandler = React.createElement("span", { className: styles['resizable-box-handle'] });
+export default ResizeHandler;
+//# sourceMappingURL=resize-handler.js.map

package/code-editor/resize-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize-handler.js","sourceRoot":"","sources":["../../../src/code-editor/resize-handler.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,IAAM,aAAa,GAAG,8BAAM,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,GAAI,CAAC;AAE1E,eAAe,aAAa,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport styles from './styles.css.js';\n\nconst ResizeHandler = <span className={styles['resizable-box-handle']} />;\n\nexport default ResizeHandler;\n"]}

package/code-editor/setup-editor.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Ace } from 'ace-builds';
+import { PaneStatus } from './util';
+export declare function setupEditor(ace: any, editor: Ace.Editor, setAnnotations: React.Dispatch<React.SetStateAction<Ace.Annotation[]>>, setCursorPosition: React.Dispatch<React.SetStateAction<Ace.Point>>, setHighlightedAnnotation: React.Dispatch<React.SetStateAction<Ace.Annotation | undefined>>, setPaneStatus: React.Dispatch<React.SetStateAction<PaneStatus>>): void;
+//# sourceMappingURL=setup-editor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"setup-editor.d.ts","sourceRoot":"","sources":["../../../src/code-editor/setup-editor.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,wBAAgB,WAAW,CACzB,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC,CAAC,EACtE,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAClE,wBAAwB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC,EAC1F,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,QA2HhE"}

package/code-editor/setup-editor.js

@@ -0,0 +1,111 @@
+export function setupEditor(ace, editor, setAnnotations, setCursorPosition, setHighlightedAnnotation, setPaneStatus) {
+    ace.config.loadModule('ace/ext/language_tools', function () {
+        editor.setOptions({
+            displayIndentGuides: false,
+            enableSnippets: true,
+            enableBasicAutocompletion: true
+        });
+    });
+    editor.setAutoScrollEditorIntoView(true);
+    // To display cursor position in status bar
+    editor.session.selection.on('changeCursor', function () {
+        setCursorPosition(editor.getCursorPosition());
+    });
+    editor.session.on('changeAnnotation', function () {
+        var editorAnnotations = editor.session.getAnnotations();
+        var newAnnotations = editorAnnotations.filter(function (a) { return a.type !== 'info'; });
+        if (editorAnnotations.length !== newAnnotations.length) {
+            editor.session.setAnnotations(newAnnotations);
+        }
+        setAnnotations(newAnnotations);
+    });
+    editor.commands.addCommand({
+        name: 'exitCodeEditor',
+        bindKey: 'Esc',
+        exec: function () {
+            editor.container.focus();
+        }
+    });
+    editor.on('focus', function () {
+        editor.textInput.getElement().setAttribute('tabindex', 0);
+    });
+    editor.on('blur', function () {
+        editor.textInput.getElement().setAttribute('tabindex', -1);
+    });
+    // prevent users to step into editor directly by keyboard
+    editor.textInput.getElement().setAttribute('tabindex', -1);
+    editor.commands.removeCommand('showSettingsMenu', false);
+    // Prevent default behavior on error/warning icon click
+    editor.on('guttermousedown', function (e) {
+        e.stop();
+    });
+    var moveCursorToAnnotation = function (a) {
+        if (typeof a.row === 'number') {
+            editor.gotoLine(a.row + 1, a.column || 0, false);
+        }
+    };
+    // open error/warning pane when user clicks on gutter icon
+    editor.on('gutterclick', function (e) {
+        var row = e.getDocumentPosition().row;
+        var currentAnnotations = editor.session.getAnnotations().filter(function (a) { return a.row === row && a.type !== 'info'; });
+        var errors = currentAnnotations.filter(function (a) { return a.type === 'error'; });
+        if (errors.length > 0) {
+            setHighlightedAnnotation(errors[0]);
+            setPaneStatus('error');
+            moveCursorToAnnotation(errors[0]);
+        }
+        else if (currentAnnotations.length > 0) {
+            setHighlightedAnnotation(currentAnnotations[0]);
+            setPaneStatus('warning');
+            moveCursorToAnnotation(currentAnnotations[0]);
+        }
+        else {
+            setHighlightedAnnotation(undefined);
+            setPaneStatus('hidden');
+            editor.gotoLine(row + 1, 0, false);
+        }
+    });
+    // HACK: Wrapped lines are highlighted individually. This is seriously the recommended fix.
+    // See: https://github.com/ajaxorg/ace/issues/3067
+    editor.setHighlightActiveLine(false);
+    editor.$updateHighlightActiveLine = function () {
+        var session = this.getSession();
+        var highlight;
+        if (this.$highlightActiveLine) {
+            if (this.$selectionStyle !== 'line' || !this.selection.isMultiLine()) {
+                highlight = this.getCursorPosition();
+            }
+            if (this.renderer.$maxLines && this.session.getLength() === 1 && !(this.renderer.$minLines > 1)) {
+                highlight = false;
+            }
+        }
+        if (session.$highlightLineMarker && !highlight) {
+            session.removeMarker(session.$highlightLineMarker.id);
+            session.$highlightLineMarker = null;
+        }
+        else if (!session.$highlightLineMarker && highlight) {
+            var range = new ace.Range(highlight.row, 0, highlight.row, Infinity);
+            range.id = session.addMarker(range, 'ace_active-line', 'fullLine');
+            session.$highlightLineMarker = range;
+        }
+        else if (highlight) {
+            session.$highlightLineMarker.start.row = highlight.row;
+            session.$highlightLineMarker.end.row = highlight.row;
+            session.$highlightLineMarker.start.column = 0;
+            session._signal('changeBackMarker');
+        }
+    };
+    editor.setHighlightActiveLine(true);
+    // HACK: Annotations aren't cleared when editor is empty.
+    editor.on('change', function () {
+        if (editor.getValue().length === 0) {
+            editor.session.clearAnnotations();
+        }
+    });
+    // HACK: "disable" error tooltips by hiding them as soon as they appear.
+    // See https://github.com/ajaxorg/ace/issues/4004
+    editor.on('showGutterTooltip', function (tooltip) {
+        tooltip.hide();
+    });
+}
+//# sourceMappingURL=setup-editor.js.map

package/code-editor/setup-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-editor.js","sourceRoot":"","sources":["../../../src/code-editor/setup-editor.ts"],"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 from 'react';\nimport { Ace } from 'ace-builds';\nimport { PaneStatus } from './util';\n\nexport function setupEditor(\n  ace: any,\n  editor: Ace.Editor,\n  setAnnotations: React.Dispatch<React.SetStateAction<Ace.Annotation[]>>,\n  setCursorPosition: React.Dispatch<React.SetStateAction<Ace.Point>>,\n  setHighlightedAnnotation: React.Dispatch<React.SetStateAction<Ace.Annotation | undefined>>,\n  setPaneStatus: React.Dispatch<React.SetStateAction<PaneStatus>>\n) {\n  ace.config.loadModule('ace/ext/language_tools', function () {\n    editor.setOptions({\n      displayIndentGuides: false,\n      enableSnippets: true,\n      enableBasicAutocompletion: true,\n    });\n  });\n\n  editor.setAutoScrollEditorIntoView(true);\n\n  // To display cursor position in status bar\n  editor.session.selection.on('changeCursor', () => {\n    setCursorPosition(editor.getCursorPosition());\n  });\n\n  editor.session.on('changeAnnotation' as any, () => {\n    const editorAnnotations = editor.session.getAnnotations();\n    const newAnnotations = editorAnnotations.filter(a => a.type !== 'info');\n    if (editorAnnotations.length !== newAnnotations.length) {\n      editor.session.setAnnotations(newAnnotations);\n    }\n    setAnnotations(newAnnotations);\n  });\n\n  editor.commands.addCommand({\n    name: 'exitCodeEditor',\n    bindKey: 'Esc',\n    exec: () => {\n      editor.container.focus();\n    },\n  });\n\n  editor.on('focus', () => {\n    (editor as any).textInput.getElement().setAttribute('tabindex', 0);\n  });\n\n  editor.on('blur', () => {\n    (editor as any).textInput.getElement().setAttribute('tabindex', -1);\n  });\n\n  // prevent users to step into editor directly by keyboard\n  (editor as any).textInput.getElement().setAttribute('tabindex', -1);\n\n  editor.commands.removeCommand('showSettingsMenu', false);\n\n  // Prevent default behavior on error/warning icon click\n  editor.on('guttermousedown' as any, (e: any) => {\n    e.stop();\n  });\n\n  const moveCursorToAnnotation = (a: Ace.Annotation) => {\n    if (typeof a.row === 'number') {\n      editor.gotoLine(a.row + 1, a.column || 0, false);\n    }\n  };\n\n  // open error/warning pane when user clicks on gutter icon\n  editor.on('gutterclick' as any, (e: any) => {\n    const { row }: Ace.Point = e.getDocumentPosition();\n    const currentAnnotations = editor.session.getAnnotations().filter(a => a.row === row && a.type !== 'info');\n    const errors = currentAnnotations.filter(a => a.type === 'error');\n    if (errors.length > 0) {\n      setHighlightedAnnotation(errors[0]);\n      setPaneStatus('error');\n      moveCursorToAnnotation(errors[0]);\n    } else if (currentAnnotations.length > 0) {\n      setHighlightedAnnotation(currentAnnotations[0]);\n      setPaneStatus('warning');\n      moveCursorToAnnotation(currentAnnotations[0]);\n    } else {\n      setHighlightedAnnotation(undefined);\n      setPaneStatus('hidden');\n      editor.gotoLine(row + 1, 0, false);\n    }\n  });\n\n  // HACK: Wrapped lines are highlighted individually. This is seriously the recommended fix.\n  // See: https://github.com/ajaxorg/ace/issues/3067\n  editor.setHighlightActiveLine(false);\n  (editor as any).$updateHighlightActiveLine = function () {\n    const session = this.getSession();\n\n    let highlight;\n    if (this.$highlightActiveLine) {\n      if (this.$selectionStyle !== 'line' || !this.selection.isMultiLine()) {\n        highlight = this.getCursorPosition();\n      }\n      if (this.renderer.$maxLines && this.session.getLength() === 1 && !(this.renderer.$minLines > 1)) {\n        highlight = false;\n      }\n    }\n\n    if (session.$highlightLineMarker && !highlight) {\n      session.removeMarker(session.$highlightLineMarker.id);\n      session.$highlightLineMarker = null;\n    } else if (!session.$highlightLineMarker && highlight) {\n      const range = new ace.Range(highlight.row, 0, highlight.row, Infinity);\n      (range as any).id = session.addMarker(range, 'ace_active-line', 'fullLine');\n      session.$highlightLineMarker = range;\n    } else if (highlight) {\n      session.$highlightLineMarker.start.row = highlight.row;\n      session.$highlightLineMarker.end.row = highlight.row;\n      session.$highlightLineMarker.start.column = 0;\n      session._signal('changeBackMarker');\n    }\n  };\n\n  editor.setHighlightActiveLine(true);\n\n  // HACK: Annotations aren't cleared when editor is empty.\n  editor.on('change', () => {\n    if (editor.getValue().length === 0) {\n      editor.session.clearAnnotations();\n    }\n  });\n\n  // HACK: \"disable\" error tooltips by hiding them as soon as they appear.\n  // See https://github.com/ajaxorg/ace/issues/4004\n  editor.on('showGutterTooltip' as any, (tooltip: any) => {\n    tooltip.hide();\n  });\n}\n"]}

package/code-editor/status-bar.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { CodeEditorProps } from './interfaces';
+interface StatusBarProps {
+    languageLabel: string;
+    cursorPosition: string;
+    paneStatus: string;
+    errorsTabRef: React.RefObject<HTMLButtonElement>;
+    warningsTabRef: React.RefObject<HTMLButtonElement>;
+    isTabFocused: boolean;
+    paneId: string;
+    i18nStrings: CodeEditorProps.I18nStrings;
+    errorCount: number;
+    warningCount: number;
+    isRefresh: boolean;
+    onErrorPaneToggle: () => void;
+    onWarningPaneToggle: () => void;
+    onTabFocus?: React.FocusEventHandler<HTMLButtonElement>;
+    onTabBlur?: React.FocusEventHandler<HTMLButtonElement>;
+    onPreferencesOpen: () => void;
+    onHeightChange?: (height: number | null) => void;
+}
+export declare const StatusBar: (props: StatusBarProps) => JSX.Element;
+export {};
+//# sourceMappingURL=status-bar.d.ts.map

package/code-editor/status-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-bar.d.ts","sourceRoot":"","sources":["../../../src/code-editor/status-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,UAAU,cAAc;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IACjD,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IACnD,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,eAAe,CAAC,WAAW,CAAC;IACzC,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IAEnB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACxD,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAClD;AA2GD,eAAO,MAAM,SAAS,UAAW,cAAc,gBAc9C,CAAC"}

package/code-editor/status-bar.js

@@ -0,0 +1,46 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.css.js';
+import { TabButton } from './tab-button';
+import { InternalButton } from '../button/internal';
+import { useContainerQuery } from '../internal/hooks/container-queries/use-container-query';
+function InternalStatusBar(_a) {
+    var _b, _c;
+    var languageLabel = _a.languageLabel, cursorPosition = _a.cursorPosition, paneStatus = _a.paneStatus, onErrorPaneToggle = _a.onErrorPaneToggle, onWarningPaneToggle = _a.onWarningPaneToggle, onTabFocus = _a.onTabFocus, onTabBlur = _a.onTabBlur, errorsTabRef = _a.errorsTabRef, warningsTabRef = _a.warningsTabRef, isTabFocused = _a.isTabFocused, paneId = _a.paneId, onPreferencesOpen = _a.onPreferencesOpen, i18nStrings = _a.i18nStrings, errorCount = _a.errorCount, warningCount = _a.warningCount, leftBarRef = _a.leftBarRef, isVirtual = _a.isVirtual, minifyCounters = _a.minifyCounters, isRefresh = _a.isRefresh;
+    var errorText = "".concat(i18nStrings.errorsTab, ": ").concat(errorCount);
+    var warningText = "".concat(i18nStrings.warningsTab, ": ").concat(warningCount);
+    // Virtual status bar is inaccessible for screen readers and keyboard interactions.
+    return (React.createElement("div", { className: clsx(styles['status-bar'], (_b = {},
+            _b[styles['status-bar-with-hidden-pane']] = paneStatus === 'hidden',
+            _b[styles['status-bar-virtual']] = isVirtual,
+            _b)), "aria-hidden": isVirtual },
+        React.createElement("div", { className: clsx(styles['status-bar__left'], (_c = {},
+                _c[styles['status-bar__left-virtual']] = isVirtual,
+                _c)), ref: leftBarRef },
+            React.createElement("span", { className: styles['status-bar__language-mode'] }, languageLabel),
+            React.createElement("span", { className: styles['status-bar__cursor-position'] }, cursorPosition),
+            React.createElement("div", { role: "tablist" },
+                React.createElement(TabButton, { text: minifyCounters ? " ".concat(errorCount) : errorText, className: styles['tab-button--errors'], iconName: "status-negative", disabled: errorCount === 0 || isVirtual, active: paneStatus === 'error', onClick: onErrorPaneToggle, onFocus: onTabFocus, onBlur: onTabBlur, ref: errorsTabRef, ariaLabel: errorText, paneId: paneId, isRefresh: isRefresh }),
+                React.createElement("span", { className: styles['tab-button--divider'] }),
+                React.createElement(TabButton, { text: minifyCounters ? " ".concat(warningCount) : warningText, className: styles['tab-button--warnings'], iconName: "status-warning", disabled: warningCount === 0 || isVirtual, active: paneStatus === 'warning', onClick: onWarningPaneToggle, onFocus: onTabFocus, onBlur: onTabBlur, ref: warningsTabRef, tabIndex: paneStatus === 'error' && isTabFocused ? -1 : undefined, ariaHidden: paneStatus === 'error' && isTabFocused ? true : undefined, ariaLabel: warningText, paneId: paneId, isRefresh: isRefresh }))),
+        React.createElement("div", { className: styles['status-bar__right'] },
+            React.createElement("div", { className: styles['status-bar__cog-button'] },
+                React.createElement(InternalButton, { disabled: isVirtual, formAction: "none", variant: "icon", iconName: "settings", iconAlt: "Settings", ariaLabel: i18nStrings.preferencesButtonAriaLabel, onClick: onPreferencesOpen, __nativeAttributes: {
+                        tabIndex: paneStatus !== 'hidden' && isTabFocused ? -1 : undefined,
+                        'aria-hidden': paneStatus !== 'hidden' && isTabFocused ? true : undefined
+                    } })))));
+}
+export var StatusBar = function (props) {
+    // create a virtual status bar, in order to calculate the width with full tab button text
+    // and decide if tab button text needs to be reduced
+    var _a = useContainerQuery(function (rect) { return rect.width; }), realWidth = _a[0], statusLeftBarRef = _a[1];
+    var _b = useContainerQuery(function (rect) { return rect.width; }), virtualWidth = _b[0], virtualStatusLeftBarRef = _b[1];
+    var minifyCounters = virtualWidth !== null && realWidth !== null && virtualWidth > realWidth;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InternalStatusBar, __assign({ isVirtual: false }, props, { leftBarRef: statusLeftBarRef, minifyCounters: minifyCounters })),
+        React.createElement(InternalStatusBar, __assign({ isVirtual: true }, props, { leftBarRef: virtualStatusLeftBarRef, minifyCounters: false }))));
+};
+//# sourceMappingURL=status-bar.js.map

package/code-editor/status-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-bar.js","sourceRoot":"","sources":["../../../src/code-editor/status-bar.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 from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { TabButton } from './tab-button';\nimport { InternalButton } from '../button/internal';\nimport { useContainerQuery } from '../internal/hooks/container-queries/use-container-query';\nimport { CodeEditorProps } from './interfaces';\n\ninterface StatusBarProps {\n  languageLabel: string;\n  cursorPosition: string;\n  paneStatus: string;\n  errorsTabRef: React.RefObject<HTMLButtonElement>;\n  warningsTabRef: React.RefObject<HTMLButtonElement>;\n  isTabFocused: boolean;\n  paneId: string;\n  i18nStrings: CodeEditorProps.I18nStrings;\n  errorCount: number;\n  warningCount: number;\n  isRefresh: boolean;\n\n  onErrorPaneToggle: () => void;\n  onWarningPaneToggle: () => void;\n  onTabFocus?: React.FocusEventHandler<HTMLButtonElement>;\n  onTabBlur?: React.FocusEventHandler<HTMLButtonElement>;\n  onPreferencesOpen: () => void;\n  onHeightChange?: (height: number | null) => void;\n}\n\ntype InternalStatusBarProps = StatusBarProps & {\n  leftBarRef: React.Ref<HTMLDivElement>;\n  isVirtual: boolean;\n  minifyCounters: boolean;\n};\n\nfunction InternalStatusBar({\n  languageLabel,\n  cursorPosition,\n  paneStatus,\n  onErrorPaneToggle,\n  onWarningPaneToggle,\n  onTabFocus,\n  onTabBlur,\n  errorsTabRef,\n  warningsTabRef,\n  isTabFocused,\n  paneId,\n  onPreferencesOpen,\n  i18nStrings,\n  errorCount,\n  warningCount,\n  leftBarRef,\n  isVirtual,\n  minifyCounters,\n  isRefresh,\n}: InternalStatusBarProps) {\n  const errorText = `${i18nStrings.errorsTab}: ${errorCount}`;\n  const warningText = `${i18nStrings.warningsTab}: ${warningCount}`;\n\n  // Virtual status bar is inaccessible for screen readers and keyboard interactions.\n\n  return (\n    <div\n      className={clsx(styles['status-bar'], {\n        [styles['status-bar-with-hidden-pane']]: paneStatus === 'hidden',\n        [styles['status-bar-virtual']]: isVirtual,\n      })}\n      aria-hidden={isVirtual}\n    >\n      <div\n        className={clsx(styles['status-bar__left'], {\n          [styles['status-bar__left-virtual']]: isVirtual,\n        })}\n        ref={leftBarRef}\n      >\n        <span className={styles['status-bar__language-mode']}>{languageLabel}</span>\n        <span className={styles['status-bar__cursor-position']}>{cursorPosition}</span>\n\n        <div role=\"tablist\">\n          <TabButton\n            text={minifyCounters ? ` ${errorCount}` : errorText}\n            className={styles['tab-button--errors']}\n            iconName=\"status-negative\"\n            disabled={errorCount === 0 || isVirtual}\n            active={paneStatus === 'error'}\n            onClick={onErrorPaneToggle}\n            onFocus={onTabFocus}\n            onBlur={onTabBlur}\n            ref={errorsTabRef}\n            ariaLabel={errorText}\n            paneId={paneId}\n            isRefresh={isRefresh}\n          />\n          <span className={styles['tab-button--divider']}></span>\n          <TabButton\n            text={minifyCounters ? ` ${warningCount}` : warningText}\n            className={styles['tab-button--warnings']}\n            iconName=\"status-warning\"\n            disabled={warningCount === 0 || isVirtual}\n            active={paneStatus === 'warning'}\n            onClick={onWarningPaneToggle}\n            onFocus={onTabFocus}\n            onBlur={onTabBlur}\n            ref={warningsTabRef}\n            tabIndex={paneStatus === 'error' && isTabFocused ? -1 : undefined}\n            ariaHidden={paneStatus === 'error' && isTabFocused ? true : undefined}\n            ariaLabel={warningText}\n            paneId={paneId}\n            isRefresh={isRefresh}\n          />\n        </div>\n      </div>\n\n      <div className={styles['status-bar__right']}>\n        <div className={styles['status-bar__cog-button']}>\n          <InternalButton\n            disabled={isVirtual}\n            formAction=\"none\"\n            variant=\"icon\"\n            iconName=\"settings\"\n            iconAlt=\"Settings\"\n            ariaLabel={i18nStrings.preferencesButtonAriaLabel}\n            onClick={onPreferencesOpen}\n            __nativeAttributes={{\n              tabIndex: paneStatus !== 'hidden' && isTabFocused ? -1 : undefined,\n              'aria-hidden': paneStatus !== 'hidden' && isTabFocused ? true : undefined,\n            }}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport const StatusBar = (props: StatusBarProps) => {\n  // create a virtual status bar, in order to calculate the width with full tab button text\n  // and decide if tab button text needs to be reduced\n  const [realWidth, statusLeftBarRef] = useContainerQuery(rect => rect.width);\n  const [virtualWidth, virtualStatusLeftBarRef] = useContainerQuery(rect => rect.width);\n\n  const minifyCounters = virtualWidth !== null && realWidth !== null && virtualWidth > realWidth;\n\n  return (\n    <>\n      <InternalStatusBar isVirtual={false} {...props} leftBarRef={statusLeftBarRef} minifyCounters={minifyCounters} />\n      <InternalStatusBar isVirtual={true} {...props} leftBarRef={virtualStatusLeftBarRef} minifyCounters={false} />\n    </>\n  );\n};\n"]}

package/code-editor/styles.css.js

@@ -0,0 +1,38 @@
+
+    import './styles.scoped.css';
+    export default {
+  "code-editor": "awsui_code-editor_1gl9c_16dw6_98",
+  "code-editor-refresh": "awsui_code-editor-refresh_1gl9c_16dw6_342",
+  "pane": "awsui_pane_1gl9c_16dw6_354",
+  "pane__close-container": "awsui_pane__close-container_1gl9c_16dw6_365",
+  "pane__list": "awsui_pane__list_1gl9c_16dw6_370",
+  "pane__table": "awsui_pane__table_1gl9c_16dw6_377",
+  "pane__item": "awsui_pane__item_1gl9c_16dw6_382",
+  "pane__cell": "awsui_pane__cell_1gl9c_16dw6_382",
+  "pane__item--highlighted": "awsui_pane__item--highlighted_1gl9c_16dw6_396",
+  "pane__location": "awsui_pane__location_1gl9c_16dw6_417",
+  "pane__description": "awsui_pane__description_1gl9c_16dw6_417",
+  "focus-lock": "awsui_focus-lock_1gl9c_16dw6_432",
+  "resizable-box": "awsui_resizable-box_1gl9c_16dw6_455",
+  "resizable-box-handle": "awsui_resizable-box-handle_1gl9c_16dw6_460",
+  "editor": "awsui_editor_1gl9c_16dw6_485",
+  "status-bar": "awsui_status-bar_1gl9c_16dw6_518",
+  "status-bar-with-hidden-pane": "awsui_status-bar-with-hidden-pane_1gl9c_16dw6_527",
+  "status-bar__left": "awsui_status-bar__left_1gl9c_16dw6_531",
+  "status-bar__left-virtual": "awsui_status-bar__left-virtual_1gl9c_16dw6_538",
+  "status-bar__right": "awsui_status-bar__right_1gl9c_16dw6_542",
+  "status-bar__language-mode": "awsui_status-bar__language-mode_1gl9c_16dw6_546",
+  "status-bar__cursor-position": "awsui_status-bar__cursor-position_1gl9c_16dw6_546",
+  "status-bar__cog-button": "awsui_status-bar__cog-button_1gl9c_16dw6_551",
+  "status-bar-virtual": "awsui_status-bar-virtual_1gl9c_16dw6_555",
+  "tab-button": "awsui_tab-button_1gl9c_16dw6_561",
+  "tab-button--refresh": "awsui_tab-button--refresh_1gl9c_16dw6_574",
+  "tab-button--active": "awsui_tab-button--active_1gl9c_16dw6_588",
+  "tab-button--disabled": "awsui_tab-button--disabled_1gl9c_16dw6_608",
+  "tab-button--divider": "awsui_tab-button--divider_1gl9c_16dw6_638",
+  "tab-button--errors": "awsui_tab-button--errors_1gl9c_16dw6_645",
+  "tab-button--warnings": "awsui_tab-button--warnings_1gl9c_16dw6_645",
+  "loading-screen": "awsui_loading-screen_1gl9c_16dw6_649",
+  "error-screen": "awsui_error-screen_1gl9c_16dw6_650"
+};
+