react-science 19.10.4 → 20.0.0

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';
@@ -33,7 +40,9 @@ interface ToolbarBaseProps {
 }
 
 export interface ToolbarProps
-  extends ToolbarBaseProps, Pick<ButtonGroupProps, 'children' | 'vertical'> {
+  extends
+    ToolbarBaseProps,
+    Pick<ButtonGroupProps, 'children' | 'vertical' | 'aria-label'> {
   /**
    * The type of interaction which triggers a popover to open.
    * This prop only affects children which are `Toolbar.PopoverItem`.
@@ -55,7 +64,10 @@ export interface ToolbarProps
 export interface ToolbarItemProps
   extends
     ToolbarBaseProps,
-    Pick<ButtonProps, 'id' | 'icon' | 'active' | 'tag' | 'tagProps'> {
+    Pick<
+      ButtonProps,
+      'id' | 'icon' | 'active' | 'tag' | 'tagProps' | 'aria-label'
+    > {
   tooltip?: TooltipProps['content'];
   tooltipProps?: Omit<TooltipProps, 'content'>;
   onClick?: (event: MouseEvent) => void;
@@ -66,7 +78,7 @@ interface ToolbarItemInternalProps extends ToolbarItemProps {
 }
 
 export interface ToolbarPopoverItemProps extends Omit<
-  PopoverProps,
+  PopoverNextProps,
   'targetProps'
 > {
   itemProps: ToolbarItemProps;
@@ -91,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;
@@ -117,6 +129,7 @@ export function Toolbar(props: ToolbarProps) {
     popoverInteractionKind,
     overflow = 'wrap',
     overflowButtonProps,
+    'aria-label': ariaLabel,
   } = props;
 
   const { placement = 'end' } = overflowButtonProps || {};
@@ -148,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';
@@ -174,6 +187,8 @@ export function Toolbar(props: ToolbarProps) {
     return (
       <ToolbarProvider value={contextValue}>
         <ButtonGroup
+          role="toolbar"
+          aria-label={ariaLabel}
           ref={ref}
           key={String(vertical)}
           vertical={vertical}
@@ -193,6 +208,8 @@ export function Toolbar(props: ToolbarProps) {
     <ToolbarProvider value={contextValue}>
       <Container vertical={vertical} placement={placement}>
         <ButtonGroup
+          role="toolbar"
+          aria-label={ariaLabel}
           ref={ref}
           // Reset because of layout effect above
           // TODO: remove once the workaround is no longer needed
@@ -263,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={
@@ -306,7 +321,7 @@ function ToolbarItemInternal(props: ToolbarItemInternalProps) {
 
 Toolbar.Item = ToolbarItem;
 
-const ToolbarPopover = styled(Popover)`
+const ToolbarPopover = styled(PopoverNext)`
   .${Classes.ICON} {
     color: ${Colors.DARK_GRAY3};
   }
@@ -320,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;
 }

package/src/components/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './assert.js';
 export * from './debounce.js';
 export * from './throttle.js';
+export * from './svg.js';

package/src/components/utils/svg.ts

@@ -0,0 +1,120 @@
+import { assert } from './assert.ts';
+
+export interface ExportSVGOptions {
+  /**
+   * CSS Selector to remove from the SVG.
+   *
+   * @example '[data-no-export="true"]' And add `data-no-export="true"` attribute to the elements you don't want in the exported SVG.
+   * @default undefined (Will not remove any elements)
+   */
+  removeFromSelector?: string;
+
+  /**
+   * Add a background to the SVG. It can be useful to integrate exported svg in diapositive documents.
+   *
+   * @default false
+   */
+  addBackground?: boolean;
+
+  /**
+   * Background color of the SVG. You can use any valid CSS color.
+   *
+   * @default 'white' (It needs `addBackground: true` to work)
+   */
+  backgroundColor?: string;
+
+  /**
+   * Custom mutations to apply to the SVG.
+   */
+  customMutations?: (svg: SVGSVGElement) => void;
+}
+
+/**
+ * Export an SVG element to a string.
+ *
+ * @param base
+ * @param options
+ *
+ * @return The outerHTML of the SVG element.
+ */
+export function exportSVG(
+  base: SVGSVGElement,
+  options: ExportSVGOptions = {},
+): string {
+  const {
+    removeFromSelector,
+    addBackground = false,
+    backgroundColor = 'white',
+    customMutations,
+  } = options;
+
+  const svg = base.cloneNode(true) as SVGSVGElement;
+
+  // cleanup svg
+  if (removeFromSelector) {
+    const items = svg.querySelectorAll(removeFromSelector);
+    for (const item of items) {
+      item.remove();
+    }
+  }
+
+  if (addBackground) {
+    const background = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'rect',
+    );
+    background.setAttribute('x', '0');
+    background.setAttribute('y', '0');
+    background.setAttribute('width', '100%');
+    background.setAttribute('height', '100%');
+    background.setAttribute('fill', backgroundColor);
+    svg.prepend(background);
+  }
+
+  customMutations?.(svg);
+
+  return svg.outerHTML;
+}
+
+/**
+ * Export an SVG element to a PNG blob.
+ *
+ * @param base
+ * @param options
+ */
+export async function exportSVGAsPNG(
+  base: SVGSVGElement,
+  options: ExportSVGOptions = {},
+): Promise<Blob> {
+  const {
+    removeFromSelector,
+    addBackground = false,
+    backgroundColor = 'white',
+    customMutations,
+  } = options;
+
+  const svg = exportSVG(base, {
+    removeFromSelector,
+    addBackground: false,
+    customMutations,
+  });
+  const svgBlob = new Blob([svg], { type: 'image/svg+xml' });
+
+  const img = new Image();
+  img.src = URL.createObjectURL(svgBlob);
+  await img.decode().finally(() => URL.revokeObjectURL(img.src));
+
+  const canvas = new OffscreenCanvas(img.naturalWidth, img.naturalHeight);
+  const ctx = canvas.getContext('2d');
+  assert(ctx);
+
+  if (addBackground) {
+    ctx.fillStyle = backgroundColor;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  }
+
+  ctx.drawImage(img, 0, 0);
+
+  const png = await canvas.convertToBlob({ type: 'image/png' });
+  return png;
+}