react-science 19.11.0 → 20.0.0

package/src/components/toolbar/OverflowButton.tsx

@@ -1,5 +1,5 @@
-import type { PopoverProps, TooltipProps } from '@blueprintjs/core';
-import { Popover } from '@blueprintjs/core';
+import type { PopoverNextProps, TooltipProps } from '@blueprintjs/core';
+import { PopoverNext } from '@blueprintjs/core';
 import type { ReactNode } from 'react';
 
 import type { ButtonProps } from '../button/Button.tsx';
@@ -10,7 +10,7 @@ export type Placement = 'start' | 'end';
 
 export interface BaseOverButtonProps extends ButtonProps {
   placement?: Placement;
-  popoverProps?: PopoverProps;
+  popoverProps?: PopoverNextProps;
 }
 export interface OverButtonProps extends BaseOverButtonProps {
   vertical?: boolean;
@@ -21,7 +21,7 @@ export interface OverButtonProps extends BaseOverButtonProps {
 function getPlacement(
   placement: Placement,
   vertical?: boolean,
-): PopoverProps['placement'] {
+): PopoverNextProps['placement'] {
   const isEndPlacement = placement === 'end';
   return vertical
     ? `${isEndPlacement ? 'top' : 'bottom'}-start`
@@ -41,17 +41,16 @@ export function OverflowButton(props: OverButtonProps) {
     ...otherProps
   } = props;
   return (
-    <Popover
-      minimal
+    <PopoverNext
+      shouldReturnFocusOnClose={false}
+      animation="minimal"
+      arrow={false}
       disabled={disabled}
       placement={getPlacement(placement, vertical)}
       interactionKind="hover"
       hasBackdrop={false}
       enforceFocus={false}
       autoFocus={false}
-      modifiers={{
-        flip: { enabled: false },
-      }}
       {...popoverProps}
       content={
         <Toolbar
@@ -75,7 +74,7 @@ export function OverflowButton(props: OverButtonProps) {
         }}
         {...otherProps}
       />
-    </Popover>
+    </PopoverNext>
   );
 }
 

package/src/components/toolbar/Toolbar.tsx

@@ -1,10 +1,17 @@
 import type {
   ButtonGroupProps,
   Intent,
-  PopoverProps,
+  PopoverNextProps,
   TooltipProps,
 } from '@blueprintjs/core';
-import { ButtonGroup, Classes, Colors, Icon, Popover } from '@blueprintjs/core';
+import {
+  ButtonGroup,
+  Classes,
+  Colors,
+  Icon,
+  PopoverNext,
+} from '@blueprintjs/core';
+import type { StyledComponent } from '@emotion/styled';
 import styled from '@emotion/styled';
 import type { MouseEvent, ReactNode } from 'react';
 import { useLayoutEffect, useMemo, useRef } from 'react';
@@ -71,7 +78,7 @@ interface ToolbarItemInternalProps extends ToolbarItemProps {
 }
 
 export interface ToolbarPopoverItemProps extends Omit<
-  PopoverProps,
+  PopoverNextProps,
   'targetProps'
 > {
   itemProps: ToolbarItemProps;
@@ -96,7 +103,7 @@ const Container = styled.div<ContainerProps>`
   width: 100%;
 `;
 
-export const ToolbarButton = styled(Button)`
+export const ToolbarButton: StyledComponent<ButtonProps> = styled(Button)`
   .${Classes.ICON} {
     /* Color of icon in button is lighter in Blueprintjs. We want a better contrast in the toolbars */
     color: ${Colors.DARK_GRAY3} !important;
@@ -154,7 +161,7 @@ export function Toolbar(props: ToolbarProps) {
 
     function update() {
       const lastElement = ref.current?.lastElementChild;
-      if (!lastElement) {
+      if (!ref.current || !lastElement) {
         return;
       }
       ref.current.style.width = 'initial';
@@ -273,28 +280,26 @@ function ToolbarItemInternal(props: ToolbarItemInternalProps) {
         width: 'fit-content',
       }}
       icon={
-        <>
-          {isPopover ? (
-            <>
-              {/*For the icon to be properly styled, it should not have any siblings*/}
-              <div style={{ display: 'contents' }}>{normalizedIcon}</div>
-              <Icon
-                icon="caret-right"
-                size={9}
-                style={{
-                  transform: 'rotate(45deg)',
-                  position: 'absolute',
-                  bottom: 0,
-                  right: 0,
-                  width: 9,
-                  height: 9,
-                }}
-              />
-            </>
-          ) : (
-            normalizedIcon
-          )}
-        </>
+        isPopover ? (
+          <div style={{ display: 'contents' }}>
+            {/*For the icon to be properly styled, it should not have any siblings*/}
+            <div style={{ display: 'contents' }}>{normalizedIcon}</div>
+            <Icon
+              icon="caret-right"
+              size={9}
+              style={{
+                transform: 'rotate(45deg)',
+                position: 'absolute',
+                bottom: 0,
+                right: 0,
+                width: 9,
+                height: 9,
+              }}
+            />
+          </div>
+        ) : (
+          normalizedIcon
+        )
       }
       onClick={onClick}
       tooltipProps={
@@ -316,7 +321,7 @@ function ToolbarItemInternal(props: ToolbarItemInternalProps) {
 
 Toolbar.Item = ToolbarItem;
 
-const ToolbarPopover = styled(Popover)`
+const ToolbarPopover = styled(PopoverNext)`
   .${Classes.ICON} {
     color: ${Colors.DARK_GRAY3};
   }
@@ -330,7 +335,9 @@ Toolbar.PopoverItem = function ToolbarPopoverItem(
 
   return (
     <ToolbarPopover
-      minimal
+      shouldReturnFocusOnClose={false}
+      animation="minimal"
+      arrow={false}
       disabled={disabled}
       placement={vertical ? 'right-start' : 'bottom-start'}
       interactionKind={popoverInteractionKind}

package/src/components/toolbar/useCheckOverflow.tsx

@@ -1,9 +1,10 @@
+import type { RefObject } from 'react';
 import { useLayoutEffect, useState } from 'react';
 
 import type { Overflow } from './Toolbar.tsx';
 
 interface UseCheckOverflowOptions {
-  containerRef: React.RefObject<HTMLDivElement>;
+  containerRef: RefObject<HTMLDivElement | null>;
   vertical: boolean;
   overflow: Overflow;
 }