pixel-react 1.4.2 → 1.4.4

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

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import MultiSelect from './MultiSelect';
 import { useEffect, useState } from 'react';
 import { Option } from './MultiSelectTypes';
+import React from 'react';
 
 const meta: Meta<typeof MultiSelect> = {
   title: 'Components/MultiSelect',
@@ -31,21 +32,54 @@ export const Default: Story = {
       { label: 'Cherry', value: 'cherry' },
       { label: 'Date', value: 'date' },
       { label: 'Grape', value: 'grape' },
-      // { label: 'Kiwi', value: 'kiwi' },
-      // { label: 'Mango', value: 'mango' },
-      // { label: 'Orange', value: 'orange' },
-      // { label: 'Peach', value: 'peach' },
-      // { label: 'Strawberry', value: 'strawberry' },
+      { label: 'Kiwi', value: 'kiwi' },
+      { label: 'Mango', value: 'mango' },
+      { label: 'Orange', value: 'orange' },
+      { label: 'Peach', value: 'peach' },
+      { label: 'Strawberry', value: 'strawberry' },
     ],
-    // selectedOptions: [{ label: 'Apple', value: 'apple' }],
   },
 };
 
-export const Default2: Story = {
-  args: {
-    ...defaultArgs,
+export const NameAccessor: Story = {
+  render: () => {
+    const [options, setOptions] = useState<Option[]>([]);
+    const [selectedOptions, setSelectedOptions] = useState<Option[]>([
+      { name: 'Apple', fruit: 'apple' },
+    ]);
+    const onChange = (options: Option[]) => {
+      setSelectedOptions(options);
+    };
+    useEffect(() => {
+      setOptions([
+        { name: 'Apple', fruit: 'apple' },
+        { name: 'Banana', fruit: 'banana' },
+        {
+          name: 'CherryCherryCherryCherryCherryCherryCherryCherryCherryCherry',
+          fruit: 'cherry',
+        },
+        { name: 'Date', fruit: 'date' },
+        { name: 'Kiwi', fruit: 'kiwi' },
+        { name: 'Mango', fruit: 'mango' },
+        { name: 'Orange', fruit: 'orange' },
+        { name: 'Peach', fruit: 'peach' },
+        { name: 'Strawberry', fruit: 'strawberry' },
+      ]);
+    }, []);
+    return (
+      <MultiSelect
+        labelAccessor="name"
+        label={'Fruits'}
+        required
+        options={options}
+        selectedOptions={selectedOptions}
+        onChange={onChange}
+        valueAccessor="fruit"
+      />
+    );
   },
 };
+
 export const Default3: Story = {
   args: {
     ...defaultArgs,
@@ -85,6 +119,7 @@ export const EmailGroup: Story = {
         onChange={onChange}
         acceptNewOption={true}
         displayCount={true}
+        labelAccessor="label"
       />
     );
   },
@@ -158,6 +193,7 @@ export const Labels: Story = {
     return (
       <div style={{ width: '250px' }}>
         <MultiSelect
+          required
           label={'Labels'}
           variant="labels"
           options={options}
@@ -199,7 +235,6 @@ export const Machines: Story = {
     const [selectedOptions, setSelectedOptions] = useState<Option[]>([]);
 
     const handleSelectChange = (machines: Option[]) => {
-      console.log('Updated machines:', machines);
       setSelectedOptions(machines);
     };
 

package/src/components/MultiSelect/MultiSelect.tsx

@@ -9,6 +9,10 @@ import Typography from '../Typography';
 import Tooltip from '../Tooltip';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 import { truncateText } from '../../utils/truncateText/truncateText';
+import {
+  getLabel,
+  getValue,
+} from '../../utils/getSelectOptionValue/getSelectOptionValue';
 
 const ChipElement = ({
   label,
@@ -69,6 +73,8 @@ const MultiSelect = ({
   className = '',
   highlightedMachine = '',
   onSelectButtonClick = () => {},
+  labelAccessor = '',
+  valueAccessor = '',
   withSelectButton = variant === 'machines' ? true : false,
 }: MultiSelectProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -122,7 +128,10 @@ const MultiSelect = ({
   const handleOptionChange = (selectedOption: Option, isChecked: boolean) => {
     inputRef.current?.focus();
     const updatedOptions = allOptions.map((option) =>
-      option.value === selectedOption?.value ? { ...option, isChecked } : option
+      getValue(option, valueAccessor) ===
+      getValue(selectedOption, valueAccessor)
+        ? { ...option, isChecked }
+        : option
     );
 
     setAllOptions(updatedOptions);
@@ -159,8 +168,8 @@ const MultiSelect = ({
       }
 
       const newOption = {
-        label: searchedKeyword,
-        value: searchedKeyword.toLowerCase(),
+        [labelAccessor]: searchedKeyword,
+        [valueAccessor]: searchedKeyword.toLowerCase(),
         isChecked: true,
       };
       const filteredOptions = [...allOptions].filter(
@@ -171,7 +180,10 @@ const MultiSelect = ({
       setSearchedKeyword('');
       onChange?.([
         ...filteredOptions,
-        { label: searchedKeyword, value: searchedKeyword.toLocaleLowerCase() },
+        {
+          [labelAccessor]: searchedKeyword,
+          [valueAccessor]: searchedKeyword.toLocaleLowerCase(),
+        },
       ]);
       setIsOpen(false);
     }
@@ -203,7 +215,8 @@ const MultiSelect = ({
     onSearch?.(input);
     if (input.length > 2) {
       const matchedOption = allOptions.find(
-        (option) => option.label?.toLowerCase() === input.toLowerCase()
+        (option) =>
+          getLabel(option, labelAccessor)?.toLowerCase() === input.toLowerCase()
       );
       setDisplayIcon(!matchedOption);
     } else {
@@ -249,13 +262,14 @@ const MultiSelect = ({
       onSelectToggleScroll(true);
     };
   }, [isOpen]);
-
   useEffect(() => {
-    if (options?.length > 0) {
+    if (options?.length > 0 && selectedOptions?.length) {
       const initializeOptions = options.map((option) => ({
         ...option,
         isChecked: selectedOptions.some(
-          (selectedOption) => selectedOption.value === option.value
+          (selectedOption) =>
+            getValue(selectedOption, valueAccessor) ===
+            getValue(option, valueAccessor)
         ),
       }));
       setAllOptions(initializeOptions);
@@ -339,6 +353,7 @@ const MultiSelect = ({
                 />
               </div>
             )}
+
             {!withSelectButton && (
               <div>
                 <div className="ff-multiselect-chip-container">
@@ -349,8 +364,8 @@ const MultiSelect = ({
                         .map((option) => (
                           <ChipElement
                             zIndex={zIndex}
-                            key={option?.label}
-                            label={option?.label || ''}
+                            key={getLabel(option, labelAccessor)}
+                            label={getLabel(option, labelAccessor) || ''}
                             onChipCloseClick={(e) =>
                               handleChipCloseClick(option, e)
                             }
@@ -362,8 +377,8 @@ const MultiSelect = ({
                     selectedOptions.map((option) => (
                       <ChipElement
                         zIndex={zIndex}
-                        key={option?.label}
-                        label={option?.label || ''}
+                        key={getLabel(option, labelAccessor)}
+                        label={getLabel(option, labelAccessor) || ''}
                         onChipCloseClick={(e) =>
                           handleChipCloseClick(option, e)
                         }
@@ -426,7 +441,7 @@ const MultiSelect = ({
             <Typography
               children={inputError || errorMessage}
               fontSize={10}
-              className="error=text"
+              className="error-text"
             />
           )}
           {displayIcon && (
@@ -449,6 +464,7 @@ const MultiSelect = ({
                 dropdownPosition={dropdownPosition}
                 zIndex={zIndex}
                 withSelectButton={withSelectButton}
+                labelAccessor={labelAccessor}
               />,
               document.body
             )}

package/src/components/MultiSelect/MultiSelectTypes.ts

@@ -1,11 +1,9 @@
 import { ReactElement } from 'react';
 
+type OptionValue = any;
+
 interface Option {
-  label?: string;
-  value?: string;
-  accessor?: string;
-  isChecked?: boolean;
-  isDisabled?: boolean;
+  [key: string]: OptionValue;
 }
 interface MultiSelectProps {
   options: Option[];
@@ -38,6 +36,10 @@ interface MultiSelectProps {
 
   /** Machine Name to be displayed */
   highlightedMachine?: string | ReactElement;
+
+  labelAccessor?: string;
+
+  valueAccessor?: string;
 }
 
 export { Option, MultiSelectProps };

package/src/components/MultiSelect/dropdownTypes.ts

@@ -14,4 +14,6 @@ export interface DropdownProps {
   zIndex: number;
   withSelectButton?: boolean;
   onSelect?: () => void;
+  labelAccessor?: string;
+  valueAccessor?: string;
 }

package/src/components/RadioButton/RadioButton.scss

@@ -98,7 +98,9 @@
     }
     &--disabled {
       cursor: default;
-      opacity: 0.5;
+      .ff-radio-custom {
+        opacity: 0.5;
+      }
     }
   }
 }

package/src/components/RadioButton/RadioButton.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import './RadioButton.scss';
 import classNames from 'classnames';
 import Tooltip from '../Tooltip';
+import Typography from '../Typography';
+import RadioButtonProps from './radioButtonTypes';
 
 const RadioButton: React.FC<RadioButtonProps> = ({
   label,
@@ -29,7 +31,7 @@ const RadioButton: React.FC<RadioButtonProps> = ({
           className="ff-radio-input"
         />
         <span className="ff-radio-custom" />
-        {label}
+        <Typography color="var(--text-color)" children={label} />
       </label>
       {showTooltip && <Tooltip title={tooltipTitle}>{tooltipChildren}</Tooltip>}
     </div>

package/src/components/RadioButton/radioButtonTypes.tsx

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 /**
  * Props for the RadioButton component.
  */
@@ -6,7 +8,7 @@ interface RadioButtonProps {
    * The display label for the radio button.
    * Optional.
    */
-  label?: string;
+  label?: string | ReactElement;
 
   /**
    * The name attribute for the radio button, used for grouping.
@@ -56,3 +58,5 @@ interface RadioButtonProps {
    */
   tooltipTitle?: React.ReactNode;
 }
+
+export default RadioButtonProps;

package/src/components/Search/Search.scss

@@ -4,14 +4,18 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+
   .ff-search-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    border: 1px solid var(--border-color);
     border-radius: 4px;
-    padding: 4px;
+
+    &:hover {
+      background-color: var(--ff-search-field-hover-color);
+    }
+
     .ff-icon-container {
       svg {
         path {
@@ -20,6 +24,7 @@
       }
     }
   }
+
   .ff-search-input {
     @extend .fontXs;
     border: none;
@@ -27,6 +32,7 @@
     line-height: 12px;
     visibility: hidden;
     transition: width 0.4s ease;
+
     &:focus {
       outline: none;
       border: none;
@@ -36,39 +42,52 @@
       border: none;
     }
   }
+
   &.disabled {
     opacity: 0.5;
   }
+
   &.expanded {
     border: 1px solid var(--border-color);
     border-radius: 4px;
+    background-color: var(--ff-search-filed-bg-color);
+
+    .ff-search-icon {
+      &:hover {
+        background-color: var(--ff-search-filed-bg-color);
+      }
+    }
+
     .ff-vertical-line {
       height: 8px;
       width: 1px;
-      position: relative;
-      right: 2px;
       border-radius: 1px;
-      margin: 8px 0px;
       background-color: var(--border-color);
     }
+
     .ff-search-input {
       visibility: visible;
+      margin-left: 4px;
 
       &::placeholder {
         color: var(--ff-search-filed-placeholder-text);
       }
     }
+
     .ff-search-icon {
-      padding: 4px;
       border: none;
       cursor: default;
+      margin-right: 4px;
     }
+
     .ff-search-clear-button {
       display: grid;
       place-items: center;
       cursor: pointer;
       width: 22px;
+      padding-top: 1px;
     }
+
     .ff-search-close-icon {
       margin: 4px;
       cursor: pointer;

package/src/components/Search/Search.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import './Search.scss';
 import Icon from '../Icon';
@@ -7,6 +7,7 @@ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 import Typography from '../Typography';
 import Tooltip from '../Tooltip';
 
+
 const Search = ({
   placeholder = 'Search',
   onSearch,
@@ -14,10 +15,18 @@ const Search = ({
   width = 150,
 }: SearchProps) => {
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
-  const [searchvalue, setSearchValue] = useState<string>('');
+  const [searchValue, setSearchValue] = useState<string>('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isExpanded && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isExpanded]);
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter' && !checkEmpty(searchvalue)) {
-      onSearch(searchvalue.trim());
+    if (event.key === 'Enter' && !checkEmpty(searchValue)) {
+      onSearch(searchValue.trim());
     } else if (event?.key === 'Escape') {
       handleSearchClearAndClose('Close');
     }
@@ -37,6 +46,9 @@ const Search = ({
     if (label === 'Close') {
       setIsExpanded(false);
     }
+    if (label === 'Clear' && isExpanded && inputRef.current) {
+      inputRef.current.focus();
+    }
   };
 
   return (
@@ -46,11 +58,18 @@ const Search = ({
         disabled: disabled,
       })}
     >
-      <Tooltip placement="top" title="Search">
-        <div className="ff-search-icon" onClick={handleIconClick}>
-          <Icon name="search" height={14} width={14} />
-        </div>
-      </Tooltip>
+      <div
+        className={classNames('ff-search-icon', { expanded: isExpanded })}
+        onClick={handleIconClick}
+      >
+        <Tooltip title="Search">
+          <Icon
+            name="search"
+            height={isExpanded ? 14 : 16}
+            width={isExpanded ? 14 : 16}
+          />
+        </Tooltip>
+      </div>
       <div
         className={classNames('ff-vertical-line', {
           expanded: isExpanded,
@@ -62,9 +81,9 @@ const Search = ({
         style={{ width: isExpanded ? `${width}px` : '0px' }}
         placeholder={placeholder}
         type="text"
-        value={searchvalue}
+        value={searchValue}
         disabled={disabled}
-        autoComplete="off"
+        ref={inputRef}
         onChange={(e) => {
           onChange(e.target.value);
         }}
@@ -79,25 +98,27 @@ const Search = ({
               handleSearchClearAndClose('Clear');
             }}
           >
-            {searchvalue !== '' && (
+            {searchValue !== '' && (
               <Typography
-                children={'clear'}
+                children={'Clear'}
                 fontSize={8}
                 color={'var(--ff-search-filed-clear-text)'}
               />
             )}
           </div>
-          <div className="ff-search-close-icon">
-            <Icon
-              height={6}
-              width={6}
-              name="close"
-              hoverEffect={true}
-              onClick={() => {
-                handleSearchClearAndClose('Close');
-              }}
-            />
-          </div>
+          <Tooltip title="Close">
+            <div className="ff-search-close-icon">
+              <Icon
+                height={6}
+                width={6}
+                name="close"
+                hoverEffect={true}
+                onClick={() => {
+                  handleSearchClearAndClose('Close');
+                }}
+              />
+            </div>
+          </Tooltip>
         </>
       )}
     </div>

package/src/components/Select/Select.scss

@@ -38,16 +38,16 @@
     box-sizing: border-box;
 
     &:hover {
-      @include select-state-style(var(--ff-select-text-hover-color));
+      @include select-state-style(var(--ff-select-brand-color));
     }
 
-    .ff-select-inputfield {
+    .ff-select-inputField {
       @extend .fontSm;
       width: calc(100% - 8px);
-      padding: 0px 0px 0px 8px;
+      height: 100%;
+      padding: 0 0 0 8px;
       border: none;
       outline: none;
-      line-height: 30px;
       letter-spacing: 0.5px;
       z-index: 10;
       background: transparent;
@@ -61,8 +61,7 @@
     .ff-select-arrows-wrapper {
       cursor: pointer;
       height: 100%;
-      padding: 0px;
-      padding-right: 8px;
+      padding: 0 8px 0 0;
       display: flex;
       align-items: center;
 
@@ -87,28 +86,28 @@
       border-radius: 4px;
 
       &__active {
-        @extend .font-size-8;
-        transform: translateY(-15px);
+        transform: translateY(-16px);
         transition: 0.18s ease all;
         background-color: var(--ff-select-background-color);
-        padding: 0px 4px;
+        padding: 0 2px;
         z-index: 100000;
       }
     }
 
     &__focus {
       border-color: var(--ff-select-brand-color);
+
       &:hover {
         @include select-state-style(var(--ff-select-brand-color));
       }
 
       .ff-select-labels {
         @extend .font-size-8;
-        transform: translateY(-15px);
+        transform: translateY(-16px);
         transition: 0.18s ease all;
         color: var(--ff-select-brand-color);
         background-color: var(--ff-select-background-color);
-        padding: 0px 4px;
+        padding: 0 2px;
         line-height: 18px;
         z-index: 100000;
       }
@@ -124,6 +123,7 @@
 
     &__disabled {
       cursor: not-allowed;
+
       &:hover {
         @include select-state-style(var(--ff-select-border-color));
       }
@@ -162,7 +162,7 @@
         transition: 0.3s ease all;
         color: var(--error_light);
         background-color: var(--ff-select-background-color);
-        padding: 0px 4px;
+        padding: 0 2px;
         line-height: 18px;
       }
     }

package/src/components/Select/Select.stories.tsx

@@ -25,11 +25,13 @@ export const Primary: Story = {
         label: 'fire-flink-LIC4900-onPrem',
         value: 'fire-flink-LIC4900-onPrem',
         name: 'fireflink',
+        disable: true,
       },
       {
         label: 'fire-flink-LIC3179',
         value: 'fire-flink-LIC3179',
         name: 'local',
+        disable: false,
       },
       {
         label: 'fire-flink-LIC4937',

package/src/components/Select/Select.tsx

@@ -29,12 +29,12 @@ const Select: FC<SelectProps> = ({
   height = 32,
   width = '100%',
   onBlur = () => {},
-  disableInput = false
+  disableInput = false,
 }) => {
   const selectWidth = typeof width === 'number' ? `${width}px` : width;
 
   const [showDropdownOptions, setShowDropdownOptions] = useState(false);
-  const [searchedOption, setSearchedOption] = useState('');
+  const [searchedOption, setSearchedOption] = useState<any>('');
   const [selectOptionList, setSelectOptionList] = useState<Option[] | []>([]);
   const [dropdownPosition, setDropdownPosition] = useState<DrowdownPosition>({
     positionX: 0,
@@ -54,6 +54,9 @@ const Select: FC<SelectProps> = ({
     setShowDropdownOptions(!showDropdownOptions);
     setSearchedOption(getValue(selectedOption, valueAccessor));
     setSelectOptionList(optionsList);
+    if (!showDropdownOptions && inputRef.current) {
+      inputRef.current.focus();
+    }
   };
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -144,6 +147,7 @@ const Select: FC<SelectProps> = ({
   }, [selectedOption]);
 
   useEffect(() => {
+    if (checkEmpty(optionsList)) return;
     setSelectOptionList(optionsList);
   }, [optionsList]);
 
@@ -166,8 +170,8 @@ const Select: FC<SelectProps> = ({
           type="text"
           ref={inputRef}
           id="select-input-element"
-          className={classNames('ff-select-inputfield', {
-            'ff-select-inputfield__disabled': disabled,
+          className={classNames('ff-select-inputField', {
+            'ff-select-inputField__disabled': disabled,
           })}
           onFocus={handleFocus}
           value={searchedOption}
@@ -201,7 +205,8 @@ const Select: FC<SelectProps> = ({
             className={classNames('ff-select-labels', {
               'ff-select-labels__active': searchedOption,
             })}
-            fontSize={searchedOption && 10}
+            fontSize={searchedOption && 8}
+            lineHeight={searchedOption && '8px'}
             required={required}
           >
             {label}
@@ -234,6 +239,7 @@ const Select: FC<SelectProps> = ({
                 onSelectBlur={onSelectBlur}
                 onSelectOptionSelector={onSelectOptionSelector}
                 heightFromTop={height}
+                selectedOption={searchedOption}
               />,
               document.body
             )}