pixel-react 1.2.0 → 1.2.2

package/src/components/LabelEditTextField/LabelEditTextField.tsx

@@ -0,0 +1,207 @@
+import React, { useState, useRef, useEffect, FC } from 'react';
+import './LabelEditTextField.scss';
+import { LabelEditTextFieldTypes } from './types';
+import Typography from '../Typography';
+import HighlightText from '../HighlightText';
+import Icon from '../Icon';
+
+const getErrorMessage = (
+  inputValue: string,
+  text: string,
+  customError?: string
+): string => {
+  if (inputValue === text) {
+    return 'No changes were made.';
+  } else if (!inputValue) {
+    return 'Text is required';
+  } else if (inputValue.length < 3) {
+    return 'Please enter at least 3 characters.';
+  } else if (customError) {
+    return customError;
+  }
+  return '';
+};
+const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
+  label,
+  text,
+  highlightText,
+  customError,
+  confirmIcon,
+  cancelIcon,
+  variant = 'textField',
+  dropdownData = [],
+  width = '300px',
+  height = '22px',
+  confirmAction,
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [inputValue, setInputValue] = useState(text);
+  const [dropdownValue, setDropdownValue] = useState(
+    dropdownData[0]?.value ?? ''
+  );
+  const [showError, setShowError] = useState('');
+  const [isTextFieldModified, setIsTextFieldModified] = useState(false);
+  const [isDropdownModified, setIsDropdownModified] = useState(false);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const cancelRef = useRef<HTMLDivElement | null>(null); // New ref for cancel icon
+
+  const handleDoubleClick = () => {
+    setIsEditing(true);
+    setShowError('');
+  };
+
+  const handleConfirm = () => {
+    const errorMessage = getErrorMessage(inputValue, text, customError);
+
+    if (errorMessage && isEditing) {
+      setShowError(errorMessage);
+    } else {
+      setIsEditing(false);
+      setShowError('');
+      if (confirmAction) confirmAction(inputValue, dropdownValue);
+    }
+  };
+
+  const handleCancel = () => {
+    setInputValue(text);
+    setDropdownValue(dropdownData[0]?.value ?? '');
+    setIsEditing(false);
+    setShowError('');
+    setIsTextFieldModified(false);
+    setIsDropdownModified(false);
+  };
+
+  const handleTextFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+    setIsTextFieldModified(true);
+    setShowError('');
+  };
+
+  const handleDropdownChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setDropdownValue(e.target.value);
+    setIsDropdownModified(true);
+    setShowError('');
+  };
+
+  const handleBlur = (e: MouseEvent) => {
+    if (
+      containerRef.current &&
+      !containerRef.current.contains(e.target as Node) &&
+      cancelRef.current !== e.target // Exclude clicks on cancel icon
+    ) {
+      const errorMessage = getErrorMessage(inputValue, text, customError);
+
+      if (errorMessage && isEditing) {
+        setShowError(errorMessage);
+      } else {
+        setIsEditing(false);
+        setShowError('');
+      }
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleBlur);
+    return () => {
+      document.removeEventListener('click', handleBlur);
+    };
+  }, [inputValue]);
+
+  return (
+    <div
+      className="ff-label-edit-text-field"
+      ref={containerRef}
+      style={{ width }}
+    >
+      {isEditing ? (
+        <div className="ff-label-text-field">
+          {variant === 'textFieldWithDropdown' ? (
+            <div
+              className={`ff-label-text-field-with-dropdown ${
+                isEditing ? 'open' : ''
+              }`}
+              style={{ height }}
+            >
+              <input
+                type="text"
+                value={inputValue}
+                onChange={handleTextFieldChange}
+                className={`ff-text-dropdown-field ${
+                  isTextFieldModified ? 'modified' : ''
+                }`}
+                placeholder=" "
+                style={{
+                  width,
+                }}
+              />
+              {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
+                type="text"
+                value={inputValue}
+                onChange={handleTextFieldChange}
+                className={`ff-text-field ${
+                  isTextFieldModified ? 'modified' : ''
+                }`}
+                placeholder=" "
+                style={{ width, height }}
+              />
+              <label className="ff-textfield-label">{label}</label>
+            </div>
+          )}
+          <div className="ff-icon-container">
+            {confirmIcon && (
+              <Icon
+                color="var(--label-edit-confirm-icon)"
+                height={20}
+                width={20}
+                name={confirmIcon.name}
+                className="confirm-icon"
+                onClick={handleConfirm}
+              />
+            )}
+            {cancelIcon && (
+              <Icon
+                color="var(--label-edit-cancel-icon)"
+                height={12}
+                width={20}
+                name={cancelIcon.name}
+                className="cancel-icon"
+                onClick={handleCancel}
+                ref={cancelRef}
+              />
+            )}
+          </div>
+        </div>
+      ) : (
+        <span
+          className="display-text"
+          onDoubleClick={handleDoubleClick}
+          role="button"
+        >
+          <HighlightText text={inputValue} highlight={highlightText} />
+        </span>
+      )}
+      {showError && isEditing && (
+        <Typography as="p" fontSize={8} className="error-text">
+          {showError}
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default LabelEditTextField;

package/src/components/LabelEditTextField/index.ts

@@ -0,0 +1 @@
+export { default } from './LabelEditTextField';

package/src/components/LabelEditTextField/types.ts

@@ -0,0 +1,38 @@
+export interface IconProps {
+  /** Name of the icon to be displayed. */
+  name: string;
+  /** Optional click handler function for the icon. */
+  onClick?: () => void;
+}
+export interface DropdownOption {
+  /** Unique identifier for the dropdown option. */
+  id: number;
+  /** Value associated with the dropdown option. */
+  value: string;
+  /** Label displayed for the dropdown option. */
+  label: string;
+}
+export interface LabelEditTextFieldTypes {
+  /** Label text displayed above the input field. */
+  label?: string;
+  /** Initial text displayed in the input field. */
+  text: string;
+  /** Text to be highlighted within the displayed text, if provided. */
+  highlightText?: string;
+  /** Custom error message to be displayed, if applicable. */
+  customError?: string;
+  /** Confirm icon properties including icon name and click handler. */
+  confirmIcon?: IconProps;
+  /** Cancel icon properties including icon name and click handler. */
+  cancelIcon?: IconProps;
+  /** Type of input field - standard text field or text field with a dropdown. */
+  variant?: 'textFieldWithDropdown' | 'textField';
+  /** Array of dropdown options used if the dropdown variant is selected. */
+  dropdownData?: DropdownOption[];
+  /** Width of the input field component. */
+  width?: string;
+  /** Height of the input field component. */
+  height?: string;
+  /** Function called when confirming input changes, with input and dropdown values as arguments. */
+  confirmAction?: (inputValue: string, dropdownValue: string) => void;
+}

package/src/components/MenuOption/types.ts

@@ -105,17 +105,18 @@ interface MenuOptionProps {
    */
   dropdownPlacement?: string | 'top' | 'left' | 'right' | 'down';
 
-  /**
-   * Callback function triggered when the icon is clicked.
-   * @type {function}
+   /**
+   * The variant of the menu option, either 'dark' or 'light'.
+   * @type {'dark' | 'light'}
+   * @default 'light'
    * @optional
    */
 
   variant?: 'dark' | 'light';
+ 
   /**
-   * The variant of the menu option, either 'dark' or 'light'.
-   * @type {'dark' | 'light'}
-   * @default 'light'
+   * Callback function triggered when the icon is clicked.
+   * @type {function}
    * @optional
    */
 

package/src/components/ModulesChip/ModuleChip.scss

@@ -0,0 +1,20 @@
+@use '../../assets/styles/fonts';
+@use '../../assets/styles/mixins';
+
+.ff-expandable-chip-menu {
+  width: 75px;
+  height: 32px;
+  border: 0.5px solid;
+  border-radius: 16px;
+  color: var(--brand-color);
+  cursor: pointer;
+  @include mixins.center-content();
+  .ff-label-chip {
+    &--active {
+      color: var(--ff-header-text-color);
+    }
+  }
+  &--active {
+    background: var(--brand-color);
+  }
+}

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

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ModuleChip from './ModuleChip';
+import { useState } from 'react';
+
+const meta: Meta<typeof ModuleChip> = {
+  title: 'Components/ModuleChip',
+  component: ModuleChip,
+  parameters: {
+    layout: 'center',
+  },
+  argTypes: {
+    isActive: Boolean,
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof ModuleChip>;
+
+const defaultArgs = {
+  label: 'Modules',
+  isActive: false,
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [selectedMenu, setSelectedMenu] = useState<boolean>(true);
+    const handleChipClick = () => {
+      setSelectedMenu(!selectedMenu);
+    };
+
+    return (
+      <ModuleChip
+        {...defaultArgs}
+        isActive={selectedMenu}
+        onClick={handleChipClick}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/components/ModulesChip/ModuleChip.tsx

@@ -0,0 +1,31 @@
+import './ModuleChip.scss';
+import classNames from 'classnames';
+import { ModuleChipProps } from './types';
+import Typography from '../Typography';
+
+const ModuleChip: React.FC<ModuleChipProps> = ({
+  label = '',
+  isActive = true,
+  onClick = () => {},
+}) => {
+  return (
+    <div
+      className={classNames('ff-expandable-chip-menu', {
+        'ff-expandable-chip-menu--active': isActive,
+      })}
+      onClick={onClick}
+    >
+      <div
+        className={classNames(`ff-label-chip `, {
+          'ff-label-chip--active': isActive,
+        })}
+      >
+        <Typography fontSize={'14px'} fontWeight="regular" lineHeight="21px">
+          {label}
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+export default ModuleChip;

package/src/components/ModulesChip/index.ts

@@ -0,0 +1 @@
+export { default } from './ModuleChip';

package/src/components/ModulesChip/types.ts

@@ -0,0 +1,14 @@
+export interface ModuleChipProps {
+  /**
+   * mandatory | label for the ModuleChip component
+   */
+  label: string;
+  /**
+   * mandatory | isActive for the ModuleChip component
+   */
+  isActive: boolean;
+  /**
+   * mandatory | onClick for the ModuleChip component
+   */
+  onClick: () => void;
+}

package/src/components/MultiSelect/Dropdown.tsx

@@ -5,6 +5,7 @@ import './Dropdown.scss';
 import { ThemeContext } from '../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';
 import Button from '../Button';
+import Typography from '../Typography';
 
 const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
   (
@@ -82,7 +83,11 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
                 onClick={() => handleOptionChange(info, !info.isChecked)}
               >
                 <input type="checkbox" checked={info.isChecked} readOnly />
-                <span className="dropdown-option-label">{info.label}</span>
+                <Typography
+                  as="span"
+                  className="dropdown-option-label"
+                  children={info.label}
+                />
               </div>
             ))
           )}

package/src/components/MultiSelect/MultiSelect.scss

@@ -38,16 +38,16 @@
   cursor: pointer;
   position: relative;
   border: 1px solid var(--default-icon-color);
-  border-radius: 8px;
+  border-radius: 4px;
   background: var(--drawer-footer-bg);
   min-width: 150px;
   width: 100%;
   height: 32px;
   .ff-multiselect {
     position: relative;
-    padding: 6px;
+    padding: 3px;
     border: none;
-    border-radius: 8px;
+    border-radius: 4px;
     @include flex-center;
     &__main {
       display: flex;
@@ -61,6 +61,8 @@
 
       .active-default-label {
         @extend .font-size-8;
+        font-size: 8px !important;
+        height: 8px;
         @include label-styles;
         background-color: var(--multi-select-label-bg);
         line-height: 12px;
@@ -87,6 +89,9 @@
             @extend .fontXs;
             line-height: 14px;
             color: var(--tooltip-bg-color);
+            &.pr-2 {
+              padding: 5px 2px;
+            }
           }
           .ff-multiselect-chip-close-icon {
             cursor: pointer;
@@ -108,13 +113,15 @@
             }
           }
         }
-        .ff-multiselect-more-chip{
-          width: 1.2rem;
-          @extend .fontSm;
-          font-weight: 600;
-          line-height: 16px;
-          color: var(--brand-color);
-        }
+      }
+      .ff-multiselect-more-chip {
+        display: flex;
+        align-items: center;
+        width: 1.2rem;
+        @extend .fontSm;
+        font-weight: 600;
+        line-height: 16px;
+        color: var(--brand-color);
       }
     }
     &__toggle {

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

@@ -55,13 +55,25 @@ export const Default3: Story = {
 export const EmailGroup: Story = {
   render: () => {
     const [options] = useState([
-      { label: 'Sample1@gmail.com', value: 'sample1@gmail.com' },
+      {
+        label: 'Sample1@gmail.com',
+        value: 'sample1@gmail.com',
+        isDisabled: true,
+      },
       { label: 'Sample2@gmail.com', value: 'sample2@gmail.com' },
     ]);
     const [selectedOptions, setSelectedOptions] = useState<
-      { label?: string; value?: string }[]
-    >([{ label: 'Sample1@gmail.com', value: 'sample1@gmail.com' }]);
-    const onChange = (options: { label?: string; value?: string }[]) => {
+      { label?: string; value?: string; isDisabled?: boolean }[]
+    >([
+      {
+        label: 'Sample1@gmail.com',
+        value: 'sample1@gmail.com',
+        isDisabled: true,
+      },
+    ]);
+    const onChange = (
+      options: { label?: string; value?: string; isDisabled?: boolean }[]
+    ) => {
       setSelectedOptions(options);
     };
     return (

package/src/components/MultiSelect/MultiSelect.tsx

@@ -5,6 +5,7 @@ import './MultiSelect.scss';
 import Dropdown from './Dropdown';
 import Icon from '../Icon';
 import { MultiSelectProps, Option } from './MultiSelectTypes';
+import Typography from '../Typography';
 
 const ChipElement = ({
   label,
@@ -22,6 +23,8 @@ const ChipElement = ({
           className="ff-multiselect-chip-close-icon"
           onClick={onChipCloseClick}
           name="close_pill"
+          height={13} //as per the latest chnages in icon container we have to give this
+          width={13}
         />
       </div>
     );
@@ -46,6 +49,9 @@ const MultiSelect = ({
 }: MultiSelectProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [allOptions, setAllOptions] = useState(options);
+  useEffect(() => {
+    setAllOptions(options);
+  }, [options]);
 
   const [searchedKeyword, setSearchedKeyword] = useState('');
   const [isSelectFocusedOnce, setIsSelectFocusedOnce] =
@@ -236,7 +242,8 @@ const MultiSelect = ({
     >
       <div className="ff-multiselect" onClick={handleClick}>
         <div className="ff-multiselect__main">
-          <span
+          <Typography
+            as="span"
             className={classNames({
               'active-default-label':
                 isOpen ||
@@ -244,9 +251,9 @@ const MultiSelect = ({
                 (isFieldSkipped && required),
               'default-label': !isOpen && !selectedOptions?.length,
             })}
-          >
-            {label}
-          </span>
+            children={label}
+          />
+
           <div className="ff-multiselect-chip-container">
             {displayCount ? (
               <>

package/src/components/MultiSelect/MultiSelectTypes.ts

@@ -3,10 +3,11 @@ interface Option {
   value?: string;
   accessor?: string;
   isChecked?: boolean;
+  isDisabled?: boolean;
 }
 interface MultiSelectProps {
   options: Option[];
-  type? : 'email' | 'text';
+  type?: 'email' | 'text';
   label: string;
   selectedOptions?: Option[];
   disabled?: boolean;
@@ -18,7 +19,7 @@ interface MultiSelectProps {
   errorMessage?: string;
   withSelectButton?: boolean;
   onSelect?: () => void;
-  displayCount?:boolean;
+  displayCount?: boolean;
 }
 
-export { Option, MultiSelectProps };
+export { Option, MultiSelectProps };

package/src/components/Select/Select.scss

@@ -28,6 +28,10 @@
 
 .ff-select-wrapper {
   position: relative;
+  
+  .ff-select-input {
+    cursor: pointer;
+  }
 
   .ff-select {
     @extend .fontSm;

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

@@ -17,10 +17,12 @@ type Story = StoryObj<typeof Select>;
 export const Primary: Story = {
   args: {
     label: 'Select',
+    labelAccessor: 'name',
+    valueAccessor: 'value',
     optionsList: [
-      { label: 'Option 1', value: '1' },
-      { label: 'Option 2', value: '2' },
-      { label: 'Option 3', value: '3' },
+      { label: 'Option 1', value: '1', name: 'abcd' },
+      { label: 'Option 2', value: '2', name: '123' },
+      { label: 'Option 3', value: '3', name: '456' },
     ],
   },
 };

package/src/components/Select/Select.tsx

@@ -8,6 +8,7 @@ import Icon from '../Icon';
 import './Select.scss';
 import usePortalPosition from '../../hooks/usePortalPosition';
 import Typography from '../Typography';
+import { getValue } from '../../utils/getSelectOptionValue/getSelectOptionValue';
 
 const selectReducer = (
   state: SelectState,
@@ -116,6 +117,8 @@ const Select = ({
   required = false,
   optionsRequired = true,
   selectedOptionColor = 'var(--ff-select-text-color)',
+  labelAccessor,
+  valueAccessor,
 }: SelectProps) => {
   const initialState: SelectState = useMemo(
     () => ({
@@ -164,7 +167,7 @@ const Select = ({
       if (actionType === 'SHOW_ERROR' || actionType === 'BLUR_INPUT') {
         dispatch({
           type: actionType,
-          payload: { optionsList, option: selectedOption.value },
+          payload: { optionsList, option: getValue(selectedOption) },
         });
       } else {
         dispatch({ type: actionType });
@@ -176,9 +179,10 @@ const Select = ({
     if (disabled) return;
     const { value } = e.target;
     const filteredOptions = optionsList.filter((option) => {
-      return typeof option.value === 'string'
-        ? option.value.toLowerCase().includes(value.toLowerCase().trim())
-        : option.value === Number(value);
+      const valueData = getValue(option, valueAccessor);
+      return typeof valueData === 'string'
+        ? valueData.toLowerCase().includes(value.toLowerCase().trim())
+        : valueData === Number(value);
     });
     dispatch({ type: 'UPDATE_OPTION_LIST', payload: filteredOptions });
     dispatch({ type: 'UPDATE_OPTION', payload: value });
@@ -197,7 +201,10 @@ const Select = ({
   const onSelectOptionSelector = (option: Option) => {
     if (!disabled) {
       onSelectBlur();
-      dispatch({ type: 'UPDATE_OPTION', payload: option.value });
+      dispatch({
+        type: 'UPDATE_OPTION',
+        payload: getValue(option, valueAccessor),
+      });
       if (onChange) {
         onChange(option);
       }
@@ -247,8 +254,8 @@ const Select = ({
   const applyActiveOptionClasses = !isInputFocused && Boolean(option);
 
   return (
-    <div className={classNames(`ff-select-wrapper ${className}`)}>
-      <div className="ff-select">
+    <div className={classNames(`ff-select-wrapper`)}>
+      <div className={`ff-select ${className}`}>
         <input
           type="text"
           className={classNames('ff-select-input', {
@@ -361,6 +368,7 @@ const Select = ({
                 options={options}
                 optionZIndex={optionZIndex}
                 inputRef={InputRef}
+                labelAccessor={labelAccessor}
               />,
               document.body
             )}