@pingux/astro 1.1.0-alpha.11 → 1.1.0-alpha.12

package/lib/cjs/index.js

@@ -30,6 +30,7 @@ var _exportNames = {
   Checkbox: true,
   CheckboxField: true,
   Chip: true,
+  CodeView: true,
   ComboBoxField: true,
   CopyText: true,
   ColorField: true,
@@ -183,6 +184,13 @@ _Object$defineProperty(exports, "Chip", {
   }
 });
 
+_Object$defineProperty(exports, "CodeView", {
+  enumerable: true,
+  get: function get() {
+    return _CodeView["default"];
+  }
+});
+
 _Object$defineProperty(exports, "ComboBoxField", {
   enumerable: true,
   get: function get() {
@@ -785,6 +793,8 @@ _forEachInstanceProperty(_context13 = _Object$keys(_Chip)).call(_context13, func
   });
 });
 
+var _CodeView = _interopRequireDefault(require("./components/CodeView"));
+
 var _ComboBoxField = _interopRequireDefault(require("./components/ComboBoxField"));
 
 var _CopyText = _interopRequireDefault(require("./components/CopyText"));

package/lib/cjs/styles/variants/codeView.js

@@ -0,0 +1,80 @@
+"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;
+
+require("a11y-syntax-highlighting/dist/prism/a11y-light.min.css");
+
+var wrapper = {
+  bg: 'accent.99',
+  border: '1px solid',
+  borderColor: 'accent.95',
+  width: 400,
+  height: 200,
+  my: 5,
+  overflow: 'auto',
+  alignItems: 'center',
+  '&.is-focused, &:focus': {
+    boxShadow: 'focus',
+    outline: 'none'
+  },
+  pre: {
+    backgroundColor: 'transparent',
+    m: 0,
+    p: 10,
+    pr: 0,
+    height: '100%',
+    width: '100%',
+    overflowX: 'hidden',
+    overflowY: 'auto',
+    fontFamily: 'standard',
+    fontSize: 'sm',
+    '& .token-line': {
+      display: 'block',
+      alignItems: 'center',
+      '& .token': {
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-all'
+      }
+    }
+  },
+  '&.has-no-copy-button': {
+    pre: {
+      p: 10
+    }
+  },
+  '&.has-line-numbers': {
+    pre: {
+      p: '0 10px 0 0',
+      overflow: 'auto',
+      '& .token-line:first-of-type *': {
+        pt: 10
+      },
+      '& .token-line': {
+        display: 'flex',
+        '& .token': {
+          whiteSpace: 'pre'
+        }
+      }
+    }
+  }
+};
+var lineNo = {
+  display: 'table-cell',
+  userSelect: 'none',
+  p: 5,
+  m: '0 10px 0 0',
+  bg: 'accent.30',
+  minWidth: 26,
+  color: 'white'
+};
+var _default = {
+  wrapper: wrapper,
+  lineNo: lineNo
+};
+exports["default"] = _default;

package/lib/cjs/styles/variants/variants.js

@@ -34,6 +34,8 @@ var _accordion = _interopRequireDefault(require("./accordion"));
 
 var _boxes = _interopRequireDefault(require("./boxes"));
 
+var _codeView = _interopRequireDefault(require("./codeView"));
+
 var _images = _interopRequireDefault(require("./images"));
 
 var _imageUpload = _interopRequireDefault(require("./imageUpload"));
@@ -77,6 +79,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _default = _objectSpread(_objectSpread({
   accordion: _accordion["default"],
   boxes: _boxes["default"],
+  codeView: _codeView["default"],
   images: _images["default"],
   imageUpload: _imageUpload["default"],
   loader: _loader["default"],

package/lib/components/CodeView/CodeView.js

@@ -0,0 +1,130 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { useFocusRing } from '@react-aria/focus';
+import { useHover } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
+import Highlight, { defaultProps } from 'prism-react-renderer';
+import { useStatusClasses } from '../../hooks';
+import { Box, CopyText } from '../..';
+/**
+ * A text block that shows syntax highlighting code sample.
+ * Built on top of the [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer).
+ *
+ * A list of all supported languages that can be passed to `language` prop is [here](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js).
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      outerClassName = props.className,
+      hasLineNumbers = props.hasLineNumbers,
+      hasNoCopyButton = props.hasNoCopyButton,
+      language = props.language,
+      others = _objectWithoutProperties(props, ["children", "className", "hasLineNumbers", "hasNoCopyButton", "language"]);
+
+  var _useFocusRing = useFocusRing(),
+      isFocusVisible = _useFocusRing.isFocusVisible,
+      focusProps = _useFocusRing.focusProps;
+
+  var _useHover = useHover(props),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
+  var _useStatusClasses = useStatusClasses(outerClassName, {
+    isFocused: isFocusVisible,
+    isHovered: isHovered,
+    hasLineNumbers: hasLineNumbers,
+    hasNoCopyButton: hasNoCopyButton
+  }),
+      classNames = _useStatusClasses.classNames; // Get the width for the line number element depending on the total amount of lines
+
+
+  var getLineNoWidth = function getLineNoWidth(tokens) {
+    return tokens.length.toString().length * 12;
+  };
+
+  var content = ___EmotionJSX(Highlight, _extends({}, defaultProps, {
+    theme: undefined,
+    code: (children === null || children === void 0 ? void 0 : _trimInstanceProperty(children).call(children)) || '',
+    language: language
+  }), function (_ref) {
+    var className = _ref.className,
+        style = _ref.style,
+        tokens = _ref.tokens,
+        getLineProps = _ref.getLineProps,
+        getTokenProps = _ref.getTokenProps;
+    return ___EmotionJSX(Box, {
+      as: "pre",
+      className: className,
+      style: style
+    }, _mapInstanceProperty(tokens).call(tokens, function (line, i) {
+      return ___EmotionJSX(Box, _extends({
+        isRow: true
+      }, getLineProps({
+        line: line,
+        key: i
+      })), hasLineNumbers && ___EmotionJSX(Box, {
+        as: "span",
+        variant: "codeView.lineNo",
+        sx: {
+          minWidth: getLineNoWidth(tokens)
+        }
+      }, i + 1), _mapInstanceProperty(line).call(line, function (token, key) {
+        return ___EmotionJSX("span", getTokenProps({
+          token: token,
+          key: key
+        }));
+      }));
+    }));
+  });
+
+  if (hasNoCopyButton) {
+    return ___EmotionJSX(Box, _extends({
+      ref: ref,
+      variant: "codeView.wrapper",
+      tabIndex: 0,
+      className: classNames
+    }, mergeProps(focusProps, hoverProps, others)), content);
+  }
+
+  return ___EmotionJSX(CopyText, {
+    mode: "nonClickableContent",
+    textToCopy: children,
+    tooltipProps: {
+      offset: 15
+    },
+    wrapperProps: _objectSpread({
+      className: classNames,
+      variant: 'codeView.wrapper'
+    }, others)
+  }, content);
+});
+CodeView.propTypes = {
+  hasLineNumbers: PropTypes.bool,
+  hasNoCopyButton: PropTypes.bool,
+  language: PropTypes.string
+};
+CodeView.defaultProps = {
+  language: 'json',
+  hasLineNumbers: false,
+  hasNoCopyButton: false
+};
+export default CodeView;

package/lib/components/CodeView/CodeView.stories.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import CodeView from './CodeView';
+import { Text } from '../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var code = "{\n  \"_links\": {\n    \"self\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\"\n    },\n    \"password\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.set\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.reset\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.check\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.recover\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"account.sendVerificationCode\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\"\n    },\n    \"linkedAccounts\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/linkedAccounts\"\n    }\n  },\n  \"id\": \"5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\",\n  \"environment\": {\n    \"id\": \"94e3268d-847d-47aa-a45e-1ef8dd8f4df0\"\n  },\n  \"account\": {\n    \"canAuthenticate\": true,\n    \"status\": \"OK\"\n  },\n  \"createdAt\": \"2021-09-03T15:01:43.555Z\",\n  \"email\": \"allegraweldon@pingidentity.com\",\n  \"enabled\": true,\n  \"identityProvider\": {\n    \"type\": \"PING_ONE\"\n  },\n  \"lifecycle\": {\n    \"status\": \"ACCOUNT_OK\"\n  },\n  \"mfaEnabled\": false,\n  \"population\": {\n    \"id\": \"c1adbc29-f188-4ea6-a015-49bddd74bc84\"\n  },\n  \"updatedAt\": \"2021-09-03T15:01:43.555Z\",\n  \"username\": \"allegraweldon@pingidentity.com\",\n  \"verifyStatus\": \"NOT_INITIATED\"\n}";
+export default {
+  title: 'CodeView',
+  component: CodeView,
+  argTypes: {
+    children: {
+      defaultValue: code,
+      table: {
+        type: {}
+      },
+      control: {
+        type: 'text'
+      }
+    }
+  },
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+        /* Turned off since rule conflicts with the way how `prism-react-renderer` works
+         * and design specs */
+        {
+          id: 'scrollable-region-focusable',
+          enabled: false,
+          selector: '.prism-code'
+        }]
+      }
+    }
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
+    sx: {
+      fontWeight: 2
+    }
+  }, "JSON"), ___EmotionJSX(CodeView, args));
+};
+export var WithLineNumbers = function WithLineNumbers() {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
+    sx: {
+      fontWeight: 2
+    }
+  }, "JSON"), ___EmotionJSX(CodeView, {
+    hasLineNumbers: true
+  }, code));
+};
+WithLineNumbers.story = {
+  parameters: {
+    docs: {
+      storyDescription: 'Please note that with adding line numbers, line wrapping does not work.'
+    }
+  }
+};
+export var WithCustomSize = function WithCustomSize() {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CodeView, {
+    language: "javascript",
+    sx: {
+      width: '100%',
+      height: 300
+    },
+    hasNoCopyButton: true
+  }, "\nexport const ChipWithIcon = () => (\n  <>\n    <Chip label=\"Chip with Icon Button\" bg=\"navy\">\n      <IconButton aria-label=\"Clear Chip with Icon Button\" variant=\"inverted\">\n        <Icon icon={Clear} ml=\"xs\" size=\"14px\" />\n      </IconButton>\n    </Chip>\n\n    <div style={{ padding: '5px' }} />\n\n    <Chip label=\"Chip with Icon Button\">\n      <IconButton aria-label=\"Clear Chip with Icon Button\" variant=\"inverted\">\n        <Icon icon={Earth} ml=\"xs\" size=\"14px\" />\n      </IconButton>\n    </Chip>\n\n    <div style={{ padding: '5px' }} />\n\n    <Chip label=\"Chip with Icon\" bg=\"green\">\n      <Icon icon={ContentCopy} ml=\"xs\" size=\"14px\" color=\"white\" />\n    </Chip>\n  </>\n);\n    "));
+};

package/lib/components/CodeView/CodeView.test.js

@@ -0,0 +1,171 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context5; _forEachInstanceProperty(_context5 = ownKeys(Object(source), true)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context6; _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import axeTest from '../../utils/testUtils/testAxe';
+import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { CodeView } from '../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-code-sample';
+
+var originalClipboard = _objectSpread({}, global.navigator.clipboard);
+
+var originalExecCommand = global.document.execCommand;
+var defaultProps = {
+  'data-testid': testId
+};
+var textValue = "\nexport const Default = args => (\n  <>\n    <Text sx={{ fontWeight: 2 }}>JSON</Text>\n    <CodeView {...args} />\n  </>\n);\n";
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(CodeView, _extends({}, defaultProps, props), textValue));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('renders component in the default state', function () {
+  getComponent();
+  var container = screen.getByTestId(testId);
+  expect(container).toBeInstanceOf(HTMLDivElement);
+  expect(container).toBeInTheDocument();
+});
+test('tooltip renders on hover', function () {
+  getComponent();
+  var container = screen.getByTestId(testId);
+  fireEvent.mouseMove(container);
+  fireEvent.mouseEnter(container);
+  expect(screen.queryByRole('tooltip')).toBeInTheDocument();
+  expect(screen.queryByRole('tooltip')).toHaveTextContent('Copy to clipboard');
+});
+test('content and copy button are focused via keyboard', function () {
+  getComponent();
+  var container = screen.getByTestId(testId);
+  expect(container).not.toHaveFocus();
+  userEvent.tab();
+  expect(container).toHaveFocus();
+  var copyBtn = screen.getByLabelText('copy');
+  expect(copyBtn).not.toHaveFocus();
+  userEvent.tab();
+  expect(copyBtn).toHaveFocus();
+  expect(copyBtn).toHaveClass('is-focused');
+});
+test('doesn\'t render copy button and tooltip with prop hasNoCopyButton', function () {
+  getComponent({
+    hasNoCopyButton: true
+  });
+  var container = screen.getByTestId(testId);
+  fireEvent.mouseMove(container);
+  fireEvent.mouseEnter(container);
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  expect(screen.queryByLabelText('copy')).not.toBeInTheDocument();
+});
+test('renders line numbers with prop hasLineNumbers', function () {
+  var linesLength = (_trimInstanceProperty(textValue).call(textValue).split('\n').length - 1).toString();
+  getComponent();
+  expect(screen.queryByText('1')).not.toBeInTheDocument();
+  expect(screen.queryByText(linesLength)).not.toBeInTheDocument();
+  getComponent({
+    hasLineNumbers: true
+  });
+  expect(screen.queryByText('1')).toBeInTheDocument();
+  expect(screen.queryByText(linesLength)).toBeInTheDocument();
+});
+beforeEach(function () {
+  var mockClipboard = {
+    writeText: jest.fn()
+  };
+  global.navigator.clipboard = mockClipboard;
+  global.document.execCommand = jest.fn();
+  global.document.execCommand.mockReturnValue(true);
+});
+afterEach(function () {
+  jest.resetAllMocks();
+  global.navigator.clipboard = originalClipboard;
+  global.document.execCommand = originalExecCommand;
+});
+test('click on copy button copies data to the clipboard', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+  var button;
+  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          getComponent();
+          button = screen.getByLabelText('copy');
+          _context2.next = 4;
+          return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+            return _regeneratorRuntime.wrap(function _callee$(_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    return _context.abrupt("return", userEvent.click(button));
+
+                  case 1:
+                  case "end":
+                    return _context.stop();
+                }
+              }
+            }, _callee);
+          })));
+
+        case 4:
+          expect(navigator.clipboard.writeText).toBeCalledTimes(1);
+          expect(navigator.clipboard.writeText).toHaveBeenCalledWith(textValue);
+
+        case 6:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _callee2);
+})));
+test('after button click, the tooltip renders with the text "Copied!"', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+  var button;
+  return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+    while (1) {
+      switch (_context4.prev = _context4.next) {
+        case 0:
+          getComponent();
+          button = screen.getByLabelText('copy');
+          _context4.next = 4;
+          return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+            return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+              while (1) {
+                switch (_context3.prev = _context3.next) {
+                  case 0:
+                    return _context3.abrupt("return", userEvent.click(button));
+
+                  case 1:
+                  case "end":
+                    return _context3.stop();
+                }
+              }
+            }, _callee3);
+          })));
+
+        case 4:
+          expect(screen.queryByRole('tooltip')).toBeInTheDocument();
+          expect(screen.queryByRole('tooltip')).toHaveTextContent('Copied!');
+
+        case 6:
+        case "end":
+          return _context4.stop();
+      }
+    }
+  }, _callee4);
+})));

package/lib/components/CodeView/index.js

@@ -0,0 +1 @@
+export { default } from './CodeView';

package/lib/components/CopyText/CopyText.js

@@ -1,8 +1,8 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useFocusRing } from '@react-aria/focus';
 import { Pressable, useHover } from '@react-aria/interactions';
@@ -14,19 +14,20 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var TooltipWrapper = function TooltipWrapper(_ref) {
   var children = _ref.children,
-      isOpen = _ref.isOpen,
-      tooltip = _ref.tooltip;
-  return ___EmotionJSX(TooltipTrigger, {
+      tooltip = _ref.tooltip,
+      others = _objectWithoutProperties(_ref, ["children", "tooltip"]);
+
+  return ___EmotionJSX(TooltipTrigger, _extends({
     key: tooltip,
     direction: "top",
     isNotFlippable: true,
-    isOpen: isOpen,
     offset: 5
-  }, children, ___EmotionJSX(Tooltip, null, tooltip));
+  }, others), children, ___EmotionJSX(Tooltip, null, tooltip));
 };
 
 TooltipWrapper.propTypes = {
   isOpen: PropTypes.bool,
+  targetRef: PropTypes.shape({}),
   tooltip: PropTypes.string
 };
 /**
@@ -38,7 +39,9 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
       textToCopy = props.textToCopy,
       tooltipText = props.tooltipText,
       mode = props.mode,
-      others = _objectWithoutProperties(props, ["children", "textToCopy", "tooltipText", "mode"]);
+      tooltipProps = props.tooltipProps,
+      wrapperProps = props.wrapperProps,
+      others = _objectWithoutProperties(props, ["children", "textToCopy", "tooltipText", "mode", "tooltipProps", "wrapperProps"]);
 
   var value = textToCopy || (mode === 'link' ? children.props.href : children.props.children);
 
@@ -75,13 +78,28 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
     return undefined;
   }, [isCopied]);
   var copyToClipboard = useCopyToClipboard(value, setIsCopied);
-  var content = mode === 'link' ? children : ___EmotionJSX(Button, _extends({
+  var content = mode === 'link' || mode === 'nonClickableContent' ? children : ___EmotionJSX(Button, _extends({
     variant: "quiet",
     onPress: copyToClipboard,
     "aria-label": "copy-content"
   }, focusProps), children);
   var tooltip = isCopied ? 'Copied!' : tooltipText;
   var isTooltipOpen = isFocusVisible || isHovered || isCopied;
+  var wrapperRef = useRef();
+
+  if (mode === 'nonClickableContent') {
+    return ___EmotionJSX(TooltipWrapper, _extends({
+      isOpen: isTooltipOpen,
+      tooltip: tooltip,
+      targetRef: wrapperRef
+    }, tooltipProps), ___EmotionJSX(Box, _extends({
+      ref: wrapperRef,
+      isRow: true,
+      tabIndex: 0
+    }, mergeProps(hoverProps, others), wrapperProps), content, ___EmotionJSX(CopyButton, _extends({
+      onPress: copyToClipboard
+    }, focusProps))));
+  }
 
   if (mode === 'link') {
     return ___EmotionJSX(Box, _extends({
@@ -109,13 +127,19 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 CopyText.propTypes = {
   /** The behavioral pattern to apply to the component. */
-  mode: PropTypes.oneOf(['text', 'link']),
+  mode: PropTypes.oneOf(['text', 'link', 'nonClickableContent']),
 
   /** The text to be copied instead of the text inside the child component. */
   textToCopy: PropTypes.string,
 
   /** The text to be displayed in the tooltip. */
-  tooltipText: PropTypes.string
+  tooltipText: PropTypes.string,
+
+  /** Props to apply to the tooltip in nonClickableContent mode. */
+  tooltipProps: PropTypes.shape({}),
+
+  /** Props to apply to the wrapper in nonClickableContent mode. */
+  wrapperProps: PropTypes.shape({})
 };
 CopyText.defaultProps = {
   mode: 'text',

package/lib/components/TooltipTrigger/TooltipTrigger.js

@@ -32,7 +32,8 @@ var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
       className = props.className,
       isNotFlippable = props.isNotFlippable,
       isDarkMode = props.isDarkMode,
-      hasNoArrow = props.hasNoArrow;
+      hasNoArrow = props.hasNoArrow,
+      targetRef = props.targetRef;
 
   var _React$Children$toArr = React.Children.toArray(children),
       _React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
@@ -42,23 +43,24 @@ var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
   var state = useTooltipTriggerState(props);
   var tooltipTriggerRef = useRef();
   var overlayRef = useRef();
+  var tooltipRef = targetRef || tooltipTriggerRef;
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
 
   useImperativeHandle(ref, function () {
-    return tooltipTriggerRef.current;
+    return tooltipRef.current;
   });
 
   var _useTooltipTrigger = useTooltipTrigger({
     isDisabled: isDisabled,
     trigger: triggerAction
-  }, state, tooltipTriggerRef),
+  }, state, tooltipRef),
       triggerProps = _useTooltipTrigger.triggerProps,
       tooltipProps = _useTooltipTrigger.tooltipProps;
 
   var _useOverlayPosition = useOverlayPosition({
     placement: _concatInstanceProperty(_context = "".concat(direction, " ")).call(_context, align),
-    targetRef: tooltipTriggerRef,
+    targetRef: tooltipRef,
     overlayRef: overlayRef,
     offset: offset,
     // Our API preference is for default false so we invert this since it should be default true
@@ -134,7 +136,10 @@ TooltipTrigger.propTypes = {
   placement: PropTypes.string,
 
   /** By default, opens for both focus and hover. Can be made to open only for focus. */
-  trigger: PropTypes.string
+  trigger: PropTypes.string,
+
+  /* The ref for the element which the overlay positions itself with respect to. */
+  targetRef: PropTypes.shape({})
 };
 TooltipTrigger.defaultProps = {
   align: 'middle',

package/lib/index.js

@@ -27,6 +27,7 @@ export { default as CheckboxField } from './components/CheckboxField';
 export * from './components/CheckboxField';
 export { default as Chip } from './components/Chip';
 export * from './components/Chip';
+export { default as CodeView } from './components/CodeView';
 export { default as ComboBoxField } from './components/ComboBoxField';
 export { default as CopyText } from './components/CopyText';
 export { default as ColorField } from './components/ColorField';