[WEB-1501] dev: multiple select core components (#4667)

* dev: multiple select core components

* chore: added export statement

Author: aaryan610

web/components/core/index.ts

@@ -1,5 +1,6 @@
 export * from "./filters";
 export * from "./modals";
+export * from "./multiple-select";
 export * from "./sidebar";
 export * from "./activity";
 export * from "./favorite-star";

web/components/core/multiple-select/entity-select-action.tsx

@@ -0,0 +1,36 @@
+// ui
+import { Checkbox } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { TSelectionHelper } from "@/hooks/use-multiple-select";
+
+type Props = {
+  className?: string;
+  disabled?: boolean;
+  groupId: string;
+  id: string;
+  selectionHelpers: TSelectionHelper;
+};
+
+export const MultipleSelectEntityAction: React.FC<Props> = (props) => {
+  const { className, disabled = false, groupId, id, selectionHelpers } = props;
+  // derived values
+  const isSelected = selectionHelpers.getIsEntitySelected(id);
+
+  return (
+    <Checkbox
+      className={cn("!outline-none size-3.5", className)}
+      iconClassName="size-3"
+      onClick={(e) => {
+        e.stopPropagation();
+        selectionHelpers.handleEntityClick(e, id, groupId);
+      }}
+      checked={isSelected}
+      data-entity-group-id={groupId}
+      data-entity-id={id}
+      disabled={disabled}
+      readOnly
+    />
+  );
+};

web/components/core/multiple-select/group-select-action.tsx

@@ -0,0 +1,30 @@
+// ui
+import { Checkbox } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { TSelectionHelper } from "@/hooks/use-multiple-select";
+
+type Props = {
+  className?: string;
+  disabled?: boolean;
+  groupID: string;
+  selectionHelpers: TSelectionHelper;
+};
+
+export const MultipleSelectGroupAction: React.FC<Props> = (props) => {
+  const { className, disabled = false, groupID, selectionHelpers } = props;
+  // derived values
+  const groupSelectionStatus = selectionHelpers.isGroupSelected(groupID);
+
+  return (
+    <Checkbox
+      className={cn("size-3.5 !outline-none", className)}
+      iconClassName="size-3"
+      onClick={() => selectionHelpers.handleGroupClick(groupID)}
+      checked={groupSelectionStatus === "complete"}
+      indeterminate={groupSelectionStatus === "partial"}
+      disabled={disabled}
+    />
+  );
+};

web/components/core/multiple-select/index.ts

@@ -0,0 +1,3 @@
+export * from "./entity-select-action";
+export * from "./group-select-action";
+export * from "./select-group";

web/components/core/multiple-select/select-group.tsx

@@ -0,0 +1,22 @@
+import { observer } from "mobx-react";
+// hooks
+import { TSelectionHelper, useMultipleSelect } from "@/hooks/use-multiple-select";
+
+type Props = {
+  children: (helpers: TSelectionHelper) => React.ReactNode;
+  containerRef: React.MutableRefObject<HTMLElement | null>;
+  entities: Record<string, string[]>; // { groupID: entityIds[] }
+};
+
+export const MultipleSelectGroup: React.FC<Props> = observer((props) => {
+  const { children, containerRef, entities } = props;
+
+  const helpers = useMultipleSelect({
+    containerRef,
+    entities,
+  });
+
+  return <>{children(helpers)}</>;
+});
+
+MultipleSelectGroup.displayName = "MultipleSelectGroup";

web/hooks/store/index.ts

@@ -9,6 +9,7 @@ export * from "./use-label";
 export * from "./use-member";
 export * from "./use-mention";
 export * from "./use-module";
+export * from "./use-multiple-select-store";
 
 export * from "./pages/use-project-page";
 export * from "./pages/use-page";

web/hooks/store/use-multiple-select-store.ts

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+// store
+import { StoreContext } from "@/lib/store-context";
+
+export const useMultipleSelectStore = () => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useMultipleSelectStore must be used within StoreProvider");
+  return context.multipleSelect;
+};