@hazelcast/ui 1.3.3-next.9 → 2.0.1-canary.0

package/lib/components/Tabs/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,WAAW,EAAwC,MAAM,OAAO,CAAA;AACpF,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEjD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AA0BtC;;;;;;;;;;GAUG;AAEH,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAAE,SAAS,EAAE,SAAS,GAAG,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE;IAC7H,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,aAAa,EAAE,CAAA;IAC7E,MAAM,QAAQ,GAAG,KAAK,KAAK,WAAW,CAAA;IAEtC,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAA+G,EAAE,EAAE;QAClH,IAAI,QAAQ,EAAE,CAAC;YACb,OAAM;QACR,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,CAAA;QAChB,CAAC;QAED,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjB,CAAC,EACD,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,CACrC,CAAA;IAED,wDAAwD;IACxD,+DAA+D;IAC/D,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,KAA2D,EAAE,EAAE;QAC9D,KAAK,CAAC,cAAc,EAAE,CAAA;QAEtB,IAAI,UAAU,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC;YACxC,WAAW,CAAC,KAAK,CAAC,CAAA;QACpB,CAAC;IACH,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,CAAC,EACpG,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,mBACzB,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,mBACtC,QAAQ,EACvB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,WAAW,KAChB,CAAC,SAAS,KAAK,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,IAAI,EAAE,CAAC,gBACpC,SAAS,IAEpB,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Tabs/Tab.module.scss

@@ -0,0 +1,58 @@
+@use '../../../styles/constants' as c;
+@use '../../../styles/helpers' as h;
+
+.tab {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  height: c.$grid * 10;
+  min-width: c.$grid * 40;
+  padding: c.$grid c.$grid * 5;
+  border: none;
+  border-bottom: 1px solid;
+  border-color: c.$colorNeutralLight;
+  color: c.$colorText;
+  background-color: transparent;
+  cursor: pointer;
+
+  // for <a> element
+  text-decoration: none;
+
+  @include c.typographyH3;
+  @include h.overflowEllipsis;
+
+  &.selected {
+    color: c.$colorPrimary;
+    border-radius: 0;
+    border-color: c.$colorPrimary;
+    box-shadow: inset 0 -4px 0 0 c.$colorPrimary;
+  }
+
+  &.selected:focus-visible {
+    border-color: c.$colorPrimary;
+    border-bottom-width: c.$grid;
+    padding-bottom: 0;
+  }
+
+  &.fullWidth {
+    flex: 1 1 auto;
+  }
+
+  &:hover {
+    color: c.$colorPrimary;
+  }
+
+  &:focus-visible {
+    // Do not remove outline for high-contrast modes
+    // https://stackoverflow.com/a/52616313
+    outline: c.$outlineWidth solid transparent;
+    color: c.$colorPrimary;
+    border-radius: c.$borderRadius;
+    border-color: transparent;
+
+    @include h.outlineSimple;
+  }
+}

package/lib/components/Tabs/TabContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabContext.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAM,OAAO,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAA;AAC1F,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AASlC,MAAM,CAAC,MAAM,sBAAsB,GAAoB;IACrD,QAAQ,EAAE,GAAG,EAAE;QACb,0CAA0C;IAC5C,CAAC;IACD,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,EAAE;IACZ,SAAS,EAAE,KAAK;CACjB,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAkB,sBAAsB,CAAC,CAAA;AAEhF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC,CAAA;AAIzD;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAgC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IACzF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAA;IAE7C,OAAO,CACL,oBAAC,4BAA4B,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,IACjF,QAAQ,CACoB,CAChC,CAAA;AACH,CAAC,CAAA;AAID;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAA0C,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC9H,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IACnB,MAAM,YAAY,GAAoB,OAAO,CAC3C,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ;QACR,KAAK;QACL,QAAQ,EAAE,EAAE;QACZ,SAAS;KACV,CAAC,EACF,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,CAAC,CACjC,CAAA;IAED,OAAO,oBAAC,UAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,IAAG,QAAQ,CAAuB,CAAA;AACnF,CAAC,CAAA;AAED,+CAA+C;AAC/C,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,MAAc,EAAE,KAAa,EAAE,EAAE,CAAC,GAAG,MAAM,QAAQ,KAAK,EAAE,CAAA;AAEnF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,MAAc,EAAE,KAAa,EAAE,EAAE,CAAC,GAAG,MAAM,UAAU,KAAK,EAAE,CAAA"}

package/lib/components/Tabs/TabList.js

@@ -0,0 +1,58 @@
+import React, { useRef, useCallback } from 'react';
+import cn from 'classnames';
+import styles from './TabList.module.scss';
+/**
+ * ### Purpose
+ * A base component for building tabs (apart from TabContext). Use as a parent for Tab components.
+ *
+ * ### General Info
+ * - Expects direct children to have [role="tab"].
+ * - Implemented according to best practices: https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html.
+ */
+export const TabList = ({ ariaLabel, className, children }) => {
+    const tabListRef = useRef(null);
+    // Keyboard navigation assumes that the direct children have [role="tab"]
+    const handleKeyDown = useCallback((event) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const target = event.target;
+        const role = target.getAttribute('role');
+        if (role !== 'tab') {
+            console.warn('Children of TabList component do not have [role="tab"]. Keyboard navigation will not work as expected.');
+            return;
+        }
+        let newFocusTarget = null;
+        const previousItemKey = 'ArrowLeft';
+        const nextItemKey = 'ArrowRight';
+        switch (event.key) {
+            // When a tab has focus:
+            // - Moves focus to the previous tab.
+            // - If focus is on the first tab, moves focus to the last tab.
+            case previousItemKey:
+                newFocusTarget =
+                    (_c = (_a = target.previousElementSibling) !== null && _a !== void 0 ? _a : (_b = tabListRef.current) === null || _b === void 0 ? void 0 : _b.lastChild) !== null && _c !== void 0 ? _c : null;
+                break;
+            // When a tab has focus:
+            // - Moves focus to the next tab.
+            // - If focus is on the last tab, moves focus to the first tab.
+            case nextItemKey:
+                newFocusTarget = (_f = (_d = target.nextElementSibling) !== null && _d !== void 0 ? _d : (_e = tabListRef.current) === null || _e === void 0 ? void 0 : _e.firstChild) !== null && _f !== void 0 ? _f : null;
+                break;
+            // When a tab has focus, moves focus to the first tab.
+            case 'Home':
+                newFocusTarget = (_h = (_g = tabListRef.current) === null || _g === void 0 ? void 0 : _g.firstChild) !== null && _h !== void 0 ? _h : null;
+                break;
+            // When a tab has focus, moves focus to the last tab.
+            case 'End':
+                newFocusTarget = (_k = (_j = tabListRef.current) === null || _j === void 0 ? void 0 : _j.lastChild) !== null && _k !== void 0 ? _k : null;
+                break;
+            default:
+                break;
+        }
+        if (newFocusTarget !== null) {
+            newFocusTarget.focus();
+            event.preventDefault();
+        }
+    }, []);
+    return (React.createElement("div", { "data-test": "tab-list", className: cn(styles.tabList, className), "aria-label": ariaLabel, role: "tablist", ref: tabListRef, onKeyDown: handleKeyDown }, children));
+};
+//# sourceMappingURL=TabList.js.map

package/lib/components/Tabs/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgC,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAChF,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,MAAM,MAAM,uBAAuB,CAAA;AAQ1C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,OAAO,GAAqB,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC9E,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE/C,yEAAyE;IACzE,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,KAAoC,EAAE,EAAE;;QACzE,MAAM,MAAM,GAAG,KAAK,CAAC,MAA2B,CAAA;QAChD,MAAM,IAAI,GAAG,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;QACxC,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,wGAAwG,CAAC,CAAA;YACtH,OAAM;QACR,CAAC;QAED,IAAI,cAAc,GAA6B,IAAI,CAAA;QACnD,MAAM,eAAe,GAAG,WAAW,CAAA;QACnC,MAAM,WAAW,GAAG,YAAY,CAAA;QAEhC,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAClB,wBAAwB;YACxB,qCAAqC;YACrC,+DAA+D;YAC/D,KAAK,eAAe;gBAClB,cAAc;oBACZ,MAAA,MAAC,MAAM,CAAC,sBAA4C,mCAAK,MAAA,UAAU,CAAC,OAAO,0CAAE,SAA+B,mCAAI,IAAI,CAAA;gBACtH,MAAK;YACP,wBAAwB;YACxB,iCAAiC;YACjC,+DAA+D;YAC/D,KAAK,WAAW;gBACd,cAAc,GAAG,MAAA,MAAC,MAAM,CAAC,kBAAwC,mCAAK,MAAA,UAAU,CAAC,OAAO,0CAAE,UAAgC,mCAAI,IAAI,CAAA;gBAClI,MAAK;YACP,sDAAsD;YACtD,KAAK,MAAM;gBACT,cAAc,GAAG,MAAC,MAAA,UAAU,CAAC,OAAO,0CAAE,UAAgC,mCAAI,IAAI,CAAA;gBAC9E,MAAK;YACP,qDAAqD;YACrD,KAAK,KAAK;gBACR,cAAc,GAAG,MAAC,MAAA,UAAU,CAAC,OAAO,0CAAE,SAA+B,mCAAI,IAAI,CAAA;gBAC7E,MAAK;YACP;gBACE,MAAK;QACT,CAAC;QAED,IAAI,cAAc,KAAK,IAAI,EAAE,CAAC;YAC5B,cAAc,CAAC,KAAK,EAAE,CAAA;YACtB,KAAK,CAAC,cAAc,EAAE,CAAA;QACxB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,0CACY,UAAU,EACpB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,gBAC5B,SAAS,EACrB,IAAI,EAAC,SAAS,EACd,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,aAAa,IAEvB,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Tabs/TabPanel.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from 'react';
+import { DataTestProp } from '../../../src';
+export type TabPanelProps = {
+    value: number;
+    children: ReactNode;
+} & DataTestProp;
+/**
+ * ### Purpose
+ * Serves as a container for tab content.
+ *
+ * ### General Info
+ * - Is hidden unless its associated tab control is activated.
+ */
+export declare const TabPanel: FC<TabPanelProps>;

package/lib/components/Tabs/TabPanel.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import cn from 'classnames';
+import { useTabContext, getPanelId, getTabId } from './TabContext';
+import styles from './TabPanel.module.scss';
+/**
+ * ### Purpose
+ * Serves as a container for tab content.
+ *
+ * ### General Info
+ * - Is hidden unless its associated tab control is activated.
+ */
+export const TabPanel = ({ value, children, 'data-test': dataTest }) => {
+    const { idPrefix, value: selectedValue } = useTabContext();
+    const selected = value === selectedValue;
+    return (React.createElement("div", { className: cn(styles.tabPanel, { [styles.hidden]: !selected }), role: "tabpanel", "data-test": dataTest, id: getPanelId(idPrefix, value.toString()), "aria-labelledby": getTabId(idPrefix, value.toString()) }, selected ? children : null));
+};
+//# sourceMappingURL=TabPanel.js.map

package/lib/components/Tabs/TabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAElE,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAO3C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxF,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,CAAA;IAC1D,MAAM,QAAQ,GAAG,KAAK,KAAK,aAAa,CAAA;IAExC,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAC9D,IAAI,EAAC,UAAU,eACJ,QAAQ,EACnB,EAAE,EAAE,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,qBACzB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,IAEpD,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CACvB,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,kBAAkB,EAClB,4BAA4B,EAC5B,UAAU,EACV,QAAQ,EACR,aAAa,EACb,sBAAsB,GACvB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}

package/lib/components/Terminal.d.ts

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { DataTestProp } from '../../src';
+export declare class CommandTimeoutError extends Error {
+    name: string;
+}
+export type TerminalProps = {
+    onExecute: (command: string, args: string[]) => Promise<string[]>;
+    commandTimeout?: number;
+    historyLimit?: number;
+    className?: string;
+    inputClassName?: string;
+    welcomeMessage?: string;
+    prompt?: string;
+    initialExecutionHistory?: ExecutionHistoryState[];
+    initialCommand?: string;
+    initialLoading?: boolean;
+    autoFocusInitial?: boolean;
+} & DataTestProp;
+export interface ExecutionHistoryState {
+    prompt?: string;
+    command: string;
+    res?: string[];
+    error?: string;
+}
+export declare const Terminal: FC<TerminalProps>;

package/lib/components/Terminal.js

@@ -0,0 +1,113 @@
+import React, { Fragment, memo, useRef, useState } from 'react';
+import cn from 'classnames';
+import { useUID } from 'react-uid';
+import { Terminal as TerminalIcon } from 'react-feather';
+import styles from './Terminal.module.scss';
+import { Icon } from './Icon';
+export class CommandTimeoutError extends Error {
+    constructor() {
+        super(...arguments);
+        this.name = 'CommandTimeoutError';
+    }
+}
+const HISTORY_LIMIT = 100;
+const COMMAND_TIMEOUT = 60000;
+export const Terminal = memo(({ 'data-test': dataTest, onExecute, commandTimeout = COMMAND_TIMEOUT, historyLimit = HISTORY_LIMIT, className, inputClassName, welcomeMessage, prompt, initialExecutionHistory = [], initialCommand = '', initialLoading = false, autoFocusInitial = true, }) => {
+    const [inputVal, setInputVal] = useState(initialCommand);
+    const [executionHistoryPointer, setExecutionHistoryPointer] = useState();
+    const [executionHistory, setExecutionHistory] = useState(initialExecutionHistory);
+    const addExecutionHistoryItem = (newHistoryItem) => {
+        setExecutionHistory((prevHistory) => {
+            const newHistory = [...prevHistory, newHistoryItem];
+            if (newHistory.length > historyLimit) {
+                newHistory.shift();
+            }
+            return newHistory;
+        });
+        setExecutionHistoryPointer(undefined);
+    };
+    const [executing, setExecuting] = useState(initialLoading);
+    const inputRef = useRef(null);
+    const execute = async () => {
+        const commandTokens = inputVal.split(' ').filter((token) => !!token);
+        let timer;
+        try {
+            setExecuting(true);
+            const res = await Promise.race([
+                onExecute(commandTokens[0], commandTokens.slice(1)),
+                // This promise will never be resolved so we can type is as we want to make TS happy
+                new Promise((_, reject) => {
+                    timer = setTimeout(() => {
+                        reject(new CommandTimeoutError(`${inputVal} exceeded timeout ${commandTimeout}`));
+                    }, commandTimeout);
+                }),
+            ]);
+            addExecutionHistoryItem({ command: inputVal, res, prompt });
+        }
+        catch (err) {
+            if (err instanceof Error) {
+                addExecutionHistoryItem({ command: inputVal, error: err.message, prompt });
+            }
+        }
+        finally {
+            setExecuting(false);
+            clearTimeout(timer);
+            setInputVal('');
+            inputRef.current.focus();
+        }
+    };
+    const traverseHistory = (direction) => {
+        var _a;
+        let nextHistoryPointer;
+        if (direction === 'back') {
+            nextHistoryPointer = executionHistoryPointer !== undefined ? executionHistoryPointer - 1 : executionHistory.length - 1;
+        }
+        else {
+            nextHistoryPointer = executionHistoryPointer !== undefined ? executionHistoryPointer + 1 : 0;
+        }
+        const nextHistoryItem = nextHistoryPointer !== undefined ? executionHistory[nextHistoryPointer] : undefined;
+        if (!nextHistoryItem) {
+            nextHistoryPointer = undefined;
+        }
+        setExecutionHistoryPointer(nextHistoryPointer);
+        setInputVal((_a = nextHistoryItem === null || nextHistoryItem === void 0 ? void 0 : nextHistoryItem.command) !== null && _a !== void 0 ? _a : '');
+    };
+    const onKeyUp = (e) => {
+        switch (e.key) {
+            case 'Enter': {
+                void execute();
+                break;
+            }
+            case 'Up': // IE/Edge specific value
+            case 'ArrowUp': {
+                traverseHistory('back');
+                break;
+            }
+            case 'Down': // IE/Edge specific value
+            case 'ArrowDown': {
+                traverseHistory('forward');
+                break;
+            }
+        }
+    };
+    const loadingTextId = useUID();
+    return (React.createElement("div", { "data-test": dataTest, className: cn(styles.container, className) },
+        welcomeMessage && React.createElement("p", { className: styles.welcome }, welcomeMessage),
+        React.createElement("div", { className: styles.history, role: "alert" }, executionHistory.map((historyItem, i) => (React.createElement(Fragment, { key: i },
+            React.createElement("div", { className: styles.input },
+                historyItem.prompt ? React.createElement("span", { className: styles.prompt }, historyItem.prompt) : null,
+                React.createElement(Icon, { icon: TerminalIcon, ariaHidden: true, className: styles.terminalIcon }),
+                React.createElement("input", { "aria-label": "Historical command", type: "text", value: historyItem.command, readOnly: true, tabIndex: -1 })),
+            historyItem.res && (React.createElement("div", { className: styles.commandRes }, historyItem.res.map((resString, i) => (React.createElement("p", { key: i }, resString))))),
+            historyItem.error && React.createElement("p", { className: styles.commandError }, historyItem.error))))),
+        React.createElement("div", { className: styles.currentCommand },
+            React.createElement("div", { className: styles.input },
+                prompt ? React.createElement("span", { className: styles.prompt }, prompt) : null,
+                React.createElement(Icon, { icon: TerminalIcon, ariaHidden: true, className: styles.terminalIcon }),
+                React.createElement("input", { type: "text", "aria-label": "Command", value: inputVal, onChange: (e) => setInputVal(e.target.value), onKeyUp: onKeyUp, "aria-describedby": executing ? loadingTextId : undefined, disabled: executing, autoFocus: autoFocusInitial, ref: inputRef, className: cn(inputClassName, { [styles.blank]: !inputVal }) })),
+            executing && (React.createElement("div", { className: styles.loading },
+                React.createElement("span", { className: styles.loadingA11yText, id: loadingTextId }, "Command is executing. Please, wait."),
+                "...")))));
+});
+Terminal.displayName = 'Terminal';
+//# sourceMappingURL=Terminal.js.map

package/lib/components/Terminal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Terminal.js","sourceRoot":"","sources":["../../src/components/Terminal.tsx"],"names":[],"mappings":"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"}

package/lib/components/Terminal.module.scss

@@ -0,0 +1,109 @@
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+.container {
+  // Match TextField
+  @include c.typographyBodySmall;
+
+  color: c.$colorText;
+  padding: c.$grid * 5;
+  background-color: c.$colorNeutralWhite;
+}
+
+.input {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  margin: 0;
+  margin-bottom: c.$grid * 3;
+
+  > input {
+    flex: 1 1 auto;
+    min-width: 0;
+    border: none;
+    border-bottom: c.$outlineWidth solid c.$colorNeutral;
+    padding: 0;
+
+    // Align input bottom line with the icon
+    margin-bottom: c.$grid;
+    outline: none;
+    background-color: transparent;
+    color: c.$colorText;
+    box-sizing: border-box;
+    font-size: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+
+    &.blank {
+      border-bottom-color: transparent;
+    }
+
+    &:hover,
+    &.hover {
+      border-bottom-color: c.$colorText;
+    }
+
+    &:focus-visible,
+    &.focus {
+      // Do not remove outline for high-contrast modes
+      // https://stackoverflow.com/a/52616313
+      outline: transparent solid c.$outlineWidth;
+      border-bottom-color: c.$colorAccessibilityOutline;
+    }
+
+    &:disabled {
+      color: c.$colorTextSecondary;
+      background-color: transparent;
+      border-bottom-color: c.$colorNeutral;
+    }
+
+    &:read-only {
+      border-bottom-color: c.$colorNeutral;
+    }
+  }
+}
+
+.welcome {
+  @include c.typographyBodySmall('bold');
+
+  margin: 0;
+  margin-bottom: c.$grid * 5;
+}
+
+.commandRes {
+  color: c.$colorSuccessDark;
+  margin: 0;
+  margin-bottom: c.$grid * 3;
+
+  > p {
+    margin: 0;
+    margin-bottom: c.$grid;
+    white-space: break-spaces;
+  }
+}
+
+.commandError {
+  color: c.$colorErrorDark;
+  margin: 0;
+  margin-bottom: c.$grid * 3;
+}
+
+.loading {
+  margin: 0;
+  margin-bottom: c.$grid * 3;
+  position: relative;
+}
+
+.loadingA11yText {
+  @include h.visuallyHidden;
+}
+
+.terminalIcon {
+  margin-right: c.$grid * 3;
+}
+
+.prompt {
+  @include c.typographyBodySmall('bold');
+
+  margin-right: c.$grid;
+}

package/lib/components/TextArea.d.ts

@@ -0,0 +1,19 @@
+import { ChangeEvent, FC, FocusEvent } from 'react';
+import { DataTestProp } from '../../src';
+import { FieldHeaderProps } from './FieldHeader';
+export type TextAreaSize = 'medium' | 'small';
+export type TextAreaCoreProps = {
+    name: string;
+    value?: string;
+    onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void;
+    onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    error?: string;
+};
+export type TextAreaExtraProps = {
+    textareaClassName?: string;
+    errorClassName?: string;
+    resizable?: boolean;
+    size?: TextAreaSize;
+} & Partial<Pick<HTMLTextAreaElement, 'className' | 'disabled' | 'placeholder' | 'required' | 'rows'>> & Omit<FieldHeaderProps, 'id'>;
+export type TextAreaProps = TextAreaCoreProps & TextAreaExtraProps & DataTestProp;
+export declare const TextArea: FC<TextAreaProps>;

package/lib/components/TextArea.js

@@ -0,0 +1,31 @@
+import React, { useRef } from 'react';
+import cn from 'classnames';
+import { useUID } from 'react-uid';
+import { Error, errorId } from './Error';
+import { FieldHeader } from './FieldHeader';
+import { useResizeAware } from '../hooks/useResizeAware';
+import styles from './TextArea.module.scss';
+export const TextArea = (props) => {
+    const { error, label, name, onBlur, onChange, placeholder, value, disabled, className, labelClassName, textareaClassName, errorClassName, required, resizable = true, helperText, size = 'medium', 'data-test': dataTest = 'textarea', ...htmlAttrs } = props;
+    const id = useUID();
+    const textareaRef = useRef(null);
+    const popperRef = useRef();
+    useResizeAware(textareaRef.current, () => {
+        var _a, _b;
+        (_b = (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.forceUpdate) === null || _b === void 0 ? void 0 : _b.call(_a);
+    });
+    return (React.createElement("div", { "data-test": dataTest, className: cn(styles.container, {
+            [styles.disabled]: disabled,
+            [styles.hasError]: error,
+            [styles.withError]: 'error' in props,
+        }, className) },
+        React.createElement(FieldHeader, { "data-test": dataTest, label: label, id: id, helperText: helperText, labelClassName: labelClassName, size: size }),
+        React.createElement("div", { className: styles.textAreaContainer },
+            React.createElement("div", { className: styles.textAreaWrapper },
+                React.createElement("textarea", { ref: textareaRef, "aria-invalid": !!error, "aria-required": required, "aria-errormessage": error && errorId(id), id: id, className: cn({
+                        [styles.notResizable]: !resizable,
+                    }, textareaClassName), placeholder: placeholder, name: name, onBlur: onBlur, onChange: onChange, required: required, value: value !== null && value !== void 0 ? value : '', disabled: disabled, ...htmlAttrs }),
+                React.createElement("div", { className: styles.borderOverlay }))),
+        React.createElement(Error, { "data-test": `${dataTest}-error`, truncated: true, error: error, className: cn(styles.errorContainer, errorClassName), inputId: id })));
+};
+//# sourceMappingURL=TextArea.js.map

package/lib/components/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../src/components/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA+B,MAAM,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAExD,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAsB3C,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,KAAK,EAAE,EAAE;IACnD,MAAM,EACJ,KAAK,EACL,KAAK,EACL,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,WAAW,EACX,KAAK,EACL,QAAQ,EACR,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,UAAU,EACV,IAAI,GAAG,QAAQ,EACf,WAAW,EAAE,QAAQ,GAAG,UAAU,EAClC,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IACT,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IACnB,MAAM,WAAW,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAA;IAErD,MAAM,SAAS,GAAG,MAAM,EAAa,CAAA;IACrC,cAAc,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,EAAE;;QACvC,MAAA,MAAA,SAAS,CAAC,OAAO,0CAAE,WAAW,kDAAI,CAAA;IACpC,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,0CACa,QAAQ,EACnB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;YACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,KAAK;YACxB,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,IAAI,KAAK;SACrC,EACD,SAAS,CACV;QAED,oBAAC,WAAW,iBAAY,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,GAAI;QAC9H,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB;YACtC,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe;gBACpC,kCACE,GAAG,EAAE,WAAW,kBACF,CAAC,CAAC,KAAK,mBACN,QAAQ,uBACJ,KAAK,IAAI,OAAO,CAAC,EAAE,CAAC,EACvC,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,EAAE,CACX;wBACE,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,SAAS;qBAClC,EACD,iBAAiB,CAClB,EACD,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,EAClB,QAAQ,EAAE,QAAQ,KACd,SAAS,GACb;gBACF,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa,GAAI,CACpC,CACF;QACN,oBAAC,KAAK,iBAAY,GAAG,QAAQ,QAAQ,EAAE,SAAS,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,GAAI,CAChI,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/TextArea.module.scss

@@ -0,0 +1,144 @@
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+// Why is it so complex? Why do we need .borderOverlay?
+// Ideally, we would have used native `border` for every style: hover, error, focus.
+// Since our focus outline is thicker than the native border, we cannot use the native border for focus styles.
+// Say, the initial border is 1px. For focus you make it 2px.
+// As result, it shifts the content inside. Not nice UX at all.
+// To work around that in other places, we do not change the thickness of the border on focus.
+// Instead we add a 1px inset box-shadow which adds ups to the border and gives us the desired 2px outline on focus.
+// Back to the textarea. As you can see it is supposed to have rounded corners. So we use border-radius.
+// Ideally, we would have used border-radius on the textarea itself
+// and applied the same technique with the inset box-shadow.
+// Guess what? Chrome does not apply border-radius to the scrollbar inside of the textarea.
+// Next step is to add a wrapping div to the textarea, and apply the border-radius,
+// the border itself and the inset box-shadow there.
+// Now the inset box-shadow is rendered under the textarea,
+// so the scrollbar is rendered on top of it and the textarea text as well.
+// At least it makes sense. After all, it is a shadow. It is supposed to decorate, not overlap and override.
+// Let's go deeper down the rabbit hole.
+// We add the wrapping div and add the border-radius there, but we do not add the border itself.
+// Instead we make the wrapping div relative.
+// Next, we add an absolute child div. We add the border with the inset box-shadow to that div,
+// so it is rendered on top of the textarea.
+// Finally, we add textarea:focus styling to support IE11 that does not play nice with :focus-within.
+
+.container {
+  @include c.typographyBodySmall;
+
+  color: c.$colorText;
+  box-sizing: border-box;
+
+  .label {
+    display: block;
+    margin-bottom: c.$grid;
+
+    &.small {
+      @include c.typographyBodySmall;
+    }
+  }
+
+  .helperText {
+    display: block;
+    margin: 2 * c.$grid 0 0 c.$grid;
+  }
+
+  .textAreaContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  .borderOverlay {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+    z-index: c.$zIndex100;
+    border-radius: c.$borderRadius;
+    border: c.$borderWidth solid c.$colorNeutralLight;
+    box-sizing: border-box;
+  }
+
+  .textAreaWrapper {
+    position: relative;
+    width: 100%;
+    border-radius: c.$borderRadius;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  textarea {
+    display: block;
+    padding: c.$grid * 2 c.$grid * 3;
+    border: none;
+    box-sizing: border-box;
+    width: 100%;
+    font-family: inherit;
+    font-weight: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    background-color: c.$colorOverlayBackground;
+    /* doiuse-disable css-resize */
+    resize: vertical;
+    /* doiuse-enable css-resize */
+
+    // Note: Resize is not supported by IE11, it's presence does no harm though
+    &.notResizable {
+      /* doiuse-disable css-resize */
+      resize: none;
+      /* doiuse-enable css-resize */
+    }
+
+    &::placeholder {
+      color: c.$colorTextSecondary;
+    }
+  }
+
+  &.hover .textAreaWrapper,
+  .textAreaWrapper:hover {
+    .borderOverlay {
+      border-color: c.$colorPrimary;
+    }
+  }
+
+  &.disabled {
+    .textAreaWrapper {
+      color: c.$colorTextSecondary;
+      background-color: c.$colorNeutral;
+
+      .borderOverlay {
+        border-color: c.$colorNeutralLight;
+      }
+    }
+  }
+
+  &.hasError {
+    .textAreaWrapper .borderOverlay {
+      border-color: c.$colorError;
+    }
+
+    label {
+      color: c.$colorError;
+    }
+  }
+
+  textarea:focus {
+    // Do not remove outline for high-contrast modes
+    // https://stackoverflow.com/a/52616313
+    outline: transparent solid c.$outlineWidth;
+  }
+
+  &.focus .textAreaWrapper .borderOverlay,
+  .textAreaWrapper textarea:focus + .borderOverlay {
+    @include h.outlineFormField;
+  }
+}
+
+@include h.withError;

package/lib/components/TextAreaFormik.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { FieldValidator } from 'formik';
+import { TextAreaExtraProps } from './TextArea';
+import { ExtractKeysOfValueType } from '../utils/types';
+export type TextAreaFormikProps<V extends object> = TextAreaExtraProps & {
+    name: ExtractKeysOfValueType<V, string | undefined>;
+    validate?: FieldValidator;
+};
+export declare const TextAreaFormik: <V extends object>({ name, validate, ...props }: TextAreaFormikProps<V>) => ReactElement;

package/lib/components/TextAreaFormik.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextAreaFormik.js","sourceRoot":"","sources":["../../src/components/TextAreaFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAkB,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjD,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAA;AAQzD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA0B,EAAgB,EAAE;IACrH,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAqB;QACjD,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,QAAQ,OACH,KAAK,EACT,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAChF,CACH,CAAA;AACH,CAAC,CAAA"}