Additional fixes to PR #919

Author: Oksamies

Diff for: packages/cyberstorm/src/components/MultiSelectSearch/MultiSelectSearch.module.css

@@ -79,15 +79,15 @@
   --border-color: var(--color-cyber-green--80);
 }
 
-.removeAllButton {
+.clearSearch {
   width: 3rem;
   height: 100%;
   color: #c6c3ff;
   background: transparent;
   opacity: 0.5;
 }
 
-.openMenuButton {
+.showMenuButton {
   width: 3rem;
   height: 100%;
   color: #9c9cc4;

Diff for: packages/cyberstorm/src/components/MultiSelectSearch/MultiSelectSearch.tsx

@@ -1,9 +1,8 @@
 "use client";
 import React from "react";
 import styles from "./MultiSelectSearch.module.css";
-import { Icon } from "../Icon/Icon";
 import { classnames } from "../../utils/utils";
-import { Button } from "../../index";
+import { Button, Icon } from "../../index";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faCaretDown,
@@ -12,19 +11,17 @@ import {
 } from "@fortawesome/pro-solid-svg-icons";
 import { isNode } from "../../utils/type_guards";
 
-type Option = {
+export type MultiSelectSearchOption = {
   label: string;
   value: string;
 };
 type Props = {
-  options: Option[];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  value: Option[];
-  onChange: (v: Option[]) => void;
+  options: MultiSelectSearchOption[];
+  value: MultiSelectSearchOption[];
+  onChange: (v: MultiSelectSearchOption[]) => void;
   onBlur: () => void;
   // TODO: Implement disabled state
   disabled?: boolean;
-  name: string;
   placeholder?: string;
   color?: "red" | "green";
 };
@@ -35,22 +32,21 @@ type Props = {
  */
 export const MultiSelectSearch = React.forwardRef<HTMLInputElement, Props>(
   function MultiSelectSearch(props, ref) {
-    const { name, options, value, onChange, onBlur, placeholder, color } =
-      props;
+    const { options, value, onChange, onBlur, placeholder, color } = props;
     const menuRef = React.useRef<HTMLDivElement | null>(null);
     const inputRef = React.useRef<HTMLInputElement | null>(null);
 
     const [isVisible, setIsVisible] = React.useState(false);
     const [search, setSearch] = React.useState("");
     const [filteredOptions, setFilteredOptions] = React.useState(options);
 
-    function add(incomingOption: Option) {
+    function add(incomingOption: MultiSelectSearchOption) {
       if (!value.some((option) => option.value === incomingOption.value)) {
         onChange([...value, incomingOption]);
       }
     }
 
-    function remove(incomingOption: Option) {
+    function remove(incomingOption: MultiSelectSearchOption) {
       onChange(value.filter((option) => option.value !== incomingOption.value));
     }
 
@@ -89,7 +85,7 @@ export const MultiSelectSearch = React.forwardRef<HTMLInputElement, Props>(
 
     return (
       <div className={styles.root} ref={ref}>
-        <div className={styles.value}>
+        <div className={styles.selected}>
           {value.map((option) => {
             return (
               <Button.Root
@@ -109,16 +105,15 @@ export const MultiSelectSearch = React.forwardRef<HTMLInputElement, Props>(
         <div
           className={styles.search}
           onFocus={(e) => {
-            e.stopPropagation();
             inputRef.current && inputRef.current.focus();
+            e.stopPropagation();
           }}
           role="button"
           tabIndex={0}
           ref={menuRef}
         >
           <div className={styles.inputContainer} data-color={color}>
             <input
-              name={name}
               className={styles.input}
               value={search}
               data-color={color}
@@ -129,10 +124,10 @@ export const MultiSelectSearch = React.forwardRef<HTMLInputElement, Props>(
             />
             <button
               onClick={(e) => {
-                e.stopPropagation();
                 setSearch("");
+                e.stopPropagation();
               }}
-              className={styles.removeAllButton}
+              className={styles.clearSearch}
             >
               <Icon inline>
                 <FontAwesomeIcon icon={faCircleXmark} />
@@ -141,10 +136,10 @@ export const MultiSelectSearch = React.forwardRef<HTMLInputElement, Props>(
             <div className={styles.inputButtonDivider}></div>
             <button
               onClick={(e) => {
-                e.stopPropagation();
                 setIsVisible(!isVisible);
+                e.stopPropagation();
               }}
-              className={styles.openMenuButton}
+              className={styles.showMenuButton}
             >
               <Icon inline>
                 <FontAwesomeIcon icon={faCaretDown} />
@@ -162,8 +157,8 @@ export const MultiSelectSearch = React.forwardRef<HTMLInputElement, Props>(
                 <MultiSelectItem
                   key={option.value}
                   onClick={(e) => {
-                    e.stopPropagation();
                     add(option);
+                    e.stopPropagation();
                   }}
                   option={option}
                 />
@@ -180,7 +175,7 @@ MultiSelectSearch.displayName = "MultiSelectSearch";
 
 const MultiSelectItem = (props: {
   onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;
-  option: Option;
+  option: MultiSelectSearchOption;
 }) => {
   return (
     <div