@mantine/code-highlight 7.0.0-alpha.2 → 7.0.0-alpha.21

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';
 };
@@ -79,7 +79,7 @@ export interface CodeHighlightTabsProps
   /** Function that returns icon based on file name */
   getFileIcon?(fileName: string): React.ReactNode;
 
-  /** `max-height` of code in collapsed state, `'6rem'` by default */
+  /** `max-height` of code in collapsed state */
   maxCollapsedHeight?: React.CSSProperties['maxHeight'];
 
   /** Controlled expanded state */
@@ -111,7 +111,7 @@ const defaultProps: Partial<CodeHighlightTabsProps> = {
   withHeader: true,
   copyLabel: 'Copy code',
   copiedLabel: 'Copied',
-  maxCollapsedHeight: '8rem',
+  maxCollapsedHeight: rem('8rem'),
   expandCodeLabel: 'Expand code',
   collapseCodeLabel: 'Collapse code',
 };
@@ -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>
   ));

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';