pixel-react-excel-sheet 1.0.11 → 1.0.12

package/src/components/Excel/dataConversion.ts

@@ -54,7 +54,7 @@ const getTextAlignmentBack = (
 
 export const getTextDecorationBack = (
   textDecoration: string
-): 'solid' | 'dotted' | 'dashed' | 'wavy' | 'NONE' => {  
+): 'solid' | 'dotted' | 'dashed' | 'wavy' | 'NONE' => {
   switch (textDecoration.toLowerCase()) {
     case 'solid':
       return 'solid';
@@ -74,6 +74,40 @@ export const getTextDecorationBack = (
 export function convertStyleToFrontend(
   backendStyle: BackendStyle
 ): React.CSSProperties {
+
+  const { border } = backendStyle;
+
+  let borderTop = '';
+  let borderRight = '';
+  let borderBottom = '';
+  let borderLeft = '';
+
+  if (border.top !== 'NONE') {
+    borderTop =
+      border.top === 'THIN'
+        ? '2px solid var(--input-hover-border-color)'
+        : '1px solid var(--excel-sheet-border)';
+  }
+  if (border.right !== 'NONE') {
+    borderRight =
+      border.right === 'THIN'
+        ? '2px solid var(--input-hover-border-color)'
+        : '1px solid var(--excel-sheet-border)';
+  }
+  if (border.bottom !== 'NONE') {
+    borderBottom =
+      border.bottom === 'THIN'
+        ? '2px solid var(--input-hover-border-color)'
+        : '1px solid var(--excel-sheet-border)';
+  }
+  if (border.left !== 'NONE') {
+    borderLeft =
+      border.left === 'THIN'
+        ? '2px solid var(--input-hover-border-color)'
+        : '1px solid var(--excel-sheet-border)';
+  }
+
+  // Return the converted styles
   return {
     fontSize: `${backendStyle.size}px`,
     fontFamily: backendStyle.name,
@@ -81,24 +115,13 @@ export function convertStyleToFrontend(
     backgroundColor: `#${backendStyle.backgroundColor}`,
     fontWeight: backendStyle.bold ? 'bold' : 'normal',
     fontStyle: backendStyle.italic ? 'italic' : 'normal',
-    textDecoration: backendStyle.underline ? 'underline' : 'value',
-    textDecorationStyle: getTextDecoration(backendStyle.underline),
-    borderTop:
-      backendStyle.border.top === 'NONE'
-        ? 'none'
-        : `1px solid ${backendStyle.borderColor}`,
-    borderRight:
-      backendStyle.border.right === 'NONE'
-        ? 'none'
-        : `1px solid ${backendStyle.borderColor}`,
-    borderBottom:
-      backendStyle.border.bottom === 'NONE'
-        ? 'none'
-        : `1px solid ${backendStyle.borderColor}`,
-    borderLeft:
-      backendStyle.border.left === 'NONE'
-        ? 'none'
-        : `1px solid ${backendStyle.borderColor}`,
+    textDecoration: backendStyle.underline
+      ? `underline ${getTextDecoration(backendStyle.underline)}`
+      : 'none',
+    borderTop: borderTop,
+    borderRight: borderRight,
+    borderBottom: borderBottom,
+    borderLeft: borderLeft,
     textAlign: getTextAlignment(backendStyle.alignment.horizontal),
   };
 }
@@ -133,7 +156,7 @@ export const convertStyleToBackend = (
     size: parseInt(frontendStyle.fontSize?.toString() || '11', 10),
     bold: frontendStyle.fontWeight === 'bold',
     italic: frontendStyle.fontStyle === 'italic',
-    underline:"solid",
+    underline: 'solid',
     color: frontendStyle.color?.replace('#', '') || '000000',
     backgroundColor:
       frontendStyle.backgroundColor?.replace('#', '') || 'FFFFFF',

package/src/components/FieldSet/FieldSet.scss

@@ -1,9 +1,10 @@
 .ff_fieldSet_container {
   .ff_fieldSet {
-    border-color: var(--ff-connecting-branch-modal-border);
+    border:1px solid var(--ff-select-border-color);
     border-radius: 5px;
     .ff_legend_container{
         display: flex;
+        margin-left: 8px
     }
   }
 }

package/src/components/FieldSet/FieldSet.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import FieldSet from './FieldSet';
+import Typography from '../Typography';
 
 const meta: Meta<typeof FieldSet> = {
   title: 'Components/FieldSet',
@@ -17,7 +18,7 @@ const defaultArgs = {
   legendName: 'Default Legend',
   height: '200px',
   width: '300px',
-  children: 'Default content inside the FieldSet.',
+  children: <Typography>'Default content inside the FieldSet.'</Typography>,
 };
 
 export const Default: Story = {

package/src/components/FileDropzone/FileDropzone.scss

@@ -65,7 +65,6 @@
 
   .ff-file-details-wrapper {
     @include column-flex-gap(10px);
-    width: 640px;
     max-height: 300px;
     overflow-y: auto;
     scroll-behavior: smooth;

package/src/components/Icon/iconList.ts

@@ -219,9 +219,32 @@ import NoData from '../../assets/icons/no_data.svg?react';
 import AddUser from '../../assets/icons/add_user.svg?react';
 import RemoveUser from '../../assets/icons/remove_user.svg?react';
 import AddToArchive from '../../assets/icons/add_archive.svg?react';
+import AddVariableIcon from '../../assets/icons/add_variable.svg?react';
 import DashboardIcon from '../../assets/icons/dashboard_icon.svg?react'; //TODO:this is temporary icon
 import InfoUser from '../../assets/icons/info_user.svg?react';
 import WebServiceIcon from '../../assets/icons/web_service_icon.svg?react';
+import ProjectStatusIcon from '../../assets/icons/project_status_icon.svg?react';
+import captureIcon from '../../assets/icons/capture_icon.svg?react';
+import rotateIcon from '../../assets/icons/rotate_icon.svg?react';
+import tapIcon from '../../assets/icons/tap_icon.svg?react';
+import refreshIcon from '../../assets/icons/refresh_icon.svg?react';
+import swipeIcon from '../../assets/icons/swipe_icon.svg?react';
+import backward from '../../assets/icons/backward.svg?react';
+import forward from '../../assets/icons/forward.svg?react';
+
+import dependsOnScript from '../../assets/icons/depends_on_script.svg?react';
+import parameters from '../../assets/icons/parameters.svg?react';
+import prePostCondition from '../../assets/icons/pre_post_condition.svg?react';
+import programElement from '../../assets/icons/program_element.svg?react';
+import testData from '../../assets/icons/test_data.svg?react';
+import testDataSet from '../../assets/icons/test_data_set.svg?react';
+import emailGroup from '../../assets/icons/email_group.svg?react';
+import variableSet from '../../assets/icons/variable_set.svg?react';
+
+import machineEnableIcon from '../../assets/icons/machine_enable_icon.svg?react';
+import machineDisableIcon from '../../assets/icons/machine_disable_icon.svg?react';
+import suitesIcon from '../../assets/icons/suites_icon.svg?react'; 
+import executionsIcon from '../../assets/icons/executions_icon.svg?react';
 
 Components['success'] = ToastSuccessIcon;
 Components['alert'] = Alert;
@@ -267,7 +290,7 @@ Components['delete'] = DeleteIcon;
 Components['details'] = DetailsIcon;
 Components['impactList'] = ImpactListIcon;
 Components['beautify_icon'] = BeautifyIcon;
-Components['add_variable'] = AddVariable;
+Components['add_variable_icon'] = AddVariable;
 Components['replace_file'] = ReplaceFile;
 Components['formate_painter'] = FormatePainter;
 Components['bold'] = Bold;
@@ -439,8 +462,28 @@ Components['no_data'] = NoData;
 Components['add_user'] = AddUser;
 Components['add_to_archive'] = AddToArchive;
 Components['remove_user'] = RemoveUser;
+Components['add_variable'] = AddVariableIcon;
 Components['dashboard_icon'] = DashboardIcon; //TODO:this is temporary icon
 Components['info_user'] = InfoUser;
 Components['web_service_icon'] = WebServiceIcon;
-
+Components['project_status_icon'] = ProjectStatusIcon;
+Components['capture_icon'] = captureIcon;
+Components['backward'] = backward;
+Components['forward'] = forward;
+Components['refresh_icon'] = refreshIcon;
+Components['rotate_icon'] = rotateIcon;
+Components['tap_icon'] = tapIcon;
+Components['swipe_icon'] = swipeIcon;
+Components['depends_on_script'] = dependsOnScript;
+Components['parameters'] = parameters;
+Components['pre_post_condition'] = prePostCondition;
+Components['program_element'] = programElement;
+Components['test_data'] = testData;
+Components['test_data_set'] = testDataSet;
+Components['email_group'] = emailGroup;
+Components['variable_set'] = variableSet;
+Components['machine_enable_icon'] = machineEnableIcon;
+Components['machine_disable_icon'] = machineDisableIcon;
+Components['executions_icon'] = executionsIcon;
+Components['suites_icon'] = suitesIcon;
 export default Components;

package/src/components/IconButton/IconButton.scss

@@ -9,32 +9,32 @@
   cursor: pointer;
   @include mixins.center-content();
   gap: 8px;
-  background-color: var(--secondary-icon-color);
+  background-color: var(--hover-color);
   padding: 2px 8px 2px 2px;
-  border: 1px solid transparent;
+  border: 1px solid var(--secondary-icon-color);
   .button-icon {
     width: 20px;
     height: 20px;
-    border: 1px solid transparent;
+    border: 1px solid var(--primary-icon-color);
     border-radius: 50%;
     @include mixins.center-content();
-    background-color: var(--hover-color);
+    background-color: var(--secondary-icon-color);
     .ff-icon-color {
       path {
-        color: var(--secondary-icon-color);
+        color: var(--primary-icon-color);
       }
     }
   }
   .icon-name {
-    color: var(--primary-icon-color);
+    color: var(--secondary-icon-color);
     @include mixins.center-content();
   }
   &:hover {
-    border: 1px solid var(--secondary-icon-color);
-    background-color: var(--hover-color);
+    border: 1px solid transparent;
+    background-color: var(--secondary-icon-color);
     .icon-name {
       font-weight: 600;
-      color: var(--secondary-icon-color);
+      color: var(--primary-icon-color);
       @include mixins.center-content();
     }
     .button-icon {
@@ -43,10 +43,10 @@
       border: 1px solid transparent;
       border-radius: 50%;
       @include mixins.center-content();
-      background-color: var(--secondary-icon-color);
+      background-color: var(--hover-color);
       .ff-icon-color {
         path {
-          color: var(--primary-icon-color);
+          color: var(--secondary-icon-color);
         }
       }
     }

package/src/components/IconButton/IconButton.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import IconButton from './IconButton';
+import React from 'react';
 
 const meta: Meta<typeof IconButton> = {
   title: 'Components/IconButton',

package/src/components/IconButton/IconButton.tsx

@@ -1,17 +1,16 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import Icon from '../Icon';
 import './IconButton.scss';
 import classNames from 'classnames';
 import Typography from '../Typography';
 import { IconButtonProps } from './types';
-
-const IconButton: React.FC<IconButtonProps> = ({
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(({
   label,
   iconName = 'plus_user_icon',
   onClick,
-}) => {
+}, ref) => {
   return (
-    <button onClick={onClick} className={classNames('ff-plus-icon')}>
+    <button onClick={onClick} className={classNames('ff-plus-icon')} ref={ref}>
       <div className={classNames('button-icon')}>
         <Icon
           height={12}
@@ -30,6 +29,5 @@ const IconButton: React.FC<IconButtonProps> = ({
       </Typography>
     </button>
   );
-};
-
-export default IconButton;
+});
+export default IconButton;

package/src/components/IconButton/types.ts

@@ -2,4 +2,5 @@ export interface IconButtonProps {
   label: string;
   iconName: string;
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}
+  ref?: React.Ref<HTMLButtonElement>;
+}

package/src/components/IconRadioGroup/IconRadioGroup.scss

@@ -16,6 +16,7 @@
   align-items: center;
   cursor: pointer;
   position: relative;
+  z-index: 5;
 
   &.selected {
     background-color: var(--brand-color);
@@ -57,7 +58,7 @@
   right: 0;
   height: 1px;
   background-color: var(--border-color);
-  z-index: -1;
+  z-index: 3;
   border-radius: 2px 0px 0px 0px;
   opacity: 0px;
 }

package/src/components/Input/Input.tsx

@@ -1,103 +1,114 @@
+import { forwardRef } from 'react';
 import classNames from 'classnames';
 import './Input.scss';
 import { InputProps } from './types';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 
-const Input = ({
-  type = 'text',
-  variant = 'primary',
-  name = '',
-  label,
-  disabled = false,
-  required = false,
-  placeholder = 'Enter input',
-  value = '',
-  helperText = '',
-  error,
-  noBorder,
-  className = '',
-  onChange,
-  onBlur,
-  onFocus,
-  autoComplete = 'off',
-  minValue = -Infinity,
-  maxValue = Infinity,
-  transparentBackground = false,
-  size = 'small',
-  isLabelRequired = true,
-  ...props
-}: InputProps) => {
-  const isValueFilled = !checkEmpty(value);
-  return (
-    <div
-      className={classNames('ff-input-container', {
-        'ff-input-container--float': isValueFilled,
-        'ff-input-container--disabled': !!disabled,
-      })}
-    >
-      {isLabelRequired && (
-        <label
-          htmlFor={name}
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      type = 'text',
+      variant = 'primary',
+      name = '',
+      label,
+      disabled = false,
+      required = false,
+      placeholder = 'Enter input',
+      value = '',
+      helperText = '',
+      error,
+      noBorder,
+      className = '',
+      onChange,
+      onBlur,
+      onFocus,
+      autoComplete = 'off',
+      minValue = -Infinity,
+      maxValue = Infinity,
+      transparentBackground = false,
+      size = 'small',
+      isLabelRequired = true,
+      ...props
+    },
+    ref
+  ) => {
+    const isValueFilled = !checkEmpty(value);
+
+    return (
+      <div
+        className={classNames('ff-input-container', {
+          'ff-input-container--float': isValueFilled,
+          'ff-input-container--disabled': !!disabled,
+        })}
+      >
+        {isLabelRequired && (
+          <label
+            htmlFor={name}
+            className={classNames(
+              `ff-input-label-container ff-input-label-container--${size}`,
+              {
+                'ff-input-label-container--danger': !!error,
+              }
+            )}
+          >
+            {required && <span className="required-asterisk">*</span>}
+            <span
+              className={classNames(
+                `ff-input-label ff-input-label--${variant}`,
+                {
+                  'ff-input-label--no-hover': !!value,
+                  'ff-input-label--disabled': !!disabled,
+                  'ff-input-label--danger': !!error,
+                }
+              )}
+            >
+              {label}
+            </span>
+          </label>
+        )}
+
+        <input
+          ref={ref} // Forward the ref here
+          name={name}
+          value={value}
+          type={type}
+          spellCheck={false}
+          id={name}
           className={classNames(
-            `ff-input-label-container ff-input-label-container--${size}`,
+            `ff-input ff-input-${variant} default-input ff-input--${size}`,
             {
-              'ff-input-label-container--danger': !!error,
-            }
+              ['ff-input--transparentBackground']: !!transparentBackground,
+              'ff-input--no-hover': !!value,
+              'ff-input--disabled': !!disabled,
+              'ff-input--danger': !!error,
+              'ff-input--no-border': !!noBorder,
+              'ff-input--placeholder': !isLabelRequired,
+            },
+            `${className}`
           )}
-        >
-          {required && <span className="required-asterisk">*</span>}
+          placeholder={placeholder}
+          disabled={disabled}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          autoComplete={autoComplete}
+          min={minValue}
+          max={maxValue}
+          {...props}
+        />
+
+        {helperText && error && (
           <span
-            className={classNames(`ff-input-label ff-input-label--${variant}`, {
-              'ff-input-label--no-hover': !!value,
-              'ff-input-label--disabled': !!disabled,
-              'ff-input-label--danger': !!error,
+            className={classNames('ff-input-message', {
+              'ff-input-message--danger': !!error,
             })}
           >
-            {label}
+            {helperText}
           </span>
-        </label>
-      )}
-
-      <input
-        name={name}
-        value={value}
-        type={type}
-        spellCheck={false}
-        id={name}
-        className={classNames(
-          `ff-input ff-input-${variant} default-input ff-input--${size}`,
-          {
-            ['ff-input--transparentBackground']: !!transparentBackground,
-            'ff-input--no-hover': !!value,
-            'ff-input--disabled': !!disabled,
-            'ff-input--danger': !!error,
-            'ff-input--no-border': !!noBorder,
-            'ff-input--placeholder': !isLabelRequired,
-          },
-          `${className}`
         )}
-        placeholder={placeholder}
-        disabled={disabled}
-        onChange={onChange}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        autoComplete={autoComplete}
-        min={minValue}
-        max={maxValue}
-        {...props}
-      />
-
-      {helperText && error && (
-        <span
-          className={classNames('ff-input-message', {
-            'ff-input-message--danger': !!error,
-          })}
-        >
-          {helperText}
-        </span>
-      )}
-    </div>
-  );
-};
+      </div>
+    );
+  }
+);
 
 export default Input;

package/src/components/LabelEditTextField/LabelEditTextField.tsx

@@ -34,7 +34,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   variant = 'textField',
   dropdownData = [],
   width,
-  height = '22px',
+  height,
   isOpen = false,
   confirmAction,
   onClick,

package/src/components/MiniModal/MiniModal.scss

@@ -35,7 +35,6 @@
     &.popover-arrow-top {
       bottom: 100%;
       left: 30px;
-      border-width: 0 10px 10px 10px;
       padding: 0 3px 0 0;
       border-color: transparent transparent var(--ff-mini-modal-border)
         transparent;
@@ -46,7 +45,6 @@
     }
     &.popover-arrow-left {
       left: -15px; //align the arrow with modal for the right side modal
-      border-width: 10px 10px 10px 0;
       border-color: transparent var(--ff-mini-modal-border) transparent
         transparent;
       filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));
@@ -58,7 +56,6 @@
     &.popover-arrow-bottom {
       top: 100%;
       left: 30px;
-      border-width: 10px 10px 0 10px;
       border-color: var(--ff-mini-modal-border) transparent transparent
         transparent; // Bottom part of the arrow with the correct color
       filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));
@@ -70,7 +67,6 @@
     &.popover-arrow-right {
       right: -10px;
       top: 66px;
-      border-width: 10px 0 10px 10px;
       border-color: transparent transparent transparent
         var(--ff-mini-modal-border);
       filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));

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

@@ -55,7 +55,7 @@ const BasicModalComponent = () => {
             isOverlay: true,
             zIndexOverlay: 99,
           }}
-          modalProperties={{ width: 300, height: 180 }}
+          modalProperties={{ width: 300, height: 180, left: 180, top: 250 }}
           headerProps={
             <>
               <Typography as="p">Modal 1</Typography>
@@ -271,7 +271,8 @@ export const CustomModalWithArrow = () => {
             isOverlay: true,
             zIndexOverlay: 99,
           }}
-          modalProperties={{ width: 300, height: 250 }}
+          modalProperties={{ width: 300, height: 250, left: 180 }}
+          arrowProperties={{ left: 270, size: 6 }}
           arrowZIndex={1000}
           headerProps={
             <>

package/src/components/MiniModal/MiniModal.tsx

@@ -31,6 +31,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       extraLeftSpace,
       isIconModel,
       wrapperProperties,
+      arrowProperties,
       arrowZIndex,
       overlay,
       outSideClick,
@@ -43,7 +44,21 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
     });
     const [isVisible, setIsVisible] = useState(false);
     const modalRef = useRef<HTMLDivElement>(null);
+    const {
+      width: modalWidth,
+      height: modalHeight,
+      borderRadius: modalBorderRadius = 4,
+      zIndex: modalZIndex = 99,
+      boxShadow: modalBoxShadow,
+      left: modalLeft,
+      top: modalTop,
+    } = modalProperties || {};
 
+    const {
+      left: popOverLeft,
+      top: popOverTop,
+      size: popOverSize = 10,
+    } = arrowProperties || {};
     // Function to calculate available space
     const getAvailableSpace = (rect: Rect): AvailableSpace => {
       const { top, left, bottom, right } = rect;
@@ -196,14 +211,6 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       };
     }, [calculatePosition]);
 
-    const {
-      width: modalWidth,
-      height: modalHeight,
-      borderRadius: modalBorderRadius = 4,
-      zIndex: modalZIndex = 99,
-      boxShadow: modalBoxShadow,
-    } = modalProperties || {};
-
     const {
       width: wrapperWidth = 35,
       zIndex: wrapperZIndex = 101,
@@ -234,8 +241,8 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
             animatedModal: isAnimated,
           })}
           style={{
-            top: `${calculatedModalTop}px`,
-            left: `${calculatedModalLeft}px`,
+            top: `${modalTop ?? calculatedModalTop}px`,
+            left: `${modalLeft ?? calculatedModalLeft}px`,
           }}
         >
           {isPopOver && (
@@ -251,6 +258,17 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
               } ${getArrowClassName()}`}
               style={{
                 zIndex: `${arrowZIndex}`,
+                top: `${popOverTop && popOverTop}px`,
+                left: `${popOverLeft && popOverLeft}px`,
+                borderWidth: `${
+                  modalPosition === 'right'
+                    ? `${popOverSize}px ${popOverSize}px ${popOverSize}px 0`
+                    : modalPosition === 'top'
+                    ? `${popOverSize}px ${popOverSize}px 0 ${popOverSize}px`
+                    : modalPosition === 'left'
+                    ? `${popOverSize}px 0 ${popOverSize}px ${popOverSize}px`
+                    : `0 ${popOverSize}px ${popOverSize}px ${popOverSize}px`
+                }`,
               }}
             />
           )}