pixel-react 1.10.15 → 1.10.16

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

@@ -1,212 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import MenuOption from './MenuOption';
-import './MenuOption.scss';
-import React, { ReactNode, useRef } from 'react';
-import Icon from '../Icon';
-
-const meta: Meta<typeof MenuOption> = {
-  title: 'Components/MenuOption',
-  component: MenuOption,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    iconName: {
-      control: 'text',
-      description: 'Name of the icon to display in the button.',
-      defaultValue: 'more',
-    },
-    labelName: {
-      control: 'text',
-      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'],
-      },
-      description: 'Placement of the tooltip relative to the button.',
-      defaultValue: 'top',
-    },
-    dropdownPlacement: {
-      control: {
-        type: 'select',
-        options: ['top', 'down', 'left', 'right'],
-      },
-      description: 'Placement of the dropdown menu relative to the button.',
-      defaultValue: 'down',
-    },
-  },
-};
-
-type Story = StoryObj<typeof MenuOption>;
-
-const options = [
-  {
-    label: (
-      <div>
-        hello <Icon name="edit" />
-      </div>
-    ),
-    value: 'opt1',
-    icon: 'success',
-  },
-  { label: 'Option 2', value: 'opt2', icon: 'success' },
-  {
-    label: 'Delete',
-    value: 'deleteOpt',
-    icon: 'delete',
-    iconColor: 'var(--delete-text-color)',
-  },
-];
-
-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',
-  },
-  render: (args) => {
-    const moreRef = useRef<HTMLDivElement>(null);
-    return (
-      <div ref={moreRef} style={{display:'flex', height:'100vh', alignItems:'center'}}>
-        <MenuOption
-          {...args}
-          options={options}
-          targetRef={moreRef} // Make sure targetRef is passed properly here
-          onOptionClick={handleOptionClick}
-          dropdownPlacement="down" // Dropdown placement for testing
-        />
-      </div>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'A controlled `MenuOption` with customizable tooltip and dropdown placement.',
-      },
-    },
-  },
-};
-
-export const MenuOptionTop: Story = {
-  args: {
-    ...ControlledMenuOption.args,
-    dropdownPlacement: 'top',
-  },
-  render: (args) => {
-    const moreRef = useRef<HTMLDivElement>(null);
-    return (
-      <div ref={moreRef}>
-        <MenuOption
-          {...args}
-          options={options}
-          targetRef={moreRef}
-          onOptionClick={handleOptionClick}
-        />
-      </div>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Dropdown menu positioned above the button.',
-      },
-    },
-  },
-};
-
-export const MenuOptionBottom: Story = {
-  args: {
-    ...ControlledMenuOption.args,
-    dropdownPlacement: 'down',
-  },
-  render: (args) => {
-    return (
-      <div id="more">
-        <MenuOption
-          {...args}
-          options={options}
-          targetRef={'more'}
-          onOptionClick={handleOptionClick}
-        />
-      </div>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Dropdown menu positioned below the button.',
-      },
-    },
-  },
-};
-
-export const MenuOptionLeft: Story = {
-  args: {
-    ...ControlledMenuOption.args,
-    dropdownPlacement: 'left',
-  },
-  render: (args) => {
-    const moreRef = useRef<HTMLDivElement>(null);
-    return (
-      <div ref={moreRef}>
-        <MenuOption
-          {...args}
-          options={options}
-          targetRef={moreRef}
-          onOptionClick={handleOptionClick}
-        />
-      </div>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Dropdown menu positioned to the left of the button.',
-      },
-    },
-  },
-};
-
-export const MenuOptionRight: Story = {
-  args: {
-    ...ControlledMenuOption.args,
-    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>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Dropdown menu positioned to the right of the button.',
-      },
-    },
-  },
-};
-
-export default meta;

package/src/components/MenuOption/MenuOption.tsx

@@ -1,238 +0,0 @@
-import { useState, useRef, useContext, useEffect } from 'react';
-import './MenuOption.scss';
-import Icon from '../Icon';
-import classNames from 'classnames';
-import Tooltip from '../Tooltip';
-import Typography from '../Typography';
-import { createPortal } from 'react-dom';
-import { ThemeContext } from '../ThemeProvider/ThemeProvider';
-import useClickOutside from '../../hooks/useClickOutside';
-import { getAnchorElement } from '../../utils/getAnchorElement/getAnchorElement';
-import {
-  OptionCardProps,
-  OptionProps,
-  MenuOptionProps,
-  OptionClick,
-} from './types';
-
-const Option = ({ option, onClick }: OptionProps) => (
-  <div
-    className={classNames('ff-options', {
-      'ff-disable-option': option.disable,
-    })}
-    onClick={() => !option.disable && onClick(option)}
-  >
-    {option.icon && (
-      <Icon
-        name={option.icon}
-        color={option.iconColor}
-        height={16}
-        width={16}
-      />
-    )}
-    <Typography
-      as="label"
-      lineHeight="18px"
-      color={option.icon === 'delete' ? 'var(--delete-text-color)' : ''}
-    >
-      {option.label}
-    </Typography>
-  </div>
-);
-
-const calculatePosition = (
-  menuPosition: { top: any; left: any; height: any; width: any },
-  dropdownPlacement: string | undefined,
-  optionCardHeight: number
-) => {
-  const { top, left, height, width } = menuPosition;
-  const availableSpace = {
-    top,
-    bottom: window.innerHeight - (top + height),
-    left,
-    right: window.innerWidth - (left + width),
-  };
-  const gap = 0;
-
-  switch (dropdownPlacement) {
-    case 'top':
-      return availableSpace.top > optionCardHeight + gap
-        ? { top: top - optionCardHeight - gap, left }
-        : { top: top + height + gap, left };
-    case 'down':
-      return availableSpace.bottom > optionCardHeight + gap
-        ? { top: top + height + gap, left }
-        : { top: top - optionCardHeight - gap, left };
-    case 'left':
-      return availableSpace.left > width + gap
-        ? { top, left: left - width - gap }
-        : { top, left: left + width + gap };
-    case 'right':
-      return availableSpace.right > width + gap
-        ? { top, left: left + width + gap }
-        : { top, left: left - width - gap };
-    default:
-      return { top, left };
-  }
-};
-
-const OptionCard = ({
-  options,
-  onClick,
-  menuPosition,
-  menuRef,
-  closeDropdown,
-  zIndex,
-  dropdownPlacement,
-  variant,
-}: OptionCardProps) => {
-  const themeContext = useContext(ThemeContext);
-  const currentTheme = themeContext?.currentTheme;
-  const optionCardRef = useRef<HTMLDivElement>(null);
-  useClickOutside(menuRef, closeDropdown, [optionCardRef]);
-
-  const optionCardHeight = optionCardRef.current?.offsetHeight || 0;
-  const style = calculatePosition(
-    menuPosition,
-    dropdownPlacement,
-    optionCardHeight
-  );
-
-  return createPortal(
-    <div
-      className={classNames(
-        'ff-option-card',
-        { 'ff-option-card--primary': variant === 'primary' },
-        currentTheme
-      )}
-      style={{ ...style, zIndex }}
-      ref={optionCardRef}
-    >
-      {options.map((opt) => (
-        <Option key={opt.value} option={opt} onClick={onClick} />
-      ))}
-    </div>,
-    document.body
-  );
-};
-
-const MenuOption = ({
-  labelName,
-  iconName,
-  tooltipTitle,
-  tooltipPlacement = 'bottom',
-  options = [],
-  onClick = () => {},
-  onOptionClick = () => {},
-  iconButtonSize = 20,
-  iconButtonBorderRadius = 7,
-  iconSize = 16,
-  variant = 'light',
-  zIndex = 99,
-  dropdownPlacement = 'down',
-  optionCardVariant,
-  targetRef = null,
-  treeRowRef,
-}: MenuOptionProps) => {
-  const [isClicked, setIsClicked] = useState(false);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const menuIconRef = useRef<HTMLDivElement>(null);
-  const [menuPosition, setMenuPosition] = useState({
-    top: 0,
-    left: 0,
-    height: 0,
-    right: 0,
-    width: 0,
-  });
-
-  const closeDropDown = () => setIsClicked(false);
-
-  useEffect(() => {
-    if (targetRef) {
-      const parentDom = getAnchorElement(targetRef);
-      parentDom?.classList.toggle('hover', isClicked);
-    }
-
-    return () => {
-      if (targetRef) {
-        const parentDom = getAnchorElement(targetRef);
-        parentDom?.classList.remove('hover');
-      }
-    };
-  }, [isClicked, targetRef]);
-
-  const onIconClickHandler = () => {
-    onClick();
-    calculateDims();
-    setIsClicked((prev) => !prev);
-  };
-
-  const handleOptionClick = (option: OptionClick) => {
-    treeRowRef?.current?.children[0]?.children[2]?.classList.remove(
-      'table-row-add-button'
-    );
-    onOptionClick(option);
-    closeDropDown();
-  };
-
-  const calculateDims = () => {
-    if (menuIconRef.current) {
-      const rect = menuIconRef.current.getBoundingClientRect();
-      setMenuPosition({
-        top: rect.top + window.scrollY,
-        left: rect.left + window.scrollX,
-        height: rect.height,
-        right: rect.right,
-        width: rect.width,
-      });
-    }
-  };
-
-  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',
-            })}
-            ref={menuIconRef}
-            onClick={onIconClickHandler}
-            style={{
-              width: `${iconButtonSize}px`,
-              height: `${iconButtonSize}px`,
-              borderRadius: `${iconButtonBorderRadius}px`,
-            }}
-          >
-            <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>}
-        </div>
-      </Tooltip>
-      {isClicked && (
-        <OptionCard
-          options={options}
-          onClick={handleOptionClick}
-          menuPosition={menuPosition}
-          menuRef={menuRef}
-          closeDropdown={closeDropDown}
-          zIndex={zIndex}
-          dropdownPlacement={dropdownPlacement}
-          variant={optionCardVariant}
-        />
-      )}
-    </div>
-  );
-};
-
-export default MenuOption;

package/src/components/MenuOption/index.ts

@@ -1 +0,0 @@
-export { default } from './MenuOption';

package/src/components/MenuOption/types.ts

@@ -1,232 +0,0 @@
-import { ReactNode } from 'react';
-
-interface OptionClick {
-  /**
-   * The label displayed for the option.
-   * @type {string}
-   * @required
-   */
-  label: string | ReactNode;
-
-  /**
-   * The value(s) associated with the option, which can be a single string or an array of strings.
-   * @type {Array<string> | string}
-   * @required
-   */
-  value: any;
-}
-
-interface OptionType extends OptionClick {
-  /**
-   * The name of the icon associated with the option.
-   * @type {string}
-   * @optional
-   */
-  icon?: string;
-
-  iconColor?: string;
-
-  name?: string | ReactNode;
-
-  /**
-   * Indicates whether the option is disabled.
-   * @type {boolean}
-   * @optional
-   */
-  disable?: boolean;
-}
-
-interface OptionCardProps {
-  /**
-   * The list of options displayed in the card.
-   * @type {Array<OptionType>}
-   * @required
-   */
-  options: Array<OptionType>;
-
-  /**
-   * Callback function triggered when an option is clicked.
-   * @param {OptionClick} data - The data associated with the clicked option.
-   * @type {function}
-   * @required
-   */
-  onClick: (data: OptionClick) => void;
-
-  /**
-   * Optional styles applied to the card.
-   * @type {React.CSSProperties}
-   * @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
-   */
-  dropdownPlacement?: 'top' | 'down' | 'left' | 'right';
-  /**
-   * Variant for backgroung color of options card.
-   * @type {string}
-   * @optional
-   */
-  variant?: 'primary';
-}
-
-interface MenuOptionProps {
-  /**
-   * The name of the label displayed next to the icon.
-   * @type {string}
-   * @optional
-   */
-  labelName?: string;
-
-  /**
-   * The name of the icon to be displayed.
-   * @type {string}
-   * @required
-   */
-  iconName: string;
-
-  /**
-   * The list of options available in the dropdown.
-   * @type {Array<OptionType>}
-   * @required
-   */
-  options: Array<OptionType>;
-
-  /**
-   * The title displayed in the tooltip when hovering over the icon.
-   * @type {string}
-   * @optional
-   */
-  tooltipTitle?: string;
-
-  /**
-   * The placement of the tooltip relative to the icon.
-   * @type {'bottom' | 'left' | 'right' | 'top' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'}
-   * @optional
-   */
-  tooltipPlacement?:
-    | 'bottom'
-    | 'left'
-    | 'right'
-    | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom-start'
-    | 'bottom-end';
-
-  /**
-   * The placement of the dropdown menu relative to the icon.
-   * @type {dropdownPosition}
-   * @optional
-   */
-  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 {() => void}
-   * @optional
-   */
-  onClick?: () => void;
-
-  /**
-   * Callback function triggered when an option is clicked.
-   * @param {OptionClick} option - The option that was clicked.
-   * @type {(option: OptionClick) => void}
-   * @optional
-   */
-  onOptionClick?: (option: OptionClick) => void;
-
-  /**
-   * The size of the icon button.
-   * @type {number}
-   * @default 20
-   */
-  iconButtonSize?: number;
-
-  /**
-   * The size of the icon.
-   * @type {number}
-   * @default 16
-   */
-  iconSize?: number;
-
-  /**
-   * 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;
-  /**
-   * Variant for backgroung color of options card.
-   * @type {string}
-   * @optional
-   */
-  optionCardVariant?: 'primary';
-  targetRef?: string | React.RefObject<HTMLElement> | null;
-  treeRowRef?: React.RefObject<any | null>;
-}
-
-interface OptionProps {
-  /**
-   * The option to be displayed.
-   * @type {OptionType}
-   * @required
-   */
-  option: OptionType;
-
-  /**
-   * Callback function triggered when the option is clicked.
-   * @param {OptionClick} option - The clicked option.
-   * @type {(option: OptionClick) => void}
-   * @required
-   */
-  onClick: (option: OptionClick) => void;
-}
-
-export { OptionProps, MenuOptionProps, OptionCardProps, OptionClick };