pixel-react-excel-sheet 1.0.11 → 1.0.13

package/src/components/Input/Input.tsx

@@ -1,103 +1,120 @@
+import { forwardRef } from 'react';
 import classNames from 'classnames';
 import './Input.scss';
 import { InputProps } from './types';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 
-const Input = ({
-  type = 'text',
-  variant = 'primary',
-  name = '',
-  label,
-  disabled = false,
-  required = false,
-  placeholder = 'Enter input',
-  value = '',
-  helperText = '',
-  error,
-  noBorder,
-  className = '',
-  onChange,
-  onBlur,
-  onFocus,
-  autoComplete = 'off',
-  minValue = -Infinity,
-  maxValue = Infinity,
-  transparentBackground = false,
-  size = 'small',
-  isLabelRequired = true,
-  ...props
-}: InputProps) => {
-  const isValueFilled = !checkEmpty(value);
-  return (
-    <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-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,
-            })}
-          >
-            {label}
-          </span>
-        </label>
-      )}
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      type = 'text',
+      variant = 'primary',
+      name = '',
+      label,
+      disabled = false,
+      required = false,
+      placeholder = 'Enter input',
+      value = '',
+      helperText = '',
+      error,
+      noBorder,
+      className = '',
+      onChange,
+      onBlur,
+      onFocus,
+      autoComplete = 'off',
+      minValue = -Infinity,
+      maxValue = Infinity,
+      transparentBackground = false,
+      size = 'small',
+      isLabelRequired = true,
+      ...props
+    },
+    ref
+  ) => {
+    const isValueFilled = !checkEmpty(value);
 
-      <input
-        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,
+    return (
+      <fieldset
+        className={classNames('ff-input-fieldset', {
+          'ff-input-fieldset--disabled': disabled,
+        })}
+      >
+        <div
+          className={classNames('ff-input-container', {
+            'ff-input-container--float': isValueFilled,
+            'ff-input-container--disabled': !!disabled,
           })}
         >
-          {helperText}
-        </span>
-      )}
-    </div>
-  );
-};
+          {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
+                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
+            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>
+    );
+  }
+);
 
 export default Input;

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 {

package/src/components/InputWithDropdown/types.ts

@@ -19,9 +19,9 @@ export interface InputWithDropdownProps {
   /**
    * value | input field value
    */
-  value?: string | number
+  value?: string | number;
 
-  type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time'
+  type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
 
   /**
    * variants to set color/style of the input field
@@ -109,5 +109,5 @@ export interface InputWithDropdownProps {
    */
   optionsRequired?: boolean;
 
-  dropdownPosition?: 'left' | 'right'
+  dropdownPosition?: 'left' | 'right';
 }

package/src/components/LabelEditTextField/LabelEditTextField.tsx

@@ -34,7 +34,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   variant = 'textField',
   dropdownData = [],
   width,
-  height = '22px',
+  height,
   isOpen = false,
   confirmAction,
   onClick,

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

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import MenuOption from './MenuOption';
 import './MenuOption.scss';
-import React from 'react';
+import React, { ReactNode } from 'react';
+import Icon from '../Icon';
 
 const meta: Meta<typeof MenuOption> = {
   title: 'Components/MenuOption',
@@ -48,7 +49,7 @@ const meta: Meta<typeof MenuOption> = {
 type Story = StoryObj<typeof MenuOption>;
 
 const options = [
-  { label: 'Option 1', value: 'opt1', icon: 'success' },
+  { label: <div style={{display:'flex', justifyContent:"center", alignItems:"center",gap:"8px"}}>hello <Icon name='edit'/></div>, value: 'opt1', icon: 'success' },
   { label: 'Option 2', value: 'opt2', icon: 'success' },
   {
     label: 'Delete',
@@ -58,7 +59,7 @@ const options = [
   },
 ];
 
-const handleOptionClick = (option: { label: string }) => {
+const handleOptionClick = (option: { label: string|ReactNode }) => {
   alert(`Option clicked: ${option.label}`);
 };
 

package/src/components/MenuOption/MenuOption.tsx

@@ -106,7 +106,7 @@ const OptionCard = ({
       ref={optionCardRef}
     >
       {options.map((opt) => (
-        <Option key={opt.label} option={opt} onClick={onClick} />
+        <Option key={opt.value} option={opt} onClick={onClick} />
       ))}
     </div>,
     document.body

package/src/components/MenuOption/types.ts

@@ -1,10 +1,12 @@
+import { ReactNode } from "react";
+
 interface OptionClick {
   /**
    * The label displayed for the option.
    * @type {string}
    * @required
    */
-  label: string;
+  label: string |ReactNode;
 
   /**
    * The value(s) associated with the option, which can be a single string or an array of strings.
@@ -24,7 +26,7 @@ interface OptionType extends OptionClick {
 
   iconColor?: string;
 
-  name?: string;
+  name?: string | ReactNode;
 
   /**
    * Indicates whether the option is disabled.

package/src/components/MiniModal/MiniModal.scss

@@ -35,7 +35,6 @@
     &.popover-arrow-top {
       bottom: 100%;
       left: 30px;
-      border-width: 0 10px 10px 10px;
       padding: 0 3px 0 0;
       border-color: transparent transparent var(--ff-mini-modal-border)
         transparent;
@@ -46,7 +45,6 @@
     }
     &.popover-arrow-left {
       left: -15px; //align the arrow with modal for the right side modal
-      border-width: 10px 10px 10px 0;
       border-color: transparent var(--ff-mini-modal-border) transparent
         transparent;
       filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));
@@ -58,7 +56,6 @@
     &.popover-arrow-bottom {
       top: 100%;
       left: 30px;
-      border-width: 10px 10px 0 10px;
       border-color: var(--ff-mini-modal-border) transparent transparent
         transparent; // Bottom part of the arrow with the correct color
       filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));
@@ -70,7 +67,6 @@
     &.popover-arrow-right {
       right: -10px;
       top: 66px;
-      border-width: 10px 0 10px 10px;
       border-color: transparent transparent transparent
         var(--ff-mini-modal-border);
       filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));

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

@@ -55,7 +55,7 @@ const BasicModalComponent = () => {
             isOverlay: true,
             zIndexOverlay: 99,
           }}
-          modalProperties={{ width: 300, height: 180 }}
+          modalProperties={{ width: 300, height: 180, left: 180, top: 250 }}
           headerProps={
             <>
               <Typography as="p">Modal 1</Typography>
@@ -271,7 +271,8 @@ export const CustomModalWithArrow = () => {
             isOverlay: true,
             zIndexOverlay: 99,
           }}
-          modalProperties={{ width: 300, height: 250 }}
+          modalProperties={{ width: 300, height: 250, left: 180 }}
+          arrowProperties={{ left: 270, size: 6 }}
           arrowZIndex={1000}
           headerProps={
             <>

package/src/components/MiniModal/MiniModal.tsx

@@ -31,6 +31,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       extraLeftSpace,
       isIconModel,
       wrapperProperties,
+      arrowProperties,
       arrowZIndex,
       overlay,
       outSideClick,
@@ -43,7 +44,21 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
     });
     const [isVisible, setIsVisible] = useState(false);
     const modalRef = useRef<HTMLDivElement>(null);
+    const {
+      width: modalWidth,
+      height: modalHeight,
+      borderRadius: modalBorderRadius = 4,
+      zIndex: modalZIndex = 99,
+      boxShadow: modalBoxShadow,
+      left: modalLeft,
+      top: modalTop,
+    } = modalProperties || {};
 
+    const {
+      left: popOverLeft,
+      top: popOverTop,
+      size: popOverSize = 10,
+    } = arrowProperties || {};
     // Function to calculate available space
     const getAvailableSpace = (rect: Rect): AvailableSpace => {
       const { top, left, bottom, right } = rect;
@@ -196,14 +211,6 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       };
     }, [calculatePosition]);
 
-    const {
-      width: modalWidth,
-      height: modalHeight,
-      borderRadius: modalBorderRadius = 4,
-      zIndex: modalZIndex = 99,
-      boxShadow: modalBoxShadow,
-    } = modalProperties || {};
-
     const {
       width: wrapperWidth = 35,
       zIndex: wrapperZIndex = 101,
@@ -234,8 +241,8 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
             animatedModal: isAnimated,
           })}
           style={{
-            top: `${calculatedModalTop}px`,
-            left: `${calculatedModalLeft}px`,
+            top: `${modalTop ?? calculatedModalTop}px`,
+            left: `${modalLeft ?? calculatedModalLeft}px`,
           }}
         >
           {isPopOver && (
@@ -251,6 +258,17 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
               } ${getArrowClassName()}`}
               style={{
                 zIndex: `${arrowZIndex}`,
+                top: `${popOverTop && popOverTop}px`,
+                left: `${popOverLeft && popOverLeft}px`,
+                borderWidth: `${
+                  modalPosition === 'right'
+                    ? `${popOverSize}px ${popOverSize}px ${popOverSize}px 0`
+                    : modalPosition === 'top'
+                    ? `${popOverSize}px ${popOverSize}px 0 ${popOverSize}px`
+                    : modalPosition === 'left'
+                    ? `${popOverSize}px 0 ${popOverSize}px ${popOverSize}px`
+                    : `0 ${popOverSize}px ${popOverSize}px ${popOverSize}px`
+                }`,
               }}
             />
           )}

package/src/components/MiniModal/types.ts

@@ -5,6 +5,8 @@ interface ModalDimensions {
   borderRadius?: number;
   zIndex?: number;
   boxShadow?: string;
+  left?: number;
+  top?: number;
 }
 export interface MiniEditModalProps {
   /**
@@ -94,6 +96,11 @@ export interface MiniEditModalProps {
     boxShadow?: string;
   };
   arrowZIndex?: number;
+  arrowProperties?: {
+    left?: number;
+    top?: number;
+    size?: number;
+  };
   overlay?: {
     isOverlay?: boolean;
     zIndexOverlay?: number;

package/src/components/Modal/Modal.stories.tsx

@@ -1,6 +1,7 @@
+import React, { useState } from 'react';
+
 import type { Meta, StoryObj } from '@storybook/react';
 import Modal from './Modal';
-import { useState } from 'react';
 import Button from '../Button';
 
 const meta: Meta<typeof Modal> = {

package/src/components/ModulesChip/ModuleChip.scss

@@ -2,19 +2,32 @@
 @use '../../assets/styles/mixins';
 
 .ff-Module-chip {
-  width: 75px;
-  height: 32px;
-  border: 0.5px solid;
+  width: 68px;
+  height: 30px;
+  color: var(--table-column-text-color);
+  border: 1px solid var(--ff-editor-line-bg);
   border-radius: 16px;
-  color: var(--brand-color);
   cursor: pointer;
   @include mixins.center-content();
-  .ff-Module-label-chip {
-    &--active {
-      color: var(--ff-header-text-color);
-    }
+  .module-typography {
+    color: var(--table-column-text-color);
   }
   &--active {
+    border: 0.5px solid var(--brand-color);
     background: var(--brand-color);
+    .module-typography {
+      color: var(--base-bg-color);
+      font-weight: 600;
+    }
+  }
+  &--hover {
+    &:hover {
+      border: 0.5px solid var(--brand-color);
+      background-color: var(--hover-color);
+      .module-typography {
+        color: var(--table-column-text-color);
+        font-weight: 600;
+      }
+    }
   }
 }

package/src/components/ModulesChip/ModuleChip.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import ModuleChip from './ModuleChip';
 import { useState } from 'react';
@@ -6,7 +7,7 @@ const meta: Meta<typeof ModuleChip> = {
   title: 'Components/ModuleChip',
   component: ModuleChip,
   parameters: {
-    layout: 'center',
+    layout: 'centered',
   },
   argTypes: {
     isActive: Boolean,
@@ -18,7 +19,6 @@ type Story = StoryObj<typeof ModuleChip>;
 
 const defaultArgs = {
   label: 'Modules',
-  isActive: false,
 };
 
 export const Controlled: Story = {

package/src/components/ModulesChip/ModuleChip.tsx

@@ -12,18 +12,15 @@ const ModuleChip: React.FC<ModuleChipProps> = ({
     <div
       className={classNames('ff-Module-chip', {
         'ff-Module-chip--active': isActive,
+        'ff-Module-chip--hover': !isActive,
       })}
       onClick={onClick}
     >
-      <div
-        className={classNames(`ff-Module-label-chip `, {
-          'ff-Module-label-chip--active': isActive,
-        })}
-      >
-        <Typography fontSize={'14px'} fontWeight="regular" lineHeight="21px">
-          {label}
-        </Typography>
-      </div>
+      <Typography
+        lineHeight="18px"
+        className="module-typography"
+        children={label}
+      />
     </div>
   );
 };

package/src/components/MultiSelect/Dropdown.tsx

@@ -9,7 +9,7 @@ import Typography from '../Typography';
 import Checkbox from '../Checkbox';
 import Tooltip from '../Tooltip';
 import { truncateText } from '../../utils/truncateText/truncateText';
-import { getLabel } from '../../utils/getSelectOptionValue/getSelectOptionValue';
+import { getLabel, getValue } from '../../utils/getSelectOptionValue/getSelectOptionValue';
 
 const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
   (
@@ -20,13 +20,14 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       dropdownPosition = {},
       zIndex,
       withSelectButton,
-      labelAccessor,
+      labelAccessor='label',
+      valueAccessor='value'
     },
     ref
   ) => {
     const filteredOptions = options
       ? options.filter((option) =>
-          getLabel(option, labelAccessor)
+          getValue(option, valueAccessor)
             ?.toLowerCase()
             .includes(searchedKeyword.toLowerCase())
         )
@@ -38,6 +39,12 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       e.stopPropagation();
       handleOptionChange({}, false);
     };
+    const renderOption=(info:any, labelAccessor:string)=>{
+      if(typeof info[labelAccessor] ==='string'){
+        return truncateText(getLabel(info, labelAccessor), 25)
+      }
+      return info[labelAccessor]
+    }
     const topPosition = useMemo(() => {
       let calculatedDropdownHeight = Math.min(
         filteredOptions.length * optionHeight,
@@ -107,14 +114,14 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
                 <Tooltip
                   zIndex={zIndex + 1}
                   title={
-                    getLabel(info, labelAccessor).length > 25
+                   typeof info[labelAccessor]==='string' && getLabel(info, labelAccessor)?.length > 25
                       ? getLabel(info, labelAccessor)
                       : ''
                   }
                   children={
                     <Typography
                       className="dropdown-option-label"
-                      children={truncateText(getLabel(info, labelAccessor), 25)}
+                      children={renderOption(info,labelAccessor)}
                     />
                   }
                 />