@coveord/plasma-mantine 52.18.0 → 52.20.0

package/src/components/code-editor/CodeEditor.tsx

@@ -14,21 +14,25 @@ import {
     useComponentDefaultProps,
 } from '@mantine/core';
 import {useUncontrolled} from '@mantine/hooks';
+import {editor as monacoEditor} from 'monaco-editor';
 import Editor, {loader, Monaco} from '@monaco-editor/react';
-import {FunctionComponent, useEffect, useState, useRef} from 'react';
+import {FunctionComponent, useEffect, useRef, useState} from 'react';
 
 import {useParentHeight} from '../../hooks';
 import {XML} from './languages/xml';
 import {CopyToClipboard} from '../copyToClipboard';
 import {Search} from './search';
 
-const useStyles = createStyles((theme) => ({
+const useStyles = createStyles((theme, {error}: {error?: boolean}) => ({
     root: {},
     editor: {
         border: `1px solid ${theme.colors.gray[2]}`,
         borderRadius: theme.defaultRadius,
         backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,
         height: '100%',
+        outlineColor: error ? theme.colors.red[6] : null,
+        outlineStyle: error ? 'solid' : 'none',
+        outlineWidth: 'thin',
     },
 }));
 
@@ -109,7 +113,8 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         ...others
     } = useComponentDefaultProps('CodeEditor', defaultProps, props);
     const [loaded, setLoaded] = useState(false);
-    const {classes, theme} = useStyles();
+    const [containsError, setContainsError] = useState(false);
+    const {classes, theme} = useStyles({error: containsError});
     const [_value, handleChange] = useUncontrolled<string>({
         value,
         defaultValue,
@@ -118,7 +123,6 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     });
     const [parentHeight, ref] = useParentHeight();
     const editorRef = useRef(null);
-
     const loadLocalMonaco = async () => {
         const monacoInstance = await import('monaco-editor');
         loader.config({monaco: monacoInstance});
@@ -147,6 +151,12 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         }
     }, []);
 
+    const handleValidate = (markers: monacoEditor.IMarker[]) => {
+        setContainsError(
+            markers.some((marker) => marker.severity === loader.__getMonacoInstance().MarkerSeverity.Error),
+        );
+    };
+
     const _label = label ? (
         <Input.Label required={required} {...labelProps}>
             {label}
@@ -183,6 +193,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     const _editor = loaded ? (
         <Box p="md" pl="xs" className={classes.editor}>
             <Editor
+                onValidate={handleValidate}
                 defaultLanguage={language}
                 theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}
                 options={{

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './blank-slate';
+export * from './browser-preview';
 export * from './code-editor';
 export * from './collection';
 export * from './date-range-picker';

package/src/components/inline-confirm/InlineConfirmPrompt.tsx

@@ -34,7 +34,7 @@ export const InlineConfirmPrompt: FunctionComponent<InlineConfirmPromptProps> =
 
     if (confirmingId === id) {
         return (
-            <Group spacing="xs">
+            <Group spacing="xs" noWrap>
                 {label}
                 <Button onClick={onClickConfirm} color="red">
                     {confirmLabel}

package/src/components/table/Table.styles.ts

@@ -21,6 +21,8 @@ const useStyles = createStyles<string>((theme) => ({
             borderBottom: `1px solid ${theme.colors.gray[3]}`,
         },
     },
+
+    body: {},
 }));
 
 export const TableComponentsOrder = {

package/src/components/table/Table.tsx

@@ -49,6 +49,9 @@ export const Table: TableType = <T,>({
     disableRowSelection,
     onRowSelectionChange,
     additionalRootNodes,
+    classNames,
+    styles,
+    unstyled,
     options = {},
 }: TableProps<T>) => {
     const convertedChildren = Children.toArray(children) as ReactElement[];
@@ -65,7 +68,7 @@ export const Table: TableType = <T,>({
             layout: initialState?.layout ?? layouts[0].name,
         },
     });
-    const {classes} = useStyles();
+    const {classes} = useStyles(null, {name: 'PlasmaTable', classNames, styles, unstyled});
 
     const table = useReactTable({
         initialState: defaultsDeep(initialStateWithoutForm, {
@@ -184,7 +187,7 @@ export const Table: TableType = <T,>({
                                     loading={loading}
                                 />
                             </thead>
-                            <tbody>
+                            <tbody className={classes.body}>
                                 {hasRows ? (
                                     <Layout.Body
                                         table={table}

package/src/components/table/Table.types.ts

@@ -1,4 +1,5 @@
 import {Icon} from '@coveord/plasma-react-icons';
+import {DefaultProps, Selectors} from '@mantine/core';
 import {UseFormReturnType} from '@mantine/form';
 import {
     ColumnDef,
@@ -24,6 +25,7 @@ import {TableLoading} from './table-loading/TableLoading';
 import {TablePagination} from './table-pagination/TablePagination';
 import {TablePerPage} from './table-per-page/TablePerPage';
 import {TablePredicate} from './table-predicate/TablePredicate';
+import useStyles from './Table.styles';
 
 export type RowSelectionWithData<TData> = Record<string, TData>;
 export interface RowSelectionState<TData> {
@@ -143,7 +145,9 @@ export type TableContextType<TData> = {
     layouts: TableLayout[];
 };
 
-export interface TableProps<T> {
+type TableStylesNames = Selectors<typeof useStyles>;
+
+export interface TableProps<T> extends DefaultProps<TableStylesNames> {
     /**
      * Data to display in the table
      */

package/src/components/table/layouts/RowLayout.tsx

@@ -12,9 +12,12 @@ import {TableLoading} from '../table-loading/TableLoading';
 import useStyles from './RowLayout.styles';
 import {TableLayoutProps} from './RowLayout.types'; // TODO https://coveord.atlassian.net/browse/ADUI-9182
 
-const RowLayoutHeader = <T,>({table}: TableLayoutProps<T>) => {
+const RowLayoutHeader = <T,>({table, classNames, styles, unstyled}: TableLayoutProps<T>) => {
     const {multiRowSelectionEnabled, disableRowSelection} = useTable();
-    const {classes} = useStyles({disableRowSelection, multiRowSelectionEnabled});
+    const {classes} = useStyles(
+        {disableRowSelection, multiRowSelectionEnabled},
+        {name: 'RowLayout', classNames, styles, unstyled},
+    );
     const headers = table.getHeaderGroups().map((headerGroup) => (
         <tr key={headerGroup.id} className={classes.headerColumns}>
             {headerGroup.headers.map((columnHeader) => (

package/src/components/table/table-actions/TableActions.styles.ts

@@ -1,7 +1,7 @@
 import {createStyles} from '@mantine/core';
 
 export default createStyles((theme) => ({
-    root: {},
+    root: {maxWidth: '100%'},
     wrapper: {
         display: 'inline-flex',
     },

package/src/hooks/useRowSelection.ts

@@ -11,7 +11,7 @@ export const useRowSelection = <T>(
         onRowSelectionChange,
         multiRowSelectionEnabled,
         additionalRootNodes = [],
-    }: Pick<TableProps<T>, 'onRowSelectionChange' | 'multiRowSelectionEnabled' | 'additionalRootNodes'>
+    }: Pick<TableProps<T>, 'onRowSelectionChange' | 'multiRowSelectionEnabled' | 'additionalRootNodes'>,
 ) => {
     const outsideClickRef = useRef<HTMLDivElement>();
     useClickOutside(
@@ -21,7 +21,7 @@ export const useRowSelection = <T>(
             }
         },
         null,
-        [outsideClickRef.current, ...additionalRootNodes]
+        [outsideClickRef.current, ...additionalRootNodes],
     );
 
     // Need to call this outside of the onRowSelectionChange of the table to avoid rendering conflicts if the callback queues an update in a parent component.
@@ -36,7 +36,7 @@ export const useRowSelection = <T>(
             table.setState((old) => {
                 const newRowSelection = functionalUpdate(
                     rowSelectionUpdater,
-                    old['rowSelection']
+                    old['rowSelection'],
                 ) as RowSelectionWithData<T>;
 
                 if (isEqual(old['rowSelection'], newRowSelection)) {
@@ -49,7 +49,7 @@ export const useRowSelection = <T>(
                     if (newRowSelection[rowId] === true) {
                         if (!rows[rowId]) {
                             console.error(
-                                'The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.'
+                                'The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.',
                             );
                         }
                         newRowSelection[rowId] = rows[rowId]?.original ?? (true as T);

package/src/index.ts

@@ -14,6 +14,7 @@ export {type NotificationProps} from '@mantine/notifications';
 export {Pagination} from '@mantine/core';
 // explicitly overriding mantine components
 export {
+    BrowserPreview,
     Header,
     type HeaderProps,
     Table,