react-science 9.0.0 → 10.0.0

package/src/components/toolbar/Toolbar.tsx

@@ -1,32 +1,20 @@
 /** @jsxImportSource @emotion/react */
-import {
-  ButtonGroup,
-  type ButtonGroupProps,
-  Classes,
-  Colors,
-  Icon,
+import type {
+  ButtonGroupProps,
   Intent,
-  Popover,
-  type PopoverProps,
-  type TooltipProps,
+  PopoverProps,
+  TooltipProps,
 } from '@blueprintjs/core';
+import { ButtonGroup, Classes, Colors, Icon, Popover } from '@blueprintjs/core';
 import { css } from '@emotion/react';
-import {
-  cloneElement,
-  type MouseEvent,
-  type ReactNode,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-} from 'react';
+import type { MouseEvent, ReactNode } from 'react';
+import { cloneElement, useLayoutEffect, useMemo, useRef } from 'react';
 
-import { Button, type ButtonProps } from '../button/index.js';
+import type { ButtonProps } from '../button/index.js';
+import { Button } from '../button/index.js';
 
-import {
-  type ToolbarContext,
-  toolbarContext,
-  useToolbarContext,
-} from './toolbarContext.js';
+import type { ToolbarContext } from './toolbarContext.js';
+import { toolbarContext, useToolbarContext } from './toolbarContext.js';
 
 export type PopoverInteractionType =
   | 'click'
@@ -41,6 +29,12 @@ interface ToolbarBaseProps {
 export interface ToolbarProps
   extends ToolbarBaseProps,
     Pick<ButtonGroupProps, 'children' | 'vertical'> {
+  /**
+   * The type of interaction which triggers a popover to open.
+   * This prop only affects children which are `Toolbar.PopoverItem`.
+   *
+   * {@link https://blueprintjs.com/docs/#core/components/popover.interactions}
+   */
   popoverInteractionKind?: PopoverInteractionType;
 }
 
@@ -49,12 +43,11 @@ export interface ToolbarItemProps
     Pick<ButtonProps, 'id' | 'icon' | 'active' | 'tag' | 'tagProps'> {
   tooltip?: TooltipProps['content'];
   tooltipProps?: Omit<TooltipProps, 'content'>;
-  onClick?: (
-    item: ToolbarItemProps & {
-      event: MouseEvent;
-    },
-  ) => void;
-  isPopover?: boolean;
+  onClick?: (event: MouseEvent) => void;
+}
+
+interface ToolbarItemInternalProps extends ToolbarItemProps {
+  isPopover: boolean;
 }
 
 export interface ToolbarPopoverItemProps extends PopoverProps {
@@ -128,7 +121,11 @@ export function Toolbar(props: ToolbarProps) {
   );
 }
 
-Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
+function ToolbarItem(props: ToolbarItemProps) {
+  return <ToolbarItemInternal {...props} isPopover={false} />;
+}
+
+function ToolbarItemInternal(props: ToolbarItemInternalProps) {
   const {
     active = false,
     icon,
@@ -213,9 +210,7 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
           )}
         </div>
       }
-      onClick={(event) => {
-        onClick?.({ event, ...props });
-      }}
+      onClick={onClick}
       tooltipProps={
         !tooltip
           ? undefined
@@ -231,7 +226,9 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
       {...other}
     />
   );
-};
+}
+
+Toolbar.Item = ToolbarItem;
 
 Toolbar.PopoverItem = function ToolbarPopoverItem(
   props: ToolbarPopoverItemProps,
@@ -254,16 +251,18 @@ Toolbar.PopoverItem = function ToolbarPopoverItem(
       `}
       targetProps={{
         style: {
-          position: 'relative',
           fontSize: '1.125em',
           width: 'fit-content',
           height: 'fit-content',
         },
       }}
+      renderTarget={({ isOpen, className, ...targetProps }) => (
+        <span {...targetProps} style={{ flex: '0 0 auto' }}>
+          <ToolbarItemInternal isPopover {...itemProps} />
+        </span>
+      )}
       {...other}
-    >
-      <Toolbar.Item isPopover {...itemProps} />
-    </Popover>
+    />
   );
 };
 

package/src/components/toolbar/toolbarContext.ts

@@ -1,4 +1,4 @@
-import { Intent } from '@blueprintjs/core';
+import type { Intent } from '@blueprintjs/core';
 import { createContext, useContext } from 'react';
 
 import type { PopoverInteractionType } from './Toolbar.js';