pixel-react 1.7.5 → 1.7.6

package/src/components/FileDropzone/RadioFilePreview.tsx

@@ -8,14 +8,18 @@ import { useRef } from 'react';
 const RadioFilePreview: React.FC<RadioFilePreviewProps> = ({
   selectedFile,
   onFileRemoveClick,
-  onFileReplaceClick
+  onFileReplaceClick,
+  selectedRadioOption,
+  setShowDrawer,
 }) => {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   const handleReplaceClick = () => {
-    if (fileInputRef.current) {
-      fileInputRef.current.click();
+    if (selectedRadioOption?.value === 'Test Data') {
+      setShowDrawer?.(true);
+      return;
     }
+    fileInputRef.current?.click();
   };
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {

package/src/components/FileDropzone/types.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { DynamicObj } from '../CreateVariable/types';
 export interface RadioOption {
   label: string;
   value: string;
@@ -93,12 +94,12 @@ export interface FileDropzoneProps {
   /**
    *  Its the File Name of File Selected from Local File.
    **/
-  setSelectedFile?: (file: File | null) => void;
+  setSelectedFile?: (file: File | DynamicObj | null) => void;
 
   /**
    *  Its the File Name of File Selected from Local File.
    **/
-  selectedFile?: File | null;
+  selectedFile?: File | DynamicObj | null;
 
   /**
    *  Its the function which updates the Selected file from Local Directory.
@@ -120,6 +121,11 @@ export interface FileDropzoneProps {
    **/
   isDisable?: boolean;
 
+   /**
+   *  Its the boolean value setted when the replace is clicked for TestData radio option .
+   **/
+  setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
+
 }
 export interface FileState {
   accepted: File[];
@@ -176,11 +182,12 @@ export interface DroppableProps {
   selectedRadioOption?: Option, 
   radioOptions?: RadioOption[],
   handleOptionChange?: (option: RadioOption)=> void,
-  selectedFile?: File | null,
-  setSelectedFile?: (file: File | null) => void;
+  selectedFile?: File | DynamicObj | null,
+  setSelectedFile?: (file: File | DynamicObj | null) => void;
   handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   handleRemoveFile?: () => void;
   isDisable?: boolean;
+  setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
 }
 
 export interface FilePreviewProps {
@@ -196,4 +203,6 @@ export interface RadioFilePreviewProps {
   onFileRemoveClick?: () => void;
   onFileReplaceClick?: (file: File | null) => void;
   setSelectedFile?: (file: File | null) => void;
+  selectedRadioOption?: Option,
+  setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void
 }

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

@@ -135,13 +135,12 @@ export const MenuOptionBottom: Story = {
     dropdownPlacement: 'down',
   },
   render: (args) => {
-    const moreRef = useRef<HTMLDivElement>(null);
     return (
-      <div ref={moreRef}>
+      <div id="more">
         <MenuOption
           {...args}
           options={options}
-          targetRef={moreRef}
+          targetRef={'more'}
           onOptionClick={handleOptionClick}
         />
       </div>

package/src/components/MenuOption/MenuOption.tsx

@@ -57,9 +57,9 @@ const OptionCard = ({
 
   useEffect(() => {
     if (optionCardRef?.current) {
-      const rect = optionCardRef.current.getBoundingClientRect();
-      setOptionsHeight(rect.height);
-      setOptionsWidth(rect.width);
+      const rect = optionCardRef?.current?.getBoundingClientRect();
+      setOptionsHeight(rect?.height);
+      setOptionsWidth(rect?.width);
     }
   }, []);
 
@@ -74,7 +74,7 @@ const OptionCard = ({
         };
       case 'down':
         return {
-          top: menuPosition.top + menuPosition.height + 7,
+          top: menuPosition.top + 20,
           left: menuPosition.left - 4,
         };
       case 'left':
@@ -85,22 +85,16 @@ const OptionCard = ({
       case 'right':
         return {
           top: menuPosition.top - 4,
-          left: menuPosition.left + menuPosition.height + 20,
+          left: menuPosition.left + 20,
         };
       default:
         return {
-          top: menuPosition.top,
-          left: menuPosition.left,
+          top: menuPosition.bottom,
+          left: menuPosition.rightSpaceAvailable + 12,
         };
     }
   })();
 
-  const adjustedStyle = {
-    top: Math.min(Math.max(style.top, 0), window.innerHeight - optionsHeight),
-    left: Math.min(Math.max(style.left, 0), window.innerWidth - optionsWidth),
-    zIndex,
-  };
-
   return createPortal(
     <div
       className={classNames(
@@ -108,7 +102,7 @@ const OptionCard = ({
         [{ 'ff-option-card--primary': variant === 'primary' }],
         currentTheme
       )}
-      style={adjustedStyle}
+      style={{ ...style, zIndex }}
       ref={optionCardRef}
     >
       {options.map((opt) => (
@@ -147,21 +141,6 @@ const MenuOption = ({
 
   const closeDropDown = () => setIsClicked(false);
 
-  const calculateDims = () => {
-    if (targetRef?.current) {
-      const rect = targetRef.current.getBoundingClientRect();
-      const containerScrollTop = targetRef.current?.offsetParent?.scrollTop || 0;
-      const containerScrollLeft = targetRef.current?.offsetParent?.scrollLeft || 0;
-
-      setMenuPosition({
-        top: rect.top + window.scrollY - containerScrollTop,
-        left: rect.left + window.scrollX - containerScrollLeft,
-        height: rect.height,
-        right: rect.right,
-      });
-    }
-  };
-
   const onIconClickHandler = () => {
     onClick();
     calculateDims();
@@ -173,6 +152,25 @@ const MenuOption = ({
     closeDropDown();
   };
 
+  const calculateDims = () => {
+    let targetElement: HTMLElement | null = null;
+    if (typeof targetRef === 'string') {
+      targetElement = document.getElementById(targetRef);
+    } else if (targetRef && targetRef.current) {
+      targetElement = targetRef.current;
+    }
+
+    if (targetElement) {
+      const rect = targetElement.getBoundingClientRect();
+      setMenuPosition({
+        top: rect.top + window.scrollY,
+        left: rect.left + window.scrollX,
+        height: rect.height,
+        right: rect.right,
+      });
+    }
+  };
+
   return (
     <div className="ff-menu-option-container" ref={menuRef}>
       <Tooltip title={tooltipTitle} placement={tooltipPlacement}>

package/src/components/MenuOption/types.ts

@@ -208,7 +208,7 @@ interface MenuOptionProps {
    * @optional
    */
   optionCardVariant?: 'primary';
-  targetRef?: React.RefObject<HTMLElement>;
+  targetRef?: string | React.RefObject<HTMLElement>;
 }
 
 interface OptionProps {

package/src/components/PopUpModal/types.ts

@@ -5,12 +5,13 @@ export interface PopUpModalProps {
   titleMessage: string;
   subTitleMessage?: string;
   iconName: string;
-  modalMessage: string;
+  modalMessage: string | React.ReactNode;
+  secondaryMessage?: string | React.ReactNode;
   firstButtonLabel?: string;
   secondButtonLabel: string;
   buttonVariant: any;
   border: string;
-    popupWidth?:string,
+  popupWidth?: string;
   colorForTitleMessage?: string;
-  footerContent?:React.ReactNode;
+  footerContent?: React.ReactNode;
 }

package/src/components/Search/Search.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Search from './Search';
-import React,{ useState } from 'react';
+import React, { useState } from 'react';
 const meta: Meta<typeof Search> = {
   title: 'Components/Search',
   component: Search,
@@ -17,7 +17,6 @@ export const Default: Story = {
     const [searchValue, setSearchValue] = useState('');
 
     const handleSearch = (value: string) => {
-      alert(`Searching for: ${value}`);
       setSearchValue(value);
     };
 

package/lib/components/TableTree/TableTree copy.d.ts

@@ -1,25 +0,0 @@
-import React, { ReactNode } from 'react';
-import './TableTree.scss';
-interface ColumnDataProps {
-    name: string;
-    accessor: string;
-    width: string;
-    isClickable?: boolean;
-    minWidth?: string;
-    cell?: (e: any) => JSX.Element | string | ReactNode;
-    actions?: (e: any) => JSX.Element | string | ReactNode;
-}
-interface ObjectProps {
-    [key: string]: any;
-}
-interface TableTreeProps {
-    select: 'checkbox' | 'radio' | 'none';
-    columnsData: Array<ColumnDataProps>;
-    treeData: Array<ObjectProps>;
-    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, data: any) => void;
-    onChange?: (e: any, node: any) => void;
-    selected: Array<string>;
-    onPagination?: (node: ObjectProps) => void;
-}
-declare const TableTree: ({ columnsData, treeData, select, onClick, onChange, selected, onPagination, }: TableTreeProps) => import("react/jsx-runtime").JSX.Element;
-export default TableTree;