pixel-react 1.2.7 → 1.2.9

package/src/components/InputWithDropdown/InputWithDropdown.tsx

@@ -20,8 +20,11 @@ const InputWithDropdown = ({
   onInputChangeHandler,
   onInputBlurHandler,
   optionsRequired = true,
+  dropdownPosition = 'right', 
+  type = 'text',
 }: InputWithDropdownProps) => {
-  const isValueFilled = !checkEmpty(value);
+  const isValueFilled = !checkEmpty(value) || dropdownPosition==='left';
+
   return (
     <div
       className={classNames('ff-input-with-dropdown-container', {
@@ -34,8 +37,29 @@ const InputWithDropdown = ({
           'ff-input-with-dropdown--no-hover': isValueFilled,
           'ff-input-with-dropdown--disabled': !!disabled,
           'ff-input-with-dropdown--error': !!error,
+          [`ff-input-with-dropdown--${dropdownPosition}`]: dropdownPosition,
         })}
       >
+        {dropdownPosition === 'left' && (
+          <>
+          <Select
+            optionsList={optionsList}
+            selectedOption={selectedOption}
+            showLabel={false}
+            showBorder={false}
+            onChange={onDropdownChangeHandler}
+            disabled={disabled || !optionsRequired}
+            optionsRequired={optionsRequired}
+            className={classNames('ff-floating-dropdown', {
+              'ff-floating-dropdown--disabled': !!disabled,
+              'ff-floating-dropdown--error': !!error,
+              'ff-floating-dropdown--left': dropdownPosition === 'left'
+            })}
+            width={94}
+          />
+          <div className='seperatorline'/>
+          </>
+        )}
         <div className={classNames('ff-floating-label-input-container')}>
           <Typography
             as="label"
@@ -45,13 +69,13 @@ const InputWithDropdown = ({
               'ff-floating-label--no-hover': isValueFilled,
               'ff-floating-label--error': !!error,
             })}
+            required={required}
           >
-            {required && <span className="ff-required-asterisk">*</span>}{' '}
             {label}
           </Typography>
           <input
             name={name}
-            type="number"
+            type={type}
             id={name}
             value={value}
             onChange={onInputChangeHandler}
@@ -63,22 +87,26 @@ const InputWithDropdown = ({
               'ff-floating-input--filled': isValueFilled,
               'ff-floating-input--disabled': !!disabled,
               'ff-floating-input--error': !!error,
+              'ff-floating-input--left-dropdown': dropdownPosition === 'left',
             })}
           />
         </div>
-        <Select
-          optionsList={optionsList}
-          selectedOption={selectedOption}
-          showLabel={false}
-          showBorder={false}
-          onChange={onDropdownChangeHandler}
-          disabled={disabled || !optionsRequired}
-          optionsRequired={optionsRequired}
-          className={classNames('ff-floating-dropdown', {
-            'ff-floating-dropdown--disabled': !!disabled,
-            'ff-floating-dropdown--error': !!error,
-          })}
-        />
+        {dropdownPosition === 'right' && (
+          <Select
+            optionsList={optionsList}
+            selectedOption={selectedOption}
+            showLabel={false}
+            showBorder={false}
+            onChange={onDropdownChangeHandler}
+            disabled={disabled || !optionsRequired}
+            optionsRequired={optionsRequired}
+            className={classNames('ff-floating-dropdown', {
+              'ff-floating-dropdown--disabled': !!disabled,
+              'ff-floating-dropdown--error': !!error,
+            })}
+            width={120}
+          />
+        )}
       </fieldset>
       {error && helperText && (
         <span className="ff-helper-text">{helperText}</span>
@@ -87,4 +115,5 @@ const InputWithDropdown = ({
   );
 };
 
+
 export default InputWithDropdown;

package/src/components/InputWithDropdown/types.ts

@@ -19,7 +19,9 @@ export interface InputWithDropdownProps {
   /**
    * value | input field value
    */
-  value?: number;
+  value?: string | number
+
+  type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time'
 
   /**
    * variants to set color/style of the input field
@@ -106,4 +108,6 @@ export interface InputWithDropdownProps {
    * optionsRequired:false prop removes options from dropdown & shows static label only
    */
   optionsRequired?: boolean;
+
+  dropdownPosition?: 'left' | 'right'
 }

package/src/components/MenuOption/MenuOption.scss

@@ -52,7 +52,6 @@
     margin: 2px;
     min-height: 32px;
     min-width: 111px;
-    z-index: 100000;
     white-space: nowrap;
 
     .ff-options {

package/src/components/MenuOption/MenuOption.stories.tsx

@@ -28,6 +28,7 @@ export const DefaultMenuOption: Story = {
         icon: 'success',
       },
     ],
+    zIndex:1000000,
   },
 };
 
@@ -139,6 +140,7 @@ export const MenuOptionWithDisabledHoverEffect: Story = {
         icon: 'success',
       },
     ];
+    const zIndex=1000000;
     return (
       <MenuOption
         iconName="more"
@@ -146,6 +148,7 @@ export const MenuOptionWithDisabledHoverEffect: Story = {
         tooltipPlacement="top"
         dropdownPlacement="right"
         options={options}
+        zIndex={zIndex}
       />
     );
   },

package/src/components/MenuOption/MenuOption.tsx

@@ -52,6 +52,7 @@ const MenuOption = ({
   iconButtonBorderRadius = 7,
   iconSize = 16,
   variant = 'light',
+  zIndex=1000,
 }: MenuOptionProps) => {
   const [isClicked, setIsClicked] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -71,14 +72,14 @@ const MenuOption = ({
   const dropdownPositionStyles = () => {
     switch (dropdownPlacement) {
       case 'top':
-        return { bottom: '100%', left: -2 };
+        return { bottom: '100%', left: -2 ,zIndex};
       case 'left':
-        return { top: -2, right: '100%' };
+        return { top: -2, right: '100%' ,zIndex};
       case 'right':
-        return { top: -2, left: '100%' };
+        return { top: -2, left: '100%' ,zIndex};
       case 'down':
       default:
-        return { top: '100%', left: -2 };
+        return { top: '100%', left: -2 ,zIndex};
     }
   };
 

package/src/components/MenuOption/types.ts

@@ -149,6 +149,10 @@ interface MenuOptionProps {
    * @default 7
    */
   iconButtonBorderRadius?: number;
+  /**
+   * Providing z-index for the options card.
+   */
+  zIndex?: number;
 }
 
 interface OptionProps {

package/src/components/MultiSelect/MultiSelect.scss

@@ -58,7 +58,9 @@
         color: var(--default-icon-color);
         line-height: 18px;
       }
-
+      .ff-required-asterisk {
+        color: var(--error-light);
+      }
       .active-default-label {
         @extend .font-size-8;
         font-size: 8px !important;
@@ -96,6 +98,8 @@
           .ff-multiselect-chip-close-icon {
             color: var(--brand-color);
             cursor: pointer;
+            padding-right: 0px;
+            padding-left: 0px;
           }
         }
         .ff-multiselect-input-container {

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import MultiSelect from './MultiSelect';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { Option } from './MultiSelectTypes';
 
 const meta: Meta<typeof MultiSelect> = {
   title: 'Components/MultiSelect',
@@ -93,24 +94,27 @@ export const EmailGroup: Story = {
 
 export const Controlled: Story = {
   render: () => {
-    const [options] = useState([
-      { label: 'Apple', value: 'apple' },
-      { label: 'Banana', value: 'banana' },
-      { 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' },
-    ]);
+    const [options, setOptions] = useState<Option[]>([]);
     const [selectedOptions, setSelectedOptions] = useState<
       { label?: string; value?: string }[]
     >([{ label: 'Apple', value: 'apple' }]);
     const onChange = (options: { label?: string; value?: string }[]) => {
       setSelectedOptions(options);
     };
+    useEffect(() => {
+      setOptions([
+        { label: 'Apple', value: 'apple' },
+        { label: 'Banana', value: 'banana' },
+        { 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' },
+      ]);
+    }, []);
     return (
       <MultiSelect
         label={'Fruits'}

package/src/components/MultiSelect/MultiSelect.tsx

@@ -20,7 +20,11 @@ const ChipElement = ({
   if (label) {
     return (
       <div className="ff-multiselect-chip">
-        <span className={`ff-multiselect-chip-label ${disableChip && 'label-padding'}`}>
+        <span
+          className={`ff-multiselect-chip-label ${
+            disableChip && 'label-padding'
+          }`}
+        >
           <Tooltip
             placement="bottom"
             title={label?.length > 25 ? label : ''}
@@ -60,9 +64,6 @@ 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] =
@@ -186,12 +187,20 @@ const MultiSelect = ({
       calculatePosition();
     }
   }, [isOpen, allOptions]);
+  function getScrollbarWidth(): number {
+    const div = document.createElement('div');
+    div.style.visibility = 'hidden';
+    div.style.overflow = 'scroll';
+    document.body.appendChild(div);
+    const scrollbarWidth = div.offsetWidth - div.clientWidth;
+    document.body.removeChild(div);
+    return scrollbarWidth;
+  }
   const onSelectToggleScroll = (isEnabled: boolean) => {
-    const bodyScrollWidth = window.innerWidth - document.body.clientWidth;
+    const bodyScrollWidth = getScrollbarWidth();
     document.body.style.paddingRight = isEnabled ? '' : `${bodyScrollWidth}px`;
     document.body.style.overflow = isEnabled ? '' : 'hidden';
   };
-
   useEffect(() => {
     if (isOpen) {
       onSelectToggleScroll(!isOpen);
@@ -215,6 +224,8 @@ const MultiSelect = ({
       }));
       setAllOptions(initializeOptions);
     }
+  }, [options]);
+  useEffect(() => {
     const handleClickAnywhere = (event: MouseEvent) => {
       if (
         dropdownWrapper.current &&
@@ -240,6 +251,7 @@ const MultiSelect = ({
       document.body.style.overflow = 'auto';
     };
   }, []);
+
   return (
     <div
       ref={selectWrapper}
@@ -261,9 +273,10 @@ const MultiSelect = ({
                 selectedOptions?.length ||
                 (isFieldSkipped && required),
               'default-label': !isOpen && !selectedOptions?.length,
-            })}
-            children={label}
-          />
+            })}>
+              {required && <span className="ff-required-asterisk">*</span>}
+              {label}
+              </Typography>
 
           <div className="ff-multiselect-chip-container">
             {displayCount ? (
@@ -306,11 +319,11 @@ const MultiSelect = ({
             </div>
           </div>
         </div>
-          {hiddenCount > 0 && displayCount && (
-            <div className="ff-multiselect-more-chip" onClick={toggleDropdown}>
-              +{hiddenCount}
-            </div>
-          )}
+        {hiddenCount > 0 && displayCount && (
+          <div className="ff-multiselect-more-chip" onClick={toggleDropdown}>
+            +{hiddenCount}
+          </div>
+        )}
         <div onClick={toggleDropdown} className="ff-multiselect__toggle">
           <Icon
             name="arrow_down"