pixel-react-excel-sheet 1.0.19 → 1.0.20

package/src/components/InputWithDropdown/InputWithDropdown.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import classNames from 'classnames';
 import './InputWithDropdown.scss';
 import { InputWithDropdownProps } from './types';
@@ -5,44 +6,101 @@ import Select from '../Select/Select';
 import Typography from '../Typography';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 
-const InputWithDropdown = ({
-  name = '',
-  label,
-  value,
-  disabled = false,
-  required = false,
-  placeholder,
-  error,
-  helperText,
-  optionsList,
-  selectedOption,
-  autoComplete = 'off',
-  onDropdownChangeHandler = () => {},
-  onInputChangeHandler,
-  onInputBlurHandler,
-  optionsRequired = true,
-  dropdownPosition = 'right',
-  type = 'text',
-}: InputWithDropdownProps) => {
-  const isValueFilled = !checkEmpty(value) || dropdownPosition === 'left';
+const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
+  (
+    {
+      name = '',
+      label,
+      value,
+      disabled = false,
+      required = false,
+      placeholder,
+      error,
+      helperText,
+      optionsList,
+      selectedOption,
+      autoComplete = 'off',
+      onDropdownChangeHandler = () => {},
+      onInputChangeHandler,
+      onInputBlurHandler,
+      optionsRequired = true,
+      dropdownPosition = 'right',
+      type = 'text',
+    },
+    ref
+  ) => {
+    const isValueFilled = !checkEmpty(value) || dropdownPosition === 'left';
 
-  return (
-    <div
-      className={classNames('ff-input-with-dropdown-container', {
-        'ff-input-with-dropdown-container--filled': isValueFilled,
-      })}
-    >
-      <fieldset
-        className={classNames('ff-input-with-dropdown', {
-          'ff-input-with-dropdown--filled': isValueFilled,
-          'ff-input-with-dropdown--no-hover': isValueFilled,
-          'ff-input-with-dropdown--disabled': !!disabled,
-          'ff-input-with-dropdown--error': !!error,
-          [`ff-input-with-dropdown--${dropdownPosition}`]: dropdownPosition,
+    return (
+      <div
+        className={classNames('ff-input-with-dropdown-container', {
+          'ff-input-with-dropdown-container--filled': isValueFilled,
         })}
       >
-        {dropdownPosition === 'left' && (
-          <>
+        <fieldset
+          className={classNames('ff-input-with-dropdown', {
+            'ff-input-with-dropdown--filled': isValueFilled,
+            'ff-input-with-dropdown--no-hover': isValueFilled,
+            'ff-input-with-dropdown--disabled': !!disabled,
+            'ff-input-with-dropdown--error': !!error,
+            [`ff-input-with-dropdown--${dropdownPosition}`]: dropdownPosition,
+          })}
+        >
+          {dropdownPosition === 'left' && (
+            <>
+              <Select
+                optionsList={optionsList}
+                selectedOption={selectedOption}
+                showLabel={false}
+                showBorder={false}
+                onChange={onDropdownChangeHandler}
+                disabled={disabled || !optionsRequired}
+                optionsRequired={optionsRequired}
+                className={classNames('ff-floating-dropdown', {
+                  'ff-floating-dropdown--disabled': !!disabled,
+                  'ff-floating-dropdown--error': !!error,
+                  'ff-floating-dropdown--left': dropdownPosition === 'left',
+                })}
+                width={94}
+                height={30}
+              />
+              <div className="seperatorline" />
+            </>
+          )}
+          <div className={classNames('ff-floating-label-input-container')}>
+            <Typography
+              as="label"
+              htmlFor={name}
+              className={classNames('ff-floating-label', {
+                'ff-floating-label--filled': isValueFilled,
+                'ff-floating-label--no-hover': isValueFilled,
+                'ff-floating-label--error': !!error,
+              })}
+              required={required}
+            >
+              {label}
+            </Typography>
+            <input
+              ref={ref}
+              name={name}
+              type={type}
+              id={name}
+              value={value}
+              onChange={onInputChangeHandler}
+              onBlur={onInputBlurHandler}
+              placeholder={placeholder}
+              autoComplete={autoComplete}
+              required={required}
+              disabled={disabled}
+              className={classNames('ff-floating-input', {
+                'ff-floating-input--filled': isValueFilled,
+                'ff-floating-input--disabled': !!disabled,
+                'ff-floating-input--error': !!error,
+                'ff-floating-input--left-dropdown': dropdownPosition === 'left',
+              })}
+            />
+          </div>
+          {dropdownPosition === 'right' && (
             <Select
               optionsList={optionsList}
               selectedOption={selectedOption}
@@ -54,69 +112,18 @@ const InputWithDropdown = ({
               className={classNames('ff-floating-dropdown', {
                 'ff-floating-dropdown--disabled': !!disabled,
                 'ff-floating-dropdown--error': !!error,
-                'ff-floating-dropdown--left': dropdownPosition === 'left',
               })}
-              width={94}
+              width={120}
               height={30}
             />
-            <div className="seperatorline" />
-          </>
-        )}
-        <div className={classNames('ff-floating-label-input-container')}>
-          <Typography
-            as="label"
-            htmlFor={name}
-            className={classNames('ff-floating-label', {
-              'ff-floating-label--filled': isValueFilled,
-              'ff-floating-label--no-hover': isValueFilled,
-              'ff-floating-label--error': !!error,
-            })}
-            required={required}
-          >
-            {label}
-          </Typography>
-          <input
-            name={name}
-            type={type}
-            id={name}
-            value={value}
-            onChange={onInputChangeHandler}
-            onBlur={onInputBlurHandler}
-            placeholder={placeholder}
-            autoComplete={autoComplete}
-            required={required}
-            disabled={disabled}
-            className={classNames('ff-floating-input', {
-              'ff-floating-input--filled': isValueFilled,
-              'ff-floating-input--disabled': !!disabled,
-              'ff-floating-input--error': !!error,
-              'ff-floating-input--left-dropdown': dropdownPosition === 'left',
-            })}
-          />
-        </div>
-        {dropdownPosition === 'right' && (
-          <Select
-            optionsList={optionsList}
-            selectedOption={selectedOption}
-            showLabel={false}
-            showBorder={false}
-            onChange={onDropdownChangeHandler}
-            disabled={disabled || !optionsRequired}
-            optionsRequired={optionsRequired}
-            className={classNames('ff-floating-dropdown', {
-              'ff-floating-dropdown--disabled': !!disabled,
-              'ff-floating-dropdown--error': !!error,
-            })}
-            width={120}
-            height={30}
-          />
+          )}
+        </fieldset>
+        {error && helperText && (
+          <span className="ff-helper-text">{helperText}</span>
         )}
-      </fieldset>
-      {error && helperText && (
-        <span className="ff-helper-text">{helperText}</span>
-      )}
-    </div>
-  );
-};
+      </div>
+    );
+  }
+);
 
 export default InputWithDropdown;

package/src/components/Modal/types.ts

@@ -34,7 +34,7 @@ export interface ModalProps {
   /***Content to be displayed inside the modal */
   children: ReactNode;
   isFooterDisplayed: boolean;
-  customWidth: string;
+  customWidth?: string;
   customHeight?: string;
   zIndex?: number;
   boxShadow?: string;

package/src/components/PopUpModal/PopUpModal.stories.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import PopUpModal from './PopUpModal';
 import Button from '../Button';
+import Typography from '../Typography';
 
 const meta: Meta<typeof PopUpModal> = {
   title: 'Components/PopUpModal',
@@ -15,16 +16,17 @@ const meta: Meta<typeof PopUpModal> = {
 type Story = StoryObj<typeof PopUpModal>;
 
 const defaultArgs = {
-  iconName: "license_warning",
-  titleMessage: "Warning!",
-  subTitleMessage: "Unsaved Changes.",
-  modalMessage: "Your web service data will be lost. Are you sure you want to exit?",
-  footerMessage: "How do you want to proceed?",
-  firstButtonLabel: "Cancel",
-  secondButtonLabel: "Continue",
-  buttonVariant: "warning",
-  border: '1px solid var(--warning-modal-border-color)',
-  colorForTitleMessage: 'var(--status-button-bg-warning)'
+    iconName:"license_warning",
+    titleMessage:"Warning!",
+    subTitleMessage:"Unsaved Changes.",
+    modalMessage:"Your web service data will be lost. Are you sure you want to exit?",
+    firstButtonLabel:"Cancel",
+    secondButtonLabel:"Continue",
+    buttonVariant:"warning",
+    border:'1px solid var(--warning-modal-border-color)',
+    colorForTitleMessage: 'var(--status-button-bg-warning)',
+    popupWidth:'420',
+    footerContent:<Typography children='How do you want to proceed?' fontSize={16}/>
 }
 
 export const DefaultModal: Story = {
@@ -35,6 +37,8 @@ export const DefaultModal: Story = {
     iconName: 'license_warning',
     titleMessage: 'Warning!',
     subTitleMessage: 'Unsaved Changes.',
+    popupWidth: "420",
+    footerContent:<Typography children='How do you want to proceed?' fontSize={16}/>,
   },
 };
 
@@ -53,6 +57,7 @@ export const ControlledPopUp: Story = {
           isOpen={isOpen}
           onClose={() => setIsOpen(false)}
           onContinue={handleContinue}
+          footerContent={<Typography children='How do you want to proceed?' fontSize={16}/>}
         />
       </>
     );

package/src/components/PopUpModal/PopUpModal.tsx

@@ -14,12 +14,13 @@ const PopUpModal: FC<PopUpModalProps> = ({
   subTitleMessage = 'Unsaved Changes.',
   iconName,
   modalMessage = 'Your web service data will be lost. Are you sure you want to exit?',
-  footerMessage = 'How do you want to proceed?',
   firstButtonLabel = 'Cancel',
   secondButtonLabel = 'Continue',
   buttonVariant = 'warning',
   border = '1px solid var(--warning-modal-border-color)',
-  colorForTitleMessage = 'var(--status-button-bg-warning)'
+  popupWidth = '420',
+  colorForTitleMessage = 'var(--status-button-bg-warning)',
+  footerContent,
 }) => {
   return (
     <Modal
@@ -55,7 +56,7 @@ const PopUpModal: FC<PopUpModalProps> = ({
               </Typography>
               <div className="warning_modal_message_wrapper">
                 <Typography fontSize={16}>{modalMessage}</Typography>
-                <Typography fontSize={16}>{footerMessage}</Typography>
+                <Typography as='div'>{footerContent}</Typography>
               </div>
             </div>
           </div>
@@ -75,7 +76,7 @@ const PopUpModal: FC<PopUpModalProps> = ({
       }
       ariaHideApp
       isFooterDisplayed={false}
-      customWidth="420px"
+      customWidth={`${popupWidth}px`}
       customHeight="226px"
       boxShadow="0px 1px 4px 0px var(--toaster-boxshadow)"
       border={border}

package/src/components/PopUpModal/types.ts

@@ -6,10 +6,11 @@ export interface PopUpModalProps {
   subTitleMessage?: string;
   iconName: string;
   modalMessage: string;
-  footerMessage: string;
   firstButtonLabel?: string;
   secondButtonLabel: string;
   buttonVariant: any;
   border: string;
+    popupWidth?:string,
   colorForTitleMessage?: string;
+  footerContent?:React.ReactNode;
 }

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

@@ -109,7 +109,6 @@ export const Default: Story = {
     onPagination: (node) => {
       console.log(node);
     },
-    expandedNodes: ['MOD1102'],
     onExpand: (isExpand, node) => {
       console.log(isExpand, node);
     },
@@ -131,12 +130,11 @@ export const ControlledCheckBox: Story = {
     const [selected, setSelected] = useState<string[]>([]);
     return (
       <TableTree
-        expandedNodes={['MOD1102']}
         onExpand={(isExpand, node) => {
           console.log(isExpand, node);
         }}
         select="checkbox"
-        onChange={(nodes: string[]) => {
+        onChange={(e, nodes: string[]) => {
           setSelected(nodes);
         }}
         selected={selected}
@@ -146,7 +144,7 @@ export const ControlledCheckBox: Story = {
           console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
         }}
         onPagination={(direction) => {
-          console.log(direction,'-------------------');
+          console.log(direction, '-------------------');
         }}
       />
     );
@@ -157,7 +155,6 @@ export const ControlledRadio: Story = {
     const [selected, setSelected] = useState<string[]>([]);
     return (
       <TableTree
-        expandedNodes={['MOD1102']}
         onExpand={(isExpand, node) => {
           console.log(isExpand, node);
         }}

package/src/components/TableTree/TableTree.tsx

@@ -1,22 +1,8 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useCallback, memo } from 'react';
 import './TableTree.scss';
-import { prepareData } from '../../utils/TableCell/TableCell';
-import Arrow from '../../assets/icons/arrows_down_icon.svg?react';
-import Checkbox from '../Checkbox';
-import RadioButton from '../RadioButton';
-import {
-  TableBodyProps,
-  TableCellProps,
-  TableHeadProps,
-  TableRowProps,
-  TreeTableProps,
-} from './types';
-
-// Helper to render spaces for levels
-const renderSpaces = (level: number) =>
-  Array.from({ length: level }).map((_, i) => (
-    <span key={i} className="tree-table-space-block" />
-  ));
+import { TreeTableProps } from './types';
+import TableHead from './Components/TableHead';
+import TableBody from './Components/TableBody';
 
 // Recursive function to get all child node IDs (including nested children)
 const getAllChildIds = (nodeId: string, data: any[]): string[] => {
@@ -32,154 +18,6 @@ const getAllChildIds = (nodeId: string, data: any[]): string[] => {
   return result;
 };
 
-// Component: TableCell
-const TableCell = React.memo(
-  ({
-    col,
-    node,
-    level,
-    selected,
-    select,
-    onCheckBoxChange,
-    onToggleExpand,
-  }: TableCellProps) => (
-    <td>
-      {col.isTree && renderSpaces(level + 1)}
-      {col.isTree && (
-        <span
-          className={`tree-table-space-block last-block  ${
-            node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
-          } ${node.folder ? '' : 'no-folder'}`}
-          onClick={() => onToggleExpand(node)}
-        >
-          {node.folder && <Arrow />}
-        </span>
-      )}
-      <span className="tree-table-td-content">
-        {col.isTree && select === 'checkbox' && (
-          <Checkbox
-            checked={selected.includes(node.id)}
-            onChange={() => onCheckBoxChange('checkbox', node)}
-          />
-        )}
-        {col.isTree && select === 'radio' && (
-          <RadioButton
-            name={node.title}
-            checked={selected.includes(node.id)}
-            value={node.id}
-            onChange={() => onCheckBoxChange('radio', node)}
-          />
-        )}
-        {prepareData(node, col)}
-      </span>
-      {col.actions && (
-        <div className="table-tree-row-action">{col.actions(node)}</div>
-      )}
-    </td>
-  )
-);
-
-// Component: TableRow
-const TableRow = React.memo(
-  ({
-    node,
-    level,
-    columnsData,
-    selected,
-    select,
-    onRowClick,
-    onToggleExpand,
-    onCheckBoxChange,
-  }: TableRowProps) => (
-    <tr
-      data-level={level}
-      className="show"
-      onClick={(e) => onRowClick(e, node)}
-    >
-      {columnsData.map((col) => (
-        <TableCell
-          key={col.name}
-          col={col}
-          node={node}
-          level={level}
-          selected={selected}
-          select={select}
-          onCheckBoxChange={onCheckBoxChange}
-          onToggleExpand={onToggleExpand}
-        />
-      ))}
-    </tr>
-  )
-);
-
-// Component: TableHead
-const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
-  const hasDefaultValues = useMemo(
-    () => columnsData.some(({ defaultValue }) => !!defaultValue),
-    [columnsData]
-  );
-
-  return (
-    <thead>
-      <tr>
-        {columnsData.map(({ name }) => (
-          <th key={name}>{name}</th>
-        ))}
-      </tr>
-      {hasDefaultValues && (
-        <tr>
-          {columnsData.map(({ defaultValue, defaultActions }, index) => (
-            <td key={index}>
-              {defaultValue && (
-                <span className="">
-                  {defaultValue}
-                  {defaultActions && (
-                    <div className="table-tree-row-action">
-                      {defaultActions()}
-                    </div>
-                  )}
-                </span>
-              )}
-            </td>
-          ))}
-        </tr>
-      )}
-    </thead>
-  );
-});
-
-// Component: TableBody
-const TableBody = React.memo(
-  ({
-    flattenedTreeData,
-    columnsData,
-    selected,
-    select,
-    onRowClick,
-    onToggleExpand,
-    onCheckBoxChange,
-  }: TableBodyProps) => (
-    <tbody>
-      {flattenedTreeData.map(({ node, level }) => {
-        return (
-          <TableRow
-            key={node.id}
-            node={node}
-            level={level}
-            columnsData={columnsData}
-            selected={selected}
-            select={select}
-            onRowClick={onRowClick}
-            onToggleExpand={onToggleExpand}
-            onCheckBoxChange={onCheckBoxChange}
-          />
-        );
-      })}
-    </tbody>
-  )
-);
-
-// Component: TreeTable
 const TreeTable: React.FC<TreeTableProps> = ({
   treeData,
   columnsData,
@@ -242,4 +80,4 @@ const TreeTable: React.FC<TreeTableProps> = ({
   );
 };
 
-export default TreeTable;
+export default memo(TreeTable);

package/src/components/TableTree/Utils/getAllChildIds.ts

@@ -10,3 +10,5 @@ const getAllChildIds = (nodeId: string, data: any[]): string[] => {
 
   return result;
 };
+
+export default getAllChildIds;

package/src/index.ts

@@ -96,7 +96,7 @@ import Comments from './components/Comment/Comments';
 import useFileDropzone from './hooks/useFileDropzone';
 import PopUpModal from './components/PopUpModal/PopUpModal';
 import FormatString from './utils/FormatString/FormatString';
-import AddVariables from './components/AddVariables/AddVariables';
+import ConditionalDropdown from './components/ConditionalDropdown/ConditionalDropdown';
 import { hasDuplicateFile } from './utils/checkDuplicates/checkDuplicates';
 import PhoneInputField from './components/PhoneInput';
 
@@ -179,9 +179,8 @@ export {
   Comments,
   PopUpModal,
   CreateVariableSlider,
-  AddVariables,
+  ConditionalDropdown,
   PhoneInputField,
-
   TableWithAccordion,
   // utils exports
   checkEmpty,

package/src/components/AddVariables/AddVariables.stories.tsx

@@ -1,44 +0,0 @@
-import React, { useState } from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import AddVariables from './AddVariables';
-import { AddVariableProps } from './types';
-import { variableList } from '../Editor/constants';
-
-export default {
-  title: 'Components/AddVariables',
-  component: AddVariables,
-  args: {
-    label: 'Add Variables',
-    placeholder: 'Enter text',
-    variableList,
-    dropdownWidth: '138px',
-  },
-  parameters: {
-    layout: 'centered',
-  },
-} as Meta<AddVariableProps>;
-
-// Wrapper component to handle state inside Storybook stories
-const Template: StoryFn<AddVariableProps> = (args) => {
-  const [inputValue, setInputValue] = useState<string>('');
-
-  return (
-    <AddVariables
-      {...args}
-      onChange={(value: string) => setInputValue(value)}
-      value={inputValue}
-    />
-  );
-};
-
-export const Default = Template.bind({});
-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'),
-};

package/src/components/AddVariables/index.ts

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

package/src/components/AddVariables/types.ts

@@ -1,36 +0,0 @@
-export type dynamicObject = {
-  [key: string]: any;
-};
-
-export interface AddVariableProps {
-  /**
-   * Label for the field
-   */
-  label?: string;
-  /**
-   * List of variables
-   */
-  variableList?: dynamicObject[];
-  /**
-   * Place holder for the input field
-   */
-  placeholder?: string;
-  /**
-   * Function to handle input change
-   * @param value
-   * @returns
-   */
-  onChange: (value: string) => void;
-  /**
-   * Function to handle create variable icon click
-   */
-  onCreateVariableClick?: () => void;
-  /**
-   * Value of the input field
-   */
-  value: string;
-  /**
-   * Width of the dropdown
-   */
-  dropdownWidth?: string;
-}