pixel-react 1.8.4 → 1.8.6

package/src/components/MiniModal/index.ts

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

package/src/components/MiniModal/types.ts

@@ -1,124 +1,124 @@
-import { ReactNode, RefObject } from 'react';
-interface ModalDimensions {
-  width?: number;
-  height?: number;
-  borderRadius?: number;
-  zIndex?: number;
-  boxShadow?: string;
-  left?: number;
-  top?: number;
-  padding?: number;
-}
-export interface MiniEditModalProps {
-  /**
-   * A reference to the button element that triggers the modal.
-   */
-  anchorRef: RefObject<HTMLButtonElement> | string;
-  /**
-   * 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?: any;
-  /**
-   * Props for the proceed button inside the modal.
-   */
-  proceedButtonProps?: any;
-  /**
-   * 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;
-  /**
-   * Specifies if the modal should behave as a popover with an arrow.
-   */
-  isIconModel?: 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;
-  };
-  wrapperProperties?: {
-    width?: number;
-    zIndex?: number;
-    boxShadow?: string;
-  };
-  arrowZIndex?: number;
-  arrowProperties?: {
-    left?: number;
-    top?: number;
-    size?: number;
-  };
-  overlay?: {
-    isOverlay?: boolean;
-    zIndexOverlay?: number;
-    backgroundColorOverlay?: string;
-  };
-  outSideClick?: any;
-}
-export interface Rect {
-  top: number;
-  left: number;
-  bottom: number;
-  right: number;
-}
-
-export interface AvailableSpace {
-  spaceTop: number;
-  spaceLeft: number;
-  spaceRight: number;
-  spaceBottom: number;
-}
+import { ReactNode, RefObject } from 'react';
+interface ModalDimensions {
+  width?: number;
+  height?: number;
+  borderRadius?: number;
+  zIndex?: number;
+  boxShadow?: string;
+  left?: number;
+  top?: number;
+  padding?: number;
+}
+export interface MiniEditModalProps {
+  /**
+   * A reference to the button element that triggers the modal.
+   */
+  anchorRef: RefObject<HTMLButtonElement> | string;
+  /**
+   * 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?: any;
+  /**
+   * Props for the proceed button inside the modal.
+   */
+  proceedButtonProps?: any;
+  /**
+   * 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;
+  /**
+   * Specifies if the modal should behave as a popover with an arrow.
+   */
+  isIconModel?: 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;
+  };
+  wrapperProperties?: {
+    width?: number;
+    zIndex?: number;
+    boxShadow?: string;
+  };
+  arrowZIndex?: number;
+  arrowProperties?: {
+    left?: number;
+    top?: number;
+    size?: number;
+  };
+  overlay?: {
+    isOverlay?: boolean;
+    zIndexOverlay?: number;
+    backgroundColorOverlay?: string;
+  };
+  outSideClick?: any;
+}
+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

@@ -1,70 +1,77 @@
-import React, { useState } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-import Modal from './Modal';
-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',
-    border: '1px solid #E79B0866',
-  },
-};
-
-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"
-            border="1px solid var(--warning-modal-border-color)"
-          />
-        )}
-      </>
-    );
-  },
-};
-
-export default meta;
+import React, { useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import Modal from './Modal';
+import Button from '../Button';
+import { useKeyboardActions } from '../../utils/keyBoardActionUtil/UseKeyboardActions';
+
+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',
+    border: '1px solid #E79B0866',
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [openModal, setModal] = useState(false);
+    useKeyboardActions([
+      {
+        key: 'Enter',
+        action: () => alert('Enter key was pressed.'),
+      },
+    ]);
+    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"
+            border="1px solid var(--warning-modal-border-color)"
+          />
+        )}
+      </>
+    );
+  },
+};
+
+export default meta;

package/src/components/Modal/Modal.tsx

@@ -1,100 +1,97 @@
-import React, { useContext, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import './modal.scss';
-import { ModalProps } from './types';
-import { ThemeContext } from '../ThemeProvider/ThemeProvider';
-import classNames from 'classnames';
-
-const Modal: React.FC<ModalProps> = ({
-  isOpen,
-  onClose,
-  contentLabel,
-  isHeaderDisplayed,
-  headerContent,
-  footerContent,
-  contentClassName,
-  isFooterDisplayed,
-  overlayClassName,
-  shouldCloseOnEsc = true,
-  ariaHideApp = true,
-  shouldCloseOnOverlayClick = true,
-  customWidth = '660px',
-  customHeight = 'auto',
-  children,
-  zIndex = 999,
-  boxShadow = '',
-  border = '',
-  background='',
-}) => {
-  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
-        style={{
-          boxShadow: boxShadow,
-          border: border,
-          borderRadius: '8px',
-          background: background,
-        }}
-        className="ff-modal-container"
-      >
-        <div
-          className={classNames(
-            `ff-modal-content ${currentTheme} ${contentClassName}`,
-            {
-              'modal-bottom-border': !isFooterDisplayed,
-              'modal-top-border': !isHeaderDisplayed,
-            }
-          )}
-          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>
-    </div>,
-    document.body
-  );
-};
-
-export default Modal;
+import React, { useContext } from 'react';
+import { createPortal } from 'react-dom';
+import './modal.scss';
+import { ModalProps } from './types';
+import { ThemeContext } from '../ThemeProvider/ThemeProvider';
+import classNames from 'classnames';
+import { useKeyboardActions } from '../../utils/keyBoardActionUtil/UseKeyboardActions';
+
+const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  contentLabel,
+  isHeaderDisplayed,
+  headerContent,
+  footerContent,
+  contentClassName,
+  isFooterDisplayed,
+  overlayClassName,
+  shouldCloseOnEsc = true,
+  ariaHideApp = true,
+  shouldCloseOnOverlayClick = true,
+  customWidth = '660px',
+  customHeight = 'auto',
+  children,
+  zIndex = 999,
+  boxShadow = '',
+  border = '',
+  background='',
+}) => {
+
+ useKeyboardActions(
+   shouldCloseOnEsc && isOpen
+     ? [
+         {
+           key: 'Escape',
+           action: onClose,
+         },
+       ]
+     : []
+ );
+
+ if (!isOpen) return null;
+
+ if (ariaHideApp) {
+   document.body.style.overflow = isOpen ? 'hidden' : '';
+ }
+  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
+        style={{
+          boxShadow: boxShadow,
+          border: border,
+          borderRadius: '8px',
+          background: background,
+        }}
+        className="ff-modal-container"
+      >
+        <div
+          className={classNames(
+            `ff-modal-content ${currentTheme} ${contentClassName}`,
+            {
+              'modal-bottom-border': !isFooterDisplayed,
+              'modal-top-border': !isHeaderDisplayed,
+            }
+          )}
+          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>
+    </div>,
+    document.body
+  );
+};
+
+export default Modal;

package/src/components/Modal/index.tsx

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