pixel-react 1.4.5 → 1.4.7

package/src/components/MachineInputField/MachineInputField.scss

@@ -9,6 +9,7 @@
     height: 100%;
     width: 100%;
     border: 1px solid var(--ff-machine-input-field-border-color);
+    padding: 0 8px 0 0;
     border-radius: 4px;
     display: flex;
     align-items: center;
@@ -17,9 +18,10 @@
     .ff-machine-icon-text-wrapper,
     .ff-machine-icon-text-wrapper-reverse {
       display: flex;
+      align-items: center;
 
       .ff-machine-icon {
-        margin-right: 8px;
+        margin-left: 4px;
       }
     }
     
@@ -39,6 +41,6 @@
     background-color: var(--ff-machine-input-field-border-color);
     border-radius: 4px;
     padding: 1px 2px;
-    height: 10px;
+    height: 12px;
   }
 }

package/src/components/MachineInputField/MachineInputField.tsx

@@ -13,6 +13,7 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
       runCount = 0,
       className = '',
       contentReverse = false,
+      onClick = () => {},
     },
     ref
   ) => {
@@ -28,6 +29,7 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
         ref={ref}
         style={{ width: width }}
         className={classNames('ff-machine-input-field-wrapper', className)}
+        onClick={onClick}
       >
         <Typography
           as="span"

package/src/components/MachineInputField/types.ts

@@ -9,4 +9,5 @@ export interface MachineInputFieldProps {
   runCount: number;
   className?: string;
   contentReverse?: boolean;
+  onClick?: () => void;
 }

package/src/components/MenuOption/MenuOption.scss

@@ -47,37 +47,34 @@
 .ff-option-card {
   position: fixed;
   margin: 4px;
-
-  .ff-option-wrapper {
-    border: 1px solid var(--option-card-border-color);
-    background: var(--option-card-bg-color);
-    overflow: hidden;
-    min-height: 32px;
-    min-width: 112px;
-    width: max-content;
-    border-radius: 4px;
-    .ff-options {
-      @extend .fontSm;
+  border: 1px solid var(--option-card-border-color);
+  background: var(--option-card-bg-color);
+  overflow: hidden;
+  min-height: 32px;
+  min-width: 112px;
+  width: max-content;
+  border-radius: 4px;
+  .ff-options {
+    @extend .fontSm;
+    cursor: pointer;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    gap: 8px;
+    &:hover {
+      background-color: var(--hover-color);
+    }
+    label {
       cursor: pointer;
-      border-radius: 3px;
-      display: flex;
-      align-items: center;
-      padding: 8px;
-      gap: 8px;
-      &:hover {
-        background-color: var(--hover-color);
-      }
-      label {
-        cursor: pointer;
-      }
     }
+  }
 
-    .ff-disable-option {
-      opacity: 0.5;
+  .ff-disable-option {
+    opacity: 0.5;
+    cursor: no-drop;
+    label {
       cursor: no-drop;
-      label {
-        cursor: no-drop;
-      }
     }
   }
 }

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

@@ -13,28 +13,33 @@ const meta: Meta<typeof MenuOption> = {
   argTypes: {
     iconName: {
       control: 'text',
+      description: 'Name of the icon to display in the button.',
       defaultValue: 'more',
     },
     labelName: {
       control: 'text',
-      defaultValue: 'Controlled Menu',
+      description: 'Label text displayed beside the icon.',
+      defaultValue: 'Menu',
     },
     tooltipTitle: {
       control: 'text',
+      description: 'Tooltip text displayed on hover.',
       defaultValue: 'Select an option',
     },
     tooltipPlacement: {
       control: {
-        type: 'select',
-        options: ['top', 'down', 'left', 'right'],
+        type: 'text',
+        options: ['top', 'down', 'left', 'right'],  
       },
+      description: 'Placement of the tooltip relative to the button.',
       defaultValue: 'top',
     },
     dropdownPlacement: {
       control: {
-        type: 'select',
-        options: ['top', 'down', 'left', 'right'],
+        type: 'text',
+        options: ['top', 'down', 'left', 'right'],  
       },
+      description: 'Placement of the dropdown menu relative to the button.',
       defaultValue: 'down',
     },
   },
@@ -57,46 +62,96 @@ const handleOptionClick = (option: { label: string }) => {
   alert(`Option clicked: ${option.label}`);
 };
 
-export const ControlledMenuOptionTop: Story = {
+
+export const ControlledMenuOption: Story = {
+  args: {
+    iconName: 'more',
+    labelName: 'Controlled Menu',
+    tooltipTitle: 'Select an option',
+    dropdownPlacement: "top",  
+  },
   render: (args) => (
-    <MenuOption
-      iconName="more"
-      labelName={args.labelName}
-      options={options}
-      tooltipTitle={args.tooltipTitle}
-      tooltipPlacement={args.tooltipPlacement}
-      dropdownPlacement="top" // Override dropdown position to top
-      onOptionClick={handleOptionClick}
-    />
+    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
   ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A controlled `MenuOption` with customizable tooltip and dropdown placement.',
+      },
+    },
+  },
 };
 
-export const ControlledMenuOptionBottom: Story = {
+
+export const MenuOptionTop: Story = {
+  args: {
+    ...ControlledMenuOption.args,
+    dropdownPlacement: 'top',
+  },
   render: (args) => (
-    <MenuOption
-      iconName="more"
-      labelName={args.labelName}
-      options={options}
-      tooltipTitle={args.tooltipTitle}
-      tooltipPlacement={args.tooltipPlacement}
-      dropdownPlacement="down"
-      onOptionClick={handleOptionClick}
-    />
+    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dropdown menu positioned above the button.',
+      },
+    },
+  },
 };
 
-export const ControlledMenuOptionRight: Story = {
+
+export const MenuOptionBottom: Story = {
+  args: {
+    ...ControlledMenuOption.args,
+    dropdownPlacement: 'down',
+  },
   render: (args) => (
-    <MenuOption
-      iconName="more"
-      labelName={args.labelName}
-      options={options}
-      tooltipTitle={args.tooltipTitle}
-      tooltipPlacement={args.tooltipPlacement}
-      dropdownPlacement="right"
-      onOptionClick={handleOptionClick}
-    />
+    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dropdown menu positioned below the button.',
+      },
+    },
+  },
+};
+
+
+export const MenuOptionLeft: Story = {
+  args: {
+    ...ControlledMenuOption.args,
+    dropdownPlacement: 'left',
+  },
+  render: (args) => (
+    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dropdown menu positioned to the left of the button.',
+      },
+    },
+  },
+};
+
+export const MenuOptionRight: Story = {
+  args: {
+    ...ControlledMenuOption.args,
+    dropdownPlacement: 'right',
+  },
+  render: (args) => (
+    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dropdown menu positioned to the right of the button.',
+      },
+    },
+  },
 };
 
 export default meta;

package/src/components/MenuOption/MenuOption.tsx

@@ -45,24 +45,26 @@ const OptionCard = ({
   menuRef,
   closeDropdown,
   zIndex,
-  dropdownPosition,
+  dropdownPlacement,
 }: OptionCardProps) => {
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
   const [optionsHeight, setOptionsHeight] = useState(0);
+  const [optionsWidth, setOptionsWidth] = useState(0);
   const optionCardRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (optionCardRef?.current) {
       const rect = optionCardRef?.current?.getBoundingClientRect();
       setOptionsHeight(rect?.height);
+      setOptionsWidth(rect?.width);
     }
   }, []);
 
   useClickOutside(menuRef, closeDropdown, [optionCardRef]);
 
   const style = (() => {
-    switch (dropdownPosition) {
+    switch (dropdownPlacement) {
       case 'top':
         return {
           top: menuPosition.top - optionsHeight - 7,
@@ -76,12 +78,12 @@ const OptionCard = ({
       case 'left':
         return {
           top: menuPosition.top,
-          right: menuPosition.rightSpaceAvailable + 35,
+          left: menuPosition.left - optionsWidth - 7,
         };
       case 'right':
         return {
           top: menuPosition.top,
-          left: menuPosition.rightSpaceAvailable + 35,
+          left: menuPosition.left + 20,
         };
       default:
         return {
@@ -94,14 +96,12 @@ const OptionCard = ({
   return createPortal(
     <div
       className={classNames('ff-option-card', currentTheme)}
-      ref={optionCardRef}
       style={{ ...style, zIndex }}
+      ref={optionCardRef}
     >
-      <div className="ff-option-wrapper">
-        {options.map((opt) => (
-          <Option key={opt.label} option={opt} onClick={onClick} />
-        ))}
-      </div>
+      {options.map((opt) => (
+        <Option key={opt.label} option={opt} onClick={onClick} />
+      ))}
     </div>,
     document.body
   );
@@ -126,18 +126,18 @@ const MenuOption = ({
   const menuRef = useRef<HTMLDivElement>(null);
   const [menuPosition, setMenuPosition] = useState({
     top: 0,
-    bottom: 0,
+    left: 0,
     height: 0,
-    fromBottom: 0,
+    right: 0,
     rightSpaceAvailable: 0,
+    bottomSpaceAvailable: 0,
   });
-  useEffect(() => {
-    calculateDims();
-  });
+
   const closeDropDown = () => setIsClicked(false);
 
   const onIconClickHandler = () => {
     onClick();
+    calculateDims();
     setIsClicked((prev) => !prev);
   };
 
@@ -152,10 +152,11 @@ const MenuOption = ({
 
       setMenuPosition({
         top: rect.top,
+        left: rect.left,
         height: rect.height,
+        right: rect.right,
         rightSpaceAvailable: document.body.clientWidth - rect.right,
-        bottom: rect.bottom,
-        fromBottom: window.innerHeight - rect.bottom,
+        bottomSpaceAvailable: window.innerHeight - menuRef.current.offsetTop,
       });
     }
   };
@@ -200,7 +201,7 @@ const MenuOption = ({
           menuRef={menuRef}
           closeDropdown={closeDropDown}
           zIndex={zIndex}
-          dropdownPosition={dropdownPlacement}
+          dropdownPlacement={dropdownPlacement}
         />
       )}
     </div>

package/src/components/MenuOption/types.ts

@@ -90,7 +90,7 @@ interface OptionCardProps {
    * @type {dropdownPosition}
    * @optional
    */
-  dropdownPosition?: 'top' | 'down' | 'left' | 'right';
+  dropdownPlacement?: 'top' | 'down' | 'left' | 'right';
 }
 
 interface MenuOptionProps {

package/src/components/Modal/Modal.stories.tsx

@@ -26,7 +26,7 @@ export const DefaultModalStory: Story = {
     footerContent: <Button variant="primary" label="continue" />,
     customWidth: '660px',
     customHeight: 'auto',
-    boxShadow:'0px 1px 4px 0px #FFC600'
+    border: '1px solid #E79B0866',
   },
 };
 
@@ -58,7 +58,7 @@ export const Controlled: Story = {
             footerContent={<Button variant="primary" label="continue" />}
             customWidth="660px"
             customHeight="auto"
-            boxShadow='0px 1px 4px 0px #FFC600'
+            border="1px solid #E79B0866"
           />
         )}
       </>

package/src/components/Modal/Modal.tsx

@@ -22,7 +22,9 @@ const Modal: React.FC<ModalProps> = ({
   customHeight = 'auto',
   children,
   zIndex = 999,
-  boxShadow = '0px 1px 4px 0px #FFC600',
+  boxShadow = '',
+  border = '',
+  background='',
 }) => {
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -58,7 +60,9 @@ const Modal: React.FC<ModalProps> = ({
       <div
         style={{
           boxShadow: boxShadow,
-          borderRadius:  '12px' ,
+          border: border,
+          borderRadius: '12px',
+          background: background,
         }}
         className="ff-modal-container"
       >

package/src/components/Modal/modal.scss

@@ -12,9 +12,8 @@
 }
 
 .ff-modal-container {
-  box-shadow: 0px 1px 4px 0px #ffc600;
-  border-radius: 12px; // Ensures box-shadow respects the rounded corners
-  overflow: hidden; // Prevents content overflow
+  border-radius: 12px;
+  overflow: hidden;
 }
 
 .ff-modal-content {

package/src/components/Modal/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
 
 export interface ModalProps {
   isOpen: boolean;
@@ -37,5 +37,7 @@ export interface ModalProps {
   customWidth: string;
   customHeight?: string;
   zIndex?: number;
-  boxShadow:string;
+  boxShadow?: string;
+  border?: string;
+  background?: string;
 }

package/src/components/MultiSelect/MultiSelect.scss

@@ -79,59 +79,64 @@
           top: -6px;
           pointer-events: none;
         }
-        .ff-multiselect-chip-container {
+        .ff-multiselect-chip-parent-container{
+          width: 100%;
           display: flex;
-          flex-wrap: wrap;
-          align-items: center;
-          gap: 5px;
-          .ff-multiselect-chip {
-            @include flex-center;
-            box-sizing: border-box;
-            border: 0.5px solid #f1ebf2;
-            padding: 0 1px 0 4px;
-            gap: 4px;
-            height: 16px;
-            border-radius: 15px;
-            .ff-multiselect-chip-label {
-              @extend .fontXs;
-              line-height: 14px;
-              color: var(--tooltip-bg-color);
-              &.label-padding {
-                padding: 5px 2px;
+          justify-content: space-between;
+          .ff-multiselect-chip-container {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: 5px;
+            .ff-multiselect-chip {
+              @include flex-center;
+              box-sizing: border-box;
+              border: 0.5px solid #f1ebf2;
+              padding: 0 1px 0 4px;
+              gap: 4px;
+              height: 16px;
+              border-radius: 15px;
+              .ff-multiselect-chip-label {
+                @extend .fontXs;
+                line-height: 14px;
+                color: var(--tooltip-bg-color);
+                &.label-padding {
+                  padding: 5px 2px;
+                }
+              }
+              .ff-multiselect-chip-close-icon {
+                color: var(--brand-color);
+                cursor: pointer;
               }
             }
-            .ff-multiselect-chip-close-icon {
-              color: var(--brand-color);
-              cursor: pointer;
-            }
-          }
-          .ff-multiselect-input-container {
-            flex: 1;
-            min-width: 20px;
-            input {
-              width: 100%;
-              min-width: 30px;
-              max-width: calc(100% - 0px);
-              padding: 2px;
-              box-sizing: border-box;
-              border: none;
-              font-size: 12px;
-              &:focus {
-                outline: none;
+            .ff-multiselect-input-container {
+              flex: 1;
+              min-width: 20px;
+              input {
+                width: 100%;
+                min-width: 30px;
+                max-width: calc(100% - 0px);
+                padding: 2px;
+                box-sizing: border-box;
+                border: none;
+                font-size: 12px;
+                &:focus {
+                  outline: none;
+                }
               }
             }
           }
+          .ff-multiselect-more-chip {
+            display: flex;
+            align-items: center;
+            width: 16px;
+            @extend .fontSm;
+            font-weight: 600;
+            line-height: 16px;
+            color: var(--brand-color);
+          }
         }
       }
-      .ff-multiselect-more-chip {
-        display: flex;
-        align-items: center;
-        width: 16px;
-        @extend .fontSm;
-        font-weight: 600;
-        line-height: 16px;
-        color: var(--brand-color);
-      }
       &__toggle {
         display: flex;
         align-items: center;

package/src/components/MultiSelect/MultiSelect.tsx

@@ -355,7 +355,7 @@ const MultiSelect = ({
             )}
 
             {!withSelectButton && (
-              <div>
+              <div className='ff-multiselect-chip-parent-container'>
                 <div className="ff-multiselect-chip-container">
                   {displayCount ? (
                     <>

package/src/components/Select/components/Dropdown.tsx

@@ -1,4 +1,4 @@
-import { type FC, useContext, useRef } from 'react';
+import React, { type FC, useContext, useRef } from 'react';
 import { dropdownDefaultCSSData, DropdownProps } from './types';
 import './Dropdown.scss';
 import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
@@ -65,6 +65,23 @@ const Dropdown: FC<DropdownProps> = ({
     };
   };
 
+  const getOptionLabel = (label: any) => {
+    if (React.isValidElement(label)) {
+      console.log('test');
+      return label;
+    }
+    console.log('test112');
+    return (
+      <Typography
+        as="div"
+        lineHeight="30px"
+        color="var(--ff-select-text-color)"
+      >
+        {label}
+      </Typography>
+    );
+  };
+
   return (
     <div
       className={classNames('ff-select-dropdown-wrapper', currentTheme)}
@@ -73,10 +90,7 @@ const Dropdown: FC<DropdownProps> = ({
     >
       {!checkEmpty(options) ? (
         options.map((option) => (
-          <Typography
-            key={ffid()}
-            as="div"
-            lineHeight="30px"
+          <div
             className={classNames(
               'ff-select-dropdown-option',
               {
@@ -85,14 +99,14 @@ const Dropdown: FC<DropdownProps> = ({
               },
               currentTheme
             )}
-            color="var(--ff-select-text-color)"
+            key={ffid()}
             onClick={() => {
               if ('disable' in option && option['disable']) return;
               onSelectOptionSelector(option);
             }}
           >
-            {getLabel(option, labelAccessor)}
-          </Typography>
+            {getOptionLabel(getLabel(option, labelAccessor))}
+          </div>
         ))
       ) : (
         <Typography