pixel-react-excel-sheet 1.0.22 → 1.0.24

package/src/components/MultiSelect/Dropdown.tsx

@@ -10,6 +10,7 @@ import Checkbox from '../Checkbox';
 import Tooltip from '../Tooltip';
 import { truncateText } from '../../utils/truncateText/truncateText';
 import { getLabel, getValue } from '../../utils/getSelectOptionValue/getSelectOptionValue';
+import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
 
 const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
   (
@@ -21,11 +22,12 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       zIndex,
       withSelectButton,
       labelAccessor='label',
-      valueAccessor='value'
+      valueAccessor='value',
+      loadMoreOptions,
     },
     ref
   ) => {
-    const filteredOptions = options
+      const filteredOptions = options
       ? options.filter((option) =>
           getValue(option, valueAccessor)
             ?.toLowerCase()
@@ -70,6 +72,22 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
 
     const themeContext = useContext(ThemeContext);
     const currentTheme = themeContext?.currentTheme;
+
+    useIntersectionObserver(['ff-multiselect-pagination'], {
+      root: document.getElementById('ff-multiselect-options-wrapper'),
+      rootMargin: '0px',
+      threshold: 0.1,  
+      onIntersect: (entry, _observer) => {
+        if (entry.isIntersecting) {
+          if (loadMoreOptions) {
+            loadMoreOptions();
+          }
+
+    
+        }
+      },
+    });
+
     return (
       <div
         role="listbox"
@@ -87,6 +105,8 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
         <div
           className="ff-multiselect-options-wrapper"
           style={{ maxHeight: withSelectButton ? '128px' : '160px' }}
+
+          id="ff-multiselect-options-wrapper"
         >
           {filteredOptions.length === 0 ? (
               <Typography textAlign='center' as='p' className='no-options'>
@@ -94,7 +114,8 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
               </Typography>
            
           ) : (
-            filteredOptions.map((info) => (
+            <>
+           { filteredOptions.map((info) => (
               <div
                 role="option"
                 className={`dropdown-option-container`}
@@ -127,7 +148,12 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
                   }
                 />
               </div>
-            ))
+            ))}
+
+            <div id="ff-multiselect-pagination" >
+              </div>
+            </>
+
           )}
         </div>
         {withSelectButton && filteredOptions.length > 0 && (

package/src/components/MultiSelect/MultiSelect.tsx

@@ -78,6 +78,7 @@ const MultiSelect = ({
   labelAccessor = 'label',
   valueAccessor = 'value',
   withSelectButton = variant === 'machines' ? true : false,
+  loadMoreOptions = () => { },
   onEnter = () => { },
 }: MultiSelectProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -464,6 +465,7 @@ const MultiSelect = ({
                 withSelectButton={withSelectButton}
                 labelAccessor={labelAccessor}
                 valueAccessor={valueAccessor}
+                loadMoreOptions={loadMoreOptions}
               />,
               document.body
             )}

package/src/components/MultiSelect/MultiSelectTypes.ts

@@ -41,7 +41,9 @@ interface MultiSelectProps {
 
   valueAccessor?: string;
 
-  onEnter?:(newOption:string)=>void
+  onEnter?:(newOption:string)=>void;
+
+  loadMoreOptions?: () =>void;
 }
 
 export { Option, MultiSelectProps };

package/src/components/MultiSelect/dropdownTypes.ts

@@ -16,4 +16,6 @@ export interface DropdownProps {
   onSelect?: () => void;
   labelAccessor?: string;
   valueAccessor?: string;
+  loadMoreOptions?: () => void;
+  
 }

package/src/components/PhoneInput/PhoneInput.stories.tsx

@@ -15,7 +15,11 @@ const Template = ({
   placeholder,
   onFocus,
   onBlur,
-  isValid,
+  international,
+  enableAreaCodeStretch,
+  defaultCountry,
+  disabled,
+  id,
 }: PhoneInputProps) => {
   const [phone, setPhone] = useState<string>(value || '');
   const [valid, setValid] = useState(true);
@@ -38,6 +42,11 @@ const Template = ({
       onFocus={onFocus}
       onBlur={onBlur}
       isValid={valid}
+      international={international}
+      enableAreaCodeStretch={enableAreaCodeStretch}
+      defaultCountry={defaultCountry}
+      disabled={disabled}
+      id={id}
     />
   );
 };
@@ -46,50 +55,16 @@ const Template = ({
 export const Default = Template.bind({});
 Default.args = {
   country: 'IN',
-  value: '9134567890',
+  value: '91',
   width: '400px',
   placeholder: 'Enter phone number',
   onChange: () => {},
   onFocus: () => {},
   onBlur: () => {},
   isValid: true,
-};
-
-// Story with initial value
-export const WithInitialValue = Template.bind({});
-WithInitialValue.args = {
-  country: 'IN',
-  value: '9176543210',
-  width: '300px',
-  onChange: () => {},
-  placeholder: 'Enter phone number',
-  onFocus: () => {},
-  onBlur: () => {},
-  isValid: true,
-};
-
-// Story with a custom country
-export const WithCustomCountry = Template.bind({});
-WithCustomCountry.args = {
-  country: 'IN',
-  value: '9176543210',
-  width: '300px',
-  onChange: () => {},
-  placeholder: 'Enter phone number',
-  onFocus: () => {},
-  onBlur: () => {},
-  isValid: true,
-};
-
-// Story with empty value
-export const EmptyValue = Template.bind({});
-EmptyValue.args = {
-  country: 'IN',
-  value: '91',
-  width: '500px',
-  onChange: () => {},
-  placeholder: 'Enter phone number',
-  onFocus: () => {},
-  onBlur: () => {},
-  isValid: false,
+  international: true,
+  enableAreaCodeStretch: true,
+  defaultCountry: 'IN',
+  disabled: false,
+  id: 'addPrimaryNumberId',
 };

package/src/components/PhoneInput/PhoneInput.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import PhoneInput from 'react-phone-input-2';
-import 'react-phone-input-2/lib/style.css';
 import { PhoneInputProps } from './types';
 import Typography from '../Typography';
 import './PhoneInput.scss';
@@ -13,6 +12,10 @@ const PhoneInputField: React.FC<PhoneInputProps> = ({
   placeholder = 'Enter phone number',
   onFocus,
   onBlur,
+  id,
+  dropdownStyle = {},
+  enableAreaCodeStretch = false,
+  disabled = false,
 }) => {
   const [phone, setPhone] = useState<string>(value);
   const [isFocused, setIsFocused] = useState(false);
@@ -57,8 +60,10 @@ const PhoneInputField: React.FC<PhoneInputProps> = ({
   };
 
   return (
-    <div>
+    <div id={id}>
       <PhoneInput
+        specialLabel=""
+        countryCodeEditable={false}
         country={country}
         value={phone}
         onChange={handlePhoneChange}
@@ -77,6 +82,9 @@ const PhoneInputField: React.FC<PhoneInputProps> = ({
         placeholder={placeholder}
         onFocus={handleFocus}
         onBlur={handleBlur}
+        dropdownStyle={dropdownStyle}
+        enableAreaCodeStretch={enableAreaCodeStretch}
+        disabled={disabled}
       />
       {error && !isFocused && (
         <Typography color={'var(--error_light)'} className="error">