pixel-react-excel-sheet 1.0.20 → 1.0.22

package/src/components/LabelEditTextField/LabelEditTextField.tsx

@@ -5,6 +5,8 @@ import Typography from '../Typography';
 import HighlightText from '../HighlightText';
 import Icon from '../Icon';
 import Tooltip from '../Tooltip';
+import Input from '../Input/Input';
+import Select from '../Select/Select';
 
 const getErrorMessage = (
   inputValue: string,
@@ -25,6 +27,7 @@ const getErrorMessage = (
 };
 const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   label,
+  placeholder,
   text,
   highlightText,
   customError,
@@ -33,7 +36,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   cancelIcon,
   variant = 'textField',
   dropdownData = [],
-  width,
+  // width,
   height,
   isOpen = false,
   confirmAction,
@@ -47,7 +50,8 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   );
   const [showError, setShowError] = useState('');
   const [isTextFieldModified, setIsTextFieldModified] = useState(false);
-  const [isDropdownModified, setIsDropdownModified] = useState(false);
+  const isThrowingError = showError && isEditing ? true : false;
+
   const containerRef = useRef<HTMLDivElement | null>(null);
   const cancelRef = useRef<HTMLDivElement | null>(null); // New ref for cancel icon
   const [clickTimeout, setClickTimeout] = useState<number | null>(null);
@@ -105,7 +109,6 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
     setIsEditing(false);
     setShowError('');
     setIsTextFieldModified(false);
-    setIsDropdownModified(false);
   };
 
   const handleTextFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -114,12 +117,6 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
     setShowError('');
   };
 
-  const handleDropdownChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setDropdownValue(e.target.value);
-    setIsDropdownModified(true);
-    setShowError('');
-  };
-
   const handleBlur = (e: MouseEvent) => {
     if (
       containerRef.current &&
@@ -155,44 +152,40 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
               }`}
               style={{ height }}
             >
-              <input
+              <Input
+                name="input"
                 type="text"
+                label={label ? label : ''}
+                disabled={false}
+                error={isThrowingError}
+                placeholder={placeholder ? placeholder : ''}
                 value={inputValue}
                 onChange={handleTextFieldChange}
-                className={`ff-text-dropdown-field ${
-                  isTextFieldModified ? 'modified' : ''
-                }`}
-                placeholder=" "
-                style={{
-                  width,
-                }}
+                className={`
+                
+               ${isTextFieldModified ? 'modified' : ''}`}
+              />
+              <Select
+                label={''}
+                optionsList={dropdownData}
+                selectedOption={{ value: dropdownValue, label: dropdownValue }}
+                onChange={(option) => setDropdownValue(option.value)}
               />
-              {label && <label className="ff-label">{label}</label>}
-              <select
-                value={dropdownValue}
-                onChange={handleDropdownChange}
-                className={`dropdown ${isDropdownModified ? 'modified' : ''}`}
-              >
-                {dropdownData.map((item) => (
-                  <option key={item.id} value={item.value}>
-                    {item.label}
-                  </option>
-                ))}
-              </select>
             </div>
           ) : (
             <div className="ff-label-text-field-without-dropdown">
-              <input
+              <Input
+                name="input"
                 type="text"
+                label={label ? label : ''}
+                disabled={false}
+                placeholder={placeholder ? placeholder : ''}
                 value={inputValue}
                 onChange={handleTextFieldChange}
-                className={`ff-text-field ${
-                  isTextFieldModified ? 'modified' : ''
-                }`}
-                placeholder=" "
-                style={{ width, height }}
+                className={`
+               
+               ${isTextFieldModified ? 'modified' : ''}`}
               />
-              <label className="ff-textfield-label">{label}</label>
             </div>
           )}
           <div className="ff-icon-container">

package/src/components/LabelEditTextField/types.ts

@@ -38,6 +38,7 @@ export interface LabelEditTextFieldTypes {
   isOpen?: boolean;
   /**for conditionally handle custom error */
   customErrorCondition?: boolean;
+  placeholder?: string;
   onClick?: () => void;
   tooltip?: {
     tooltipTitle?: string;

package/src/components/MachineInputField/MachineInputField.scss

@@ -26,11 +26,7 @@
 
       .ff-machine-text-reverse,
       .ff-machine-text {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        min-width: 30px;
-        max-width: 70px;
+        max-width: fit-content;
       }
 
       .ff-machine-text-reverse {

package/src/components/MachineInputField/MachineInputField.stories.tsx

@@ -15,15 +15,15 @@ type Story = StoryObj<typeof MachineInputField>;
 
 // Sample data for the MachineInputField
 const sampleOptions: MachineType[] = [
-  { label: 'Local', type: 'Local' },
-  { label: '121.25.36', type: 'Google Chrome' },
-  { label: '17, iPhone 15', type: 'mac' },
+  { label: 'Local Environment', type: 'Local' },
+  { label: '121.25.333.344.2', type: 'Google Chrome' },
+  { label: '17, iPhone 15 pro max', type: 'mac' },
   { label: 'Samsung Galaxy S23', type: 'android' },
 ];
 
 export const Primary: Story = {
   args: {
-    width: '410px', // Example width
+    width: '530px', // Example width
     options: sampleOptions,
     runCount: 1,
   },

package/src/components/MachineInputField/MachineInputField.tsx

@@ -4,6 +4,7 @@ import Typography from '../Typography';
 import Icon from '../Icon';
 import { MachineInputFieldProps, MachineType } from './types';
 import classNames from 'classnames';
+import { truncateText } from '../../utils/truncateText/truncateText';
 
 const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
   (
@@ -14,6 +15,7 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
       className = '',
       contentReverse = false,
       onClick = () => {},
+      modalId = '',
     },
     ref
   ) => {
@@ -36,6 +38,7 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
     return (
       <div
         ref={ref}
+        id={modalId}
         style={{ width: width }}
         className={classNames('ff-machine-input-field-wrapper', className)}
         onClick={onClick}
@@ -72,7 +75,7 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
                 })}
                 color="var(--ff-machine-input-field-text-color)"
               >
-                {label}
+                {truncateText(label, 15)}
               </Typography>
             </div>
           ))}

package/src/components/MachineInputField/types.ts

@@ -10,4 +10,5 @@ export interface MachineInputFieldProps {
   className?: string;
   contentReverse?: boolean;
   onClick?: () => void;
+  modalId?: string;
 }

package/src/components/MenuOption/MenuOption.scss

@@ -45,7 +45,7 @@
 }
 
 .ff-option-card {
-  position: fixed;
+  position: absolute;
   margin: 4px;
   border: 1px solid var(--option-card-border-color);
   background: var(--option-card-bg-color);
@@ -54,7 +54,7 @@
   min-width: 110px;
   width: max-content;
   border-radius: 4px;
-  &--primary{
+  &--primary {
     background: var(--brand-color);
     color: var(--primary-button-text-color);
     svg {
@@ -62,14 +62,14 @@
         fill: var(--primary-icon-color);
       }
     }
-    :hover{
+    :hover {
       color: var(--brand-color);
-    svg {
-      path {
-        fill: var(--brand-color);
+      svg {
+        path {
+          fill: var(--brand-color);
+        }
       }
     }
-    }
   }
   .ff-options {
     @extend .fontSm;

package/src/components/MenuOption/MenuOption.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import MenuOption from './MenuOption';
 import './MenuOption.scss';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useRef } from 'react';
 import Icon from '../Icon';
 
 const meta: Meta<typeof MenuOption> = {
@@ -29,16 +29,16 @@ const meta: Meta<typeof MenuOption> = {
     },
     tooltipPlacement: {
       control: {
-        type: 'text',
-        options: ['top', 'down', 'left', 'right'],  
+        type: 'select',
+        options: ['top', 'down', 'left', 'right'],
       },
       description: 'Placement of the tooltip relative to the button.',
       defaultValue: 'top',
     },
     dropdownPlacement: {
       control: {
-        type: 'text',
-        options: ['top', 'down', 'left', 'right'],  
+        type: 'select',
+        options: ['top', 'down', 'left', 'right'],
       },
       description: 'Placement of the dropdown menu relative to the button.',
       defaultValue: 'down',
@@ -49,7 +49,15 @@ const meta: Meta<typeof MenuOption> = {
 type Story = StoryObj<typeof MenuOption>;
 
 const options = [
-  { label: <div style={{display:'flex', justifyContent:"center", alignItems:"center",gap:"8px"}}>hello <Icon name='edit'/></div>, value: 'opt1', icon: 'success' },
+  {
+    label: (
+      <div>
+        hello <Icon name="edit" />
+      </div>
+    ),
+    value: 'opt1',
+    icon: 'success',
+  },
   { label: 'Option 2', value: 'opt2', icon: 'success' },
   {
     label: 'Delete',
@@ -59,21 +67,31 @@ const options = [
   },
 ];
 
-const handleOptionClick = (option: { label: string|ReactNode }) => {
+const handleOptionClick = (option: { label: string | ReactNode }) => {
   alert(`Option clicked: ${option.label}`);
 };
 
-
 export const ControlledMenuOption: Story = {
   args: {
     iconName: 'more',
     labelName: 'Controlled Menu',
     tooltipTitle: 'Select an option',
-    dropdownPlacement: "top",  
+    dropdownPlacement: 'top',
+  },
+  render: (args) => {
+    const moreRef = useRef<HTMLDivElement>(null);
+    return (
+      <div ref={moreRef}>
+        <MenuOption
+          {...args}
+          options={options}
+          targetRef={moreRef} // Make sure targetRef is passed properly here
+          onOptionClick={handleOptionClick}
+          dropdownPlacement="left" // Dropdown placement for testing
+        />
+      </div>
+    );
   },
-  render: (args) => (
-    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
-  ),
   parameters: {
     docs: {
       description: {
@@ -84,15 +102,24 @@ export const ControlledMenuOption: Story = {
   },
 };
 
-
 export const MenuOptionTop: Story = {
   args: {
     ...ControlledMenuOption.args,
     dropdownPlacement: 'top',
   },
-  render: (args) => (
-    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
-  ),
+  render: (args) => {
+    const moreRef = useRef<HTMLDivElement>(null);
+    return (
+      <div ref={moreRef}>
+        <MenuOption
+          {...args}
+          options={options}
+          targetRef={moreRef}
+          onOptionClick={handleOptionClick}
+        />
+      </div>
+    );
+  },
   parameters: {
     docs: {
       description: {
@@ -102,15 +129,24 @@ export const MenuOptionTop: Story = {
   },
 };
 
-
 export const MenuOptionBottom: Story = {
   args: {
     ...ControlledMenuOption.args,
     dropdownPlacement: 'down',
   },
-  render: (args) => (
-    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
-  ),
+  render: (args) => {
+    const moreRef = useRef<HTMLDivElement>(null);
+    return (
+      <div ref={moreRef}>
+        <MenuOption
+          {...args}
+          options={options}
+          targetRef={moreRef}
+          onOptionClick={handleOptionClick}
+        />
+      </div>
+    );
+  },
   parameters: {
     docs: {
       description: {
@@ -120,15 +156,24 @@ export const MenuOptionBottom: Story = {
   },
 };
 
-
 export const MenuOptionLeft: Story = {
   args: {
     ...ControlledMenuOption.args,
     dropdownPlacement: 'left',
   },
-  render: (args) => (
-    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
-  ),
+  render: (args) => {
+    const moreRef = useRef<HTMLDivElement>(null);
+    return (
+      <div ref={moreRef}>
+        <MenuOption
+          {...args}
+          options={options}
+          targetRef={moreRef}
+          onOptionClick={handleOptionClick}
+        />
+      </div>
+    );
+  },
   parameters: {
     docs: {
       description: {
@@ -141,11 +186,21 @@ export const MenuOptionLeft: Story = {
 export const MenuOptionRight: Story = {
   args: {
     ...ControlledMenuOption.args,
-    dropdownPlacement: 'right',
+    dropdownPlacement: 'right', // Proper dropdown placement
+  },
+  render: (args) => {
+    const moreRef = useRef<HTMLDivElement>(null);
+    return (
+      <div ref={moreRef}>
+        <MenuOption
+          {...args}
+          options={options}
+          targetRef={moreRef} // Properly pass ref to targetRef
+          onOptionClick={handleOptionClick}
+        />
+      </div>
+    );
   },
-  render: (args) => (
-    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
-  ),
   parameters: {
     docs: {
       description: {

package/src/components/MenuOption/MenuOption.tsx

@@ -31,7 +31,7 @@ const Option = ({ option, onClick }: OptionProps) => (
     )}
     <Typography
       as="label"
-      lineHeight='18px'
+      lineHeight="18px"
       color={option.icon === 'delete' ? 'var(--delete-text-color)' : ''}
     >
       {option.label}
@@ -74,13 +74,13 @@ const OptionCard = ({
         };
       case 'down':
         return {
-          top: menuPosition.top + 18,
+          top: menuPosition.top + 20,
           left: menuPosition.left - 4,
         };
       case 'left':
         return {
           top: menuPosition.top - 4,
-          left: menuPosition.left - optionsWidth - 7,
+          left: menuPosition.left - optionsWidth - 8,
         };
       case 'right':
         return {
@@ -127,7 +127,8 @@ const MenuOption = ({
   variant = 'light',
   zIndex = 99,
   dropdownPlacement = 'down',
-  optionCardVariant
+  optionCardVariant,
+  targetRef,
 }: MenuOptionProps) => {
   const [isClicked, setIsClicked] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -136,8 +137,6 @@ const MenuOption = ({
     left: 0,
     height: 0,
     right: 0,
-    rightSpaceAvailable: 0,
-    bottomSpaceAvailable: 0,
   });
 
   const closeDropDown = () => setIsClicked(false);
@@ -154,20 +153,17 @@ const MenuOption = ({
   };
 
   const calculateDims = () => {
-    if (menuRef?.current) {
-      const rect = menuRef.current.getBoundingClientRect();
+    if (targetRef?.current) {
+      const rect = targetRef.current.getBoundingClientRect();
 
       setMenuPosition({
-        top: rect.top,
-        left: rect.left,
+        top: rect.top + window.scrollY,
+        left: rect.left + window.scrollX,
         height: rect.height,
         right: rect.right,
-        rightSpaceAvailable: document.body.clientWidth - rect.right,
-        bottomSpaceAvailable: window.innerHeight - menuRef.current.offsetTop,
       });
     }
   };
-
   return (
     <div className="ff-menu-option-container" ref={menuRef}>
       <Tooltip title={tooltipTitle} placement={tooltipPlacement}>

package/src/components/MenuOption/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
 
 interface OptionClick {
   /**
@@ -6,7 +6,7 @@ interface OptionClick {
    * @type {string}
    * @required
    */
-  label: string |ReactNode;
+  label: string | ReactNode;
 
   /**
    * The value(s) associated with the option, which can be a single string or an array of strings.
@@ -208,6 +208,7 @@ interface MenuOptionProps {
    * @optional
    */
   optionCardVariant?: 'primary';
+  targetRef?: React.RefObject<HTMLElement>;
 }
 
 interface OptionProps {

package/src/components/MiniModal/MiniModal.scss

@@ -117,7 +117,6 @@
     background: var(--ff-mini-modal-border);
     position: relative;
     max-height: fit-content;
-    padding: 4px;
     width: 100%;
     margin: 0 0 0 -5px;
     height: 100%;

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

@@ -55,7 +55,12 @@ const BasicModalComponent = () => {
             isOverlay: true,
             zIndexOverlay: 99,
           }}
-          modalProperties={{ width: 300, height: 180, left: 180, top: 250 }}
+          modalProperties={{
+            width: 300,
+            height: 180,
+            left: 180,
+            top: 250,
+          }}
           headerProps={
             <>
               <Typography as="p">Modal 1</Typography>

package/src/components/MiniModal/MiniModal.tsx

@@ -52,6 +52,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       boxShadow: modalBoxShadow,
       left: modalLeft,
       top: modalTop,
+      padding: modalPadding,
     } = modalProperties || {};
 
     const {
@@ -300,6 +301,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
                 modalBoxShadow ??
                 '0px 4px 8px var(--ff-mini-modal-arrow-shadow)'
               }`,
+              padding: `${modalPadding ?? 4}px`,
             }}
           >
             {headerProps ? (
@@ -312,7 +314,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
                 <hr />
               </Typography>
             )}
-            <div>{childContent}</div>
+            {childContent}
             {footerContent ? (
               <Typography as="footer">{footerContent}</Typography>
             ) : isIconModel ? (

package/src/components/MiniModal/types.ts

@@ -7,6 +7,7 @@ interface ModalDimensions {
   boxShadow?: string;
   left?: number;
   top?: number;
+  padding?: number;
 }
 export interface MiniEditModalProps {
   /**

package/src/components/MultiSelect/Dropdown.scss

@@ -10,11 +10,11 @@
   box-sizing: border-box;
   margin-block: 4px;
   max-height: 160px;
-
   .ff-multiselect-options-wrapper {
     max-height: 128px;
     overflow-y: auto;
     border-radius: 2px;
+    overflow-x: hidden;
     &::-webkit-scrollbar {
       width: 4px;
       height: 40px;
@@ -37,11 +37,10 @@
   }
 
   .no-options {
-    @extend .fontMd;
-    color: var(--pop-up-background-blur);
+    color: var(--ff-select-text-color);
     text-align: center;
     margin: 0;
-    padding: 10px;
+    padding: 7px;
     line-height: 12px;
   }
   .dropdown-option-container {

package/src/components/MultiSelect/Dropdown.tsx

@@ -89,9 +89,10 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
           style={{ maxHeight: withSelectButton ? '128px' : '160px' }}
         >
           {filteredOptions.length === 0 ? (
-            <div className="dropdown-option-container ">
-              <p className="no-options">No Option</p>
-            </div>
+              <Typography textAlign='center' as='p' className='no-options'>
+                No Result Found
+              </Typography>
+           
           ) : (
             filteredOptions.map((info) => (
               <div

package/src/components/MultiSelect/MultiSelect.scss

@@ -203,6 +203,7 @@
       @include hovered-styles(var(--error-light));
     }
     &--disabled {
+      opacity: 0.5;
       pointer-events: none;
 
       border: 1px solid var(--multi-select-border);

package/src/components/MultiSelect/MultiSelect.tsx

@@ -463,6 +463,7 @@ const MultiSelect = ({
                 zIndex={zIndex}
                 withSelectButton={withSelectButton}
                 labelAccessor={labelAccessor}
+                valueAccessor={valueAccessor}
               />,
               document.body
             )}