react-science 23.1.0 → 24.0.0

package/src/components/color-picker/react-color/common/EditableInput.tsx

@@ -60,12 +60,12 @@ const EditableInput = (props) => {
   );
 
   const setUpdatedValue = useCallback(
-    (value, e) => {
+    (value, event) => {
       const onChangeValue = props.label
         ? getValueObjectWithLabel(value)
         : value;
       if (props.onChange) {
-        props.onChange(onChangeValue, e);
+        props.onChange(onChangeValue, event);
       }
 
       setState({ value });
@@ -73,58 +73,64 @@ const EditableInput = (props) => {
     [getValueObjectWithLabel, props],
   );
   const handleChange = useCallback(
-    (e) => {
-      setUpdatedValue(e.target.value, e);
+    (event) => {
+      setUpdatedValue(event.target.value, event);
     },
     [setUpdatedValue],
   );
 
   const handleKeyDown = useCallback(
-    (e) => {
-      // In case `e.target.value` is a percentage remove the `%` character
+    (event) => {
+      // In case `event.target.value` is a percentage remove the `%` character
       // and update accordingly with a percentage
       // https://github.com/casesandberg/react-color/issues/383
-      const value = getNumberValue(e.target.value);
-      const offset: number = props.arrowOffset || DEFAULT_ARROW_OFFSET;
-      if (!Number.isNaN(value) && isValidKeyCode(e.keyCode)) {
-        const updatedValue =
-          e.keyCode === UP_KEY_CODE ? value + offset : value - offset;
-
-        setUpdatedValue(updatedValue, e);
+      const value = getNumberValue(event.target.value);
+      if (Number.isNaN(value) || !isValidKeyCode(event.keyCode)) {
+        return;
       }
+      const offset: number = props.arrowOffset || DEFAULT_ARROW_OFFSET;
+      const updatedValue =
+        event.keyCode === UP_KEY_CODE ? value + offset : value - offset;
+      setUpdatedValue(updatedValue, event);
     },
     [props.arrowOffset, setUpdatedValue],
   );
 
   const handleDrag = useCallback(
-    (e: MouseEvent) => {
-      if (props.dragLabel) {
-        const newValue = Math.round(valueRef.current + e.movementX);
-        if (newValue >= 0 && newValue <= props.dragMax) {
-          valueRef.current = newValue;
-
-          if (props.onChange) {
-            props.onChange(getValueObjectWithLabel(newValue), e);
-          }
-        }
+    (event: MouseEvent) => {
+      if (!props.dragLabel) {
+        return;
+      }
+
+      const newValue = Math.round(valueRef.current + event.movementX);
+      if (newValue < 0 || newValue > props.dragMax) {
+        return;
+      }
+
+      valueRef.current = newValue;
+
+      if (props.onChange) {
+        props.onChange(getValueObjectWithLabel(newValue), event);
       }
     },
     [props, getValueObjectWithLabel],
   );
 
   const handleMouseDown = useCallback(
-    (e) => {
+    (event) => {
       function mouseUp() {
         window.removeEventListener('mousemove', handleDrag);
         window.removeEventListener('mouseup', mouseUp);
       }
 
-      if (props.dragLabel) {
-        e.preventDefault();
-        handleDrag(e);
-        window.addEventListener('mousemove', handleDrag);
-        window.addEventListener('mouseup', mouseUp);
+      if (!props.dragLabel) {
+        return;
       }
+
+      event.preventDefault();
+      handleDrag(event);
+      window.addEventListener('mousemove', handleDrag);
+      window.addEventListener('mouseup', mouseUp);
     },
     [handleDrag, props.dragLabel],
   );

package/src/components/color-picker/react-color/common/Hue.tsx

@@ -58,7 +58,7 @@ const styles = {
   },
 };
 
-const Hue = (props) => {
+export default function Hue(props) {
   const {
     direction = 'horizontal',
     hsl,
@@ -72,15 +72,15 @@ const Hue = (props) => {
   const containerRef = useRef();
 
   const handleChange = useCallback(
-    (e) => {
+    (event) => {
       const change = hue.calculateChange(
-        e,
+        event,
         direction,
         hsl,
         containerRef.current,
       );
       if (change && typeof onChange === 'function') {
-        onChange(change, e);
+        onChange(change, event);
       }
     },
     [direction, hsl, onChange],
@@ -108,6 +108,4 @@ const Hue = (props) => {
       </div>
     </div>
   );
-};
-
-export default Hue;
+}

package/src/components/color-picker/react-color/common/Saturation.tsx

@@ -52,24 +52,24 @@ const styles = {
   },
 };
 
-const Saturation = (props) => {
+export default function Saturation(props) {
   const { hsl, hsv, pointer, onChange, onBlur } = props;
 
   const throttleRef = useRef(
-    throttle((fn, data, e) => {
-      fn(data, e);
+    throttle((function_, data, event) => {
+      function_(data, event);
     }, 50),
   );
 
   const containerRef = useRef();
 
   const handleChange = useCallback(
-    (e) => {
+    (event) => {
       if (onChange && typeof onChange === 'function') {
         throttleRef.current(
           onChange,
-          saturation.calculateChange(e, hsl, containerRef.current),
-          e,
+          saturation.calculateChange(event, hsl, containerRef.current),
+          event,
         );
       }
     },
@@ -99,6 +99,4 @@ const Saturation = (props) => {
       </div>
     </div>
   );
-};
-
-export default Saturation;
+}

package/src/components/color-picker/react-color/common/Swatch.tsx

@@ -1,6 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 
+import type { CSSProperties } from 'react';
 import { useCallback } from 'react';
 
 import CheckBoard from './CheckBoard.js';
@@ -24,6 +25,8 @@ const styles = {
   outline: 'none',
 };
 
+const defaultFocusStyle: CSSProperties = {};
+
 const SwatchWithFocus = handleFocus(function Swatch({
   color,
   style,
@@ -32,20 +35,26 @@ const SwatchWithFocus = handleFocus(function Swatch({
   title = color,
   children,
   focus,
-  focusStyle = {},
+  focusStyle = defaultFocusStyle,
 }) {
-  const transparent = color === 'transparent';
+  const isTransparent = color === 'transparent';
 
-  const handleClick = useCallback((e) => onClick?.(color, e), [color, onClick]);
+  const handleClick = useCallback(
+    (event) => onClick?.(color, event),
+    [color, onClick],
+  );
   const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key.toLowerCase() === 'enter') {
-        onClick?.(color, e);
+    (event) => {
+      if (event.key.toLowerCase() === 'enter') {
+        onClick?.(color, event);
       }
     },
     [color, onClick],
   );
-  const handleHover = useCallback((e) => onHover?.(color, e), [color, onHover]);
+  const handleHover = useCallback(
+    (event) => onHover?.(color, event),
+    [color, onHover],
+  );
 
   const optionalEvents = {};
   if (onHover) {
@@ -58,7 +67,7 @@ const SwatchWithFocus = handleFocus(function Swatch({
         ...styles,
         background: color,
         ...style,
-        ...(focus ? focusStyle : {}),
+        ...(focus && focusStyle),
       }}
       onClick={handleClick}
       title={title}
@@ -67,7 +76,7 @@ const SwatchWithFocus = handleFocus(function Swatch({
       {...optionalEvents}
     >
       {children}
-      {transparent && (
+      {isTransparent && (
         <CheckBoard
           borderRadius={style.borderRadius}
           boxShadow="inset 0 0 0 1px rgba(0,0,0,0.1)"

package/src/components/color-picker/react-color/common/interaction.tsx

@@ -1,19 +1,18 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 
-import { Component } from 'react';
+import { useCallback, useState } from 'react';
 
-export const handleFocus = (WrappedComponent: any, Span = 'span'): any =>
-  class Focus extends Component {
-    state = { focus: false };
-    handleFocus = () => this.setState({ focus: true });
-    handleBlur = () => this.setState({ focus: false });
+export function handleFocus(WrappedComponent: any, Span = 'span'): any {
+  return function Focus(props: any) {
+    const [focus, setFocus] = useState(false);
+    const handleFocus = useCallback(() => setFocus(true), []);
+    const handleBlur = useCallback(() => setFocus(false), []);
 
-    render() {
-      return (
-        <Span onFocus={this.handleFocus} onBlur={this.handleBlur}>
-          <WrappedComponent {...this.props} {...this.state} />
-        </Span>
-      );
-    }
+    return (
+      <Span onFocus={handleFocus} onBlur={handleBlur}>
+        <WrappedComponent {...props} focus={focus} />
+      </Span>
+    );
   };
+}

package/src/components/color-picker/react-color/common/useOnChange.tsx

@@ -4,8 +4,8 @@ export function useOnChange(
   onChange: (event: Event) => void,
 ): (event: Event) => void {
   return useCallback(
-    (e) => {
-      onChange(e);
+    (event) => {
+      onChange(event);
 
       function handleMouseUp() {
         window.removeEventListener('mousemove', onChange);

package/src/components/color-picker/react-color/helpers/alpha.ts

@@ -2,7 +2,7 @@
 // @ts-nocheck
 
 export function calculateChange(
-  e,
+  event,
   hsl,
   direction,
   initialA,
@@ -10,14 +10,16 @@ export function calculateChange(
 ) {
   const containerWidth = container.clientWidth;
   const containerHeight = container.clientHeight;
-  const x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
-  const y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
+  const x =
+    typeof event.pageX === 'number' ? event.pageX : event.touches[0].pageX;
+  const y =
+    typeof event.pageY === 'number' ? event.pageY : event.touches[0].pageY;
   const left =
     x - (container.getBoundingClientRect().left + window.pageXOffset);
   const top = y - (container.getBoundingClientRect().top + window.pageYOffset);
 
+  let a;
   if (direction === 'vertical') {
-    let a;
     if (top < 0) {
       a = 0;
     } else if (top > containerHeight) {
@@ -36,7 +38,6 @@ export function calculateChange(
       };
     }
   } else {
-    let a;
     if (left < 0) {
       a = 0;
     } else if (left > containerWidth) {

package/src/components/color-picker/react-color/helpers/color.ts

@@ -9,25 +9,28 @@ function simpleCheckForValidColor(data) {
   let passed = 0;
 
   for (const letter of keysToCheck) {
-    if (data[letter]) {
-      checked += 1;
-      if (!Number.isNaN(Number(data[letter]))) {
-        passed += 1;
-      }
-      if (letter === 's' || letter === 'l') {
-        const percentPatt = /^\d+%$/;
-        if (percentPatt.test(data[letter])) {
-          passed += 1;
-        }
-      }
+    if (!data[letter]) {
+      continue;
+    }
+
+    checked += 1;
+    if (!Number.isNaN(Number(data[letter]))) {
+      passed += 1;
+    }
+    if (letter !== 's' && letter !== 'l') {
+      continue;
+    }
+    const percentPattern = /^\d+%$/;
+    if (percentPattern.test(data[letter])) {
+      passed += 1;
     }
   }
 
-  return checked === passed ? data : false;
+  return checked === passed && data;
 }
 
 function toState(data, oldHue?: number) {
-  const color = data.hex ? tinycolor(data.hex) : tinycolor(data);
+  const color = tinycolor(data.hex || data);
   const hsl = color.toHsl();
   const hsv = color.toHsv();
   const rgb = color.toRgb();

package/src/components/color-picker/react-color/helpers/hue.ts

@@ -1,17 +1,19 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 
-export function calculateChange(e, direction, hsl, container: Element) {
+export function calculateChange(event, direction, hsl, container: Element) {
   const containerWidth = container.clientWidth;
   const containerHeight = container.clientHeight;
-  const x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
-  const y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
+  const x =
+    typeof event.pageX === 'number' ? event.pageX : event.touches[0].pageX;
+  const y =
+    typeof event.pageY === 'number' ? event.pageY : event.touches[0].pageY;
   const left =
     x - (container.getBoundingClientRect().left + window.pageXOffset);
   const top = y - (container.getBoundingClientRect().top + window.pageYOffset);
 
+  let h;
   if (direction === 'vertical') {
-    let h;
     if (top < 0) {
       h = 359;
     } else if (top > containerHeight) {
@@ -20,18 +22,8 @@ export function calculateChange(e, direction, hsl, container: Element) {
       const percent = -((top * 100) / containerHeight) + 100;
       h = (360 * percent) / 100;
     }
-
-    if (hsl.h !== h) {
-      return {
-        h,
-        s: hsl.s,
-        l: hsl.l,
-        a: hsl.a,
-        source: 'hsl',
-      };
-    }
   } else {
-    let h;
+    // eslint-disable-next-line no-lonely-if
     if (left < 0) {
       h = 0;
     } else if (left > containerWidth) {
@@ -40,16 +32,15 @@ export function calculateChange(e, direction, hsl, container: Element) {
       const percent = (left * 100) / containerWidth;
       h = (360 * percent) / 100;
     }
-
-    if (hsl.h !== h) {
-      return {
-        h,
-        s: hsl.s,
-        l: hsl.l,
-        a: hsl.a,
-        source: 'hsl',
-      };
-    }
+  }
+  if (hsl.h !== h) {
+    return {
+      h,
+      s: hsl.s,
+      l: hsl.l,
+      a: hsl.a,
+      source: 'hsl',
+    };
   }
   return null;
 }

package/src/components/color-picker/react-color/helpers/saturation.ts

@@ -1,11 +1,13 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 
-export function calculateChange(e, hsl, container: Element) {
+export function calculateChange(event, hsl, container: Element) {
   const { width: containerWidth, height: containerHeight } =
     container.getBoundingClientRect();
-  const x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
-  const y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
+  const x =
+    typeof event.pageX === 'number' ? event.pageX : event.touches[0].pageX;
+  const y =
+    typeof event.pageY === 'number' ? event.pageY : event.touches[0].pageY;
   let left = x - (container.getBoundingClientRect().left + window.pageXOffset);
   let top = y - (container.getBoundingClientRect().top + window.pageYOffset);
 

package/src/components/color-picker/react-color/sketch/SketchFields.tsx

@@ -8,7 +8,7 @@ import * as color from '../helpers/color.js';
 export interface SketchFieldsProps {
   onChange: (
     data: (RGB | HSL | { hex: string }) & { source: string },
-    e: Event,
+    event: Event,
   ) => void;
   onBlur?: (event: FocusEvent<HTMLElement>) => void;
   hsl: HSL;
@@ -21,7 +21,7 @@ const styles: Record<
   'fields' | 'single' | 'double' | 'input' | 'label',
   CSSProperties
 > &
-  Record<'alpha', (disableAlpha: boolean) => CSSProperties> = {
+  Record<'alpha', (isAlphaDisabled: boolean) => CSSProperties> = {
   fields: {
     display: 'flex',
     paddingTop: '4px',
@@ -30,10 +30,10 @@ const styles: Record<
     flex: '1',
     paddingLeft: '6px',
   },
-  alpha: (disableAlpha: boolean) => ({
+  alpha: (isAlphaDisabled: boolean) => ({
     flex: '1',
     paddingLeft: '6px',
-    ...(disableAlpha && { display: 'none' }),
+    ...(isAlphaDisabled && { display: 'none' }),
   }),
   double: {
     flex: '2',
@@ -65,7 +65,7 @@ const SketchFields = ({
   disableAlpha,
 }: SketchFieldsProps) => {
   const handleChange = useCallback(
-    (data: any, e: any) => {
+    (data: any, event: any) => {
       if (data.hex) {
         if (color.isValidHex(data.hex)) {
           onChange(
@@ -73,7 +73,7 @@ const SketchFields = ({
               hex: data.hex,
               source: 'hex',
             },
-            e,
+            event,
           );
         }
       } else if (data.r || data.g || data.b) {
@@ -85,7 +85,7 @@ const SketchFields = ({
             a: rgb.a,
             source: 'rgb',
           },
-          e,
+          event,
         );
       } else if (data.a) {
         if (data.a < 0) {
@@ -103,7 +103,7 @@ const SketchFields = ({
             a: data.a,
             source: 'rgb',
           },
-          e,
+          event,
         );
       }
     },

package/src/components/color-picker/react-color/sketch/SketchPresetColors.tsx

@@ -10,15 +10,15 @@ interface SketchPresetColorsProps {
 }
 
 const styles: Record<'swatchWrap' | 'swatch', CSSProperties> &
-  Record<'colors', (flag: boolean) => CSSProperties> = {
-  colors: (flag: boolean) => ({
+  Record<'colors', (isHidden: boolean) => CSSProperties> = {
+  colors: (isHidden: boolean) => ({
     margin: '0 -10px',
     padding: '10px 0 0 10px',
     borderTop: '1px solid #eee',
     display: 'flex',
     flexWrap: 'wrap',
     position: 'relative',
-    ...(flag && { display: 'none' }),
+    ...(isHidden && { display: 'none' }),
   }),
   swatchWrap: {
     width: '16px',
@@ -35,13 +35,13 @@ const SketchPresetColors = (props: SketchPresetColorsProps) => {
   const { colors, onClick, onSwatchHover } = props;
 
   const handleClick = useCallback(
-    (hex: any, e: MouseEvent) => {
+    (hex: any, event: MouseEvent) => {
       onClick?.(
         {
           hex,
           source: 'hex',
         },
-        e,
+        event,
       );
     },
     [onClick],
@@ -49,11 +49,11 @@ const SketchPresetColors = (props: SketchPresetColorsProps) => {
 
   return (
     <div style={styles.colors(!colors || colors.length === 0)}>
-      {colors.map((colorObjOrString) => {
+      {colors.map((colorObjectOrString) => {
         const c =
-          typeof colorObjOrString === 'string'
-            ? { color: colorObjOrString }
-            : colorObjOrString;
+          typeof colorObjectOrString === 'string'
+            ? { color: colorObjectOrString }
+            : colorObjectOrString;
         const key = `${c.color}${'title' in c ? c?.title : ''}`;
         return (
           <div key={key} style={styles.swatchWrap}>

package/src/components/dialog/ConfirmDialog.tsx

@@ -3,7 +3,7 @@ import { Classes, Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 
 import { Button } from '../button/index.js';
-import { shouldForwardPropExcept } from '../utils/shouldForwardPropExcept.js';
+import { forwardAllPropsExcept } from '../utils/forward_all_props_except.ts';
 
 interface ConfirmDialogProps extends Omit<DialogProps, 'isCloseButtonShown'> {
   onConfirm: () => void;
@@ -14,7 +14,7 @@ interface ConfirmDialogProps extends Omit<DialogProps, 'isCloseButtonShown'> {
 }
 
 const DialogWithHeaderColor = styled(Dialog, {
-  shouldForwardProp: shouldForwardPropExcept(['headerColor']),
+  shouldForwardProp: forwardAllPropsExcept(['headerColor']),
 })<{ headerColor: string }>`
   .${Classes.DIALOG_HEADER} {
     background-color: ${(props) => props.headerColor};

package/src/components/draggable/draggable.tsx

@@ -67,25 +67,27 @@ export function Draggable(props: DraggableProps) {
       const diff = event.clientX - previousPositionRef.current;
       previousPositionRef.current = event.clientX;
 
-      if (event.buttons === 1) {
-        const step = match(event)
-          .with({ shiftKey: true }, () => majorStepSize ?? stepSize)
-          .with({ altKey: true }, () => minorStepSize ?? stepSize)
-          .otherwise(() => stepSize);
-
-        const precision = Math.max(
-          Utils.countDecimalPlaces(draggedValueRef.current),
-          Utils.countDecimalPlaces(minorStepSize ?? stepSize),
-        );
-
-        const nextValue = toMaxPrecision(
-          draggedValueRef.current + diff * step,
-          precision,
-        );
-
-        draggedValueRef.current = clamp(nextValue, min, max);
-        onChangeRef.current(0, String(draggedValueRef.current));
+      if (event.buttons !== 1) {
+        return;
       }
+
+      const step = match(event)
+        .with({ shiftKey: true }, () => majorStepSize ?? stepSize)
+        .with({ altKey: true }, () => minorStepSize ?? stepSize)
+        .otherwise(() => stepSize);
+
+      const precision = Math.max(
+        Utils.countDecimalPlaces(draggedValueRef.current),
+        Utils.countDecimalPlaces(minorStepSize ?? stepSize),
+      );
+
+      const nextValue = toMaxPrecision(
+        draggedValueRef.current + diff * step,
+        precision,
+      );
+
+      draggedValueRef.current = clamp(nextValue, min, max);
+      onChangeRef.current(0, String(draggedValueRef.current));
     }
 
     function handleMouseUp() {

package/src/components/form/components/field_groups/svg_text_style.schema.ts

@@ -6,7 +6,7 @@ export const svgTextStyleFieldsSchema = z.object({
   fill: z.string().optional(),
   fontSize: stringToNumberOptional({
     numSchema: z.int().min(1),
-    parse: (str) => Number.parseInt(str, 10),
+    parse: (string_) => Math.trunc(Number(string_)),
   }),
   fontStyle: z.enum(['normal', 'italic']).optional(),
   fontWeight: z.enum(['normal', 'bold']).optional(),