pixel-react-excel-sheet 1.0.20 → 1.0.22

package/src/components/Chip/Chip.tsx

@@ -26,7 +26,11 @@ const Chip = ({
           { ['ff-default-chip-style--fullText']: !!fullText }
         )}
       >
-        {labelText && <Typography as="p">{labelText}</Typography>}
+        {labelText && (
+          <Typography as="p" fontSize={10} fontWeight="semi-bold">
+            {labelText}
+          </Typography>
+        )}
       </button>
     </div>
   );

package/src/components/Chip/types.ts

@@ -10,7 +10,7 @@ export interface ChipsProps {
   /**
    * The variant of the Chip.
    */
-  variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom' | 'public' | 'partial-public' | 'private' | 'disabled';
+  variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom' | 'public' | 'partial-public' | 'private' | 'disabled' | 'count';
 
   /**
    * The callback function to be executed when the Chip is clicked.

package/src/components/ConditionalDropdown/ConditionalDropdown.scss

@@ -12,3 +12,7 @@
     gap: 8px;
   }
 }
+.ff-variable-dropdown {
+  padding: 4px;
+  width: auto;
+}

package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx

@@ -20,7 +20,8 @@ export default {
   },
 } as Meta<ConditionalDropdownProps>;
 
-// Wrapper component to handle state inside Storybook stories
+type Story = StoryObj<typeof ConditionalDropdown>;
+
 const Template: StoryFn<ConditionalDropdownProps> = (args) => {
   const [inputValue, setInputValue] = useState<string>('');
   const [openCreateVariable, setOpenCreateVariable] = useState<boolean>(false);
@@ -74,9 +75,73 @@ Default.args = {
   onCreateVariableClick: () => alert('Create Variable clicked'),
 };
 
-// Customized story with pre-filled input value
 export const WithInitialValue = Template.bind({});
 WithInitialValue.args = {
   inputValue: 'Initial Text with $',
   onCreateVariableClick: () => alert('Create Variable clicked'),
 };
+
+export const DropdownOnHash: Story = {
+  render: () => {
+    const [hashInputValue, setHashInputValue] = useState<
+      dynamicObject | undefined
+    >();
+    const testData = [
+      {
+        _id: '1',
+        name: 'File1.txt',
+        actualPath: '/documents/File1.txt',
+        searchKey: 'file1',
+        parentId: 'root',
+      },
+      {
+        _id: '2',
+        name: 'File2.doc',
+        actualPath: '/documents/File2.doc',
+        searchKey: 'file2',
+        parentId: 'root',
+      },
+      {
+        _id: '3',
+        name: 'Image1.png',
+        actualPath: '/images/Image1.png',
+        searchKey: 'image1',
+        parentId: 'folder1',
+      },
+      {
+        _id: '4',
+        name: 'Presentation.ppt',
+        actualPath: '/presentations/Presentation.ppt',
+        searchKey: 'presentation',
+        parentId: 'folder2',
+      },
+      {
+        _id: '5',
+        name: 'Spreadsheet.xlsx',
+        actualPath: '/spreadsheets/Spreadsheet.xlsx',
+        searchKey: 'spreadsheet',
+        parentId: 'folder3',
+      },
+      {
+        _id: '6',
+        name: 'Code.js',
+        actualPath: '/projects/Code.js',
+        searchKey: 'code',
+        parentId: 'folder4',
+      },
+    ];
+
+    return (
+      <>
+        <ConditionalDropdown
+          label="Select Path Using #"
+          placeholder="Enter # to search files"
+          isHash
+          dataFiles={testData}
+          dropdownWidth="auto"
+          setHashInputValue={setHashInputValue}
+        />
+      </>
+    );
+  },
+};

package/src/components/ConditionalDropdown/ConditionalDropdown.tsx

@@ -5,15 +5,20 @@ import Input from '../Input';
 import { ConditionalDropdownProps, dynamicObject } from './types';
 import './ConditionalDropdown.scss';
 import React, { useState, useRef, useEffect } from 'react';
+import OptionsDropdown from './OptionsDropdown';
 
 const ConditionalDropdown: React.FC<ConditionalDropdownProps> = ({
   label = '',
+  hashInputValue = '',
+  setHashInputValue,
   variableList = [],
   placeholder = 'Enter text',
   onChange,
   onCreateVariableClick,
   value = '',
   dropdownWidth = 'inherit',
+  isHash = false,
+  dataFiles = [],
   ...props
 }) => {
   const [inputValue, setInputValue] = useState<string>('');
@@ -21,6 +26,7 @@ const ConditionalDropdown: React.FC<ConditionalDropdownProps> = ({
   const [cursorPosition, setCursorPosition] = useState<number | null>(null);
   const [showCreateVariableIcon, setShowCreateVariableIcon] =
     useState<boolean>(false);
+  const [filteredOptions, setFilteredOptions] = useState<dynamicObject[]>([]);
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -31,37 +37,48 @@ const ConditionalDropdown: React.FC<ConditionalDropdownProps> = ({
   }, [cursorPosition]);
 
   useEffect(() => {
-    const newPayload = replaceVariablesWithIds(inputValue);
-    onChange(newPayload);
+    if (inputValue.startsWith('#') && isHash) {
+      const searchQuery = inputValue.slice(1).toLowerCase();
+      const filtered = dataFiles.filter((file) =>
+        file.name.toLowerCase().includes(searchQuery)
+      );
+
+      setFilteredOptions(filtered);
+      setShowDropdown(filtered.length > 0);
+    } else if (!isHash) {
+      const newPayload = replaceVariablesWithIds(inputValue);
+      onChange?.(newPayload);
+    }
   }, [inputValue]);
 
   const replaceVariablesWithIds = (input: string): string => {
     return input.replace(/\${.*?_(.*?)}/g, (_, variableName) => {
-      // Find the matching variable in the list by name
       const foundVariable = variableList.find(
         (varaible) => varaible.name === variableName.trim()
       );
-      return foundVariable ? `\${${foundVariable.id}}` : `\${${variableName}}`; // Replace if found, otherwise keep as is
+      return foundVariable ? `\${${foundVariable.id}}` : `\${${variableName}}`;
     });
   };
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const fieldValue = event.target.value;
     setInputValue(fieldValue);
-
-    // Show dropdown only if the last character typed is `$`
     const cursorPos = inputRef.current?.selectionStart || 0;
     const isDollarTyped = fieldValue[cursorPos - 1] === '$';
 
-    if (isDollarTyped) {
-      setShowDropdown(true);
+    if (isHash) {
+      setShowDropdown(fieldValue.startsWith('#'));
     } else {
-      setShowDropdown(false); // Close if it's a space or other characters
-    }
-    if (fieldValue?.includes('$')) {
-      setShowCreateVariableIcon(false);
-    } else {
-      setShowCreateVariableIcon(true);
+      if (isDollarTyped) {
+        setShowDropdown(true);
+      } else {
+        setShowDropdown(false);
+      }
+      if (fieldValue?.includes('$')) {
+        setShowCreateVariableIcon(false);
+      } else {
+        setShowCreateVariableIcon(true);
+      }
     }
   };
 
@@ -78,14 +95,18 @@ const ConditionalDropdown: React.FC<ConditionalDropdownProps> = ({
           : 'PEV'
       }_${item.name}}`;
 
-      const newValue =
-        inputValue.slice(0, selectionStart || 0) +
-        dollarSyntax +
-        inputValue.slice(selectionEnd || 0);
+      let newValue;
+      if (isHash && inputValue[0] === '#') {
+        newValue = item.name + inputValue.slice(selectionEnd || 1);
+      } else {
+        newValue =
+          inputValue.slice(0, selectionStart || 0) +
+          dollarSyntax +
+          inputValue.slice(selectionEnd || 0);
+      }
+      setHashInputValue?.(item);
       setInputValue(newValue);
       setCursorPosition((selectionStart || 0) + dollarSyntax.length);
-
-      // Close the dropdown after inserting the variable
       setShowDropdown(false);
     }
   };
@@ -104,7 +125,7 @@ const ConditionalDropdown: React.FC<ConditionalDropdownProps> = ({
           label={label}
           placeholder={placeholder}
         />
-        {!checkEmpty(value) && showCreateVariableIcon && (
+        {!checkEmpty(value) && !isHash && showCreateVariableIcon && (
           <Icon
             onClick={onCreateVariableClick}
             name="add_variable"
@@ -115,13 +136,22 @@ const ConditionalDropdown: React.FC<ConditionalDropdownProps> = ({
         )}
       </div>
       {showDropdown && (
-        <VariableDropdown
-          position="relative"
-          width={dropdownWidth}
-          optionsList={variableList}
-          onSelectVariable={handleDropdownClick}
-        />
-      )}
+    isHash ? (
+      <OptionsDropdown
+        position="relative"
+        width={dropdownWidth}
+        filteredOptions={filteredOptions}
+        onSelectVariable={handleDropdownClick}
+      />
+    ) : (
+      <VariableDropdown
+        position="relative"
+        width={dropdownWidth}
+        optionsList={variableList}
+        onSelectVariable={handleDropdownClick}
+      />
+    )
+  )}
     </div>
   );
 };

package/src/components/ConditionalDropdown/OptionsDropdown.tsx

@@ -0,0 +1,44 @@
+import type { FC, ReactNode } from 'react';
+import { dynamicObject, OptionsDropdownProps } from './types';
+import './ConditionalDropdown.scss';
+import Typography from '../Typography';
+import classNames from 'classnames';
+
+const OptionsDropdown:FC<OptionsDropdownProps> = ({
+    onSelectVariable,
+    dropdownPosition,
+    filteredOptions= [],
+    position = 'relative',
+    width = '300px',
+  }): ReactNode => {
+    return (
+      <div
+        className={classNames('ff-variable-dropdown', position)}
+        style={
+          dropdownPosition
+            ? {
+                top: dropdownPosition.top + 30,
+                left: dropdownPosition.left - 30,
+                width,
+              }
+            : { width }
+        }
+      >
+        {filteredOptions?.map((option: dynamicObject): ReactNode => {
+          return (
+            <div
+              className="ff-variable-option"
+              onClick={() => onSelectVariable(option)}
+              key={option?.id}
+            >
+              <Typography as="span" fontSize={14}>
+                {option?.name}
+              </Typography>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+export default OptionsDropdown;

package/src/components/ConditionalDropdown/types.ts

@@ -1,12 +1,33 @@
+import { dropdownPositionType } from "../Editor/types";
+
 export type dynamicObject = {
   [key: string]: any;
 };
 
+export type TestDataObject = {
+  _id: string;
+  name: string;
+  actualPath: string;
+  searchKey: string;
+  parentId: string;
+}
+
 export interface ConditionalDropdownProps {
   /**
    * Label for the field
    */
   label?: string;
+
+  /**
+   * Value in the input should stored in this state
+   */
+  hashInputValue?: TestDataObject | dynamicObject;
+
+  /**
+   * Function storing and updating the inputValue state
+   */
+  setHashInputValue?:(value: dynamicObject | undefined) => void;
+
   /**
    * List of variables
    */
@@ -20,7 +41,7 @@ export interface ConditionalDropdownProps {
    * @param value
    * @returns
    */
-  onChange: (value: string) => void;
+  onChange?: (value: string) => void;
   /**
    * Function to handle create variable icon click
    */
@@ -32,11 +53,11 @@ export interface ConditionalDropdownProps {
   /**
    * Name | name of the input field
    */
-  name: string;
+  name?: string;
   /**
    * value | input field value
    */
-  value: string;
+  value?: string;
   /**
    * variants to set color/style of the input field
    */
@@ -44,7 +65,7 @@ export interface ConditionalDropdownProps {
   /**
    * type to set color/style of the input field
    */
-  type: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
+  type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
   /**
    * error | If true, error message will be displayed
    */
@@ -100,4 +121,40 @@ export interface ConditionalDropdownProps {
    * isLabelRequired for the input field without label,showing placeholder
    */
   isLabelRequired?: boolean;
+
+   /**
+   * If true, dropdown opens when '#' is entered at the first position.
+   */
+   isHash?: boolean;
+   /**
+    * Options for the dropdown when `isHash` is true.
+    */
+   dataFiles?: dynamicObject[];
 }
+
+export interface OptionsDropdownProps {
+   /**
+   * Position whether absoloute or relative
+   */
+   position: 'absolute' | 'relative';
+
+   /**
+    * Dropdown width
+    */
+   width: string;
+   
+   /**
+    * chars entered to search in Input : 
+    */
+   filteredOptions?: dynamicObject[];
+ 
+   /**
+    * Function to handle click on variable
+    */
+   onSelectVariable: (variable: object) => void;
+ 
+   /**
+    * Dropdown postion used for dropdown placement
+    */
+   dropdownPosition?: dropdownPositionType;
+}

package/src/components/EditTextField/EditTextField.scss

@@ -9,7 +9,7 @@
   .display-text-container {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 5px;
 
     .edit-button {
       padding: 4px 8px;

package/src/components/EditTextField/EditTextField.tsx

@@ -6,6 +6,7 @@ import HighlightText from '../HighlightText';
 import Icon from '../Icon';
 import Tooltip from '../Tooltip';
 import { capitalize } from '../../utils/capitalize/capitalize';
+import Input from '../Input/Input';
 
 const getErrorMessage = (
   inputValue: string,
@@ -38,8 +39,8 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
   cancelIcon,
   editIcon,
   dropdownData = [],
-  width = '300px',
-  height = '22px',
+  // width = '',
+  // height = '',
   isOpen = false,
   confirmAction,
   onClick,
@@ -52,6 +53,7 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
   );
   const [showError, setShowError] = useState('');
   const [isTextFieldModified, setIsTextFieldModified] = useState(false);
+  const isThrowingError = showError && isEditing ? true : false;
   const containerRef = useRef<HTMLDivElement | null>(null);
   const cancelRef = useRef<HTMLDivElement | null>(null);
 
@@ -96,27 +98,19 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
       {isEditing ? (
         <div className="ff-label-text-field">
           <div className="ff-label-text-field-without-dropdown">
-            <input
-              type="text"
+            <Input
+              name="input"
+              label={label ? label : ''}
+              disabled={false}
+              error={isThrowingError}
+              placeholder="Enter your name"
               value={inputValue}
               onChange={handleTextFieldChange}
-              className={`ff-text-field ${
-                showError && isEditing
-                  ? 'ff-text-field-error-border'
-                  : 'ff-text-field-border'
-              } ${isTextFieldModified ? 'modified' : ''}`}
-              placeholder=" "
-              style={{ width, height }}
+              className={`
+                
+               ${isTextFieldModified ? 'modified' : ''}`}
+              type="text"
             />
-            <label
-              className={`ff-textfield-label  ${
-                showError && isEditing
-                  ? 'ff-text-field-error-text'
-                  : 'ff-text-field-text'
-              }`}
-            >
-              {label}
-            </label>
           </div>
           <div className="ff-icon-container">
             {confirmIcon && (

package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx

@@ -113,14 +113,11 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
       tabIndex={0}
     >
       <div      
-      style={{ position: 'fixed' }}
       onClick={handleClick}
       onContextMenu={contextClick}
       tabIndex={0}>
-
       </div>
       {label !== undefined ? label : columnIndexToLabel(column)}
-
       <div
         onMouseDown={onMouseDown}
         onClick={() => activate({ row: -1, column })}

package/src/components/Excel/ExcelFile/ExcelFileComponents/HeaderRow.tsx

@@ -1,5 +1,5 @@
 import * as Types from './types';
 
-const HeaderRow: Types.HeaderRowComponent = (props) => <tr {...props} />;
+const HeaderRow: Types.HeaderRowComponent = (props) => <tr style={{position:'relative'}} {...props} />;
 
 export default HeaderRow;

package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss

@@ -48,6 +48,7 @@
     overflow: scroll;
     top: 0;
     left: 0;
+    margin: 0;
     position: relative;
     &::-webkit-scrollbar {
       height: 0px;

package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx

@@ -99,7 +99,7 @@ export type Props<CellType extends Types.CellBase> = {
   onEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void;
   setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
     /** Set your dynamic sheet Height*/
-    sheetHeight: string;
+  sheetHeight: string;
 };
 
 /**
@@ -352,6 +352,35 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const tableNode = React.useMemo(
     () => (
       <Table columns={size.columns}>
+                <HeaderRow >
+          {<CornerIndicator />}
+          {range(size.columns).map((columnNumber) =>
+            columnLabels ? (
+              <ColumnIndicator
+                key={columnNumber}
+                column={columnNumber}
+                setContextMenu={props.setContextMenu}
+                label={
+                  columnNumber in columnLabels
+                    ? columnLabels[columnNumber]
+                    : null
+                }
+                deleteColumn={deleteColumn}
+                addColumnLeft={addColumnLeft}
+                data={props.data}
+              />
+            ) : (
+              <ColumnIndicator
+                key={columnNumber}
+                column={columnNumber}
+                setContextMenu={props.setContextMenu}
+                deleteColumn={deleteColumn}
+                addColumnLeft={addColumnLeft}
+                data={props.data}
+              />
+            )
+          )}
+        </HeaderRow>
         <HeaderRow>
           {<CornerIndicator />}
           {range(size.columns).map((columnNumber) =>

package/src/components/Form/Forms.tsx

@@ -1,6 +1,5 @@
 import React, { forwardRef, useImperativeHandle } from 'react';
 import Form from './Form';
-
 interface FormProps<T extends Form.FieldValues> extends Form.UseFormProps<T> {
   id?: string;
   onSubmit: Form.SubmitHandler<T>;
@@ -16,7 +15,6 @@ const Forms = <T extends Form.FieldValues>(
   ref: React.Ref<any>
 ) => {
   const methods = Form.useForm<T>(rest);
-
   const { handleSubmit } = methods;
   const extendedMethods = {
     ...methods,

package/src/components/Icon/iconList.ts

@@ -117,6 +117,8 @@ import HideAccessIcon from '../../assets/icons/hide_access_icon.svg?react';
 import AddLocator from '../../assets/icons/add_locator.svg?react';
 import PlusUserIcon from '../../assets/icons/plus_user_icon.svg?react';
 
+import IosIcon from '../../assets/icons/ios_icon.svg?react';
+import HelpIcon from '../../assets/icons/help_icon.svg?react';
 import SwitchLicenseIcon from '../../assets/icons/switch_license_icon.svg?react';
 import FireflinkLogo from '../../assets/icons/fireflink_logo.svg?react';
 import WSWBDeleteIcon from '../../assets/icons/wswb_delete_icon.svg?react';
@@ -142,6 +144,7 @@ import NotificationIcon from '../../assets/icons/notification_icon.svg?react';
 import NLPHelpIcon from '../../assets/icons/nlp_help_icon.svg?react';
 import UpdateIcon from '../../assets/icons/update_icon.svg?react';
 import AddFile from '../../assets/icons/add_file.svg?react';
+import PlusRoundIcon from '../../assets/icons/plus_round_icon.svg?react';
 import EyeClosed from '../../assets/icons/eye_closed.svg?react';
 import AttachmentIcon from '../../assets/icons/attachment_icon.svg?react';
 import AuthorizationIcon from '../../assets/icons/authorization_icon.svg?react';
@@ -192,6 +195,8 @@ import SystemWarning from '../../assets/icons/system_warning.svg?react';
 import UserPasswordLock from '../../assets/icons/user_password_lock.svg?react';
 import UserWarning from '../../assets/icons/user_warning.svg?react';
 import UserWithSystem from '../../assets/icons/user_with_system.svg?react';
+import AiSearch from '../../assets/icons/ai_search.svg?react';
+
 import Import from '../../assets/icons/import.svg?react';
 import dashboardWebIcon from '../../assets/icons/dashboard_web_icon.svg?react';
 import dashboardMobileIcon from '../../assets/icons/dashboard_mobile_icon.svg?react';
@@ -352,6 +357,8 @@ Components['android_icon'] = AndroidIcon;
 Components['plus_user_icon'] = PlusUserIcon;
 Components['label_plus'] = LabelPlusIcon;
 Components['manual_locator'] = ManualLocator;
+Components['ios_icon'] = IosIcon;
+Components['help_icon'] = HelpIcon;
 Components['select_license'] = SwitchLicenseIcon;
 Components['fireflink-logo'] = FireflinkLogo;
 Components['wswb_delete_icon'] = WSWBDeleteIcon;
@@ -383,6 +390,7 @@ Components['notification_icon'] = NotificationIcon;
 Components['nlp_help_icon'] = NLPHelpIcon;
 Components['update_icon'] = UpdateIcon;
 Components['add_file'] = AddFile;
+Components['plus_round_icon'] = PlusRoundIcon;
 Components['clone_icon'] = CloneIcon;
 Components['move_icon'] = MoveIcon;
 Components['jira'] = Jira;
@@ -395,6 +403,7 @@ Components['hide_access_icon'] = HideAccessIcon;
 Components['eye_closed'] = EyeClosed;
 Components['attachment_icon'] = AttachmentIcon;
 Components['authorization_icon'] = AuthorizationIcon;
+Components['ai_search'] = AiSearch;
 
 Components['fireflink_platform_logo'] = FireflinkPlatform;
 Components['fireflink_finder_logo'] = FireflinkFinder;

package/src/components/LabelEditTextField/LabelEditTextField.scss

@@ -7,7 +7,7 @@
   width: 100%;
   .ff-label-text-field {
     display: flex;
-    gap: 10px;
+    gap: 5px;
   }
   .ff-label-text-field-with-dropdown,
   .ff-label-text-field-without-dropdown {