pixel-react 1.4.7 → 1.4.8

package/package.json

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

package/src/assets/Themes/BaseTheme.scss

@@ -249,6 +249,8 @@ $base-theme: (
   icon-hover-color: #f7ecf8,
   ff-search-icon-hover-color: #f7ecf8,
   ff-search-filed-bg-color: #ffffff,
+
+  ff-filter-toggle-button-bg-primary:linear-gradient(90deg, #71347b 0%, #9c1ebb 100%),
 );
 
 :root {

package/src/assets/icons/Header_preset.svg

@@ -0,0 +1,13 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M97.5 22.4999H82.5C79.7422 22.4917 77.5083 20.2579 77.5001 17.5V2.5L97.5 22.4999Z" fill="#4A1353"/>
+<path d="M97.5 22.4999V112.5C97.4918 115.258 95.258 117.492 92.5001 117.5H12.4999C9.74203 117.492 7.5082 115.258 7.5 112.5V7.49992C7.5082 4.74203 9.74203 2.5082 12.4999 2.5H77.4998V17.5C77.5083 20.2579 79.7421 22.4917 82.5 22.4999H97.5Z" fill="white"/>
+<path d="M82.5 100C99.0685 100 112.5 86.5685 112.5 70C112.5 53.4315 99.0685 40 82.5 40C65.9315 40 52.5 53.4315 52.5 70C52.5 86.5685 65.9315 100 82.5 100Z" fill="#FDFAFF"/>
+<path d="M95.0717 58.5713H74.5002C72.6067 58.5713 71.0717 60.1063 71.0717 61.9999V82.5713C71.0717 84.4648 72.6067 85.9999 74.5002 85.9999H95.0717C96.9652 85.9999 98.5002 84.4648 98.5002 82.5713V61.9999C98.5002 60.1063 96.9652 58.5713 95.0717 58.5713Z" fill="#9D34AE"/>
+<path d="M90.5001 54H69.9287C68.0351 54 66.5001 55.535 66.5001 57.4286V78C66.5001 79.8935 68.0351 81.4286 69.9287 81.4286H90.5001C92.3937 81.4286 93.9287 79.8935 93.9287 78V57.4286C93.9287 55.535 92.3937 54 90.5001 54Z" fill="#71347B"/>
+<path d="M87.0717 66.5715H81.3575V60.8572C81.3575 60.5541 81.237 60.2634 81.0227 60.0491C80.8084 59.8348 80.5177 59.7144 80.2146 59.7144C79.9115 59.7144 79.6208 59.8348 79.4065 60.0491C79.1922 60.2634 79.0717 60.5541 79.0717 60.8572V66.5715H73.3575C73.0544 66.5715 72.7637 66.6919 72.5493 66.9062C72.335 67.1206 72.2146 67.4113 72.2146 67.7144C72.2146 68.0175 72.335 68.3082 72.5493 68.5225C72.7637 68.7368 73.0544 68.8572 73.3575 68.8572H79.0717V74.5715C79.0717 74.8746 79.1922 75.1653 79.4065 75.3796C79.6208 75.5939 79.9115 75.7144 80.2146 75.7144C80.5177 75.7144 80.8084 75.5939 81.0227 75.3796C81.237 75.1653 81.3575 74.8746 81.3575 74.5715V68.8572H87.0717C87.3748 68.8572 87.6655 68.7368 87.8799 68.5225C88.0942 68.3082 88.2146 68.0175 88.2146 67.7144C88.2146 67.4113 88.0942 67.1206 87.8799 66.9062C87.6655 66.6919 87.3748 66.5715 87.0717 66.5715Z" fill="#F5F5F5"/>
+<path d="M19.9999 15H45V19.9999H19.9999V15Z" fill="#71347B"/>
+<path d="M19.9999 25H24.9998V29.9999H19.9999V25Z" fill="#71347B"/>
+<path d="M30 25H34.9999V29.9999H30V25Z" fill="#71347B"/>
+<path d="M94.9999 112.5C94.9999 113.881 93.8805 115 92.4998 115H12.4999C11.1192 115 9.9998 113.881 9.9998 112.5V7.5C9.9998 6.1193 11.1192 4.99992 12.4999 4.99992H75V17.4998C75 21.642 78.3578 24.9998 82.5 24.9998H87.4999V19.9999H82.5C81.1192 19.9999 79.9999 18.8805 79.9999 17.4998V8.535L94.9999 23.535V32.5001H99.9998V22.5C99.9996 21.837 99.7361 21.2013 99.2674 20.7326L79.2675 0.732422C78.7987 0.263438 78.1628 0 77.5 0H12.4999C8.35777 0 4.99988 3.35789 4.99988 7.5V112.5C4.99988 116.642 8.35777 120 12.4999 120H92.4998C96.6419 120 99.9998 116.642 99.9998 112.5V107.5H94.9999V112.5Z" fill="#71347B"/>
+<path d="M82.5 37.5C64.5508 37.5 49.9999 52.0507 49.9999 70.0001C49.9999 87.9495 64.5508 102.5 82.5 102.5C100.449 102.5 115 87.9492 115 69.9998C114.979 52.0594 100.441 37.5206 82.5 37.5ZM82.5 97.5C67.3122 97.5 55 85.1878 55 70.0001C55 54.8123 67.3122 42.4999 82.5 42.4999C97.6877 42.4999 110 54.8121 110 69.9998C109.982 85.1803 97.6804 97.4822 82.5 97.5Z" fill="#71347B"/>
+</svg>

package/src/assets/icons/add_file.svg

@@ -1,5 +1,17 @@
-<svg width="16" height="16" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M16.1307 9.4822C16.6597 9.4822 17.0885 9.05336 17.0885 8.52434C17.0885 7.99533 16.6597 7.56648 16.1307 7.56648L9.95786 7.56648L9.95786 1.39368C9.95786 0.864669 9.52901 0.435821 9 0.435821C8.47099 0.435821 8.04214 0.864669 8.04214 1.39368L8.04214 7.56648L1.86934 7.56648C1.34033 7.56648 0.911477 7.99533 0.911477 8.52434C0.911477 9.05336 1.34032 9.4822 1.86934 9.4822L8.04214 9.4822V15.655C8.04214 16.184 8.47099 16.6129 9 16.6129C9.52901 16.6129 9.95786 16.184 9.95786 15.655V9.4822L16.1307 9.4822Z"
-        fill="currentColor" />
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_2947_13105)">
+        <path
+            d="M12 20C11.3995 20 10.9129 19.5134 10.9129 18.9129V5.08707C10.9129 4.48657 11.3995 4 12 4C12.6005 4 13.0871 4.48657 13.0871 5.08707V18.9129C13.0871 19.5134 12.6005 20 12 20Z"
+            fill="currentColor" />
+        <path
+            d="M18.9129 13.0871H5.08707C4.48657 13.0871 4 12.6005 4 12C4 11.3995 4.48657 10.9129 5.08707 10.9129H18.9129C19.5134 10.9129 20 11.3995 20 12C20 12.6005 19.5134 13.0871 18.9129 13.0871Z"
+            fill="currentColor" />
+    </g>
+    <defs>
+        <clipPath id="clip0_2947_13105">
+            <path
+                d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z"
+                fill="white" />
+        </clipPath>
+    </defs>
 </svg>

package/src/assets/icons/eye_open_icon.svg

@@ -1,10 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2947_11191)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8985 12.297C17.5046 14.8002 14.861 16.3552 12.0009 16.3552C9.13896 16.3552 6.49546 14.8002 5.10149 12.297C4.99413 12.1026 4.99413 11.8972 5.10149 11.703C6.49546 9.19978 9.13896 7.64494 12.0009 7.64494C14.861 7.64494 17.5045 9.19978 18.8985 11.703C19.0078 11.8972 19.0078 12.1026 18.8985 12.297ZM19.789 11.2067C18.2154 8.38043 15.2313 6.62494 12.0009 6.62494C8.76871 6.62494 5.78457 8.38043 4.21104 11.2067C3.92965 11.7109 3.92965 12.2891 4.21104 12.7929C5.78457 15.6192 8.76871 17.375 12.0009 17.375C15.2313 17.375 18.2154 15.6192 19.789 12.7929C20.0703 12.2891 20.0703 11.7109 19.789 11.2067ZM12.0009 14.0923C13.1542 14.0923 14.0928 13.1538 14.0928 11.9999C14.0928 10.8461 13.1542 9.9075 12.0009 9.9075C10.8458 9.9075 9.9072 10.8461 9.9072 11.9999C9.9072 13.1538 10.8458 14.0923 12.0009 14.0923ZM12.0009 8.88749C10.283 8.88749 8.8872 10.2839 8.8872 11.9999C8.8872 13.7164 10.283 15.1122 12.0009 15.1122C13.717 15.1122 15.1128 13.7164 15.1128 11.9999C15.1128 10.2839 13.717 8.88749 12.0009 8.88749Z" fill="currentColor"/>
-</g>
-<defs>
-<clipPath id="clip0_2947_11191">
-<path d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z" fill="white"/>
-</clipPath>
-</defs>
+<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8985 6.29701C13.5046 8.80023 10.861 10.3552 8.00093 10.3552C5.13896 10.3552 2.49546 8.80023 1.10149 6.29701C0.994127 6.10264 0.994127 5.89717 1.10149 5.70297C2.49546 3.19978 5.13896 1.64494 8.00093 1.64494C10.861 1.64494 13.5045 3.19978 14.8985 5.70297C15.0078 5.89717 15.0078 6.10264 14.8985 6.29701ZM15.789 5.20666C14.2154 2.38043 11.2313 0.624939 8.00093 0.624939C4.76871 0.624939 1.78457 2.38043 0.211039 5.20666C-0.0703464 5.71093 -0.0703464 6.28905 0.211039 6.79295C1.78457 9.61918 4.76871 11.375 8.00093 11.375C11.2313 11.375 14.2154 9.61918 15.789 6.79295C16.0703 6.28909 16.0703 5.71093 15.789 5.20666ZM8.00093 8.09231C9.15424 8.09231 10.0928 7.15375 10.0928 5.99991C10.0928 4.84606 9.15424 3.9075 8.00093 3.9075C6.84576 3.9075 5.9072 4.84606 5.9072 5.99991C5.9072 7.15375 6.8458 8.09231 8.00093 8.09231ZM8.00093 2.88749C6.28299 2.88749 4.8872 4.28386 4.8872 5.99994C4.8872 7.71639 6.28303 9.11218 8.00093 9.11218C9.71701 9.11218 11.1128 7.71636 11.1128 5.99994C11.1128 4.28386 9.71701 2.88749 8.00093 2.88749Z" fill="currentColor"/>
 </svg>

package/src/assets/icons/replace_icon.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.2278 16C10.027 16 9.84105 15.8884 9.74435 15.7172C9.64765 15.5386 9.64765 15.3302 9.75179 15.1516L10.5328 13.8492C10.689 13.5812 11.0386 13.4994 11.299 13.6557C11.5667 13.8119 11.6486 14.1543 11.4924 14.4222L11.2915 14.7571C13.3445 14.2734 14.8842 12.4277 14.8842 10.2247C14.8842 9.91955 15.1371 9.6665 15.4421 9.6665C15.7471 9.6665 16 9.91955 16 10.2247C15.9925 13.4101 13.404 16 10.2278 16Z" fill="currentColor"/>
+<path d="M0.557875 6.32608C0.252903 6.32608 0 6.07304 0 5.7679C0 2.58997 2.58854 0 5.76471 0C5.96554 0 6.1515 0.111637 6.2482 0.282813C6.3449 0.461432 6.3449 0.669821 6.24076 0.848439L5.45973 2.15087C5.30353 2.41135 4.96137 2.50066 4.69359 2.33693C4.43325 2.18064 4.34399 1.83829 4.50763 1.57036L4.70846 1.23545C2.64805 1.71921 1.11575 3.56493 1.11575 5.7679C1.11575 6.07304 0.862846 6.32608 0.557875 6.32608Z" fill="currentColor"/>
+<path d="M10.079 8.46888V10.657C10.079 12.4804 9.35004 13.2097 7.52765 13.2097H5.34078C3.51839 13.2097 2.78943 12.4804 2.78943 10.657V8.46888C2.78943 6.64548 3.51839 5.91614 5.34078 5.91614H7.52765C9.35004 5.91614 10.079 6.64548 10.079 8.46888Z" fill="currentColor"/>
+<path d="M10.6524 2.79102H8.46551C6.67287 2.79102 5.94395 3.50549 5.92163 5.26191H7.52828C9.71515 5.26191 10.7268 6.28152 10.7268 8.46216V10.0697C12.4896 10.0474 13.1963 9.31804 13.1963 7.52441V5.34378C13.2037 3.52038 12.4748 2.79102 10.6524 2.79102Z" fill="currentColor"/>
+</svg>

package/src/assets/styles/_fonts.scss

@@ -8,7 +8,7 @@
   font-weight: 400;
   src:
     local('Poppins-Regular'),
-    url(../../assets/fonts/Poppins-Regular.ttf) format('truetype');
+    url(../../assets/fonts/Poppins-Regular.woff2) format('woff2');
 }
 
 @font-face {
@@ -16,7 +16,7 @@
   font-weight: 500;
   src:
     local('Poppins-Medium'),
-    url(../../assets/fonts/Poppins-Medium.ttf) format('truetype');
+    url(../../assets/fonts/Poppins-Medium.woff2) format('woff2');
 }
 
 @font-face {
@@ -24,7 +24,7 @@
   font-weight: 600;
   src:
     local('Poppins-SemiBold'),
-    url(../../assets/fonts/Poppins-SemiBold.ttf) format('truetype');
+    url(../../assets/fonts/Poppins-SemiBold.woff2) format('woff2');
 }
 
 @font-face {
@@ -32,7 +32,7 @@
   font-weight: 700;
   src:
     local('Poppins-Bold'),
-    url(../../assets/fonts/Poppins-Bold.ttf) format('truetype');
+    url(../../assets/fonts/Poppins-Bold.woff2) format('woff2');
 }
 
 .fontXs {
@@ -70,3 +70,6 @@
 .font-size-80 {
   @include fontPoppins(80px);
 }
+
+
+//NOTE: Please Don't use these classes use Typography component TODO: Need to remove this file 

package/src/components/AppHeader/AppHeader.tsx

@@ -142,6 +142,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                     options={appHeaderHiddenMenuItems}
                     onOptionClick={onMoreMenuOptionClick}
                     variant="dark"
+                    dropdownPlacement="down"
                   />
                 </div>
               )}

package/src/components/AttachmentButton/AttachmentButton.tsx

@@ -5,6 +5,7 @@ import Toaster from '../Toast';
 import Icon from '../Icon';
 import { AttachmentUploaderProps } from './types';
 import './AttachmentButton.scss';
+import Tooltip from '../Tooltip';
 
 const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
   label,
@@ -81,7 +82,7 @@ const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
         multiple
         accept="*"
       />
-      {fileError && (
+      {/* {fileError && ( */}
         <Toaster
           isOpen={!!fileError}
           variant="info"
@@ -89,24 +90,28 @@ const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
           toastMessage={fileError}
           zIndex={10000000}
         />
-      )}
+      {/* )} */}
       {showSelectedFiles &&
         selectedFiles.map((file, index) => (
           <div key={file.name} className="ff-attachment-files">
             <Typography color="var(--brand-color)">{file.name}</Typography>
+            <Tooltip title="delete">
             <Icon
               name="delete"
+              hoverEffect={true}
               color="var(--ff-delete-button-attachment)"
               onClick={() => handleDeleteFile(index)}
             />
+            </Tooltip>
             {index === selectedFiles.length - 1 &&
               selectedFiles.length < maxFiles && (
+              <Tooltip title="add attachment">
                 <Icon
-                  name="add_file"
-                  height={24}
-                  width={24}
+                name="add_file"
+                hoverEffect={true}
                   onClick={handleAttachmentClick}
                 />
+                </Tooltip>
               )}
           </div>
         ))}

package/src/components/Form/Form.stories.tsx

@@ -95,7 +95,7 @@ export const WithDefaultValues: Story = {
                   <div>
                     <Input
                       type="text"
-                      label='Username'
+                      label="Username"
                       disabled={false}
                       {...register('username', {
                         required: {
@@ -354,10 +354,10 @@ export const WithSubmissionOutside: Story = {
       formRef.current.clearErrors();
     };
 
-    const handleReset = () => { 
+    const handleReset = () => {
       formRef.current.reset();
       formRef.current.clearErrors();
-    }
+    };
 
     const footerContent = (
       <>
@@ -382,11 +382,7 @@ export const WithSubmissionOutside: Story = {
           onClick={() => setIsDrawerOpen(false)}
           label="Cancel"
         />
-        <Button
-          variant="secondary"
-          onClick={handleReset}
-          label="Reset"
-        />
+        <Button variant="secondary" onClick={handleReset} label="Reset" />
         <Button
           variant="secondary"
           onClick={handleCreateAndContinue}

package/src/components/Form/Forms.tsx

@@ -4,7 +4,11 @@ import Form from './Form';
 interface FormProps<T extends Form.FieldValues> extends Form.UseFormProps<T> {
   id?: string;
   onSubmit: Form.SubmitHandler<T>;
-  children: (methods: ReturnType<typeof Form.useForm<T>>) => React.ReactNode;
+  children: (
+    methods: ReturnType<typeof Form.useForm<T>> & {
+      Form: typeof Form;
+    }
+  ) => React.ReactNode;
 }
 
 const Forms = <T extends Form.FieldValues>(
@@ -14,15 +18,18 @@ const Forms = <T extends Form.FieldValues>(
   const methods = Form.useForm<T>(rest);
 
   const { handleSubmit } = methods;
-
+  const extendedMethods = {
+    ...methods,
+    Form,
+  };
   useImperativeHandle(ref, () => ({
     submit: handleSubmit(onSubmit),
-    ...methods,
+    ...extendedMethods,
   }));
 
   return (
     <form id={id} onSubmit={handleSubmit(onSubmit)}>
-      {children(methods)}
+      {children(extendedMethods)}
     </form>
   );
 };

package/src/components/Icon/iconList.ts

@@ -30,6 +30,7 @@ import FireflinkIcon from '../../assets/Icons/fireflink_icon.svg?react';
 import Tick from '../../assets/Icons/tick_icon.svg?react';
 import Search from '../../assets/icons/search.svg?react';
 import Filter from '../../assets/icons/filter.svg?react';
+
 import RightArrow from '../../assets/icons/right_arrow_icon.svg?react';
 import LeftArrow from '../../assets/icons/left_arrow_icon.svg?react';
 import ClockIcon from '../../assets/icons/clock_icon.svg?react';
@@ -204,9 +205,12 @@ import QuickRunSettingIcon from '../../assets/icons/quick_run_setting_icon.svg?r
 import RunManualTestcaseIcon from '../../assets/icons/run_manual_testcase_icon.svg?react';
 import RunAutomationScriptsIcon from '../../assets/icons/run_automation_scripts_icon.svg?react';
 import EyeOpenIcon from '../../assets/icons/eye_open_icon.svg?react';
+import ReplaceIcon from '../../assets/icons/replace_icon.svg?react';
+import HeaderPreset from '../../assets/icons/Header_preset.svg?react';
+
 
-Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
+Components['delete_info'] = DeleteInfoIcon;
 Components['warning'] = WarningIcon;
 Components['toast_info'] = ToastInfoIcon;
 Components['error'] = ToastErrorIcon;
@@ -405,5 +409,7 @@ Components['quick_run_setting'] = QuickRunSettingIcon;
 Components['run_manual_testcase'] = RunManualTestcaseIcon;
 Components['run_automation_scripts'] = RunAutomationScriptsIcon;
 Components['eye_open_icon'] = EyeOpenIcon;
+Components['replace_icon']=ReplaceIcon;
+Components['header_preset'] = HeaderPreset;
 
 export default Components;

package/src/components/Input/Input.scss

@@ -36,6 +36,11 @@
     &--no-border {
       border: none;
     }
+    &--placeholder {
+      &::placeholder {
+        opacity: 1;
+      }
+    }
   }
 
   .ff-input-label-container {

package/src/components/Input/Input.stories.tsx

@@ -51,6 +51,50 @@ export const DisabledWithValue: Story = {
   },
 };
 
+export const WithoutLabel: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    const [error, setError] = useState<boolean>(false);
+    const [helperText, setHelperText] = useState<string>();
+
+    const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
+      const value = event.target.value;
+      if (event.target) {
+        if (value.length <= 0) {
+          setError(true);
+          setHelperText(`${event?.target?.name} is required`);
+        } else if (value.length >= 10) {
+          setError(true);
+          setHelperText(`Name should be within 10 characters`);
+        } else {
+          setError(false);
+          setHelperText('');
+        }
+      }
+      setValue(value);
+    };
+    return (
+      <>
+        <Input
+          {...defaultArgs}
+          type="text"
+          onChange={onChangeHandler}
+          disabled={false}
+          value={value}
+          name="Name"
+          label="Name"
+          placeholder="Enter name here"
+          variant="primary"
+          required={true}
+          error={error}
+          helperText={helperText}
+          isLabelRequired={false}
+        />
+      </>
+    );
+  },
+};
+
 export const Controlled: Story = {
   render: () => {
     const [value, setValue] = useState('');

package/src/components/Input/Input.tsx

@@ -24,6 +24,7 @@ const Input = ({
   maxValue = Infinity,
   transparentBackground = false,
   size = 'small',
+  isLabelRequired = true,
   ...props
 }: InputProps) => {
   const isValueFilled = !checkEmpty(value);
@@ -34,26 +35,29 @@ const Input = ({
         'ff-input-container--disabled': !!disabled,
       })}
     >
-      <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,
-          })}
+      {isLabelRequired && (
+        <label
+          htmlFor={name}
+          className={classNames(
+            `ff-input-label-container ff-input-label-container--${size}`,
+            {
+              'ff-input-label-container--danger': !!error,
+            }
+          )}
         >
-          {label}
-        </span>
-      </label>
+          {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
         name={name}
         value={value}
@@ -68,6 +72,7 @@ const Input = ({
             'ff-input--disabled': !!disabled,
             'ff-input--danger': !!error,
             'ff-input--no-border': !!noBorder,
+            'ff-input--placeholder': !isLabelRequired,
           },
           `${className}`
         )}

package/src/components/Input/types.ts

@@ -78,4 +78,8 @@ export interface InputProps {
    * size for the input field
    */
   size?: 'small' | 'medium';
+  /**
+   * isLabelRequired for the input field without label,showing placeholder
+   */
+  isLabelRequired?: boolean;
 }

package/src/components/MenuOption/MenuOption.tsx

@@ -68,21 +68,21 @@ const OptionCard = ({
       case 'top':
         return {
           top: menuPosition.top - optionsHeight - 7,
-          left: menuPosition.rightSpaceAvailable + 12,
+          left: menuPosition.left - 4,
         };
       case 'down':
         return {
-          top: menuPosition.bottom,
-          left: menuPosition.rightSpaceAvailable + 12,
+          top: menuPosition.top + 18,
+          left: menuPosition.left - 4,
         };
       case 'left':
         return {
-          top: menuPosition.top,
+          top: menuPosition.top - 4,
           left: menuPosition.left - optionsWidth - 7,
         };
       case 'right':
         return {
-          top: menuPosition.top,
+          top: menuPosition.top - 4,
           left: menuPosition.left + 20,
         };
       default:

package/src/components/TableTree/TableTree.scss

@@ -1,15 +1,18 @@
 @use '../../assets/styles/fonts';
+
 .ff-tree-container {
   width: 100%;
   font-size: 12px;
   color: var(--brand-color);
   transition: all 0.3s ease;
   @extend .fontSm;
+
   table {
     border-collapse: collapse;
     width: 100%;
     text-align: left;
   }
+
   .ff-toggle-arrow-icon {
     height: 12px;
     width: 12px;
@@ -40,6 +43,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
   th {
     vertical-align: middle;
     height: 32px;
@@ -53,8 +57,10 @@
     .ff-action-section {
       display: none;
     }
+
     &:hover {
       background-color: var(--hover-color);
+
       .ff-title-action-container {
         display: flex;
       }
@@ -70,6 +76,7 @@
       display: flex;
       cursor: pointer;
     }
+
     &.ff-folder {
       font-weight: 600;
     }
@@ -77,6 +84,7 @@
     &.ff-file {
       font-weight: 400;
     }
+
     .ff-title {
       display: flex;
       gap: 4px;
@@ -96,12 +104,6 @@
         position: absolute;
         right: 10px;
       }
-
-      // &:hover {
-      //   > .ff-title-action-container {
-      //     display: flex;
-      //   }
-      // }
     }
   }
 
@@ -144,12 +146,25 @@
       height: calc(var(--node-height) / 2);
     }
 
-    // Remove the  lines for root level
+    // Remove the lines for root level
     &[style*='--level: 0']::before,
     &[style*='--level: 0']::after {
       content: none;
     }
   }
+
+  th:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 999;
+    background-color: var(--slider-table-color);
+  }
+  td:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 99;
+    background-color: var(--ff-status-card-text-color);
+  }
 }
 
 .ff-title-action-container {

package/src/components/TableTree/TableTree.stories.tsx

@@ -4,6 +4,7 @@ import Button from '../Button';
 import treeData from './data';
 import Icon from '../Icon/Icon';
 import './TableTreeStories.scss';
+import React from 'react';
 
 const meta: Meta<typeof TableTree> = {
   title: 'Components/Table tree',
@@ -19,6 +20,9 @@ type Story = StoryObj<typeof TableTree>;
 
 export const Default: Story = {
   args: {
+    onPagination: (node) => {
+      console.log(node);
+    },
     select: 'radio',
     onChange: (e: any, node: any) => {
       e.preventDefault();
@@ -45,6 +49,43 @@ export const Default: Story = {
         },
       },
 
+      {
+        name: 'Module Path',
+        accessor: 'path',
+        width: '200px',
+        isClickable: true,
+      },
+      
+      {
+        name: 'Module Path',
+        accessor: 'path',
+        width: '200px',
+        isClickable: true,
+      },
+      {
+        name: 'Module Path',
+        accessor: 'path',
+        width: '200px',
+        isClickable: true,
+      },
+      {
+        name: 'Module Path',
+        accessor: 'path',
+        width: '200px',
+        isClickable: true,
+      },
+      {
+        name: 'Module Path',
+        accessor: 'path',
+        width: '200px',
+        isClickable: true,
+      },
+      {
+        name: 'Module Path',
+        accessor: 'path',
+        width: '200px',
+        isClickable: true,
+      },
       {
         name: 'Module Path',
         accessor: 'path',