pixel-react 1.6.9 → 1.7.1

package/src/components/MenuOption/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
 
 interface OptionClick {
   /**
@@ -6,7 +6,7 @@ interface OptionClick {
    * @type {string}
    * @required
    */
-  label: string |ReactNode;
+  label: string | ReactNode;
 
   /**
    * The value(s) associated with the option, which can be a single string or an array of strings.
@@ -208,6 +208,7 @@ interface MenuOptionProps {
    * @optional
    */
   optionCardVariant?: 'primary';
+  targetRef?: React.RefObject<HTMLElement>;
 }
 
 interface OptionProps {

package/src/components/MiniModal/MiniModal.scss

@@ -117,7 +117,6 @@
     background: var(--ff-mini-modal-border);
     position: relative;
     max-height: fit-content;
-    padding: 4px;
     width: 100%;
     margin: 0 0 0 -5px;
     height: 100%;

package/src/components/MiniModal/MiniModal.stories.tsx

@@ -55,7 +55,12 @@ const BasicModalComponent = () => {
             isOverlay: true,
             zIndexOverlay: 99,
           }}
-          modalProperties={{ width: 300, height: 180, left: 180, top: 250 }}
+          modalProperties={{
+            width: 300,
+            height: 180,
+            left: 180,
+            top: 250,
+          }}
           headerProps={
             <>
               <Typography as="p">Modal 1</Typography>

package/src/components/MiniModal/MiniModal.tsx

@@ -52,6 +52,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       boxShadow: modalBoxShadow,
       left: modalLeft,
       top: modalTop,
+      padding: modalPadding,
     } = modalProperties || {};
 
     const {
@@ -300,6 +301,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
                 modalBoxShadow ??
                 '0px 4px 8px var(--ff-mini-modal-arrow-shadow)'
               }`,
+              padding: `${modalPadding ?? 4}px`,
             }}
           >
             {headerProps ? (
@@ -312,7 +314,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
                 <hr />
               </Typography>
             )}
-            <div>{childContent}</div>
+            {childContent}
             {footerContent ? (
               <Typography as="footer">{footerContent}</Typography>
             ) : isIconModel ? (

package/src/components/MiniModal/types.ts

@@ -7,6 +7,7 @@ interface ModalDimensions {
   boxShadow?: string;
   left?: number;
   top?: number;
+  padding?: number;
 }
 export interface MiniEditModalProps {
   /**

package/src/components/MultiSelect/Dropdown.scss

@@ -10,11 +10,11 @@
   box-sizing: border-box;
   margin-block: 4px;
   max-height: 160px;
-
   .ff-multiselect-options-wrapper {
     max-height: 128px;
     overflow-y: auto;
     border-radius: 2px;
+    overflow-x: hidden;
     &::-webkit-scrollbar {
       width: 4px;
       height: 40px;
@@ -37,11 +37,10 @@
   }
 
   .no-options {
-    @extend .fontMd;
-    color: var(--pop-up-background-blur);
+    color: var(--ff-select-text-color);
     text-align: center;
     margin: 0;
-    padding: 10px;
+    padding: 7px;
     line-height: 12px;
   }
   .dropdown-option-container {

package/src/components/MultiSelect/Dropdown.tsx

@@ -10,6 +10,7 @@ import Checkbox from '../Checkbox';
 import Tooltip from '../Tooltip';
 import { truncateText } from '../../utils/truncateText/truncateText';
 import { getLabel, getValue } from '../../utils/getSelectOptionValue/getSelectOptionValue';
+import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
 
 const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
   (
@@ -21,11 +22,12 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       zIndex,
       withSelectButton,
       labelAccessor='label',
-      valueAccessor='value'
+      valueAccessor='value',
+      loadMoreOptions,
     },
     ref
   ) => {
-    const filteredOptions = options
+      const filteredOptions = options
       ? options.filter((option) =>
           getValue(option, valueAccessor)
             ?.toLowerCase()
@@ -70,6 +72,22 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
 
     const themeContext = useContext(ThemeContext);
     const currentTheme = themeContext?.currentTheme;
+
+    useIntersectionObserver(['ff-multiselect-pagination'], {
+      root: document.getElementById('ff-multiselect-options-wrapper'),
+      rootMargin: '0px',
+      threshold: 0.1,  
+      onIntersect: (entry, _observer) => {
+        if (entry.isIntersecting) {
+          if (loadMoreOptions) {
+            loadMoreOptions();
+          }
+
+    
+        }
+      },
+    });
+
     return (
       <div
         role="listbox"
@@ -87,13 +105,17 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
         <div
           className="ff-multiselect-options-wrapper"
           style={{ maxHeight: withSelectButton ? '128px' : '160px' }}
+
+          id="ff-multiselect-options-wrapper"
         >
           {filteredOptions.length === 0 ? (
-            <div className="dropdown-option-container ">
-              <p className="no-options">No Option</p>
-            </div>
+              <Typography textAlign='center' as='p' className='no-options'>
+                No Result Found
+              </Typography>
+           
           ) : (
-            filteredOptions.map((info) => (
+            <>
+           { filteredOptions.map((info) => (
               <div
                 role="option"
                 className={`dropdown-option-container`}
@@ -126,7 +148,12 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
                   }
                 />
               </div>
-            ))
+            ))}
+
+            <div id="ff-multiselect-pagination" >
+              </div>
+            </>
+
           )}
         </div>
         {withSelectButton && filteredOptions.length > 0 && (

package/src/components/MultiSelect/MultiSelect.scss

@@ -203,6 +203,7 @@
       @include hovered-styles(var(--error-light));
     }
     &--disabled {
+      opacity: 0.5;
       pointer-events: none;
 
       border: 1px solid var(--multi-select-border);

package/src/components/MultiSelect/MultiSelect.tsx

@@ -78,6 +78,7 @@ const MultiSelect = ({
   labelAccessor = 'label',
   valueAccessor = 'value',
   withSelectButton = variant === 'machines' ? true : false,
+  loadMoreOptions = () => { },
   onEnter = () => { },
 }: MultiSelectProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -463,6 +464,8 @@ const MultiSelect = ({
                 zIndex={zIndex}
                 withSelectButton={withSelectButton}
                 labelAccessor={labelAccessor}
+                valueAccessor={valueAccessor}
+                loadMoreOptions={loadMoreOptions}
               />,
               document.body
             )}

package/src/components/MultiSelect/MultiSelectTypes.ts

@@ -41,7 +41,9 @@ interface MultiSelectProps {
 
   valueAccessor?: string;
 
-  onEnter?:(newOption:string)=>void
+  onEnter?:(newOption:string)=>void;
+
+  loadMoreOptions?: () =>void;
 }
 
 export { Option, MultiSelectProps };

package/src/components/MultiSelect/dropdownTypes.ts

@@ -16,4 +16,6 @@ export interface DropdownProps {
   onSelect?: () => void;
   labelAccessor?: string;
   valueAccessor?: string;
+  loadMoreOptions?: () => void;
+  
 }

package/src/components/NLPInput/NLPInput.scss

@@ -15,13 +15,11 @@
 
 @mixin opacity-style($opacity: 1, $color: null, $border-color-arg: null) {
   opacity: $opacity;
-
   @if $color {
-    color: $color;
+    color: var(--nlp-input-placeholder-color);
   }
-
   @if $border-color-arg {
-    border-color: $border-color-arg;
+    border-color: var(--nlp-border-color);
   }
 }
 
@@ -29,22 +27,20 @@
   position: relative;
 
   .ff-nlp-input {
-    @extend .fontSm;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     min-height: 32px;
-    min-width: 489px;
+    min-width: 482px;
     display: flex;
     align-items: end;
     position: relative;
-
     &-fieldset {
       margin: 0;
       padding: 25px 0px 0px 8px;
       border: 1px solid transparent;
       box-sizing: border-box;
-      height: 100%;
+      height: 32px;
       width: 100%;
       border-radius: 4px;
       display: block;
@@ -81,7 +77,6 @@
         @extend .font-size-8;
         padding: 0 2px;
         letter-spacing: 0.5px;
-
         &--default {
           @include transition-all(0.3s);
           opacity: 0;
@@ -106,11 +101,10 @@
       }
     }
 
-    &-input {
-      @extend .fontSm;
+    &-container {
       @include absolute-position(6px, auto, auto, auto);
       width: calc(100% - 38px);
-      min-height: calc(100% - 8px);
+      height: 32px;
       padding: 0 28px 0 8px;
       border-radius: 4px;
       border: 1px solid transparent;
@@ -118,10 +112,12 @@
       background: transparent;
       outline: none;
       color: var(--ff-nlp-input-text-color);
+      text-indent: 22px;
 
       &:hover {
         ~ .ff-nlp-input-label {
-          color: var(--ff-nlp-input-text-hover-color);
+          color: var(--nlp-input-placeholder-color);
+          padding-left: 26px;
         }
       }
 
@@ -133,7 +129,7 @@
         @include opacity-style(1, null, var(--ff-nlp-input-border-color));
 
         &:hover {
-          border-color: var(--ff-nlp-input-text-color);
+          border-color: var(--nlp-input-placeholder-color);
 
           ~ .ff-nlp-input-fieldset--option {
             border-color: var(--ff-nlp-input-text-color);
@@ -208,7 +204,6 @@
       }
 
       &--active {
-        @extend .font-size-8;
         @include transition-all;
         opacity: 0;
         transform: translateY(-150%);
@@ -225,17 +220,12 @@
       top: 60%;
       height: 100%;
       right: 10px;
-      transform: rotateX(180deg) translateY(50%);
+      transform: rotateX(0deg) translateY(-50%);
       cursor: pointer;
 
       &--no-label {
         top: 50%;
       }
-
-      &--down {
-        transform: rotateX(0deg) translateY(-50%);
-        z-index: 101;
-      }
     }
   }
 
@@ -243,4 +233,70 @@
     @include absolute-position(auto, auto, -14px, 12px);
     white-space: nowrap;
   }
+  .ff-nlp-input-label {
+    display: flex;
+    align-items: center;
+    padding-left: 26px;
+    gap: 4px;
+  }
+  .ff-nlp-help_icon {
+    position: absolute;
+    bottom: 2px;
+    left: 8px;
+    width: 30px;
+    height: 30px;
+    z-index: 100;
+    cursor: pointer;
+  }
+}
+.ff-nlp-input-arrow {
+  z-index: 111;
+}
+.icon-container {
+  position: relative;
+  display: inline-block;
+}
+
+.icon-label {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-55%);
+  transform: translateY(-145%);
+  margin-bottom: 5px;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
+  background-color: var(--tooltip-bg-color);
+  color: var(--tooltip-text-color);
+  padding: 2px 5px;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+
+.icon-container:hover .icon-label {
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0s;
+}
+
+.help-icon-label {
+  position: absolute;
+  bottom: 80%;
+  left: 96%;
+  transform: translateX(-50%);
+  margin-bottom: 5px;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
+  background-color: var(--tooltip-bg-color);
+  color: var(--tooltip-text-color);
+  padding: 2px 5px;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+.help-icon-container:hover .help-icon-label {
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0s;
 }

package/src/components/NLPInput/NlpInput.stories.tsx

@@ -1,7 +1,7 @@
+import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import NlpInput from './NlpInput';
-// import { useState } from 'react';
-// import { Option } from '../NLPInput/type';
+import { nlpList } from './sampleData';
 
 const meta: Meta<typeof NlpInput> = {
   title: 'Components/NlpInput',
@@ -14,74 +14,48 @@ const meta: Meta<typeof NlpInput> = {
 
 type Story = StoryObj<typeof NlpInput>;
 
-export const Primary: Story = {
+// Refactor primaryNlp to utilize args for control panel
+export const PrimaryNlp: Story = {
   args: {
-    label: 'NLP Input',
-    optionsList: [
-      {
-        desc: 'randomNumber',
-        displayName: 'randomNumber',
-        failMessage: 'randomNumber has failed',
-        isNonPE: false,
-        name: 'randomNumber',
-        nlpName: 'randomNumber',
-        nlpType: 'PROGRAM_ELEMENTS',
-        packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
-        parentId: 'PKJ1017',
-        passMessage: 'randomNumber has passed',
-        programElementId: 'PRG_ELE1001',
-        projectId: 'PJT1001',
-        returnType: 'java.lang.Integer',
-        searchName: 'randomNumber',
-        stepInputs: [{}], // Placeholder, replace with actual data if needed
-        toolTip: 'Logics : randomNumber',
-        _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
-        _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
-      },
-      {
-        desc: 'randomNumber',
-        displayName: 'randomNumber',
-        failMessage: 'randomNumber has failed',
-        isNonPE: false,
-        name: 'randomNumber',
-        nlpName: 'randomNumber',
-        nlpType: 'PROGRAM_ELEMENTS',
-        packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
-        parentId: 'PKJ1017',
-        passMessage: 'randomNumber has passed',
-        programElementId: 'PRG_ELE1001',
-        projectId: 'PJT1001',
-        returnType: 'java.lang.Integer',
-        searchName: 'randomNumber',
-        stepInputs: [
-          { name: 'Range Of The Number', type: 'java.lang.Integer' },
-        ], // Placeholder, replace with actual data if needed
-        toolTip: 'Logics : randomNumber',
-        _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
-        _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
-      },
-      {
-        description: '',
-        displayName: 'Open Browser 1',
-        failMessage: 'Open Browser is failed',
-        imported: false,
-        libraryId: 'LIB1002',
-        name: 'Open Browser',
-        nlpName: 'Open Browser',
-        nlpType: 'STEP_GROUP',
-        parentId: 'STP_GRP1001',
-        passMessage: 'Open Browser is passed',
-        path: '/Root/Open and Close Browser/Open Browser',
-        platform: 'Web',
-        projectId: 'PJT1001',
-        returnType: 'void',
-        searchName: 'Open Browser',
-        stepInputs: [], // Empty array for step inputs
-        toolTip: 'Open and Close Browser : Open Browser : Web',
-        _class: 'com.tyss.optimize.data.models.db.model.StepGroupNlp',
-        _id: 'SG_NLP1001',
-      },
-    ],
+    label: 'Search NLP',
+    leftIcon: 'ai_search',
+    rightIcon: 'help_icon',
+    rightIconColor: 'var(--nlp-color)',
+    containerWidth: '1000px',
+    value: '',
+    optionsList: nlpList,
+  },
+  render: (args) => {
+    const [inputValue, setInputValue] = useState(args.value);
+    const [optionList, setOptionList] = useState(args.optionsList);
+
+    const handleChange = (e) => {
+      setInputValue(e.target.value);
+      setOptionList(nlpList);
+    };
+
+    const handleSelect = (e) => {
+      setInputValue(e.displayName);
+    };
+
+    return (
+      <NlpInput
+        {...args}
+        value={inputValue}
+        onChange={handleChange}
+        onSelect={handleSelect}
+        optionsList={optionList}
+        webServiceClick={() => {
+          alert('webServiceClick!');
+        }}
+        onHelpIconClick={() => {
+          alert('Help icon clicked!!');
+        }}
+        aiIconClick={() => {
+          alert('aiIconClick!');
+        }}
+      />
+    );
   },
 };
 
@@ -93,44 +67,4 @@ export const Disable: Story = {
   },
 };
 
-// export const WithInitialValue: Story = {
-//   args: {
-//     label: 'NLP Input',
-//     selectedOption: { label: 'Option 2', value: '2' },
-//     optionsList: [
-//       { label: 'NLP 1', value: '1' },
-//       { label: 'NLP 2', value: '2' },
-//       { label: 'NLP 3', value: '3' },
-//     ],
-//   },
-// };
-
-// export const OptionSelection: Story = {
-//   render: () => {
-//     const optionsList = [
-//       { label: 'NLP 1', value: '1' },
-//       { label: 'NLP 2', value: '2' },
-//       { label: 'NLP 3', value: '3' },
-//     ];
-
-//     const [selectedOption, setSelectedOption] = useState<Option>({
-//       label: 'NLP 2',
-//       value: '2',
-//     });
-
-//     const handleChange = (option: Option) => {
-//       setSelectedOption(option);
-//     };
-
-//     return (
-//       <NlpInput
-//         label="NLP Input"
-//         optionsList={optionsList}
-//         selectedOption={selectedOption}
-//         onChange={handleChange}
-//       />
-//     );
-//   },
-// };
-
 export default meta;