pixel-react 1.7.4 → 1.7.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.7.4",
+  "version": "1.7.6",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss

@@ -111,6 +111,10 @@
     border-collapse: collapse;
     text-align: left;
 
+    .ff-legend-table-thead {
+      position: static; 
+      top: auto;
+    } 
     .ff-table-header {
       @extend .fontXs;
       font-weight: bold;

package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx

@@ -314,7 +314,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
         return (
           <div className="ff-legend-table-wrapper">
             <table className="ff-legend-table">
-              <thead>
+              <thead className='ff-legend-table-thead'>
                 <tr>
                   <th className="ff-table-header" style={{ width: tableWidth }}>
                     Name

package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx

@@ -84,7 +84,7 @@ WithInitialValue.args = {
 export const DropdownOnHash: Story = {
   render: () => {
     const [hashInputValue, setHashInputValue] = useState<
-      dynamicObject | undefined
+      dynamicObject | null
     >();
     const testData = [
       {

package/src/components/ConditionalDropdown/types.ts

@@ -26,7 +26,7 @@ export interface ConditionalDropdownProps {
   /**
    * Function storing and updating the inputValue state
    */
-  setHashInputValue?:(value: dynamicObject | undefined) => void;
+  setHashInputValue?:(value: File |dynamicObject | null) => void;
 
   /**
    * List of variables

package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx

@@ -105,21 +105,21 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
 
   return (
     <th
-      style={{ minWidth: `${columnWidth}px`, position: 'sticky' }} //Dynamic value, Inline Styling required
       className={classNames('ff-spreadsheet-header', {
         'ff-spreadsheet-header--selected': selected,
       })}
+      style={{ minWidth: `${columnWidth}px` }} //Dynamic value, Inline Styling required
       onClick={handleClick}
       onContextMenu={contextClick}
       tabIndex={0}
     >
-      <div      
-      onClick={handleClick}
-      onContextMenu={contextClick}
-      tabIndex={0}>
-      </div>
-      <Typography fontWeight='medium'>
-      {label !== undefined ? label : columnIndexToLabel(column)}
+      <div
+        onClick={handleClick}
+        onContextMenu={contextClick}
+        tabIndex={0}
+      ></div>
+      <Typography fontWeight="medium">
+        {label !== undefined ? label : columnIndexToLabel(column)}
       </Typography>
       <div
         onMouseDown={onMouseDown}

package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx

@@ -103,14 +103,10 @@ const RowIndicator: Types.RowIndicatorComponent = ({
 
   return (
     <th
-      style={{
-        height: `${rowHeight}px`,
-        minWidth: '60px',
-        position: 'relative',
-      }} //Dynamic value, Inline Styling required
       className={classNames('ff-spreadsheet-header', {
         'ff-spreadsheet-header--selected': selected,
       })}
+      style={{ height: `${rowHeight}px`, minWidth: '60px' }} //Dynamic value, Inline Styling required
       onClick={handleClick}
       onContextMenu={contextClick}
       tabIndex={0}

package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss

@@ -93,20 +93,21 @@
     text-align: center;
     z-index: 1000;
     position: sticky;
+    top: 0;
+    left: 0;
   }
 
   .ff-spreadsheet-corner-header {
     position: fixed;
-    z-index: 2000;
+    z-index: 3000;
   }
 
   .ff-spreadsheet-row-header {
-    // position: relative;
     height: 34px;
   }
 
   .corner-header {
-    border: 0.1px solid var(--border-color);
+    border: 1px solid var(--border-color);
     background-color: var(--header-background-color);
     position: absolute;
     display: flex;

package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import './ExcelToolBar.scss';
 import MenuOption from '../../MenuOption';
 import Tooltip from '../../Tooltip';
@@ -69,6 +69,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
   };
 
   const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
+  const underLineMenuRef = useRef<HTMLSpanElement>(null);
+  const borderMenuRef = useRef<HTMLSpanElement>(null);
 
   useEffect(() => {
     setCellStyle(cell?.style || basicStyle);
@@ -315,19 +317,22 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
               onClick={() => setUnderlineType(data, underLine, true)}
               name={getUnderlineIcon()}
             />
-            <MenuOption
-              iconName="arrow_down"
-              zIndex={1000}
-              iconSize={12}
-              options={underlineTypeIcon}
-              tooltipPlacement="top"
-              variant="light"
-              onOptionClick={(e) => {
-                let selectedValue = e.value as string;
-                setUnderlineType(data, selectedValue, true);
-                setUnderLine(selectedValue);
-              }}
-            />
+            <span ref={underLineMenuRef}>
+              <MenuOption
+                targetRef={underLineMenuRef}
+                iconName="arrow_down"
+                zIndex={1000}
+                iconSize={12}
+                options={underlineTypeIcon}
+                tooltipPlacement="top"
+                variant="light"
+                onOptionClick={(e) => {
+                  let selectedValue = e.value as string;
+                  setUnderlineType(data, selectedValue, true);
+                  setUnderLine(selectedValue);
+                }}
+              />
+            </span>
           </div>
         </Tooltip>
       </div>
@@ -391,19 +396,22 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
               onClick={() => setBorderType(data, border, 'black')}
               name={getBorderIcon()}
             />
-            <MenuOption
-              iconName="arrow_down"
-              iconSize={12}
-              zIndex={1000}
-              options={borderTypeIcon}
-              tooltipPlacement="top"
-              variant="light"
-              onOptionClick={(e) => {
-                let selectedValue = e.value as string;
-                setBorderType(data, selectedValue, 'black');
-                setBorder(selectedValue);
-              }}
-            />
+            <span ref={borderMenuRef}>
+              <MenuOption
+                iconName="arrow_down"
+                targetRef={borderMenuRef}
+                iconSize={12}
+                zIndex={1000}
+                options={borderTypeIcon}
+                tooltipPlacement="top"
+                variant="light"
+                onOptionClick={(e) => {
+                  let selectedValue = e.value as string;
+                  setBorderType(data, selectedValue, 'black');
+                  setBorder(selectedValue);
+                }}
+              />
+            </span>
           </div>
         </Tooltip>
       </div>

package/src/components/FileDropzone/Dropzone.tsx

@@ -24,6 +24,7 @@ const Dropzone: FC<DroppableProps> = ({
   setSelectedFile,
   handleRemoveFile,
   isDisable,
+  setShowDrawer,
 }) => {
   const isWebServiceFile = selectedFile?.name && isWebServiceFileDropZone;
   return (
@@ -42,6 +43,8 @@ const Dropzone: FC<DroppableProps> = ({
           onFileRemoveClick={handleRemoveFile}
           onFileReplaceClick={setSelectedFile}
           setSelectedFile={setSelectedFile}
+          selectedRadioOption={selectedRadioOption}
+          setShowDrawer={setShowDrawer}
         />
       ) : (
         <>

package/src/components/FileDropzone/FileDropzone.scss

@@ -4,6 +4,12 @@
   gap: $gap;
 }
 
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 @mixin center {
   display: grid;
   place-items: center;
@@ -160,4 +166,16 @@
 .ff-disable-file-dropzone-wrapper {
   opacity: 0.5;
   cursor: not-allowed;
+}
+.footer_basic_button {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  @include flex-center;
+  justify-content: flex-end;
+  gap: 16px;
+  border-top: 1px solid var(--border-color);
+  padding: 4px 8px;
+  background-color: var(--primary-icon-color);
 }

package/src/components/FileDropzone/FileDropzone.stories.tsx

@@ -5,8 +5,10 @@ import Toaster from '../Toast';
 import { useState } from 'react';
 import { RadioOption } from './types';
 import Drawer from '../Drawer/Drawer';
-import Typography from '../Typography';
+import ConditionalDropdown from '../ConditionalDropdown/ConditionalDropdown';
 import './FileDropzone.scss';
+import { DynamicObj } from '../CreateVariable/types';
+import Button from '../Button';
 
 const meta: Meta<typeof FileDropzone> = {
   title: 'Components/FileDropzone',
@@ -107,8 +109,12 @@ export const WithRadioButton: Story = {
 
     const [selectedRadioOption, setSelectedRadioOption] =
       useState<RadioOption>();
-    const [selectedFile, setSelectedFile] = useState<File | null>(null);
-
+    const [selectedFile, setSelectedFile] = useState<File | DynamicObj | null>(
+      null
+    );
+    const [testDataSelectedFile, setTestDataSelectedFile] = useState<
+      DynamicObj | File | null
+    >(null);
 
     const drawerArgs = {
       primaryButtonProps: {
@@ -156,6 +162,42 @@ export const WithRadioButton: Story = {
       }, 2000);
     };
 
+    const testData = [
+      {
+        _id: '1',
+        name: 'File1.txt',
+        actualPath: '/documents/File1.txt',
+        searchKey: 'file1',
+        parentId: 'root',
+      },
+      {
+        _id: '2',
+        name: 'File2.doc',
+        actualPath: '/documents/File2.doc',
+        searchKey: 'file2',
+        parentId: 'root',
+      },
+      {
+        _id: '3',
+        name: 'Image1.png',
+        actualPath: '/images/Image1.png',
+        searchKey: 'image1',
+        parentId: 'folder1',
+      },
+      {
+        _id: '4',
+        name: 'Presentation.ppt',
+        actualPath: '/presentations/Presentation.ppt',
+        searchKey: 'presentation',
+        parentId: 'folder2',
+      },
+    ];
+
+    const handleSaveButton = () => {
+      setSelectedFile(testDataSelectedFile);
+      setShowModal(false);
+    };
+
     return (
       <>
         <FileDropzone
@@ -176,6 +218,7 @@ export const WithRadioButton: Story = {
           selectedFile={selectedFile}
           handleFileChange={handleFileChange}
           handleRemoveFile={handleRemoveFile}
+          setShowDrawer={setShowModal}
         />
         {showToaster && (
           <Toaster
@@ -185,18 +228,43 @@ export const WithRadioButton: Story = {
             toastMessage={'Max 5 files can be uploaded'}
           />
         )}
-        {selectedRadioOption?.value === 'Local File' &&
+        {selectedRadioOption?.value === 'Test Data' && (
           <Drawer
             {...drawerArgs}
             isOpen={showModal}
             onClose={() => setShowModal(false)}
-            isFooterRequired={true}
+            isFooterRequired={false}
             _isExpanded={false}
             size="small"
+            
           >
-            <Typography>Upload TestData Files Here</Typography>
+            <ConditionalDropdown
+              label="Select Path Using #"
+              placeholder="Enter # to search files"
+              isHash
+              dataFiles={testData}
+              dropdownWidth="auto"
+              setHashInputValue={setTestDataSelectedFile}
+            />
+            <div className="footer_basic_button">
+              <Button
+                type="button"
+                variant="secondary"
+                size="small"
+                onClick={() => setShowModal(false)}
+                label={'Cancel'}
+              />
+
+              <Button
+                type={'button'}
+                variant="primary"
+                size="small"
+                label={'Save'}
+                onClick={handleSaveButton}
+              />
+            </div>
           </Drawer>
-        }
+        )}
       </>
     );
   },

package/src/components/FileDropzone/FileDropzone.tsx

@@ -38,6 +38,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
   handleRemoveFile,
   isApiResponseError = false,
   isDisable = false,
+  setShowDrawer,
 }) => {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const {
@@ -131,6 +132,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
         handleRemoveFile={handleRemoveFile}
         setSelectedFile={setSelectedFile}
         isDisable={isDisable}
+        setShowDrawer={setShowDrawer}
       />
 
       {isWebServiceFileDropZone && (

package/src/components/FileDropzone/RadioFilePreview.tsx

@@ -8,14 +8,18 @@ import { useRef } from 'react';
 const RadioFilePreview: React.FC<RadioFilePreviewProps> = ({
   selectedFile,
   onFileRemoveClick,
-  onFileReplaceClick
+  onFileReplaceClick,
+  selectedRadioOption,
+  setShowDrawer,
 }) => {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   const handleReplaceClick = () => {
-    if (fileInputRef.current) {
-      fileInputRef.current.click();
+    if (selectedRadioOption?.value === 'Test Data') {
+      setShowDrawer?.(true);
+      return;
     }
+    fileInputRef.current?.click();
   };
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {

package/src/components/FileDropzone/types.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { DynamicObj } from '../CreateVariable/types';
 export interface RadioOption {
   label: string;
   value: string;
@@ -93,12 +94,12 @@ export interface FileDropzoneProps {
   /**
    *  Its the File Name of File Selected from Local File.
    **/
-  setSelectedFile?: (file: File | null) => void;
+  setSelectedFile?: (file: File | DynamicObj | null) => void;
 
   /**
    *  Its the File Name of File Selected from Local File.
    **/
-  selectedFile?: File | null;
+  selectedFile?: File | DynamicObj | null;
 
   /**
    *  Its the function which updates the Selected file from Local Directory.
@@ -120,6 +121,11 @@ export interface FileDropzoneProps {
    **/
   isDisable?: boolean;
 
+   /**
+   *  Its the boolean value setted when the replace is clicked for TestData radio option .
+   **/
+  setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
+
 }
 export interface FileState {
   accepted: File[];
@@ -176,11 +182,12 @@ export interface DroppableProps {
   selectedRadioOption?: Option, 
   radioOptions?: RadioOption[],
   handleOptionChange?: (option: RadioOption)=> void,
-  selectedFile?: File | null,
-  setSelectedFile?: (file: File | null) => void;
+  selectedFile?: File | DynamicObj | null,
+  setSelectedFile?: (file: File | DynamicObj | null) => void;
   handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   handleRemoveFile?: () => void;
   isDisable?: boolean;
+  setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
 }
 
 export interface FilePreviewProps {
@@ -196,4 +203,6 @@ export interface RadioFilePreviewProps {
   onFileRemoveClick?: () => void;
   onFileReplaceClick?: (file: File | null) => void;
   setSelectedFile?: (file: File | null) => void;
+  selectedRadioOption?: Option,
+  setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void
 }

package/src/components/MenuOption/MenuOption.stories.tsx

@@ -135,13 +135,12 @@ export const MenuOptionBottom: Story = {
     dropdownPlacement: 'down',
   },
   render: (args) => {
-    const moreRef = useRef<HTMLDivElement>(null);
     return (
-      <div ref={moreRef}>
+      <div id="more">
         <MenuOption
           {...args}
           options={options}
-          targetRef={moreRef}
+          targetRef={'more'}
           onOptionClick={handleOptionClick}
         />
       </div>

package/src/components/MenuOption/MenuOption.tsx

@@ -153,9 +153,15 @@ const MenuOption = ({
   };
 
   const calculateDims = () => {
-    if (targetRef?.current) {
-      const rect = targetRef.current.getBoundingClientRect();
+    let targetElement: HTMLElement | null = null;
+    if (typeof targetRef === 'string') {
+      targetElement = document.getElementById(targetRef);
+    } else if (targetRef && targetRef.current) {
+      targetElement = targetRef.current;
+    }
 
+    if (targetElement) {
+      const rect = targetElement.getBoundingClientRect();
       setMenuPosition({
         top: rect.top + window.scrollY,
         left: rect.left + window.scrollX,
@@ -164,6 +170,7 @@ const MenuOption = ({
       });
     }
   };
+
   return (
     <div className="ff-menu-option-container" ref={menuRef}>
       <Tooltip title={tooltipTitle} placement={tooltipPlacement}>

package/src/components/MenuOption/types.ts

@@ -208,7 +208,7 @@ interface MenuOptionProps {
    * @optional
    */
   optionCardVariant?: 'primary';
-  targetRef?: React.RefObject<HTMLElement>;
+  targetRef?: string | React.RefObject<HTMLElement>;
 }
 
 interface OptionProps {

package/src/components/PopUpModal/types.ts

@@ -5,12 +5,13 @@ export interface PopUpModalProps {
   titleMessage: string;
   subTitleMessage?: string;
   iconName: string;
-  modalMessage: string;
+  modalMessage: string | React.ReactNode;
+  secondaryMessage?: string | React.ReactNode;
   firstButtonLabel?: string;
   secondButtonLabel: string;
   buttonVariant: any;
   border: string;
-    popupWidth?:string,
+  popupWidth?: string;
   colorForTitleMessage?: string;
-  footerContent?:React.ReactNode;
+  footerContent?: React.ReactNode;
 }

package/src/components/Search/Search.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Search from './Search';
-import React,{ useState } from 'react';
+import React, { useState } from 'react';
 const meta: Meta<typeof Search> = {
   title: 'Components/Search',
   component: Search,
@@ -17,7 +17,6 @@ export const Default: Story = {
     const [searchValue, setSearchValue] = useState('');
 
     const handleSearch = (value: string) => {
-      alert(`Searching for: ${value}`);
       setSearchValue(value);
     };