pixel-react 1.2.7 → 1.2.8

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"

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

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Select from './Select';
 import { useState } from 'react';
 import { Option } from './types';
+import RadioGroup from '../RadioGroup';
 
 const meta: Meta<typeof Select> = {
   title: 'Components/Select',
@@ -20,9 +21,26 @@ export const Primary: Story = {
     labelAccessor: 'name',
     valueAccessor: 'value',
     optionsList: [
-      { label: 'Option 1', value: '1', name: 'abcd' },
-      { label: 'Option 2', value: '2', name: '123' },
-      { label: 'Option 3', value: '3', name: '456' },
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+        name: 'fireflink',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+        name: 'local',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+        name: 'browser stack',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+        name: 'lambda test',
+      },
     ],
   },
 };
@@ -31,9 +49,22 @@ export const WithError: Story = {
   args: {
     label: 'Select',
     optionsList: [
-      { label: 'Option 1', value: '1' },
-      { label: 'Option 2', value: '2' },
-      { label: 'Option 3', value: '3' },
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
     ],
     errorMsg: 'Please select a option',
   },
@@ -43,9 +74,22 @@ export const WithoutLabel: Story = {
   args: {
     showLabel: false,
     optionsList: [
-      { label: 'Option 1', value: '1' },
-      { label: 'Option 2', value: '2' },
-      { label: 'Option 3', value: '3' },
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
     ],
   },
 };
@@ -69,11 +113,24 @@ export const Disable: Story = {
 export const WithInitialValue: Story = {
   args: {
     label: 'Select',
-    selectedOption: { label: 'Option 2', value: '2' },
+    selectedOption: { label: 'Option 2', value: 'Option 2' },
     optionsList: [
-      { label: 'Option 1', value: 'Option 1' },
-      { label: 'Option 2', value: 'Option 2' },
-      { label: 'Option 3', value: 'Option 3' },
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
     ],
   },
 };
@@ -81,14 +138,27 @@ export const WithInitialValue: Story = {
 export const OptionSelection: Story = {
   render: () => {
     const optionsList = [
-      { label: 'Option 1', value: 'Option 1' },
-      { label: 'Option 2', value: 'Option 2' },
-      { label: 'Option 3', value: 'Option 3' },
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
     ];
 
     const [selectedOption, setSelectedOption] = useState<Option>({
-      label: 'Option 2',
-      value: '2',
+      label: 'fire-flink-LIC3179',
+      value: 'fire-flink-LIC3179',
     });
 
     const handleChange = (option: Option) => {
@@ -155,4 +225,77 @@ export const CustomJSX: Story = {
   },
 };
 
+export const updateOptionFromOutside: Story = {
+  render: () => {
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: 'fire-flink-LIC4900-onPrem',
+      value: 'fire-flink-LIC4900-onPrem',
+    });
+
+    const optionsList = [
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
+    ];
+
+    const handleChange = (option: Option) => {
+      setSelectedOption(option);
+    };
+
+    const radioOptions = [
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
+    ];
+    const [selectedRadioOption, setSelectedRadioOption] = useState('option2');
+    const handleOptionChange = (option: Option) => {
+      setSelectedRadioOption(option.value);
+      setSelectedOption(option);
+    };
+
+    return (
+      <div>
+        <Select
+          optionsList={optionsList}
+          selectedOption={selectedOption}
+          onChange={handleChange}
+          showLabel={false}
+        />
+        <RadioGroup
+          selectedValue={selectedRadioOption}
+          onChange={handleOptionChange}
+          name="option"
+          options={radioOptions}
+        />
+      </div>
+    );
+  },
+};
+
 export default meta;

package/src/components/Select/Select.tsx

@@ -251,6 +251,12 @@ const Select = ({
     }
   }, []);
 
+  useEffect(() => {
+    if (!checkEmpty(selectedOption.label)) {
+      onSelectOptionSelector(selectedOption);
+    }
+  }, [selectedOption]);
+
   const applyActiveOptionClasses = !isInputFocused && Boolean(option);
 
   return (
@@ -312,39 +318,41 @@ const Select = ({
             color={iconColor}
           />
         )}
-        <fieldset
-          className={classNames('ff-select-fieldset', {
-            'ff-select-fieldset--no-label': !showLabel,
-            'ff-select-fieldset--default': !isInputFocused,
-            'ff-select-fieldset--active': isInputFocused,
-            'ff-select-fieldset--option': applyActiveOptionClasses,
-            'ff-select-fieldset--error': errorMsg,
-            'ff-select-fieldset--border-radius': !borderRadius,
-            'ff-select-fieldset--no-border': !showBorder,
-          })}
-        >
-          {showLabel && (
-            <legend
-              className={classNames('ff-select-legend', {
-                'ff-select-legend--default': !isInputFocused,
-                'ff-select-legend--active': isInputFocused,
-                'ff-select-legend--option': applyActiveOptionClasses,
-                'ff-select-legend--error': errorMsg,
-              })}
-            >
-              {required && (
-                <Typography
-                  fontSize={8}
-                  color={'var(--error-light)'}
-                  className="ff-select-legend--required"
-                >
-                  *
-                </Typography>
-              )}
-              {label}
-            </legend>
-          )}
-        </fieldset>
+        {(!checkEmpty(option) || showOptions) && (
+          <fieldset
+            className={classNames('ff-select-fieldset', {
+              'ff-select-fieldset--no-label': !showLabel,
+              'ff-select-fieldset--default': !isInputFocused,
+              'ff-select-fieldset--active': isInputFocused,
+              'ff-select-fieldset--option': applyActiveOptionClasses,
+              'ff-select-fieldset--error': errorMsg,
+              'ff-select-fieldset--border-radius': !borderRadius,
+              'ff-select-fieldset--no-border': !showBorder,
+            })}
+          >
+            {showLabel && (
+              <legend
+                className={classNames('ff-select-legend', {
+                  'ff-select-legend--default': !isInputFocused,
+                  'ff-select-legend--active': isInputFocused,
+                  'ff-select-legend--option': applyActiveOptionClasses,
+                  'ff-select-legend--error': errorMsg,
+                })}
+              >
+                {required && (
+                  <Typography
+                    fontSize={8}
+                    color={'var(--error-light)'}
+                    className="ff-select-legend--required"
+                  >
+                    *
+                  </Typography>
+                )}
+                {label}
+              </legend>
+            )}
+          </fieldset>
+        )}
       </div>
 
       {errorMsg && (

package/src/components/Table/Table.scss

@@ -24,10 +24,10 @@
       th {
         @extend .fontMd;
         border-bottom: 1px solid var(--slider-table-color);
-        text-transform: uppercase;
       }
-      th:first-child {
-        div {
+      th{
+        .ff-label-checkbox-container{
+          display: flex;
           align-items: center;
           .ff-table-checkbox {
             padding-right: 8px;
@@ -66,8 +66,9 @@
           cursor: pointer;
         }
       }
-      td:first-child {
-        div {
+      td{
+        .ff-data-checkbox-container {
+          display: flex;
           align-items: center;
           .ff-table-checkbox {
             padding-right: 8px;

package/src/components/Table/Table.stories.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import Table from './Table';
-import Icon from '../Icon';
 
 const meta: Meta<typeof Table> = {
   title: 'Components/Table',
@@ -160,14 +159,6 @@ const columnsData = [
       return (
         <div title={e.value} style={{ color: 'blue' }}>
           {e.value}
-          <div style={{ textAlign: 'right' }} className="icon-container">
-            <span>
-              <Icon name="edit_icon" height={12} width={12} />
-            </span>
-            <span>
-              <Icon name="delete" height={12} width={12} />
-            </span>
-          </div>
         </div>
       );
     },

package/src/components/Table/Table.tsx

@@ -89,7 +89,7 @@ const Table = ({
                 key={column.header}
                 style={{ width: column?.width }}
               >
-                <div>
+                <div className='ff-label-checkbox-container'>
                   {index === 0 && withCheckbox && (
                     <span className="ff-table-checkbox">
                       <Checkbox
@@ -129,7 +129,7 @@ const Table = ({
                         'clickable-cell': column.onClick,
                       })}
                     >
-                      <Typography as="div" color={tableDataTextColor}>
+                      <Typography as="div" color={tableDataTextColor} className='ff-data-checkbox-container'>
                         {i === 0 && withCheckbox && (
                           <span className="ff-table-checkbox">
                             <Checkbox

package/src/components/TableTree/TableTree.scss

@@ -107,7 +107,7 @@
 
   .ff-node-li {
     position: relative;
-    --indent-size: 16px;
+    --indent-size: 18px;
     --total-children-height: var(--node-height);
 
     td:first-child {

package/src/components/TableTree/TableTree.tsx

@@ -10,6 +10,8 @@ import './TableTree.scss';
 import RadioButton from '../RadioButton';
 import Typography from '../Typography';
 
+import Arrow from '../../assets/icons/arrows_down_icon.svg?react';
+
 interface ColumnDataProps {
   name: string;
   accessor: string;
@@ -146,7 +148,7 @@ const TableTree = ({
                       isExpanded ? 'ff-expanded' : 'ff-collapsed'
                     }`}
                   >
-                    <Icon name="arrows_down_icon" height={12} width={12} />
+                    <Arrow />
                   </span>
                 )}
               </span>

package/src/components/Toastify/Toastify.stories.tsx

@@ -25,27 +25,46 @@ export const Controlled: Story = {
   args: {
     ...defaultArgs,
   },
-  // import { Toastify, toast } from 'pixel-react';
   render: () => (
-    <>
+    
+    /*
+      Note:-
+      import { Toastify, toast } from 'pixel-react';
+    */
+
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
       {/* Render Toastify to allow toast notifications */}
       <Toastify />
 
       {/* Button to trigger a toast notification */}
       <Button
         variant="primary"
+        label="Show Success Toast"
         onClick={() => toast.success('Your request was successful!')}
-      >
-        Show Success Toast
-      </Button>
-      <br/>
+      />
       <Button
         variant="delete"
+        label="Show Error Toast"
         onClick={() => toast.error('Something went wrong!')}
-      >
-        Show Error Toast
-      </Button>
-    </>
+      />
+      <Button
+        variant="warning"
+        label="Show Object Toast"
+        onClick={() =>
+          toast.warning('Something went wrong!', { a: 'hi', b: '5', c: 10 })
+        }
+      />
+      <Button
+        variant="warning"
+        label="Show Array Toast"
+        onClick={() => toast.warning('Something went wrong!', ['1', 4, 'hi'])}
+      />
+      <Button
+        variant="warning"
+        label="Show function Toast"
+        onClick={() => toast.warning('Something went wrong!', () => {})}
+      />
+    </div>
   ),
 };