pixel-react-excel-sheet 1.0.10 → 1.0.12

package/src/components/MiniModal/types.ts

@@ -5,6 +5,8 @@ interface ModalDimensions {
   borderRadius?: number;
   zIndex?: number;
   boxShadow?: string;
+  left?: number;
+  top?: number;
 }
 export interface MiniEditModalProps {
   /**
@@ -94,6 +96,11 @@ export interface MiniEditModalProps {
     boxShadow?: string;
   };
   arrowZIndex?: number;
+  arrowProperties?: {
+    left?: number;
+    top?: number;
+    size?: number;
+  };
   overlay?: {
     isOverlay?: boolean;
     zIndexOverlay?: number;

package/src/components/Modal/Modal.stories.tsx

@@ -1,6 +1,7 @@
+import React, { useState } from 'react';
+
 import type { Meta, StoryObj } from '@storybook/react';
 import Modal from './Modal';
-import { useState } from 'react';
 import Button from '../Button';
 
 const meta: Meta<typeof Modal> = {

package/src/components/MultiSelect/MultiSelect.scss

@@ -32,6 +32,31 @@
     }
   }
 }
+
+@mixin ff-scroll-style {
+
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 40px;
+      border-radius: 12px 0px 0px 0px;
+      background: var(--description-text);
+  
+      &-track {
+        background: var(--ff-select-scroll-track-bg);
+      }
+  
+      &-thumb {
+        background: var(--ff-select-scroll-thumb-color);
+        border-radius: 10px;
+  
+        &:hover {
+          background: var(--ff-select-scroll-thumb-hover);
+        }
+      }
+    }
+}
+
+
 .ff-multiselect-container-with-icon {
   display: flex;
   align-items: center;
@@ -83,7 +108,11 @@
           display: flex;
           flex-wrap: wrap;
           align-items: center;
+          overflow-y: auto;
+          max-height: 64px;
           gap: 5px;
+          @include ff-scroll-style;
+
           .ff-multiselect-chip {
             @include flex-center;
             box-sizing: border-box;

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

@@ -87,7 +87,7 @@ export const Default3: Story = {
 };
 export const EmailGroup: Story = {
   render: () => {
-    const [options,setOptions] = useState([
+    const [options, setOptions] = useState([
       {
         label: 'Sample1@gmail.com',
         value: 'sample1@gmail.com',
@@ -109,9 +109,9 @@ export const EmailGroup: Story = {
     ) => {
       setSelectedOptions(options);
     };
-    const onEnter=(newOption:string)=>{
-setOptions(prev=>[...prev,{label:newOption,value:newOption}])
-setSelectedOptions(prev=>[...prev,{label:newOption,value:newOption}])
+    const onEnter = (newOption: string) => {
+      setOptions(prev => [...prev, { label: newOption, value: newOption }])
+      setSelectedOptions(prev => [...prev, { label: newOption, value: newOption }])
     }
     return (
       <MultiSelect
@@ -153,8 +153,21 @@ export const Controlled: Story = {
         { label: 'Kiwi', value: 'kiwi' },
         { label: 'Mango', value: 'mango' },
         { label: 'Orange', value: 'orange' },
-        { label: 'Peach', value: 'peach' },
+        { label: 'Plum', value: 'plum' },
+        { label: 'Berry', value: 'berry' },
+        { label: 'Watermelon', value: 'watermelon' },
+        { label: 'Guava', value: 'guava' },
+        { label: 'Pineapple', value: 'pineapple' },
         { label: 'Strawberry', value: 'strawberry' },
+        { label: 'Pear', value: 'pear' },
+        { label: 'Peach', value: 'peach' },
+        { label: 'Lemon', value: 'lemon' },
+        { label: 'Papaya', value: 'papaya' },
+        { label: 'Apricot', value: 'apricot' },
+        { label: 'Raspberry', value: 'raspberry' },
+        { label: 'Pomegranate', value: 'pomegranate' },
+        { label: 'Cantaloupe', value: 'cantaloupe' },
+        { label: 'Lychee', value: 'lychee' }
       ]);
     }, []);
     return (
@@ -162,6 +175,7 @@ export const Controlled: Story = {
         label={'Fruits'}
         required
         options={options}
+        displayCount
         selectedOptions={selectedOptions}
         onChange={onChange}
       />

package/src/components/MultiSelect/MultiSelect.tsx

@@ -29,9 +29,8 @@ const ChipElement = ({
     return (
       <div className="ff-multiselect-chip">
         <span
-          className={`ff-multiselect-chip-label ${
-            disableChip && 'label-padding'
-          }`}
+          className={`ff-multiselect-chip-label ${disableChip && 'label-padding'
+            }`}
         >
           <Tooltip
             placement="bottom"
@@ -59,26 +58,26 @@ const MultiSelect = ({
   options = [],
   type = 'text',
   selectedOptions = [],
-  onChange = () => {},
+  onChange = () => { },
   acceptNewOption = false,
   zIndex = 100,
   label = '',
-  onSearch = () => {},
+  onSearch = () => { },
   required = false,
   disabled = false,
   errorMessage = 'Fill this field',
-  displayCount = false,
+  displayCount: initialDisplayCount = false,
   placeholderForSearching = 'Search',
   variant = 'default',
-  onLabelPlusIconClick = () => {},
-  onManageLabelsClick = () => {},
+  onLabelPlusIconClick = () => { },
+  onManageLabelsClick = () => { },
   className = '',
   highlightedMachine = '',
-  onSelectButtonClick = () => {},
+  onSelectButtonClick = () => { },
   labelAccessor = '',
   valueAccessor = labelAccessor,
   withSelectButton = variant === 'machines' ? true : false,
-  onEnter=()=>{}
+  onEnter = () => { },
 }: MultiSelectProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [allOptions, setAllOptions] = useState(options);
@@ -88,6 +87,8 @@ const MultiSelect = ({
     useState<boolean>(false);
   const [inputError, setInputError] = useState<string>('');
   const [displayIcon, setDisplayIcon] = useState<boolean>(false);
+  const [displayCount, setDisplayCount] =
+    useState<boolean>(initialDisplayCount);
 
   const [dropdownPosition, setDropdownPosition] = useState<{
     top: number;
@@ -109,7 +110,7 @@ const MultiSelect = ({
 
   let isFieldSkipped = isSelectFocusedOnce && selectedOptions.length === 0;
 
-  const maxVisibleChips = 2;
+  const maxVisibleChips = 12;
   const hiddenCount = selectedOptions.length - maxVisibleChips;
 
   const handleClick = () => {
@@ -132,7 +133,7 @@ const MultiSelect = ({
     inputRef.current?.focus();
     const updatedOptions = allOptions.map((option) =>
       getValue(option, valueAccessor) ===
-      getValue(selectedOption, valueAccessor)
+        getValue(selectedOption, valueAccessor)
         ? { ...option, isChecked }
         : option
     );
@@ -169,7 +170,7 @@ const MultiSelect = ({
           return;
         }
       }
-     onEnter?.(searchedKeyword)
+      onEnter?.(searchedKeyword);
       setSearchedKeyword('');
       setIsOpen(false);
     }
@@ -209,10 +210,16 @@ const MultiSelect = ({
       setDisplayIcon(false);
     }
   };
+
+  const handleHiddenChips = () => {
+    setIsOpen(false);
+    setDisplayCount(false);
+  };
   useEffect(() => {
     const rect = dropdownWrapper.current?.getBoundingClientRect();
     setDropdownPosition((prev) => ({ ...prev, width: rect?.width as number }));
   }, [displayIcon]);
+
   useEffect(() => {
     if (isOpen) {
       calculatePosition();
@@ -250,14 +257,14 @@ const MultiSelect = ({
   }, [isOpen]);
   useEffect(() => {
     if (!checkEmpty(options?.length)) {
-      let initializeOptions=options;
-      if(!checkEmpty(selectedOptions?.length)){
-         initializeOptions = options.map((option) => ({
+      let initializeOptions = options;
+      if (!checkEmpty(selectedOptions?.length)) {
+        initializeOptions = options.map((option) => ({
           ...option,
           isChecked: selectedOptions.some(
             (selectedOption) =>
               getValue(selectedOption, valueAccessor) ===
-            getValue(option, valueAccessor)
+              getValue(option, valueAccessor)
           ),
         }));
       }
@@ -392,7 +399,10 @@ const MultiSelect = ({
             )}
           </div>
           {hiddenCount > 0 && displayCount && (
-            <div className="ff-multiselect-more-chip" onClick={toggleDropdown}>
+            <div
+              className="ff-multiselect-more-chip"
+              onClick={handleHiddenChips}
+            >
               <Typography
                 fontSize={12}
                 fontWeight="semi-bold"
@@ -431,7 +441,7 @@ const MultiSelect = ({
               className="error-text"
             />
           )}
-          {displayIcon && variant==='labels' && (
+          {displayIcon && variant === 'labels' && (
             <Typography
               onClick={onManageLabelsClick}
               fontSize={8}

package/src/components/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,3 @@
+declare module 'react-phone-input-2' {
+  export * from 'react-phone-input-2';
+}

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

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import { PhoneInputProps } from './types';
+import PhoneInputField from './PhoneInput';
+
+export default {
+  title: 'Components/PhoneInputComponent',
+  component: PhoneInputField,
+};
+
+const Template = ({
+  value,
+  country,
+  width,
+  onChange,
+  placeholder,
+  onFocus,
+  onBlur,
+  isValid,
+}: PhoneInputProps) => {
+  const [phone, setPhone] = useState<string>(value || '');
+  const [valid, setValid] = useState(true);
+
+  const handlePhoneChange = (newPhone: string) => {
+    setPhone(newPhone);
+    const validPhoneNumberLength = country === 'IN' ? 10 : newPhone.length;
+    const phoneIsValid = newPhone.length === validPhoneNumberLength;
+    setValid(phoneIsValid);
+    onChange(newPhone);
+  };
+
+  return (
+    <PhoneInputField
+      value={phone}
+      country={country}
+      onChange={handlePhoneChange}
+      width={width}
+      placeholder={placeholder}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      isValid={valid}
+    />
+  );
+};
+
+// Default story
+export const Default = Template.bind({});
+Default.args = {
+  country: 'IN',
+  value: '9134567890',
+  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,
+};

package/src/components/PhoneInput/PhoneInput.tsx

@@ -0,0 +1,90 @@
+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';
+
+const PhoneInputField: React.FC<PhoneInputProps> = ({
+  country,
+  value,
+  onChange,
+  width = '100%',
+  placeholder = 'Enter phone number',
+  onFocus,
+  onBlur,
+}) => {
+  const [phone, setPhone] = useState<string>(value);
+  const [isFocused, setIsFocused] = useState(false);
+  const [error, setError] = useState<string>('');
+
+  useEffect(() => {
+    if (value !== phone) {
+      setPhone(value);
+    }
+  }, [value]);
+
+  const handlePhoneChange = (phone: string) => {
+    const numericPhone = phone.replace(/[^0-9+]/g, '');
+    const countryCode = numericPhone.startsWith('+')
+      ? numericPhone.substring(0, 3)
+      : '';
+    let phoneNumber = numericPhone.replace(countryCode, '');
+
+    let validPhoneNumberLength = 10;
+    if (country === 'IN') {
+      if (phoneNumber.length < validPhoneNumberLength) {
+        setError('Phone number should be exactly 10 digits');
+      } else {
+        setError('');
+      }
+    }
+
+    if (phoneNumber.length <= validPhoneNumberLength) {
+      setPhone(numericPhone);
+      onChange(numericPhone);
+    }
+  };
+
+  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+    setIsFocused(true);
+    if (onFocus) onFocus(event);
+  };
+
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    setIsFocused(false);
+    if (onBlur) onBlur(event);
+  };
+
+  return (
+    <div>
+      <PhoneInput
+        country={country}
+        value={phone}
+        onChange={handlePhoneChange}
+        inputStyle={{
+          width,
+          height: '32px',
+          border: isFocused
+            ? '1px solid var(--brand-color)'
+            : error
+            ? '1px solid var(--error_light)'
+            : '1px solid var(--default-color)',
+          borderRadius: '4px',
+          fontSize: '14px',
+          transition: 'border-color 0.3s ease',
+        }}
+        placeholder={placeholder}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+      />
+      {error && !isFocused && (
+        <Typography color={'var(--error_light)'} className="error">
+          {error}
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default PhoneInputField;

package/src/components/PhoneInput/index.ts

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

package/src/components/PhoneInput/phoneInput.scss

@@ -0,0 +1,3 @@
+.error {
+  margin-top: 5px;
+}

package/src/components/PhoneInput/types.ts

@@ -0,0 +1,10 @@
+export interface PhoneInputProps {
+  country: string;
+  value: string;
+  onChange: (phone: string) => void;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  width?: string;
+  placeholder?: string;
+  isValid: any;
+}

package/src/components/PopUpModal/PopUpModal.stories.tsx

@@ -15,15 +15,16 @@ const meta: Meta<typeof PopUpModal> = {
 type Story = StoryObj<typeof PopUpModal>;
 
 const defaultArgs = {
-    iconName:"license_warning",
-    titleMessage:"Warning!",
-    subTitleMessage:"Unsaved Changes.",
-    modalMessage:"Your web service data will be lost. Are you sure you want to exit?",
-    footerMessage:"How do you want to proceed?",
-    firstButtonLabel:"Cancel",
-    secondButtonLabel:"Continue",
-    buttonVariant:"warning",
-    border:'1px solid var(--warning-modal-border-color)'
+  iconName: "license_warning",
+  titleMessage: "Warning!",
+  subTitleMessage: "Unsaved Changes.",
+  modalMessage: "Your web service data will be lost. Are you sure you want to exit?",
+  footerMessage: "How do you want to proceed?",
+  firstButtonLabel: "Cancel",
+  secondButtonLabel: "Continue",
+  buttonVariant: "warning",
+  border: '1px solid var(--warning-modal-border-color)',
+  colorForTitleMessage: 'var(--select-license-header-text-color)'
 }
 
 export const DefaultModal: Story = {
@@ -41,12 +42,12 @@ export const ControlledPopUp: Story = {
   render: () => {
     const [isOpen, setIsOpen] = useState(false);
     const handleContinue = () => {
-        alert('Continued!');
-        setIsOpen(false);
-      };
+      alert('Continued!');
+      setIsOpen(false);
+    };
     return (
       <>
-        <Button variant="warning" onClick={() => setIsOpen(true)} label='Open PopUp'/>
+        <Button variant="warning" onClick={() => setIsOpen(true)} label='Open PopUp' />
         <PopUpModal
           {...defaultArgs}
           isOpen={isOpen}

package/src/components/PopUpModal/PopUpModal.tsx

@@ -19,6 +19,7 @@ const PopUpModal: FC<PopUpModalProps> = ({
   secondButtonLabel = 'Continue',
   buttonVariant = 'warning',
   border = '1px solid var(--warning-modal-border-color)',
+  colorForTitleMessage = 'var(--status-button-bg-warning)'
 }) => {
   return (
     <Modal
@@ -43,7 +44,7 @@ const PopUpModal: FC<PopUpModalProps> = ({
               >
                 {' '}
                 <Typography
-                  color="var(--status-button-bg-warning)"
+                  color={`${colorForTitleMessage}`}
                   fontSize={20}
                   fontWeight="semi-bold"
                 >

package/src/components/PopUpModal/types.ts

@@ -1,14 +1,15 @@
 export interface PopUpModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onContinue?: () => void;
-    titleMessage:string,
-    subTitleMessage?:string,
-    iconName:string,
-    modalMessage:string,
-    footerMessage:string,
-    firstButtonLabel?:string,
-    secondButtonLabel:string,
-    buttonVariant:any,
-    border:string,
-  }
+  isOpen: boolean;
+  onClose: () => void;
+  onContinue?: () => void;
+  titleMessage: string;
+  subTitleMessage?: string;
+  iconName: string;
+  modalMessage: string;
+  footerMessage: string;
+  firstButtonLabel?: string;
+  secondButtonLabel: string;
+  buttonVariant: any;
+  border: string;
+  colorForTitleMessage?: string;
+}

package/src/components/Select/Select.scss

@@ -51,6 +51,10 @@
       }
     }
 
+    .ff-select-input-icon {
+      margin-left: 6px;
+    }
+
     .ff-select-inputField {
       @extend .fontSm;
       width: calc(100% - 8px);
@@ -66,6 +70,15 @@
         cursor: not-allowed;
         color: var(--ff-select-border-color);
       }
+
+      &__readonly {
+        cursor: pointer;
+      }
+
+      &__icon {
+        width: calc(100% - 36px);
+        padding: 4;
+      }
     }
 
     .ff-select-arrows-wrapper {
@@ -95,12 +108,17 @@
       transition: 0.18s ease all;
       border-radius: 4px;
 
+      &__icon {
+        left: 24px;
+      }
+
       &__active {
         transform: translateY(-16px);
         transition: 0.18s ease all;
         background-color: var(--ff-select-background-color);
         padding: 0 2px;
         z-index: 100000;
+        left: 8px;
       }
     }
 
@@ -120,6 +138,7 @@
         padding: 0 2px;
         line-height: 18px;
         z-index: 100000;
+        left: 8px;
       }
 
       .ff-select-arrows-wrapper {
@@ -174,6 +193,7 @@
         background-color: var(--ff-select-background-color);
         padding: 0 2px;
         line-height: 18px;
+        left: 8px;
       }
     }
 

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

@@ -1,6 +1,7 @@
+import React, { useState } from 'react';
+
 import type { Meta, StoryObj } from '@storybook/react';
 import Select from './Select';
-import { useState } from 'react';
 import { Option } from './types';
 import RadioGroup from '../RadioGroup';
 
@@ -303,4 +304,52 @@ export const updateOptionFromOutside: Story = {
   },
 };
 
+export const IconOptionSelection: Story = {
+  render: () => {
+    const optionsList = [
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+        iconName: 'local',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+        iconName: 'chrome_icon',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+        iconName: 'mac_icon',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+        iconName: 'web_icon',
+      },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: 'fire-flink-LIC3179',
+      value: 'fire-flink-LIC3179',
+      iconName: 'local',
+    });
+
+    const handleChange = (option: Option) => {
+      setSelectedOption(option);
+    };
+
+    return (
+      <Select
+        label="Option"
+        optionsList={optionsList}
+        selectedOption={selectedOption}
+        onChange={handleChange}
+        showIcon={true}
+        width={200}
+      />
+    );
+  },
+};
+
 export default meta;