@coveord/plasma-mantine 56.5.0 → 56.8.1

package/src/components/Badge/Badge.tsx

@@ -60,8 +60,9 @@ export type SemanticBadge = ForwardRefExoticComponent<SemanticBadgeProps & RefAt
 const enhanceBadge = (
     ComponentLight: <L = 'div'>(props: PolymorphicComponentProps<L, BadgeProps>) => ReactElement,
     ComponentDark: <L = 'div'>(props: PolymorphicComponentProps<L, BadgeProps>) => ReactElement,
-): SemanticBadge =>
-    forwardRef<HTMLDivElement, SemanticBadgeProps>((props, ref) => {
+    displayName: string,
+): SemanticBadge => {
+    const EnhancedBadge = forwardRef<HTMLDivElement, SemanticBadgeProps>((props, ref) => {
         const computedColorScheme = useComputedColorScheme('light', {getInitialValueInEffect: true});
         const Component = (props.on || computedColorScheme) === 'dark' ? ComponentDark : ComponentLight;
         return (
@@ -75,6 +76,9 @@ const enhanceBadge = (
             />
         );
     });
+    EnhancedBadge.displayName = displayName;
+    return EnhancedBadge;
+};
 
 const BadgePrimary = enhanceBadge(
     MantineBadge.withProps({
@@ -88,6 +92,7 @@ const BadgePrimary = enhanceBadge(
         c: 'var(--mantine-primary-color-2)',
         bg: alpha('var(--mantine-primary-color-3)', 0.32),
     }),
+    'Badge.Primary',
 );
 const BadgeSecondary = enhanceBadge(
     MantineBadge.withProps({
@@ -103,6 +108,7 @@ const BadgeSecondary = enhanceBadge(
         bd: `1px solid ${alpha('var(--mantine-color-gray-3)', 0.16)}`,
         bg: alpha('var(--mantine-color-gray-3)', 0.16),
     }),
+    'Badge.Secondary',
 );
 const BadgeSuccess = enhanceBadge(
     MantineBadge.withProps({
@@ -118,6 +124,7 @@ const BadgeSuccess = enhanceBadge(
         bd: `1px solid ${alpha('var(--mantine-color-green-3)', 0.16)}`,
         bg: alpha('var(--mantine-color-green-3)', 0.16),
     }),
+    'Badge.Success',
 );
 const BadgeCritical = enhanceBadge(
     MantineBadge.withProps({
@@ -133,6 +140,7 @@ const BadgeCritical = enhanceBadge(
         bd: `1px solid ${alpha('var(--mantine-color-red-3)', 0.16)}`,
         bg: alpha('var(--mantine-color-red-3)', 0.16),
     }),
+    'Badge.Critical',
 );
 const BadgeWarning = enhanceBadge(
     MantineBadge.withProps({
@@ -148,6 +156,7 @@ const BadgeWarning = enhanceBadge(
         bd: `1px solid ${alpha('var(--mantine-color-yellow-3)', 0.16)}`,
         bg: alpha('var(--mantine-color-yellow-3)', 0.16),
     }),
+    'Badge.Warning',
 );
 const BadgeDisabled = enhanceBadge(
     MantineBadge.withProps({
@@ -162,6 +171,7 @@ const BadgeDisabled = enhanceBadge(
         c: 'dark.3',
         bg: alpha('var(--mantine-color-gray-3)', 0.16),
     }),
+    'Badge.Disabled',
 );
 
 export type BadgeOverloadFactory = PolymorphicFactory<{

package/src/components/CodeEditor/languages/xml.ts

@@ -1,4 +1,5 @@
 import {Monaco} from '@monaco-editor/react';
+import type {editor} from 'monaco-editor';
 
 const format = (xml: string): string => {
     // https://stackoverflow.com/questions/57039218/doesnt-monaco-editor-support-xml-language-by-default
@@ -31,7 +32,7 @@ const format = (xml: string): string => {
 
 const register = (monaco: Monaco): void => {
     monaco.languages.registerDocumentFormattingEditProvider('xml', {
-        provideDocumentFormattingEdits: async (model) => [
+        provideDocumentFormattingEdits: async (model: editor.ITextModel) => [
             {
                 range: model.getFullModelRange(),
                 text: format(model.getValue()),

package/src/components/Collection/enhanceWithCollectionProps.ts

@@ -1,4 +1,4 @@
-import {UseFormInput} from '@mantine/form';
+import {UseFormInput, type FormArrayElement} from '@mantine/form';
 import {CollectionProps} from './Collection.js';
 
 export const enhanceWithCollectionProps = <
@@ -20,7 +20,7 @@ export const enhanceWithCollectionProps = <
                 payload.form.removeListItem(field, index);
                 validateInputOnChange && payload.form.validate();
             },
-            onInsertItem: (valueToInsert: unknown, index: number) => {
+            onInsertItem: (valueToInsert: FormArrayElement<FormValues, (typeof payload)['field']>, index: number) => {
                 payload.form.insertListItem(field, valueToInsert, index);
                 validateInputOnChange && payload.form.validate();
             },

package/src/components/DateRangePicker/DateRange.module.css

@@ -5,3 +5,7 @@
 .save {
     border-top: 1px solid var(--mantine-color-default-border);
 }
+
+.input {
+    white-space: nowrap;
+}

package/src/components/DateRangePicker/DateRangePicker.tsx

@@ -14,6 +14,7 @@ import {DatesRangeValue, DateStringValue} from '@mantine/dates';
 import {useUncontrolled} from '@mantine/hooks';
 import dayjs from 'dayjs';
 import {useUrlSyncedState, UseUrlSyncedStateOptions} from '../../hooks/use-url-synced-state';
+import classes from './DateRange.module.css';
 import {DateRangePickerInlineCalendar, DateRangePickerInlineCalendarProps} from './DateRangePickerInlineCalendar';
 
 const serialization = (input: Pick<UseUrlSyncedStateOptions<DatesRangeValue<string>>, 'serializer' | 'deserializer'>) =>
@@ -123,7 +124,7 @@ export const DateRangePicker = factory<DateRangePickerFactory>((props: DateRange
 
     const getStyles = useStyles<DateRangePickerFactory>({
         name: 'DateRangePicker',
-        classes: {},
+        classes,
         props,
         className,
         classNames,

package/src/components/RadioCard/RadioCard.tsx

@@ -0,0 +1,73 @@
+import {
+    Box,
+    Factory,
+    Group,
+    RadioCardProps as MantineRadioCardProps,
+    RadioCardStylesNames as MantineRadioCardStylesNames,
+    Radio,
+    RadioCardCssVariables,
+    StylesApiProps,
+    Title,
+    factory,
+    useProps,
+    useStyles,
+} from '@mantine/core';
+import {ReactNode} from 'react';
+import classes from '../../styles/RadioCard.module.css';
+
+export type RadioCardStylesNames = MantineRadioCardStylesNames | 'container' | 'indicator' | 'title' | 'description';
+export type RadioCardFactory = Factory<{
+    props: RadioCardProps;
+    ref: HTMLButtonElement;
+    stylesNames: RadioCardStylesNames;
+    vars: RadioCardCssVariables;
+}>;
+
+export type RadioCardProps = MantineRadioCardProps &
+    StylesApiProps<RadioCardFactory> & {
+        /**
+         * The label of the card. Appears next to the radio indicator.
+         */
+        label: ReactNode;
+        /**
+         * The description of the card. Appears under the title.
+         */
+        description?: ReactNode;
+    };
+
+const defaultProps: Partial<RadioCardProps> = {};
+
+export const RadioCard = factory<RadioCardFactory>((_props, ref) => {
+    const {classNames, styles, style, className, vars, disabled, label, description, ...others} = useProps(
+        'RadioCard',
+        defaultProps,
+        _props,
+    );
+    const getStyles = useStyles<RadioCardFactory>({
+        name: 'RadioCard',
+        classes,
+        vars,
+        classNames,
+        className,
+        style,
+        props: _props,
+        styles,
+    });
+
+    return (
+        <Radio.Card
+            ref={ref}
+            disabled={disabled}
+            {...getStyles('card', {className, style, classNames, styles})}
+            {...others}
+        >
+            <Group {...getStyles('container', {classNames, styles})}>
+                <Radio.Indicator size="xs" disabled={disabled} {...getStyles('indicator', {classNames, styles})} />
+                <Title order={4} {...getStyles('title', {classNames, styles})}>
+                    {label}
+                </Title>
+            </Group>
+            {description && <Box {...getStyles('description', {classNames, styles})}>{description}</Box>}
+        </Radio.Card>
+    );
+});

package/src/components/RadioCard/__tests__/RadioCard.component.spec.tsx

@@ -0,0 +1,25 @@
+import {render, screen} from '@test-utils';
+import {RadioCard} from '../RadioCard.js';
+
+describe('RadioCard', () => {
+    it('renders the title and description correctly', () => {
+        const title = 'Test Title';
+        const description = 'Test Description';
+
+        render(<RadioCard label={title} description={description} />);
+
+        expect(screen.getByText(title)).toBeInTheDocument();
+        expect(screen.getByText(description)).toBeInTheDocument();
+    });
+    it('renders the radio indicator correctly', () => {
+        render(<RadioCard label="Test Title" />);
+
+        expect(screen.getByRole('radio')).not.toBeDisabled();
+    });
+
+    it('renders disabled state correctly', () => {
+        render(<RadioCard label="Test Title" disabled />);
+
+        expect(screen.getByRole('radio')).toBeDisabled();
+    });
+});

package/src/index.ts

@@ -106,6 +106,9 @@ export * from './components/Modal/ModalFooter.js';
 // Prompt
 export * from './components/Prompt/Prompt.js';
 
+// RadioCard - override Mantine RadioCard
+export {RadioCard, type RadioCardProps} from './components/RadioCard/RadioCard.js';
+
 // Read Only - override Mantine PasswordInput and Select
 export {PasswordInput} from './components/PasswordInput/PasswordInput.js';
 export {Select} from './components/Select/Select.js';

package/src/styles/RadioCard.module.css

@@ -5,7 +5,51 @@
 }
 
 .card {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: var(--mantine-spacing-sm);
+    border-radius: var(--mantine-radius-lg);
+
+    &[data-checked] {
+        border-color: var(--mantine-primary-color-filled);
+    }
+
     &[disabled] {
         pointer-events: none;
+
+        .title {
+            color: var(--mantine-color-disabled-color);
+        }
+
+        .description {
+            color: var(--mantine-color-disabled-color);
+        }
     }
 }
+
+.container {
+    flex-wrap: nowrap;
+    gap: var(--mantine-spacing-sm);
+    align-items: baseline;
+    justify-content: flex-start;
+    width: 100%;
+    margin-bottom: var(--mantine-spacing-xs);
+}
+
+.title {
+    flex: 1;
+    color: var(--coveo-color-title);
+    word-break: break-word;
+}
+
+.description {
+    padding-left: var(--mantine-spacing-lg);
+    color: var(--mantine-color-dimmed);
+    font-weight: 400;
+    font-size: var(--mantine-font-size-xs);
+}
+
+.indicator {
+    cursor: pointer;
+}

package/src/theme/Plasmantine.tsx

@@ -1,10 +1,10 @@
+import '../styles/global.css';
+
 import {MantineProvider, MantineProviderProps, mergeThemeOverrides} from '@mantine/core';
 import {FunctionComponent} from 'react';
-
+import {mergeCSSVariablesResolvers} from './mergeCSSVariablesResolvers.js';
 import {plasmaCSSVariablesResolver} from './plasmaCSSVariablesResolver.js';
 import {plasmaTheme} from './Theme.js';
-import {mergeCSSVariablesResolvers} from './mergeCSSVariablesResolvers.js';
-import '../styles/global.css';
 
 export const Plasmantine: FunctionComponent<MantineProviderProps> = ({
     children,