pixel-react 1.6.7 → 1.6.8

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>
+    );
   },
 };
 

package/src/components/Search/Search.tsx

@@ -7,22 +7,29 @@ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 import Typography from '../Typography';
 import Tooltip from '../Tooltip';
 
-
 const Search = ({
   placeholder = 'Search',
   onSearch,
   disabled = false,
   width = 150,
+  value = '',
+  isExpand = false,
+  onClose,
+  onExpand,
 }: SearchProps) => {
-  const [isExpanded, setIsExpanded] = useState<boolean>(false);
-  const [searchValue, setSearchValue] = useState<string>('');
+  const [searchValue, setSearchValue] = useState<string>(value);
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    if (isExpanded && inputRef.current) {
+    if (isExpand && inputRef.current) {
       inputRef.current.focus();
     }
-  }, [isExpanded]);
+    setSearchValue('');
+  }, [isExpand]);
+
+  useEffect(() => {
+    setSearchValue(value);
+  }, [value]);
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && !checkEmpty(searchValue)) {
@@ -31,72 +38,67 @@ const Search = ({
       handleSearchClearAndClose('Close');
     }
   };
-  const onChange = (value: string) => {
-    setSearchValue(value);
-    if (value === '') {
-      onSearch('');
-    }
-  };
-  const handleIconClick = () => {
-    setIsExpanded(!disabled);
-  };
+
   const handleSearchClearAndClose = (label: string) => {
     setSearchValue('');
     onSearch('');
     if (label === 'Close') {
-      setIsExpanded(false);
+      onClose?.();
     }
-    if (label === 'Clear' && isExpanded && inputRef.current) {
+    if (label === 'Clear' && isExpand && inputRef.current) {
       inputRef.current.focus();
     }
   };
 
+  const handleIconClick = () => {
+    if (!disabled) {
+      onExpand?.(!isExpand);
+    }
+  };
+
   return (
     <div
       className={classNames('ff-search-container', {
-        expanded: isExpanded,
+        expanded: isExpand,
         disabled: disabled,
       })}
     >
       <div
-        className={classNames('ff-search-icon', { expanded: isExpanded })}
+        className={classNames('ff-search-icon', { expanded: isExpand })}
         onClick={handleIconClick}
       >
         <Tooltip title="Search">
           <Icon
             name="search"
-            height={isExpanded ? 14 : 16}
-            width={isExpanded ? 14 : 16}
+            height={isExpand ? 14 : 16}
+            width={isExpand ? 14 : 16}
           />
         </Tooltip>
       </div>
       <div
         className={classNames('ff-vertical-line', {
-          expanded: isExpanded,
+          expanded: isExpand,
         })}
       ></div>
       <input
         className="ff-search-input"
         name="input"
-        style={{ width: isExpanded ? `${width}px` : '0px' }}
+        style={{ width: isExpand ? `${width}px` : '0px' }}
         placeholder={placeholder}
         type="text"
         value={searchValue}
         disabled={disabled}
         ref={inputRef}
-        onChange={(e) => {
-          onChange(e.target.value);
-        }}
+        autoComplete="off"
+        onChange={(e) => setSearchValue(e.target.value)}
         onKeyDown={handleKeyDown}
       />
 
-      {isExpanded && (
+      {isExpand && (
         <>
           <div
             className="ff-search-clear-button"
-            onClick={() => {
-              handleSearchClearAndClose('Clear');
-            }}
+            onClick={() => handleSearchClearAndClose('Clear')}
           >
             {searchValue !== '' && (
               <Typography
@@ -124,4 +126,5 @@ const Search = ({
     </div>
   );
 };
+
 export default Search;

package/src/components/Search/types.ts

@@ -12,4 +12,8 @@ export interface SearchProps {
    */
   disabled?: boolean;
   width?: number;
+  value: string;
+  isExpand: boolean;
+  onClose: () => void;
+  onExpand: (isExpand: boolean) => void;
 }

package/src/components/Table/Table.scss

@@ -1,5 +1,3 @@
-
-
 .ff-fixed-header-table {
   overflow-y: auto;
 }
@@ -24,8 +22,8 @@
       th {
         border-bottom: 1px solid var(--slider-table-color);
       }
-      th{
-        .ff-label-checkbox-container{
+      th {
+        .ff-label-checkbox-container {
           display: flex;
           align-items: center;
           .ff-table-checkbox {
@@ -64,7 +62,7 @@
           cursor: pointer;
         }
       }
-      td{
+      td {
         .ff-data-checkbox-container {
           display: flex;
           align-items: center;
@@ -81,6 +79,9 @@
   .secondary-bg {
     background-color: var(--slider-table-color);
   }
+  .tertiary-bg {
+    background-color: var(--custom-table-header-bg-color);
+  }
   .default-bg {
     background-color: transparent;
   }

package/src/components/Table/Types.ts

@@ -48,7 +48,7 @@ export interface TableProps {
   /**
    * Header type to have different background color
    */
-  headerType: 'default' | 'primary' | 'secondary';
+  headerType: 'default' | 'primary' | 'secondary' | 'tertiary';
   /**
    * withFixedHeader prop to have non-scrollable fixed table header
    */