pixel-react 1.7.5 → 1.7.7

package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import './ExcelToolBar.scss';
 import MenuOption from '../../MenuOption';
 import Tooltip from '../../Tooltip';
@@ -69,6 +69,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
   };
 
   const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
+  const underLineMenuRef = useRef<HTMLSpanElement>(null);
+  const borderMenuRef = useRef<HTMLSpanElement>(null);
 
   useEffect(() => {
     setCellStyle(cell?.style || basicStyle);
@@ -315,19 +317,22 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
               onClick={() => setUnderlineType(data, underLine, true)}
               name={getUnderlineIcon()}
             />
-            <MenuOption
-              iconName="arrow_down"
-              zIndex={1000}
-              iconSize={12}
-              options={underlineTypeIcon}
-              tooltipPlacement="top"
-              variant="light"
-              onOptionClick={(e) => {
-                let selectedValue = e.value as string;
-                setUnderlineType(data, selectedValue, true);
-                setUnderLine(selectedValue);
-              }}
-            />
+            <span ref={underLineMenuRef}>
+              <MenuOption
+                targetRef={underLineMenuRef}
+                iconName="arrow_down"
+                zIndex={1000}
+                iconSize={12}
+                options={underlineTypeIcon}
+                tooltipPlacement="top"
+                variant="light"
+                onOptionClick={(e) => {
+                  let selectedValue = e.value as string;
+                  setUnderlineType(data, selectedValue, true);
+                  setUnderLine(selectedValue);
+                }}
+              />
+            </span>
           </div>
         </Tooltip>
       </div>
@@ -391,19 +396,22 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
               onClick={() => setBorderType(data, border, 'black')}
               name={getBorderIcon()}
             />
-            <MenuOption
-              iconName="arrow_down"
-              iconSize={12}
-              zIndex={1000}
-              options={borderTypeIcon}
-              tooltipPlacement="top"
-              variant="light"
-              onOptionClick={(e) => {
-                let selectedValue = e.value as string;
-                setBorderType(data, selectedValue, 'black');
-                setBorder(selectedValue);
-              }}
-            />
+            <span ref={borderMenuRef}>
+              <MenuOption
+                iconName="arrow_down"
+                targetRef={borderMenuRef}
+                iconSize={12}
+                zIndex={1000}
+                options={borderTypeIcon}
+                tooltipPlacement="top"
+                variant="light"
+                onOptionClick={(e) => {
+                  let selectedValue = e.value as string;
+                  setBorderType(data, selectedValue, 'black');
+                  setBorder(selectedValue);
+                }}
+              />
+            </span>
           </div>
         </Tooltip>
       </div>

package/src/components/FileDropzone/Dropzone.tsx

@@ -24,6 +24,7 @@ const Dropzone: FC<DroppableProps> = ({
   setSelectedFile,
   handleRemoveFile,
   isDisable,
+  setShowDrawer,
 }) => {
   const isWebServiceFile = selectedFile?.name && isWebServiceFileDropZone;
   return (
@@ -42,6 +43,8 @@ const Dropzone: FC<DroppableProps> = ({
           onFileRemoveClick={handleRemoveFile}
           onFileReplaceClick={setSelectedFile}
           setSelectedFile={setSelectedFile}
+          selectedRadioOption={selectedRadioOption}
+          setShowDrawer={setShowDrawer}
         />
       ) : (
         <>

package/src/components/FileDropzone/FileDropzone.scss

@@ -4,6 +4,12 @@
   gap: $gap;
 }
 
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 @mixin center {
   display: grid;
   place-items: center;
@@ -160,4 +166,16 @@
 .ff-disable-file-dropzone-wrapper {
   opacity: 0.5;
   cursor: not-allowed;
+}
+.footer_basic_button {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  @include flex-center;
+  justify-content: flex-end;
+  gap: 16px;
+  border-top: 1px solid var(--border-color);
+  padding: 4px 8px;
+  background-color: var(--primary-icon-color);
 }

package/src/components/FileDropzone/FileDropzone.stories.tsx

@@ -5,8 +5,10 @@ import Toaster from '../Toast';
 import { useState } from 'react';
 import { RadioOption } from './types';
 import Drawer from '../Drawer/Drawer';
-import Typography from '../Typography';
+import ConditionalDropdown from '../ConditionalDropdown/ConditionalDropdown';
 import './FileDropzone.scss';
+import { DynamicObj } from '../CreateVariable/types';
+import Button from '../Button';
 
 const meta: Meta<typeof FileDropzone> = {
   title: 'Components/FileDropzone',
@@ -107,8 +109,12 @@ export const WithRadioButton: Story = {
 
     const [selectedRadioOption, setSelectedRadioOption] =
       useState<RadioOption>();
-    const [selectedFile, setSelectedFile] = useState<File | null>(null);
-
+    const [selectedFile, setSelectedFile] = useState<File | DynamicObj | null>(
+      null
+    );
+    const [testDataSelectedFile, setTestDataSelectedFile] = useState<
+      DynamicObj | File | null
+    >(null);
 
     const drawerArgs = {
       primaryButtonProps: {
@@ -156,6 +162,42 @@ export const WithRadioButton: Story = {
       }, 2000);
     };
 
+    const testData = [
+      {
+        _id: '1',
+        name: 'File1.txt',
+        actualPath: '/documents/File1.txt',
+        searchKey: 'file1',
+        parentId: 'root',
+      },
+      {
+        _id: '2',
+        name: 'File2.doc',
+        actualPath: '/documents/File2.doc',
+        searchKey: 'file2',
+        parentId: 'root',
+      },
+      {
+        _id: '3',
+        name: 'Image1.png',
+        actualPath: '/images/Image1.png',
+        searchKey: 'image1',
+        parentId: 'folder1',
+      },
+      {
+        _id: '4',
+        name: 'Presentation.ppt',
+        actualPath: '/presentations/Presentation.ppt',
+        searchKey: 'presentation',
+        parentId: 'folder2',
+      },
+    ];
+
+    const handleSaveButton = () => {
+      setSelectedFile(testDataSelectedFile);
+      setShowModal(false);
+    };
+
     return (
       <>
         <FileDropzone
@@ -176,6 +218,7 @@ export const WithRadioButton: Story = {
           selectedFile={selectedFile}
           handleFileChange={handleFileChange}
           handleRemoveFile={handleRemoveFile}
+          setShowDrawer={setShowModal}
         />
         {showToaster && (
           <Toaster
@@ -185,18 +228,43 @@ export const WithRadioButton: Story = {
             toastMessage={'Max 5 files can be uploaded'}
           />
         )}
-        {selectedRadioOption?.value === 'Local File' &&
+        {selectedRadioOption?.value === 'Test Data' && (
           <Drawer
             {...drawerArgs}
             isOpen={showModal}
             onClose={() => setShowModal(false)}
-            isFooterRequired={true}
+            isFooterRequired={false}
             _isExpanded={false}
             size="small"
+            
           >
-            <Typography>Upload TestData Files Here</Typography>
+            <ConditionalDropdown
+              label="Select Path Using #"
+              placeholder="Enter # to search files"
+              isHash
+              dataFiles={testData}
+              dropdownWidth="auto"
+              setHashInputValue={setTestDataSelectedFile}
+            />
+            <div className="footer_basic_button">
+              <Button
+                type="button"
+                variant="secondary"
+                size="small"
+                onClick={() => setShowModal(false)}
+                label={'Cancel'}
+              />
+
+              <Button
+                type={'button'}
+                variant="primary"
+                size="small"
+                label={'Save'}
+                onClick={handleSaveButton}
+              />
+            </div>
           </Drawer>
-        }
+        )}
       </>
     );
   },

package/src/components/FileDropzone/FileDropzone.tsx

@@ -38,6 +38,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
   handleRemoveFile,
   isApiResponseError = false,
   isDisable = false,
+  setShowDrawer,
 }) => {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const {
@@ -131,6 +132,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
         handleRemoveFile={handleRemoveFile}
         setSelectedFile={setSelectedFile}
         isDisable={isDisable}
+        setShowDrawer={setShowDrawer}
       />
 
       {isWebServiceFileDropZone && (

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/Icon/iconList.ts

@@ -45,7 +45,7 @@ import ManualLocator from '../../assets/icons/manual_locator.svg?react';
 import LicenseIcon from '../../assets/icons/active_license_icon.svg?react';
 import DeleteIcon from '../../assets/icons/delete.svg?react';
 import DetailsIcon from '../../assets/icons/details.svg?react';
-import ImpactListIcon from '../../assets/icons/impactList.svg?react';
+import ImpactListIcon from '../../assets/icons/impact_list.svg?react';
 import Export from '../../assets/icons/export.svg?react';
 import FormatePainter from '../../assets/icons/formate_painter.svg?react';
 import Bold from '../../assets/icons/bold.svg?react';
@@ -295,7 +295,7 @@ Components['run_icon'] = RunIcon;
 Components['license'] = LicenseIcon;
 Components['delete'] = DeleteIcon;
 Components['details'] = DetailsIcon;
-Components['impactList'] = ImpactListIcon;
+Components['impact_list'] = ImpactListIcon;
 Components['beautify_icon'] = BeautifyIcon;
 Components['add_variable_icon'] = AddVariable;
 Components['replace_file'] = ReplaceFile;

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/src/components/ThemeProvider/types.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-export type Theme = 'ff-light-theme' | 'ff-dark-theme' | 'ff-grey-theme';
+export type Theme = 'ff-light-theme' | 'ff-dark-theme' | 'ff-grey-theme' | 'ff-blue-theme';
 
 export interface ThemeContextType {
   currentTheme: Theme;

package/lib/components/Excel/ContextMenu/ContextMenu.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import './ContextMenu.scss';
-declare const ContextMenu: React.FC<ContextMenuProps>;
-export default ContextMenu;

package/lib/components/NLPInput/type.d.ts

@@ -1,70 +0,0 @@
-import { ReactNode } from 'react';
-export interface SelectProps {
-    label?: string;
-    showLabel?: boolean;
-    optionsList: any[];
-    selectedOption?: Option;
-    onChange: (option: Option) => void;
-    errorMsg?: string;
-    className?: string;
-    optionZIndex?: number;
-    disabled?: boolean;
-    borderRadius?: boolean;
-    showBorder?: boolean;
-    required?: boolean;
-}
-export interface DrowdownPosition {
-    positionX: number;
-    positionY: number;
-    width: number;
-    fromBottom: number;
-}
-export interface SelectState {
-    isInputFocused: boolean;
-    iconColor: string;
-    isIconClick: boolean;
-    showOptions: boolean;
-    options: any[];
-    option: string;
-    dropdownPosition: DrowdownPosition;
-}
-export type SelectAction = {
-    type: 'FOCUS_INPUT';
-} | {
-    type: 'BLUR_INPUT';
-    payload: {
-        optionsList: Option[];
-        option: Option['projectId'];
-    };
-} | {
-    type: 'MOUSE_ENTER';
-} | {
-    type: 'MOUSE_LEAVE';
-} | {
-    type: 'UPDATE_DROPDOWN_POSITION';
-    payload: {
-        positionX: number;
-        positionY: number;
-        width: number;
-        fromBottom: number;
-    };
-} | {
-    type: 'UPDATE_OPTION';
-    payload: string;
-} | {
-    type: 'UPDATE_OPTION_LIST';
-    payload: any[];
-} | {
-    type: 'SHOW_ERROR';
-    payload: {
-        optionsList: any[];
-        option: Option['projectId'];
-    };
-};
-export interface Option {
-    displayName: string | ReactNode;
-    projectId: string;
-    nlpType: string;
-    platform: string;
-    disabled?: boolean;
-}

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;