pixel-react 1.10.9 → 1.10.10-1

package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts

@@ -558,7 +558,6 @@ export function edit(state: Types.StoreState): Types.StoreState {
   return { ...state, mode: 'edit' };
 }
 
-
 const canClearCell = (cell: Types.CellBase | undefined) =>
   cell && !cell.readOnly;
 const clearCell = (cell: Types.CellBase | undefined) => {

package/src/components/Excel/ExcelFile.stories.tsx

@@ -161,6 +161,7 @@ export const Default: Story = {
     contextHeightPositioning: -220,
     contextWidthPositioning: -180,
     sheetHeight: '300px',
+    onSaveDelay:1000,
     onSave: (val) => {
       console.log(val);
     },

package/src/components/FileDropzone/Dropzone.tsx

@@ -34,6 +34,7 @@ const Dropzone: FC<DroppableProps> = ({
         'ff-file-dropzone--active': isDragActive,
         'ff-file-dropzone--webservice-file': isWebServiceFile,
         'ff-file-dropzone--webservice-container': isWebServiceFileDropZone,
+        'ff-disable-file-dropzone-wrapper': isDisable,
       })}
       style={{ height: height }}
     >
@@ -88,7 +89,7 @@ const Dropzone: FC<DroppableProps> = ({
               <Button
                 variant="primary"
                 label={buttonLabel}
-                className='choose-file-btn'
+                className="choose-file-btn"
                 disabled={isDisable}
               >
                 <input

package/src/components/FileDropzone/FileDropzone.tsx

@@ -88,8 +88,8 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
   useEffect(() => {
     if (!checkEmpty(acceptedFiles) && setSelectedFile) {
       setSelectedFile(acceptedFiles[0] || null);
-    }    
-  }, [acceptedFiles, setSelectedFile]);  
+    }
+  }, [acceptedFiles, setSelectedFile]);
 
   const rejectedFilesList = useMemo(
     () =>
@@ -107,9 +107,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
 
   return (
     <div
-      className={classNames('ff-file-dropzone-wrapper', {
-        'ff-disable-file-dropzone-wrapper': isDisable,
-      })}
+      className={classNames('ff-file-dropzone-wrapper')}
       style={{ width: `${width}px` }}
     >
       <Dropzone

package/src/components/Icon/iconList.ts

@@ -287,8 +287,9 @@ import FileColored from '../../assets/icons/file_colored.svg?react';
 import JiraColored from '../../assets/icons/jira_colored.svg?react';
 import Screenshot from '../../assets/icons/screenshot.svg?react';
 import DeleteFilled from '../../assets/icons/delete_filled.svg?react';
-import PrimaryCalendarIcon from '../../assets/icons/primary_calendar_icon.svg?react'
-import SauseLabPrimaryIcon from "../../assets/icons/sause_lab_icon.svg?react"
+import PrimaryCalendarIcon from '../../assets/icons/primary_calendar_icon.svg?react';
+import SauseLabPrimaryIcon from '../../assets/icons/sause_lab_icon.svg?react';
+import ModuleIcon from '../../assets/icons/module_icon.svg?react';
 
 import totalDefectsStatusIcon from '../../assets/icons/total_defects_status_icon.svg?react';
 import openDefectsStatusIcon from '../../assets/icons/open_defects_icon.svg?react';
@@ -576,13 +577,14 @@ Components['file_colored'] = FileColored;
 Components['jira_colored'] = JiraColored;
 Components['screenshot'] = Screenshot;
 Components['delete_filled'] = DeleteFilled;
-Components['primary_calendar_icon'] = PrimaryCalendarIcon
-Components['sause_lab_icon'] = SauseLabPrimaryIcon
+Components['primary_calendar_icon'] = PrimaryCalendarIcon;
+Components['sause_lab_icon'] = SauseLabPrimaryIcon;
 
 Components['total_defects_status_icon'] = totalDefectsStatusIcon;
 Components['open_defects_status_icon'] = openDefectsStatusIcon;
 Components['closed_defects_status_icon'] = closedDefectsStatusIcon;
 Components['quality_score_status_icon'] = qualityScoreStatusIcon;
 Components['defect_density_status_icon'] = defectDensityStatusIcon;
+Components['module_icon'] = ModuleIcon;
 
 export default Components;

package/src/components/InputWithDropdown/InputWithDropdown.tsx

@@ -20,7 +20,7 @@ const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
       optionsList,
       selectedOption = { label: '', value: '' },
       autoComplete = 'off',
-      onDropdownChangeHandler = () => {},
+      onDropdownChangeHandler = () => { },
       onInputChangeHandler,
       onInputBlurHandler,
       onClick,
@@ -29,6 +29,8 @@ const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
       optionsRequired = true,
       dropdownPosition = 'right',
       type = 'text',
+      leftDropDownPositionZindex,
+      rightDropDownPositionZindex
     },
     ref
   ) => {
@@ -58,7 +60,7 @@ const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
                 showBorder={false}
                 onChange={onDropdownChangeHandler}
                 disabled={disabled || !optionsRequired}
-                optionZIndex={999999}
+                optionZIndex={leftDropDownPositionZindex}
                 optionsRequired={optionsRequired}
                 className={classNames('ff-floating-dropdown', {
                   'ff-floating-dropdown--disabled': !!disabled,
@@ -113,6 +115,8 @@ const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
               selectedOption={selectedOption}
               showLabel={false}
               showBorder={false}
+              optionZIndex={rightDropDownPositionZindex
+              }
               onChange={onDropdownChangeHandler}
               disabled={disabled || !optionsRequired}
               optionsRequired={optionsRequired}

package/src/components/InputWithDropdown/types.ts

@@ -116,4 +116,6 @@ export interface InputWithDropdownProps {
   optionsRequired?: boolean;
 
   dropdownPosition?: 'left' | 'right';
+  leftDropDownPositionZindex?: number;
+  rightDropDownPositionZindex?: number;
 }

package/src/components/Select/components/Dropdown.scss

@@ -95,6 +95,7 @@
         align-items: center;
         justify-content: flex-end;
         gap: 8px;
+        padding-right: 4px;
       }
     }
   }

package/src/components/TableTree/TableTree.stories.tsx

@@ -4,7 +4,7 @@ import Button from '../Button';
 import treeData from './data';
 import Icon from '../Icon/Icon';
 import './TableTreeStories.scss';
-import React, { useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import AddResourceButton from '../AddResourceButton/AddResourceButton';
 
 const meta: Meta<typeof TableTree> = {
@@ -37,7 +37,7 @@ const colData = [
               menuOptions: [
                 {
                   label: 'Module',
-                  value: 'add_module',
+                  value: 'add_module_top',
                   icon: 'module_icon',
                   disable: false,
                 },
@@ -48,32 +48,38 @@ const colData = [
               menuOptions: [
                 {
                   label: 'Sub Module',
-                  value: 'add_module',
+                  value: 'add_module_sibling',
                   icon: 'module_icon',
                   disable: false,
                 },
                 {
                   label: 'Automation Script',
-                  value: 'add_module',
-                  icon: 'module_icon',
+                  value: 'add_Automation_script_sibling',
+                  icon: 'automation_testcase',
                   disable: false,
                 },
                 {
                   label: 'Manual Test Case',
-                  value: 'add_module',
-                  icon: 'module_icon',
+                  value: 'add_manual_test_case_sibling',
+                  icon: 'manual_testcase',
                   disable: false,
                 },
                 {
                   label: 'Pre / Post Condition',
-                  value: 'add_module',
-                  icon: 'module_icon',
+                  value: 'add_pre_post_condition_sibling',
+                  icon: 'pre_post_condition',
                   disable: false,
                 },
                 {
                   label: 'Authorization',
-                  value: 'add_module',
-                  icon: 'module_icon',
+                  value: 'add_authorization_sibling',
+                  icon: 'authorization_icon',
+                  disable: false,
+                },
+                {
+                  label: 'Data Provider',
+                  value: 'data_provider_sibling',
+                  icon: 'data_provider',
                   disable: false,
                 },
               ],
@@ -83,13 +89,19 @@ const colData = [
               menuOptions: [
                 {
                   label: 'Sub Module',
-                  value: 'sub_module',
+                  value: 'sub_module_down',
                   icon: 'module_icon',
                   disable: false,
                 },
               ],
             },
           ]}
+          onMenuOptionClick={(option: {
+            label: string | ReactNode;
+            value: any;
+          }) => {
+            alert(`Option clicked: ${option.label}, Value: ${option.value}`);
+          }}
         />,
       ];
     },
@@ -186,14 +198,17 @@ export const Default: Story = {
     onClick: (e, data) => {
       console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
     },
+    height: 100,
   },
 };
 
 export const ControlledCheckBox: Story = {
   render: () => {
     const [selected, setSelected] = useState<string[]>([]);
+
     return (
       <TableTree
+        height={100}
         onExpand={(node, index) => {
           console.log(node, index);
         }}

package/src/components/TableTree/TableTree.tsx

@@ -4,6 +4,7 @@ import { TreeTableProps } from './types';
 import TableHead from './Components/TableHead';
 import TableBody from './Components/TableBody';
 import { TreeNodeProps } from '../../ComponentProps/TreeNodeProps';
+import { throttle } from '../../utils/throttle/throttle';
 
 const TreeTable: React.FC<TreeTableProps> = ({
   treeData,
@@ -21,6 +22,16 @@ const TreeTable: React.FC<TreeTableProps> = ({
   onAddCancel = () => {},
 }) => {
   const observerRef = useRef<IntersectionObserver | null>(null);
+  const isTriggeredAbove = useRef(false); // Track if pagination for "above" direction has been triggered
+  const isTriggeredBelow = useRef(false); // Track if pagination for "below" direction has been triggered
+  const isTriggeredOnce = useRef(false); // Ensure 2-second delay triggers only once
+
+  // Throttled version of loadMore
+  const throttledLoadMore = useRef(
+    throttle((direction: string) => {
+      loadMore(direction);
+    }, 300)
+  ).current;
 
   useEffect(() => {
     const scrollContainer = document.getElementById(
@@ -29,36 +40,85 @@ const TreeTable: React.FC<TreeTableProps> = ({
     const firstNode = document.getElementById('ff-table-tree-first-node');
     const lastNode = document.getElementById('ff-table-tree-last-node');
 
-    // Exit early if treeData is empty or elements are missing
-    if (!scrollContainer || !firstNode || !lastNode || !treeData?.length) {
+    // Exit early if essential elements or data are missing
+    if (!scrollContainer || !firstNode || !lastNode || !treeData?.length)
       return;
-    }
-
-    observerRef.current = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            const direction =
-              entry.target.id === 'ff-table-tree-last-node' ? 'below' : 'above';
-            loadMore(direction);
+
+    const isLastResourceAbove = treeData[0]?.lastResource;
+    const isLastResourceBelow = treeData[treeData.length - 1]?.lastResource;
+
+    // Skip pagination if both last resources are present
+    if (isLastResourceAbove && isLastResourceBelow) return;
+
+    const observerCallback = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        const nodeId = entry.target.id;
+        const direction =
+          nodeId === 'ff-table-tree-last-node' ? 'below' : 'above';
+
+        if (entry.isIntersecting) {
+          // Trigger only once for each direction
+          if (direction === 'above' && !isTriggeredAbove.current) {
+            if (!isLastResourceAbove) {
+              throttledLoadMore(direction);
+              isTriggeredAbove.current = true;
+            }
+          } else if (direction === 'below' && !isTriggeredBelow.current) {
+            if (!isLastResourceBelow) {
+              throttledLoadMore(direction);
+              isTriggeredBelow.current = true;
+            }
           }
-        });
-      },
-      {
-        root: scrollContainer,
-        rootMargin: '8px',
-        threshold: 0.1,
+        }
+      });
+    };
+
+    observerRef.current = new IntersectionObserver(observerCallback, {
+      root: scrollContainer,
+      rootMargin: '8px',
+      threshold: 0.1,
+    });
+
+    // Initial pagination trigger after 2 seconds if first or last node is in view inside the scroll container
+    const checkInitialPaginationTrigger = () => {
+      if (isTriggeredOnce.current) return;
+
+      const scrollContainerRect = scrollContainer.getBoundingClientRect();
+      const firstNodeRect = firstNode?.getBoundingClientRect();
+      const lastNodeRect = lastNode?.getBoundingClientRect();
+
+      // Check if the first node is inside the scroll container
+      const isFirstNodeInView =
+        firstNodeRect &&
+        firstNodeRect.top >= scrollContainerRect.top &&
+        firstNodeRect.bottom <= scrollContainerRect.bottom;
+
+      // Check if the last node is inside the scroll container
+      const isLastNodeInView =
+        lastNodeRect &&
+        lastNodeRect.top >= scrollContainerRect.top &&
+        lastNodeRect.bottom <= scrollContainerRect.bottom;
+
+      if (isFirstNodeInView || isLastNodeInView) {
+        isTriggeredOnce.current = true;
+        setTimeout(() => {
+          if (!isLastResourceAbove) observerRef.current?.observe(firstNode);
+          if (!isLastResourceBelow) observerRef.current?.observe(lastNode);
+        }, 2000); // Delay the first pagination trigger by 2 seconds
+      } else {
+        // Observe first and last node immediately
+        if (!isLastResourceAbove) observerRef.current?.observe(firstNode);
+        if (!isLastResourceBelow) observerRef.current?.observe(lastNode);
       }
-    );
+    };
 
-    observerRef.current.observe(firstNode);
-    observerRef.current.observe(lastNode);
+    checkInitialPaginationTrigger();
 
     return () => {
-      // Cleanup observer
       observerRef.current?.disconnect();
+      throttledLoadMore.cancel();
     };
-  }, [treeData, loadMore]);
+  }, [treeData, throttledLoadMore]);
 
   const handleToggleExpand = useCallback(
     (node: TreeNodeProps, index: number) => onExpand?.(node, index),

package/src/components/TableTree/data.ts

@@ -136,7 +136,7 @@ const data = [
     container: true,
     localDelete: false,
     defaultEntity: false,
-    lastResource: true,
+    lastResource: false,
   },
   // Repeat similar patterns to generate 50 entries, modifying hierarchy, executionOrder, and other attributes as needed.
 ];

package/src/components/variableSuggestionInputDropDown/OptionsDropdown.tsx

@@ -0,0 +1,51 @@
+import type { FC, ReactNode } from 'react';
+import { dynamicObject, OptionsDropdownProps } from './types';
+import './VariableSuggestionInputDropDown.scss';
+import Typography from '../Typography';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+
+const OptionsDropdown:FC<OptionsDropdownProps> = ({
+    onSelectVariable,
+    dropdownPosition,
+    filteredOptions= [],
+    position = 'relative',
+    width = '100%',
+  }): ReactNode => {
+    return (
+      <div
+        className={`ff-variable-dropdown ${position}`}
+        style={
+          dropdownPosition
+            ? {
+                top: dropdownPosition.top + 30,
+                left: dropdownPosition.left - 30,
+                width,
+              }
+            : { width }
+        }
+      >
+        {!checkEmpty(filteredOptions)? filteredOptions?.map((option: dynamicObject): ReactNode => {
+          return (
+            <div
+              className="ff-variable-option"
+              onClick={() => onSelectVariable(option)}
+              key={option?.id}
+            >
+              <Typography as="span" fontSize={14}>
+                {option?.name}
+              </Typography>
+            </div>
+          );
+        }) : (
+          <div
+              className="ff-variable-option"
+            >
+              <Typography as='div' children='No Option' fontSize={14} />
+            </div>
+          
+        )}
+      </div>
+    );
+  };
+
+export default OptionsDropdown;

package/src/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.scss

@@ -0,0 +1,18 @@
+.ff-add-variable-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    position: relative;
+    .ff-add-variable-input {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+  .ff-variable-dropdown {
+    padding: 4px;
+    width: auto;
+  }

package/src/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.stories.tsx

@@ -0,0 +1,155 @@
+import React, { useRef, useState } from 'react';
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import VariableSuggestionInputDropDown from './VariableSuggestionInputDropDown';
+import { VariableSuggestionInputDropDownProps, dynamicObject } from './types';
+import { variableList } from '../Editor/constants';
+import CreateVariableSlider from '../CreateVariable/CreateVariableSlider';
+
+export default {
+  title: 'Components/VariableSuggestionInputDropDown',
+  component: VariableSuggestionInputDropDown,
+  args: {
+    label: 'Add Variables',
+    placeholder: 'Enter text',
+    variableList,
+    dropdownWidth: '100%',
+    variant: 'primary',
+  },
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<VariableSuggestionInputDropDownProps>;
+
+type Story = StoryObj<typeof VariableSuggestionInputDropDown>;
+
+const Template: StoryFn<VariableSuggestionInputDropDownProps> = (args) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [inputValue, setInputValue] = useState<string>('');
+  const [openCreateVariable, setOpenCreateVariable] = useState<boolean>(false);
+  const [variableName, setVariableName] = useState<string>('');
+  const [variableValue, setVariableValue] = useState<string>('');
+  const [selectedVariable, setSelectedVariable] = useState<dynamicObject>({
+    label: 'Local Variable',
+    value: 'LOCAL',
+  });
+  const [hideValue, setHideValue] = useState<boolean>(false);
+
+  return (
+    <>
+      <VariableSuggestionInputDropDown
+        {...args}
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+          setInputValue(event.target.value)
+        }
+        value={inputValue}
+        onCreateVariableClick={() => setOpenCreateVariable(true)}
+        ref={inputRef}
+        showAddVariableIcon
+      />
+      {openCreateVariable && (
+        <CreateVariableSlider
+          isOpen={openCreateVariable}
+          onClose={() => setOpenCreateVariable(false)}
+          variableName={variableName}
+          value={variableValue}
+          hideValue={hideValue}
+          handleSubmit={() => {
+            alert('Variable Created');
+          }}
+          onHideChange={(value) => {
+            setHideValue(value);
+          }}
+          onNameChange={(value) => {
+            setVariableName(value);
+          }}
+          onValueChange={(value) => setVariableValue(value)}
+          onVariableTypeChange={(option) => setSelectedVariable(option)}
+          selectedVariableType={selectedVariable}
+          variableTypesList={[
+            { label: 'Local Variable', value: 'LOCAL' },
+            { label: 'Global Variable', value: 'GLOBAL' },
+          ]}
+        />
+      )}
+    </>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  onCreateVariableClick: () => alert('Create Variable clicked'),
+};
+
+export const WithInitialValue = Template.bind({});
+WithInitialValue.args = {
+  inputValue: 'Initial Text with $',
+  onCreateVariableClick: () => alert('Create Variable clicked'),
+};
+
+export const DropdownOnHash: Story = {
+  render: () => {
+    const [hashInputValue, setHashInputValue] =
+      useState<dynamicObject | null>();
+    const [value, setValue] = useState<string>('');
+    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',
+      },
+      {
+        _id: '5',
+        name: 'Spreadsheet.xlsx',
+        actualPath: '/spreadsheets/Spreadsheet.xlsx',
+        searchKey: 'spreadsheet',
+        parentId: 'folder3',
+      },
+      {
+        _id: '6',
+        name: 'Code.js',
+        actualPath: '/projects/Code.js',
+        searchKey: 'code',
+        parentId: 'folder4',
+      },
+    ];
+
+    return (
+      <>
+        <VariableSuggestionInputDropDown
+          label="Select Path Using #"
+          placeholder="Enter # to search files"
+          isHash
+          dataFiles={testData}
+          dropdownWidth="100%"
+          setHashInputValue={setHashInputValue}
+          hashInputValue={hashInputValue || {}}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+      </>
+    );
+  },
+};