@coveord/plasma-mantine 57.0.0 → 57.2.0

package/src/components/DateTimeRangePicker/DateTimeRangePicker.tsx

@@ -5,7 +5,10 @@ import {DatesRangeValue, DateStringValue} from '@mantine/dates';
 import {DateRangePickerPreset, DateRangePickerPresetSelect} from '../DateRangePicker/DateRangePickerPresetSelect.js';
 import {EditableDateTimeRangePicker, EditableDateTimeRangePickerProps} from './EditableDateTimeRangePicker.js';
 
-interface DateTimeRangePickerProps extends Pick<EditableDateTimeRangePickerProps, 'startProps' | 'endProps'> {
+interface DateTimeRangePickerProps extends Pick<
+    EditableDateTimeRangePickerProps,
+    'startProps' | 'endProps' | 'dateFormat' | 'timePickerFormat'
+> {
     /** Default value for uncontrolled input */
     defaultValue?: DatesRangeValue<DateStringValue | null>;
     /** Value for controlled input */
@@ -30,8 +33,7 @@ export const DateTimeRangePicker = ({
     value,
     defaultValue,
     onChange,
-    startProps,
-    endProps,
+    ...otherProps
 }: DateTimeRangePickerProps) => {
     const [_value, handleChange] = useUncontrolled<DatesRangeValue<DateStringValue | null>>({
         value,
@@ -42,12 +44,7 @@ export const DateTimeRangePicker = ({
 
     return (
         <Group align="center">
-            <EditableDateTimeRangePicker
-                value={_value}
-                onChange={handleChange}
-                startProps={startProps}
-                endProps={endProps}
-            />
+            <EditableDateTimeRangePicker value={_value} onChange={handleChange} {...otherProps} />
             {presets && (
                 <DateRangePickerPresetSelect
                     presets={presets}

package/src/components/DateTimeRangePicker/EditableDateTimeRangePicker.tsx

@@ -3,6 +3,14 @@ import dayjs from 'dayjs';
 
 export interface EditableDateTimeRangePickerProps {
     value: DatesRangeValue<DateStringValue | null>;
+    /**
+     * The format of the date in the input
+     */
+    dateFormat?: string;
+    /**
+     * The format of the time in the time picker, either 12h or 24h
+     */
+    timePickerFormat?: '12h' | '24h';
     onChange?(value: DatesRangeValue<DateStringValue | null>): void;
     /**
      * Props for the start input
@@ -16,7 +24,9 @@ export interface EditableDateTimeRangePickerProps {
 
 export const EditableDateTimeRangePicker = ({
     value,
+    dateFormat,
     onChange,
+    timePickerFormat = '12h',
     startProps = {},
     endProps = {},
 }: EditableDateTimeRangePickerProps) => {
@@ -35,9 +45,11 @@ export const EditableDateTimeRangePicker = ({
                 label="Start"
                 value={value?.[0]}
                 onChange={onStartDateChange}
+                valueFormat={dateFormat}
                 w={150}
                 styles={{...startProps.styles}}
                 timePickerProps={{
+                    format: timePickerFormat,
                     popoverProps: {withinPortal: false},
                 }}
             />
@@ -47,9 +59,11 @@ export const EditableDateTimeRangePicker = ({
                 value={value?.[1]}
                 minDate={value?.[0]}
                 onChange={(endDate) => onChange?.([value?.[0], endDate])}
+                valueFormat={dateFormat}
                 w={150}
                 styles={{...endProps.styles}}
                 timePickerProps={{
+                    format: timePickerFormat,
                     popoverProps: {withinPortal: false},
                 }}
             />

package/src/components/DateTimeRangePicker/__tests__/EditableDateTimeRangePicker.spec.tsx

@@ -0,0 +1,15 @@
+import {render, screen} from '@test-utils';
+import {EditableDateTimeRangePicker} from '../EditableDateTimeRangePicker';
+
+describe('EditableDateTimeRangePicker', () => {
+    it('renders start and end date in correct format', () => {
+        render(
+            <EditableDateTimeRangePicker
+                value={['2026-03-01T10:00:00Z', '2026-03-02T11:30:00Z']}
+                dateFormat="DD/MM/YYYY hh:mm A"
+            />,
+        );
+        expect(screen.getByRole('button', {name: 'Start'})).toHaveTextContent('01/03/2026 10:00 AM');
+        expect(screen.getByRole('button', {name: 'End'})).toHaveTextContent('02/03/2026 11:30 AM');
+    });
+});

package/src/hooks/useClickWithLoading.ts

@@ -1,6 +1,18 @@
 import {MouseEvent, MouseEventHandler, useState} from 'react';
 
-export const useClickWithLoading = (handler?: MouseEventHandler<HTMLButtonElement>) => {
+/**
+ * A click handler that supports:
+ * - Standard MouseEventHandler (receives event, returns void)
+ * - Async handlers (receives event, returns Promise)
+ * - Parameterless handlers (no event parameter)
+ */
+export type ClickHandler<T = HTMLButtonElement> =
+    | MouseEventHandler<T>
+    | ((event: MouseEvent<T>) => Promise<void>)
+    | (() => void)
+    | (() => Promise<void>);
+
+export const useClickWithLoading = (handler?: ClickHandler<HTMLButtonElement>) => {
     const [isLoading, setIsLoading] = useState(false);
 
     const handleClick = async (event: MouseEvent<HTMLButtonElement>) => {

package/src/index.ts

@@ -75,6 +75,7 @@ export * from './components/Burger/Burger.js';
 // Button - override Mantine Button
 export {Button, type ButtonProps} from './components/Button/Button.js';
 export {type ButtonWithDisabledTooltipProps} from './components/Button/ButtonWithDisabledTooltip.js';
+export {type ClickHandler} from './hooks/useClickWithLoading.js';
 
 // Card
 export * from './components/Card/Card.js';
@@ -111,16 +112,16 @@ export * from './components/Collapse/Collapse.js';
 
 // Collection
 export * from './components/Collection/Collection.js';
-export {enhanceWithCollectionProps} from './components/Collection/enhanceWithCollectionProps.js';
 export type {
-    CollectionColumnDef,
     CollectionCellContext,
+    CollectionColumnDef,
     CollectionHeaderContext,
 } from './components/Collection/CollectionColumn.types.js';
+export {enhanceWithCollectionProps} from './components/Collection/enhanceWithCollectionProps.js';
 export type {
     CollectionLayout,
-    CollectionLayoutHeaderProps,
     CollectionLayoutBodyProps,
+    CollectionLayoutHeaderProps,
 } from './components/Collection/layouts/CollectionLayout.types.js';
 
 // Color Input

package/src/styles/AppShell.module.css

@@ -0,0 +1,4 @@
+.main {
+    height: calc(100vh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px));
+    background-color: var(--coveo-app-background);
+}

package/src/styles/Input.module.css

@@ -1,6 +1,4 @@
 .wrapper {
-    --input-section-color: var(--mantine-color-placeholder);
-
     @mixin light {
         --input-disabled-color: var(--mantine-color-disabled-color);
 
@@ -39,6 +37,6 @@
 
 .section {
     > svg {
-        color: var(--mantine-color-gray-3);
+        color: var(--mantine-color-dimmed);
     }
 }

package/src/styles/NumberInput.module.css

@@ -1,5 +1,7 @@
 .control {
     @mixin light {
+        color: var(--mantine-color-dimmed);
+
         @mixin hover {
             background-color: var(--mantine-color-default-hover);
         }

package/src/styles/Tooltip.module.css

@@ -1,4 +1,4 @@
 .tooltip {
     word-break: break-word;
-    padding: 12px;
+    padding: var(--mantine-spacing-xs);
 }

package/src/theme/Theme.tsx

@@ -70,6 +70,7 @@ import {Accordion} from '../components/Accordion/Accordion.js';
 import {CheckboxIcon} from '../components/CheckboxIcon/CheckboxIcon.js';
 import {CircleLoader} from '../components/CircleLoader/CircleLoader.js';
 import {InfoToken} from '../components/InfoToken/InfoToken.js';
+import AppShellClasses from '../styles/AppShell.module.css';
 import AccordionClasses from '../styles/Accordion.module.css';
 import ActionIconClasses from '../styles/ActionIcon.module.css';
 import AlertClasses from '../styles/Alert.module.css';
@@ -188,6 +189,13 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
             classNames: ActionIconClasses,
         }),
         AppShell: AppShell.extend({
+            classNames: AppShellClasses,
+            defaultProps: {
+                header: {height: 60},
+                navbar: {width: 240, breakpoint: 0},
+                layout: 'alt',
+                withBorder: false,
+            },
             vars: (theme) =>
                 ({
                     root: {'--app-shell-border-color': theme.colors.gray[2]},
@@ -539,7 +547,6 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
                 multiline: true,
                 withArrow: true,
                 zIndex: 10000,
-                color: PlasmaColors.violet[9],
             },
             classNames: TooltipClasses,
         }),

package/src/components/AppShell/AppShell.ts

@@ -1,11 +0,0 @@
-import {AppShell} from '@mantine/core';
-
-AppShell.displayName = 'AppShell';
-AppShell.Header.displayName = 'AppShell.Header';
-AppShell.Navbar.displayName = 'AppShell.Navbar';
-AppShell.Main.displayName = 'AppShell.Main';
-AppShell.Aside.displayName = 'AppShell.Aside';
-AppShell.Footer.displayName = 'AppShell.Footer';
-AppShell.Section.displayName = 'AppShell.Section';
-
-export {AppShell, type AppShellFactory, type AppShellProps} from '@mantine/core';