chore: upgrade client dependencies

apps/client/src/App.tsx

@@ -1,5 +1,5 @@
 import { BrowserRouter } from 'react-router';
-import { Tooltip } from '@base-ui-components/react/tooltip';
+import { Tooltip } from '@base-ui/react/tooltip';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 

apps/client/src/common/components/checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
 import { IoCheckmark } from 'react-icons/io5';
-import { Checkbox as BaseCheckbox } from '@base-ui-components/react/checkbox';
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 
 import style from './Checkbox.module.scss';
 

apps/client/src/common/components/client-modal/RedirectClientModal.tsx

@@ -5,10 +5,10 @@ import { navigatorConstants } from '../../../viewerConfig';
 import { setClientRemote } from '../../hooks/useSocket';
 import useUrlPresets from '../../hooks-query/useUrlPresets';
 import Button from '../buttons/Button';
+import Dialog from '../dialog/Dialog';
 import Info from '../info/Info';
 import Input from '../input/input/Input';
 import AppLink from '../link/app-link/AppLink';
-import Modal from '../modal/Modal';
 import Select from '../select/Select';
 
 import style from './RedirectClientModal.module.scss';
@@ -57,7 +57,7 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
   ];
 
   return (
-    <Modal
+    <Dialog
       isOpen={isOpen}
       onClose={onClose}
       showCloseButton
@@ -98,7 +98,10 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
                   fluid
                   options={viewOptions}
                   defaultValue={viewOptions[0].value}
-                  onValueChange={(value) => setSelected(value)}
+                  onValueChange={(value) => {
+                    if (value === null) return;
+                    setSelected(value);
+                  }}
                   disabled={enabledPresets.length === 0}
                 />
               </label>

apps/client/src/common/components/dialog/Dialog.module.scss

@@ -6,7 +6,7 @@
   transform: translateX(-50%);
 
   padding-inline: 1rem;
-  min-width: min(420px, 90vw);
+  min-width: min(600px, 90vw);
 
   background-color: $gray-1250;
   color: $ui-white;

apps/client/src/common/components/dialog/Dialog.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { IoClose } from 'react-icons/io5';
-import { Dialog as BaseDialog } from '@base-ui-components/react/dialog';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 
 import IconButton from '../buttons/IconButton';
 
@@ -12,7 +12,7 @@ interface DialogProps {
   showCloseButton?: boolean;
   showBackdrop?: boolean;
   bodyElements: ReactNode;
-  footerElements: ReactNode;
+  footerElements?: ReactNode;
   onClose: () => void;
 }
 

apps/client/src/common/components/dropdown-menu/DropdownMenu.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { IconType } from 'react-icons';
-import { Menu as BaseMenu } from '@base-ui-components/react/menu';
+import { Menu as BaseMenu } from '@base-ui/react/menu';
 
 import style from './DropdownMenu.module.scss';
 
@@ -31,7 +31,13 @@ export function DropdownMenu({ items, children, ...triggerProps }: PropsWithChil
                 return <BaseMenu.Separator key={index} className={style.separator} />;
               }
               return (
-                <BaseMenu.Item key={index} className={style.item} onClick={item.onClick} disabled={item.disabled} data-type={item.type}>
+                <BaseMenu.Item
+                  key={index}
+                  className={style.item}
+                  onClick={item.onClick}
+                  disabled={item.disabled}
+                  data-type={item.type}
+                >
                   {item.icon && <item.icon />}
                   {item.label}
                 </BaseMenu.Item>

apps/client/src/common/components/input/delay-input/BlockRadio.tsx

@@ -1,5 +1,5 @@
-import { Radio } from '@base-ui-components/react/radio';
-import { RadioGroup as BaseRadioGroup } from '@base-ui-components/react/radio-group';
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
 
 import style from './BlockRadio.module.scss';
 

apps/client/src/common/components/input/popover-picker/PopoverPicker.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { HexAlphaColorPicker, HexColorInput } from 'react-colorful';
-import { Popover } from '@base-ui-components/react/popover';
+import { Popover } from '@base-ui/react/popover';
 
 import PopoverContents from '../../popover/Popover';
 

apps/client/src/common/components/modal/Modal.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { IoClose } from 'react-icons/io5';
-import { Dialog as BaseDialog } from '@base-ui-components/react/dialog';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 
 import IconButton from '../buttons/IconButton';
 
@@ -31,7 +31,7 @@ export default function Modal({
       onOpenChange={(isOpen) => {
         if (!isOpen) onClose();
       }}
-      dismissible={false}
+      disablePointerDismissal
     >
       <BaseDialog.Portal>
         {showBackdrop && <BaseDialog.Backdrop className={style.backdrop} />}

apps/client/src/common/components/navigation-menu/NavigationMenu.tsx

@@ -2,7 +2,7 @@ import { memo } from 'react';
 import { IoClose, IoContract, IoExpand, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
 import { LuCoffee } from 'react-icons/lu';
 import { useLocation } from 'react-router';
-import { Dialog } from '@base-ui-components/react/dialog';
+import { Dialog } from '@base-ui/react/dialog';
 import { useDisclosure, useFullscreen } from '@mantine/hooks';
 
 import { isLocalhost, supportsFullscreen } from '../../../externals';

apps/client/src/common/components/popover/Popover.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { Popover } from '@base-ui-components/react/popover';
+import { Popover } from '@base-ui/react/popover';
 
 import style from './Popover.module.scss';
 

apps/client/src/common/components/radio-group/RadioGroup.tsx

@@ -1,5 +1,5 @@
-import { Radio } from '@base-ui-components/react/radio';
-import { RadioGroup as BaseRadioGroup } from '@base-ui-components/react/radio-group';
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
 
 import { cx } from '../../utils/styleUtils';
 

apps/client/src/common/components/select/Select.tsx

@@ -1,6 +1,6 @@
 import { IoCheckmark } from 'react-icons/io5';
 import { LuChevronsUpDown } from 'react-icons/lu';
-import { Select as BaseSelect } from '@base-ui-components/react/select';
+import { Select as BaseSelect } from '@base-ui/react/select';
 
 import { cx } from '../../utils/styleUtils';
 

apps/client/src/common/components/switch/Switch.tsx

@@ -1,4 +1,4 @@
-import { Switch as BaseSwitch } from '@base-ui-components/react/switch';
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
 
 import { cx } from '../../utils/styleUtils';
 

apps/client/src/common/components/tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { Tooltip as BaseTooltip } from '@base-ui-components/react/tooltip';
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
 
 import style from './Tooltip.module.scss';
 

apps/client/src/common/components/view-params-editor/ParamInput.tsx

@@ -160,7 +160,16 @@ function ControlledSelect({ id, initialValue, options }: ControlledSelectProps)
   }, [initialValue]);
 
   return (
-    <Select size='large' name={id} options={options} value={selected} onValueChange={(value) => setSelected(value)} />
+    <Select
+      size='large'
+      name={id}
+      options={options}
+      value={selected}
+      onValueChange={(value) => {
+        if (value === null) return;
+        setSelected(value);
+      }}
+    />
   );
 }
 

apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx

@@ -1,7 +1,7 @@
 import { FormEvent, memo } from 'react';
 import { IoClose } from 'react-icons/io5';
 import { useSearchParams } from 'react-router';
-import { Dialog } from '@base-ui-components/react/dialog';
+import { Dialog } from '@base-ui/react/dialog';
 import { OntimeView } from 'ontime-types';
 
 import { useIsSmallScreen } from '../../hooks/useIsSmallScreen';

apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx

@@ -232,7 +232,10 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
                   Runtime data source
                   <Select
                     value={watch(`filters.${index}.field`)}
-                    onValueChange={(value) => setValue(`filters.${index}.field`, value, { shouldDirty: true })}
+                    onValueChange={(value: string | null) => {
+                      if (value === null) return;
+                      setValue(`filters.${index}.field`, value, { shouldDirty: true });
+                    }}
                     options={fieldList.map(({ value, label }) => ({ value, label }))}
                     aria-label='Event field'
                   />
@@ -242,11 +245,14 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
                   Matching condition
                   <Select
                     value={watch(`filters.${index}.operator`)}
-                    onValueChange={(value) =>
-                      setValue(`filters.${index}.operator`, value as 'equals' | 'not_equals' | 'contains', {
-                        shouldDirty: true,
-                      })
-                    }
+                    onValueChange={(value: string | null) => {
+                      if (value === null) return;
+                      setValue(
+                        `filters.${index}.operator`,
+                        value as 'equals' | 'not_equals' | 'greater_than' | 'less_than' | 'contains' | 'not_contains',
+                        { shouldDirty: true },
+                      );
+                    }}
                     options={[
                       { value: 'equals', label: 'equals' },
                       { value: 'not_equals', label: 'not equals' },

apps/client/src/features/app-settings/panel/automations-panel/OntimeActionForm.tsx

@@ -44,8 +44,9 @@ export default function OntimeActionForm({
       <label>
         Action
         <Select
-          onValueChange={(value) => {
-            handleSetAction(value as OntimeActionKey);
+          onValueChange={(value: OntimeActionKey | null) => {
+            if (value === null) return;
+            handleSetAction(value);
           }}
           value={watch(`outputs.${index}.action`)}
           options={[
@@ -96,7 +97,8 @@ export default function OntimeActionForm({
           <label>
             Visibility
             <Select
-              onValueChange={(value) => {
+              onValueChange={(value: boolean | 'untouched' | null) => {
+                if (value === null) return;
                 // we need to translate the undefined value to 'untouched'
                 const translatedValue = value === 'untouched' ? undefined : (value as boolean | undefined);
                 setValue(`outputs.${index}.visible`, translatedValue, { shouldDirty: true });
@@ -117,7 +119,8 @@ export default function OntimeActionForm({
         <label>
           Timer secondary source
           <Select
-            onValueChange={(value) => {
+            onValueChange={(value: SecondarySource | null) => {
+              if (value === null) return;
               setValue(`outputs.${index}.secondarySource`, value as SecondarySource, { shouldDirty: true });
             }}
             value={watch(`outputs.${index}.secondarySource`)}

apps/client/src/features/app-settings/panel/automations-panel/TriggerForm.tsx

@@ -106,7 +106,10 @@ export default function TriggerForm({
         Lifecycle trigger
         <Select
           value={watch('trigger')}
-          onValueChange={(value) => setValue('trigger', value as TimerLifeCycle, { shouldDirty: true })}
+          onValueChange={(value) => {
+            if (value === null) return;
+            setValue('trigger', value as TimerLifeCycle, { shouldDirty: true });
+          }}
           options={cycles.map((cycle) => ({ value: cycle.value, label: cycle.label }))}
           aria-label='Lifecycle trigger'
         />
@@ -116,7 +119,10 @@ export default function TriggerForm({
         Automation title
         <Select
           value={watch('automationId')}
-          onValueChange={(value) => setValue('automationId', value, { shouldDirty: true })}
+          onValueChange={(value: string | null) => {
+            if (value === null) return;
+            setValue('automationId', value, { shouldDirty: true });
+          }}
           options={automationSelect}
           aria-label='Automation title'
         />

apps/client/src/features/app-settings/panel/feature-panel/composite/URLPresetForm.tsx

@@ -142,7 +142,10 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
           options={targetOptions}
           {...register('target', { required: 'Target is required' })}
           value={watch('target')}
-          onValueChange={(value) => setValue('target', value, { shouldDirty: true })}
+          onValueChange={(value: OntimeViewPresettable | null) => {
+            if (value === null) return;
+            setValue('target', value, { shouldDirty: true });
+          }}
         />
       </div>
       <div>

apps/client/src/features/app-settings/panel/manage-panel/RundownDefaultSettings.tsx

@@ -51,7 +51,10 @@ export default function RundownDefaultSettings() {
               />
               <Select
                 value={defaultTimeStrategy}
-                onValueChange={(value) => setTimeStrategy(value as TimeStrategy)}
+                onValueChange={(value: TimeStrategy | null) => {
+                  if (value === null) return;
+                  setTimeStrategy(value);
+                }}
                 options={[
                   { value: TimeStrategy.LockDuration, label: 'Duration' },
                   { value: TimeStrategy.LockEnd, label: 'End Time' },
@@ -73,7 +76,10 @@ export default function RundownDefaultSettings() {
               <Panel.Field title='Timer type' description='Default type of timer for new events' />
               <Select
                 value={defaultTimerType}
-                onValueChange={(value) => setDefaultTimerType(value as TimerType)}
+                onValueChange={(value: TimerType | null) => {
+                  if (value === null) return;
+                  setDefaultTimerType(value);
+                }}
                 options={[
                   { value: TimerType.CountDown, label: 'Count down' },
                   { value: TimerType.CountUp, label: 'Count up' },
@@ -86,7 +92,10 @@ export default function RundownDefaultSettings() {
               <Panel.Field title='End Action' description='Default end action for new events' />
               <Select
                 value={defaultEndAction}
-                onValueChange={(value) => setDefaultEndAction(value as EndAction)}
+                onValueChange={(value: EndAction | null) => {
+                  if (value === null) return;
+                  setDefaultEndAction(value);
+                }}
                 options={[
                   { value: EndAction.None, label: 'None' },
                   { value: EndAction.LoadNext, label: 'Load next' },

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/import-map/ImportMapForm.tsx

@@ -162,9 +162,10 @@ export default function ImportMapForm({
                     <Select
                       id={importName as string}
                       value={watch(label as keyof NamedImportMap) as string}
-                      onValueChange={(value: string) =>
-                        setValue(label as keyof NamedImportMap, value, { shouldDirty: true })
-                      }
+                      onValueChange={(value: string | null) => {
+                        if (value === null) return;
+                        setValue(label as keyof NamedImportMap, value, { shouldDirty: true });
+                      }}
                       options={worksheetNames?.map((name) => ({ value: name, label: name })) || []}
                     />
                   </td>

apps/client/src/features/app-settings/panel/settings-panel/GeneralSettings.tsx

@@ -153,7 +153,10 @@ export default function GeneralSettings() {
                 />
                 <Select
                   value={watch('timeFormat')}
-                  onValueChange={(value) => setValue('timeFormat', value as '12' | '24', { shouldDirty: true })}
+                  onValueChange={(value: '12' | '24' | null) => {
+                    if (value === null) return;
+                    setValue('timeFormat', value, { shouldDirty: true });
+                  }}
                   defaultValue='24'
                   options={[
                     { value: '12', label: '12 hours 11:00:10 PM' },
@@ -169,7 +172,10 @@ export default function GeneralSettings() {
                 />
                 <Select
                   value={watch('language')}
-                  onValueChange={(value) => setValue('language', value, { shouldDirty: true })}
+                  onValueChange={(value: string | null) => {
+                    if (value === null) return;
+                    setValue('language', value, { shouldDirty: true });
+                  }}
                   disabled={disableInputs}
                   defaultValue='en'
                   options={[

apps/client/src/features/app-settings/quick-start/QuickStart.tsx

@@ -75,7 +75,10 @@ export default function QuickStart({ isOpen, onClose }: QuickStartProps) {
               />
               <Select
                 value={watch('settings.timeFormat')}
-                onValueChange={(value: '12' | '24') => setValue('settings.timeFormat', value, { shouldDirty: true })}
+                onValueChange={(value: '12' | '24' | null) => {
+                  if (value === null) return;
+                  setValue('settings.timeFormat', value, { shouldDirty: true });
+                }}
                 defaultValue='24'
                 options={[
                   { value: '12', label: '12 hours 11:00:10 PM' },
@@ -91,7 +94,10 @@ export default function QuickStart({ isOpen, onClose }: QuickStartProps) {
               />
               <Select
                 value={watch('settings.language')}
-                onValueChange={(value: string) => setValue('settings.language', value, { shouldDirty: true })}
+                onValueChange={(value: string | null) => {
+                  if (value === null) return;
+                  setValue('settings.language', value, { shouldDirty: true });
+                }}
                 defaultValue='en'
                 options={[
                   { value: 'en', label: 'English' },

apps/client/src/features/control/message/TimerViewControl.tsx

@@ -71,12 +71,13 @@ function SecondarySourceControl() {
           { value: 'aux3', label: 'Aux 3' },
           { value: 'secondary', label: 'Secondary message' },
         ]}
-        onValueChange={(value) => {
+        onValueChange={(value: SecondarySource | null) => {
+          if (value === null) return;
           // we can only update the remote if it is enabled
           if (secondarySource !== null) {
-            setMessage.timerSecondarySource(value as SecondarySource);
+            setMessage.timerSecondarySource(value);
           }
-          setValue(value as SecondarySource);
+          setValue(value);
         }}
       />
       <Button

apps/client/src/features/operator/edit-modal/EditModal.tsx

@@ -1,6 +1,6 @@
 import { Fragment, useRef, useState } from 'react';
 import { IoClose } from 'react-icons/io5';
-import { Dialog } from '@base-ui-components/react/dialog';
+import { Dialog } from '@base-ui/react/dialog';
 import { OntimeEvent } from 'ontime-types';
 
 import Button from '../../../common/components/buttons/Button';

apps/client/src/features/rundown/entry-editor/composite/EventEditorTimes.tsx

@@ -102,7 +102,10 @@ function EventEditorTimes({
             <Editor.Label htmlFor='endAction'>End Action</Editor.Label>
             <Select
               value={endAction}
-              onValueChange={(value) => handleSubmit('endAction', value)}
+              onValueChange={(value: EndAction | null) => {
+                if (value === null) return;
+                handleSubmit('endAction', value);
+              }}
               options={[
                 { value: EndAction.None, label: 'None' },
                 { value: EndAction.LoadNext, label: 'Load next event' },
@@ -139,7 +142,10 @@ function EventEditorTimes({
             <Editor.Label htmlFor='timerType'>Timer Type</Editor.Label>
             <Select
               value={timerType}
-              onValueChange={(value) => handleSubmit('timerType', value)}
+              onValueChange={(value: TimerType | null) => {
+                if (value === null) return;
+                handleSubmit('timerType', value);
+              }}
               options={[
                 { value: TimerType.CountDown, label: 'Count down' },
                 { value: TimerType.CountUp, label: 'Count up' },

apps/client/src/features/rundown/entry-editor/quick-add-buttons/QuickAddButtons.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { IoAdd } from 'react-icons/io5';
-import { Toolbar } from '@base-ui-components/react/toolbar';
+import { Toolbar } from '@base-ui/react/toolbar';
 import { MaybeString, SupportedEntry } from 'ontime-types';
 
 import Button from '../../../../common/components/buttons/Button';

apps/client/src/features/rundown/rundown-header/RundownHeader.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react';
-import { Toggle } from '@base-ui-components/react/toggle';
-import { ToggleGroup } from '@base-ui-components/react/toggle-group';
-import { Toolbar } from '@base-ui-components/react/toolbar';
+import { Toggle } from '@base-ui/react/toggle';
+import { ToggleGroup } from '@base-ui/react/toggle-group';
+import { Toolbar } from '@base-ui/react/toolbar';
 import { useSessionStorage } from '@mantine/hooks';
 import { OffsetMode } from 'ontime-types';
 

apps/client/src/features/rundown/rundown-header/RundownHeaderMobile.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react';
-import { Toggle } from '@base-ui-components/react/toggle';
-import { ToggleGroup } from '@base-ui-components/react/toggle-group';
-import { Toolbar } from '@base-ui-components/react/toolbar';
+import { Toggle } from '@base-ui/react/toggle';
+import { ToggleGroup } from '@base-ui/react/toggle-group';
+import { Toolbar } from '@base-ui/react/toolbar';
 import { useSessionStorage } from '@mantine/hooks';
 import { OffsetMode } from 'ontime-types';
 

apps/client/src/features/rundown/rundown-header/RundownMenu.tsx

@@ -1,6 +1,6 @@
 import { memo, useCallback } from 'react';
 import { IoTrash } from 'react-icons/io5';
-import { Toolbar } from '@base-ui-components/react/toolbar';
+import { Toolbar } from '@base-ui/react/toolbar';
 import { useDisclosure, useSessionStorage } from '@mantine/hooks';
 
 import Button from '../../../common/components/buttons/Button';

apps/client/src/features/sharing/GenerateLinkForm.tsx

@@ -179,7 +179,10 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
                 <Select
                   options={hostOptions}
                   value={watch('baseUrl')}
-                  onValueChange={(value) => setValue('baseUrl', value)}
+                  onValueChange={(value: string | null) => {
+                    if (value === null) return;
+                    setValue('baseUrl', value);
+                  }}
                 />
               </Panel.ListItem>
             )}
@@ -191,7 +194,10 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
                 <Select
                   options={pathOptions}
                   value={watch('path')}
-                  onValueChange={(value) => setValue('path', value, { shouldDirty: true })}
+                  onValueChange={(value: OntimeView | string | null) => {
+                    if (value === null) return;
+                    setValue('path', value, { shouldDirty: true });
+                  }}
                 />
               </Panel.ListItem>
             )}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-settings/CuesheetShareModal.tsx

@@ -1,4 +1,4 @@
-import { Toolbar } from '@base-ui-components/react/toolbar';
+import { Toolbar } from '@base-ui/react/toolbar';
 import { useDisclosure } from '@mantine/hooks';
 import { OntimeView } from 'ontime-types';
 

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-settings/CuesheetTableSettings.tsx

@@ -1,9 +1,9 @@
 import { ReactNode, use } from 'react';
 import { IoChevronDown, IoOptions, IoSettingsOutline } from 'react-icons/io5';
-import { Popover } from '@base-ui-components/react/popover';
-import { Toggle } from '@base-ui-components/react/toggle';
-import { ToggleGroup } from '@base-ui-components/react/toggle-group';
-import { Toolbar } from '@base-ui-components/react/toolbar';
+import { Popover } from '@base-ui/react/popover';
+import { Toggle } from '@base-ui/react/toggle';
+import { ToggleGroup } from '@base-ui/react/toggle-group';
+import { Toolbar } from '@base-ui/react/toolbar';
 import { useSessionStorage } from '@mantine/hooks';
 import type { Column } from '@tanstack/react-table';