Restrict pydantic packages to versions that work for the demo

client/component/package.json

@@ -45,7 +45,7 @@
     "websocket": "^1.0.35"
   },
   "peerDependencies": {
-    "@h5web/lib": "^13.0.0",
+    "@h5web/lib": "^14.0.1",
     "@react-three/drei": "^9.111.2",
     "@react-three/fiber": "^8.17.5",
     "ndarray": "^1.0.19",
@@ -55,7 +55,7 @@
     "three": "^0.167.1"
   },
   "devDependencies": {
-    "@h5web/lib": "^13.0.0",
+    "@h5web/lib": "^14.0.1",
     "@react-three/drei": "^9.111.2",
     "@react-three/fiber": "^8.17.5",
     "@types/cwise": "^1.0.6",

client/component/src/GlyphTypeToggle.tsx

@@ -1,12 +1,14 @@
+import type { ComponentType, SVGAttributes } from 'react';
 import { FaCircle } from 'react-icons/fa';
 import { RxCross1 } from 'react-icons/rx';
 import { FaSquareFull } from 'react-icons/fa6';
 import { MdHorizontalRule } from 'react-icons/md';
 
 import { ToggleGroup } from '@h5web/lib';
-import type { IIconType } from './Modal';
 import type { GlyphType } from '@h5web/lib';
 
+type IIconType = ComponentType<SVGAttributes<SVGElement>>;
+
 /**
  * Props for the `GlyphTypeToggle` component.
  */
@@ -78,4 +80,4 @@ function GlyphTypeToggle(props: GlyphTypeToggleProps) {
 }
 
 export default GlyphTypeToggle;
-export type { GlyphTypeToggleProps };
+export type { GlyphTypeToggleProps, IIconType };

client/component/src/InteractionModeToggle.tsx

@@ -3,7 +3,7 @@ import { IoShapesOutline } from 'react-icons/io5';
 import { TbZoomInArea, TbZoomPan } from 'react-icons/tb';
 
 import { ToggleGroup } from '@h5web/lib';
-import type { IIconType } from './Modal';
+import type { IIconType } from './GlyphTypeToggle';
 import { InteractionModeType } from './utils';
 
 /**

client/component/src/LabelledInput.tsx

@@ -1,4 +1,4 @@
-import '@h5web/lib/dist/styles.css';
+import '@h5web/lib/styles.css';
 
 import styles from './LabelledInput.module.css';
 

client/component/src/Modal.tsx

@@ -2,16 +2,11 @@ import Draggable from 'react-draggable';
 import { ToggleBtn } from '@h5web/lib';
 import { useClickOutside, useKeyboardEvent } from '@react-hookz/web';
 import { Fragment, useRef, useState } from 'react';
-import type {
-  ComponentType,
-  PropsWithChildren,
-  ReactNode,
-  SVGAttributes,
-} from 'react';
+import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
 
 import styles from './Modal.module.css';
 
-type IIconType = ComponentType<SVGAttributes<SVGElement>>;
+type IIconType = ComponentType<{ className: string }>;
 
 /**
  * Props for the `Modal` component.
@@ -60,7 +55,7 @@ function Modal(props: PropsWithChildren<ModalProps>) {
     <ToggleBtn
       key={toggleKey}
       label={toggleTitle}
-      icon={props.icon}
+      Icon={props.icon}
       onToggle={() => {
         setShowModal(true);
       }}

client/component/src/PlotCustomizationContext.tsx

@@ -166,7 +166,8 @@ export function usePlotCustomizationContext() {
 }
 
 export interface AnyPlotCustomizationProps
-  extends LinePlotCustomizationProps,
+  extends
+    LinePlotCustomizationProps,
     ImagePlotCustomizationProps,
     HeatmapPlotCustomizationProps,
     ScatterPlotCustomizationProps,

client/component/src/PlotToolbar.tsx

@@ -229,7 +229,7 @@ function PlotToolbar(props: PropsWithChildren): JSX.Element {
     <ToggleBtn
       key="show points"
       label="show points"
-      icon={TbGridDots as IIconType}
+      Icon={TbGridDots}
       iconOnly
       value={value.showPoints}
       onToggle={value.toggleShowPoints}
@@ -267,7 +267,7 @@ function PlotToolbar(props: PropsWithChildren): JSX.Element {
     <ToggleBtn
       key="Grid toggle"
       label="Grid toggle"
-      icon={MdGridOn}
+      Icon={MdGridOn}
       value={value.showGrid}
       onToggle={value.toggleShowGrid}
     />

client/component/src/index.ts

@@ -64,6 +64,7 @@ export type {
   SelectionHandler,
   SelectionsEventListener,
   SelectionsEventType,
+  SelectionOptions,
 } from './selections/utils';
 
 // Re-export @h5web/lib enums and types used by some props

client/component/src/selections/utils.tsx

@@ -43,6 +43,9 @@ enum SelectionType {
   unknown = 'unknown',
 }
 
+/**
+ * Object of possible options for a SelectionType and its maximum occurrences
+ */
 type SelectionOptions = {
   [K in SelectionType]?: number;
 };

client/component/src/shapes/DvdDragHandle.tsx

@@ -139,6 +139,5 @@ function DvdDragHandle(props: DvdDragHandleProps) {
   );
 }
 
-// eslint-disable-next-line react-refresh/only-export-components
 export { DvdDragHandle, HANDLE_SIZE };
 export type { DvdDragHandleProps };