Feat: added support for max seat selection

src/components/workspace/elements/index.tsx

@@ -56,11 +56,16 @@ export const Element: React.FC<IElementProps> = ({
   }, [ref, consumer.mode]);
 
   const onClick = (e: any) => {
-    if (
-      consumer.mode === "user" &&
-      (type !== ElementType.Seat || (props.status && props.status !== SeatStatus.Available))
-    ) {
-      return;
+    if (consumer.mode === "user") {
+      if (type !== ElementType.Seat || props.status !== SeatStatus.Available) {
+        return;
+      }
+      if (
+        consumer.options?.maxSeatSelectionCount &&
+        store.getState().editor.selectedElementIds.length > consumer.options?.maxSeatSelectionCount
+      ) {
+        return consumer.events?.onMaxSeatSelectionCountReached?.();
+      }
     }
     if (consumer.mode === "user" && consumer.seatSelectionMode === "chain") {
       if (isSelected) {

src/components/workspace/index.tsx

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import { useSelector } from "react-redux";
 import { twMerge } from "tailwind-merge";
 import { dataAttributes, ids } from "@/constants";
-import { type ISTKProps } from "@/types";
+import { type ISTKProps, SeatStatus } from "@/types";
 import { Tool, tools } from "../toolbar/data";
 import { default as Crosshairs } from "./crosshairs";
 import { default as Element, ElementType } from "./elements";
@@ -74,7 +74,7 @@ export const Workspace: React.FC<ISTKProps> = (props) => {
               sections={sections}
               categories={categories}
               category={e.category}
-              status={e.status}
+              status={e.status ?? SeatStatus.Available}
               {...elementProps(e)}
             />
           ))}

src/types/index.ts

@@ -30,6 +30,8 @@ export interface IEvents {
   onSeatLeave?: (seat: IPopulatedSeat, coords: ICoordinates) => void;
   /** Only applicable in user mode */
   onSeatSelectionChange?: (seats: IPopulatedSeat[]) => void;
+  /** Only applicable in user mode. Fired when the user tries to select more seats than the maxSeatSelectionCount */
+  onMaxSeatSelectionCountReached?: () => void;
   onWorkspaceHover?: () => void;
   onSectionClick?: (section: ISection) => void;
   onExport?: (data: ISTKData) => void;
@@ -72,5 +74,7 @@ export interface ISTKProps {
     operationTriggerIcon?: React.FC;
     seatIcon?: React.FC<any>;
     selectedSeatIcon?: React.FC<any>;
+    /** Only applicable in user mode. If provided, will stop the user from selecting more seats than the provided number. */
+    maxSeatSelectionCount?: number;
   };
 }