react-science 0.33.0 → 0.35.0

package/src/components/toolbar/Toolbar.tsx

@@ -1,7 +1,18 @@
 /** @jsxImportSource @emotion/react */
-import { ButtonGroup, Classes, Colors, Intent } from '@blueprintjs/core';
+import {
+  ButtonGroup,
+  Classes,
+  Colors,
+  Intent,
+  Popover,
+  PopoverProps,
+  Icon,
+} from '@blueprintjs/core';
+import { IconName } from '@blueprintjs/icons';
 import { css } from '@emotion/react';
 import {
+  cloneElement,
+  JSX,
   ReactElement,
   ReactNode,
   useLayoutEffect,
@@ -9,7 +20,7 @@ import {
   useRef,
 } from 'react';
 
-import { Button, ButtonProps } from '../index';
+import { Button } from '../index';
 
 import {
   ToolbarContext,
@@ -35,11 +46,16 @@ export interface ToolbarProps extends ToolbarBaseProps {
 export interface ToolbarItemProps extends ToolbarBaseProps {
   id?: string;
   title: string;
-  icon: ButtonProps['icon'];
+  icon: IconName | JSX.Element;
   active?: boolean;
   onClick?: (item: ToolbarItemProps) => void;
   className?: string;
   noTooltip?: boolean;
+  isPopover?: boolean;
+}
+
+export interface ToolbarPopoverItemProps extends PopoverProps {
+  itemProps: ToolbarItemProps;
 }
 
 const border = '1px solid rgb(247, 247, 247)';
@@ -61,7 +77,6 @@ export function Toolbar(props: ToolbarProps) {
     if (!vertical) {
       return;
     }
-
     function update() {
       const lastElement = ref.current?.lastElementChild;
       if (!lastElement) {
@@ -87,7 +102,9 @@ export function Toolbar(props: ToolbarProps) {
   return (
     <ToolbarProvider value={contextValue}>
       <ButtonGroup
-        ref={ref}
+        // Reset because of layout effect above
+        // TODO: remove once the workaround is no longer needed
+        key={String(vertical)}
         vertical={vertical}
         large={large}
         style={{
@@ -111,6 +128,7 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
     intent: itemIntent,
     disabled: itemDisabled,
     noTooltip = false,
+    isPopover,
     ...other
   } = props;
 
@@ -122,8 +140,17 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
   } = useToolbarContext();
   const intent = itemIntent ?? toolbarIntent;
   const disabled = itemDisabled ?? toolbarDisabled;
+  const resizedIcon =
+    typeof icon === 'string'
+      ? icon
+      : cloneElement(icon, {
+          className: icon.props.className
+            ? `${icon.props.className} bp5-icon`
+            : 'bp5-icon',
+        });
   return (
     <Button
+      alignText={isPopover ? 'left' : undefined}
       minimal
       disabled={disabled}
       css={css`
@@ -134,13 +161,37 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
       intent={intent}
       style={{
         position: 'relative',
-        fontSize: '1.25em',
+        fontSize: '1.125em',
         width: 'fit-content',
         flex: 'none',
       }}
       type="button"
       active={active}
-      icon={icon}
+      icon={
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: 0,
+            height: 0,
+          }}
+        >
+          <Icon icon={resizedIcon} />
+          {isPopover && (
+            <Icon
+              icon="caret-right"
+              size={large ? 14 : 9}
+              style={{
+                transform: 'rotate(45deg)',
+                position: 'absolute',
+                bottom: 0,
+                right: 0,
+              }}
+            />
+          )}
+        </div>
+      }
       onClick={() => {
         onClick?.(props);
       }}
@@ -159,6 +210,38 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
   );
 };
 
+Toolbar.PopoverItem = function ToolbarPopoverItem(
+  props: ToolbarPopoverItemProps,
+) {
+  const { itemProps, ...other } = props;
+  const { disabled, vertical } = useToolbarContext();
+
+  return (
+    <Popover
+      minimal
+      disabled={disabled}
+      placement={vertical ? 'right-start' : 'bottom-start'}
+      css={css`
+        .${Classes.ICON} {
+          color: ${Colors.DARK_GRAY3};
+        }
+      `}
+      targetProps={{
+        style: {
+          position: 'relative',
+          fontSize: '1.125em',
+          width: 'fit-content',
+          height: 'fit-content',
+          flex: 'none',
+        },
+      }}
+      {...other}
+    >
+      <Toolbar.Item noTooltip isPopover {...itemProps} />
+    </Popover>
+  );
+};
+
 function ToolbarProvider(props: {
   value: ToolbarContext;
   children: ReactNode;

package/lib/components/button/ButtonGroup.d.ts

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-interface ButtonGroupProps {
-    children: [ReactNode, ReactNode];
-}
-export declare function ButtonGroup(props: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace ButtonGroup {
-    var Button: (props: ButtonGroupButtonProps) => import("react/jsx-runtime").JSX.Element;
-}
-interface ButtonGroupButtonProps {
-    position: 'first' | 'last';
-    label: string;
-    onClick: () => void;
-}
-export {};
-//# sourceMappingURL=ButtonGroup.d.ts.map

package/lib/components/button/ButtonGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/button/ButtonGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA4BlC,UAAU,gBAAgB;IACxB,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;CAClC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAGlD;yBAHe,WAAW;;;AAK3B,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB"}

package/lib/components/button/ButtonGroup.js

@@ -1,42 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonGroup = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const ButtonGroupRoot = styled_1.default.div `
-  display: inline-flex;
-  border-radius: 0.375rem;
-  isolation: isolate;
-`;
-const ButtonGroupCustomButton = styled_1.default.button `
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  border-width: 1px;
-  border-top-left-radius: ${({ isLast }) => !isLast && '0.375rem'};
-  border-bottom-left-radius: ${({ isLast }) => !isLast && '0.375rem'};
-
-  border-top-right-radius: ${({ isLast }) => isLast && '0.375rem'};
-  border-bottom-right-radius: ${({ isLast }) => isLast && '0.375rem'};
-  margin-left: ${({ isLast }) => isLast && '-1px'};
-`;
-function ButtonGroup(props) {
-    const { children } = props;
-    return (0, jsx_runtime_1.jsx)(ButtonGroupRoot, { children: children });
-}
-exports.ButtonGroup = ButtonGroup;
-ButtonGroup.Button = function ButtonGroupButton(props) {
-    const { position, label, onClick } = props;
-    return ((0, jsx_runtime_1.jsx)(ButtonGroupCustomButton, { type: "button", onClick: onClick, isLast: position === 'last', children: label }));
-};
-//# sourceMappingURL=ButtonGroup.js.map

package/lib/components/button/ButtonGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../../src/components/button/ButtonGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,6DAAqC;AAGrC,MAAM,eAAe,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,uBAAuB,GAAG,gBAAM,CAAC,MAAM,CAAqB;;;;;;;;;;;;4BAYtC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,IAAI,UAAU;+BAClC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,IAAI,UAAU;;6BAEvC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,IAAI,UAAU;gCACjC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,IAAI,UAAU;iBACnD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,IAAI,MAAM;CAChD,CAAC;AAMF,SAAgB,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3B,OAAO,uBAAC,eAAe,cAAE,QAAQ,GAAmB,CAAC;AACvD,CAAC;AAHD,kCAGC;AAQD,WAAW,CAAC,MAAM,GAAG,SAAS,iBAAiB,CAAC,KAA6B;IAC3E,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAE3C,OAAO,CACL,uBAAC,uBAAuB,IACtB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,QAAQ,KAAK,MAAM,YAE1B,KAAK,GACkB,CAC3B,CAAC;AACJ,CAAC,CAAC"}

package/lib-esm/components/button/ButtonGroup.d.ts

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-interface ButtonGroupProps {
-    children: [ReactNode, ReactNode];
-}
-export declare function ButtonGroup(props: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace ButtonGroup {
-    var Button: (props: ButtonGroupButtonProps) => import("react/jsx-runtime").JSX.Element;
-}
-interface ButtonGroupButtonProps {
-    position: 'first' | 'last';
-    label: string;
-    onClick: () => void;
-}
-export {};
-//# sourceMappingURL=ButtonGroup.d.ts.map

package/lib-esm/components/button/ButtonGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/button/ButtonGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA4BlC,UAAU,gBAAgB;IACxB,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;CAClC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAGlD;yBAHe,WAAW;;;AAK3B,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB"}

package/lib-esm/components/button/ButtonGroup.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-const ButtonGroupRoot = styled.div `
-  display: inline-flex;
-  border-radius: 0.375rem;
-  isolation: isolate;
-`;
-const ButtonGroupCustomButton = styled.button `
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  border-width: 1px;
-  border-top-left-radius: ${({ isLast }) => !isLast && '0.375rem'};
-  border-bottom-left-radius: ${({ isLast }) => !isLast && '0.375rem'};
-
-  border-top-right-radius: ${({ isLast }) => isLast && '0.375rem'};
-  border-bottom-right-radius: ${({ isLast }) => isLast && '0.375rem'};
-  margin-left: ${({ isLast }) => isLast && '-1px'};
-`;
-export function ButtonGroup(props) {
-    const { children } = props;
-    return _jsx(ButtonGroupRoot, { children: children });
-}
-ButtonGroup.Button = function ButtonGroupButton(props) {
-    const { position, label, onClick } = props;
-    return (_jsx(ButtonGroupCustomButton, { type: "button", onClick: onClick, isLast: position === 'last', children: label }));
-};
-//# sourceMappingURL=ButtonGroup.js.map

package/lib-esm/components/button/ButtonGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../../src/components/button/ButtonGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,CAAqB;;;;;;;;;;;;4BAYtC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,IAAI,UAAU;+BAClC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,IAAI,UAAU;;6BAEvC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,IAAI,UAAU;gCACjC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,IAAI,UAAU;iBACnD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,IAAI,MAAM;CAChD,CAAC;AAMF,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3B,OAAO,KAAC,eAAe,cAAE,QAAQ,GAAmB,CAAC;AACvD,CAAC;AAQD,WAAW,CAAC,MAAM,GAAG,SAAS,iBAAiB,CAAC,KAA6B;IAC3E,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAE3C,OAAO,CACL,KAAC,uBAAuB,IACtB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,QAAQ,KAAK,MAAM,YAE1B,KAAK,GACkB,CAC3B,CAAC;AACJ,CAAC,CAAC"}

package/src/components/button/ButtonGroup.tsx

@@ -1,57 +0,0 @@
-import styled from '@emotion/styled';
-import { ReactNode } from 'react';
-
-const ButtonGroupRoot = styled.div`
-  display: inline-flex;
-  border-radius: 0.375rem;
-  isolation: isolate;
-`;
-
-const ButtonGroupCustomButton = styled.button<{ isLast: boolean }>`
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  border-width: 1px;
-  border-top-left-radius: ${({ isLast }) => !isLast && '0.375rem'};
-  border-bottom-left-radius: ${({ isLast }) => !isLast && '0.375rem'};
-
-  border-top-right-radius: ${({ isLast }) => isLast && '0.375rem'};
-  border-bottom-right-radius: ${({ isLast }) => isLast && '0.375rem'};
-  margin-left: ${({ isLast }) => isLast && '-1px'};
-`;
-
-interface ButtonGroupProps {
-  children: [ReactNode, ReactNode];
-}
-
-export function ButtonGroup(props: ButtonGroupProps) {
-  const { children } = props;
-  return <ButtonGroupRoot>{children}</ButtonGroupRoot>;
-}
-
-interface ButtonGroupButtonProps {
-  position: 'first' | 'last';
-  label: string;
-  onClick: () => void;
-}
-
-ButtonGroup.Button = function ButtonGroupButton(props: ButtonGroupButtonProps) {
-  const { position, label, onClick } = props;
-
-  return (
-    <ButtonGroupCustomButton
-      type="button"
-      onClick={onClick}
-      isLast={position === 'last'}
-    >
-      {label}
-    </ButtonGroupCustomButton>
-  );
-};