pixel-react 1.6.8 → 1.7.0

package/src/components/MenuOption/MenuOption.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import MenuOption from './MenuOption';
 import './MenuOption.scss';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useRef } from 'react';
 import Icon from '../Icon';
 
 const meta: Meta<typeof MenuOption> = {
@@ -29,16 +29,16 @@ const meta: Meta<typeof MenuOption> = {
     },
     tooltipPlacement: {
       control: {
-        type: 'text',
-        options: ['top', 'down', 'left', 'right'],  
+        type: 'select',
+        options: ['top', 'down', 'left', 'right'],
       },
       description: 'Placement of the tooltip relative to the button.',
       defaultValue: 'top',
     },
     dropdownPlacement: {
       control: {
-        type: 'text',
-        options: ['top', 'down', 'left', 'right'],  
+        type: 'select',
+        options: ['top', 'down', 'left', 'right'],
       },
       description: 'Placement of the dropdown menu relative to the button.',
       defaultValue: 'down',
@@ -49,7 +49,15 @@ const meta: Meta<typeof MenuOption> = {
 type Story = StoryObj<typeof MenuOption>;
 
 const options = [
-  { label: <div style={{display:'flex', justifyContent:"center", alignItems:"center",gap:"8px"}}>hello <Icon name='edit'/></div>, value: 'opt1', icon: 'success' },
+  {
+    label: (
+      <div>
+        hello <Icon name="edit" />
+      </div>
+    ),
+    value: 'opt1',
+    icon: 'success',
+  },
   { label: 'Option 2', value: 'opt2', icon: 'success' },
   {
     label: 'Delete',
@@ -59,21 +67,31 @@ const options = [
   },
 ];
 
-const handleOptionClick = (option: { label: string|ReactNode }) => {
+const handleOptionClick = (option: { label: string | ReactNode }) => {
   alert(`Option clicked: ${option.label}`);
 };
 
-
 export const ControlledMenuOption: Story = {
   args: {
     iconName: 'more',
     labelName: 'Controlled Menu',
     tooltipTitle: 'Select an option',
-    dropdownPlacement: "top",  
+    dropdownPlacement: 'top',
+  },
+  render: (args) => {
+    const moreRef = useRef<HTMLDivElement>(null);
+    return (
+      <div ref={moreRef}>
+        <MenuOption
+          {...args}
+          options={options}
+          targetRef={moreRef} // Make sure targetRef is passed properly here
+          onOptionClick={handleOptionClick}
+          dropdownPlacement="left" // Dropdown placement for testing
+        />
+      </div>
+    );
   },
-  render: (args) => (
-    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
-  ),
   parameters: {
     docs: {
       description: {
@@ -84,15 +102,24 @@ export const ControlledMenuOption: Story = {
   },
 };
 
-
 export const MenuOptionTop: Story = {
   args: {
     ...ControlledMenuOption.args,
     dropdownPlacement: 'top',
   },
-  render: (args) => (
-    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
-  ),
+  render: (args) => {
+    const moreRef = useRef<HTMLDivElement>(null);
+    return (
+      <div ref={moreRef}>
+        <MenuOption
+          {...args}
+          options={options}
+          targetRef={moreRef}
+          onOptionClick={handleOptionClick}
+        />
+      </div>
+    );
+  },
   parameters: {
     docs: {
       description: {
@@ -102,15 +129,24 @@ export const MenuOptionTop: Story = {
   },
 };
 
-
 export const MenuOptionBottom: Story = {
   args: {
     ...ControlledMenuOption.args,
     dropdownPlacement: 'down',
   },
-  render: (args) => (
-    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
-  ),
+  render: (args) => {
+    const moreRef = useRef<HTMLDivElement>(null);
+    return (
+      <div ref={moreRef}>
+        <MenuOption
+          {...args}
+          options={options}
+          targetRef={moreRef}
+          onOptionClick={handleOptionClick}
+        />
+      </div>
+    );
+  },
   parameters: {
     docs: {
       description: {
@@ -120,15 +156,24 @@ export const MenuOptionBottom: Story = {
   },
 };
 
-
 export const MenuOptionLeft: Story = {
   args: {
     ...ControlledMenuOption.args,
     dropdownPlacement: 'left',
   },
-  render: (args) => (
-    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
-  ),
+  render: (args) => {
+    const moreRef = useRef<HTMLDivElement>(null);
+    return (
+      <div ref={moreRef}>
+        <MenuOption
+          {...args}
+          options={options}
+          targetRef={moreRef}
+          onOptionClick={handleOptionClick}
+        />
+      </div>
+    );
+  },
   parameters: {
     docs: {
       description: {
@@ -141,11 +186,21 @@ export const MenuOptionLeft: Story = {
 export const MenuOptionRight: Story = {
   args: {
     ...ControlledMenuOption.args,
-    dropdownPlacement: 'right',
+    dropdownPlacement: 'right', // Proper dropdown placement
+  },
+  render: (args) => {
+    const moreRef = useRef<HTMLDivElement>(null);
+    return (
+      <div ref={moreRef}>
+        <MenuOption
+          {...args}
+          options={options}
+          targetRef={moreRef} // Properly pass ref to targetRef
+          onOptionClick={handleOptionClick}
+        />
+      </div>
+    );
   },
-  render: (args) => (
-    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
-  ),
   parameters: {
     docs: {
       description: {

package/src/components/MenuOption/MenuOption.tsx

@@ -31,7 +31,7 @@ const Option = ({ option, onClick }: OptionProps) => (
     )}
     <Typography
       as="label"
-      lineHeight='18px'
+      lineHeight="18px"
       color={option.icon === 'delete' ? 'var(--delete-text-color)' : ''}
     >
       {option.label}
@@ -74,13 +74,13 @@ const OptionCard = ({
         };
       case 'down':
         return {
-          top: menuPosition.top + 18,
+          top: menuPosition.top + 20,
           left: menuPosition.left - 4,
         };
       case 'left':
         return {
           top: menuPosition.top - 4,
-          left: menuPosition.left - optionsWidth - 7,
+          left: menuPosition.left - optionsWidth - 8,
         };
       case 'right':
         return {
@@ -127,7 +127,8 @@ const MenuOption = ({
   variant = 'light',
   zIndex = 99,
   dropdownPlacement = 'down',
-  optionCardVariant
+  optionCardVariant,
+  targetRef,
 }: MenuOptionProps) => {
   const [isClicked, setIsClicked] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -136,8 +137,6 @@ const MenuOption = ({
     left: 0,
     height: 0,
     right: 0,
-    rightSpaceAvailable: 0,
-    bottomSpaceAvailable: 0,
   });
 
   const closeDropDown = () => setIsClicked(false);
@@ -154,20 +153,17 @@ const MenuOption = ({
   };
 
   const calculateDims = () => {
-    if (menuRef?.current) {
-      const rect = menuRef.current.getBoundingClientRect();
+    if (targetRef?.current) {
+      const rect = targetRef.current.getBoundingClientRect();
 
       setMenuPosition({
-        top: rect.top,
-        left: rect.left,
+        top: rect.top + window.scrollY,
+        left: rect.left + window.scrollX,
         height: rect.height,
         right: rect.right,
-        rightSpaceAvailable: document.body.clientWidth - rect.right,
-        bottomSpaceAvailable: window.innerHeight - menuRef.current.offsetTop,
       });
     }
   };
-
   return (
     <div className="ff-menu-option-container" ref={menuRef}>
       <Tooltip title={tooltipTitle} placement={tooltipPlacement}>

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/Modal/types.ts

@@ -34,7 +34,7 @@ export interface ModalProps {
   /***Content to be displayed inside the modal */
   children: ReactNode;
   isFooterDisplayed: boolean;
-  customWidth: string;
+  customWidth?: string;
   customHeight?: string;
   zIndex?: number;
   boxShadow?: string;

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;
 }