@instructure/ui-source-code-editor 11.6.0 → 11.6.1-snapshot-129

package/lib/SourceCodeEditor/v2/styles.js

@@ -0,0 +1,234 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _highlight = require("@lezer/highlight");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props, sharedTokens) => {
+  const attachment = props.attachment,
+    height = props.height,
+    width = props.width;
+  const attachmentBorderRadius = {
+    top: {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0
+    },
+    bottom: {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0
+    }
+  };
+  const attachmentVariants = {
+    top: {
+      marginBottom: 0,
+      marginTop: '0.25rem'
+    },
+    bottom: {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+      marginBottom: '0.25rem'
+    }
+  };
+  const lineHeight = 1.4375;
+  return {
+    codeEditor: {
+      label: 'codeEditor',
+      position: 'relative',
+      boxSizing: 'border-box',
+      height: height || 'auto',
+      width
+    },
+    label: {
+      label: 'label',
+      height: '100%',
+      width: '100%'
+    },
+    codeEditorContainer: {
+      label: 'codeEditorContainer',
+      height: '100%',
+      width: '100%',
+      borderColor: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.borderColor,
+      borderStyle: 'solid',
+      borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.borderWidth,
+      borderRadius: componentTheme.borderRadius,
+      marginBottom: '1rem',
+      ...(attachment && {
+        ...attachmentVariants[attachment],
+        ...attachmentBorderRadius[attachment]
+      })
+    },
+    theme: {
+      '&': {
+        overflow: 'hidden',
+        background: componentTheme.background,
+        fontFamily: componentTheme.fontFamily,
+        fontSize: componentTheme.fontSize,
+        color: componentTheme.color,
+        border: 0,
+        height: '100%',
+        width: '100%',
+        minHeight: `${lineHeight}rem`,
+        lineHeight,
+        borderRadius: componentTheme.borderRadius,
+        ...(attachment && {
+          ...attachmentBorderRadius[attachment]
+        })
+      },
+      '&.cm-editor.cm-focused': {
+        // Provide a simple default outline to make sure a focused
+        // editor is visually distinct. Can't leave the default behavior
+        // because that will apply to the content element, which is
+        // inside the scrollable container and doesn't include the
+        // gutters. We also can't use an 'auto' outline, since those
+        // are, for some reason, drawn behind the element content, which
+        // will cause things like the active line background to cover
+        // the outline (#297).
+        outline: `${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.borderWidth} solid ${sharedTokens.focusOutline.infoColor}`
+      },
+      '.cm-content': {
+        padding: `${componentTheme.verticalPadding} 0`
+      },
+      '.cm-scroller': {
+        fontFamily: componentTheme.fontFamily,
+        lineHeight: 1.4375
+      },
+      '.cm-gutters': {
+        background: componentTheme.gutterBackground,
+        borderColor: componentTheme.borderColor
+      },
+      '.cm-line': {
+        padding: `0 ${componentTheme.horizontalPadding}`
+      },
+      '.cm-activeLine': {
+        backgroundColor: componentTheme.activeLineColor
+      },
+      '&.cm-focused .cm-cursor': {
+        borderLeftColor: componentTheme.color
+      },
+      '.cm-selectionBackground': {
+        background: 'transparent'
+      },
+      '.cm-selectionBackground, .cm-editor::selection': {
+        backgroundColor: componentTheme.focusedSelectionBackgroundColor + ' !important'
+      },
+      '.cm-placeholder': {
+        // for better contrast
+        color: componentTheme.placeholderBackgroundColor
+      }
+    },
+    highlightStyle: [
+    /**
+     * Copy of `defaultHighlightStyle` from '@codemirror/language'
+     */
+    // { tag: tags.meta, color: '#7a757a' },
+    {
+      tag: _highlight.tags.link,
+      textDecoration: 'underline'
+    }, {
+      tag: _highlight.tags.heading,
+      textDecoration: 'underline',
+      fontWeight: 'bold'
+    }, {
+      tag: _highlight.tags.emphasis,
+      fontStyle: 'italic'
+    }, {
+      tag: _highlight.tags.strong,
+      fontWeight: 'bold'
+    }, {
+      tag: _highlight.tags.strikethrough,
+      textDecoration: 'line-through'
+    }, {
+      tag: _highlight.tags.keyword,
+      color: componentTheme.tagKeywordColor
+    }, {
+      tag: [_highlight.tags.atom, _highlight.tags.bool, _highlight.tags.url, _highlight.tags.contentSeparator, _highlight.tags.labelName],
+      color: componentTheme.tagAtomColor
+    }, {
+      tag: [_highlight.tags.literal, _highlight.tags.inserted],
+      color: componentTheme.tagLiteralColor
+    }, {
+      tag: [_highlight.tags.string, _highlight.tags.deleted],
+      color: componentTheme.tagStringColor
+    },
+    // {
+    //   tag: [tags.regexp, tags.escape, tags.special(tags.string)],
+    //   color: '#e40'
+    // },
+    {
+      tag: _highlight.tags.definition(_highlight.tags.variableName),
+      color: componentTheme.tagDefinitionVariableNameColor
+    }, {
+      tag: _highlight.tags.local(_highlight.tags.variableName),
+      color: componentTheme.tagLocalVariableNameColor
+    },
+    // { tag: [tags.typeName, tags.namespace], color: '#085' },
+    {
+      tag: _highlight.tags.className,
+      color: componentTheme.tagClassNameColor
+    }, {
+      tag: [_highlight.tags.special(_highlight.tags.variableName), _highlight.tags.macroName],
+      color: componentTheme.tagSpecialVariableNameColor
+    }, {
+      tag: _highlight.tags.definition(_highlight.tags.propertyName),
+      color: componentTheme.tagDefinitionPropertyNameColor
+    }, {
+      tag: _highlight.tags.comment,
+      color: componentTheme.tagCommentColor
+    },
+    // { tag: tags.invalid, color: '#f00' },
+
+    /**
+     * Custom highlighting overrides
+     * (where original colors don't have enough contrast against #fff
+     * or active highlight background)
+     */
+    {
+      tag: _highlight.tags.meta,
+      color: componentTheme.tagMetaColor
+    }, {
+      tag: [_highlight.tags.regexp, _highlight.tags.escape, _highlight.tags.special(_highlight.tags.string)],
+      color: componentTheme.tagRegExpColor
+    }, {
+      tag: [_highlight.tags.typeName, _highlight.tags.namespace],
+      color: componentTheme.tagTypeNameColor
+    }, {
+      tag: _highlight.tags.invalid,
+      color: componentTheme.tagInvalidColor
+    }]
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/{index.js → exports/a.js}

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "SourceCodeEditor", {
   enumerable: true,
   get: function () {
-    return _SourceCodeEditor.SourceCodeEditor;
+    return _v.SourceCodeEditor;
   }
 });
-var _SourceCodeEditor = require("./SourceCodeEditor");
+var _v = require("../SourceCodeEditor/v1");

package/lib/exports/b.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SourceCodeEditor", {
+  enumerable: true,
+  get: function () {
+    return _v.SourceCodeEditor;
+  }
+});
+var _v = require("../SourceCodeEditor/v2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-source-code-editor",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -29,24 +29,24 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.34.1",
     "@lezer/highlight": "1.2.1",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-dom-utils": "11.6.0",
-    "@instructure/ui-a11y-content": "11.6.0",
-    "@instructure/ui-buttons": "11.6.0",
-    "@instructure/ui-i18n": "11.6.0",
-    "@instructure/ui-icons": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-text-input": "11.6.0",
-    "@instructure/ui-themes": "11.6.0",
-    "@instructure/ui-utils": "11.6.0"
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-a11y-content": "11.6.1-snapshot-129",
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/ui-buttons": "11.6.1-snapshot-129",
+    "@instructure/ui-dom-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-i18n": "11.6.1-snapshot-129",
+    "@instructure/ui-text-input": "11.6.1-snapshot-129",
+    "@instructure/ui-icons": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.6.0"
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19",
@@ -57,17 +57,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

package/src/SourceCodeEditor/{SearchPanel.tsx → v1/SearchPanel.tsx}

@@ -32,8 +32,8 @@ import {
   closeSearchPanel
 } from '@codemirror/search'
 import { EditorView } from '@codemirror/view'
-import { TextInput } from '@instructure/ui-text-input'
-import { IconButton } from '@instructure/ui-buttons'
+import { TextInput } from '@instructure/ui-text-input/v11_6'
+import { IconButton } from '@instructure/ui-buttons/v11_6'
 import {
   IconArrowOpenDownLine,
   IconArrowOpenUpLine,

package/src/SourceCodeEditor/{index.tsx → v1/index.tsx}

@@ -87,7 +87,7 @@ import type { RequestAnimationFrameType } from '@instructure/ui-dom-utils'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 import { textDirectionContextConsumer } from '@instructure/ui-i18n'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import customSearch from './SearchPanel'