@coveord/plasma-mantine 59.8.0 → 60.0.0

package/src/components/Collection/CollectionItem.tsx

@@ -18,10 +18,10 @@ interface CollectionItemSharedProps extends GroupProps {
     removable?: boolean;
 }
 
-const defaultProps: Partial<CollectionItemSharedProps> = {
+const defaultProps = {
     removable: true,
     gap: 'sm',
-};
+} satisfies Partial<CollectionItemSharedProps>;
 
 const StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = (props) => {
     const {
@@ -33,18 +33,12 @@ const StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSh
         // Style props
         style,
         className,
-        classNames,
-        styles,
         ...others
     } = useProps('CollectionItem', defaultProps, props);
     const ctx = useCollectionContext();
 
     return (
-        <Group
-            data-testid={`item-${id}`}
-            {...ctx.getStyles('item', {style, className, classNames, styles})}
-            {...others}
-        >
+        <Group data-testid={`item-${id}`} {...ctx.getStyles('item', {style, className})} {...others}>
             {children}
             <RemoveButton removable={removable} onRemove={onRemove} />
         </Group>
@@ -62,16 +56,10 @@ const DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItem
         // Style props
         style,
         className,
-        classNames,
-        styles,
         ...others
     } = useProps('CollectionItem', defaultProps, props);
     return (
-        <Group
-            data-testid={`item-${id}`}
-            {...ctx.getStyles('item', {style, className, classNames, styles})}
-            {...others}
-        >
+        <Group data-testid={`item-${id}`} {...ctx.getStyles('item', {style, className})} {...others}>
             {children}
         </Group>
     );
@@ -87,8 +75,6 @@ const DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionIte
 
         // Style props
         className,
-        classNames,
-        styles,
         ...others
     } = useProps('CollectionItem', defaultProps, props);
 
@@ -108,8 +94,6 @@ const DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionIte
                       }
                     : undefined,
                 className,
-                classNames,
-                styles,
             })}
             data-isdragging={isDragging}
             {...others}

package/src/components/Collection/enhanceWithCollectionProps.ts

@@ -1,11 +1,16 @@
 import {UseFormInput, type FormArrayElement} from '@mantine/form';
 import {CollectionProps} from './Collection.js';
 
+type EnhanceGetInputPayload<
+    FormValues,
+    TransformValues extends (values: FormValues) => unknown = (values: FormValues) => FormValues,
+> = Parameters<NonNullable<UseFormInput<FormValues, TransformValues>['enhanceGetInputProps']>>[0];
+
 export const enhanceWithCollectionProps = <
     FormValues,
     TransformValues extends (values: FormValues) => unknown = (values: FormValues) => FormValues,
 >(
-    payload: Parameters<UseFormInput<FormValues, TransformValues>['enhanceGetInputProps']>[0],
+    payload: EnhanceGetInputPayload<FormValues, TransformValues>,
     field: (typeof payload)['field'],
     options?: {validateInputOnChange?: boolean},
 ): Pick<CollectionProps<unknown>, 'onReorderItem' | 'onInsertItem' | 'onRemoveItem'> => {
@@ -14,15 +19,25 @@ export const enhanceWithCollectionProps = <
         return {
             onReorderItem: (reorderPayload: Record<'from' | 'to', number>) => {
                 payload.form.reorderListItem(field, reorderPayload);
-                validateInputOnChange && payload.form.validate();
+                if (validateInputOnChange) {
+                    payload.form.validate();
+                }
             },
             onRemoveItem: (index: number) => {
                 payload.form.removeListItem(field, index);
-                validateInputOnChange && payload.form.validate();
+                if (validateInputOnChange) {
+                    payload.form.validate();
+                }
             },
-            onInsertItem: (valueToInsert: FormArrayElement<FormValues, (typeof payload)['field']>, index: number) => {
-                payload.form.insertListItem(field, valueToInsert, index);
-                validateInputOnChange && payload.form.validate();
+            onInsertItem: (valueToInsert: unknown, index: number) => {
+                payload.form.insertListItem(
+                    field,
+                    valueToInsert as FormArrayElement<FormValues, (typeof payload)['field']>,
+                    index,
+                );
+                if (validateInputOnChange) {
+                    payload.form.validate();
+                }
             },
         };
     }

package/src/components/Collection/layouts/horizontal-layout/HorizontalLayoutBody.tsx

@@ -1,12 +1,13 @@
 import {Box, Stack, useProps} from '@mantine/core';
 import {ForwardedRef, useMemo} from 'react';
+import {CollectionColumnDef} from '../../CollectionColumn.types.js';
 import {useCollectionContext} from '../../CollectionContext.js';
 import {getColumnSizeStyles} from '../shared/columnUtils.js';
 import {createItemRenderers, ItemContentRenderer, LayoutClasses, mapItemsToComponents} from '../shared/itemRenderer.js';
 import {LAYOUT_BODY_DEFAULT_PROPS, LayoutBodyProps} from '../shared/layoutConstants.js';
 import classes from './HorizontalLayout.module.css';
 
-const defaultProps: Partial<LayoutBodyProps> = LAYOUT_BODY_DEFAULT_PROPS;
+const defaultProps = LAYOUT_BODY_DEFAULT_PROPS satisfies Partial<LayoutBodyProps>;
 
 /**
  * Horizontal layout specific content renderer - renders cells in a row
@@ -30,20 +31,19 @@ const renderHorizontalContent: ItemContentRenderer<unknown> = (
     </>
 );
 
-// Create renderers once - they are stable component references
-const horizontalRenderers = createItemRenderers<unknown>();
-
 export const HorizontalLayoutBody = <T,>(props: LayoutBodyProps<T> & {ref?: ForwardedRef<HTMLDivElement>}) => {
     const collectionCtx = useCollectionContext();
     const {items, onRemove, removable, draggable, disabled, readOnly, getItemId, gap, ref, ...others} = useProps(
         'HorizontalLayoutBody',
-        defaultProps as LayoutBodyProps<T>,
+        defaultProps,
         props,
     );
+    const columns = (collectionCtx.columns ?? []) as Array<CollectionColumnDef<T>>;
+    const horizontalRenderers = useMemo(() => createItemRenderers<T>(), []);
 
     const config = useMemo(
         () => ({
-            renderContent: renderHorizontalContent,
+            renderContent: renderHorizontalContent as ItemContentRenderer<T>,
             containerSelector: 'row',
             inlineControls: true,
         }),
@@ -57,7 +57,7 @@ export const HorizontalLayoutBody = <T,>(props: LayoutBodyProps<T> & {ref?: Forw
         draggable,
         disabled,
         readOnly,
-        columns: collectionCtx.columns,
+        columns,
     });
 
     return (

package/src/components/Collection/layouts/horizontal-layout/HorizontalLayoutHeader.tsx

@@ -1,4 +1,5 @@
 import {Box, useProps} from '@mantine/core';
+import {clsx} from 'clsx';
 import {ForwardedRef} from 'react';
 import {useCollectionContext} from '../../CollectionContext.js';
 import {getColumnSizeStyles} from '../shared/columnUtils.js';
@@ -6,20 +7,21 @@ import {renderColumnHeader} from '../shared/headerUtils.js';
 import {LAYOUT_HEADER_DEFAULT_PROPS, LayoutHeaderProps} from '../shared/layoutConstants.js';
 import classes from './HorizontalLayout.module.css';
 
-const defaultProps: Partial<LayoutHeaderProps> = LAYOUT_HEADER_DEFAULT_PROPS;
+const defaultProps = LAYOUT_HEADER_DEFAULT_PROPS satisfies Partial<LayoutHeaderProps>;
 
 export const HorizontalLayoutHeader = (props: LayoutHeaderProps & {ref?: ForwardedRef<HTMLDivElement>}) => {
     const collectionCtx = useCollectionContext();
-    const {draggable, removable, style, ref, ...others} = useProps(
+    const {draggable, removable, style, className, ref, ...others} = useProps(
         'HorizontalLayoutHeader',
-        defaultProps as LayoutHeaderProps,
+        defaultProps,
         props,
     );
+    const columns = collectionCtx.columns ?? [];
 
     return (
-        <Box ref={ref} className={classes.headerRow} style={style} {...others}>
+        <Box ref={ref} className={clsx(classes.headerRow, className)} style={style} {...others}>
             {draggable && <div className={classes.dragHandleHeader} />}
-            {collectionCtx.columns.map((column, index) => {
+            {columns.map((column, index) => {
                 const columnId = column.id ?? `column-${index}`;
                 return (
                     <Box key={columnId} className={classes.headerCell} style={getColumnSizeStyles(column)}>

package/src/components/Collection/layouts/shared/layoutConstants.ts

@@ -19,10 +19,10 @@ export interface LayoutHeaderProps extends BoxProps {
 /**
  * Common default props shared across all layout header components.
  */
-export const LAYOUT_HEADER_DEFAULT_PROPS: Partial<LayoutHeaderProps> = {
+export const LAYOUT_HEADER_DEFAULT_PROPS = {
     draggable: false,
     removable: true,
-};
+} satisfies Partial<LayoutHeaderProps>;
 
 /**
  * Common props shared across all layout body components.
@@ -42,10 +42,10 @@ export interface LayoutBodyProps<T = unknown> extends BoxProps {
  * Common default props shared across all layout body components.
  * This ensures consistent defaults and reduces duplication.
  */
-export const LAYOUT_BODY_DEFAULT_PROPS: Partial<LayoutBodyProps> = {
+export const LAYOUT_BODY_DEFAULT_PROPS = {
     removable: true,
     draggable: false,
     disabled: false,
     readOnly: false,
     gap: 'md' as MantineSpacing,
-} as const;
+} as const satisfies Partial<LayoutBodyProps>;

package/src/components/Collection/layouts/vertical-layout/VerticalLayoutBody.tsx

@@ -15,7 +15,7 @@ import {LAYOUT_BODY_DEFAULT_PROPS, LayoutBodyProps} from '../shared/layoutConsta
 import {RemoveButton} from '../shared/RemoveButton.js';
 import classes from './VerticalLayout.module.css';
 
-const defaultProps: Partial<LayoutBodyProps<unknown>> = LAYOUT_BODY_DEFAULT_PROPS;
+const defaultProps = LAYOUT_BODY_DEFAULT_PROPS satisfies Partial<LayoutBodyProps<unknown>>;
 
 /**
  * Renders the stack of fields (columns) for a vertical layout item
@@ -81,16 +81,15 @@ const renderVerticalDraggableContent: DraggableContentRenderer<any> = (
     </Group>
 );
 
-// Create renderers once - they are stable component references
-const verticalRenderers = createItemRenderers<any>();
-
 export const VerticalLayoutBody = <T,>(props: LayoutBodyProps<T> & {ref?: ForwardedRef<HTMLDivElement>}) => {
     const collectionCtx = useCollectionContext();
     const {items, onRemove, removable, draggable, disabled, readOnly, getItemId, gap, ref, ...others} = useProps(
         'VerticalLayoutBody',
-        defaultProps as LayoutBodyProps<T>,
+        defaultProps,
         props,
     );
+    const columns = (collectionCtx.columns ?? []) as Array<CollectionColumnDef<T>>;
+    const verticalRenderers = useMemo(() => createItemRenderers<T>(), []);
 
     const config = useMemo(
         () => ({
@@ -109,7 +108,7 @@ export const VerticalLayoutBody = <T,>(props: LayoutBodyProps<T> & {ref?: Forwar
         draggable,
         disabled,
         readOnly,
-        columns: collectionCtx.columns,
+        columns,
     });
 
     return (

package/src/components/DateRangePicker/DateRangePicker.tsx

@@ -10,7 +10,7 @@ import {
     useProps,
     useStyles,
 } from '@mantine/core';
-import {DatesRangeValue, DateStringValue} from '@mantine/dates';
+import {DatesRangeValue} from '@mantine/dates';
 import {useUncontrolled} from '@mantine/hooks';
 import dayjs from 'dayjs';
 import {useUrlSyncedState, UseUrlSyncedStateOptions} from '../../hooks/use-url-synced-state.js';
@@ -91,10 +91,10 @@ export type DateRangePickerFactory = Factory<{
     stylesNames: DateRangePickerStylesNames;
 }>;
 
-const defaultProps: Partial<DateRangePickerProps> = {
+const defaultProps = {
     placeholder: 'Select date range',
     formatter: (time) => dayjs(time).format('MMM D, YYYY'),
-};
+} satisfies Partial<DateRangePickerProps>;
 
 export const DateRangePicker = factory<DateRangePickerFactory>((props: DateRangePickerProps, ref) => {
     const {
@@ -121,7 +121,7 @@ export const DateRangePicker = factory<DateRangePickerFactory>((props: DateRange
         vars,
         unstyled,
         ...others
-    } = useProps('PlasmaDateRangePicker', defaultProps as Partial<DateRangePickerProps>, props);
+    } = useProps('PlasmaDateRangePicker', defaultProps, props);
 
     const getStyles = useStyles<DateRangePickerFactory>({
         name: 'DateRangePicker',
@@ -168,8 +168,8 @@ export const DateRangePicker = factory<DateRangePickerFactory>((props: DateRange
     };
 
     const _value = value ?? dateRange;
-    const formattedRange = `${formatter(_value[0])} - ${formatter(_value[1])}`;
-    const dateRangeInitialized = _value.every((date: DateStringValue) => typeof date === 'string' && date !== '');
+    const dateRangeInitialized = _value.every((date): date is string => typeof date === 'string' && date !== '');
+    const formattedRange = dateRangeInitialized ? `${formatter(_value[0])} - ${formatter(_value[1])}` : placeholder;
 
     return (
         <Popover opened={_opened} onChange={setOpened}>
@@ -183,7 +183,7 @@ export const DateRangePicker = factory<DateRangePickerFactory>((props: DateRange
                     {...getStyles('input', {className, style, ...stylesApiProps})}
                     {...others}
                 >
-                    {dateRangeInitialized ? formattedRange : placeholder}
+                    {formattedRange}
                 </InputBase>
             </Popover.Target>
             <Popover.Dropdown p={0}>

package/src/components/DateRangePicker/DateRangePickerInlineCalendar.tsx

@@ -86,7 +86,7 @@ export const DateRangePickerInlineCalendar = ({
     const onCalendarApply = () => {
         // In case the user only clicked the start date, but not the end date,
         // assume a single day was meant to be selected.
-        if (!form.values.dates[1]) {
+        if (!form.values.dates[1] && form.values.dates[0]) {
             form.values.dates[1] = endOfDay(form.values.dates[0]);
         }
         onApply(form.values.dates);

package/src/components/DateRangePicker/DateRangePickerPopoverCalendar.tsx

@@ -46,25 +46,25 @@ export const DateRangePickerPopoverCalendar = ({
     const [opened, setOpened] = useState(false);
     const ref = useClickOutside(() => setOpened(false));
 
-    const [_value, handleChange] = useUncontrolled<DatesRangeValue<DateStringValue> | null>({
+    const [_value, handleChange] = useUncontrolled<DatesRangeValue<DateStringValue | null>>({
         value,
         defaultValue,
         onChange,
         finalValue: [null, null],
     });
 
-    const onCalendarChange = (dates: DatesRangeValue<DateStringValue | null>) => {
-        if (dates[0] !== null) {
-            dates[0] = dayjs(dates[0]).toISOString();
-        }
-        if (dates[1] !== null) {
-            dates[1] = dayjs(dates[1]).toISOString();
-        }
-        handleChange?.(dates);
-        if (dates[1] !== null) {
+    const onCalendarChange = (dates: DatesRangeValue<Date | string | null>) => {
+        const normalized: DatesRangeValue<DateStringValue | null> = [
+            dates[0] ? dayjs(dates[0]).toISOString() : null,
+            dates[1] ? dayjs(dates[1]).toISOString() : null,
+        ];
+
+        handleChange(normalized);
+        if (normalized[1] !== null) {
             setOpened(false);
         }
     };
+    const calendarValue = _value.map((date) => (date ? new Date(date) : null)) as DatesRangeValue<Date>;
 
     return (
         <>
@@ -95,7 +95,7 @@ export const DateRangePickerPopoverCalendar = ({
                         columnsToScroll={1}
                         firstDayOfWeek={0}
                         allowSingleDateInRange
-                        value={_value}
+                        value={calendarValue}
                         onChange={onCalendarChange}
                         {...rangeCalendarProps}
                     />

package/src/components/DateRangePicker/DateRangePickerPresetSelect.tsx

@@ -10,8 +10,8 @@ export interface DateRangePickerPreset {
 
 interface DateRangePickerPresetsSelectProps {
     presets: Record<string, DateRangePickerPreset>;
-    value: DatesRangeValue<DateStringValue>;
-    onChange?(value: DatesRangeValue): void;
+    value: DatesRangeValue<DateStringValue | null>;
+    onChange?(value: DatesRangeValue<DateStringValue | null>): void;
     selectProps?: Partial<Omit<SelectProps, 'data' | 'value' | 'onChange'>>;
 }
 
@@ -45,8 +45,11 @@ export const DateRangePickerPresetSelect = ({
         }
     }, [value]);
 
-    const onChangePreset = (presetId: keyof typeof presets) => {
-        const range = presets[presetId].range as any;
+    const onChangePreset = (presetId: string | null) => {
+        if (!presetId) {
+            return;
+        }
+        const range = presets[presetId].range as DatesRangeValue<DateStringValue | null>;
         onChange?.(range);
     };
 

package/src/components/DateRangePicker/EditableDateRangePicker.tsx

@@ -1,18 +1,19 @@
-import {DateInput, DatePickerProps, DateStringValue, type DatesRangeValue} from '@mantine/dates';
+import {DateInput, DateStringValue, type DatesRangeValue} from '@mantine/dates';
 import dayjs from 'dayjs';
+import {ComponentProps} from 'react';
 
 export interface EditableDateRangePickerProps {
     value: DatesRangeValue<DateStringValue | null>;
-    onChange?(value: DatesRangeValue<DateStringValue> | null): void;
+    onChange?(value: DatesRangeValue<DateStringValue | null>): void;
     onFocus?: () => void;
     /**
      * Props for the start input
      */
-    startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;
+    startProps?: Omit<Partial<ComponentProps<typeof DateInput>>, 'value' | 'onChange' | 'onFocus'>;
     /**
      * Props for the end input
      */
-    endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;
+    endProps?: Omit<Partial<ComponentProps<typeof DateInput>>, 'value' | 'onChange' | 'onFocus'>;
 }
 
 export const EditableDateRangePicker = ({
@@ -23,10 +24,10 @@ export const EditableDateRangePicker = ({
     endProps = {},
 }: EditableDateRangePickerProps) => {
     const onChangeStart = (date: DateStringValue | null) => {
-        onChange?.([dayjs(date).startOf('day').toISOString(), value?.[1]]);
+        onChange?.([date ? dayjs(date).startOf('day').toISOString() : null, value?.[1] ?? null]);
     };
     const onChangeEnd = (date: DateStringValue | null) => {
-        onChange?.([value?.[0], dayjs(date).endOf('day').toISOString()]);
+        onChange?.([value?.[0] ?? null, date ? dayjs(date).endOf('day').toISOString() : null]);
     };
 
     return (

package/src/components/DateTimeRangePicker/EditableDateTimeRangePicker.tsx

@@ -1,5 +1,6 @@
-import {DatePickerProps, DatesRangeValue, DateStringValue, DateTimePicker} from '@mantine/dates';
+import {DatesRangeValue, DateStringValue, DateTimePicker} from '@mantine/dates';
 import dayjs from 'dayjs';
+import {ComponentProps} from 'react';
 
 export interface EditableDateTimeRangePickerProps {
     value: DatesRangeValue<DateStringValue | null>;
@@ -15,11 +16,11 @@ export interface EditableDateTimeRangePickerProps {
     /**
      * Props for the start input
      */
-    startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;
+    startProps?: Omit<Partial<ComponentProps<typeof DateTimePicker>>, 'value' | 'onChange' | 'onFocus'>;
     /**
      * Props for the end input
      */
-    endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;
+    endProps?: Omit<Partial<ComponentProps<typeof DateTimePicker>>, 'value' | 'onChange' | 'onFocus'>;
 }
 
 export const EditableDateTimeRangePicker = ({
@@ -30,11 +31,15 @@ export const EditableDateTimeRangePicker = ({
     startProps = {},
     endProps = {},
 }: EditableDateTimeRangePickerProps) => {
-    const onStartDateChange = (startDate: string) => {
+    const onStartDateChange = (startDate: string | null) => {
+        if (startDate === null) {
+            onChange?.([null, value?.[1] ?? null]);
+            return;
+        }
         if (value?.[1] && dayjs(startDate) > dayjs(value[1])) {
             onChange?.([startDate, null]);
         } else {
-            onChange?.([startDate, value?.[1]]);
+            onChange?.([startDate, value?.[1] ?? null]);
         }
     };
 
@@ -47,7 +52,7 @@ export const EditableDateTimeRangePicker = ({
                 onChange={onStartDateChange}
                 valueFormat={dateFormat}
                 w={150}
-                styles={{...startProps.styles}}
+                styles={startProps.styles}
                 timePickerProps={{
                     format: timePickerFormat,
                     popoverProps: {withinPortal: false},
@@ -56,12 +61,12 @@ export const EditableDateTimeRangePicker = ({
             <DateTimePicker
                 clearable={false}
                 label="End"
-                value={value?.[1]}
-                minDate={value?.[0]}
-                onChange={(endDate) => onChange?.([value?.[0], endDate])}
+                value={value?.[1] ?? undefined}
+                minDate={value?.[0] ?? undefined}
+                onChange={(endDate) => onChange?.([value?.[0] ?? null, endDate])}
                 valueFormat={dateFormat}
                 w={150}
-                styles={{...endProps.styles}}
+                styles={endProps.styles}
                 timePickerProps={{
                     format: timePickerFormat,
                     popoverProps: {withinPortal: false},

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

@@ -1,5 +1,5 @@
 import {render, screen} from '@test-utils';
-import {EditableDateTimeRangePicker} from '../EditableDateTimeRangePicker';
+import {EditableDateTimeRangePicker} from '../EditableDateTimeRangePicker.js';
 
 describe('EditableDateTimeRangePicker', () => {
     it('renders start and end date in correct format', () => {

package/src/components/EllipsisText/EllipsisText.tsx

@@ -30,9 +30,9 @@ type EllipsisTextFactory = Factory<{
     stylesNames: EllipsisTextStylesNames;
 }>;
 
-const defaultProps: Partial<EllipsisTextProps> = {
+const defaultProps = {
     tooltipProps: {},
-};
+} satisfies Partial<EllipsisTextProps>;
 
 export const EllipsisText = polymorphicFactory<EllipsisTextFactory>((props, ref) => {
     const {className, children, style, classNames, styles, unstyled, variant, lineClamp, tooltipProps, ...others} =

package/src/components/Facet/Facet.tsx

@@ -163,7 +163,7 @@ export type FacetFactory = Factory<{
     stylesNames: FacetStylesNames;
 }>;
 
-const defaultProps: Partial<FacetProps> = {
+const defaultProps = {
     searchPlaceholder: 'Search',
     nothingFound: 'No matching items',
     placeholder: 'No items',
@@ -172,7 +172,7 @@ const defaultProps: Partial<FacetProps> = {
     itemComponent: DefaultFacetItem,
     listComponent: FacetScrollArea,
     removable: false,
-};
+} satisfies Partial<FacetProps>;
 
 export const Facet: FunctionComponent<FacetProps> = factory<FacetFactory>((_props, ref) => {
     const props = useProps('Facet', defaultProps, _props);
@@ -196,10 +196,10 @@ export const Facet: FunctionComponent<FacetProps> = factory<FacetFactory>((_prop
         placeholder,
         title,
         height,
-        radius,
+        radius: _radius,
         __staticSelector,
-        classNames,
-        styles,
+        classNames: _classNames,
+        styles: _styles,
         limit,
         unstyled,
         ...others
@@ -228,7 +228,7 @@ export const Facet: FunctionComponent<FacetProps> = factory<FacetFactory>((_prop
     const handleValueSelect = (val: string) =>
         handleSelection(_selection.includes(val) ? _selection.filter((v) => v !== val) : [..._selection, val]);
 
-    let groupName: string = null;
+    let groupName: string | null = null;
 
     useEffect(() => {
         combobox.openDropdown();

package/src/components/Facet/FacetScrollArea.tsx

@@ -3,7 +3,7 @@ import {forwardRef} from 'react';
 
 export const FacetScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
     ({style, children, ...others}: ScrollAreaProps, ref) => (
-        <ScrollArea {...others} style={{width: '100%', ...style}} viewportRef={ref}>
+        <ScrollArea {...others} style={[{width: '100%'}, style]} viewportRef={ref}>
             {children}
         </ScrollArea>
     ),

package/src/components/Header/HeaderDocAnchor/HeaderDocAnchor.tsx

@@ -33,10 +33,10 @@ export type HeaderDocAnchorFactory = Factory<{
     compound: true;
 }>;
 
-const defaultProps: Partial<HeaderDocAnchorProps> = {
+const defaultProps = {
     position: 'right',
     children: <IconExternalLink />,
-};
+} satisfies Partial<HeaderDocAnchorProps>;
 
 export const HeaderDocAnchor = factory<HeaderDocAnchorFactory>((_props, ref) => {
     const props = useProps('PlasmaHeaderActions', defaultProps, _props);

package/src/components/Header/HeaderRight/HeaderRight.tsx

@@ -18,13 +18,13 @@ export type HeaderRightFactory = Factory<{
     compound: true;
 }>;
 
-const defaultProps: Partial<HeaderRightProps> = {
+const defaultProps = {
     gap: 'xs',
-};
+} satisfies Partial<HeaderRightProps>;
 
 export const HeaderRight = factory<HeaderRightFactory>((_props, ref) => {
     const props = useProps('HeaderRight', defaultProps, _props);
-    const {gap, className, classNames, styles, style, children, vars, ...others} = props;
+    const {gap, className, classNames, styles, style, children, vars: _vars, ...others} = props;
     const ctx = useHeaderContext();
 
     return (

package/src/components/InfoToken/InfoToken.tsx

@@ -64,7 +64,7 @@ export type InfoTokenProps = Omit<InfoTokenInternalProps, 'type'>;
 type InfoTokenCompoundComponent = (<C = 'div'>(props: PolymorphicComponentProps<C, InfoTokenProps>) => ReactElement) &
     Omit<FunctionComponent<PolymorphicComponentProps<any, InfoTokenProps>>, never>;
 
-const defaultProps: Partial<InfoTokenInternalProps> = {variant: 'outline', type: 'information', size: 'xs'};
+const defaultProps = {variant: 'outline', type: 'information', size: 'xs'} satisfies Partial<InfoTokenInternalProps>;
 
 const colorResolver = (type: InfoTokenType): string => {
     switch (type) {
@@ -134,8 +134,9 @@ const iconResolver = (type: InfoTokenType): TablerIcon => {
 };
 
 const varsResolver = createVarsResolver<InfoTokenFactory>((_theme, {type}) => {
-    const color = colorResolver(type);
-    const bgColor = bgColorResolver(type);
+    const resolvedType = type ?? defaultProps.type;
+    const color = colorResolver(resolvedType);
+    const bgColor = bgColorResolver(resolvedType);
     return {
         root: {
             '--it-color': color,

package/src/components/InlineConfirm/InlineConfirm.tsx

@@ -31,7 +31,7 @@ export type InlineConfirmFactory = Factory<{
     };
 }>;
 
-const defaultProps: Partial<InlineConfirmProps> = {};
+const defaultProps = {} satisfies Partial<InlineConfirmProps>;
 
 export const InlineConfirm = ((_props) => {
     const {children} = useProps('InlineConfirm', defaultProps, _props);

package/src/components/InlineConfirm/InlineConfirmContext.ts

@@ -1,8 +1,8 @@
 import {createSafeContext} from '@mantine/core';
 
 type InlineConfirmContextType = {
-    confirmingId: string;
-    setConfirmingId: (id: string) => void;
+    confirmingId: string | null;
+    setConfirmingId: (id: string | null) => void;
     clearConfirm: () => void;
 };