@deque/cauldron-react 5.0.0-canary.4c176db1 → 5.0.0-canary.580313a7

package/lib/components/Code/index.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { SyntaxHighlighterProps } from 'react-syntax-highlighter';
-declare type Props = {
+interface Props extends SyntaxHighlighterProps {
     children: string;
     language?: 'javascript' | 'css' | 'html' | 'yaml';
     className?: string;
-    scrollable?: boolean;
-} & SyntaxHighlighterProps & React.HTMLAttributes<HTMLDivElement>;
+    tabIndex?: number;
+}
 declare const Code: React.ComponentType<React.PropsWithChildren<Props>>;
 export default Code;

package/lib/index.js

@@ -8157,35 +8157,9 @@ SyntaxHighlighter.registerLanguage('yaml', yaml_1);
 // HACK: This is a workaround for a bug in react-syntax-highlighter's types.
 var Highlighter = SyntaxHighlighter;
 var Code = function (_a) {
-    var children = _a.children, className = _a.className, _b = _a.scrollable, scrollable = _b === void 0 ? false : _b, props = tslib.__rest(_a, ["children", "className", "scrollable"]);
-    var ref = React.useRef(null);
-    var _c = tslib.__read(React.useState(false), 2), scrollableRegion = _c[0], setScrollableRegion = _c[1];
-    // react-syntax-highlighter does not provide direct access to its dom elements
-    // via refs, but we can specify the wrapping tags to bypass this limitation
-    // see: https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/335
-    var PreWithRef = function (preProps) { return (React__default.createElement("pre", tslib.__assign({}, preProps, { ref: ref }))); };
-    React.useEffect(function () {
-        var _a;
-        // Track the containing element because resize observer will not
-        // trigger once an element becomes scrollable
-        if (scrollable && ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement)) {
-            var listener = function () {
-                if (!ref.current) {
-                    return;
-                }
-                var element = ref.current;
-                setScrollableRegion(element.clientWidth < element.scrollWidth);
-            };
-            var observer_1 = new ResizeObserver(listener);
-            observer_1.observe(ref.current.parentElement);
-        }
-        return function () {
-            setScrollableRegion(false);
-        };
-    }, [scrollable]);
-    return (React__default.createElement(Highlighter, tslib.__assign({}, props, { PreTag: PreWithRef, useInlineStyles: false, className: classNames('Code', className, {
-            'Code--scrollable': scrollable
-        }), tabIndex: scrollableRegion ? 0 : undefined }), children));
+    var children = _a.children, className = _a.className, tabIndex = _a.tabIndex, props = tslib.__rest(_a, ["children", "className", "tabIndex"]);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Highlighter, tslib.__assign({}, props, { useInlineStyles: false, className: classNames('Code', className), tabIndex: tabIndex }), children)));
 };
 Code.displayName = 'Code';
 Code.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "5.0.0-canary.4c176db1",
+  "version": "5.0.0-canary.580313a7",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
   "publishConfig": {