pixel-react-excel-sheet 1.2.0 → 1.2.2

package/lib/components/MenuOption/MenuOption.js

@@ -0,0 +1,228 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useContext, useEffect, useCallback } 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 { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+const Option = ({ option, onClick, alignOption }) => (_jsxs("div", { className: classNames('ff-options', {
+        'ff-disable-option': option.disable,
+        'align-center': alignOption === 'center',
+        'align-right': alignOption === 'right',
+        'align-left': alignOption === 'left',
+    }), onClick: () => !option.disable && onClick(option), children: [typeof option.icon === 'string' ? (_jsx(Icon, { name: option.icon, color: option.iconColor, height: 16, width: 16 })) : option.icon, _jsx(Typography, { as: "label", lineHeight: "18px", color: option.icon === 'delete' ? 'var(--delete-text-color)' : '', children: option.label })] }));
+const calculatePosition = (menuPosition, dropdownPlacement, optionCardHeight, optionCardWidth, isAddResourceButton) => {
+    const { top, left, height, width } = menuPosition;
+    const availableSpace = {
+        top,
+        bottom: window.innerHeight - (top + height),
+        left,
+        right: window.innerWidth - (left + width),
+    };
+    const gap = 2;
+    const minGap = 8;
+    let newTop = top;
+    let newLeft = left;
+    switch (dropdownPlacement) {
+        case 'top':
+            newTop =
+                availableSpace.top > optionCardHeight + gap
+                    ? top - optionCardHeight - gap
+                    : top + height + gap;
+            break;
+        case 'down':
+            newTop =
+                availableSpace.bottom > optionCardHeight + gap
+                    ? top + height + gap
+                    : top - optionCardHeight - gap;
+            if (isAddResourceButton) {
+                if (!(availableSpace?.bottom > optionCardHeight + gap)) {
+                    newLeft = left + 25;
+                    newTop = top + 5;
+                }
+            }
+            break;
+        case 'left':
+            newLeft =
+                availableSpace.left > width + gap
+                    ? left - width - gap
+                    : left + width + gap;
+            break;
+        case 'right':
+            newLeft =
+                availableSpace.right > width + gap
+                    ? left + width + gap
+                    : left - width - gap;
+            break;
+        case 'bottomLeft':
+            newTop =
+                availableSpace.bottom > optionCardHeight + gap
+                    ? top + height + gap
+                    : top - optionCardHeight - gap;
+            if (optionCardWidth) {
+                newLeft = left - optionCardWidth + width;
+            }
+            break;
+        default:
+            newTop = top;
+            newLeft = left;
+    }
+    // Ensure menu stays within viewport
+    newTop = Math.max(0, Math.min(newTop, window.innerHeight - optionCardHeight - minGap));
+    newLeft = Math.max(0, Math.min(newLeft, window.innerWidth - width));
+    return { top: newTop, left: newLeft };
+};
+const OptionCard = ({ options, onClick, menuPosition, menuRef, closeDropdown, zIndex = 1500, dropdownPlacement, variant, isAddResourceButton, alignOption, ownerId, dropdownHeight, selectedValue, }) => {
+    const themeContext = useContext(ThemeContext);
+    const currentTheme = themeContext?.currentTheme;
+    const optionCardRef = useRef(null);
+    const listRef = useRef(null);
+    const optionRefs = useRef({});
+    const [optionCardHeight, setOptionCardHeight] = useState(0);
+    const [optionCardWidth, setOptionCardWidth] = useState(0);
+    useClickOutside(menuRef, closeDropdown, [optionCardRef]);
+    useEffect(() => {
+        if (optionCardRef.current) {
+            setOptionCardHeight(optionCardRef.current.offsetHeight);
+            setOptionCardWidth(optionCardRef.current.offsetWidth);
+        }
+    }, [options]);
+    const style = calculatePosition(menuPosition, dropdownPlacement, optionCardHeight, optionCardWidth, isAddResourceButton);
+    useEffect(() => {
+        if (!selectedValue)
+            return;
+        const selectedOptionElement = optionRefs.current[selectedValue];
+        const container = listRef.current;
+        if (selectedOptionElement && container) {
+            const elTop = selectedOptionElement.offsetTop;
+            const elBottom = elTop + selectedOptionElement.offsetHeight;
+            const visibleTop = container.scrollTop;
+            const visibleBottom = visibleTop + container.clientHeight;
+            // If the option is not visible, scroll to it
+            if (elTop < visibleTop || elBottom > visibleBottom) {
+                container.scrollTo({
+                    top: elTop - container.clientHeight / 2,
+                    behavior: 'instant',
+                });
+            }
+        }
+    }, [selectedValue]);
+    return createPortal(_jsx("div", { className: classNames('ff-option-card', { 'ff-option-card--primary': variant === 'primary' }, { 'ff-option-card--default': variant === 'default' }, currentTheme), "data-owner-id": ownerId, style: { ...style, zIndex, margin: isAddResourceButton ? '0px' : '4px' }, ref: optionCardRef, children: _jsx("div", { className: classNames({ 'ff-option-list': dropdownHeight }), ref: listRef, style: {
+                maxHeight: dropdownHeight ? `${dropdownHeight}px` : 'unset',
+                overflowY: dropdownHeight ? 'auto' : 'unset',
+            }, children: options.map((opt) => !opt.hide && (_jsx("div", { ref: (el) => (optionRefs.current[opt.value] = el), children: _jsx(Tooltip, { title: opt?.tooltipForOption ? opt?.tooltipForOption : '', placement: opt?.tooltipPlacementForOption, children: _jsx(Option, { option: opt, onClick: onClick, alignOption: alignOption }, opt.value) }, opt.value) }, opt.value))) }) }), document.body);
+};
+const MenuOption = ({ labelName, iconName, tooltipTitle, tooltipPlacement = 'bottom', options = [], onClick = () => { }, onOptionClick = () => { }, iconButtonSize = 24, iconButtonBorderRadius = 7, iconSize = 16, variant = 'light', zIndex = 1500, dropdownPlacement = 'down', optionCardVariant, targetRef = null, treeRowRef, isAddResourceButton, disabled, alignOption = 'left', displayCard = true, didMouseEntered, tableMenu = false, dropdownHeight, selectedValue = '', }) => {
+    const [isClicked, setIsClicked] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const menuRef = useRef(null);
+    const menuIconRef = useRef(null);
+    const [menuPosition, setMenuPosition] = useState({
+        top: 0,
+        left: 0,
+        height: 0,
+        right: 0,
+        width: 0,
+    });
+    const getTargetElement = useCallback(() => {
+        if (!targetRef)
+            return null;
+        return typeof targetRef === 'string'
+            ? document.getElementById(targetRef)
+            : getAnchorElement(targetRef);
+    }, [targetRef]);
+    const closeDropDown = () => setIsClicked(false);
+    useEffect(() => {
+        const targetElement = getTargetElement();
+        if (!targetElement || checkEmpty(options))
+            return;
+        targetElement.classList.toggle('menu-hover-active', isHovered || isClicked);
+        return () => {
+            targetElement.classList.remove('menu-hover-active');
+        };
+    }, [isHovered, isClicked, targetRef, options, getTargetElement]);
+    const getScrollableParent = (element) => {
+        if (!element)
+            return null;
+        let parent = element.parentElement;
+        while (parent) {
+            const { overflowY, overflowX } = window.getComputedStyle(parent);
+            if ((/(auto|scroll|overlay)/.test(overflowY) &&
+                parent.scrollHeight > parent.clientHeight) ||
+                (/(auto|scroll|overlay)/.test(overflowX) &&
+                    parent.scrollWidth > parent.clientWidth)) {
+                return parent;
+            }
+            parent = parent.parentElement;
+        }
+        return document.documentElement;
+    };
+    useEffect(() => {
+        if (!menuRef.current)
+            return;
+        const scrollableParent = getScrollableParent(menuRef.current);
+        const handleScroll = () => {
+            setIsClicked(false);
+        };
+        // Attach scroll event to detected parent or window
+        scrollableParent?.addEventListener('scroll', handleScroll, {
+            passive: true,
+        });
+        if (scrollableParent !== document.documentElement) {
+            // Also attach to window if it's not the detected parent
+            window.addEventListener('scroll', handleScroll, { passive: true });
+        }
+        return () => {
+            scrollableParent?.removeEventListener('scroll', handleScroll);
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+    const onIconClickHandler = () => {
+        if (disabled)
+            return;
+        if (didMouseEntered) {
+            didMouseEntered();
+        }
+        onClick();
+        calculateDims();
+        setIsClicked((prev) => !prev);
+    };
+    const handleOptionClick = (option) => {
+        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 (_jsxs("div", { className: "ff-menu-option-container", ref: menuRef, children: [_jsx(Tooltip, { title: tooltipTitle, placement: tooltipPlacement, children: _jsxs("div", { className: "ff-icon-label", children: [_jsx("div", { className: classNames('ff-menuicon-container', {
+                                'ff-menuicon-container-clicked': isClicked && displayCard && !checkEmpty(options),
+                                dark: variant === 'dark',
+                                'ff-menuicon-container-add-resource': isAddResourceButton,
+                            }), ref: menuIconRef, onClick: onIconClickHandler, onMouseEnter: () => tableMenu && !disabled && setIsHovered(true), onMouseLeave: () => tableMenu && setIsHovered(false), style: {
+                                width: `${iconButtonSize}px`,
+                                height: `${iconButtonSize}px`,
+                                borderRadius: `${iconButtonBorderRadius}px`,
+                            }, children: _jsx(Icon, { height: iconSize, width: iconSize, name: iconName, disabled: disabled, color: displayCard && !checkEmpty(options)
+                                    ? isClicked === (variant === 'dark')
+                                        ? 'var(--menu-option-icon-clicked)'
+                                        : 'var(--menu-option-icon-color)'
+                                    : 'var(--menu-option-icon-clicked)' }) }), labelName && _jsx(Typography, { as: "label", children: labelName })] }) }), isClicked && displayCard && !checkEmpty(options) && (_jsx(OptionCard, { options: options, onClick: handleOptionClick, menuPosition: menuPosition, menuRef: menuRef, closeDropdown: closeDropDown, zIndex: zIndex, dropdownPlacement: dropdownPlacement, variant: optionCardVariant, isAddResourceButton: isAddResourceButton, alignOption: alignOption, ownerId: (typeof targetRef !== 'string' && targetRef?.current?.id) ||
+                    treeRowRef?.current?.id, dropdownHeight: dropdownHeight, selectedValue: selectedValue }))] }));
+};
+export default MenuOption;
+//# sourceMappingURL=MenuOption.js.map

package/lib/components/MenuOption/MenuOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuOption.js","sourceRoot":"","sources":["../../../src/components/MenuOption/MenuOption.tsx"],"names":[],"mappings":"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"}

package/lib/components/MenuOption/index.js

@@ -0,0 +1,2 @@
+export { default } from './MenuOption';
+//# sourceMappingURL=index.js.map

package/lib/components/MenuOption/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MenuOption/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/lib/components/MenuOption/types.d.ts

@@ -1,30 +1,41 @@
+import { ReactNode } from 'react';
 interface OptionClick {
     /**
      * The label displayed for the option.
      * @type {string}
      * @required
      */
-    label: string;
+    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: Array<string> | string;
+    value: any;
 }
-interface OptionType extends OptionClick {
+export interface OptionType extends OptionClick {
     /**
      * The name of the icon associated with the option.
      * @type {string}
-     * @required
+     * @optional
      */
-    icon: string;
+    icon?: string | ReactNode;
+    iconColor?: string;
+    name?: string | ReactNode;
     /**
      * Indicates whether the option is disabled.
      * @type {boolean}
      * @optional
      */
     disable?: boolean;
+    /**
+     * To hide the option.
+     * @type {boolean}
+     * @optional
+     */
+    hide?: boolean;
+    tooltipForOption?: string;
+    tooltipPlacementForOption?: 'top' | 'left' | 'right' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | undefined;
 }
 interface OptionCardProps {
     /**
@@ -35,17 +46,58 @@ interface OptionCardProps {
     options: Array<OptionType>;
     /**
      * 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.
      * @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' | 'bottomLeft';
+    /**
+     * Variant for backgroung color of options card.
+     * @type {string}
+     * @optional
+     */
+    variant?: 'primary' | 'default';
+    isAddResourceButton?: boolean;
+    alignOption: 'left' | 'right' | 'center';
+    ownerId?: string;
+    dropdownHeight?: number;
+    selectedValue?: string;
 }
 interface MenuOptionProps {
     /**
@@ -80,27 +132,27 @@ interface MenuOptionProps {
     tooltipPlacement?: 'bottom' | 'left' | 'right' | 'top' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
     /**
      * 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' | 'bottomLeft';
     /**
-     * Callback function triggered when the icon is clicked.
-     * @type {function}
+     * The variant of the menu option, either 'dark' or 'light'.
+     * @type {'dark' | 'light'}
+     * @default 'light'
      * @optional
      */
     variant?: 'dark' | 'light';
     /**
-     * The variant of the menu option, either 'dark' or 'light'.
-     * @type {'dark' | 'light'}
-     * @default '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 {function}
+     * @type {(option: OptionClick) => void}
      * @optional
      */
     onOptionClick?: (option: OptionClick) => void;
@@ -117,11 +169,39 @@ 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;
+    /**
+     * Variant for backgroung color of options card.
+     * @type {string}
+     * @optional
+     */
+    optionCardVariant?: 'primary' | 'default';
+    targetRef?: string | React.RefObject<HTMLElement> | null;
+    treeRowRef?: React.RefObject<HTMLDivElement | null>;
+    isAddResourceButton?: boolean;
+    /**
+     * to enable or disable the options card.
+     * @type {boolean}
+     * @optional
+     */
+    disabled?: boolean;
+    /** position of the Menuoption*/
+    alignOption?: 'left' | 'right' | 'center';
+    displayCard?: boolean;
+    didMouseEntered?: () => void;
+    tableMenu?: boolean;
+    dropdownHeight?: number;
+    selectedValue?: string;
 }
 interface OptionProps {
     /**
@@ -133,9 +213,10 @@ 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;
+    alignOption: 'left' | 'right' | 'center';
 }
 export { OptionProps, MenuOptionProps, OptionCardProps, OptionClick };

package/lib/components/MenuOption/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/components/MenuOption/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/MenuOption/types.ts"],"names":[],"mappings":""}

package/lib/components/MessageBox/MessageBox.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './MessageBox.scss';
+import type { MessageBoxProps } from './types';
+declare const MessageBox: React.FC<MessageBoxProps>;
+export default MessageBox;

package/lib/components/MessageBox/MessageBox.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './MessageBox.scss';
+import Typography from '../Typography';
+import classNames from 'classnames';
+const MessageBox = ({ content, isVisible, maxWidth = 300, onClick, isClickable = true, arrowPosition = 'left', }) => {
+    return (_jsx("div", { onClick: onClick, style: {
+            width: `${maxWidth}px`,
+            '--triangle-position': `${maxWidth - 4}px`,
+        }, className: classNames('ff-chat-msg-box', {
+            visible: isVisible,
+            hidden: !isVisible,
+            pointer: isClickable,
+            default: !isClickable,
+            'chat-arrow-left': arrowPosition === 'left',
+            'chat-arrow-right': arrowPosition !== 'left',
+        }), children: _jsx("div", { className: classNames('content', `arrow-${arrowPosition}`), children: _jsx(Typography, { children: content }) }) }));
+};
+export default MessageBox;
+//# sourceMappingURL=MessageBox.js.map

package/lib/components/MessageBox/MessageBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBox.js","sourceRoot":"","sources":["../../../src/components/MessageBox/MessageBox.tsx"],"names":[],"mappings":";AAEA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,MAAM,eAAe,CAAC;AAGvC,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,MAAM,UAAU,GAA8B,CAAC,EAC7C,OAAO,EACP,SAAS,EACT,QAAQ,GAAG,GAAG,EACd,OAAO,EACP,WAAW,GAAG,IAAI,EAClB,aAAa,GAAG,MAAM,GACvB,EAAE,EAAE;IACH,OAAO,CACL,cACE,OAAO,EAAE,OAAO,EAChB,KAAK,EACH;YACE,KAAK,EAAE,GAAG,QAAQ,IAAI;YACtB,qBAAqB,EAAE,GAAG,QAAQ,GAAG,CAAC,IAAI;SACpB,EAE1B,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE;YACvC,OAAO,EAAE,SAAS;YAClB,MAAM,EAAE,CAAC,SAAS;YAClB,OAAO,EAAE,WAAW;YACpB,OAAO,EAAE,CAAC,WAAW;YACrB,iBAAiB,EAAE,aAAa,KAAK,MAAM;YAC3C,kBAAkB,EAAE,aAAa,KAAK,MAAM;SAC7C,CAAC,YAEF,cAAK,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,SAAS,aAAa,EAAE,CAAC,YAC7D,KAAC,UAAU,cAAE,OAAO,GAAc,GAC9B,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/MessageBox/index.d.ts

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

package/lib/components/MessageBox/index.js

@@ -0,0 +1,2 @@
+export { default } from './MessageBox';
+//# sourceMappingURL=index.js.map

package/lib/components/MessageBox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MessageBox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/lib/components/MessageBox/types.d.ts

@@ -0,0 +1,8 @@
+export interface MessageBoxProps {
+    content?: React.ReactNode;
+    isVisible: boolean;
+    maxWidth?: number;
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
+    isClickable: boolean;
+    arrowPosition: 'left' | 'right';
+}

package/lib/components/MessageBox/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/components/MessageBox/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/MessageBox/types.ts"],"names":[],"mappings":""}