pixel-react 1.10.5 → 1.10.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.10.5",
+  "version": "1.10.6",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

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.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/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[];
@@ -36,7 +37,7 @@ export const getTreeDetails = (
       }
       break;
     case 'start':
-      if (newData.length > 0) {
+      if (!checkEmpty(newData)) {
         root = newData[0];
         treeDataList = newData.slice(1);
       } else {
@@ -47,7 +48,7 @@ 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.');
   }
 
@@ -56,10 +57,10 @@ export const getTreeDetails = (
 
   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,
   };
 };