pixel-react-excel-sheet 1.0.38 → 1.0.39

package/src/components/MobileSkin/MobileSkinInterface.ts

@@ -0,0 +1,13 @@
+interface NavBarIcon {
+  name: string;
+  [key: string]: any;
+}
+
+export interface MobileSkinProps {
+  children: React.ReactNode | string;
+  orientation?: 'portrait' | 'landscape';
+  type: 'ios' | 'android';
+  navBarIcons: NavBarIcon[];
+  mobileHeight?: number;
+  mobileWidth?: number;
+}

package/src/components/MobileSkin/index.ts

@@ -0,0 +1 @@
+export { default } from './MobileSkin';

package/src/components/MobileSkin/types.ts

@@ -0,0 +1,32 @@
+export interface iconDetails {
+  /**
+   * details of each icon
+   */
+  [key: string]: any;
+}
+export interface MobileSkinProps {
+  /**
+   * The content inside the mobile skin component
+   */
+  children: React.ReactNode | string;
+  /**
+   *    Portrait or landScape View of the Mobile
+   */
+  orientation: "portrait" | "landscape";
+  /**
+   * type either it will be ios or android
+   */
+  type: string;
+  /**
+   *   height of the MobileSkin
+   */
+  mobileHeight?: number;
+  /**
+   *   width of the MobileSkin
+   */
+  mobileWidth?: number;
+  /**
+   * takes the icons details like icon name , title, onClick event, height , width, etc
+   */
+  navbarIcons: Array<iconDetails>;
+}

package/src/components/Modal/Modal.stories.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import Modal from './Modal';
 import Button from '../Button';
+import { useKeyboardActions } from '../../utils/keyBoardActionUtil/UseKeyboardActions';
 
 const meta: Meta<typeof Modal> = {
   title: 'Components/Modal',
@@ -34,6 +35,12 @@ export const DefaultModalStory: Story = {
 export const Controlled: Story = {
   render: () => {
     const [openModal, setModal] = useState(false);
+    useKeyboardActions([
+      {
+        key: 'Enter',
+        action: () => alert('Enter key was pressed.'),
+      },
+    ]);
     return (
       <>
         <Button

package/src/components/Modal/Modal.tsx

@@ -1,9 +1,10 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext } from 'react';
 import { createPortal } from 'react-dom';
 import './modal.scss';
 import { ModalProps } from './types';
 import { ThemeContext } from '../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';
+import { useKeyboardActions } from '../../utils/keyBoardActionUtil/UseKeyboardActions';
 
 const Modal: React.FC<ModalProps> = ({
   isOpen,
@@ -26,27 +27,23 @@ const Modal: React.FC<ModalProps> = ({
   border = '',
   background='',
 }) => {
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && shouldCloseOnEsc) {
-        onClose();
-      }
-    };
 
-    if (isOpen) {
-      document.addEventListener('keydown', handleKeyDown);
-      if (ariaHideApp) {
-        document.body.style.overflow = 'hidden';
-      }
-    }
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      if (ariaHideApp) {
-        document.body.style.overflow = '';
-      }
-    };
-  }, [isOpen, onClose, ariaHideApp, shouldCloseOnEsc]);
+ useKeyboardActions(
+   shouldCloseOnEsc && isOpen
+     ? [
+         {
+           key: 'Escape',
+           action: onClose,
+         },
+       ]
+     : []
+ );
 
+ if (!isOpen) return null;
+
+ if (ariaHideApp) {
+   document.body.style.overflow = isOpen ? 'hidden' : '';
+ }
   if (!isOpen) return null;
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;

package/src/components/Search/Search.scss

@@ -86,12 +86,20 @@
       cursor: pointer;
       width: 22px;
       padding-top: 1px;
+
+      &.showClose {
+        display: none
+      }
     }
 
     .ff-search-close-icon {
       margin: 4px;
       cursor: pointer;
 
+      &.showClose {
+        display: none
+      }
+
       .ff-icon-container {
         svg {
           path {

package/src/components/Search/Search.tsx

@@ -16,12 +16,13 @@ const Search = ({
   isExpand = false,
   onClose,
   onExpand,
+  showClose = true,
 }: SearchProps) => {
   const [searchValue, setSearchValue] = useState<string>(value);
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    if (isExpand && inputRef.current) {
+    if (isExpand && inputRef.current && showClose) {
       inputRef.current.focus();
     }
     setSearchValue('');
@@ -45,7 +46,7 @@ const Search = ({
     if (label === 'Close') {
       onClose?.();
     }
-    if (label === 'Clear' && isExpand && inputRef.current) {
+    if (label === 'Clear' && isExpand && inputRef.current && showClose) {
       inputRef.current.focus();
     }
   };
@@ -57,8 +58,12 @@ const Search = ({
   };
   const handleChange = (data: string) => {
     setSearchValue(data);
-    if (data === '') {
-      onSearch('');
+    if (showClose) {
+      if (data === '') {
+        onSearch('');
+      }
+    } else {
+      onSearch(data);
     }
   };
 
@@ -105,7 +110,9 @@ const Search = ({
       {isExpand && (
         <>
           <div
-            className="ff-search-clear-button"
+            className={classNames('ff-search-clear-button', {
+              showClose: !showClose,
+            })}
             onClick={() => handleSearchClearAndClose('Clear')}
           >
             {searchValue !== '' && (
@@ -117,7 +124,11 @@ const Search = ({
             )}
           </div>
           <Tooltip title="Close">
-            <div className="ff-search-close-icon">
+            <div
+              className={classNames('ff-search-close-icon', {
+                showClose: !showClose,
+              })}
+            >
               <Icon
                 height={6}
                 width={6}

package/src/components/Search/types.ts

@@ -16,4 +16,5 @@ export interface SearchProps {
   isExpand: boolean;
   onClose: () => void;
   onExpand: (isExpand: boolean) => void;
+  showClose?:boolean
 }

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

@@ -352,4 +352,89 @@ export const IconOptionSelection: Story = {
   },
 };
 
+export const SelectWithPlaceHolder: Story = {
+  render: () => {
+    const optionsList = [
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: '',
+      value: '',
+    });
+
+    const handleChange = (option: Option) => {
+      setSelectedOption(option);
+    };
+
+    return (
+      <Select
+        optionsList={optionsList}
+        selectedOption={selectedOption}
+        onChange={handleChange}
+        placeHolder="Search"
+        showLabel={false}
+        label="test"
+      />
+    );
+  },
+};
+
+export const SelectWithToolTip: Story = {
+  render: () => {
+    const optionsList = [
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: '',
+      value: '',
+    });
+
+    const handleChange = (option: Option) => {
+      setSelectedOption(option);
+    };
+
+    return (
+      <Select
+        optionsList={optionsList}
+        selectedOption={selectedOption}
+        onChange={handleChange}
+        label="Select Option"
+        showToolTip={true}
+      />
+    );
+  },
+};
+
 export default meta;

package/src/components/Select/Select.tsx

@@ -2,7 +2,7 @@ import { ChangeEvent, FC, useEffect, useRef, useState } from 'react';
 import './Select.scss';
 import Icon from '../Icon';
 import Typography from '../Typography';
-import { DrowdownPosition, Option, SelectProps } from './types';
+import { DropdownPosition, Option, SelectProps } from './types';
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 import Dropdown from './components/Dropdown';
@@ -31,6 +31,8 @@ const Select: FC<SelectProps> = ({
   onBlur = () => {},
   disableInput = false,
   showIcon = false,
+  placeHolder = '',
+  showToolTip = false,
 }) => {
   const selectWidth = typeof width === 'number' ? `${width}px` : width;
 
@@ -41,7 +43,7 @@ const Select: FC<SelectProps> = ({
   });
   const { searchedText, searchedIcon } = searchedOption;
   const [selectOptionList, setSelectOptionList] = useState<Option[] | []>([]);
-  const [dropdownPosition, setDropdownPosition] = useState<DrowdownPosition>({
+  const [dropdownPosition, setDropdownPosition] = useState<DropdownPosition>({
     positionX: 0,
     positionY: 0,
     width: 0,
@@ -170,6 +172,10 @@ const Select: FC<SelectProps> = ({
     setSelectOptionList(optionsList);
   }, [optionsList]);
 
+  if (showLabel) {
+    placeHolder = '';
+  }
+
   return (
     <div
       className={`ff-select-wrapper ${className}`}
@@ -206,6 +212,7 @@ const Select: FC<SelectProps> = ({
           disabled={disabled}
           onChange={handleChange}
           readOnly={disableInput}
+          placeholder={placeHolder}
         />
         {optionsRequired && (
           <div
@@ -266,6 +273,7 @@ const Select: FC<SelectProps> = ({
                 heightFromTop={height}
                 selectedOption={searchedText}
                 showIcon={showIcon}
+                showToolTip={showToolTip}
               />,
               document.body
             )}

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

@@ -12,6 +12,7 @@ import {
 } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
 import useClickOutside from '../../../hooks/useClickOutside';
 import Icon from '../../Icon';
+import Tooltip from '../../Tooltip';
 
 const Dropdown: FC<DropdownProps> = ({
   options = [],
@@ -26,6 +27,7 @@ const Dropdown: FC<DropdownProps> = ({
   selectedOption,
   valueAccessor,
   showIcon = false,
+  showToolTip = false,
 }) => {
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
@@ -72,22 +74,28 @@ const Dropdown: FC<DropdownProps> = ({
       return label;
     }
     return (
-      <Typography
-        as="div"
-        lineHeight="30px"
-        color="var(--ff-select-text-color)"
-        className={classNames({
-          'ff-select-dropdown-icon-container': showIcon,
-        })}
+      <Tooltip
+        placement="bottom"
+        title={showToolTip ? label : ''}
+        zIndex={optionZIndex + 1}
       >
-        {showIcon && (
-          <Icon
-            name={icon}
-            className="ff-select-dropdown-icon-container__icon"
-          />
-        )}
-        {label}
-      </Typography>
+        <Typography
+          as="div"
+          lineHeight="30px"
+          color="var(--ff-select-text-color)"
+          className={classNames({
+            'ff-select-dropdown-icon-container': showIcon,
+          })}
+        >
+          {showIcon && (
+            <Icon
+              name={icon}
+              className="ff-select-dropdown-icon-container__icon"
+            />
+          )}
+          {label}
+        </Typography>
+      </Tooltip>
     );
   };
 

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

@@ -1,9 +1,9 @@
-import { DrowdownPosition, Option } from '../types';
+import { DropdownPosition, Option } from '../types';
 import { RefObject } from 'react';
 
 export interface DropdownProps {
   options: Option[];
-  dropdownPosition: DrowdownPosition;
+  dropdownPosition: DropdownPosition;
   optionZIndex: number;
   labelAccessor?: string;
   valueAccessor?: string;
@@ -14,6 +14,7 @@ export interface DropdownProps {
   heightFromTop: number;
   selectedOption?: Option;
   showIcon?: boolean;
+  showToolTip?: boolean
 }
 
 export const dropdownDefaultCSSData = {

package/src/components/Select/types.ts

@@ -108,9 +108,19 @@ export interface SelectProps {
    *  Provide the icon name for the select
    */
   iconName?: string;
+
+  /**
+   * Provide the placehoder for the select
+   */
+  placeHolder?: string;
+
+  /**
+   * Provide the boolean value if tooltip is reuired or not
+   */
+  showToolTip?: boolean
 }
 
-export interface DrowdownPosition {
+export interface DropdownPosition {
   positionX: number;
   positionY: number;
   width: number;
@@ -124,7 +134,7 @@ export interface SelectState {
   showOptions: boolean;
   options: Option[];
   option: string;
-  dropdownPosition: DrowdownPosition;
+  dropdownPosition: DropdownPosition;
 }
 
 type OptionValue = any;

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx

@@ -30,6 +30,7 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
   addInstanceLabel = 'Add Environment',
   scriptType = 'Automation',
   projectType = 'Web',
+  readOnly = true,
 }) => {
   const [selectedMachineInstance, setSelectedMachineInstance] = useState({});
   const selectButtonRef = useRef<HTMLButtonElement>(null);
@@ -174,6 +175,7 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
             addInstanceLabel={addInstanceLabel}
             scriptType={scriptType}
             projectType={projectType}
+            readOnly={readOnly}
           />
         )}
       </div>

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

@@ -26,6 +26,7 @@ const Branches = ({
   addInstanceLabel = '',
   scriptType = '',
   projectType = '',
+  readOnly,
 }: BranchesProps) => {
   const evenRow = rowIndex % 2 === 0;
   const lastMachineInstance = checkEmpty(
@@ -192,72 +193,79 @@ const Branches = ({
                       ) as MachineType[]
                     }
                     contentReverse={!evenRow}
-                    modalId={`${machineInstanceId}-runCount-${numberOfRuns}`}
+                    modalId={`${machineInstanceId}-runCount-${
+                      numberOfRuns - 1
+                    }`}
                     onClick={() =>
                       onUpdateAddBrowserInstance(
                         `${machineInstanceId}-runCount-0`,
-                          machineInstance as ExecutionContext
+                        machineInstance as ExecutionContext
                       )
                     }
                   />
                 </div>
-                <div
-                  className={classNames({
-                    'ff-connecting-branch-datalist': evenRow,
-                    'ff-connecting-branch-datalist-reverse': !evenRow,
-                  })}
-                >
-                  {hideDataSet && (
-                    <div
-                      id={`ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`}
-                      className="ff-dataset-list-branch"
+                {!readOnly && (
+                  <div
+                    className={classNames({
+                      'ff-connecting-branch-datalist': evenRow,
+                      'ff-connecting-branch-datalist-reverse': !evenRow,
+                    })}
+                  >
+                    {hideDataSet && (
+                      <>
+                        <div
+                          id={`ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`}
+                          className="ff-dataset-list-branch"
+                          onClick={() =>
+                            onUpdateDataSetList(
+                              `ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`,
+                              {
+                                peVariableSetId: peVariableSetId,
+                                globalVariableSetId: globalVariableSetId,
+                                testDataSetId: testDataSetId,
+                              },
+                              true,
+                              numberOfRuns,
+                              machineInstanceId
+                            )
+                          }
+                        >
+                          <Icon
+                            name="datalist_icon"
+                            className="ff-connecting-icon"
+                          />
+                          <Typography
+                            className="ff-connecting-text"
+                            color="var(--ff-connecting-branch-color)"
+                          >
+                            Dataset List
+                          </Typography>
+                        </div>
+
+                        <Icon
+                          name="plus_icon"
+                          className="ff-connecting-icon"
+                          onClick={() => onAddRunBrowser(machineInstanceId)}
+                          color="var(--ff-connecting-branch-color)"
+                        />
+                        <Typography
+                          className="ff-connecting-text"
+                          color="var(--ff-connecting-branch-color)"
+                        >
+                          Run
+                        </Typography>
+                      </>
+                    )}
+                    <Icon
+                      name="delete"
+                      className="ff-connecting-delete-icon"
                       onClick={() =>
-                        onUpdateDataSetList(
-                          `ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`,
-                          {
-                            peVariableSetId: peVariableSetId,
-                            globalVariableSetId: globalVariableSetId,
-                            testDataSetId: testDataSetId,
-                          },
-                          true,
-                          numberOfRuns,
-                          machineInstanceId
-                        )
+                        onDeleteBrowser(machineInstanceId, numberOfRuns)
                       }
-                    >
-                      <Icon
-                        name="datalist_icon"
-                        className="ff-connecting-icon"
-                      />
-                      <Typography
-                        className="ff-connecting-text"
-                        color="var(--ff-connecting-branch-color)"
-                      >
-                        Dataset List
-                      </Typography>
-                    </div>
-                  )}
-                  <Icon
-                    name="plus_icon"
-                    className="ff-connecting-icon"
-                    onClick={() => onAddRunBrowser(machineInstanceId)}
-                    color="var(--ff-connecting-branch-color)"
-                  />
-                  <Typography
-                    className="ff-connecting-text"
-                    color="var(--ff-connecting-branch-color)"
-                  >
-                    Run
-                  </Typography>
-                  <Icon
-                    name="delete"
-                    className="ff-connecting-delete-icon"
-                    onClick={() =>
-                      onDeleteBrowser(machineInstanceId, numberOfRuns)
-                    }
-                    color="var(--ff-connecting-branch-delete-color)"
-                  />
-                </div>
+                      color="var(--ff-connecting-branch-delete-color)"
+                    />
+                  </div>
+                )}
               </div>
             ) : (
               <div className="ff-connecting-branch-browser-button">

package/src/components/SequentialConnectingBranch/components/Branches/types.ts

@@ -24,6 +24,7 @@ export interface BranchesProps {
     machineInstance: ExecutionContext
   ) => void;
   projectType?: string;
+  readOnly: boolean
 }
 
 export interface branchTypeProps {

package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx

@@ -18,6 +18,7 @@ const ConnectingBranches = ({
   addInstanceLabel = '',
   scriptType = '',
   projectType = 'Web',
+  readOnly = false
 }: ConnectingBranchesProps) => {
   const [machineInstance, setMachineInstance] = useState<
     ExecutionContext[] | {}[]
@@ -66,6 +67,7 @@ const ConnectingBranches = ({
             addInstanceLabel={addInstanceLabel}
             scriptType={scriptType}
             projectType={projectType}
+            readOnly={readOnly}
           />
         </Fragment>
       ))}

package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts

@@ -21,4 +21,5 @@ export interface ConnectingBranchesProps {
     modalId: string,
     machineInstance: ExecutionContext
   ) => void;
+  readOnly: boolean;
 }