@mantine/code-highlight 7.0.0-alpha.9 → 7.0.0-beta.0

package/esm/use-highlight.js

@@ -2,19 +2,19 @@ import { useState, useEffect } from 'react';
 import hljs from 'highlight.js';
 
 function useHighlight({ code, language, highlightOnClient }) {
-    const getHighlightedCode = () => hljs.highlight(code.trim(), { language: language }).value;
-    const [highlighted, setHighlighted] = useState(!highlightOnClient);
-    const [highlightedCode, setHighlightedCode] = useState(highlightOnClient ? code : getHighlightedCode());
-    const getCodeProps = () => highlighted
-        ? { dangerouslySetInnerHTML: { __html: highlightedCode } }
-        : { children: code.trim() };
-    useEffect(() => {
-        if (highlightOnClient) {
-            setHighlightedCode(getHighlightedCode());
-            setHighlighted(true);
-        }
-    }, []);
-    return getCodeProps;
+  const getHighlightedCode = () => hljs.highlight(code.trim(), { language }).value;
+  const [highlighted, setHighlighted] = useState(!highlightOnClient);
+  const [highlightedCode, setHighlightedCode] = useState(
+    highlightOnClient ? code : getHighlightedCode()
+  );
+  const getCodeProps = () => highlighted ? { dangerouslySetInnerHTML: { __html: highlightedCode } } : { children: code.trim() };
+  useEffect(() => {
+    if (highlightOnClient) {
+      setHighlightedCode(getHighlightedCode());
+      setHighlighted(true);
+    }
+  }, []);
+  return getCodeProps;
 }
 
 export { useHighlight };

package/esm/use-highlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-highlight.js","sources":["../src/use-highlight.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport hljs from 'highlight.js';\n\ninterface UseHighlightInput {\n  code: string;\n  language: string;\n  highlightOnClient: boolean | undefined;\n}\n\nexport function useHighlight({ code, language, highlightOnClient }: UseHighlightInput) {\n  const getHighlightedCode = () => hljs.highlight(code.trim(), { language: language! }).value;\n  const [highlighted, setHighlighted] = useState(!highlightOnClient);\n  const [highlightedCode, setHighlightedCode] = useState(\n    highlightOnClient ? code : getHighlightedCode()\n  );\n\n  const getCodeProps = () =>\n    highlighted\n      ? { dangerouslySetInnerHTML: { __html: highlightedCode } }\n      : { children: code.trim() };\n\n  useEffect(() => {\n    if (highlightOnClient) {\n      setHighlightedCode(getHighlightedCode());\n      setHighlighted(true);\n    }\n  }, []);\n\n  return getCodeProps;\n}\n"],"names":[],"mappings":";;;SASgB,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAqB;IACnF,MAAM,kBAAkB,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAS,EAAE,CAAC,CAAC,KAAK,CAAC;IAC5F,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,iBAAiB,CAAC,CAAC;IACnE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CACpD,iBAAiB,GAAG,IAAI,GAAG,kBAAkB,EAAE,CAChD,CAAC;IAEF,MAAM,YAAY,GAAG,MACnB,WAAW;UACP,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE;UACxD,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;IAEhC,SAAS,CAAC;QACR,IAAI,iBAAiB,EAAE;YACrB,kBAAkB,CAAC,kBAAkB,EAAE,CAAC,CAAC;YACzC,cAAc,CAAC,IAAI,CAAC,CAAC;SACtB;KACF,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,YAAY,CAAC;AACtB;;;;"}
+{"version":3,"file":"use-highlight.js","sources":["../src/use-highlight.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport hljs from 'highlight.js';\n\ninterface UseHighlightInput {\n  code: string;\n  language: string;\n  highlightOnClient: boolean | undefined;\n}\n\nexport function useHighlight({ code, language, highlightOnClient }: UseHighlightInput) {\n  const getHighlightedCode = () => hljs.highlight(code.trim(), { language: language! }).value;\n  const [highlighted, setHighlighted] = useState(!highlightOnClient);\n  const [highlightedCode, setHighlightedCode] = useState(\n    highlightOnClient ? code : getHighlightedCode()\n  );\n\n  const getCodeProps = () =>\n    highlighted\n      ? { dangerouslySetInnerHTML: { __html: highlightedCode } }\n      : { children: code.trim() };\n\n  useEffect(() => {\n    if (highlightOnClient) {\n      setHighlightedCode(getHighlightedCode());\n      setHighlighted(true);\n    }\n  }, []);\n\n  return getCodeProps;\n}\n"],"names":[],"mappings":";;;AAEO,SAAS,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,EAAE;AACpE,EAAE,MAAM,kBAAkB,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AACnF,EAAE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,iBAAiB,CAAC,CAAC;AACrE,EAAE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ;AACxD,IAAI,iBAAiB,GAAG,IAAI,GAAG,kBAAkB,EAAE;AACnD,GAAG,CAAC;AACJ,EAAE,MAAM,YAAY,GAAG,MAAM,WAAW,GAAG,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;AAChI,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,iBAAiB,EAAE;AAC3B,MAAM,kBAAkB,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC/C,MAAM,cAAc,CAAC,IAAI,CAAC,CAAC;AAC3B,KAAK;AACL,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAE,OAAO,YAAY,CAAC;AACtB;;;;"}

package/lib/CodeHighlight.d.ts

@@ -1,6 +1,5 @@
 import { BoxProps, StylesApiProps, ElementProps, Factory } from '@mantine/core';
 export type CodeHighlightStylesNames = 'root' | 'code' | 'pre' | 'copy';
-export type CodeHighlightVariant = string;
 export interface CodeHighlightProps extends BoxProps, StylesApiProps<CodeHighlightFactory>, ElementProps<'div'> {
     /** Code to highlight */
     code: string;
@@ -19,11 +18,9 @@ export type CodeHighlightFactory = Factory<{
     props: CodeHighlightProps;
     ref: HTMLDivElement;
     stylesNames: CodeHighlightStylesNames;
-    variant: CodeHighlightVariant;
 }>;
 export declare const CodeHighlight: import("@mantine/core").MantineComponent<{
     props: CodeHighlightProps;
     ref: HTMLDivElement;
     stylesNames: CodeHighlightStylesNames;
-    variant: CodeHighlightVariant;
 }>;

package/lib/CodeHighlightTabs.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { BoxProps, StylesApiProps, ElementProps, Factory } from '@mantine/core';
-export type CodeHighlightTabsStylesNames = 'root' | 'code' | 'codeWrapper' | 'showCodeButton' | 'pre' | 'controls' | 'control' | 'header' | 'file' | 'files';
-export type CodeHighlightTabsVariant = string;
+export type CodeHighlightTabsStylesNames = 'root' | 'code' | 'codeWrapper' | 'showCodeButton' | 'pre' | 'controls' | 'control' | 'header' | 'file' | 'files' | 'fileIcon';
 export type CodeHighlightTabsCssVariables = {
     root: '--ch-max-collapsed-height';
 };

package/lib/CopyIcon.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 interface CopyIconProps extends React.ComponentPropsWithoutRef<'svg'> {
     copied: boolean;
 }
-export declare function CopyIcon({ copied, style, ...others }: CopyIconProps): JSX.Element;
+export declare function CopyIcon({ copied, style, ...others }: CopyIconProps): React.JSX.Element;
 export declare namespace CopyIcon {
     var displayName: string;
 }

package/lib/ExpandIcon.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 interface ExpandIconProps extends React.ComponentPropsWithoutRef<'svg'> {
     expanded: boolean;
 }
-export declare function ExpandIcon({ expanded, style, ...others }: ExpandIconProps): JSX.Element;
+export declare function ExpandIcon({ expanded, style, ...others }: ExpandIconProps): React.JSX.Element;
 export {};

package/lib/FileIcon.d.ts

@@ -3,6 +3,8 @@ interface FileIconProps {
     fileName: string | undefined;
     getFileIcon?: ((fileName: string) => React.ReactNode) | undefined;
     fileIcon: React.ReactNode | undefined;
+    className?: string;
+    style?: React.CSSProperties;
 }
-export declare function FileIcon({ fileIcon, fileName, getFileIcon }: FileIconProps): JSX.Element | null;
+export declare function FileIcon({ fileIcon, fileName, getFileIcon, className, style }: FileIconProps): React.JSX.Element | null;
 export {};

package/lib/InlineCodeHighlight.d.ts

@@ -1,6 +1,5 @@
 import { BoxProps, StylesApiProps, ElementProps, Factory } from '@mantine/core';
 export type InlineCodeHighlightStylesNames = 'code';
-export type InlineCodeHighlightVariant = string;
 export interface InlineCodeHighlightProps extends BoxProps, StylesApiProps<InlineCodeHighlightFactory>, ElementProps<'div'> {
     /** Code to highlight */
     code: string;

package/lib/index.d.ts

@@ -1,6 +1,6 @@
 export { CodeHighlightTabs } from './CodeHighlightTabs';
 export { CodeHighlight } from './CodeHighlight';
 export { InlineCodeHighlight } from './InlineCodeHighlight';
-export type { CodeHighlightTabsFactory, CodeHighlightTabsStylesNames, CodeHighlightTabsProps, CodeHighlightTabsCode, CodeHighlightTabsVariant, CodeHighlightTabsCssVariables, } from './CodeHighlightTabs';
-export type { CodeHighlightFactory, CodeHighlightProps, CodeHighlightStylesNames, CodeHighlightVariant, } from './CodeHighlight';
-export type { InlineCodeHighlightFactory, InlineCodeHighlightProps, InlineCodeHighlightStylesNames, InlineCodeHighlightVariant, } from './InlineCodeHighlight';
+export type { CodeHighlightTabsFactory, CodeHighlightTabsStylesNames, CodeHighlightTabsProps, CodeHighlightTabsCode, CodeHighlightTabsCssVariables, } from './CodeHighlightTabs';
+export type { CodeHighlightFactory, CodeHighlightProps, CodeHighlightStylesNames, } from './CodeHighlight';
+export type { InlineCodeHighlightFactory, InlineCodeHighlightProps, InlineCodeHighlightStylesNames, } from './InlineCodeHighlight';

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@mantine/code-highlight",
   "description": "Code highlight with Mantine theme",
-  "version": "7.0.0-alpha.9",
+  "version": "7.0.0-beta.0",
   "types": "./lib/index.d.ts",
   "exports": {
     ".": {
       "import": "./esm/index.js",
-      "require": "./cjs/index.js"
+      "require": "./cjs/index.js",
+      "types": "./lib/index.d.ts"
     },
     "./styles.css": "./esm/index.css"
   },
@@ -36,15 +37,14 @@
     "syntax-highlight"
   ],
   "peerDependencies": {
-    "@mantine/core": "7.0.0-alpha.9",
-    "@mantine/hooks": "7.0.0-alpha.9",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "@mantine/core": "7.0.0-beta.0",
+    "@mantine/hooks": "7.0.0-beta.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
     "highlight.js": "^11.7.0",
-    "clsx": "1.1.1",
-    "tslib": "^2.5.2"
+    "clsx": "2.0.0"
   },
   "devDependencies": {}
 }

package/src/CodeHighlight.module.css

@@ -11,7 +11,6 @@
   display: block;
   padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
   margin: 0;
-  font-size: 16px; /* Required for Safari to be set in px */
   --_code-line-height: 1.7;
 }
 
@@ -67,6 +66,7 @@
   color: var(--_file-color);
   opacity: var(--_file-opacity);
   background-color: var(--_file-bg);
+  white-space: nowrap;
 
   @mixin hover {
     --_file-opacity: 1;
@@ -115,6 +115,7 @@
 
   &::before {
     content: '';
+    z-index: 100;
     position: absolute;
     inset: 0;
     pointer-events: none;
@@ -140,6 +141,7 @@
   color: var(--mantine-color-anchor);
   width: 100%;
   text-align: center;
+  z-index: 101;
   padding-top: var(--mantine-spacing-xs);
   padding-bottom: var(--mantine-spacing-xs);
 
@@ -152,3 +154,14 @@
   margin-top: 0;
   position: relative;
 }
+
+.fileIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0;
+
+  & > svg {
+    display: block;
+  }
+}

package/src/CodeHighlight.story.tsx

@@ -194,6 +194,12 @@ export function Tabs() {
         code={[
           { code: tsxCode, language: 'tsx', icon: <TsIcon />, fileName: 'Component.tsx' },
           { code: cssCode, language: 'css', icon: <CSSIcon />, fileName: 'Component.module.css' },
+          {
+            code: cssCode,
+            language: 'css',
+            icon: <CSSIcon />,
+            fileName: 'Long-file-name-that-will-break-to-another-line.css',
+          },
         ]}
         defaultExpanded={false}
       >

package/src/CodeHighlight.tsx

@@ -22,7 +22,6 @@ import themeClasses from './CodeHighlight.theme.module.css';
 const classes = { ..._classes, root: cx(_classes.root, themeClasses.theme) };
 
 export type CodeHighlightStylesNames = 'root' | 'code' | 'pre' | 'copy';
-export type CodeHighlightVariant = string;
 
 export interface CodeHighlightProps
   extends BoxProps,
@@ -51,7 +50,6 @@ export type CodeHighlightFactory = Factory<{
   props: CodeHighlightProps;
   ref: HTMLDivElement;
   stylesNames: CodeHighlightStylesNames;
-  variant: CodeHighlightVariant;
 }>;
 
 const defaultProps: Partial<CodeHighlightProps> = {
@@ -111,7 +109,7 @@ export const CodeHighlight = factory<CodeHighlightFactory>((_props, ref) => {
         </CopyButton>
       )}
 
-      <ScrollArea type="auto" dir="ltr" offsetScrollbars={false}>
+      <ScrollArea type="hover" dir="ltr" offsetScrollbars={false}>
         <pre {...getStyles('pre')}>
           <code {...getStyles('code')} {...getCodeProps()} />
         </pre>

package/src/CodeHighlightTabs.tsx

@@ -37,9 +37,9 @@ export type CodeHighlightTabsStylesNames =
   | 'control'
   | 'header'
   | 'file'
-  | 'files';
+  | 'files'
+  | 'fileIcon';
 
-export type CodeHighlightTabsVariant = string;
 export type CodeHighlightTabsCssVariables = {
   root: '--ch-max-collapsed-height';
 };
@@ -189,7 +189,12 @@ export const CodeHighlightTabs = factory<CodeHighlightTabsFactory>((_props, ref)
       mod={{ active: index === value }}
       onClick={() => setValue(index)}
     >
-      <FileIcon fileIcon={node.icon} getFileIcon={getFileIcon} fileName={node.fileName} />
+      <FileIcon
+        fileIcon={node.icon}
+        getFileIcon={getFileIcon}
+        fileName={node.fileName}
+        {...getStyles('fileIcon')}
+      />
       <span>{node.fileName}</span>
     </UnstyledButton>
   ));
@@ -243,7 +248,7 @@ export const CodeHighlightTabs = factory<CodeHighlightTabsFactory>((_props, ref)
         mod={{ hidden: _expanded }}
         onClick={() => setExpanded(true)}
       >
-        Expand code
+        {expandCodeLabel}
       </UnstyledButton>
     </Box>
   );

package/src/FileIcon.tsx

@@ -4,15 +4,25 @@ interface FileIconProps {
   fileName: string | undefined;
   getFileIcon?: ((fileName: string) => React.ReactNode) | undefined;
   fileIcon: React.ReactNode | undefined;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
-export function FileIcon({ fileIcon, fileName, getFileIcon }: FileIconProps) {
+export function FileIcon({ fileIcon, fileName, getFileIcon, className, style }: FileIconProps) {
   if (fileIcon) {
-    return <>{fileIcon}</>;
+    return (
+      <span className={className} style={style}>
+        {fileIcon}
+      </span>
+    );
   }
 
   if (getFileIcon && fileName) {
-    return <>{getFileIcon(fileName)}</>;
+    return (
+      <span className={className} style={style}>
+        {getFileIcon(fileName)}
+      </span>
+    );
   }
 
   return null;

package/src/InlineCodeHighlight.tsx

@@ -17,7 +17,6 @@ import themeClasses from './CodeHighlight.theme.module.css';
 const classes = { ..._classes, code: cx(_classes.code, themeClasses.theme) };
 
 export type InlineCodeHighlightStylesNames = 'code';
-export type InlineCodeHighlightVariant = string;
 
 export interface InlineCodeHighlightProps
   extends BoxProps,

package/src/index.ts

@@ -6,18 +6,15 @@ export type {
   CodeHighlightTabsStylesNames,
   CodeHighlightTabsProps,
   CodeHighlightTabsCode,
-  CodeHighlightTabsVariant,
   CodeHighlightTabsCssVariables,
 } from './CodeHighlightTabs';
 export type {
   CodeHighlightFactory,
   CodeHighlightProps,
   CodeHighlightStylesNames,
-  CodeHighlightVariant,
 } from './CodeHighlight';
 export type {
   InlineCodeHighlightFactory,
   InlineCodeHighlightProps,
   InlineCodeHighlightStylesNames,
-  InlineCodeHighlightVariant,
 } from './InlineCodeHighlight';