pixel-react-excel-sheet 1.2.0

package/src/components/MiniModal/MiniModal.tsx

@@ -0,0 +1,262 @@
+import { useEffect, useRef, useState, useCallback, forwardRef } from 'react';
+import { createPortal } from 'react-dom';
+import { MiniEditModalProps, Rect, AvailableSpace } from './types.js';
+import Button from '../Button/Button.js';
+import useEscapeKey from '../../hooks/keyboardevents/useEscKeyEvent.js';
+import useClickOutside from '../../hooks/useClickOutside';
+import classNames from 'classnames';
+import './MiniModal.scss';
+import Typography from '../Typography';
+
+const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
+  (
+    {
+      anchorRef,
+      headerProps,
+      childContent,
+      cancelButtonProps,
+      proceedButtonProps,
+      footerContent,
+      isWrapped = false,
+      isAnimated = false,
+      isPopOver = false,
+      modalPosition = 'bottom',
+      leftTopArrow = false,
+      firstAnchorRef,
+      anchorRefLeftNum,
+      modalProperties,
+      anchorLeftDistanceForWrapper = 170,
+      extraTopSpace,
+      extraRightSpace,
+      extraLeftSpace,
+    },
+    ref
+  ) => {
+    const [modalPositionState, setModalPositionState] = useState({
+      top: 0,
+      left: 0,
+    });
+    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;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      return {
+        spaceTop: top,
+        spaceLeft: left,
+        spaceRight: viewportWidth - right,
+        spaceBottom: viewportHeight - bottom,
+      };
+    };
+    const anchorRect = anchorRef.current?.getBoundingClientRect();
+    if (!isWrapped && anchorRect) {
+      const availableSpace = getAvailableSpace(anchorRect);
+      switch (modalPosition) {
+        case 'top':
+          if (availableSpace.spaceTop < (modalProperties?.height ?? 150)) {
+            modalPosition = 'bottom';
+          }
+          break;
+        case 'left':
+          if (availableSpace.spaceLeft < (modalProperties?.width ?? 480)) {
+            modalPosition = 'right';
+          }
+          break;
+        case 'right':
+          if (availableSpace.spaceRight < (modalProperties?.width ?? 480)) {
+            modalPosition = 'left';
+          }
+          break;
+        case 'bottom':
+          if (availableSpace.spaceBottom < (modalProperties?.height ?? 150)) {
+            modalPosition = 'top';
+          }
+          break;
+        default:
+          break;
+      }
+    }
+
+    //specify for the wrapper div left position
+    const calculateAnchorRefLeft = (anchorRefLeftNum?: number) => {
+      if (anchorRefLeftNum) {
+        return anchorRefLeftNum;
+      }
+      return 0;
+    };
+
+    //specify for the arrow position in left or top
+    const getArrowClassName = () => {
+      if (leftTopArrow && modalPosition === 'right') {
+        return 'left-top-arrow';
+      }
+      return modalPosition === 'right' ? 'left-middle-arrow' : '';
+    };
+    const calculatedAnchorRefLeft = calculateAnchorRefLeft(anchorRefLeftNum);
+
+    //specifying for specific wrapper modal position
+    const firstAnchor =
+      firstAnchorRef?.current &&
+      firstAnchorRef?.current?.getBoundingClientRect().left -
+        anchorLeftDistanceForWrapper;
+
+    //specifying the modal top
+    const calculateModalTop = () => {
+      const safeHeight = modalProperties?.height ?? 0;
+      if (modalPosition === 'bottom') {
+        return isWrapped
+          ? modalPositionState.top + (extraTopSpace?.wrappedModal ?? 5)
+          : modalPositionState.top + (extraTopSpace?.normalModal ?? 10);
+      } else if (modalPosition === 'right') {
+        return leftTopArrow
+          ? modalPositionState.top - (extraRightSpace?.leftTopArrow ?? 30)
+          : modalPositionState?.top -
+              safeHeight / (extraRightSpace?.middleLeftArrow ?? 3.5);
+      } else if (modalPosition === 'top') {
+        return (
+          modalPositionState.top -
+          (safeHeight + (extraTopSpace?.normalModal ?? 10))
+        );
+      }
+      return modalPositionState.top - safeHeight / 1.5;
+    };
+    const calculatedModalTop = calculateModalTop();
+
+    //specifying the modal left
+    const calculateModalLeft = () => {
+      if (modalPosition === 'right') {
+        return (
+          modalPositionState.left + (extraLeftSpace?.rightAlignModal ?? 40)
+        );
+      } else if (firstAnchorRef) {
+        return firstAnchor;
+      } else if (modalPosition === 'left') {
+        return modalPositionState.left - (modalProperties?.width ?? 404) - 15;
+      } else {
+        return modalPositionState.left - (extraLeftSpace?.normal ?? 30);
+      }
+    };
+    const calculatedModalLeft = calculateModalLeft();
+
+    //specifying the modal's 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
+    const calculatePosition = useCallback(() => {
+      const anchorRect = anchorRef.current?.getBoundingClientRect();
+      if (anchorRect) {
+        const { bottom, left } = anchorRect;
+        const { scrollX, scrollY } = window;
+        let topPosition = bottom + scrollY;
+        let leftPosition = left + scrollX;
+
+        setModalPositionState({
+          top: topPosition,
+          left: leftPosition,
+        });
+      }
+    }, [anchorRef, modalProperties]);
+
+    useEffect(() => {
+      const timeoutId = setTimeout(() => {
+        setIsVisible(true);
+        calculatePosition();
+      }, 100);
+      window.addEventListener('resize', calculatePosition);
+      window.addEventListener('scroll', calculatePosition);
+
+      return () => {
+        window.removeEventListener('resize', calculatePosition);
+        clearTimeout(timeoutId);
+        window.removeEventListener('scroll', calculatePosition);
+      };
+    }, [calculatePosition]);
+
+    if (isWrapped && isPopOver) {
+      return null;
+    }
+
+    return createPortal(
+      <div
+        ref={ref || modalRef}
+        className={classNames('ff-mini-edit-modal-container', {
+          modalVisible: isVisible,
+          animatedModal: isAnimated,
+        })}
+        style={{
+          top: `${calculatedModalTop}px`,
+          left: `${calculatedModalLeft}px`,
+        }}
+      >
+        {isPopOver && (
+          <div
+            className={`popover-arrow popover-arrow-${
+              modalPosition === 'right'
+                ? 'left'
+                : modalPosition === 'top'
+                ? 'bottom'
+                : modalPosition === 'left'
+                ? 'right'
+                : 'top'
+            } ${getArrowClassName()}`}
+          />
+        )}
+        {isWrapped && (
+          <div
+            className={'wrapped-div'}
+            style={{ left: `${calculatedAnchorRefLeft}px` }}
+          ></div>
+        )}
+        <div
+          className={classNames('mini-edit-modal', {
+            'mini-edit-modal-wrapper-shadow': !!isWrapped,
+            'mini-edit-modal-arrow-shadow': !!isPopOver,
+          })}
+          style={{
+            minWidth: isWrapped ? '358px' : '',
+            width: `${modalProperties?.width}px`,
+            height: `${modalProperties?.height}px`,
+          }}
+        >
+          {headerProps ? (
+            <Typography as="div">{headerProps}</Typography>
+          ) : (
+            <Typography as="header">
+              <Typography as="h2">Header text</Typography>
+              <hr />
+            </Typography>
+          )}
+          <div className="modal-content">{childContent}</div>
+          {footerContent ? (
+            <Typography as="footer">{footerContent}</Typography>
+          ) : (
+            <footer className="modal-footer">
+              <Button
+                variant="primary"
+                className="btn-cancel"
+                onClick={cancelButtonProps.onClick}
+                label={cancelButtonProps.text}
+              />
+              <Button
+                variant="secondary"
+                className="btn-proceed"
+                label={proceedButtonProps?.text}
+                onClick={proceedButtonProps?.onClick}
+              />
+            </footer>
+          )}
+        </div>
+      </div>,
+      document.body
+    );
+  }
+);
+
+export default MiniModal;

package/src/components/MiniModal/index.ts

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

package/src/components/MiniModal/types.ts

@@ -0,0 +1,101 @@
+import { ReactNode, RefObject } from 'react';
+interface ButtonProps {
+  text: string;
+  onClick: () => void;
+}
+interface ModalDimensions {
+  width?: number;
+  height?: number;
+}
+export interface MiniEditModalProps {
+  /**
+   * A reference to the button element that triggers the modal.
+   */
+  anchorRef: RefObject<HTMLButtonElement>;
+  /**
+   * Optional properties for configuring the modal header.
+   */
+  headerProps?: ReactNode;
+  /**
+   * The main content to be displayed inside the modal
+   */
+  childContent: ReactNode;
+  /**
+   * Props for the cancel button inside the modal
+   */
+  cancelButtonProps: ButtonProps;
+  /**
+   * Props for the proceed button inside the modal.
+   */
+  proceedButtonProps: ButtonProps;
+  /**
+   * Optional content for the footer of the modal.
+   */
+  footerContent?: ReactNode;
+  /**
+   * Determines if the modal should be wrapped inside a container element.
+   */
+  isWrapped?: boolean;
+  /**
+   * Determines if the modal should have an animation when displayed.
+   */
+  isAnimated?: boolean;
+  /**
+   * Specifies if the modal should behave as a popover with an arrow.
+   */
+  isPopOver?: boolean;
+  /**
+   * Sets the position of the modal relative to its anchor.
+   * bottom: The modal appears below the anchor.
+   * right: The modal appears to the right of the anchor.
+   */
+  modalPosition?: 'bottom' | 'right' | 'top' | 'left';
+  /**
+   * Adds a top-left aligned arrow to the modal when its position is set to `'right'`.
+   */
+  leftTopArrow?: boolean;
+  /**
+   * A reference to an additional anchor element for positioning the modal.
+   */
+  firstAnchorRef?: RefObject<HTMLButtonElement>;
+  /**
+   * A numeric value representing the left position of the anchor element, used to calculate the modal's left position.
+   */
+  anchorRefLeftNum?: number;
+  /**
+   * Optional properties for configuring the modal's dimensions.
+   * width: The width of the modal.
+   * height: The height of the modal.
+   */
+  modalProperties?: ModalDimensions;
+  /**distance for the wrapper model from align alignments */
+  anchorLeftDistanceForWrapper?: number;
+  /**extra top space added from anchor */
+  extraTopSpace?: {
+    wrappedModal?: number;
+    normalModal?: number;
+  };
+  /**extra right space added from anchor */
+  extraRightSpace?: {
+    leftTopArrow?: number;
+    middleLeftArrow?: number;
+  };
+  /**extra left space added from anchor */
+  extraLeftSpace?: {
+    normal?: number;
+    rightAlignModal?: number;
+  };
+}
+export interface Rect {
+  top: number;
+  left: number;
+  bottom: number;
+  right: number;
+}
+
+export interface AvailableSpace {
+  spaceTop: number;
+  spaceLeft: number;
+  spaceRight: number;
+  spaceBottom: number;
+}

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

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Modal from './Modal';
+import { useState } from 'react';
+import Button from '../Button';
+
+const meta: Meta<typeof Modal> = {
+  title: 'Components/Modal',
+  component: Modal,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Modal>;
+
+export const DefaultModalStory: Story = {
+  args: {
+    isOpen: true,
+    contentLabel: 'modal',
+    ariaHideApp: true,
+    isHeaderDisplayed: true,
+    headerContent: <h2>title</h2>,
+    children: <h2>Hello</h2>,
+    isFooterDisplayed: true,
+    footerContent: <Button variant="primary" label="continue" />,
+    customWidth: '660px',
+    customHeight: 'auto',
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [openModal, setModal] = useState(false);
+    return (
+      <>
+        <Button
+          variant="primary"
+          onClick={() => {
+            setModal(true);
+          }}
+        >
+          Show Modal
+        </Button>
+        {openModal && (
+          <Modal
+            overlayClassName="custom-overlay"
+            isOpen={openModal}
+            onClose={() => {
+              setModal(false);
+            }}
+            headerContent={<div>title</div>}
+            isHeaderDisplayed={true}
+            children={<div>Hello</div>}
+            ariaHideApp={true}
+            isFooterDisplayed={true}
+            footerContent={<Button variant="primary" label="continue" />}
+            customWidth="660px"
+            customHeight="auto"
+          />
+        )}
+      </>
+    );
+  },
+};
+
+export default meta;

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,77 @@
+import React, { useContext, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import './modal.scss';
+import { ModalProps } from './types';
+import { ThemeContext } from '../ThemeProvider/ThemeProvider';
+
+const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  contentLabel,
+  isHeaderDisplayed,
+  headerContent,
+  footerContent,
+  contentClassName,
+  isFooterDisplayed,
+  overlayClassName,
+  shouldCloseOnEsc = true,
+  ariaHideApp = true,
+  shouldCloseOnOverlayClick = true,
+  customWidth = '660px', // default width
+  customHeight = 'auto', // default height
+  children,
+  zIndex = 999,
+}) => {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && shouldCloseOnEsc) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown);
+      if (ariaHideApp) {
+        document.body.style.overflow = 'hidden';
+      }
+    }
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      if (ariaHideApp) {
+        document.body.style.overflow = '';
+      }
+    };
+  }, [isOpen, onClose, ariaHideApp, shouldCloseOnEsc]);
+
+  if (!isOpen) return null;
+  const themeContext = useContext(ThemeContext);
+  const currentTheme = themeContext?.currentTheme;
+
+  return createPortal(
+    <div
+      className={`ff-modal-overlay ${overlayClassName || ''}`}
+      style={{ zIndex: zIndex }}
+      onClick={shouldCloseOnOverlayClick ? onClose : undefined}
+    >
+      <div
+        className={`ff-modal-content ${currentTheme} ${contentClassName || ''}`}
+        style={{ width: customWidth, height: customHeight }}
+        onClick={(e) => e.stopPropagation()}
+        aria-label={contentLabel}
+      >
+        {isHeaderDisplayed && (
+          <div className="ff-modal-header">{headerContent}</div>
+        )}
+        {children}
+      </div>
+      {isFooterDisplayed && (
+        <div className="ff-modal-footer" style={{ width: customWidth }}>
+          {footerContent}
+        </div>
+      )}
+    </div>,
+    document.body
+  );
+};
+
+export default Modal;

package/src/components/Modal/index.tsx

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

package/src/components/Modal/modal.scss

@@ -0,0 +1,39 @@
+@use '../../assets/styles/mixins' as *;
+
+.ff-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--background-modal-color);
+  @include center-content;
+  flex-direction: column;
+}
+
+.ff-modal-content {
+  background: var(--ff-mini-modal-border);
+  position: relative;
+  max-width: 100%;
+  border-radius: 12px;
+  padding: 8px;
+  
+  .ff-modal-header {
+    height: 32px;
+    width: 100%;
+  }
+}
+
+.ff-modal-footer {
+  background-color: var(--expandable-menu-option-bg);
+  max-width: 100%;
+  width: 100%;
+  height: 32px;
+  border-radius: 0 0 12px 12px;
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 16px;
+}

package/src/components/Modal/types.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+
+  /*** label value for aria-label  */
+  contentLabel?: string;
+
+  /*** default header will be provided with title and close icon. */
+  isHeaderDisplayed: boolean;
+
+  /*** Title to be displayed in the header when defaultHeader is true*/
+  headerTitle?: string;
+
+  /*** Custom class names for the modal content */
+  contentClassName?: string;
+
+  /*** Custom class name for the overlay */
+  overlayClassName?: string;
+
+  /*** Whether the modal should close when the 'Escape' key is pressed */
+  shouldCloseOnEsc?: boolean;
+
+  /*** Whether to hide the app from screen readers when the modal is open */
+  ariaHideApp?: boolean; //for screen readers
+
+  /*** Whether the modal should close when clicking outside of it (on the overlay) */
+  shouldCloseOnOverlayClick?: boolean;
+  //   shouldFocusAfterRender?: boolean;
+  //   shouldReturnFocusAfterClose?: boolean;
+  headerContent?: string | ReactNode;
+  footerContent?: ReactNode;
+  /***Content to be displayed inside the modal */
+  children: ReactNode;
+  isFooterDisplayed: boolean;
+  customWidth: string;
+  customHeight?: string;
+  zIndex?: number;
+}

package/src/components/MultiSelect/Dropdown.scss

@@ -0,0 +1,77 @@
+@use '../../assets/styles/fonts';
+
+.ff-multiselect-dropdown-container {
+  position: absolute;
+  background: var(--drawer-footer-bg);
+  z-index: 1000;
+  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
+  border: 0.5px solid var(--ff-select-option-border-color);
+  border-radius: 4px;
+  box-sizing: border-box;
+  margin-block: 4px;
+  max-height: 160px;
+
+  .ff-multiselect-options-wrapper {
+    max-height: 128px;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 40px;
+      border-radius: 12px 0px 0px 0px;
+      background: var(--description-text);
+
+      &-track {
+        background: var(--ff-select-scroll-track-bg);
+      }
+
+      &-thumb {
+        background: var(--ff-select-scroll-thumb-color);
+        border-radius: 10px;
+
+        &:hover {
+          background: var(--ff-select-scroll-thumb-hover);
+        }
+      }
+    }
+  }
+
+  .no-options {
+    @extend .fontMd;
+    color: var(--pop-up-background-blur);
+    text-align: center;
+    margin: 0;
+    padding: 10px;
+    line-height: 12px;
+  }
+  .dropdown-option-container {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    padding: 4px 8px;
+    gap: 4px;
+    border-radius: 4px 0px 0px 0px;
+    background-color: white;
+
+    .dropdown-option-label {
+      @extend .fontMd;
+      color: var(--ff-select-text-color);
+    }
+    &:hover {
+      background-color: var(--hover-color);
+    }
+  }
+
+  &:focus {
+    outline: none;
+  }
+  .select-button-container {
+    box-sizing: border-box;
+    width: 100%;
+    border-top: 1px solid var(--slider-table-color);
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}