pixel-react-excel-sheet 1.0.12 → 1.0.14

package/src/components/Input/Input.tsx

@@ -35,78 +35,84 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     const isValueFilled = !checkEmpty(value);
 
     return (
-      <div
-        className={classNames('ff-input-container', {
-          'ff-input-container--float': isValueFilled,
-          'ff-input-container--disabled': !!disabled,
+      <fieldset
+        className={classNames('ff-input-fieldset', {
+          'ff-input-fieldset--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
+        <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 ff-input-label--${variant}`,
+                `ff-input-label-container ff-input-label-container--${size}`,
                 {
-                  'ff-input-label--no-hover': !!value,
-                  'ff-input-label--disabled': !!disabled,
-                  'ff-input-label--danger': !!error,
+                  'ff-input-label-container--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}`
+              {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>
           )}
-          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>
+          <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>
     );
   }
 );

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/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/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)}
                     />
                   }
                 />

package/src/components/MultiSelect/MultiSelect.stories.tsx

@@ -80,11 +80,7 @@ export const NameAccessor: Story = {
   },
 };
 
-export const Default3: Story = {
-  args: {
-    ...defaultArgs,
-  },
-};
+
 export const EmailGroup: Story = {
   render: () => {
     const [options, setOptions] = useState([
@@ -124,6 +120,7 @@ export const EmailGroup: Story = {
         acceptNewOption={true}
         displayCount={true}
         labelAccessor="label"
+        valueAccessor='value'
         onEnter={onEnter}
       />
     );
@@ -234,19 +231,19 @@ export const Machines: Story = {
   render: () => {
     const [options] = useState<Option[]>([
       {
-        label: 'Machine 1',
+        label: <h2>Machine 1</h2>,
         value: 'machine 1',
       },
       {
-        label: 'Machine 2',
+        label: <h2>Machine 2</h2>,
         value: 'machine 2',
       },
       {
-        label: 'Machine 3',
+        label: <h2>Machine 3</h2>,
         value: 'machine 3',
       },
       {
-        label: 'Machine 4',
+        label: <h2>Machine 4</h2>,
         value: 'machine 4',
       },
     ]);
@@ -265,6 +262,8 @@ export const Machines: Story = {
               key={index}
               label="Machines"
               variant="machines"
+              //  labelAccessor='label'
+            // valueAccessor='value'
               options={options}
               onSelectButtonClick={handleSelectChange}
               highlightedMachine={machine.label}
@@ -273,6 +272,8 @@ export const Machines: Story = {
           ))}
           <MultiSelect
             label="Machines"
+             labelAccessor='label'
+            valueAccessor='value'
             withSelectButton
             options={options}
             onSelectButtonClick={handleSelectChange}
@@ -284,4 +285,6 @@ export const Machines: Story = {
   },
 };
 
+
+
 export default meta;

package/src/components/MultiSelect/MultiSelect.tsx

@@ -38,7 +38,8 @@ const ChipElement = ({
             zIndex={zIndex + 1}
           >
             <Typography fontSize={10} lineHeight={'14px'} className="stye">
-              {truncateText(label, 25)}
+
+              {typeof label==='string'? truncateText(label, 25):label}
             </Typography>
           </Tooltip>
         </span>
@@ -73,9 +74,9 @@ const MultiSelect = ({
   onManageLabelsClick = () => { },
   className = '',
   highlightedMachine = '',
-  onSelectButtonClick = () => { },
-  labelAccessor = '',
-  valueAccessor = labelAccessor,
+  onSelectButtonClick = () => {},
+  labelAccessor = 'label',
+  valueAccessor = 'value',
   withSelectButton = variant === 'machines' ? true : false,
   onEnter = () => { },
 }: MultiSelectProps) => {
@@ -203,7 +204,7 @@ const MultiSelect = ({
     if (input.length > 2) {
       const matchedOption = allOptions.find(
         (option) =>
-          getLabel(option, labelAccessor)?.toLowerCase() === input.toLowerCase()
+          getLabel(option, valueAccessor)?.toLowerCase() === input.toLowerCase()
       );
       setDisplayIcon(!matchedOption);
     } else {
@@ -256,10 +257,10 @@ const MultiSelect = ({
     };
   }, [isOpen]);
   useEffect(() => {
-    if (!checkEmpty(options?.length)) {
-      let initializeOptions = options;
-      if (!checkEmpty(selectedOptions?.length)) {
-        initializeOptions = options.map((option) => ({
+    if (!checkEmpty(options)) {
+      let initializeOptions=options;
+      if(!checkEmpty(selectedOptions)){
+         initializeOptions = options.map((option) => ({
           ...option,
           isChecked: selectedOptions.some(
             (selectedOption) =>

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

@@ -24,7 +24,7 @@ const defaultArgs = {
   secondButtonLabel: "Continue",
   buttonVariant: "warning",
   border: '1px solid var(--warning-modal-border-color)',
-  colorForTitleMessage: 'var(--select-license-header-text-color)'
+  colorForTitleMessage: 'var(--status-button-bg-warning)'
 }
 
 export const DefaultModal: Story = {

package/src/components/Search/Search.stories.tsx

@@ -1,6 +1,6 @@
-
 import type { Meta, StoryObj } from '@storybook/react';
 import Search from './Search';
+import React,{ useState } from 'react';
 const meta: Meta<typeof Search> = {
   title: 'Components/Search',
   component: Search,
@@ -11,15 +11,34 @@ const meta: Meta<typeof Search> = {
 };
 
 type Story = StoryObj<typeof Search>;
-const defaultArgs = {
-  placeholder: 'Search',
-  onSearch: (query: string) => alert(`Searching for: ${query}`),
-  disabled: false,
-  width: 200,
-};
 export const Default: Story = {
-  args: {
-    ...defaultArgs,
+  render: () => {
+    const [isExpand, setIsExpand] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+
+    const handleSearch = (value: string) => {
+      alert(`Searching for: ${value}`);
+      setSearchValue(value);
+    };
+
+    const handleClose = () => {
+      setIsExpand(false);
+      setSearchValue('');
+    };
+    return (
+      <div>
+        <Search
+          placeholder="Search here..."
+          isExpand={isExpand}
+          value={searchValue}
+          onSearch={handleSearch}
+          onExpand={(expand) => setIsExpand(expand)}
+          onClose={handleClose}
+          disabled={false}
+          width={200}
+        />
+      </div>
+    );
   },
 };