pixel-react 1.6.7 → 1.6.8

package/src/components/FileDropzone/RadioFilePreview.tsx

@@ -0,0 +1,76 @@
+import './FileDropzone.scss';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import { RadioFilePreviewProps } from './types';
+import Typography from '../Typography';
+import { useRef } from 'react';
+
+const RadioFilePreview: React.FC<RadioFilePreviewProps> = ({
+  selectedFile,
+  onFileRemoveClick,
+  onFileReplaceClick
+}) => {
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleReplaceClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      onFileReplaceClick?.(file);
+    }
+  };
+  return (
+    <div className="ff-webservice-file-wrapper">
+      <div className="ff-file-info">
+        <>
+          <Tooltip title={selectedFile}>
+            <Typography
+              lineHeight="18px"
+              fontWeight="semi-bold"
+              color={'var(--text-color)'}
+              className="ff-webservice-file-name"
+            >
+              {selectedFile}
+            </Typography>
+          </Tooltip>
+        </>
+      </div>
+      <>
+        <Tooltip title="Remove">
+          <Icon
+            name="close"
+            height={12}
+            width={12}
+            hoverEffect
+            onClick={onFileRemoveClick}
+          />
+        </Tooltip>
+      </>
+      <>
+        <Tooltip title="Replace">
+          <Icon
+            name="replace_file"
+            color={'var(--icons-default-color)'}
+            height={16}
+            width={16}
+            hoverEffect
+            onClick={handleReplaceClick}
+          />
+        </Tooltip>
+        <input
+        type="file"
+        ref={fileInputRef}
+        className='ff-input-ref'
+        onChange={handleFileChange}
+      />
+      </>
+    </div>
+  );
+};
+
+export default RadioFilePreview;

package/src/components/FileDropzone/types.ts

@@ -1,4 +1,8 @@
 import { ReactNode } from 'react';
+export interface RadioOption {
+  label: string;
+  value: string;
+}
 
 export interface FileDropzoneProps {
   /**
@@ -65,6 +69,57 @@ export interface FileDropzoneProps {
    *  Returns the rejected files in the state
    **/
   getRejectedFiles?: (files: FileRejection[]) => void;
+
+  /**
+   *  If its used in WebService has some other functionality so need to pass boolean value.
+   **/
+  isWebServiceFileDropZone?: boolean;
+
+  /**
+   *  Its the selected radio option as a string.
+   **/
+  selectedRadioOption?: RadioOption; 
+
+  /**
+   *  Its the array of radio options in pattern of : {  label: string; value: string; }.
+   **/
+  radioOptions?: RadioOption[];
+
+  /**
+   *  Its the function which updates the selected radio option.
+   **/
+  handleOptionChange?: (option: RadioOption)=> void;
+
+  /**
+   *  Its the File Name of File Selected from Local File.
+   **/
+  setSelectedFile?: (file: File | null) => void;
+
+  /**
+   *  Its the File Name of File Selected from Local File.
+   **/
+  selectedFile?: File | null;
+
+  /**
+   *  Its the function which updates the Selected file from Local Directory.
+   **/
+  handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+
+  /**
+   *  Its the function which makes the selected File empty state.
+   **/
+  handleRemoveFile?: () => void;
+
+   /**
+   *  When The Api for the response fails need to show error message.
+   **/
+  isApiResponseError?: boolean;
+
+  /**
+   *  If isDisable is true not able to access the FileDropzone
+   **/
+  isDisable?: boolean;
+
 }
 export interface FileState {
   accepted: File[];
@@ -95,6 +150,7 @@ export interface DropzoneOptions {
   invalidFileMessage?: string;
   fileExistMessage?: string;
   validateMIMEType?: boolean;
+  isApiResponseError?:boolean;
 }
 
 export interface DropzoneState {
@@ -116,6 +172,15 @@ export interface DroppableProps {
   getInputProps: () => any;
   isDragActive: boolean;
   height: number | string;
+  isWebServiceFileDropZone?: boolean;
+  selectedRadioOption?: Option, 
+  radioOptions?: RadioOption[],
+  handleOptionChange?: (option: RadioOption)=> void,
+  selectedFile?: File | null,
+  setSelectedFile?: (file: File | null) => void;
+  handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  handleRemoveFile?: () => void;
+  isDisable?: boolean;
 }
 
 export interface FilePreviewProps {
@@ -124,3 +189,11 @@ export interface FilePreviewProps {
   onRemoveClick: (file: File) => void;
   onReplaceClick: (file: File) => void;
 }
+
+export interface RadioFilePreviewProps {
+  selectedFile: string;
+  error?: string;
+  onFileRemoveClick?: () => void;
+  onFileReplaceClick?: (file: File | null) => void;
+  setSelectedFile?: (file: File | null) => void;
+}

package/src/components/Icon/iconList.ts

@@ -127,6 +127,7 @@ import BackwardIcon from '../../assets/icons/backward_icon.svg?react';
 import ForwardIcon from '../../assets/icons/forward_icon.svg?react';
 import Reload from '../../assets/icons/reload.svg?react';
 import WindowMaximize from '../../assets/icons/window_maximize.svg?react';
+import WindowRestore from '../../assets/icons/window_restore.svg?react';
 import WindowMinimize from '../../assets/icons/window_minimize.svg?react';
 import HamburgerMenu from '../../assets/icons/hamburger_menu.svg?react';
 import AppSwitchIcon from '../../assets/icons/app_switch.svg?react';
@@ -370,6 +371,7 @@ Components['backward_icon'] = BackwardIcon;
 Components['forward_icon'] = ForwardIcon;
 Components['reload'] = Reload;
 Components['window_maximize'] = WindowMaximize;
+Components['window_restore'] = WindowRestore;
 Components['window_minimize'] = WindowMinimize;
 Components['hamburger_menu'] = HamburgerMenu;
 Components['app_switch'] = AppSwitchIcon;

package/src/components/Input/Input.scss

@@ -1,159 +1,171 @@
 @use '../../assets/styles/fonts';
 
-.ff-input-container {
-  display: flex;
-  flex-direction: column;
-  position: relative;
+.ff-input-fieldset {
+  display: inline-block;
+  border: none;
+  padding: 0;
+  margin: 0;
+  width: 100%;
 
-  .ff-input {
-    padding: 6px 8px;
+  &--disabled {
     border: 1px solid var(--input-default-border-color);
+    background: var(--input-disabled-background-color);
     border-radius: 4px;
-    outline: none;
-    line-height: 18px;
-    @extend .fontSm;
-    &--medium {
-      padding: 10px 9px;
-    }
-    &:disabled {
-      cursor: not-allowed;
-    }
-    &::placeholder {
-      opacity: 0;
-      @extend .fontXs;
-      line-height: 15px;
-    }
-    &--disabled {
-      background: transparent;
-      border-color: var(--input-default-border-color);
-    }
-    &--danger {
-      border-color: var(--input-error-text-color);
-    }
-    &--transparentBackground {
-      background: transparent;
-    }
-    &--no-border {
-      border: none;
-    }
-    &--placeholder {
-      &::placeholder {
-        opacity: 1;
-      }
-    }
+    opacity: 0.5;
   }
-
-  .ff-input-label-container {
-    @extend .ff-input;
+  .ff-input-container {
     display: flex;
-    gap: 2px;
-    position: absolute;
-    border: none;
-    outline: none;
-    line-height: 18px;
-    margin-top: 1px;
-    transition: all 0.3s ease-in-out;
-    &--medium {
-      line-height: 25px;
-    }
-    .ff-input-label {
-      color: var(--input-default-label-color);
-      &--danger {
-        color: var(--input-error-text-color);
-      }
-      &--disabled {
-        color: var(--input-default-border-color);
-        background-color: var(--input-label-bg-color);
-      }
-    }
+    flex-direction: column;
+    position: relative;
 
-    .required-asterisk {
-      color: var(--input-error-text-color);
-    }
-  }
-  &:hover {
-    .ff-input-label {
-      color: var(--input-default-label-color);
-      &--no-hover {
-        color: var(--input-default-label-color);
-      }
-      &--disabled {
-        color: var(--input-default-border-color);
-      }
-      &--danger {
-        color: var(--input-error-text-color);
-      }
-    }
     .ff-input {
-      border-color: var(--brand-color);
-      &--no-hover {
-        border-color: var(--input-default-border-color);
+      padding: 6px 8px;
+      border: 1px solid var(--input-default-border-color);
+      border-radius: 4px;
+      outline: none;
+      line-height: 18px;
+      @extend .fontSm;
+      &--medium {
+        padding: 10px 9px;
       }
-      &--disabled {
+      &:disabled {
+        cursor: not-allowed;
+        border: none;
         background: transparent;
-        border-color: var(--input-default-border-color);
+      }
+      &::placeholder {
+        opacity: 0;
+        @extend .fontXs;
+        line-height: 15px;
       }
       &--danger {
         border-color: var(--input-error-text-color);
       }
+      &--transparentBackground {
+        background: transparent;
+      }
+      &--no-border {
+        border: none;
+      }
+      &--placeholder {
+        &::placeholder {
+          opacity: 1;
+        }
+      }
     }
-  }
-  &:focus-within {
+
     .ff-input-label-container {
-      top: -9px;
-      @extend .fontXs;
-      background-color: var(--input-label-bg-color);
-      line-height: 15px;
-      padding: 0px 2px;
-      margin-left: 10px;
-    }
-    .ff-input-label {
-      &--primary {
-        color: var(--brand-color);
+      @extend .ff-input;
+      display: flex;
+      gap: 2px;
+      position: absolute;
+      border: none;
+      outline: none;
+      line-height: 18px;
+      margin-top: 1px;
+      transition: all 0.3s ease-in-out;
+      &--medium {
+        line-height: 25px;
       }
-      &--danger {
+      .ff-input-label {
+        color: var(--input-default-label-color);
+        &--danger {
+          color: var(--input-error-text-color);
+        }
+        &--disabled {
+          color: var(--input-default-border-color);
+          background-color: var(--input-label-bg-color);
+        }
+      }
+
+      .required-asterisk {
         color: var(--input-error-text-color);
       }
     }
-    .ff-input {
-      border-color: var(--brand-color);
-
-      &--danger {
-        border-color: var(--input-error-text-color);
+    &:hover {
+      .ff-input-label {
+        color: var(--input-default-label-color);
+        &--no-hover {
+          color: var(--input-default-label-color);
+        }
+        &--disabled {
+          color: var(--input-default-border-color);
+        }
+        &--danger {
+          color: var(--input-error-text-color);
+        }
       }
-
-      &::placeholder {
-        opacity: 1;
-        margin-bottom: 1px;
+      .ff-input {
+        border-color: var(--brand-color);
+        &--no-hover {
+          border-color: var(--input-default-border-color);
+        }
+        &--disabled {
+          background: transparent;
+          border-color: var(--input-default-border-color);
+        }
+        &--danger {
+          border-color: var(--input-error-text-color);
+        }
       }
     }
-  }
+    &:focus-within {
+      .ff-input-label-container {
+        top: -9px;
+        @extend .fontXs;
+        background-color: var(--input-label-bg-color);
+        line-height: 15px;
+        padding: 0px 2px;
+        margin-left: 10px;
+      }
+      .ff-input-label {
+        &--primary {
+          color: var(--brand-color);
+        }
+        &--danger {
+          color: var(--input-error-text-color);
+        }
+      }
+      .ff-input {
+        border-color: var(--brand-color);
+
+        &--danger {
+          border-color: var(--input-error-text-color);
+        }
 
-  .ff-input-message {
-    @extend .fontXs;
-    padding: 0px 4px;
-    margin-left: 8px;
-    line-height: 15px;
-    &--danger {
-      color: var(--input-error-text-color);
+        &::placeholder {
+          opacity: 1;
+          margin-bottom: 1px;
+        }
+      }
     }
-  }
 
-  &--float {
-    .ff-input-label-container {
-      //re-written label container code to place it at on border
-      top: -9px;
-      font-size: 10px;
-      background-color: var(--input-label-bg-color);
+    .ff-input-message {
+      @extend .fontXs;
+      padding: 0px 4px;
+      margin-left: 8px;
       line-height: 15px;
-      padding: 0px 2px;
-      margin-left: 10px;
+      &--danger {
+        color: var(--input-error-text-color);
+      }
     }
-    &--disabled {
-      cursor: not-allowed;
+
+    &--float {
       .ff-input-label-container {
+        //re-written label container code to place it at on border
+        top: -9px;
+        font-size: 10px;
+        background-color: var(--input-label-bg-color);
+        line-height: 15px;
+        padding: 0px 2px;
+        margin-left: 10px;
+      }
+      &--disabled {
         cursor: not-allowed;
+        .ff-input-label-container {
+          cursor: not-allowed;
+        }
       }
     }
   }
-}
+}

package/src/components/Input/Input.tsx

@@ -35,78 +35,84 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     const isValueFilled = !checkEmpty(value);
 
     return (
-      <div
-        className={classNames('ff-input-container', {
-          'ff-input-container--float': isValueFilled,
-          'ff-input-container--disabled': !!disabled,
+      <fieldset
+        className={classNames('ff-input-fieldset', {
+          'ff-input-fieldset--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
+        <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 ff-input-label--${variant}`,
+                `ff-input-label-container ff-input-label-container--${size}`,
                 {
-                  'ff-input-label--no-hover': !!value,
-                  'ff-input-label--disabled': !!disabled,
-                  'ff-input-label--danger': !!error,
+                  'ff-input-label-container--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 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}`
+              {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>
           )}
-          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>
+          <input
+            ref={ref} // Forward the ref here
+            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>
+      </fieldset>
     );
   }
 );

package/src/components/InputWithDropdown/InputWithDropdown.scss

@@ -10,6 +10,8 @@
     border-radius: 4px;
     padding: 0;
     position: relative;
+    justify-content: space-between;
+
     .ff-input-with-dropdown--left {
       display: flex;
       flex-direction: row-reverse;
@@ -24,6 +26,8 @@
     }
 
     .ff-floating-label-input-container {
+      display: flex;
+      flex: 1;
       .ff-floating-label {
         position: absolute;
         z-index: 9;
@@ -48,7 +52,7 @@
       }
 
       .ff-floating-input {
-        position: relative;
+        width: 100%;
         padding: 6px 7px;
         line-height: 18px;
         border: none;
@@ -92,7 +96,7 @@
     }
 
     .ff-floating-dropdown {
-      min-width: 120px;
+      width: 100%;
       border: none;
       outline: none;
       margin: 0;
@@ -100,6 +104,9 @@
       &:disabled {
         cursor: not-allowed;
       }
+      &:hover {
+        background-color: var(--dropdown-bg-color);
+      }
     }
 
     .ff-floating-dropdown--left {