pixel-react 1.6.9 → 1.7.1

package/src/components/NLPInput/NlpInput.tsx

@@ -1,5 +1,10 @@
-import { useReducer, useRef, useEffect, useMemo } from 'react';
-import { Option, SelectAction, SelectProps, SelectState } from './type';
+import { useReducer, useRef, useEffect, useMemo, useState } from 'react';
+import {
+  NlpRenderOption,
+  SelectAction,
+  SelectProps,
+  SelectState,
+} from './types';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
@@ -29,7 +34,6 @@ const nlpInputReducer = (
         options: action.payload.optionsList,
         option: action.payload.option,
 
-        // todo color need to be add in style guide
         iconColor: 'var(--ff-nlp-input-default-color)',
         isIconClick: false,
         showOptions: false,
@@ -47,8 +51,7 @@ const nlpInputReducer = (
     case 'MOUSE_LEAVE':
       return state.isInputFocused
         ? state
-        : // todo color need to be add in style guide
-          {
+        : {
             ...state,
             iconColor: 'var(--ff-nlp-input-default-color)',
             isIconClick: false,
@@ -102,7 +105,14 @@ const nlpInputReducer = (
 
 const NlpInput = ({
   label = '',
+  leftIcon,
+  rightIcon,
+  rightIconColor,
   showLabel = true,
+  onHelpIconClick = () => {},
+  aiIconClick = () => {},
+  webServiceClick = () => {},
+  containerWidth = '',
   optionsList = [],
   selectedOption = {
     displayName: '',
@@ -118,17 +128,22 @@ const NlpInput = ({
   borderRadius = true,
   showBorder = true,
   required = false,
+  value = '',
+  onSelect = () => {},
 }: SelectProps) => {
   const initialState: SelectState = useMemo(
     () => ({
       isInputFocused: false,
 
-      // todo color need to be added in style guide
       iconColor: 'var(--ff-nlp-input-default-color)',
       isIconClick: false,
       showOptions: false,
       options: optionsList,
-      option: checkEmpty(selectedOption) ? '' : selectedOption?.projectId,
+      option:
+        checkEmpty(selectedOption) &&
+        typeof selectedOption?.displayName === 'string'
+          ? selectedOption.displayName
+          : '',
       dropdownPosition: { positionX: 0, positionY: 0, width: 0, fromBottom: 0 },
     }),
     [optionsList, selectedOption]
@@ -139,12 +154,29 @@ const NlpInput = ({
     initialState
   );
 
+  const [inputVal, setInputVal] = useState<NlpRenderOption>(selectedOption);
+
+  useEffect(() => {
+    const updatedDisplayName =
+      typeof selectedOption.displayName === 'string'
+        ? selectedOption.displayName
+        : String(selectedOption.displayName ?? '');
+
+    if (updatedDisplayName !== inputVal.displayName) {
+      setInputVal({ ...selectedOption, displayName: updatedDisplayName });
+    }
+  }, [selectedOption]);
+
+  useEffect(() => {
+    if (value) {
+      handleSelectAction('FOCUS_INPUT');
+    }
+  }, [value]);
   const DropDownRef = useRef<HTMLDivElement>(null);
   const InputRef = useRef<HTMLInputElement>(null);
 
   const {
     isInputFocused,
-    iconColor,
     isIconClick,
     showOptions,
     dropdownPosition,
@@ -166,7 +198,13 @@ const NlpInput = ({
       if (actionType === 'SHOW_ERROR' || actionType === 'BLUR_INPUT') {
         dispatch({
           type: actionType,
-          payload: { optionsList, option: selectedOption.projectId },
+          payload: {
+            optionsList,
+            option:
+              typeof selectedOption.displayName === 'string'
+                ? selectedOption.displayName
+                : String(selectedOption.displayName ?? ''),
+          },
         });
       } else {
         dispatch({ type: actionType });
@@ -174,18 +212,11 @@ const NlpInput = ({
     }
   };
 
-  const onSelectInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const onSelectInputChange = (
+    e: React.ChangeEvent<HTMLInputElement> | any
+  ) => {
     if (disabled) return;
-    const { value } = e.target;
-
-    const filteredOptions = optionsList.filter((option) => {
-      return option.displayName
-        .toLowerCase()
-        .includes(value.toLowerCase().trim());
-    });
-
-    dispatch({ type: 'UPDATE_OPTION_LIST', payload: filteredOptions });
-    dispatch({ type: 'UPDATE_OPTION', payload: value });
+    onChange(e);
   };
 
   const onSelectBlur = () => {
@@ -198,14 +229,8 @@ const NlpInput = ({
     }
   };
 
-  const onSelectOptionSelector = (option: Option) => {
-    if (!disabled) {
-      onSelectBlur();
-      dispatch({ type: 'UPDATE_OPTION', payload: option.projectId });
-      if (onChange) {
-        onChange(option);
-      }
-    }
+  const onSelectOptionSelector = (option: NlpRenderOption) => {
+    onSelect(option);
   };
 
   const onSelectUpdatePosition = () => {
@@ -255,29 +280,40 @@ const NlpInput = ({
       <div className="ff-nlp-input">
         <input
           type="text"
-          className={classNames('ff-nlp-input-input', {
-            'ff-nlp-input-input--default': !isInputFocused,
-            'ff-nlp-input-input--active': applyActiveOptionClasses,
-            'ff-nlp-input-input--no-label': !showLabel,
-            'ff-nlp-input-input--error':
+          className={classNames('ff-nlp-input-container', {
+            'ff-nlp-input-container--default': !isInputFocused,
+            'ff-nlp-input-container--active': applyActiveOptionClasses,
+            'ff-nlp-input-container--no-label': !showLabel,
+            'ff-nlp-input-container--error':
               errorMsg && !isInputFocused && !Boolean(option),
-            'ff-nlp-input-input--border-radius': !borderRadius,
-            'ff-nlp-input-input--disable': disabled,
-            'ff-nlp-input-input--no-border': !showBorder,
+            'ff-nlp-input-container--border-radius': !borderRadius,
+            'ff-nlp-input-container--disable': disabled,
+            'ff-nlp-input-container--no-border': !showBorder,
           })}
-          // inline css required due to multiple overlay scenarios are present
           style={{ zIndex: optionZIndex }}
           onFocus={() => handleSelectAction('FOCUS_INPUT')}
           onMouseEnter={() => handleSelectAction('MOUSE_ENTER')}
           onMouseLeave={() => handleSelectAction('MOUSE_LEAVE')}
           onChange={onSelectInputChange}
-          value={option}
+          value={value}
           disabled={disabled}
           autoComplete="off"
           spellCheck="false"
           ref={InputRef}
         />
 
+        <div className="icon-container">
+          <Icon
+            name={leftIcon || 'ai_search'}
+            className="ff-nlp-help_icon"
+            width={16}
+            height={16}
+            onClick={aiIconClick}
+          />
+          <Typography className="icon-label" fontSize={10}>
+            Search With Ai
+          </Typography>
+        </div>
         {showLabel && (
           <div
             className={classNames('ff-nlp-input-label', {
@@ -294,20 +330,27 @@ const NlpInput = ({
                 *
               </Typography>
             )}
+
             {label}
           </div>
         )}
 
-        <Icon
-          name="arrow_up"
-          height={7}
-          width={12}
-          className={classNames('ff-nlp-input-arrow', {
-            'ff-nlp-input-arrow--down': isIconClick,
-            'ff-nlp-input-arrow--no-label': !showLabel,
-          })}
-          color={iconColor}
-        />
+        <div className="help-icon-container">
+          <Icon
+            name={rightIcon || ''}
+            height={16}
+            width={16}
+            onClick={onHelpIconClick}
+            className={classNames('ff-nlp-input-arrow', {
+              'ff-nlp-input-arrow--down': !isIconClick,
+              'ff-nlp-input-arrow--no-label': !showLabel,
+            })}
+            color={rightIconColor}
+          />
+          <Typography className="help-icon-label" fontSize={10}>
+            Help
+          </Typography>
+        </div>
         <fieldset
           className={classNames('ff-nlp-input-fieldset', {
             'ff-nlp-input-fieldset--no-label': !showLabel,
@@ -319,7 +362,7 @@ const NlpInput = ({
             'ff-nlp-input-fieldset--no-border': !showBorder,
           })}
         >
-          {/* {showLabel && (
+          {showLabel && (
             <legend
               className={classNames('ff-nlp-input-legend', {
                 'ff-nlp-input-legend--default': !isInputFocused,
@@ -328,18 +371,9 @@ const NlpInput = ({
                 'ff-nlp-input-legend--error': errorMsg,
               })}
             >
-              {required && (
-                <Typography
-                  fontSize={8}
-                  color={'var(--$error-light)'}
-                  className="ff-nlp-input-legend--required"
-                >
-                  *
-                </Typography>
-              )}
               {label}
             </legend>
-          )} */}
+          )}
         </fieldset>
       </div>
 
@@ -363,6 +397,8 @@ const NlpInput = ({
               options={options}
               optionZIndex={optionZIndex}
               inputRef={InputRef}
+              webServiceClick={webServiceClick}
+              containerWidth = {containerWidth}
             />,
             document.body
           )}

package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts

@@ -1,15 +1,17 @@
-import { DrowdownPosition, Option } from '../../type';
+import { DrowdownPosition, NlpRenderOption } from '../../types';
 
 export interface NlpDropDownListProps {
   /*
    * Callback function triggered on blur event
    */
   onSelectBlur: () => void;
-
+  leftIcon?: string;
+  webServiceClick?: () => void;
+  containerWidth?:string | number,
   /*
    * Callback function triggered when an option is selected
    */
-  onSelectOptionSelector: (option: Option) => void;
+  onSelectOptionSelector: (option: NlpRenderOption) => void;
 
   /*
    * Position of the dropdown relative to the input
@@ -19,7 +21,7 @@ export interface NlpDropDownListProps {
   /*
    * List of options to display in the dropdown
    */
-  options?: Option[];
+  options?: NlpRenderOption[];
 
   /*
    * Optional z-index for controlling the dropdown's stacking order

package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss

@@ -7,57 +7,51 @@
   bottom: $bottom;
   left: $left;
 }
-
+.ff-nlp-option {
+  color: var(--nlp-option-color);
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
 .ff-nlp-dropdown-wrapper {
   .ff-nlp-options-wrapper {
-    max-height: 160px;
+    max-height: 256px;
     z-index: 100;
     position: absolute;
-    min-width: 100px;
-    border: 1px solid var(--ff-select-option-border-color);
+    border: 1px solid var(--nlp-border-color);
     box-sizing: border-box;
     margin-top: 4px;
     border-radius: 4px;
-    background-color: var(--ff-select-background-color);
-    box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
+    background-color: var(--primary-icon-color);
     overflow: hidden auto;
     display: flex;
     justify-content: space-between;
+    overflow: hidden;
 
-    .ff-nlp-options-wrapper1 {
-      max-height: 160px;
+    .ff-nlp-options-primary-wrapper {
+      max-height: 240px;
       z-index: 100;
-      min-width: auto;
+      min-width: 290px;
       box-sizing: border-box;
+      overflow: scroll;
+      scrollbar-width: none;
+      flex-grow: 1;
     }
-    &::-webkit-scrollbar {
-      width: 4px;
-      height: 12px;
-
-      &-thumb {
-        background-color: var(--ff-select-scroll-thumb-color);
-        border-radius: 4px;
-      }
-
-      &-track {
-        background-color: transparent;
-        border-radius: 4px;
-      }
+    .ff-nlp-options-primary-wrapper::-webkit-scrollbar {
+      display: none;
     }
 
     .ff-nlp-option {
-      width: calc(100% - 18px);
+      width: calc(100% - 10px);
       border: 1px solid transparent;
-      border-radius: 4px;
-      padding: 0px 8px;
+      padding: 0 4px;
       overflow: hidden;
       white-space: nowrap;
+      height: 32px;
       text-overflow: ellipsis;
       cursor: pointer;
-
       &:hover {
-        border-color: var(--ff-select-background-color);
-        background-color: var(--ff-select-option-hover-color);
+        background-color: var(--nlp-hover-color);
       }
     }
 
@@ -65,19 +59,76 @@
       width: calc(100% - 16px);
       margin: 0;
       overflow: hidden;
-      padding: 0px 8px;
+      padding: 0 8px;
       white-space: nowrap;
       text-overflow: ellipsis;
       cursor: not-allowed;
     }
   }
-  .ff-nlp-data {
-    width: 200px;
-    height: 134px;
-
+  .ff-nlp-data-show {
+    width: 380px;
+    height: 235px;
     border: 1px solid transparent;
-    border-radius: 5px;
-    box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
     overflow: scroll;
+    scrollbar-width: none;
+    padding: 8px;
+    border: 1px solid var(--nlp-border-color);
+    position: relative;
+    border-radius: 4px;
+  }
+  .ff-nlp-data-hide {
+    display: none;
+  }
+  .nlp-categories {
+    padding: 0px 2px;
+    gap: 10px;
+    border-radius: 2px;
+    background: var(--nlp-background-color);
+    color: var(--nlp-color);
+  }
+
+  .ff-nlp-data-side-menu {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    color: var(--nlp-option-color);
+  }
+  .ff-nlp-data-show::-webkit-scrollbar {
+    display: none;
   }
+
+  .nlp-details-header {
+    color: var(--status-skipped-text-color);
+    display: flex;
+    flex-direction: column;
+  }
+  .nlp-details {
+    color: var(--status-skipped-text-color);
+  }
+  .ff-nlp-options-wrapper-main {
+    display: flex;
+    flex-direction: column;
+    width: 302px;
+    justify-content: space-between;
+    flex-grow: 1;
+  }
+}
+.ff-nlp {
+  color: var(--nlp-color);
+}
+
+.ff-sg {
+  color: var(--nlp-step-group-color);
+  background-color: var(--nlp-step-group-background);
+}
+
+.ff-pe {
+  color: var(--nlp-pe-color);
+  background-color: var(--nlp-pe-background);
+}
+
+.ff-nlp-web-service-div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }