Fix tests and fix new popover positioning

Author: Polleps

browser/CHANGELOG.md

@@ -41,6 +41,7 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 - BREAKING CHANGE: `useCanWrite` now only returns a boolean. There is no longer a message returned.
 - BREAKING CHANGE: `useCanWrite` does not take an agent as argument any more and only checks the agent set in the store. If you need to explicitly check a different agent, use `await resource.canWrite(agent)`.
 - BREAKING CHANGE: `useDebounce` and `useDebouncedCallback` are no longer exported.
+- BREAKING CHANGE: @tomic/react now requires React 19.2.0 or above.
 - Added `useDebouncedSave` hook.
 - Add a cjs build.
 

browser/create-template/templates/nextjs-site/package.json

@@ -17,8 +17,8 @@
     "gray-matter": "^4.0.3",
     "modern-css-reset": "^1.4.0",
     "next": "15.0.4",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "remark": "^15.0.1",
     "remark-html": "^16.0.1",
     "zod": "^3.23.8"

browser/data-browser/src/chunks/RTE/CollaborativeEditor.tsx

@@ -57,23 +57,19 @@ import { addIf } from '@helpers/addIf';
 export type CollaborativeEditorProps = {
   placeholder?: string;
   doc: Y.Doc;
-  autoFocus?: boolean;
   resource: Resource;
   property: string;
   id?: string;
-  labelId?: string;
   onBlur?: () => void;
 };
 
 const COLORS = ['#70d6ff', '#ff70a6', '#ff9770', '#ffd670', '#e9ff70'];
 
 export default function CollaborativeEditor({
   placeholder,
-  autoFocus,
   doc,
   property,
   id,
-  labelId,
   resource,
   onBlur,
 }: CollaborativeEditorProps): React.JSX.Element {
@@ -249,11 +245,12 @@ export default function CollaborativeEditor({
       ],
       editable: canWrite,
       onBlur,
-      autofocus: !!autoFocus,
       editorProps: {
         attributes: {
           ...(id && { id }),
-          ...(labelId && { 'aria-labelledby': labelId }),
+          'aria-label': 'Rich Text Editor',
+          'aria-multiline': 'true',
+          'aria-readonly': canWrite ? 'true' : 'false',
           spellcheck: 'true',
         },
       },

browser/data-browser/src/components/CustomPopover.tsx

@@ -1,117 +1,144 @@
 import {
-  useEffectEvent,
+  useEffect,
   useId,
-  useLayoutEffect,
   useRef,
+  useState,
   type ReactNode,
+  type RefObject,
 } from 'react';
 import { styled } from 'styled-components';
 import { transparentize } from 'polished';
 import { fadeIn } from '@helpers/commonAnimations';
 import { useControlLock } from '@hooks/useControlLock';
 import { useDialogTreeInfo } from './Dialog/dialogContext';
-import { useControllable } from '@hooks/useControlable';
+import { useOnValueChange } from '@helpers/useOnValueChange';
 
 export interface TriggerProps {
   onClick: () => void;
   'data-popover-target': string;
 }
 
-export interface PopoverProps {
-  Trigger: (props: TriggerProps) => ReactNode;
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange: (open: boolean) => void;
+export interface PopoverPropsFromHook {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  anchorName: string;
+}
+export interface PopoverProps extends PopoverPropsFromHook {
+  Trigger: ReactNode;
   className?: string;
-  noArrow?: boolean;
   noLock?: boolean;
-  modal?: boolean;
-  side?: 'top' | 'bottom' | 'left' | 'right';
 }
 
+export interface UsePopoverProps {
+  defaultOpen?: boolean;
+  autoFocusElement?: RefObject<HTMLElement | null>;
+}
+
+export interface UsePopoverReturn {
+  triggerProps: {
+    onClick: () => void;
+    'data-popover-target': string;
+  };
+  popoverProps: PopoverPropsFromHook;
+  openPopover: () => void;
+  closePopover: () => void;
+  isOpen: boolean;
+}
+
+export const usePopover = ({
+  defaultOpen = false,
+  autoFocusElement,
+}: UsePopoverProps): UsePopoverReturn => {
+  const id = useId();
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const { setHasOpenInnerPopup } = useDialogTreeInfo();
+
+  const openPopover = () => {
+    setIsOpen(true);
+  };
+
+  const closePopover = () => {
+    setIsOpen(false);
+  };
+
+  const triggerProps = {
+    onClick: () => setIsOpen(prev => !prev),
+    'data-popover-target': id,
+  };
+
+  const popoverProps = {
+    anchorName: id,
+    isOpen,
+    setIsOpen,
+  };
+
+  useOnValueChange(() => {
+    setHasOpenInnerPopup(isOpen);
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen && autoFocusElement && autoFocusElement.current) {
+      autoFocusElement.current.focus();
+    }
+  }, [isOpen, autoFocusElement]);
+
+  return { triggerProps, popoverProps, openPopover, closePopover, isOpen };
+};
+
 /**
  * Popover component, consists of an outer dialog element and an inner content div.
  * To style the content div use `${CustomPopover.Content}: { ... }`
  */
 export function CustomPopover({
   Trigger,
-  open: parentOpen,
-  defaultOpen,
-  onOpenChange,
+  anchorName,
+  isOpen,
+  setIsOpen,
   className,
   noLock,
-  side = 'top',
-  modal,
   children,
 }: React.PropsWithChildren<PopoverProps>) {
-  const popoverRef = useRef<HTMLDialogElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
-  const id = useId();
 
-  const setElementState = (state: boolean) => {
-    if (state && !popoverRef.current?.hasAttribute('open')) {
-      if (modal) {
-        popoverRef.current?.showModal();
-      } else {
-        popoverRef.current?.show();
-      }
-    } else if (!state && popoverRef.current?.hasAttribute('open')) {
-      popoverRef.current?.close();
+  useEffect(() => {
+    if (isOpen && !popoverRef.current?.matches(':popover-open')) {
+      popoverRef.current?.showPopover();
+    } else if (!isOpen && popoverRef.current?.matches(':popover-open')) {
+      popoverRef.current?.hidePopover();
     }
-  };
-
-  const onStateChange = (state: boolean) => {
-    setElementState(state);
-    setHasOpenInnerPopup(state);
-
-    onOpenChange?.(state);
-  };
-
-  const [open, setOpen] = useControllable({
-    controlledValue: parentOpen,
-    defaultValue: defaultOpen,
-    onChange: onStateChange,
-  });
+  }, [isOpen]);
 
-  const { setHasOpenInnerPopup } = useDialogTreeInfo();
+  useEffect(() => {
+    const handleToggle = (e: ToggleEvent) => {
+      if (e.newState === 'closed') {
+        setIsOpen(false);
+      }
+    };
 
-  const handleOutsideClick = (
-    e: React.MouseEvent<HTMLDialogElement, MouseEvent>,
-  ) => {
-    if (
-      !contentRef.current?.contains(e.target as HTMLElement) &&
-      contentRef.current !== e.target
-    ) {
-      setOpen(false);
-    }
-  };
+    if (!popoverRef.current) return;
 
-  const setElementStateEffect = useEffectEvent((state: boolean) => {
-    setElementState(state);
-  });
+    const popover = popoverRef.current;
+    popover.addEventListener('toggle', handleToggle);
 
-  useLayoutEffect(() => {
-    setElementStateEffect(!!open);
-  }, [open]);
+    return () => {
+      popover.removeEventListener('toggle', handleToggle);
+    };
+  }, [setIsOpen]);
 
-  useControlLock(!noLock && !!open);
+  useControlLock(!noLock && !!isOpen);
 
   return (
-    <Wrapper anchorName={id}>
-      <Trigger
-        onClick={() => setOpen(prev => !prev)}
-        data-popover-target={id}
-      />
+    <Wrapper anchorName={anchorName}>
+      {Trigger}
       <Popover
-        anchorName={id}
+        anchorName={anchorName}
         popover='auto'
         ref={popoverRef}
-        id={id}
-        side={side}
-        onMouseDown={e => handleOutsideClick(e)}
+        id={anchorName}
         className={className}
       >
-        <PopoverContent ref={contentRef}>{open && children}</PopoverContent>
+        <PopoverContent ref={contentRef}>{isOpen && children}</PopoverContent>
       </Popover>
     </Wrapper>
   );
@@ -124,12 +151,25 @@ CustomPopover.Content = PopoverContent;
 const Wrapper = styled.div<{ anchorName: string }>`
   display: contents;
 
-  & button[data-popover-target='${p => p.anchorName}'] {
+  & *[data-popover-target='${p => p.anchorName}'] {
     anchor-name: --${p => p.anchorName};
   }
 `;
 
-const Popover = styled.dialog<{ anchorName: string; side: string }>`
+const Popover = styled.div<{ anchorName: string }>`
+  @position-try --top-right {
+    position-area: top span-right;
+  }
+  @position-try --top-left {
+    position-area: top span-left;
+  }
+  @position-try --bottom-right {
+    position-area: bottom span-right;
+  }
+  @position-try --bottom-left {
+    position-area: bottom span-left;
+  }
+
   border: none;
   background-color: ${p => transparentize(0.2, p.theme.colors.bgBody)};
   backdrop-filter: blur(10px);
@@ -139,11 +179,10 @@ const Popover = styled.dialog<{ anchorName: string; side: string }>`
   margin: 0;
   padding: 0;
   inset: auto;
+  position: fixed;
   position-anchor: --${p => p.anchorName};
-  position-area: ${p => p.side};
-  position-try-fallbacks: flip-block;
+  position-area: top center;
+  position-try: --top-right, --top-left, --bottom-right, --bottom-left;
   max-height: unset;
-  &::backdrop {
-    background-color: transparent;
-  }
+  min-width: max-content;
 `;

browser/data-browser/src/components/Searchbar/Searchbar.tsx

@@ -17,6 +17,7 @@ import {
   base64StringToFilter,
   filterToBase64String,
 } from '../../routes/Search/searchUtils';
+import { addFieldsIf } from '@helpers/addIf';
 
 function addTagsToFilter(
   base64Filter: string | undefined,
@@ -52,10 +53,10 @@ export function Searchbar(): JSX.Element {
         to: paths.search,
         search: prev => ({
           query: q,
-          ...(scope ? { queryscope: scope } : {}),
-          ...(tags.length > 0
-            ? { filters: addTagsToFilter(prev.filters, tags) }
-            : {}),
+          ...addFieldsIf(!!scope, { queryscope: scope }),
+          ...addFieldsIf(tags.length > 0, {
+            filters: addTagsToFilter(prev.filters, tags),
+          }),
         }),
         replace: true,
       });

browser/data-browser/src/components/Tag/Tag.tsx

@@ -104,7 +104,7 @@ export function TagButton({
       e.stopPropagation();
       onClick(subject);
     },
-    [onClick],
+    [onClick, subject],
   );
 
   const className = selected ? 'selected-tag' : '';
@@ -171,14 +171,15 @@ const TagWrapperButton = styled(TagWrapper)`
   cursor: pointer;
   user-select: none;
 
-  transition: ${transition('filter', 'box-shadow')};
+  transition: ${transition('filter', 'box-shadow', 'transform')};
   animation: ${fadeIn} 0.2s ease-in-out;
   &:hover,
   &:focus,
   &.selected-tag {
     --shadow-color: ${({ theme }) =>
       theme.darkMode ? 'var(--dark-color)' : 'var(--light-color)'};
     filter: brightness(1.05);
+    transform: scale(1.1);
     box-shadow: 0 1px 20px 0px var(--shadow-color);
   }
 `;

browser/data-browser/src/components/forms/InputResourceArray.tsx

@@ -90,7 +90,7 @@ export default function InputResourceArray({
         setError(newArray.length === 0 ? 'Required' : undefined);
       }
     },
-    [property.datatype, setArray, setError, required, addingNewItem, array],
+    [property.datatype, setArray, setError, required, array],
   );
 
   const handleSetSubjectMemos = useMemo(() => {
@@ -198,7 +198,7 @@ export default function InputResourceArray({
           >
             <FaPlus />
           </AddButton>
-          {array.length > 1 && (
+          {array.length > 0 && (
             <StyledButton
               title='Remove all items from this list'
               data-testid={`input-${property.shortname}-clear`}

browser/data-browser/src/helpers/useOnValueChange.ts

@@ -1,7 +1,13 @@
 import { useState } from 'react';
 
-export function useOnValueChange(callback: () => void, dependants: unknown[]) {
-  const [deps, setDeps] = useState(dependants);
+const initialUnique = [Symbol('uniqueValue')];
+
+export function useOnValueChange(
+  callback: () => void,
+  dependants: unknown[],
+  runOnMount: boolean = false,
+) {
+  const [deps, setDeps] = useState(runOnMount ? initialUnique : dependants);
 
   if (deps.some((d, i) => d !== dependants[i])) {
     setDeps(dependants);