pixel-react 1.4.3 → 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

@@ -42,7 +42,7 @@ const BasicModalComponent = () => {
     <div className="ff-mini-modal-buttons-flex ff-mini-modal-gap-10">
       <Button
         onClick={() => openModal(1)}
-        id='112233'
+        id="112233"
         ref={btnRef1}
         label="122"
         variant={currentModal === 1 ? 'primary' : 'secondary'}
@@ -241,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);
@@ -263,7 +262,7 @@ export const CustomModalWithArrow = () => {
 
       {currentModal === 1 && (
         <MiniModal
-          anchorRef='1a2b'
+          anchorRef="1a2b"
           modalProperties={{ width: 300, height: 250 }}
           headerProps={
             <>

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;

package/src/components/MultiSelect/MultiSelect.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import MultiSelect from './MultiSelect';
 import { useEffect, useState } from 'react';
 import { Option } from './MultiSelectTypes';
+import React from 'react';
 
 const meta: Meta<typeof MultiSelect> = {
   title: 'Components/MultiSelect',
@@ -31,21 +32,54 @@ export const Default: Story = {
       { label: 'Cherry', value: 'cherry' },
       { label: 'Date', value: 'date' },
       { label: 'Grape', value: 'grape' },
-      // { label: 'Kiwi', value: 'kiwi' },
-      // { label: 'Mango', value: 'mango' },
-      // { label: 'Orange', value: 'orange' },
-      // { label: 'Peach', value: 'peach' },
-      // { label: 'Strawberry', value: 'strawberry' },
+      { label: 'Kiwi', value: 'kiwi' },
+      { label: 'Mango', value: 'mango' },
+      { label: 'Orange', value: 'orange' },
+      { label: 'Peach', value: 'peach' },
+      { label: 'Strawberry', value: 'strawberry' },
     ],
-    // selectedOptions: [{ label: 'Apple', value: 'apple' }],
   },
 };
 
-export const Default2: Story = {
-  args: {
-    ...defaultArgs,
+export const NameAccessor: Story = {
+  render: () => {
+    const [options, setOptions] = useState<Option[]>([]);
+    const [selectedOptions, setSelectedOptions] = useState<Option[]>([
+      { name: 'Apple', fruit: 'apple' },
+    ]);
+    const onChange = (options: Option[]) => {
+      setSelectedOptions(options);
+    };
+    useEffect(() => {
+      setOptions([
+        { name: 'Apple', fruit: 'apple' },
+        { name: 'Banana', fruit: 'banana' },
+        {
+          name: 'CherryCherryCherryCherryCherryCherryCherryCherryCherryCherry',
+          fruit: 'cherry',
+        },
+        { name: 'Date', fruit: 'date' },
+        { name: 'Kiwi', fruit: 'kiwi' },
+        { name: 'Mango', fruit: 'mango' },
+        { name: 'Orange', fruit: 'orange' },
+        { name: 'Peach', fruit: 'peach' },
+        { name: 'Strawberry', fruit: 'strawberry' },
+      ]);
+    }, []);
+    return (
+      <MultiSelect
+        labelAccessor="name"
+        label={'Fruits'}
+        required
+        options={options}
+        selectedOptions={selectedOptions}
+        onChange={onChange}
+        valueAccessor="fruit"
+      />
+    );
   },
 };
+
 export const Default3: Story = {
   args: {
     ...defaultArgs,
@@ -85,6 +119,7 @@ export const EmailGroup: Story = {
         onChange={onChange}
         acceptNewOption={true}
         displayCount={true}
+        labelAccessor="label"
       />
     );
   },
@@ -158,6 +193,7 @@ export const Labels: Story = {
     return (
       <div style={{ width: '250px' }}>
         <MultiSelect
+          required
           label={'Labels'}
           variant="labels"
           options={options}
@@ -199,7 +235,6 @@ export const Machines: Story = {
     const [selectedOptions, setSelectedOptions] = useState<Option[]>([]);
 
     const handleSelectChange = (machines: Option[]) => {
-      console.log('Updated machines:', machines);
       setSelectedOptions(machines);
     };