pixel-react 1.2.6 → 1.2.8

package/src/components/ModulesChip/ModuleChip.tsx

@@ -10,14 +10,14 @@ const ModuleChip: React.FC<ModuleChipProps> = ({
 }) => {
   return (
     <div
-      className={classNames('ff-expandable-chip-menu', {
-        'ff-expandable-chip-menu--active': isActive,
+      className={classNames('ff-Module-chip', {
+        'ff-Module-chip--active': isActive,
       })}
       onClick={onClick}
     >
       <div
-        className={classNames(`ff-label-chip `, {
-          'ff-label-chip--active': isActive,
+        className={classNames(`ff-Module-label-chip `, {
+          'ff-Module-label-chip--active': isActive,
         })}
       >
         <Typography fontSize={'14px'} fontWeight="regular" lineHeight="21px">

package/src/components/MultiSelect/Dropdown.tsx

@@ -6,6 +6,7 @@ import { ThemeContext } from '../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';
 import Button from '../Button';
 import Typography from '../Typography';
+import Checkbox from '../Checkbox';
 
 const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
   (
@@ -80,9 +81,11 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
                 role="option"
                 className={`dropdown-option-container`}
                 key={info.label}
-                onClick={() => handleOptionChange(info, !info.isChecked)}
+                onClick={() =>
+                  !info?.isDisabled && handleOptionChange(info, !info.isChecked)
+                }
               >
-                <input type="checkbox" checked={info.isChecked} readOnly />
+                <Checkbox checked={info.isChecked}  disabled={info?.isDisabled}/>
                 <Typography
                   as="span"
                   className="dropdown-option-label"

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;
@@ -89,12 +91,15 @@
             @extend .fontXs;
             line-height: 14px;
             color: var(--tooltip-bg-color);
-            &.pr-2 {
+            &.label-padding {
               padding: 5px 2px;
             }
           }
           .ff-multiselect-chip-close-icon {
+            color: var(--brand-color);
             cursor: pointer;
+            padding-right: 0px;
+            padding-left: 0px;
           }
         }
         .ff-multiselect-input-container {
@@ -114,15 +119,15 @@
           }
         }
       }
-      .ff-multiselect-more-chip {
-        display: flex;
-        align-items: center;
-        width: 1.2rem;
-        @extend .fontSm;
-        font-weight: 600;
-        line-height: 16px;
-        color: var(--brand-color);
-      }
+    }
+    .ff-multiselect-more-chip {
+      display: flex;
+      align-items: center;
+      width: 1rem;
+      @extend .fontSm;
+      font-weight: 600;
+      line-height: 16px;
+      color: var(--brand-color);
     }
     &__toggle {
       display: flex;

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

@@ -6,26 +6,40 @@ import Dropdown from './Dropdown';
 import Icon from '../Icon';
 import { MultiSelectProps, Option } from './MultiSelectTypes';
 import Typography from '../Typography';
+import Tooltip from '../Tooltip';
 
 const ChipElement = ({
   label,
   onChipCloseClick,
+  disableChip,
 }: {
   label: string;
   onChipCloseClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+  disableChip: boolean;
 }) => {
   if (label) {
     return (
       <div className="ff-multiselect-chip">
-        <span className="ff-multiselect-chip-label"> {label}</span>
-        <Icon
-          color="#71347b"
-          className="ff-multiselect-chip-close-icon"
-          onClick={onChipCloseClick}
-          name="close_pill"
-          height={13} //as per the latest chnages in icon container we have to give this
-          width={13}
-        />
+        <span
+          className={`ff-multiselect-chip-label ${
+            disableChip && 'label-padding'
+          }`}
+        >
+          <Tooltip
+            placement="bottom"
+            title={label?.length > 25 ? label : ''}
+            zIndex={101}
+          >
+            {label?.length > 25 ? label?.slice(0, 25) + '...' : label}
+          </Tooltip>
+        </span>
+        {!disableChip && (
+          <Icon
+            className="ff-multiselect-chip-close-icon"
+            onClick={onChipCloseClick}
+            name="close_pill"
+          />
+        )}
       </div>
     );
   }
@@ -46,12 +60,10 @@ const MultiSelect = ({
   withSelectButton = false,
   onSelect = () => {},
   displayCount = false,
+  placeholderForSearching = 'Search',
 }: MultiSelectProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [allOptions, setAllOptions] = useState(options);
-  useEffect(() => {
-    setAllOptions(options);
-  }, [options]);
 
   const [searchedKeyword, setSearchedKeyword] = useState('');
   const [isSelectFocusedOnce, setIsSelectFocusedOnce] =
@@ -175,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);
@@ -204,6 +224,8 @@ const MultiSelect = ({
       }));
       setAllOptions(initializeOptions);
     }
+  }, [options]);
+  useEffect(() => {
     const handleClickAnywhere = (event: MouseEvent) => {
       if (
         dropdownWrapper.current &&
@@ -229,6 +251,7 @@ const MultiSelect = ({
       document.body.style.overflow = 'auto';
     };
   }, []);
+
   return (
     <div
       ref={selectWrapper}
@@ -250,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 ? (
@@ -262,6 +286,7 @@ const MultiSelect = ({
                     key={option?.label}
                     label={option?.label || ''}
                     onChipCloseClick={(e) => handleChipCloseClick(option, e)}
+                    disableChip={option?.isDisabled || false}
                   />
                 ))}
               </>
@@ -271,6 +296,7 @@ const MultiSelect = ({
                   key={option?.label}
                   label={option?.label || ''}
                   onChipCloseClick={(e) => handleChipCloseClick(option, e)}
+                  disableChip={option?.isDisabled || false}
                 />
               ))
             )}
@@ -279,7 +305,7 @@ const MultiSelect = ({
                 value={searchedKeyword}
                 type={type}
                 autoComplete="off"
-                placeholder="search..."
+                placeholder={placeholderForSearching}
                 ref={inputRef}
                 onChange={handleSearch}
                 onKeyDown={handleKeyEnter}
@@ -291,16 +317,13 @@ const MultiSelect = ({
                 }}
               />
             </div>
-            {hiddenCount > 0 && (
-              <div
-                className="ff-multiselect-more-chip"
-                onClick={toggleDropdown}
-              >
-                +{hiddenCount}
-              </div>
-            )}
           </div>
         </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/MultiSelect/MultiSelectTypes.ts

@@ -20,6 +20,7 @@ interface MultiSelectProps {
   withSelectButton?: boolean;
   onSelect?: () => void;
   displayCount?: boolean;
+  placeholderForSearching?: string;
 }
 
-export { Option, MultiSelectProps };
+export { Option, MultiSelectProps };

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>
       );
     },