pixel-react 1.1.6 → 1.1.7

package/src/components/MiniModal/MiniModal.stories.tsx

@@ -27,6 +27,9 @@ const useModal = () => {
 const BasicModalComponent = () => {
   const btnRef1 = useRef<HTMLButtonElement>(null);
   const btnRef2 = useRef<HTMLButtonElement>(null);
+  const btnRef3 = useRef<HTMLButtonElement>(null);
+  const btnRef4 = useRef<HTMLButtonElement>(null);
+  const btnRef5 = useRef<HTMLButtonElement>(null);
   const { currentModal, openModal, closeModal } = useModal();
 
   const handleCancel = () => {
@@ -45,6 +48,7 @@ const BasicModalComponent = () => {
       {currentModal === 1 && (
         <MiniModal
           anchorRef={btnRef1}
+          modalProperties={{ width: 300, height: 180 }}
           headerProps={
             <>
               <Typography as="p">Modal 1</Typography>
@@ -68,7 +72,9 @@ const BasicModalComponent = () => {
             onClick: () => {},
           }}
           isWrapped={false}
+          isPopOver={false}
           isAnimated={true}
+          modalPosition="left"
         />
       )}
 
@@ -82,17 +88,16 @@ const BasicModalComponent = () => {
       {currentModal === 2 && (
         <MiniModal
           anchorRef={btnRef2}
+          modalProperties={{ width: 300, height: 180 }}
           headerProps={
             <>
-              <Typography as="p" fontSize={12} fontWeight="regular">
-                Modal 2
-              </Typography>
+              <Typography as="p">Modal 2</Typography>
               <hr />
             </>
           }
           childContent={
             <>
-              <Typography as="p" fontSize={12} fontWeight="regular">
+              <Typography as="p">
                 This is some content inside the second modal.
               </Typography>
             </>
@@ -107,47 +112,31 @@ const BasicModalComponent = () => {
           }}
           isWrapped={false}
           isAnimated={false}
+          isPopOver={false}
+          modalPosition="top"
         />
       )}
-    </div>
-  );
-};
-export const BasicModal: Story = {
-  render: () => <BasicModalComponent />,
-};
-export const CustomModalWithWrapper = () => {
-  const btnRef1 = useRef<HTMLButtonElement>(null);
-  const btnRef2 = useRef<HTMLButtonElement>(null);
-  const btnRef3 = useRef<HTMLButtonElement>(null);
-  const { currentModal, openModal, closeModal } = useModal();
-
-  const handleCancel = () => {
-    closeModal();
-  };
-
-  return (
-    <div className="ff-mini-modal-buttons-flex ff-mini-modal-gap-10">
       <Button
-        onClick={() => openModal(1)}
-        ref={btnRef1}
-        label="1"
-        variant={currentModal === 1 ? 'primary' : 'secondary'}
+        onClick={() => openModal(3)}
+        ref={btnRef3}
+        label="3"
+        variant={currentModal === 3 ? 'primary' : 'secondary'}
       />
 
-      {currentModal === 1 && (
+      {currentModal === 3 && (
         <MiniModal
-          anchorRef={btnRef1}
-          modalProperties={{ width: 487, height: 180 }}
+          anchorRef={btnRef3}
+          modalProperties={{ width: 300, height: 180 }}
           headerProps={
             <>
-              <Typography as="p">Update Label For Scripts</Typography>
+              <Typography as="p">Modal 3</Typography>
               <hr />
             </>
           }
           childContent={
             <>
               <Typography as="p">
-                This is some content inside the first modal.
+                This is some content inside the second modal.
               </Typography>
             </>
           }
@@ -156,76 +145,74 @@ export const CustomModalWithWrapper = () => {
             onClick: handleCancel,
           }}
           proceedButtonProps={{
-            text: 'Update',
+            text: 'Proceed',
             onClick: () => {},
           }}
-          isWrapped={true}
-          isAnimated={true}
-          firstAnchorRef={btnRef1}
-          anchorRefLeftNum={164}
-          anchorLeftDistanceForWrapper={170}
-          extraTopSpace={{ normalModal: 5 }}
+          isWrapped={false}
+          isAnimated={false}
+          isPopOver={false}
+          modalPosition="top"
         />
       )}
-
       <Button
-        onClick={() => openModal(2)}
-        ref={btnRef2}
-        label="2"
-        variant={currentModal === 2 ? 'primary' : 'secondary'}
+        onClick={() => openModal(4)}
+        ref={btnRef4}
+        label="4"
+        variant={currentModal === 4 ? 'primary' : 'secondary'}
       />
 
-      {currentModal === 2 && (
+      {currentModal === 4 && (
         <MiniModal
-          anchorRef={btnRef2}
-          modalProperties={{ width: 358, height: 135 }}
+          anchorRef={btnRef4}
+          modalProperties={{ width: 300, height: 180 }}
           headerProps={
             <>
-              <Typography as="p">Export Selected scripts</Typography>
+              <Typography as="p">Modal 4</Typography>
               <hr />
             </>
           }
           childContent={
-            <Typography as="p">Child content modify here</Typography>
+            <>
+              <Typography as="p">
+                This is some content inside the second modal.
+              </Typography>
+            </>
           }
           cancelButtonProps={{
             text: 'Cancel',
             onClick: handleCancel,
           }}
           proceedButtonProps={{
-            text: 'Export',
+            text: 'Proceed',
             onClick: () => {},
           }}
-          isWrapped={true}
+          isWrapped={false}
           isAnimated={false}
-          firstAnchorRef={btnRef1}
-          anchorRefLeftNum={193}
-          anchorLeftDistanceForWrapper={170}
-          extraTopSpace={{ normalModal: 5 }}
+          isPopOver={false}
+          modalPosition="bottom"
         />
       )}
-
       <Button
-        onClick={() => openModal(3)}
-        ref={btnRef3}
-        label="3"
-        variant={currentModal === 3 ? 'primary' : 'secondary'}
+        onClick={() => openModal(5)}
+        ref={btnRef5}
+        label="5"
+        variant={currentModal === 5 ? 'primary' : 'secondary'}
       />
 
-      {currentModal === 3 && (
+      {currentModal === 5 && (
         <MiniModal
-          anchorRef={btnRef3}
-          modalProperties={{ width: 487, height: 210 }}
+          anchorRef={btnRef5}
+          modalProperties={{ width: 300, height: 180 }}
           headerProps={
             <>
-              <Typography as="p">Delete Selected Scripts</Typography>
+              <Typography as="p">Modal 5</Typography>
               <hr />
             </>
           }
           childContent={
             <>
               <Typography as="p">
-                This is some content inside the third modal.
+                This is some content inside the second modal.
               </Typography>
             </>
           }
@@ -234,20 +221,22 @@ export const CustomModalWithWrapper = () => {
             onClick: handleCancel,
           }}
           proceedButtonProps={{
-            text: 'Delete',
+            text: 'Proceed',
             onClick: () => {},
           }}
-          isWrapped={true}
-          isAnimated={true}
-          firstAnchorRef={btnRef1}
-          anchorRefLeftNum={225}
-          anchorLeftDistanceForWrapper={170}
-          extraTopSpace={{ normalModal: 5 }}
+          isWrapped={false}
+          isAnimated={false}
+          isPopOver={false}
+          modalPosition="right"
         />
       )}
     </div>
   );
 };
+export const BasicModal: Story = {
+  render: () => <BasicModalComponent />,
+};
+
 export const CustomModalWithArrow = () => {
   const btnRef1 = useRef<HTMLButtonElement>(null);
   const btnRef2 = useRef<HTMLButtonElement>(null);
@@ -272,7 +261,7 @@ export const CustomModalWithArrow = () => {
       {currentModal === 1 && (
         <MiniModal
           anchorRef={btnRef1}
-          modalProperties={{ width: 400, height: 350 }}
+          modalProperties={{ width: 300, height: 250 }}
           headerProps={
             <>
               <Typography as="p">Modal 1</Typography>
@@ -315,7 +304,7 @@ export const CustomModalWithArrow = () => {
 
       {currentModal === 2 && (
         <MiniModal
-          modalProperties={{ width: 400, height: 350 }}
+          modalProperties={{ width: 300, height: 350 }}
           anchorRef={btnRef2}
           headerProps={
             <>
@@ -343,6 +332,7 @@ export const CustomModalWithArrow = () => {
           isAnimated={false}
           isPopOver={true}
           modalPosition="right"
+          leftTopArrow={false}
           extraRightSpace={{ middleLeftArrow: 4 }}
           extraLeftSpace={{ rightAlignModal: 40 }}
         />
@@ -357,6 +347,7 @@ export const CustomModalWithArrow = () => {
       {currentModal === 3 && (
         <MiniModal
           anchorRef={btnRef3}
+          modalProperties={{ width: 300, height: 250 }}
           headerProps={
             <>
               <Typography as="p">Modal 3</Typography>
@@ -396,7 +387,7 @@ export const CustomModalWithArrow = () => {
       {currentModal === 4 && (
         <MiniModal
           anchorRef={btnRef4}
-          modalProperties={{ height: 148 }}
+          modalProperties={{ width: 300, height: 200 }}
           headerProps={
             <>
               <Typography as="p">Modal 4</Typography>
@@ -437,7 +428,7 @@ export const CustomModalWithArrow = () => {
       {currentModal === 5 && (
         <MiniModal
           anchorRef={btnRef5}
-          modalProperties={{ height: 148, width: 404 }}
+          modalProperties={{ height: 148, width: 304 }}
           headerProps={
             <>
               <Typography as="p">Modal 5</Typography>
@@ -471,5 +462,138 @@ export const CustomModalWithArrow = () => {
     </div>
   );
 };
+export const CustomModalWithWrapper = () => {
+  const btnRef1 = useRef<HTMLButtonElement>(null);
+  const btnRef2 = useRef<HTMLButtonElement>(null);
+  const btnRef3 = useRef<HTMLButtonElement>(null);
+  const { currentModal, openModal, closeModal } = useModal();
+
+  const handleCancel = () => {
+    closeModal();
+  };
+
+  return (
+    <div className="ff-mini-modal-buttons-flex ff-mini-modal-gap-10">
+      <Button
+        onClick={() => openModal(1)}
+        ref={btnRef1}
+        label="1"
+        variant={currentModal === 1 ? 'primary' : 'secondary'}
+      />
+
+      {currentModal === 1 && (
+        <MiniModal
+          anchorRef={btnRef1}
+          modalProperties={{ width: 487, height: 180 }}
+          headerProps={
+            <>
+              <Typography as="p">Update Label For Scripts</Typography>
+              <hr />
+            </>
+          }
+          childContent={
+            <>
+              <Typography as="p">
+                This is some content inside the first modal.
+              </Typography>
+            </>
+          }
+          cancelButtonProps={{
+            text: 'Cancel',
+            onClick: handleCancel,
+          }}
+          proceedButtonProps={{
+            text: 'Update',
+            onClick: () => {},
+          }}
+          isWrapped={true}
+          isAnimated={true}
+          firstAnchorRef={btnRef1}
+          anchorRefLeftNum={164}
+          anchorLeftDistanceForWrapper={170}
+          extraTopSpace={{ normalModal: 5 }}
+        />
+      )}
+
+      <Button
+        onClick={() => openModal(2)}
+        ref={btnRef2}
+        label="2"
+        variant={currentModal === 2 ? 'primary' : 'secondary'}
+      />
+
+      {currentModal === 2 && (
+        <MiniModal
+          anchorRef={btnRef2}
+          modalProperties={{ width: 358, height: 135 }}
+          headerProps={
+            <>
+              <Typography as="p">Export Selected scripts</Typography>
+              <hr />
+            </>
+          }
+          childContent={
+            <Typography as="p">Child content modify here</Typography>
+          }
+          cancelButtonProps={{
+            text: 'Cancel',
+            onClick: handleCancel,
+          }}
+          proceedButtonProps={{
+            text: 'Export',
+            onClick: () => {},
+          }}
+          isWrapped={true}
+          isAnimated={false}
+          firstAnchorRef={btnRef1}
+          anchorRefLeftNum={193}
+          anchorLeftDistanceForWrapper={170}
+          extraTopSpace={{ normalModal: 5 }}
+        />
+      )}
+
+      <Button
+        onClick={() => openModal(3)}
+        ref={btnRef3}
+        label="3"
+        variant={currentModal === 3 ? 'primary' : 'secondary'}
+      />
+
+      {currentModal === 3 && (
+        <MiniModal
+          anchorRef={btnRef3}
+          modalProperties={{ width: 487, height: 210 }}
+          headerProps={
+            <>
+              <Typography as="p">Delete Selected Scripts</Typography>
+              <hr />
+            </>
+          }
+          childContent={
+            <>
+              <Typography as="p">
+                This is some content inside the third modal.
+              </Typography>
+            </>
+          }
+          cancelButtonProps={{
+            text: 'Cancel',
+            onClick: handleCancel,
+          }}
+          proceedButtonProps={{
+            text: 'Delete',
+            onClick: () => {},
+          }}
+          isWrapped={true}
+          isAnimated={true}
+          firstAnchorRef={btnRef1}
+          anchorRefLeftNum={225}
+          anchorLeftDistanceForWrapper={170}
+          extraTopSpace={{ normalModal: 5 }}
+        />
+      )}
+    </div>
+  );
+};
 
 export default meta;

package/src/components/MiniModal/MiniModal.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState, useCallback, forwardRef } from 'react';
 import { createPortal } from 'react-dom';
-import { MiniEditModalProps } from './types.js';
+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';
@@ -38,6 +38,47 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
     });
     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) => {
@@ -174,7 +215,10 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
           ></div>
         )}
         <div
-          className="mini-edit-modal"
+          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`,

package/src/components/MiniModal/types.ts

@@ -86,3 +86,16 @@ export interface MiniEditModalProps {
     rightAlignModal?: number;
   };
 }
+export interface Rect {
+  top: number;
+  left: number;
+  bottom: number;
+  right: number;
+}
+
+export interface AvailableSpace {
+  spaceTop: number;
+  spaceLeft: number;
+  spaceRight: number;
+  spaceBottom: number;
+}