pixel-react 1.10.4 → 1.10.6

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

@@ -736,5 +736,65 @@ export const normalModalFollowedByIcon = () => {
     </div>
   );
 };
+export const NormalModalWithLoop = () => {
+  const { currentModal, openModal, closeModal } = useModal();
+
+  const modelItems = ['one', 'two', 'three', 'four'];
+  const structuredArray = modelItems.map((value, index) => ({
+    id: `${index + 1}`,
+    value: value,
+  }));
+
+  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const getButtonPosition = (index: number) => {
+    const button = buttonRefs.current[index];
+    if (button) {
+      const { top, left, height } = button.getBoundingClientRect();
+      return { top: top + height, left };
+    }
+    return { top: 0, left: 0 };
+  };
 
+  return (
+    <div className="ff-mini-modal-loop">
+      {structuredArray.map((data, index) => (
+        <div key={data.id} className="ff-mini-modal-loop-div">
+          <p>{data.value}</p>
+          <Button
+            variant="primary"
+            ref={(el) => (buttonRefs.current[index] = el)}
+            onClick={() => openModal(Number(data.id))}
+            id={data.id}
+            label={data.id}
+          />
+
+          {currentModal === Number(data.id) && (
+            <MiniModal
+              id={data.id}
+              modalProperties={{
+                width: 168,
+                height: 108,
+                top: getButtonPosition(index).top,
+                left: getButtonPosition(index).left,
+              }}
+              overlay={{
+                isOverlay: true,
+                zIndexOverlay: 99,
+              }}
+              childContent={
+                <Typography as="p">
+                  This is some content inside the modal for {data.value}.
+                </Typography>
+              }
+              isIconModel={true}
+              isAnimated={true}
+              outSideClick={closeModal}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
 export default meta;

package/src/components/MiniModal/types.ts

@@ -13,7 +13,8 @@ export interface MiniEditModalProps {
   /**
    * A reference to the button element that triggers the modal.
    */
-  anchorRef: RefObject<HTMLButtonElement> | string;
+  anchorRef?: RefObject<HTMLButtonElement> | string;
+  id?: string | number;
   /**
    * Optional properties for configuring the modal header.
    */

package/src/components/Select/Select.stories.tsx

@@ -44,6 +44,11 @@ export const Primary: Story = {
         value: 'fire-flink-LIC4999',
         name: 'lambda test',
       },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+        name: 'lambda test',
+      },
     ],
   },
 };
@@ -160,6 +165,22 @@ export const OptionSelection: Story = {
         label: 'fire-flink-LIC4999',
         value: 'fire-flink-LIC4999',
       },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
     ];
 
     const [selectedOption, setSelectedOption] = useState<Option>({
@@ -412,10 +433,23 @@ export const SelectWithToolTip: Story = {
         label: 'fire-flink-LIC4937',
         value: 'fire-flink-LIC4937',
       },
+      {
+        label: 'fire-flink-LIC5937',
+        value: 'fire-flink-LIC5937',
+      },
+      {
+        label: 'fire-flink-LIC6937',
+        value: 'fire-flink-LIC6937',
+      },
+      {
+        label: 'fire-flink-LIC7937',
+        value: 'fire-flink-LIC7937',
+      },
       {
         label: 'fire-flink-LIC4999',
         value: 'fire-flink-LIC4999',
-      },
+        recurrence: true,
+      }, 
     ];
 
     const [selectedOption, setSelectedOption] = useState<Option>({
@@ -427,6 +461,12 @@ export const SelectWithToolTip: Story = {
       setSelectedOption(option);
     };
 
+    const getMiniModalJSX = () => (
+      <>
+        <h1>Test Mini Modal</h1>
+      </>
+    );
+
     return (
       <Select
         optionsList={optionsList}
@@ -434,6 +474,8 @@ export const SelectWithToolTip: Story = {
         onChange={handleChange}
         label="Select Option"
         showToolTip={true}
+        modalJSXProps={getMiniModalJSX()}
+        recurrence
       />
     );
   },

package/src/components/Select/Select.tsx

@@ -34,10 +34,15 @@ const Select: FC<SelectProps> = ({
   showIcon = false,
   placeHolder = '',
   showToolTip = false,
+  onCancelModal = () => {},
+  onSaveModal = () => {},
+  modalJSXProps = <></>,
+  recurrence = false,
 }) => {
   const selectWidth = typeof width === 'number' ? `${width}px` : width;
 
   const [showDropdownOptions, setShowDropdownOptions] = useState(false);
+  const [customRecurrence, setCustomRecurrence] = useState(false);
   const [searchedOption, setSearchedOption] = useState<any>({
     searchedText: '',
     searchedIcon: '',
@@ -124,12 +129,14 @@ const Select: FC<SelectProps> = ({
       searchedIcon: selectedOption.iconName,
     });
     setSelectOptionList(optionsList);
+    setCustomRecurrence(false);
     onBlur();
   };
 
   const onSelectOptionSelector = (option: Option): void => {
     if (disabled) return;
-    onSelectBlur();
+    const isCustomRecurrence = option?.recurrence || false;
+    setCustomRecurrence(isCustomRecurrence);
     setSearchedOption({
       searchedText: getValue(selectedOption, valueAccessor),
       searchedIcon: selectedOption.iconName,
@@ -137,6 +144,9 @@ const Select: FC<SelectProps> = ({
     if (onChange) {
       onChange(option);
     }
+    if (!isCustomRecurrence) {
+      onSelectBlur();
+    }
   };
 
   const handleResizeOrScroll = () => onSelectUpdatePosition();
@@ -277,6 +287,11 @@ const Select: FC<SelectProps> = ({
                 selectedOption={searchedText}
                 showIcon={showIcon}
                 showToolTip={showToolTip}
+                customReccurenece={customRecurrence}
+                onSaveModal={onSaveModal}
+                onCancelModal={onCancelModal}
+                modalJSXProps={modalJSXProps}
+                recurrence={recurrence}
               />,
               document.body
             )}

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

@@ -1,4 +1,5 @@
-.ff-select-dropdown-wrapper {
+.ff-select-dropdown-wrapper,
+.ff-select-dropdown-mini-modal-wrapper {
   max-height: 160px;
   z-index: 999999;
   position: absolute;
@@ -59,3 +60,42 @@
     cursor: not-allowed;
   }
 }
+
+.ff-select-dropdown-modal-wrapper {
+  max-height: 256px;
+}
+
+.ff-select-dropdown-mini-modal-wrapper {
+  display: flex;
+  justify-content: space-between;
+
+  .ff-select-label-minimodal-wrapper {
+    width: calc(50% - 4px);
+  }
+  .ff-select-mini-modal-wrapper {
+    width: 50%;
+    padding: 8px 2px 0px 4px;
+    display: flex;
+    align-items: flex-end;
+    margin-left: 4px;
+    border-left: 1px dashed var(--border-color);
+
+    .ff-select-modal-wrapper {
+      height: fit-content;
+      width: calc(100% - 4px);
+      border-radius: 8px;
+      border: 1px solid var(--ff-select-background-color);
+      box-shadow: 0px 1px 8px 0px var(--ff-select-option-wrapper-box-shadow);
+      border: 1px solid var(--border-color);
+
+      .ff-select-mini-modal-footer {
+        min-height: 32px;
+        border-top: 1px solid var(--border-color);
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 8px;
+      }
+    }
+  }
+}

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.stories.tsx

@@ -394,7 +394,7 @@ export const DragAndDropTable: Story = {
     tableDataTextColor: 'var(--brand-color)',
   },
   render: () => {
-    // important prerequisite tableData should have unique IDs
+    //! Important prerequisite: tableData should have a unique ID key, which should be either _id or id.
     const [tableData, setTableData] = useState(
       sampleData.map((data) => data.project)
     );

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,
@@ -43,7 +44,7 @@ const SortableRow = ({
     <tr
       ref={setNodeRef}
       style={style}
-      key={row.id}
+      key={row._id || row.id}
       className={classNames(tableBodyRowClass, {
         'disabled-row': row.disabled,
       })}
@@ -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)) {
@@ -133,8 +176,12 @@ const Table = ({
     const { active, over } = event;
     if (!over || active.id === over.id) return;
 
-    const oldIndex = data.findIndex((item: any) => item.id === active.id);
-    const newIndex = data.findIndex((item: any) => item.id === over.id);
+    const oldIndex = data.findIndex(
+      (item: any) => item._id === active.id || item.id === active.id
+    );
+    const newIndex = data.findIndex(
+      (item: any) => item._id === over.id || item.id === over.id
+    );
 
     if (oldIndex === -1 || newIndex === -1) return;
     if (onDragEnd) onDragEnd(oldIndex, newIndex);
@@ -144,11 +191,12 @@ const Table = ({
     <DndContext collisionDetection={closestCorners} onDragEnd={handleDragEnd}>
       <SortableContext
         disabled={!draggable}
-        items={data?.map((row: any) => row.id)}
+        items={data?.map((row: any) => row._id || row.id)}
         strategy={verticalListSortingStrategy}
       >
         <div
           style={{ height: height, position: 'relative' }}
+          id="ff-table-scroll-container"
           className={classNames(className, {
             'ff-fixed-header-table': withFixedHeader,
             'border-borderRadius': borderWithRadius,
@@ -212,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
@@ -226,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;
+
 }