pixel-react 1.4.1 → 1.4.2

package/src/components/Modal/Modal.tsx

@@ -58,9 +58,9 @@ const Modal: React.FC<ModalProps> = ({
       <div
         style={{
           boxShadow: boxShadow,
-          borderRadius: isHeaderDisplayed || isFooterDisplayed ? '12px' : '0px', // Apply based on conditions
+          borderRadius:  '12px' ,
         }}
-        className="ff-modal-container" // New container class for consistency
+        className="ff-modal-container"
       >
         <div
           className={classNames(

package/src/components/Select/Select.tsx

@@ -29,6 +29,7 @@ const Select: FC<SelectProps> = ({
   height = 32,
   width = '100%',
   onBlur = () => {},
+  disableInput = false
 }) => {
   const selectWidth = typeof width === 'number' ? `${width}px` : width;
 
@@ -176,6 +177,7 @@ const Select: FC<SelectProps> = ({
           style={{ zIndex: optionZIndex, color: selectedOptionColor }}
           disabled={disabled}
           onChange={handleChange}
+          readOnly={disableInput}
         />
         {optionsRequired && (
           <div

package/src/components/Select/types.ts

@@ -93,6 +93,11 @@ export interface SelectProps {
    *  Provide the onBlur functionality for the select
    */
   onBlur?: () => void;
+
+  /*
+  * Disable the select component input  
+  */
+  disableInput?: boolean;
 }
 
 export interface DrowdownPosition {

package/src/components/StateDropdown/StateDropdown.tsx

@@ -129,7 +129,9 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={true}
+        showBorder={false}
+        disableInput={true}
+        height={24}
       />
     ) : (
       <Select
@@ -139,7 +141,9 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={true}
+        showBorder={false}
+        disableInput={true}
+        height={24}
       />
     );
   } else if (
@@ -154,7 +158,9 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={true}
+        showBorder={false}
+        disableInput={true}
+        height={24}
       />
     );
   } else if (currentState === 'APPROVED') {
@@ -166,7 +172,9 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={true}
+        showBorder={false}
+        disableInput={true}
+        height={24}
       />
     );
   } else if (currentState === 'REJECTED' && userHasOnlyViewAccess) {
@@ -178,7 +186,9 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={true}
+        showBorder={false}
+        disableInput={true}
+        height={24}
       />
     );
   } else if (currentState === 'NEW' && userHasOnlyViewAccess) {
@@ -190,7 +200,9 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={true}
+        showBorder={false}
+        disableInput={true}
+        height={24}
       />
     );
   } else {

package/src/index.ts

@@ -80,6 +80,7 @@ import MultiRadialChart from './components/Charts/MultiRadialChart';
 import Editor from './components/Editor/Editor';
 import { getSequentialPayload } from './utils/getSequentialPayload/getSequentialPayload';
 import ConnectingBranch from './components/ConnectingBranch/ConnectingBranch';
+import { saveFileFromBlob } from './utils/downloadFile/saveFileFromBlob'
 
 export {
   Button,
@@ -163,4 +164,5 @@ export {
   getEncryptedData,
   truncateText,
   getSequentialPayload,
+  saveFileFromBlob,
 };

package/src/utils/downloadFile/saveFileFromBlob.stories.tsx

@@ -0,0 +1,62 @@
+import { saveFileFromBlob } from './saveFileFromBlob';
+import { Toastify, toast } from '../../components/Toastify/Toastify';
+
+export default {
+  title: 'Utils/saveFileFromBlob',
+  component: saveFileFromBlob,
+};
+
+export const Default = () => {
+  const testCases = [
+    {
+      blob: new Blob(['Hello, world!'], { type: 'text/plain' }),
+      filename: 'hello.txt',
+    },
+    {
+      blob: new Blob(['{ "key": "value" }'], { type: 'application/json' }),
+      filename: 'data.json',
+    },
+    {
+      blob: null,
+      filename: 'invalid.txt',
+      expectedError: 'Invalid Blob object',
+    },
+  ];
+
+  const handleDownload = (blob: Blob | null, filename: string) => {
+    try {
+      if (blob instanceof Blob) {
+        saveFileFromBlob(blob, filename);
+        toast.success(`File "${filename}" downloaded successfully!`);
+      } else {
+        throw new Error('Invalid Blob object');
+      }
+    } catch (error: any) {
+      toast.error(error.message);
+    }
+  };
+
+  return (
+    <>
+      <div>
+        <h1>saveFileFromBlob - Test Cases</h1>
+        {testCases.map(({ blob, filename, expectedError }, index) => (
+          <div key={index} style={{ marginBottom: '1rem' }}>
+            <button
+              onClick={() => handleDownload(blob as Blob, filename)}
+              style={{ marginRight: '1rem' }}
+            >
+              Download {filename}
+            </button>
+            {expectedError && (
+              <span style={{ color: 'red' }}>
+                Expected Error: {expectedError}
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
+      <Toastify />
+    </>
+  );
+};

package/src/utils/downloadFile/saveFileFromBlob.ts

@@ -0,0 +1,40 @@
+// saveFileFromBlob.ts
+
+/**
+ * Save a file from a Blob object.
+ * This utility handles downloading files in browsers, including IE support.
+ *
+ * @param blob - The Blob object representing the file.
+ * @param filename - The name of the file to save.
+ */
+interface NavigatorWithMsSaveBlob extends Navigator {
+  msSaveOrOpenBlob?: (_blob: Blob, _filename: string) => void;
+}
+
+export const saveFileFromBlob = (blob: Blob, filename: string): void => {
+  if (!blob || !(blob instanceof Blob)) {
+    console.error('Invalid Blob object');
+    throw new Error('Invalid Blob object');
+  }
+
+  const navigatorWithMsSaveBlob = window.navigator as NavigatorWithMsSaveBlob;
+
+  if (navigatorWithMsSaveBlob.msSaveOrOpenBlob) {
+    const saveBlob = navigatorWithMsSaveBlob.msSaveOrOpenBlob;
+    if (saveBlob) {
+      saveBlob(blob, filename);
+    }
+  } else {
+    // For modern browsers
+    const anchorElement = document.createElement('a');
+    document.body.appendChild(anchorElement);
+    const objectURL = window.URL.createObjectURL(blob);
+    anchorElement.href = objectURL;
+    anchorElement.download = filename;
+    anchorElement.click();
+    setTimeout(() => {
+      window.URL.revokeObjectURL(objectURL);
+      document.body.removeChild(anchorElement);
+    }, 0);
+  }
+};