chore: upgrade React.js

SnailyCAD · Jun 9, 2024 · 5ffb543 · 5ffb543
1 parent 12b6538
commit 5ffb543
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 8 deletions.
diff --git a/packages/ui/src/components/dnd/draggable.tsx b/packages/ui/src/components/dnd/draggable.tsx
@@ -28,6 +28,7 @@ export function Draggable(props: Props) {
   }, [isDragging]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
+    // @ts-expect-error - React versions are different
     <div ref={drag} style={{ opacity }}>
       {props.children({ isDragging })}
     </div>

diff --git a/packages/ui/src/components/dnd/droppable.tsx b/packages/ui/src/components/dnd/droppable.tsx
@@ -23,6 +23,7 @@ export function Droppable<Item>(props: Props<Item>) {
   const isActive = isOver && _canDrop;
 
   return (
+    // @ts-expect-error - React versions are different
     <div className={cn(isActive && "outline outline-2 outline-offset-[5px] rounded-sm")} ref={drop}>
       {props.children}
     </div>

diff --git a/packages/ui/src/components/fields/async-list-search-field.tsx b/packages/ui/src/components/fields/async-list-search-field.tsx
@@ -106,7 +106,7 @@ function AsyncListSearchField<T extends object>(props: AsyncListFieldProps<T>) {
     [props.localValue],
   );
 
-  function handleSelectionChange(key?: Key, value?: string) {
+  function handleSelectionChange(key?: Key | null, value?: string) {
     try {
       if (props.isClearable && key === "cleared") {
         props.onSelectionChange(null);
@@ -222,7 +222,7 @@ function AsyncListSearchField<T extends object>(props: AsyncListFieldProps<T>) {
         ) : null}
       </div>
 
-      {props.errorMessage && (
+      {!!props.errorMessage && (
         <ErrorMessage errorMessage={props.errorMessage} errorMessageProps={errorMessageProps} />
       )}
     </div>

diff --git a/packages/ui/src/components/fields/async-list-search-field/actions.tsx b/packages/ui/src/components/fields/async-list-search-field/actions.tsx
@@ -16,7 +16,7 @@ export function AsyncListSearchFieldActions<T>(props: AsyncListSearchFieldAction
     ? "border-gray-800 dark:border-gray-500"
     : "border-gray-200 dark:border-quinary";
   const errorMessageClassName =
-    props.errorMessage && "!border-red-500 focus:!border-red-700 dark:!focus:border-red-700";
+    !!props.errorMessage && "!border-red-500 focus:!border-red-700 dark:!focus:border-red-700";
 
   const enabledHoverClassName =
     !props.isDisabled && "group-hover:dark:!border-gray-500 group-hover:!border-gray-500";

diff --git a/packages/ui/src/components/fields/date-picker-field.tsx b/packages/ui/src/components/fields/date-picker-field.tsx
@@ -60,7 +60,7 @@ export function DatePickerField({ value: _value, ...rest }: Props) {
   } = useDatePicker({ ...rest }, state, triggerRef);
 
   const errorMessageClassName =
-    rest.errorMessage && "!border-red-500 focus:!border-red-700 dark:!focus:border-red-700";
+    !!rest.errorMessage && "!border-red-500 focus:!border-red-700 dark:!focus:border-red-700";
 
   return (
     <ModalProvider>

diff --git a/packages/ui/src/components/fields/select-field.tsx b/packages/ui/src/components/fields/select-field.tsx
@@ -104,7 +104,7 @@ export function SelectField<T extends SelectValue>(props: SelectFieldProps<T>) {
                   size: "sm",
                   className: cn(
                     "px-2 cursor-default !rounded-r-none w-full min-h-[39px] h-auto flex items-center justify-between border !bg-white dark:!bg-secondary hover:dark:!bg-secondary hover:dark:!brightness-100 group-hover:dark:!border-gray-500 group-hover:!border-gray-500",
-                    props.errorMessage &&
+                    !!props.errorMessage &&
                       "!border-red-500 focus:!border-red-700 dark:focus:!border-red-700",
                     state.isOpen && "dark:!border-gray-500 !border-gray-500",
                     props.isDisabled && "!cursor-not-allowed opacity-60",

diff --git a/packages/ui/src/components/inputs/select/select-actions.tsx b/packages/ui/src/components/inputs/select/select-actions.tsx
@@ -44,7 +44,7 @@ export function SelectActions<T extends SelectValue>(props: Props<T>) {
             "px-2 !rounded-none -mx-[1.5px]",
             "group-hover:dark:!border-gray-500 group-hover:!border-gray-500",
             props.state.isOpen && "!border-gray-800 dark:!border-gray-500",
-            props.errorMessage &&
+            !!props.errorMessage &&
               "!border-red-500 focus:!border-red-700 dark:!focus:border-red-700",
           )}
           type="button"
@@ -63,7 +63,8 @@ export function SelectActions<T extends SelectValue>(props: Props<T>) {
           !showClearableButton && "-ml-[1.5px]",
           "group-hover:dark:!border-gray-500 group-hover:!border-gray-500",
           props.state.isOpen && "!border-gray-800 dark:!border-gray-500",
-          props.errorMessage && "!border-red-500 focus:!border-red-700 dark:!focus:border-red-700",
+          !!props.errorMessage &&
+            "!border-red-500 focus:!border-red-700 dark:!focus:border-red-700",
         )}
       >
         <ChevronDown className="w-5 h-5 dark:fill-white" />

diff --git a/packages/ui/src/hooks/select/useMultiSelect.ts b/packages/ui/src/hooks/select/useMultiSelect.ts
@@ -9,17 +9,27 @@ import type {
   MultiSelectState,
 } from "./useMultiSelectState";
 import type { AriaSelectProps } from "@react-types/select";
+import type { AriaButtonOptions } from "@react-aria/button";
+import type { DOMAttributes, FocusableElement } from "@react-types/shared";
 
 interface MultiSelectProps<T> extends Omit<AriaSelectProps<T>, "onSelectionChange"> {
   disallowEmptySelection?: boolean;
   onSelectionChange?: MultiSelectStateProps<T>["onSelectionChange"];
 }
 
+interface UseMultiSelect {
+  triggerProps: AriaButtonOptions<"button">;
+  labelProps: Record<string, unknown>;
+  errorMessageProps: DOMAttributes<FocusableElement>;
+  valueProps: Record<string, unknown>;
+  menuProps: Record<string, unknown>;
+}
+
 export function useMultiSelect<T>(
   props: MultiSelectProps<T>,
   state: MultiSelectState<T>,
   ref: React.RefObject<HTMLElement>,
-) {
+): UseMultiSelect {
   const { disallowEmptySelection, isDisabled } = props;
 
   const { menuTriggerProps, menuProps } = useMenuTrigger(