pixel-react 1.4.2 → 1.4.4

package/src/components/MenuOption/MenuOption.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react';
+import { useState, useRef, useContext, useEffect } from 'react';
 import './MenuOption.scss';
 import Icon from '../Icon';
 import classNames from 'classnames';
@@ -9,8 +9,10 @@ import {
   MenuOptionProps,
   OptionClick,
 } from './types';
-import useClickOutside from '../../hooks/useClickOutside';
 import Typography from '../Typography';
+import { createPortal } from 'react-dom';
+import { ThemeContext } from '../ThemeProvider/ThemeProvider';
+import useClickOutside from '../../hooks/useClickOutside';
 
 const Option = ({ option, onClick }: OptionProps) => (
   <div
@@ -19,7 +21,14 @@ const Option = ({ option, onClick }: OptionProps) => (
     })}
     onClick={() => !option.disable && onClick(option)}
   >
-    {option.icon && <Icon name={option.icon} height={16} width={16} />}
+    {option.icon && (
+      <Icon
+        name={option.icon}
+        color={option.iconColor}
+        height={16}
+        width={16}
+      />
+    )}
     <Typography
       as="label"
       color={option.icon === 'delete' ? 'var(--delete-text-color)' : ''}
@@ -29,13 +38,72 @@ const Option = ({ option, onClick }: OptionProps) => (
   </div>
 );
 
-const OptionCard = ({ options, onClick, styles }: OptionCardProps) => {
-  return (
-    <div className="ff-option-card" style={styles}>
-      {options.map((opt) => (
-        <Option key={opt.label} option={opt} onClick={onClick} />
-      ))}
-    </div>
+const OptionCard = ({
+  options,
+  onClick,
+  menuPosition,
+  menuRef,
+  closeDropdown,
+  zIndex,
+  dropdownPosition,
+}: OptionCardProps) => {
+  const themeContext = useContext(ThemeContext);
+  const currentTheme = themeContext?.currentTheme;
+  const [optionsHeight, setOptionsHeight] = useState(0);
+  const optionCardRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (optionCardRef?.current) {
+      const rect = optionCardRef?.current?.getBoundingClientRect();
+      setOptionsHeight(rect?.height);
+    }
+  }, []);
+
+  useClickOutside(menuRef, closeDropdown, [optionCardRef]);
+
+  const style = (() => {
+    switch (dropdownPosition) {
+      case 'top':
+        return {
+          top: menuPosition.top - optionsHeight - 7,
+          left: menuPosition.rightSpaceAvailable + 12,
+        };
+      case 'down':
+        return {
+          top: menuPosition.bottom,
+          left: menuPosition.rightSpaceAvailable + 12,
+        };
+      case 'left':
+        return {
+          top: menuPosition.top,
+          right: menuPosition.rightSpaceAvailable + 35,
+        };
+      case 'right':
+        return {
+          top: menuPosition.top,
+          left: menuPosition.rightSpaceAvailable + 35,
+        };
+      default:
+        return {
+          top: menuPosition.bottom,
+          left: menuPosition.rightSpaceAvailable + 12,
+        };
+    }
+  })();
+
+  return createPortal(
+    <div
+      className={classNames('ff-option-card', currentTheme)}
+      ref={optionCardRef}
+      style={{ ...style, zIndex }}
+    >
+      <div className="ff-option-wrapper">
+        {options.map((opt) => (
+          <Option key={opt.label} option={opt} onClick={onClick} />
+        ))}
+      </div>
+    </div>,
+    document.body
   );
 };
 
@@ -45,18 +113,27 @@ const MenuOption = ({
   tooltipTitle,
   tooltipPlacement = 'bottom',
   options = [],
-  dropdownPlacement = 'down',
   onClick = () => {},
   onOptionClick = () => {},
   iconButtonSize = 20,
   iconButtonBorderRadius = 7,
   iconSize = 16,
   variant = 'light',
-  zIndex=1000,
+  zIndex = 99,
+  dropdownPlacement = 'down',
 }: MenuOptionProps) => {
   const [isClicked, setIsClicked] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
-
+  const [menuPosition, setMenuPosition] = useState({
+    top: 0,
+    bottom: 0,
+    height: 0,
+    fromBottom: 0,
+    rightSpaceAvailable: 0,
+  });
+  useEffect(() => {
+    calculateDims();
+  });
   const closeDropDown = () => setIsClicked(false);
 
   const onIconClickHandler = () => {
@@ -69,59 +146,61 @@ const MenuOption = ({
     closeDropDown();
   };
 
-  const dropdownPositionStyles = () => {
-    switch (dropdownPlacement) {
-      case 'top':
-        return { bottom: '100%', left: -2 ,zIndex};
-      case 'left':
-        return { top: -2, right: '100%' ,zIndex};
-      case 'right':
-        return { top: -2, left: '100%' ,zIndex};
-      case 'down':
-      default:
-        return { top: '100%', left: -2 ,zIndex};
+  const calculateDims = () => {
+    if (menuRef?.current) {
+      const rect = menuRef.current.getBoundingClientRect();
+
+      setMenuPosition({
+        top: rect.top,
+        height: rect.height,
+        rightSpaceAvailable: document.body.clientWidth - rect.right,
+        bottom: rect.bottom,
+        fromBottom: window.innerHeight - rect.bottom,
+      });
     }
   };
 
-  useClickOutside(menuRef, closeDropDown);
-
   return (
     <div className="ff-menu-option-container" ref={menuRef}>
       <Tooltip title={tooltipTitle} placement={tooltipPlacement}>
         <div className="ff-icon-label">
-            <div
-              className={classNames('ff-menuicon-container', {
-                'ff-menuicon-container-clicked': isClicked,
-                dark: variant === 'dark',
-              })}
-              onClick={onIconClickHandler}
-              style={{
-                width: `${iconButtonSize}px`,
-                height: `${iconButtonSize}px`,
-                borderRadius: `${iconButtonBorderRadius}px`,
-                display: 'flex',
-                flexDirection: 'column',
-              }}
-            >
-              <Icon
-                height={iconSize}
-                width={iconSize}
-                name={iconName}
-                color={
-                  isClicked === (variant === 'dark')
-                    ? 'var(--menu-option-icon-clicked)'
-                    : 'var(--menu-option-icon-color)'
-                }
-              />
+          <div
+            className={classNames('ff-menuicon-container', {
+              'ff-menuicon-container-clicked': isClicked,
+              dark: variant === 'dark',
+            })}
+            onClick={onIconClickHandler}
+            style={{
+              width: `${iconButtonSize}px`,
+              height: `${iconButtonSize}px`,
+              borderRadius: `${iconButtonBorderRadius}px`,
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            <Icon
+              height={iconSize}
+              width={iconSize}
+              name={iconName}
+              color={
+                isClicked === (variant === 'dark')
+                  ? 'var(--menu-option-icon-clicked)'
+                  : 'var(--menu-option-icon-color)'
+              }
+            />
           </div>
-          {labelName && <Typography as="label">{labelName} </Typography>}
+          {labelName && <Typography as="label">{labelName}</Typography>}
         </div>
       </Tooltip>
       {isClicked && (
         <OptionCard
           options={options}
           onClick={handleOptionClick}
-          styles={dropdownPositionStyles()}
+          menuPosition={menuPosition}
+          menuRef={menuRef}
+          closeDropdown={closeDropDown}
+          zIndex={zIndex}
+          dropdownPosition={dropdownPlacement}
         />
       )}
     </div>

package/src/components/MenuOption/types.ts

@@ -11,17 +11,21 @@ interface OptionClick {
    * @type {Array<string> | string}
    * @required
    */
-  value: Array<string> | string;
+  value: any;
 }
 
 interface OptionType extends OptionClick {
   /**
    * The name of the icon associated with the option.
    * @type {string}
-   * @required
+   * @optional
    */
   icon?: string;
 
+  iconColor?: string;
+
+  name?: string;
+
   /**
    * Indicates whether the option is disabled.
    * @type {boolean}
@@ -40,11 +44,11 @@ interface OptionCardProps {
 
   /**
    * Callback function triggered when an option is clicked.
-   * @param {any} data - The data associated with the clicked option.
+   * @param {OptionClick} data - The data associated with the clicked option.
    * @type {function}
    * @required
    */
-  onClick: (data?: any) => void;
+  onClick: (data: OptionClick) => void;
 
   /**
    * Optional styles applied to the card.
@@ -52,6 +56,41 @@ interface OptionCardProps {
    * @optional
    */
   styles?: React.CSSProperties;
+
+  /**
+   * The z-index of the option card.
+   * @type {number}
+   * @optional
+   */
+  zIndex?: number;
+
+  /**
+   * The position of the menu relative to the triggering element.
+   * @type {dropdownPosition}
+   * @required
+   */
+  menuPosition: any;
+
+  /**
+   * Reference to the menu DOM element.
+   * @type {React.RefObject<HTMLElement>}
+   * @required
+   */
+  menuRef: React.RefObject<HTMLElement>;
+
+  /**
+   * Callback function to close the dropdown.
+   * @type {() => void}
+   * @required
+   */
+  closeDropdown: () => void;
+
+  /**
+   * Placement of the dropdown menu relative to the icon.
+   * @type {dropdownPosition}
+   * @optional
+   */
+  dropdownPosition?: 'top' | 'down' | 'left' | 'right';
 }
 
 interface MenuOptionProps {
@@ -100,35 +139,34 @@ interface MenuOptionProps {
 
   /**
    * The placement of the dropdown menu relative to the icon.
-   * @type {'top' | 'left' | 'right' | 'bottom'}
+   * @type {dropdownPosition}
    * @optional
    */
-  dropdownPlacement?: string | 'top' | 'left' | 'right' | 'down';
+  dropdownPlacement?: 'top' | 'down' | 'left' | 'right';
 
-   /**
+  /**
    * The variant of the menu option, either 'dark' or 'light'.
    * @type {'dark' | 'light'}
    * @default 'light'
    * @optional
    */
-
   variant?: 'dark' | 'light';
- 
+
   /**
    * Callback function triggered when the icon is clicked.
-   * @type {function}
+   * @type {() => void}
    * @optional
    */
-
   onClick?: () => void;
 
   /**
    * Callback function triggered when an option is clicked.
    * @param {OptionClick} option - The option that was clicked.
-   * @type {function}
+   * @type {(option: OptionClick) => void}
    * @optional
    */
   onOptionClick?: (option: OptionClick) => void;
+
   /**
    * The size of the icon button.
    * @type {number}
@@ -144,13 +182,16 @@ interface MenuOptionProps {
   iconSize?: number;
 
   /**
-   * The border radius of the icon.
+   * The border radius of the icon button.
    * @type {number}
    * @default 7
    */
   iconButtonBorderRadius?: number;
+
   /**
    * Providing z-index for the options card.
+   * @type {number}
+   * @optional
    */
   zIndex?: number;
 }
@@ -166,7 +207,7 @@ interface OptionProps {
   /**
    * Callback function triggered when the option is clicked.
    * @param {OptionClick} option - The clicked option.
-   * @type {function}
+   * @type {(option: OptionClick) => void}
    * @required
    */
   onClick: (option: OptionClick) => void;

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

@@ -5,6 +5,7 @@ import Button from '../Button/Button';
 import './MiniModal.scss';
 import Typography from '../Typography';
 import Icon from '../Icon';
+import React from 'react';
 
 const meta: Meta<typeof MiniModal> = {
   title: 'Components/MiniModal',
@@ -41,14 +42,15 @@ const BasicModalComponent = () => {
     <div className="ff-mini-modal-buttons-flex ff-mini-modal-gap-10">
       <Button
         onClick={() => openModal(1)}
+        id="112233"
         ref={btnRef1}
-        label="1"
+        label="122"
         variant={currentModal === 1 ? 'primary' : 'secondary'}
       />
 
       {currentModal === 1 && (
         <MiniModal
-          anchorRef={btnRef1}
+          anchorRef="112233"
           modalProperties={{ width: 300, height: 180 }}
           headerProps={
             <>
@@ -239,7 +241,6 @@ export const BasicModal: Story = {
 };
 
 export const CustomModalWithArrow = () => {
-  const btnRef1 = useRef<HTMLButtonElement>(null);
   const btnRef2 = useRef<HTMLButtonElement>(null);
   const btnRef3 = useRef<HTMLButtonElement>(null);
   const btnRef4 = useRef<HTMLButtonElement>(null);
@@ -254,14 +255,14 @@ export const CustomModalWithArrow = () => {
     <div className="ff-mini-modal-buttons-flex ff-mini-modal-gap-10">
       <Button
         onClick={() => openModal(1)}
-        ref={btnRef1}
-        label="1"
+        label="12"
+        id="1a2b"
         variant={currentModal === 1 ? 'primary' : 'secondary'}
       />
 
       {currentModal === 1 && (
         <MiniModal
-          anchorRef={btnRef1}
+          anchorRef="1a2b"
           modalProperties={{ width: 300, height: 250 }}
           headerProps={
             <>

package/src/components/MiniModal/MiniModal.tsx

@@ -40,6 +40,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
     });
     const [isVisible, setIsVisible] = useState(false);
     const modalRef = useRef<HTMLDivElement>(null);
+
     // Function to calculate available space
     const getAvailableSpace = (rect: Rect): AvailableSpace => {
       const { top, left, bottom, right } = rect;
@@ -53,7 +54,18 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
         spaceBottom: viewportHeight - bottom,
       };
     };
-    const anchorRect = anchorRef.current?.getBoundingClientRect();
+
+    // Helper function to get the anchor element
+    const getAnchorElement = () => {
+      if (typeof anchorRef === 'string') {
+        return document.getElementById(anchorRef);
+      }
+      return anchorRef?.current || null;
+    };
+
+    const anchorElement = getAnchorElement();
+    const anchorRect = anchorElement?.getBoundingClientRect();
+
     if (!isWrapped && anchorRect) {
       const availableSpace = getAvailableSpace(anchorRect);
       switch (modalPosition) {
@@ -82,7 +94,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       }
     }
 
-    //specify for the wrapper div left position
+    // Specify for the wrapper div left position
     const calculateAnchorRefLeft = (anchorRefLeftNum?: number) => {
       if (anchorRefLeftNum) {
         return anchorRefLeftNum;
@@ -90,7 +102,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       return 0;
     };
 
-    //specify for the arrow position in left or top
+    // Specify for the arrow position in left or top
     const getArrowClassName = () => {
       if (leftTopArrow && modalPosition === 'right') {
         return 'left-top-arrow';
@@ -99,13 +111,13 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
     };
     const calculatedAnchorRefLeft = calculateAnchorRefLeft(anchorRefLeftNum);
 
-    //specifying for specific wrapper modal position
+    // Specify specific wrapper modal position
     const firstAnchor =
       firstAnchorRef?.current &&
       firstAnchorRef?.current?.getBoundingClientRect().left -
         anchorLeftDistanceForWrapper;
 
-    //specifying the modal top
+    // Specifying the modal top
     const calculateModalTop = () => {
       const safeHeight = modalProperties?.height ?? 0;
       if (modalPosition === 'bottom') {
@@ -115,24 +127,18 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       } else if (modalPosition === 'right') {
         return leftTopArrow
           ? modalPositionState.top - (extraRightSpace?.leftTopArrow ?? 30)
-          : modalPositionState?.top -
-              safeHeight / (extraRightSpace?.middleLeftArrow ?? 3.5);
+          : modalPositionState?.top - safeHeight / (extraRightSpace?.middleLeftArrow ?? 3.5);
       } else if (modalPosition === 'top') {
-        return (
-          modalPositionState.top -
-          (safeHeight + (extraTopSpace?.normalModal ?? 10))
-        );
+        return modalPositionState.top - (safeHeight + (extraTopSpace?.normalModal ?? 10));
       }
       return modalPositionState.top - safeHeight / 1.5;
     };
     const calculatedModalTop = calculateModalTop();
 
-    //specifying the modal left
+    // Specifying the modal left
     const calculateModalLeft = () => {
       if (modalPosition === 'right') {
-        return (
-          modalPositionState.left + (extraLeftSpace?.rightAlignModal ?? 40)
-        );
+        return modalPositionState.left + (extraLeftSpace?.rightAlignModal ?? 40);
       } else if (firstAnchorRef) {
         return firstAnchor;
       } else if (modalPosition === 'left') {
@@ -143,16 +149,16 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
     };
     const calculatedModalLeft = calculateModalLeft();
 
-    //specifying the modal's escape and enter functionality
+    // Handle escape and enter functionality
     const handleEsc = useEscapeKey('Escape');
     const handleEnter = useEscapeKey('Enter');
     handleEsc(cancelButtonProps?.onClick);
     handleEnter(proceedButtonProps?.onClick);
     useClickOutside(modalRef, cancelButtonProps.onClick);
 
-    //calculate the modal position
+    // Calculate the modal position
     const calculatePosition = useCallback(() => {
-      const anchorRect = anchorRef.current?.getBoundingClientRect();
+      const anchorRect = anchorElement?.getBoundingClientRect();
       if (anchorRect) {
         const { bottom, left } = anchorRect;
         const { scrollX, scrollY } = window;
@@ -164,7 +170,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
           left: leftPosition,
         });
       }
-    }, [anchorRef, modalProperties]);
+    }, [anchorElement]);
 
     useEffect(() => {
       const timeoutId = setTimeout(() => {
@@ -213,10 +219,10 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
               modalPosition === 'right'
                 ? 'left'
                 : modalPosition === 'top'
-                  ? 'bottom'
-                  : modalPosition === 'left'
-                    ? 'right'
-                    : 'top'
+                ? 'bottom'
+                : modalPosition === 'left'
+                ? 'right'
+                : 'top'
             } ${getArrowClassName()}`}
           />
         )}

package/src/components/MiniModal/types.ts

@@ -9,7 +9,7 @@ export interface MiniEditModalProps {
   /**
    * A reference to the button element that triggers the modal.
    */
-  anchorRef: RefObject<HTMLButtonElement>;
+  anchorRef: RefObject<HTMLButtonElement> | string;
   /**
    * Optional properties for configuring the modal header.
    */

package/src/components/MultiSelect/Dropdown.tsx

@@ -9,6 +9,7 @@ import Typography from '../Typography';
 import Checkbox from '../Checkbox';
 import Tooltip from '../Tooltip';
 import { truncateText } from '../../utils/truncateText/truncateText';
+import { getLabel } from '../../utils/getSelectOptionValue/getSelectOptionValue';
 
 const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
   (
@@ -19,12 +20,15 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       dropdownPosition = {},
       zIndex,
       withSelectButton,
+      labelAccessor,
     },
     ref
   ) => {
     const filteredOptions = options
       ? options.filter((option) =>
-          option.label?.toLowerCase().includes(searchedKeyword.toLowerCase())
+          getLabel(option, labelAccessor)
+            ?.toLowerCase()
+            .includes(searchedKeyword.toLowerCase())
         )
       : [];
     const { verticalMargin, optionHeight, maxDropdownHeight } =
@@ -56,12 +60,7 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
 
       return topPosition;
     }, [filteredOptions.length, withSelectButton, dropdownPosition]);
-    const renderOption = (optionLabel: string | undefined) => {
-      if (typeof optionLabel === 'string') {
-        return truncateText(optionLabel, 25);
-      }
-      return optionLabel;
-    };
+
     const themeContext = useContext(ThemeContext);
     const currentTheme = themeContext?.currentTheme;
     return (
@@ -91,7 +90,7 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
               <div
                 role="option"
                 className={`dropdown-option-container`}
-                key={info.label}
+                key={getLabel(info, labelAccessor)}
                 onClick={() =>
                   !info?.isDisabled && handleOptionChange(info, !info.isChecked)
                 }
@@ -104,14 +103,14 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
                 <Tooltip
                   zIndex={zIndex + 1}
                   title={
-                    info.label && info.label.length > 25
-                      ? info.label
-                      : undefined
+                    getLabel(info, labelAccessor).length > 25
+                      ? getLabel(info, labelAccessor)
+                      : ''
                   }
                   children={
                     <Typography
                       className="dropdown-option-label"
-                      children={`${renderOption(info.label)}`}
+                      children={truncateText(getLabel(info, labelAccessor), 25)}
                     />
                   }
                 />

package/src/components/MultiSelect/MultiSelect.scss

@@ -90,6 +90,7 @@
             border: 0.5px solid #f1ebf2;
             padding: 0 1px 0 4px;
             gap: 4px;
+            height: 16px;
             border-radius: 15px;
             .ff-multiselect-chip-label {
               @extend .fontXs;