Merge pull request #429 from fahad-aot/bugfix/fwf-4280-style-multiselect-opion

bugfix/fwf-4280:Added styles for multiselect

Author: arun-s-aot

forms-flow-components/src/components/CustomComponents/MultiSelect.tsx

@@ -1,5 +1,7 @@
-import React from "react";
+import React, { useState,useRef,useEffect } from "react";
 import Multiselect from 'multiselect-react-dropdown';
+import { CloseIcon } from "../SvgIcons/index";
+import { StyleServices } from "@formsflow/service";
 
 
 interface MultiSelectInterface {
@@ -9,6 +11,11 @@ interface MultiSelectInterface {
   onRemove?: (removed: any) => void; 
   displayValue?: string;  
   avoidHighlightFirstOption?: boolean;  
+  hidePlaceholder?:boolean;
+  className?:string;
+  disabled?:boolean;
+  placeholder?:string;
+  label?:string;
 }
 
 export const MultipleSelect: React.FC<MultiSelectInterface> = ({
@@ -17,15 +24,57 @@ export const MultipleSelect: React.FC<MultiSelectInterface> = ({
     onSelect = ()=> {},
     onRemove = ()=> {},
     displayValue= "",
-    avoidHighlightFirstOption = true
+    avoidHighlightFirstOption = true,
+    hidePlaceholder=true,
+    className,
+    disabled,
+    placeholder="",
+    label
 
 })=>{
-    return <Multiselect
-    options={options}  
-    selectedValues={selectedValues} 
-    onSelect={onSelect}  
-    onRemove={onRemove}  
-    displayValue={displayValue}
-    avoidHighlightFirstOption={avoidHighlightFirstOption}
-    />
+   const primaryColor = StyleServices.getCSSVariable('--ff-primary');
+   const dropdownRef = useRef<HTMLDivElement | null>(null);
+   const [isOpen,setIsOpen] = useState(false);
+     // Toggle dropdown open/close when clicked
+  const handleClick = (e: MouseEvent) => {
+    if (dropdownRef.current?.contains(e.target as Node) && !disabled) {
+      setIsOpen(true);
+    } else {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClick);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+    };
+  }, []);
+   
+  return (
+      <div className={`multiselect-container ${className}`} ref={dropdownRef}>
+       {label && <label className="multiple-select-label">{label}</label>}
+        <Multiselect
+          options={options}
+          selectedValues={selectedValues}
+          className={`${isOpen && "open-dropdown"}`}
+          onSelect={onSelect}
+          onRemove={onRemove}
+          displayValue={displayValue}
+          avoidHighlightFirstOption={avoidHighlightFirstOption}
+          hidePlaceholder={hidePlaceholder}
+          disable={disabled}
+          placeholder={placeholder}
+          customCloseIcon={
+            <CloseIcon
+              onClick={onRemove}
+              color={disabled ? `#AFB4B6`: primaryColor}
+              data-testid="pill-remove-icon"
+              aria-label="remove "
+            />
+          }
+        />
+      </div>
+    );
 }

forms-flow-theme/scss/_forms.scss

@@ -306,8 +306,8 @@ select option:hover {
       width: 1em;
       height: 1em;
       position: absolute;
-      right: 1rem; 
-  }
+      right: 1rem;
+    }
   }
 
   .input-group-text {
@@ -412,16 +412,16 @@ select option:hover {
 .valiation-astrisk {
   color: $primary;
 }
-//for not allowing for edit in preview 
+//for not allowing for edit in preview
 .form-preview{
   pointer-events: none;
   cursor: not-allowed;
 }
 .form-preview-tab {
   padding: var(--spacer-200);
-  height: 100vh; 
+  height: 100vh;
   overflow-y: auto;
-  overflow-x: hidden; 
+  overflow-x: hidden;
 }
 
 .dropdown-main {
@@ -467,4 +467,95 @@ select option:hover {
 .dashed-line {
   width: 8.8125rem;
   border-top: 0.1875rem dashed $gray-medium-dark;
-}
+}
+.multiple-select-label {
+  padding-bottom: var(--spacer-050);
+  color: $gray-darkest;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-sm);
+  line-height: var(--text-line-height);
+}
+
+.multiselect-container {
+  width: 100%;
+
+  &.disable_ms {
+    .searchWrapper {
+      background: var(--ff-gray-light);
+      border: none;
+      .chip {
+        background: var(--ff-white);
+        color: $gray-darkest;
+      }
+    }
+  }
+
+  .searchWrapper {
+    border-radius: var(--radius-sm);
+    border: 1px solid $primary;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacer-050);
+    
+    .chip {
+      padding: var(--spacer-050) var(--spacer-100);
+      align-items: center;
+      gap: var(--spacer-050);
+      border-radius: var(--radius-modal);
+      background: $primary-light; // #e4e3fc
+      color: $gray-darkest;
+      text-align: center;
+      font-size: var(--font-size-sm);
+      font-weight: var(--font-weight-sm);
+      line-height: var(--text-line-height);
+      margin-bottom: 0px !important;
+    }
+
+    .custom-close {
+      display: flex;
+      padding: 3px 2px;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+    }
+  }
+
+  .open-dropdown {
+    .searchWrapper {
+      border-bottom-left-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+    }
+  }
+
+  .optionListContainer {
+    margin-top: 0px;
+    border-top: none;
+    border-radius: 0px !important;
+  }
+
+  .optionContainer {
+    border-top: none !important;
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    border-bottom-left-radius: var(--radius-sm);
+    border-bottom-right-radius: var(--radius-sm);
+    display: flex;
+    padding: var(--spacer-050) 0px;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1 0 0;
+    border: 1px solid $primary;
+
+    .option {
+      &:hover {
+        background: $primary;
+      }
+      display: flex;
+      padding: var(--spacer-050) var(--spacer-100);
+      align-items: center;
+      align-self: stretch;
+    }
+  }
+}
+

forms-flow-theme/scss/_theme.scss

@@ -217,6 +217,11 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
   --radius-0125: 1.25rem;
   --radius-0150: 1.5rem;
   --radius-200: 2rem;
+
+  --radius-sm: 1.09375rem; //17.5px
+  --radius-md: 1.34375rem; //21.5px
+  --radius-lg: 1.59375rem; //25.5px
+  --radius-modal: 1.5rem; //24px
   //custom
   --client-nav: 3rem;
   --header-close-btn: 4.625rem;