@pingux/astro 2.125.0 → 2.126.0-alpha.0

package/lib/cjs/components/CodeEditor/CodeEditor.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { CodeEditorProps } from '../../types';
-declare const CodeEditor: React.ForwardRefExoticComponent<CodeEditorProps & React.RefAttributes<HTMLElement>>;
+declare const CodeEditor: React.ForwardRefExoticComponent<CodeEditorProps & React.RefAttributes<HTMLDivElement>>;
 export default CodeEditor;

package/lib/cjs/components/CodeEditor/CodeEditor.js

@@ -10,34 +10,77 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = _interopRequireDefault(require("@monaco-editor/react"));
+var _hooks = require("../../hooks");
 var _index = require("../../index");
+var _languageMapping = _interopRequireDefault(require("../../utils/devUtils/constants/languageMapping"));
 var _react3 = require("@emotion/react");
-var _excluded = ["value", "language", "onChange", "onValidate", "height"];
+var _excluded = ["defaultValue", "language", "onChange", "onValidate", "height", "className", "isReadOnly", "iconButtonProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var CodeEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var value = props.value,
+  var defaultValue = props.defaultValue,
     language = props.language,
     onChange = props.onChange,
     onValidate = props.onValidate,
     height = props.height,
+    className = props.className,
+    isReadOnly = props.isReadOnly,
+    iconButtonProps = props.iconButtonProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+      isReadOnly: isReadOnly
+    }),
+    classNames = _useStatusClasses.classNames;
   var editorRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    code = _useState2[0],
+    setCode = _useState2[1];
+  var handleChange = function handleChange(value) {
+    if (value) {
+      setCode(value);
+      if (onChange) {
+        onChange(value);
+      }
+    }
+  };
+  var languageName = function languageName(languageExtension) {
+    return _languageMapping["default"][languageExtension] || languageExtension;
+  };
   return (0, _react3.jsx)(_index.Box, (0, _extends2["default"])({}, others, {
     ref: ref
   }), (0, _react3.jsx)(_index.Box, {
-    variant: "codeEditor.wrapper",
-    ref: editorRef,
-    height: height
+    ref: ref,
+    className: classNames,
+    variant: "codeEditor.wrapper"
+  }, (0, _react3.jsx)(_index.Box, {
+    isRow: true,
+    justifyContent: "space-between",
+    alignItems: "center",
+    variant: "codeEditor.header"
+  }, (0, _react3.jsx)(_index.Text, {
+    mb: "0",
+    mr: "sm",
+    py: "sm"
+  }, typeof language === 'string' ? languageName(language) : ''), (0, _react3.jsx)(_index.CopyText, {
+    ref: ref,
+    mode: "rightText",
+    textToCopy: code || defaultValue,
+    iconButtonProps: iconButtonProps
+  })), (0, _react3.jsx)(_index.Box, {
+    height: height,
+    className: classNames,
+    ref: editorRef
   }, (0, _react3.jsx)(_react2["default"], {
     height: "100%",
     language: language,
-    value: value,
+    defaultValue: defaultValue,
     theme: "vs-light",
-    onChange: onChange,
+    onChange: handleChange,
     onValidate: onValidate,
     options: {
       fontSize: 14,
@@ -47,9 +90,15 @@ var CodeEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       },
       stickyScroll: {
         enabled: false
+      },
+      readOnly: isReadOnly,
+      scrollBeyondLastLine: false,
+      padding: {
+        top: 13,
+        bottom: 13
       }
     }
-  })));
+  }))));
 });
 var _default = CodeEditor;
 exports["default"] = _default;

package/lib/cjs/components/CodeEditor/CodeEditor.stories.d.ts

@@ -3,7 +3,7 @@ import { StoryFn } from '@storybook/react';
 import { CodeEditorProps } from '../../types';
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<CodeEditorProps & React.RefAttributes<HTMLElement>>;
+    component: React.ForwardRefExoticComponent<CodeEditorProps & React.RefAttributes<HTMLDivElement>>;
     parameters: {
         docs: {
             page: () => React.JSX.Element;
@@ -25,3 +25,4 @@ export default _default;
 export declare const TypescriptEditor: StoryFn<CodeEditorProps>;
 export declare const JavascriptEditor: StoryFn<CodeEditorProps>;
 export declare const JsonEditor: StoryFn<CodeEditorProps>;
+export declare const ReadOnly: StoryFn<CodeEditorProps>;

package/lib/cjs/components/CodeEditor/CodeEditor.stories.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.TypescriptEditor = exports.JsonEditor = exports.JavascriptEditor = void 0;
+exports["default"] = exports.TypescriptEditor = exports.ReadOnly = exports.JsonEditor = exports.JavascriptEditor = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
@@ -42,7 +42,7 @@ var tsCode = "const stringValue: string = 15;\n\nfunction addOne(integer: number
 var jsCode = "\nfunction factorial(n) {\n  if (n === 0 || n === 1) {\n    return 1;\n  } else {\n    return n * factorial(n - 1);\n  }\n}\n\nconsole.log(factorial(5));\n\n(a) => {};\n";
 var TypescriptEditor = function TypescriptEditor() {
   return (0, _react2.jsx)(_index.CodeEditor, {
-    value: tsCode,
+    defaultValue: tsCode,
     language: "typescript",
     height: "200px"
   });
@@ -50,7 +50,7 @@ var TypescriptEditor = function TypescriptEditor() {
 exports.TypescriptEditor = TypescriptEditor;
 var JavascriptEditor = function JavascriptEditor() {
   return (0, _react2.jsx)(_index.CodeEditor, {
-    value: jsCode,
+    defaultValue: jsCode,
     language: "javascript",
     height: "200px"
   });
@@ -58,9 +58,18 @@ var JavascriptEditor = function JavascriptEditor() {
 exports.JavascriptEditor = JavascriptEditor;
 var JsonEditor = function JsonEditor() {
   return (0, _react2.jsx)(_index.CodeEditor, {
-    value: jsonCode,
+    defaultValue: jsonCode,
     language: "json",
     height: "200px"
   });
 };
-exports.JsonEditor = JsonEditor;
+exports.JsonEditor = JsonEditor;
+var ReadOnly = function ReadOnly() {
+  return (0, _react2.jsx)(_index.CodeEditor, {
+    defaultValue: jsonCode,
+    language: "json",
+    height: "200px",
+    isReadOnly: true
+  });
+};
+exports.ReadOnly = ReadOnly;

package/lib/cjs/components/CodeEditor/CodeEditor.styles.d.ts

@@ -5,6 +5,21 @@ declare const _default: {
         borderStyle: string;
         borderWidth: string;
         width: string;
+        '&.is-read-only': {
+            borderWidth: string;
+            '&:after': {
+                display: string;
+            };
+        };
+    };
+    header: {
+        color: string;
+        px: string;
+        width: string;
+        borderBottom: string;
+        borderColor: string;
+        lineHeight: string;
+        fontWeight: string;
     };
 };
 export default _default;

package/lib/cjs/components/CodeEditor/CodeEditor.styles.js

@@ -19,12 +19,28 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var wrapper = _objectSpread(_objectSpread({}, _Input.input.fieldControlWrapper), {}, {
   borderColor: 'neutral.80',
-  borderRadius: '3px 4px 4px 3px',
+  borderRadius: '4px 0 0 4px',
   borderStyle: 'solid',
   borderWidth: '1px 1px 1px 0px',
-  width: '100%'
+  width: '100%',
+  '&.is-read-only': {
+    borderWidth: '1px',
+    '&:after': {
+      display: 'none'
+    }
+  }
 });
+var header = {
+  color: 'gray-300',
+  px: 'md',
+  width: '100%',
+  borderBottom: '1px solid',
+  borderColor: 'neutral.80',
+  lineHeight: 'body',
+  fontWeight: '600'
+};
 var _default = {
-  wrapper: wrapper
+  wrapper: wrapper,
+  header: header
 };
 exports["default"] = _default;

package/lib/cjs/components/CodeEditor/CodeEditor.test.js

@@ -24,7 +24,7 @@ var jsCode = "\n  function helloWorld() {\n    console.log(\"Hello, World!\");\n
   },
   renderComponent: function renderComponent(props) {
     return (0, _react2.jsx)(_index.CodeEditor, (0, _extends2["default"])({}, defaultProps, props, {
-      value: jsCode,
+      defaultValue: jsCode,
       language: "javascript"
     }));
   }
@@ -35,14 +35,14 @@ jest.mock('@monaco-editor/react', function () {
     "default": function _default(_ref) {
       var _context;
       var language = _ref.language,
-        value = _ref.value,
+        defaultValue = _ref.defaultValue,
         _onChange = _ref.onChange;
       return (0, _react2.jsx)("textarea", {
         "data-testid": "mock-monaco-editor",
         onChange: function onChange(e) {
           return _onChange(e.target.value);
         },
-        value: (0, _concat["default"])(_context = "Editor Language: ".concat(language, ", Code:")).call(_context, value),
+        value: (0, _concat["default"])(_context = "Editor Language: ".concat(language, ", Code:")).call(_context, defaultValue),
         "aria-label": "Code editor"
       });
     }
@@ -53,7 +53,7 @@ describe('CodeEditor', function () {
     var value = 'console.log("Hello, World!");';
     (0, _testWrapper.render)((0, _react2.jsx)(_index.CodeEditor, {
       language: "javascript",
-      value: value
+      defaultValue: value
     }));
     expect(_testWrapper.screen.getByTestId('mock-monaco-editor')).toBeInTheDocument();
     expect(_testWrapper.screen.getByText('Editor Language: javascript, Code:console.log("Hello, World!");')).toBeInTheDocument();
@@ -63,7 +63,7 @@ describe('CodeEditor', function () {
     var mockOnChange = jest.fn();
     (0, _testWrapper.render)((0, _react2.jsx)(_index.CodeEditor, {
       language: "javascript",
-      value: value,
+      defaultValue: value,
       onChange: mockOnChange
     }));
     var editor = _testWrapper.screen.getByTestId('mock-monaco-editor');
@@ -79,4 +79,28 @@ describe('CodeEditor', function () {
     });
     expect(mockOnChange).toHaveBeenCalled();
   });
+  it('displays the correct language name in the header for mapped languages', function () {
+    (0, _testWrapper.render)((0, _react2.jsx)(_index.CodeEditor, {
+      language: "typescript",
+      defaultValue: jsCode
+    }));
+    expect(_testWrapper.screen.getByText('TypeScript')).toBeInTheDocument();
+    (0, _testWrapper.render)((0, _react2.jsx)(_index.CodeEditor, {
+      language: "scss",
+      defaultValue: jsCode
+    }));
+    expect(_testWrapper.screen.getByText('SCSS')).toBeInTheDocument();
+    (0, _testWrapper.render)((0, _react2.jsx)(_index.CodeEditor, {
+      language: "python",
+      defaultValue: jsCode
+    }));
+    expect(_testWrapper.screen.getByText('Python')).toBeInTheDocument();
+  });
+  it('displays the language extension as-is if not mapped', function () {
+    (0, _testWrapper.render)((0, _react2.jsx)(_index.CodeEditor, {
+      language: "unknownlang",
+      defaultValue: jsCode
+    }));
+    expect(_testWrapper.screen.getByText('unknownlang')).toBeInTheDocument();
+  });
 });

package/lib/cjs/components/MultivaluesField/CondensedMultivaluesField.js

@@ -51,7 +51,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _selectionManager$sta, _selectionManager$sta2, _selectionManager$sta3, _listBoxRef$current;
+  var _selectionManager$sta, _selectionManager$sta2, _selectionManager$sta3, _listBoxRef$current2;
   var defaultSelectedKeys = props.defaultSelectedKeys,
     direction = props.direction,
     _props$disabledKeys = props.disabledKeys,
@@ -247,6 +247,14 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     }
     if (onKeyDown) onKeyDown(e.nativeEvent);
   };
+  var handleBlur = function handleBlur(e) {
+    var _inputWrapperRef$curr, _listBoxRef$current;
+    var relatedTarget = e.relatedTarget || document.activeElement;
+    if ((_inputWrapperRef$curr = inputWrapperRef.current) !== null && _inputWrapperRef$curr !== void 0 && _inputWrapperRef$curr.contains(relatedTarget) || (_listBoxRef$current = listBoxRef.current) !== null && _listBoxRef$current !== void 0 && _listBoxRef$current.contains(relatedTarget) || buttonRef.current === relatedTarget) {
+      return;
+    }
+    setIsOpen(false);
+  };
   var _useState9 = (0, _react.useState)('Select All'),
     _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
     selectionState = _useState10[0],
@@ -301,7 +309,10 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     loadingState: loadingState,
     isLoading: loadingState === _loadingStates["default"].LOADING_MORE,
     "aria-label": "List of options",
-    isCondensed: mode === 'condensed'
+    isCondensed: mode === 'condensed',
+    onBlur: function onBlur(e) {
+      return handleBlur(e);
+    }
   }, overlayProps))), (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: close
   }));
@@ -320,7 +331,7 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
   var inputProps = _objectSpread(_objectSpread({}, customInputProps), {}, {
     controlProps: {
       'aria-activedescendant': activeDescendant,
-      'aria-controls': (_listBoxRef$current = listBoxRef.current) === null || _listBoxRef$current === void 0 ? void 0 : _listBoxRef$current.id,
+      'aria-controls': (_listBoxRef$current2 = listBoxRef.current) === null || _listBoxRef$current2 === void 0 ? void 0 : _listBoxRef$current2.id,
       'aria-expanded': isOpen,
       role: 'combobox',
       ref: inputRef,

package/lib/cjs/components/MultivaluesField/MultivaluesField.test.js

@@ -1060,6 +1060,41 @@ test('opening and closing listbox fires "onOpenChange" in condensed mode', funct
   expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(onOpenChange).toHaveBeenCalledWith(false);
 });
+test('in condensed mode, clicking outside of listbox closes listbox', function () {
+  var onOpenChange = jest.fn();
+  getComponent({
+    mode: 'condensed',
+    onOpenChange: onOpenChange
+  });
+  var input = _testWrapper.screen.getByRole('combobox');
+  _userEvent["default"].tab();
+  expect(input).toHaveFocus();
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(true);
+  _userEvent["default"].click(document.body);
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(false);
+});
+test('in condensed mode, tabbing outside of listbox closes listbox', function () {
+  var onOpenChange = jest.fn();
+  getComponent({
+    mode: 'condensed',
+    onOpenChange: onOpenChange
+  });
+  var input = _testWrapper.screen.getByRole('combobox');
+  _userEvent["default"].tab();
+  expect(input).toHaveFocus();
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(true);
+  // one tab to move focus to select all button
+  _userEvent["default"].tab();
+  // one tab to move focus to list
+  _userEvent["default"].tab();
+  // one tab to move focus beyond lsit
+  _userEvent["default"].tab();
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(false);
+});
 test('selected keys in condensed mode ', function () {
   getComponent({
     mode: 'condensed',

package/lib/cjs/types/codeEditor.d.ts

@@ -1,12 +1,15 @@
 import { type editor } from 'monaco-editor';
 import * as monaco from 'monaco-editor';
+import { IconButtonProps } from './iconButton';
 import { DOMAttributes, StyleProps } from './shared';
 import { FocusableElement } from '.';
 export interface CodeEditorProps extends Omit<DOMAttributes<FocusableElement>, 'onChange'>, StyleProps {
-    value?: string;
+    defaultValue?: string;
     language?: string;
     onChange?: (value: string | undefined) => void;
     onValidate?: (markers: editor.IMarker[]) => void;
+    isReadOnly?: boolean;
+    iconButtonProps?: Omit<IconButtonProps, 'onPress'>;
 }
 export interface CustomEditorOptions extends monaco.editor.IStandaloneEditorConstructionOptions {
     stickyScroll?: {

package/lib/cjs/utils/devUtils/constants/languageMapping.d.ts

@@ -0,0 +1,31 @@
+declare const _default: {
+    typescript: string;
+    javascript: string;
+    css: string;
+    less: string;
+    scss: string;
+    json: string;
+    html: string;
+    xml: string;
+    php: string;
+    csharp: string;
+    cpp: string;
+    razor: string;
+    markdown: string;
+    diff: string;
+    java: string;
+    vb: string;
+    coffeescript: string;
+    handlebars: string;
+    bat: string;
+    pug: string;
+    fsharp: string;
+    lua: string;
+    powershell: string;
+    python: string;
+    ruby: string;
+    sass: string;
+    r: string;
+    'objective-c': string;
+};
+export default _default;

package/lib/cjs/utils/devUtils/constants/languageMapping.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  'typescript': 'TypeScript',
+  'javascript': 'JavaScript',
+  'css': 'CSS',
+  'less': 'LESS',
+  'scss': 'SCSS',
+  'json': 'JSON',
+  'html': 'HTML',
+  'xml': 'XML',
+  'php': 'PHP',
+  'csharp': 'C#',
+  'cpp': 'C++',
+  'razor': 'Razor',
+  'markdown': 'Markdown',
+  'diff': 'Diff',
+  'java': 'Java',
+  'vb': 'VB',
+  'coffeescript': 'CoffeeScript',
+  'handlebars': 'Handlebars',
+  'bat': 'Batch',
+  'pug': 'Pug',
+  'fsharp': 'F#',
+  'lua': 'Lua',
+  'powershell': 'PowerShell',
+  'python': 'Python',
+  'ruby': 'Ruby',
+  'sass': 'SASS',
+  'r': 'R',
+  'objective-c': 'Objective-C'
+};
+exports["default"] = _default;

package/lib/components/CodeEditor/CodeEditor.js

@@ -1,30 +1,73 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["value", "language", "onChange", "onValidate", "height"];
-import React, { forwardRef, useRef } from 'react';
+var _excluded = ["defaultValue", "language", "onChange", "onValidate", "height", "className", "isReadOnly", "iconButtonProps"];
+import React, { forwardRef, useRef, useState } from 'react';
 import Editor from '@monaco-editor/react';
-import { Box } from '../../index';
+import { useStatusClasses } from '../../hooks';
+import { Box, CopyText, Text } from '../../index';
+import languageMapping from '../../utils/devUtils/constants/languageMapping';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CodeEditor = /*#__PURE__*/forwardRef(function (props, ref) {
-  var value = props.value,
+  var defaultValue = props.defaultValue,
     language = props.language,
     onChange = props.onChange,
     onValidate = props.onValidate,
     height = props.height,
+    className = props.className,
+    isReadOnly = props.isReadOnly,
+    iconButtonProps = props.iconButtonProps,
     others = _objectWithoutProperties(props, _excluded);
+  var _useStatusClasses = useStatusClasses(className, {
+      isReadOnly: isReadOnly
+    }),
+    classNames = _useStatusClasses.classNames;
   var editorRef = useRef(null);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    code = _useState2[0],
+    setCode = _useState2[1];
+  var handleChange = function handleChange(value) {
+    if (value) {
+      setCode(value);
+      if (onChange) {
+        onChange(value);
+      }
+    }
+  };
+  var languageName = function languageName(languageExtension) {
+    return languageMapping[languageExtension] || languageExtension;
+  };
   return ___EmotionJSX(Box, _extends({}, others, {
     ref: ref
   }), ___EmotionJSX(Box, {
-    variant: "codeEditor.wrapper",
-    ref: editorRef,
-    height: height
+    ref: ref,
+    className: classNames,
+    variant: "codeEditor.wrapper"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    justifyContent: "space-between",
+    alignItems: "center",
+    variant: "codeEditor.header"
+  }, ___EmotionJSX(Text, {
+    mb: "0",
+    mr: "sm",
+    py: "sm"
+  }, typeof language === 'string' ? languageName(language) : ''), ___EmotionJSX(CopyText, {
+    ref: ref,
+    mode: "rightText",
+    textToCopy: code || defaultValue,
+    iconButtonProps: iconButtonProps
+  })), ___EmotionJSX(Box, {
+    height: height,
+    className: classNames,
+    ref: editorRef
   }, ___EmotionJSX(Editor, {
     height: "100%",
     language: language,
-    value: value,
+    defaultValue: defaultValue,
     theme: "vs-light",
-    onChange: onChange,
+    onChange: handleChange,
     onValidate: onValidate,
     options: {
       fontSize: 14,
@@ -34,8 +77,14 @@ var CodeEditor = /*#__PURE__*/forwardRef(function (props, ref) {
       },
       stickyScroll: {
         enabled: false
+      },
+      readOnly: isReadOnly,
+      scrollBeyondLastLine: false,
+      padding: {
+        top: 13,
+        bottom: 13
       }
     }
-  })));
+  }))));
 });
 export default CodeEditor;

package/lib/components/CodeEditor/CodeEditor.stories.js

@@ -33,22 +33,30 @@ var tsCode = "const stringValue: string = 15;\n\nfunction addOne(integer: number
 var jsCode = "\nfunction factorial(n) {\n  if (n === 0 || n === 1) {\n    return 1;\n  } else {\n    return n * factorial(n - 1);\n  }\n}\n\nconsole.log(factorial(5));\n\n(a) => {};\n";
 export var TypescriptEditor = function TypescriptEditor() {
   return ___EmotionJSX(CodeEditor, {
-    value: tsCode,
+    defaultValue: tsCode,
     language: "typescript",
     height: "200px"
   });
 };
 export var JavascriptEditor = function JavascriptEditor() {
   return ___EmotionJSX(CodeEditor, {
-    value: jsCode,
+    defaultValue: jsCode,
     language: "javascript",
     height: "200px"
   });
 };
 export var JsonEditor = function JsonEditor() {
   return ___EmotionJSX(CodeEditor, {
-    value: jsonCode,
+    defaultValue: jsonCode,
     language: "json",
     height: "200px"
   });
+};
+export var ReadOnly = function ReadOnly() {
+  return ___EmotionJSX(CodeEditor, {
+    defaultValue: jsonCode,
+    language: "json",
+    height: "200px",
+    isReadOnly: true
+  });
 };

package/lib/components/CodeEditor/CodeEditor.styles.js

@@ -12,11 +12,27 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { input } from '../Input/Input.styles';
 var wrapper = _objectSpread(_objectSpread({}, input.fieldControlWrapper), {}, {
   borderColor: 'neutral.80',
-  borderRadius: '3px 4px 4px 3px',
+  borderRadius: '4px 0 0 4px',
   borderStyle: 'solid',
   borderWidth: '1px 1px 1px 0px',
-  width: '100%'
+  width: '100%',
+  '&.is-read-only': {
+    borderWidth: '1px',
+    '&:after': {
+      display: 'none'
+    }
+  }
 });
+var header = {
+  color: 'gray-300',
+  px: 'md',
+  width: '100%',
+  borderBottom: '1px solid',
+  borderColor: 'neutral.80',
+  lineHeight: 'body',
+  fontWeight: '600'
+};
 export default {
-  wrapper: wrapper
+  wrapper: wrapper,
+  header: header
 };

package/lib/components/CodeEditor/CodeEditor.test.js

@@ -21,7 +21,7 @@ universalComponentTests({
   },
   renderComponent: function renderComponent(props) {
     return ___EmotionJSX(CodeEditor, _extends({}, defaultProps, props, {
-      value: jsCode,
+      defaultValue: jsCode,
       language: "javascript"
     }));
   }
@@ -32,14 +32,14 @@ jest.mock('@monaco-editor/react', function () {
     "default": function _default(_ref) {
       var _context;
       var language = _ref.language,
-        value = _ref.value,
+        defaultValue = _ref.defaultValue,
         _onChange = _ref.onChange;
       return ___EmotionJSX("textarea", {
         "data-testid": "mock-monaco-editor",
         onChange: function onChange(e) {
           return _onChange(e.target.value);
         },
-        value: _concatInstanceProperty(_context = "Editor Language: ".concat(language, ", Code:")).call(_context, value),
+        value: _concatInstanceProperty(_context = "Editor Language: ".concat(language, ", Code:")).call(_context, defaultValue),
         "aria-label": "Code editor"
       });
     }
@@ -50,7 +50,7 @@ describe('CodeEditor', function () {
     var value = 'console.log("Hello, World!");';
     render(___EmotionJSX(CodeEditor, {
       language: "javascript",
-      value: value
+      defaultValue: value
     }));
     expect(screen.getByTestId('mock-monaco-editor')).toBeInTheDocument();
     expect(screen.getByText('Editor Language: javascript, Code:console.log("Hello, World!");')).toBeInTheDocument();
@@ -60,7 +60,7 @@ describe('CodeEditor', function () {
     var mockOnChange = jest.fn();
     render(___EmotionJSX(CodeEditor, {
       language: "javascript",
-      value: value,
+      defaultValue: value,
       onChange: mockOnChange
     }));
     var editor = screen.getByTestId('mock-monaco-editor');
@@ -76,4 +76,28 @@ describe('CodeEditor', function () {
     });
     expect(mockOnChange).toHaveBeenCalled();
   });
+  it('displays the correct language name in the header for mapped languages', function () {
+    render(___EmotionJSX(CodeEditor, {
+      language: "typescript",
+      defaultValue: jsCode
+    }));
+    expect(screen.getByText('TypeScript')).toBeInTheDocument();
+    render(___EmotionJSX(CodeEditor, {
+      language: "scss",
+      defaultValue: jsCode
+    }));
+    expect(screen.getByText('SCSS')).toBeInTheDocument();
+    render(___EmotionJSX(CodeEditor, {
+      language: "python",
+      defaultValue: jsCode
+    }));
+    expect(screen.getByText('Python')).toBeInTheDocument();
+  });
+  it('displays the language extension as-is if not mapped', function () {
+    render(___EmotionJSX(CodeEditor, {
+      language: "unknownlang",
+      defaultValue: jsCode
+    }));
+    expect(screen.getByText('unknownlang')).toBeInTheDocument();
+  });
 });

package/lib/components/MultivaluesField/CondensedMultivaluesField.js

@@ -39,7 +39,7 @@ import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusP
 import ListBox from '../ListBox';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _selectionManager$sta, _selectionManager$sta2, _selectionManager$sta3, _listBoxRef$current;
+  var _selectionManager$sta, _selectionManager$sta2, _selectionManager$sta3, _listBoxRef$current2;
   var defaultSelectedKeys = props.defaultSelectedKeys,
     direction = props.direction,
     _props$disabledKeys = props.disabledKeys,
@@ -235,6 +235,14 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     if (onKeyDown) onKeyDown(e.nativeEvent);
   };
+  var handleBlur = function handleBlur(e) {
+    var _inputWrapperRef$curr, _listBoxRef$current;
+    var relatedTarget = e.relatedTarget || document.activeElement;
+    if ((_inputWrapperRef$curr = inputWrapperRef.current) !== null && _inputWrapperRef$curr !== void 0 && _inputWrapperRef$curr.contains(relatedTarget) || (_listBoxRef$current = listBoxRef.current) !== null && _listBoxRef$current !== void 0 && _listBoxRef$current.contains(relatedTarget) || buttonRef.current === relatedTarget) {
+      return;
+    }
+    setIsOpen(false);
+  };
   var _useState9 = useState('Select All'),
     _useState10 = _slicedToArray(_useState9, 2),
     selectionState = _useState10[0],
@@ -289,7 +297,10 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     loadingState: loadingState,
     isLoading: loadingState === loadingStates.LOADING_MORE,
     "aria-label": "List of options",
-    isCondensed: mode === 'condensed'
+    isCondensed: mode === 'condensed',
+    onBlur: function onBlur(e) {
+      return handleBlur(e);
+    }
   }, overlayProps))), ___EmotionJSX(DismissButton, {
     onDismiss: close
   }));
@@ -308,7 +319,7 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   var inputProps = _objectSpread(_objectSpread({}, customInputProps), {}, {
     controlProps: {
       'aria-activedescendant': activeDescendant,
-      'aria-controls': (_listBoxRef$current = listBoxRef.current) === null || _listBoxRef$current === void 0 ? void 0 : _listBoxRef$current.id,
+      'aria-controls': (_listBoxRef$current2 = listBoxRef.current) === null || _listBoxRef$current2 === void 0 ? void 0 : _listBoxRef$current2.id,
       'aria-expanded': isOpen,
       role: 'combobox',
       ref: inputRef,

package/lib/components/MultivaluesField/MultivaluesField.test.js

@@ -1053,6 +1053,41 @@ test('opening and closing listbox fires "onOpenChange" in condensed mode', funct
   expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(onOpenChange).toHaveBeenCalledWith(false);
 });
+test('in condensed mode, clicking outside of listbox closes listbox', function () {
+  var onOpenChange = jest.fn();
+  getComponent({
+    mode: 'condensed',
+    onOpenChange: onOpenChange
+  });
+  var input = screen.getByRole('combobox');
+  userEvent.tab();
+  expect(input).toHaveFocus();
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(true);
+  userEvent.click(document.body);
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(false);
+});
+test('in condensed mode, tabbing outside of listbox closes listbox', function () {
+  var onOpenChange = jest.fn();
+  getComponent({
+    mode: 'condensed',
+    onOpenChange: onOpenChange
+  });
+  var input = screen.getByRole('combobox');
+  userEvent.tab();
+  expect(input).toHaveFocus();
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(true);
+  // one tab to move focus to select all button
+  userEvent.tab();
+  // one tab to move focus to list
+  userEvent.tab();
+  // one tab to move focus beyond lsit
+  userEvent.tab();
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(false);
+});
 test('selected keys in condensed mode ', function () {
   getComponent({
     mode: 'condensed',

package/lib/utils/devUtils/constants/languageMapping.js

@@ -0,0 +1,30 @@
+export default {
+  'typescript': 'TypeScript',
+  'javascript': 'JavaScript',
+  'css': 'CSS',
+  'less': 'LESS',
+  'scss': 'SCSS',
+  'json': 'JSON',
+  'html': 'HTML',
+  'xml': 'XML',
+  'php': 'PHP',
+  'csharp': 'C#',
+  'cpp': 'C++',
+  'razor': 'Razor',
+  'markdown': 'Markdown',
+  'diff': 'Diff',
+  'java': 'Java',
+  'vb': 'VB',
+  'coffeescript': 'CoffeeScript',
+  'handlebars': 'Handlebars',
+  'bat': 'Batch',
+  'pug': 'Pug',
+  'fsharp': 'F#',
+  'lua': 'Lua',
+  'powershell': 'PowerShell',
+  'python': 'Python',
+  'ruby': 'Ruby',
+  'sass': 'SASS',
+  'r': 'R',
+  'objective-c': 'Objective-C'
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.125.0",
+  "version": "2.126.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",