pixel-react 1.10.5 → 1.10.7

package/src/components/Select/components/Dropdown.tsx

@@ -6,12 +6,11 @@ import Typography from '../../Typography';
 import { ffid } from '../../../utils/ffID/ffid';
 import { ThemeContext } from '../../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';
-import {
-  getLabel,
-} from '../../../utils/getSelectOptionValue/getSelectOptionValue';
+import { getLabel } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
 import useClickOutside from '../../../hooks/useClickOutside';
 import Icon from '../../Icon';
 import Tooltip from '../../Tooltip';
+import Button from '../../Button';
 
 const Dropdown: FC<DropdownProps> = ({
   options = [],
@@ -27,12 +26,22 @@ const Dropdown: FC<DropdownProps> = ({
   valueAccessor,
   showIcon = false,
   showToolTip = false,
+  customReccurenece = true,
+  onCancelModal = () => {},
+  onSaveModal = () => {},
+  recurrence = false,
+  modalJSXProps = <></>,
 }) => {
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
 
+  const customRecurrenceOnBlur = customReccurenece ? () => {} : onSelectBlur;
+
   const optionsWrapperRef = useRef<HTMLDivElement>(null);
-  useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef, selectArrowRef]);
+  useClickOutside(optionsWrapperRef, customRecurrenceOnBlur, [
+    inputRef,
+    selectArrowRef,
+  ]);
 
   const { positionX, positionY, fromBottom, width } = dropdownPosition;
   const { margin, optionHeight, selectInputHeight, dropDownWrapperPadding } =
@@ -98,13 +107,30 @@ const Dropdown: FC<DropdownProps> = ({
     );
   };
 
+  const onHandleCancelModal = () => {
+    onSelectBlur();
+    onCancelModal();
+  };
+
+  const onHandleSaveModal = () => {
+    onSelectBlur();
+    onSaveModal();
+  };
+
   return (
     <div
-      className={classNames('ff-select-dropdown-wrapper', currentTheme)}
+      className={classNames('ff-select-dropdown-wrapper', currentTheme, {
+        'ff-select-dropdown-modal-wrapper': recurrence,
+        'ff-select-dropdown-mini-modal-wrapper': customReccurenece,
+      })}
       ref={optionsWrapperRef}
       style={updateDropdownPosition()}
     >
-      <div>
+      <div
+        className={classNames({
+          'ff-select-label-minimodal-wrapper': customReccurenece,
+        })}
+      >
         {!checkEmpty(options) ? (
           options.map((option) => (
             <div
@@ -140,6 +166,26 @@ const Dropdown: FC<DropdownProps> = ({
           </Typography>
         )}
       </div>
+
+      {customReccurenece && (
+        <div className="ff-select-mini-modal-wrapper" id="ff-select-mini-id">
+          <div className="ff-select-modal-wrapper">
+            {<>{modalJSXProps}</>}
+            <div className="ff-select-mini-modal-footer">
+              <Button
+                label="Cancel"
+                variant="tertiary"
+                onClick={onHandleCancelModal}
+              />
+              <Button
+                label="Save"
+                variant="secondary"
+                onClick={onHandleSaveModal}
+              />
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

package/src/components/Select/components/types.ts

@@ -1,5 +1,5 @@
 import { DropdownPosition, Option } from '../types';
-import { RefObject } from 'react';
+import { ReactNode, RefObject } from 'react';
 
 export interface DropdownProps {
   options: Option[];
@@ -14,7 +14,12 @@ export interface DropdownProps {
   heightFromTop: number;
   selectedOption?: Option;
   showIcon?: boolean;
-  showToolTip?: boolean
+  showToolTip?: boolean;
+  customReccurenece?: boolean;
+  onCancelModal?: () => void;
+  onSaveModal?: () => void;
+  modalJSXProps?: ReactNode;
+  recurrence?: boolean;
 }
 
 export const dropdownDefaultCSSData = {

package/src/components/Select/types.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 export interface SelectProps {
   /*
    * Label for the select dropdown
@@ -123,6 +125,26 @@ export interface SelectProps {
    * Provide the background color for the select label on the hover state
    */
   labelBackgroundColor?: string;
+
+  /**
+   * To close the modal in the select dropdown
+   */
+  onCancelModal?: () => void;
+
+  /**
+   * To close the modal in the select dropdown
+   */
+  onSaveModal?: () => void;
+
+  /**
+   * Pass the custom Jsx for the Modal
+   */
+  modalJSXProps?: ReactNode;
+
+  /**
+   * Pass the recurrence boolean for the exeception cases
+   */
+  recurrence?: boolean;
 }
 
 export interface DropdownPosition {

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx

@@ -21,6 +21,7 @@ export const Primary: Story = {
       label: 'ffe-Mahesh',
       value: {
         status: 'running',
+        clientId: 'test',
       },
       name: 'ffe-Mahesh',
     });
@@ -33,6 +34,7 @@ export const Primary: Story = {
           status: 'running',
         },
         name: 'ffe-Ganesh',
+        clientId: 'test',
       },
       {
         label: 'ffe-Mahesh',
@@ -40,6 +42,7 @@ export const Primary: Story = {
           status: 'running',
         },
         name: 'ffe-Mahesh',
+        clientId: 'test',
       },
     ];
 
@@ -52,8 +55,10 @@ export const Primary: Story = {
     return (
       <>
         <SequentialConnectingBranch
-          projectType="web"
           dataSetValues={{
+            globalVariableSetName: 'test dev',
+            peVariableSetName: 'test dev',
+            testDataSetName: 'test dev',
             peVariableSetId: 'Test dev',
             globalVariableSetId: 'Test dev',
             testDataSetId: 'Test dev',
@@ -64,7 +69,8 @@ export const Primary: Story = {
           machineInstances={[]}
           selectedMachine={machineSelect}
           onHandleSelect={onMachineHandleSelect}
-          scriptType="Manual"
+          // scriptType="Manual"
+          readOnly={true}
         />
       </>
     );

package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx

@@ -208,7 +208,7 @@ const Branches = ({
                     }
                   />
                 </div>
-                {!readOnly && (
+                {readOnly && (
                   <div
                     className={classNames({
                       'ff-connecting-branch-datalist': evenRow,

package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.scss

@@ -0,0 +1,14 @@
+@mixin flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.dataSetList_container {
+  @include flex-column;
+  gap: 4px;
+  padding: 6px 12px;
+
+  .dataSetList_items {
+    @include flex-column;
+  }
+}

package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import Tooltip from '../../../Tooltip';
 import Typography from '../../../Typography';
 import { DataSetTooltipProps } from './types';
 
@@ -18,22 +17,18 @@ const DataSetTooltip: FC<DataSetTooltipProps> = ({
 
   return (
     <>
-      <Tooltip placement="bottom">
-        {Object.entries(toolTipTitleValue).map(([key, value], index) => (
-          <div key={index}>
-            <Typography
-              as="div"
-              fontSize={10}
-              lineHeight="15px"
-            >
+      {Object.entries(toolTipTitleValue).map(([key, value], index) => (
+        <div key={index} className='' >
+          <div className='' >
+            <Typography as="div" fontSize={10} lineHeight="15px">
               {key}
             </Typography>
             <Typography as="div" lineHeight="18px">
               {value}
             </Typography>
           </div>
-        ))}
-      </Tooltip>
+        </div>
+      ))}
     </>
   );
 };

package/src/components/Table/Table.tsx

@@ -18,6 +18,7 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { useEffect, useRef } from 'react';
 
 const SortableRow = ({
   row,
@@ -115,7 +116,49 @@ const Table = ({
   headerIconOnClick = () => {},
   draggable = false,
   onDragEnd,
+  loadMore = () => {},
 }: TableProps) => {
+
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  
+    useEffect(() => {
+      const scrollContainer = document.getElementById(
+        'ff-table-scroll-container'
+      );
+      const firstNode = document.getElementById('ff-table-first-node');
+      const lastNode = document.getElementById('ff-table-last-node');
+  
+      // Exit early if data is empty or elements are missing
+      if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
+        return;
+      }
+  
+      observerRef.current = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              const direction =
+                entry.target.id === 'ff-table-last-node' ? 'below' : 'above';
+              loadMore(direction);
+            }
+          });
+        },
+        {
+          root: scrollContainer,
+          rootMargin: '8px',
+          threshold: 0.1,
+        }
+      );
+  
+      observerRef.current.observe(firstNode);
+      observerRef.current.observe(lastNode);
+  
+      return () => {
+        // Cleanup observer
+        observerRef.current?.disconnect();
+      };
+    }, [data, loadMore]);
+
   const handleOnclick = (column: ColumnsProps, row: DataProps) => {
     let { onClick, accessor } = column;
     if (onClick && isFunction(onClick)) {
@@ -153,6 +196,7 @@ const Table = ({
       >
         <div
           style={{ height: height, position: 'relative' }}
+          id="ff-table-scroll-container"
           className={classNames(className, {
             'ff-fixed-header-table': withFixedHeader,
             'border-borderRadius': borderWithRadius,
@@ -216,6 +260,7 @@ const Table = ({
               </tr>
             </thead>
             <tbody className="ff-fixed-header-table">
+            <tr id="ff-table-first-node" />
               {data?.length > 0 &&
                 data?.map((row: any) => (
                   <SortableRow
@@ -230,6 +275,8 @@ const Table = ({
                     draggable={draggable}
                   />
                 ))}
+                      <tr id="ff-table-last-node" />
+
             </tbody>
           </table>
           {data?.length <= 0 && (

package/src/components/Table/Types.ts

@@ -128,5 +128,8 @@ export interface TableProps {
   /**
   * Drag and Drop indexes
   */
-  onDragEnd?: (startIndex: number, endIndex: number) => void | undefined
+  onDragEnd?: (startIndex: number, endIndex: number) => void | undefined,
+
+  loadMore?: (_direction?: string) => void;
+
 }

package/src/components/TableTree/Components/TableBody.tsx

@@ -33,7 +33,6 @@ const TableBody = ({
           onRowClick={onRowClick}
           onToggleExpand={(node) => onToggleExpand(node, index)}
           onCheckBoxChange={onCheckBoxChange}
-          index={index}
           onAddConfirm={onAddConfirm}
           onAddCancel={onAddCancel}
         />

package/src/utils/getAnchorElement/getAnchorElement.ts

@@ -0,0 +1,7 @@
+// Helper function to get the anchor element
+export const getAnchorElement = (anchorRef: React.RefObject<HTMLElement> | string) => {
+  if (typeof anchorRef === 'string') {
+    return document.getElementById(anchorRef);
+  }
+  return anchorRef?.current || null;
+};

package/src/utils/getTreeDetails/getTreeDetails.stories.tsx

@@ -1,13 +1,14 @@
 import { useState } from 'react';
-import { getTreeDetails, TreeNode, TreeDetailsResult } from './getTreeDetails';
+import { getTreeDetails, TreeDetailsResult } from './getTreeDetails';
 import React from 'react';
+import { TreeNodeProps } from '../../ComponentProps/TreeNodeProps';
 
 export default {
   title: 'Utils/getTreeDetails',
   component: getTreeDetails,
 };
 
-const initialData: TreeNode[] = [
+const initialData: TreeNodeProps[] = [
   {
     createdBy: 'USR4705',
     modifiedBy: '--',
@@ -65,15 +66,31 @@ const initialData: TreeNode[] = [
 ];
 
 export const InteractivePlayground = () => {
-  const [data, setData] = useState<TreeNode[]>(initialData);
-  const [newData, setNewData] = useState<TreeNode[]>([]);
-  const [action, setAction] = useState<'above' | 'below' | 'expand' | 'collapse' | 'start'>('below');
+  const [data, setData] = useState<TreeNodeProps[]>(initialData);
+  const [newData, setNewData] = useState<TreeNodeProps[]>([]);
+  const [action, setAction] = useState<
+    | 'above'
+    | 'below'
+    | 'expand'
+    | 'collapse'
+    | 'start'
+    | 'addAbove'
+    | 'addBelow'
+  >('below');
   const [index, setIndex] = useState<number | undefined>(undefined);
+  const [sourceId, setSourceId] = useState<string | undefined>(undefined); // State for sourceId
   const [result, setResult] = useState<TreeDetailsResult | null>(null);
 
   const handleGetTreeDetails = () => {
     try {
-      const treeDetails = getTreeDetails(action, data, newData, index);
+      // If sourceId exists, we pass it, otherwise we pass the index
+      const treeDetails = getTreeDetails(
+        action,
+        data,
+        newData,
+        index,
+        sourceId
+      );
       setData(treeDetails.treeDataList);
       setResult(treeDetails);
     } catch (error) {
@@ -91,7 +108,16 @@ export const InteractivePlayground = () => {
           id="action"
           value={action}
           onChange={(e) =>
-            setAction(e.target.value as 'above' | 'below' | 'expand' | 'collapse' | 'start')
+            setAction(
+              e.target.value as
+                | 'above'
+                | 'below'
+                | 'expand'
+                | 'collapse'
+                | 'start'
+                | 'addAbove'
+                | 'addBelow'
+            )
           }
         >
           <option value="above">Above</option>
@@ -99,10 +125,32 @@ export const InteractivePlayground = () => {
           <option value="expand">Expand</option>
           <option value="collapse">Collapse</option>
           <option value="start">Start</option>
+          <option value="addAbove">Add Above</option>
+          <option value="addBelow">Add Below</option>
         </select>
       </div>
 
-      {(action === 'expand' || action === 'collapse') && (
+      {/* Input for sourceId, if action requires it */}
+      {(action === 'expand' ||
+        action === 'collapse' ||
+        action === 'addAbove' ||
+        action === 'addBelow') && (
+        <div>
+          <label htmlFor="sourceId">
+            Source ID (for expand/collapse/addAbove/addBelow):
+          </label>
+          <input
+            type="text"
+            id="sourceId"
+            value={sourceId || ''}
+            onChange={(e) => setSourceId(e.target.value)}
+            placeholder="Enter Source ID"
+          />
+        </div>
+      )}
+
+      {/* Input for index, for actions requiring index */}
+      {(action === 'expand' || action === 'collapse') && !sourceId && (
         <div>
           <label htmlFor="index">Index (for expand/collapse):</label>
           <input
@@ -110,7 +158,9 @@ export const InteractivePlayground = () => {
             id="index"
             value={index !== undefined ? index : ''}
             onChange={(e) =>
-              setIndex(e.target.value ? parseInt(e.target.value, 10) : undefined)
+              setIndex(
+                e.target.value ? parseInt(e.target.value, 10) : undefined
+              )
             }
             disabled={action !== 'expand' && action !== 'collapse'}
           />

package/src/utils/getTreeDetails/getTreeDetails.ts

@@ -1,4 +1,5 @@
 import { TreeNodeProps as TreeNode } from '../../ComponentProps/TreeNodeProps';
+import { checkEmpty } from '../checkEmpty/checkEmpty';
 
 export interface TreeDetailsResult {
   treeDataList: TreeNode[];
@@ -10,14 +11,37 @@ export interface TreeDetailsResult {
 }
 
 export const getTreeDetails = (
-  action: 'above' | 'below' | 'expand' | 'collapse' | 'start',
+  action:
+    | 'above'
+    | 'below'
+    | 'expand'
+    | 'collapse'
+    | 'start'
+    | 'addAbove'
+    | 'addBelow',
   oldData: TreeNode[],
   newData: TreeNode[],
-  index?: number
+  index?: number,
+  sourceId?: string
 ): TreeDetailsResult => {
   let treeDataList: TreeNode[];
   let root: TreeNode | undefined = undefined;
 
+  const findIndexByKey = (data: TreeNode[], key: string): number => {
+    return data.findIndex((node) => node.key === key);
+  };
+
+  const getIndex = (): number | undefined => {
+    if (sourceId) {
+      const indexByKey = findIndexByKey(oldData, sourceId);
+      if (indexByKey === -1) {
+        throw new Error(`Key "${sourceId}" not found in oldData.`);
+      }
+      return indexByKey;
+    }
+    return index; // Use index if sourceId is not provided
+  };
+
   switch (action) {
     case 'above':
       treeDataList = [...newData, ...oldData].slice(0, 40);
@@ -27,16 +51,42 @@ export const getTreeDetails = (
       break;
     case 'expand':
     case 'collapse':
-      if (typeof index === 'number') {
-        treeDataList = [...oldData.slice(0, index), ...newData];
-      } else {
+      const actionIndex = getIndex();
+      if (actionIndex === undefined) {
         throw new Error(
-          "Index is required for 'expand' or 'collapse' actions."
+          "Both sourceId and index are required for 'expand' or 'collapse' actions."
         );
       }
+      treeDataList = [...oldData.slice(0, actionIndex), ...newData];
+      break;
+    case 'addAbove':
+      const addAboveIndex = getIndex();
+      if (addAboveIndex === undefined) {
+        throw new Error(
+          "Both sourceId and index are required for 'addAbove' action."
+        );
+      }
+      treeDataList = [
+        ...oldData.slice(0, addAboveIndex),
+        ...newData,
+        ...oldData.slice(addAboveIndex),
+      ];
+      break;
+    case 'addBelow':
+      const addBelowIndex = getIndex();
+      if (addBelowIndex === undefined) {
+        throw new Error(
+          "Both sourceId and index are required for 'addBelow' action."
+        );
+      }
+      treeDataList = [
+        ...oldData.slice(0, addBelowIndex + 1),
+        ...newData,
+        ...oldData.slice(addBelowIndex + 1),
+      ];
       break;
     case 'start':
-      if (newData.length > 0) {
+      if (!checkEmpty(newData)) {
         root = newData[0];
         treeDataList = newData.slice(1);
       } else {
@@ -47,19 +97,22 @@ export const getTreeDetails = (
       throw new Error(`Invalid action: ${action}`);
   }
 
-  if (treeDataList.length === 0 && action !== 'start') {
+  if (checkEmpty(treeDataList) && action !== 'start') {
     throw new Error('Tree data list is empty.');
   }
 
   const firstNode = treeDataList[0] || root!;
-  const lastNode = treeDataList[treeDataList.length - 1]!;
+  const lastNode = treeDataList[treeDataList.length - 1] || {
+    lastResource: true,
+    key: '',
+  };
 
   return {
     treeDataList,
-    next: !lastNode.lastResource,
-    previous: !firstNode.lastResource,
-    startId: firstNode.key,
-    endId: lastNode.key,
+    next: !lastNode?.lastResource,
+    previous: !firstNode?.lastResource,
+    startId: firstNode?.key,
+    endId: lastNode?.key,
     root,
   };
 };