pixel-react 1.0.8 → 1.1.0

package/src/components/Modal/Modal.tsx

@@ -4,7 +4,6 @@ import './modal.scss';
 import { ModalProps } from './types';
 import { ThemeContext } from '../ThemeProvider/ThemeProvider';
 
-
 const Modal: React.FC<ModalProps> = ({
   isOpen,
   onClose,
@@ -18,6 +17,8 @@ const Modal: React.FC<ModalProps> = ({
   shouldCloseOnEsc = true,
   ariaHideApp = true,
   shouldCloseOnOverlayClick = true,
+  customWidth = '660px', // default width
+  customHeight = 'auto', // default height
   children,
 }) => {
   useEffect(() => {
@@ -52,6 +53,7 @@ const Modal: React.FC<ModalProps> = ({
     >
       <div
         className={`ff-modal-content ${currentTheme} ${contentClassName || ''}`}
+        style={{ width: customWidth, height: customHeight }}
         onClick={(e) => e.stopPropagation()}
         aria-label={contentLabel}
       >
@@ -61,7 +63,9 @@ const Modal: React.FC<ModalProps> = ({
         {children}
       </div>
       {isFooterDisplayed && (
-        <div className="ff-modal-footer">{footerContent}</div>
+        <div className="ff-modal-footer" style={{ width: customWidth }}>
+          {footerContent}
+        </div>
       )}
     </div>,
     document.body

package/src/components/Modal/modal.scss

@@ -1,4 +1,5 @@
 @use '../../assets/styles/mixins' as *;
+
 .ff-modal-overlay {
   position: fixed;
   top: 0;
@@ -13,18 +14,19 @@
 .ff-modal-content {
   background: var(--ff-mini-modal-border);
   position: relative;
-  max-width: 549px;
-  width: 100%;
+  max-width: 100%;
   border-radius: 12px 12px 0 0;
   padding: 16px;
+  
   .ff-modal-header {
     height: 32px;
-    width: 448px;
+    width: 100%;
   }
 }
+
 .ff-modal-footer {
   background-color: var(--expandable-menu-option-bg);
-  max-width: 549px;
+  max-width: 100%;
   width: 100%;
   height: 32px;
   border-radius: 0 0 12px 12px;

package/src/components/Modal/types.ts

@@ -34,4 +34,6 @@ export interface ModalProps {
   /***Content to be displayed inside the modal */
   children: ReactNode;
   isFooterDisplayed: boolean;
+  customWidth: string;
+  customHeight?: string;
 }

package/src/components/MultiSelect/MultiSelect.scss

@@ -108,6 +108,13 @@
             }
           }
         }
+        .ff-multiselect-more-chip{
+          width: 1rem;
+          @extend .fontXs;
+          font-weight: 600;
+          line-height: 16px;
+          color: var(--brand-color);
+        }
       }
     }
     &__toggle {
@@ -182,7 +189,7 @@
   .error-text {
     @extend .font-size-8;
     position: absolute;
-    top: 36px;
+    margin-top: 0.25rem;
     left: 12px;
     color: var(--error-light);
     letter-spacing: 0.5px;

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

@@ -52,6 +52,32 @@ export const Default3: Story = {
     ...defaultArgs,
   },
 };
+export const EmailGroup: Story = {
+  render: () => {
+    const [options] = useState([
+      { label: 'Sample1@gmail.com', value: 'sample1@gmail.com' },
+      { 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 }[]) => {
+      setSelectedOptions(options);
+    };
+    return (
+      <MultiSelect
+        label={'Enter Email'}
+        type='email'
+        required
+        options={options}
+        selectedOptions={selectedOptions}
+        onChange={onChange}
+        acceptNewOption={true}
+        displayCount={true}
+      />
+    );
+  },
+};
 
 export const Controlled: Story = {
   render: () => {

package/src/components/MultiSelect/MultiSelect.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import './MultiSelect.scss';
@@ -30,8 +30,10 @@ const ChipElement = ({
 };
 const MultiSelect = ({
   options,
+  type = "text",
   selectedOptions = [],
   onChange = () => {},
+  acceptNewOption = false,
   zIndex = 100,
   label = '',
   onSearch = () => {},
@@ -40,6 +42,7 @@ const MultiSelect = ({
   errorMessage = 'Fill this field',
   withSelectButton = false,
   onSelect = () => {},
+  displayCount = false
 }: MultiSelectProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [allOptions, setAllOptions] = useState(options);
@@ -47,6 +50,7 @@ const MultiSelect = ({
   const [searchedKeyword, setSearchedKeyword] = useState('');
   const [isSelectFocusedOnce, setIsSelectFocusedOnce] =
     useState<boolean>(false);
+  const [inputError, setInputError] = useState<string>('')
 
   const [dropdownPosition, setDropdownPosition] = useState<{
     top: number;
@@ -67,6 +71,9 @@ const MultiSelect = ({
   const selectWrapper = useRef<HTMLInputElement>(null);
   let isFieldSkipped = isSelectFocusedOnce && selectedOptions.length === 0;
 
+  const maxVisibleChips = 2;
+  const hiddenCount = selectedOptions.length - maxVisibleChips;
+
   const handleClick = () => {
     if (!isOpen) {
       setIsOpen(true);
@@ -102,6 +109,32 @@ const MultiSelect = ({
     e.stopPropagation();
     handleOptionChange(option, false);
   };
+  const handleKeyEnter = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (acceptNewOption && e.key === "Enter") {
+      setInputError('');
+      if (type === "email") {
+        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailPattern.test(searchedKeyword)) {
+          setIsOpen(false);
+          setInputError("Please enter a valid email address.");
+          return;
+        }
+      }
+
+      const newOption = {
+        label: searchedKeyword,
+        value: searchedKeyword.toLowerCase(),
+        isChecked: true,
+      };
+      const filteredOptions = [...allOptions].filter(option => option.isChecked === true);
+
+      setAllOptions([...allOptions, newOption]);
+      setSearchedKeyword('');
+      onChange?.([...filteredOptions, { label: searchedKeyword, value: searchedKeyword.toLocaleLowerCase() }]);
+      setIsOpen(false);
+    }
+  };
+
   const calculatePosition = () => {
     if (dropdownWrapper.current && selectWrapper.current) {
       const rect = dropdownWrapper.current?.getBoundingClientRect();
@@ -159,6 +192,7 @@ const MultiSelect = ({
         !dropdownRef.current.contains(event?.target as Node) &&
         !selectWrapper.current.contains(event?.target as Node)
       ) {
+        setInputError('')
         setIsOpen(false);
         if (!isSelectFocusedOnce) {
           setIsSelectFocusedOnce(true);
@@ -179,7 +213,7 @@ const MultiSelect = ({
       className={classNames('ff-multiselect-wrapper', {
         'ff-multiselect-wrapper--with-options': selectedOptions?.length,
         'ff-multiselect-wrapper--opened-dropdown': isOpen,
-        'ff-multiselect-wrapper--error': isFieldSkipped && required,
+        'ff-multiselect-wrapper--error': (isFieldSkipped && required) || inputError,
         'ff-multiselect-wrapper--disabled': disabled,
       })}
     >
@@ -197,15 +231,28 @@ const MultiSelect = ({
             {label}
           </span>
           <div className="ff-multiselect-chip-container">
-            {selectedOptions.map((option) => (
-              <ChipElement
-                key={option?.label}
-                label={option?.label || ''}
-                onChipCloseClick={(e) => handleChipCloseClick(option, e)}
-              />
-            ))}
+            {displayCount ?
+              <>
+                {selectedOptions.slice(0, maxVisibleChips).map((option) => (
+                  <ChipElement
+                    key={option?.label}
+                    label={option?.label || ''}
+                    onChipCloseClick={(e) => handleChipCloseClick(option, e)}
+                  />
+                ))}
+              </> :
+              selectedOptions.map((option) => (
+                <ChipElement
+                  key={option?.label}
+                  label={option?.label || ''}
+                  onChipCloseClick={(e) => handleChipCloseClick(option, e)}
+                />
+              ))
+            }
             <div className="ff-multiselect-input-container">
               <input
+                value={searchedKeyword}
+                type={type}
                 autoComplete="off"
                 placeholder="search..."
                 ref={inputRef}
@@ -216,6 +263,7 @@ const MultiSelect = ({
                   setSearchedKeyword(e.target.value);
                   onSearch?.(e.target.value);
                 }}
+                onKeyDown={handleKeyEnter}
                 id="input-ele"
                 className="ff-select-input"
                 style={{
@@ -224,6 +272,14 @@ const MultiSelect = ({
                 }}
               />
             </div>
+            {hiddenCount > 0 && (
+              <div
+                className="ff-multiselect-more-chip"
+                onClick={toggleDropdown}
+              >
+                +{hiddenCount}
+              </div>
+            )}
           </div>
         </div>
         <div onClick={toggleDropdown} className="ff-multiselect__toggle">
@@ -238,8 +294,8 @@ const MultiSelect = ({
         </div>
       </div>
       <div ref={dropdownWrapper}>
-        {isFieldSkipped && required && errorMessage && (
-          <div className="error-text">{errorMessage}</div>
+        {(inputError || (isFieldSkipped && required && errorMessage)) && (
+          <div className="error-text">{inputError || errorMessage }</div>
         )}
         {isOpen &&
           createPortal(
@@ -261,4 +317,4 @@ const MultiSelect = ({
   );
 };
 
-export default MultiSelect;
+export default MultiSelect;

package/src/components/MultiSelect/MultiSelectTypes.ts

@@ -6,16 +6,19 @@ interface Option {
 }
 interface MultiSelectProps {
   options: Option[];
+  type? : 'email' | 'text';
   label: string;
   selectedOptions?: Option[];
   disabled?: boolean;
   onSearch?: (searchedKeyword: string) => void;
   onChange?: (selectedOptions: Option[]) => void;
+  acceptNewOption?: boolean;
   zIndex?: number;
   required?: boolean;
   errorMessage?: string;
   withSelectButton?: boolean;
   onSelect?: () => void;
+  displayCount?:boolean;
 }
 
 export { Option, MultiSelectProps };

package/src/components/Select/Select.scss

@@ -112,7 +112,7 @@
       @include absolute-position(6px, auto, auto, auto);
       width: calc(100% - 38px);
       min-height: calc(100% - 8px);
-      padding: 0 8px;
+      padding: 0 28px 0 8px;
       border-radius: 4px;
       border: 1px solid transparent;
       z-index: 100;

package/src/index.ts

@@ -36,7 +36,10 @@ import Search from './components/Search/Search';
 import DatePicker from './components/DatePicker';
 import StateDropdown from './components/StateDropdown';
 import IconButton from './components/IconButton';
+import Modal from './components/Modal';
 import DragAndDrop from './components/DragAndDrop/DragAndDrop';
+import AllProjectsDropdown from './components/AllProjectsDropdown';
+import AppHeader from './components/AppHeader';
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -86,7 +89,11 @@ export {
   StateDropdown,
   StatusButton,
   IconButton,
+  Modal,
+
   DragAndDrop,
+  AllProjectsDropdown,
+  AppHeader,
 
   // utils exports
   checkEmpty,