pixel-react 1.5.5 → 1.5.6

package/src/components/MultiSelect/MultiSelect.tsx

@@ -38,7 +38,9 @@ const ChipElement = ({
             title={label?.length > 25 ? label : ''}
             zIndex={zIndex + 1}
           >
-            {truncateText(label, 25)}
+            <Typography fontSize={10} lineHeight={'14px'} className="stye">
+              {truncateText(label, 25)}
+            </Typography>
           </Tooltip>
         </span>
         {!disableChip && (
@@ -342,6 +344,7 @@ const MultiSelect = ({
                     (isFieldSkipped && required),
                   'default-label': !isOpen && !selectedOptions?.length,
                 })}
+                required={required}
                 children={label}
               />
             ) : (
@@ -355,26 +358,10 @@ const MultiSelect = ({
             )}
 
             {!withSelectButton && (
-              <div className='ff-multiselect-chip-parent-container'>
-                <div className="ff-multiselect-chip-container">
-                  {displayCount ? (
-                    <>
-                      {selectedOptions
-                        .slice(0, maxVisibleChips)
-                        .map((option) => (
-                          <ChipElement
-                            zIndex={zIndex}
-                            key={getLabel(option, labelAccessor)}
-                            label={getLabel(option, labelAccessor) || ''}
-                            onChipCloseClick={(e) =>
-                              handleChipCloseClick(option, e)
-                            }
-                            disableChip={option?.isDisabled || false}
-                          />
-                        ))}
-                    </>
-                  ) : (
-                    selectedOptions.map((option) => (
+              <div className="ff-multiselect-chip-container">
+                {displayCount ? (
+                  <>
+                    {selectedOptions.slice(0, maxVisibleChips).map((option) => (
                       <ChipElement
                         zIndex={zIndex}
                         key={getLabel(option, labelAccessor)}
@@ -384,38 +371,51 @@ const MultiSelect = ({
                         }
                         disableChip={option?.isDisabled || false}
                       />
-                    ))
-                  )}
-                  <div className="ff-multiselect-input-container">
-                    <input
-                      value={searchedKeyword}
-                      type={type}
-                      autoComplete="off"
-                      placeholder={placeholderForSearching}
-                      ref={inputRef}
-                      onChange={handleSearch}
-                      onKeyDown={handleKeyEnter}
-                      id="input-ele"
-                      className="ff-select-input"
-                      style={{
-                        display:
-                          isOpen || selectedOptions.length ? 'inherit' : 'none',
-                      }}
+                    ))}
+                  </>
+                ) : (
+                  selectedOptions.map((option) => (
+                    <ChipElement
+                      zIndex={zIndex}
+                      key={getLabel(option, labelAccessor)}
+                      label={getLabel(option, labelAccessor) || ''}
+                      onChipCloseClick={(e) => handleChipCloseClick(option, e)}
+                      disableChip={option?.isDisabled || false}
                     />
-                  </div>
-                </div>
-                {hiddenCount > 0 && displayCount && (
-                  <div
-                    className="ff-multiselect-more-chip"
-                    onClick={toggleDropdown}
-                  >
-                    +{hiddenCount}
-                  </div>
+                  ))
                 )}
+                <div className="ff-multiselect-input-container">
+                  <input
+                    value={searchedKeyword}
+                    type={type}
+                    autoComplete="off"
+                    placeholder={placeholderForSearching}
+                    ref={inputRef}
+                    onChange={handleSearch}
+                    onKeyDown={handleKeyEnter}
+                    id="input-ele"
+                    className="ff-select-input"
+                    style={{
+                      display:
+                        isOpen || selectedOptions.length ? 'inherit' : 'none',
+                    }}
+                  />
+                </div>
               </div>
             )}
           </div>
-
+          {hiddenCount > 0 && displayCount && (
+            <div className="ff-multiselect-more-chip" onClick={toggleDropdown}>
+              <Typography
+                fontSize={12}
+                fontWeight="semi-bold"
+                lineHeight="16px"
+                color="var(--brand-color)"
+              >
+                +{hiddenCount}
+              </Typography>
+            </div>
+          )}
           <div
             onClick={(e) => {
               toggleDropdown(e);

package/src/components/Select/Select.scss

@@ -38,7 +38,17 @@
     box-sizing: border-box;
 
     &:hover {
-      @include select-state-style(var(--ff-select-brand-color));
+      border-color: var(--ff-select-brand-color);
+
+      .ff-select-labels {
+        color: var(--ff-select-default-color);
+      }
+
+      .ff-select-arrows-wrapper {
+        .ff-select-arrows {
+          @include svg-path-style(var(--ff-select-text-hover-color));
+        }
+      }
     }
 
     .ff-select-inputField {

package/src/components/Select/Select.tsx

@@ -216,8 +216,8 @@ const Select: FC<SelectProps> = ({
       {errorMsg && (
         <Typography
           as="div"
-          lineHeight="12px"
-          fontSize={8}
+          lineHeight="15px"
+          fontSize={10}
           color="var(--error_light)"
           className="ff-select-error-msg"
         >

package/src/components/StateDropdown/StateDropdown.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import StateDropdown from './StateDropdown';
+import React from 'react';
 
 const meta: Meta<typeof StateDropdown> = {
   title: 'Components/StateDropdown',
@@ -23,6 +24,8 @@ export const Disable: Story = {
     isApprovePage: false,
     disabled: true,
     userHasOnlyViewAccess: true,
+    showBorder: true,
+    height:24,
   },
 };
 
@@ -91,6 +94,8 @@ export const NewState: Story = {
         disabled={false}
         isOnlyReviewer={false}
         userHasOnlyViewAccess={false}
+        showBorder={true}
+        height={24}
       />
     );
   },

package/src/components/StateDropdown/StateDropdown.tsx

@@ -11,6 +11,9 @@ const StateDropdown = ({
   disabled = false,
   isOnlyReviewer = false,
   userHasOnlyViewAccess = false,
+  showBorder=true,
+  height=24,
+  zIndex=100,
 }: StateDropdownProps) => {
   let currentState = value.toUpperCase();
   let content;
@@ -129,9 +132,11 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={false}
+        showBorder={showBorder}
         disableInput={true}
-        height={24}
+        height={height}
+        selectedOptionColor={'var(--brand-color'}
+        optionZIndex={zIndex}
       />
     ) : (
       <Select
@@ -141,9 +146,11 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={false}
+        showBorder={showBorder}
         disableInput={true}
-        height={24}
+        height={height}
+        selectedOptionColor={'var(--brand-color'}
+        optionZIndex={zIndex}
       />
     );
   } else if (
@@ -158,9 +165,11 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={false}
+        showBorder={showBorder}
         disableInput={true}
-        height={24}
+        height={height}
+        selectedOptionColor={'var(--brand-color'}
+        optionZIndex={zIndex}
       />
     );
   } else if (currentState === 'APPROVED') {
@@ -172,9 +181,11 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={false}
+        showBorder={showBorder}
         disableInput={true}
-        height={24}
+        height={height}
+        selectedOptionColor={'var(--brand-color'}
+        optionZIndex={zIndex}
       />
     );
   } else if (currentState === 'REJECTED' && userHasOnlyViewAccess) {
@@ -186,9 +197,11 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={false}
+        showBorder={showBorder}
         disableInput={true}
-        height={24}
+        height={height}
+        selectedOptionColor={'var(--brand-color'}
+        optionZIndex={zIndex}
       />
     );
   } else if (currentState === 'NEW' && userHasOnlyViewAccess) {
@@ -200,9 +213,11 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={false}
+        showBorder={showBorder}
         disableInput={true}
-        height={24}
+        height={height}
+        selectedOptionColor={'var(--brand-color'}
+        optionZIndex={zIndex}
       />
     );
   } else {

package/src/components/StateDropdown/StateDropdownTypes.tsx

@@ -17,5 +17,11 @@ export interface StateDropdownProps{
     userHasOnlyViewAccess:boolean;
 
     handleStateValueClick:()=>void;
+
+    showBorder?:boolean;
+
+    height?:number;
+
+    zIndex?:number;
 }
 

package/src/components/TableTree/TableTree.scss

@@ -108,17 +108,21 @@
       padding: 0 8px;
       white-space: nowrap;
       text-overflow: ellipsis;
-
       &:first-child {
-        position: sticky;
-
         padding-left: calc(var(--level) * var(--indent-size));
         height: 32px;
-        position: sticky; /* Make first td sticky */
-        left: 0;
-        z-index: 10; /* Ensure it stays on top of the other cells */
-        background-color: var(--slider-table-color);
-        // Vertical line connecting the node to the parent
+        z-index: 0;
+      }
+
+      .first-div {
+        background-color: white;
+        display: flex;
+        width: 100%;
+        height: 32px;
+
+        &:hover {
+          background-color: var(--hover-color);
+        }
         &::before {
           content: '';
           position: absolute;
@@ -126,7 +130,6 @@
           left: calc(var(--level) * var(--indent-size) - 4px);
           width: 1px;
           height: calc(var(--total-children-height));
-          // background-color: var(--tree-connecting-lines-color);
           background-color: var(--tree-connecting-lines-color);
           z-index: 9999;
         }
@@ -155,15 +158,14 @@
       content: none;
     }
   }
-
-  th:first-child,
-  td:first-child {
-    position: sticky;
-    left: 0;
-  }
 }
 
 .ff-title-action-container {
   display: none;
   align-items: center;
 }
+th:first-child,
+td:first-child {
+  position: sticky;
+  left: 0;
+}

package/src/components/TableTree/TableTree.tsx

@@ -169,46 +169,48 @@ const TableTree = ({
         if (column.accessor === 'title') {
           return (
             <td className={`ff-title-container ${isLast ? 'ff-is-last' : ''}`}>
-              <span className="ff-toggle-folder" onClick={handleToggleExpand}>
-                {node.folder && (
-                  <span
-                    className={`ff-toggle-arrow-icon ${
-                      isExpanded ? 'ff-expanded' : 'ff-collapsed'
-                    }`}
-                  >
-                    <Arrow />
-                  </span>
-                )}
-              </span>
-
-              <div
-                className="ff-title"
-                style={{ fontWeight: node.folder ? 600 : 400 }}
-                onClick={(event) => onClick(event, node)}
-              >
-                {select === 'checkbox' && (
-                  <Checkbox
-                    checked={selected.includes(node.key)}
-                    onChange={(e) => handleCheckBoxChange(e, node)}
-                  />
-                )}
-                {select === 'radio' && (
-                  <RadioButton
-                    name={node.title}
-                    value={node.key}
-                    onChange={(e) => handleCheckBoxChange(e, node)}
-                  />
-                )}
-
-                <Typography className="ff-title-label" fontWeight="medium">
-                  {prepareData(node, column)}
-                </Typography>
-
-                {column.actions && (
-                  <div className="ff-title-action-container">
-                    {column.actions(node)}
-                  </div>
-                )}
+              <div className="first-div">
+                {' '}
+                <span className="ff-toggle-folder" onClick={handleToggleExpand}>
+                  {node.folder && (
+                    <span
+                      className={`ff-toggle-arrow-icon ${
+                        isExpanded ? 'ff-expanded' : 'ff-collapsed'
+                      }`}
+                    >
+                      <Arrow />
+                    </span>
+                  )}
+                </span>
+                <div
+                  className="ff-title"
+                  style={{ fontWeight: node.folder ? 600 : 400 }}
+                  onClick={(event) => onClick(event, node)}
+                >
+                  {select === 'checkbox' && (
+                    <Checkbox
+                      checked={selected.includes(node.key)}
+                      onChange={(e) => handleCheckBoxChange(e, node)}
+                    />
+                  )}
+                  {select === 'radio' && (
+                    <RadioButton
+                      name={node.title}
+                      value={node.key}
+                      onChange={(e) => handleCheckBoxChange(e, node)}
+                    />
+                  )}
+
+                  <Typography className="ff-title-label" fontWeight="medium">
+                    {prepareData(node, column)}
+                  </Typography>
+
+                  {column.actions && (
+                    <div className="ff-title-action-container">
+                      {column.actions(node)}
+                    </div>
+                  )}
+                </div>
               </div>
             </td>
           );

package/src/index.ts

@@ -64,6 +64,7 @@ import StatusCard from './components/StatusCard';
 import VariableDropdown from './components/Editor/VariableDropdown';
 
 import LineChart from './components/Charts/LineChart';
+import DownloadClient from './components/DownloadClient/DownloadClient';
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
 import {
@@ -157,6 +158,7 @@ export {
   ToggleSwitch,
   Avatar,
   VariableDropdown,
+  DownloadClient,
   // utils exports
   checkEmpty,
   getExtension,