pixel-react 1.7.0 → 1.7.2

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

@@ -3,144 +3,160 @@
 .ff-excel {
   display: flex;
   flex-direction: column;
-}
 
-.ff-spreadsheet {
-  --background-color: var(--drawer-footer-bg);
-  --text-color: var(--text-color);
-  --readonly-text-color: var(--toggle-strip-active);
-  --outline-color: var(--toggle-strip-active);
-  --outline-background-color: var(--overlay-bg);
-  --border-color: var(--excel-sheet-border);
-  --header-background-color: var(--pop-up-background-blur);
-  --elevation: var(--brand-color);
-
-  position: relative;
-  overflow: visible;
-  background: var(--background-color);
-  color: var(--text-color);
-  display: inline-block;
-}
+  .ff-excel-toolbar-container {
+    position: relative;
+    top: 0;
+    background-color: var(--excel-toolbar-bg);
+    padding: 4px 8px;
+    margin-bottom: 20px;
+  }
 
-.ff-spreadsheet-active-cell {
-  position: absolute;
-  border: 2px solid var(--outline-color);
-  box-sizing: border-box;
-}
+  .ff-spreadsheet {
+    --background-color: var(--drawer-footer-bg);
+    --text-color: var(--text-color);
+    --readonly-text-color: var(--toggle-strip-active);
+    --outline-color: var(--toggle-strip-active);
+    --outline-background-color: var(--overlay-bg);
+    --border-color: var(--excel-sheet-border);
+    --header-background-color: var(--excel-header-bg);
+    --elevation: var(--brand-color);
+
+    position: relative;
+    overflow: scroll;
+    background: var(--background-color);
+    color: var(--text-color);
+    scrollbar-width: none;
+    display: inline-block;
+  }
 
-.ff-spreadsheet-active-cell--edit {
-  background: var(--background-color);
-  box-shadow: var(--elevation);
-}
+  .ff-spreadsheet-active-cell {
+    position: absolute;
+    border: 2px solid var(--outline-color);
+    box-sizing: border-box;
+  }
 
-.ff-spreadsheet-table {
-  overflow: scroll;
-  &::-webkit-scrollbar {
-    height: 0px;
+  .ff-spreadsheet-active-cell--edit {
+    background: var(--background-color);
+    box-shadow: var(--elevation);
   }
 
-  margin-top: 20px;
-  border-collapse: collapse;
-  table-layout: fixed;
-}
+  .ff-spreadsheet-table {
+    overflow: scroll;
+    top: 0;
+    left: 0;
+    margin: 0;
+    position: relative;
+    &::-webkit-scrollbar {
+      height: 0px;
+    }
+    border-collapse: collapse;
+    table-layout: fixed;
+  }
 
-.ff-spreadsheet-cell {
-  outline: none;
-  position: relative;
-  z-index: 0;
-}
+  .ff-spreadsheet-cell {
+    outline: none;
+    position: relative;
+    z-index: 0;
+  }
 
-.ff-spreadsheet-active-cell .select_dot {
-  background-color: var(--elevation);
-  height: 10px;
-  width: 10px;
-  border-radius: 50%;
-  position: absolute;
-  bottom: -5px;
-  right: -5px;
-  cursor: crosshair;
-  z-index: 1000;
-}
+  .ff-spreadsheet-active-cell .select_dot {
+    background-color: var(--elevation);
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    position: absolute;
+    bottom: -5px;
+    right: -5px;
+    cursor: crosshair;
+    z-index: 1000;
+  }
 
-.ff-spreadsheet-cell--readonly {
-  color: var(--readonly-text-color);
-}
+  .ff-spreadsheet-cell--readonly {
+    color: var(--readonly-text-color);
+  }
 
-.ff-spreadsheet-cell,
-.ff-spreadsheet-header {
-  border: 0.1px solid var(--border-color);
-  overflow: hidden;
-  word-break: keep-all;
-  white-space: nowrap;
-  text-align: left;
-  box-sizing: border-box;
-  user-select: none;
-}
+  .ff-spreadsheet-cell,
+  .ff-spreadsheet-header {
+    border: 0.1px solid var(--border-color);
+    overflow: hidden;
+    word-break: keep-all;
+    white-space: nowrap;
+    text-align: left;
+    box-sizing: border-box;
+    user-select: none;
+  }
 
-.ff-spreadsheet-header {
-  background: var(--header-background-color);
-  color: var(--readonly-text-color);
-  text-align: center;
-}
+  .ff-spreadsheet-header {
+    border: 0.1px solid var(--border-color);
+    background-color: var(--header-background-color);
+    color: var(--readonly-text-color);
+    text-align: center;
+    z-index: 1000;
+  }
 
-.corner_indicator {
-  margin: 0px 0px 0px 15px;
-}
+  .ff-spreadsheet-corner-header {
+    padding-left: 20px;
+    z-index: 1100;
+  }
 
-.ff-spreadsheet-header--selected {
-  background: var(--brand-color);
-  color: var(--tooltip-text-color);
-}
+  .ff-spreadsheet-header--selected {
+    background: var(--brand-color);
+    color: var(--tooltip-text-color);
+  }
 
-.ff-spreadsheet-header,
-.ff-spreadsheet-data-viewer,
-.ff-spreadsheet-data-editor input {
-  padding: 4px;
-  box-sizing: border-box;
-}
+  .ff-spreadsheet-data-viewer,
+  .ff-spreadsheet-data-editor input {
+    padding: 4px;
+    box-sizing: border-box;
+  }
+  .ff-spreadsheet-header {
+    box-sizing: border-box;
+  }
 
-.ff-spreadsheet-data-viewer--preserve-breaks {
-  white-space: pre-wrap;
-}
+  .ff-spreadsheet-data-viewer--preserve-breaks {
+    white-space: pre-wrap;
+  }
 
-.ff-spreadsheet-data-editor,
-.ff-spreadsheet-data-editor input {
-  width: 100%;
-  height: 100%;
-}
+  .ff-spreadsheet-data-editor,
+  .ff-spreadsheet-data-editor input {
+    width: 100%;
+    height: 100%;
+  }
 
-.ff-spreadsheet-data-editor input {
-  font: inherit;
-  color: inherit;
-  background: none;
-  border: none;
-  outline: none;
-  margin: 0;
-}
+  .ff-spreadsheet-data-editor input {
+    font: inherit;
+    color: inherit;
+    background: none;
+    border: none;
+    outline: none;
+    margin: 0;
+  }
 
-.ff-spreadsheet-data-viewer--boolean {
-  text-align: center;
-}
+  .ff-spreadsheet-data-viewer--boolean {
+    text-align: center;
+  }
 
-.ff-spreadsheet-floating-rect {
-  position: absolute;
-  pointer-events: none;
-  box-sizing: border-box;
-}
+  .ff-spreadsheet-floating-rect {
+    position: absolute;
+    pointer-events: none;
+    box-sizing: border-box;
+  }
 
-.ff-spreadsheet-floating-rect--hidden {
-  display: none;
-}
+  .ff-spreadsheet-floating-rect--hidden {
+    display: none;
+  }
 
-.ff-spreadsheet-floating-rect--selected {
-  background: var(--outline-background-color);
-  border: 2px var(--outline-color) solid;
-}
+  .ff-spreadsheet-floating-rect--selected {
+    background: var(--outline-background-color);
+    border: 2px var(--outline-color) solid;
+  }
 
-.ff-spreadsheet-floating-rect--dragging {
-  border: none;
-}
+  .ff-spreadsheet-floating-rect--dragging {
+    border: none;
+  }
 
-.ff-spreadsheet-floating-rect--copied {
-  border: 2px var(--outline-color) dashed;
+  .ff-spreadsheet-floating-rect--copied {
+    border: 2px var(--outline-color) dashed;
+  }
 }

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

@@ -98,6 +98,8 @@ export type Props<CellType extends Types.CellBase> = {
   /** Callback called when the Spreadsheet's evaluated data changes. */
   onEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void;
   setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
+    /** Set your dynamic sheet Height*/
+  sheetHeight: string;
 };
 
 /**
@@ -113,6 +115,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     onKeyDown,
     Table = DefaultTable,
     Row = DefaultRow,
+    sheetHeight,
     HeaderRow = DefaultHeaderRow,
     DataEditor = DefaultDataEditor,
     DataViewer = DefaultDataViewer,
@@ -443,6 +446,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const rootNode = React.useMemo(
     () => (
       <div className="ff-excel">
+      <div className="ff-excel-toolbar-container">
         <ExcelToolBar
           onBold={onBold}
           onItalic={onItalic}
@@ -455,8 +459,10 @@ const Spreadsheet = <CellType extends Types.CellBase>(
           setBackgroundColor={setBackgroundColor}
           setFormatePainter={setFormatePainter}
         />
+      </div>
         <div
           ref={rootRef}
+          style={{height:sheetHeight}}
           className={classNames('ff-spreadsheet', className)}
           onKeyDown={handleKeyDown}
           onMouseMove={handleMouseMove}

package/src/components/Excel/ExcelFile.stories.tsx

@@ -160,6 +160,7 @@ export const Default: Story = {
         action: () => {},
       },
     ],
+    sheetHeight:"300px",
     onSave: () => {},
   },
 };

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

@@ -91,7 +91,14 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
     value: string;
   }>({
     label: 'Times New Roman',
-    value: '"Times New Roman"',
+    value: 'Times New Roman',
+  });
+  const [selectedFontSize, setSelectedFontSize] = useState<{
+    label: string;
+    value: string;
+  }>({
+    label: '11',
+    value: '11',
   });
   const [colorContainer, setColorPicker] = useState<ColorContainer>({
     color: 'var(--error-light)',
@@ -219,9 +226,10 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
           <div className="ff-excel-toolbar-font-family">
             <Select
               showLabel={false}
+              optionZIndex={1000}
               onChange={(e) => {
-                setSelectedFontFamily({ label: e.label, value: e.value });
-                setFontFamily(data, e.label);
+                setSelectedFontFamily({ label: e.label, value: e.label });
+                setFontFamily(data, e.value);
               }}
               required={false}
               optionsList={fontFamily}
@@ -233,13 +241,14 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
           <div className="ff-excel-toolbar-font-size">
             <Select
               showLabel={false}
+              optionZIndex={1000}
               required={false}
-              onChange={(e) => setFontSize(data, e.value)}
-              optionsList={fontSize}
-              selectedOption={{
-                label: '11',
-                value: '11',
+              onChange={(e) => {
+                setSelectedFontSize({ label: e.label, value: e.value });
+                setFontSize(data, e.value);
               }}
+              optionsList={fontSize}
+              selectedOption={selectedFontSize}
             />
           </div>
         </Tooltip>
@@ -308,6 +317,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
             />
             <MenuOption
               iconName="arrow_down"
+              zIndex={1000}
               iconSize={12}
               options={underlineTypeIcon}
               tooltipPlacement="top"
@@ -384,6 +394,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
             <MenuOption
               iconName="arrow_down"
               iconSize={12}
+              zIndex={1000}
               options={borderTypeIcon}
               tooltipPlacement="top"
               variant="light"

package/src/components/Icon/iconList.ts

@@ -66,6 +66,7 @@ import TextColor from '../../assets/icons/text_color.svg?react';
 import FillColor from '../../assets/icons/fill_color.svg?react';
 import FormulaIcon from '../../assets/icons/formula_icon.svg?react';
 import ExcelCornerMenu from '../../assets/icons/excel_corner_menu.svg?react';
+import AutoSaveIcon from '../../assets/icons/auto_save_icon.svg?react';
 
 import ApkFileType from '../../assets/icons/apk_file_type.svg?react';
 import CsvFileType from '../../assets/icons/csv_file_type.svg?react';
@@ -318,6 +319,7 @@ Components['text_color'] = TextColor;
 Components['fill_color'] = FillColor;
 Components['formula_icon'] = FormulaIcon;
 Components['excel_corner_menu'] = ExcelCornerMenu;
+Components['auto_save_icon'] = AutoSaveIcon;
 Components['export'] = Export;
 Components['apk_file_type'] = ApkFileType;
 Components['csv_file_type'] = CsvFileType;

package/src/components/PhoneInput/PhoneInput.stories.tsx

@@ -15,7 +15,11 @@ const Template = ({
   placeholder,
   onFocus,
   onBlur,
-  isValid,
+  international,
+  enableAreaCodeStretch,
+  defaultCountry,
+  disabled,
+  id,
 }: PhoneInputProps) => {
   const [phone, setPhone] = useState<string>(value || '');
   const [valid, setValid] = useState(true);
@@ -38,6 +42,11 @@ const Template = ({
       onFocus={onFocus}
       onBlur={onBlur}
       isValid={valid}
+      international={international}
+      enableAreaCodeStretch={enableAreaCodeStretch}
+      defaultCountry={defaultCountry}
+      disabled={disabled}
+      id={id}
     />
   );
 };
@@ -46,50 +55,16 @@ const Template = ({
 export const Default = Template.bind({});
 Default.args = {
   country: 'IN',
-  value: '9134567890',
+  value: '91',
   width: '400px',
   placeholder: 'Enter phone number',
   onChange: () => {},
   onFocus: () => {},
   onBlur: () => {},
   isValid: true,
-};
-
-// Story with initial value
-export const WithInitialValue = Template.bind({});
-WithInitialValue.args = {
-  country: 'IN',
-  value: '9176543210',
-  width: '300px',
-  onChange: () => {},
-  placeholder: 'Enter phone number',
-  onFocus: () => {},
-  onBlur: () => {},
-  isValid: true,
-};
-
-// Story with a custom country
-export const WithCustomCountry = Template.bind({});
-WithCustomCountry.args = {
-  country: 'IN',
-  value: '9176543210',
-  width: '300px',
-  onChange: () => {},
-  placeholder: 'Enter phone number',
-  onFocus: () => {},
-  onBlur: () => {},
-  isValid: true,
-};
-
-// Story with empty value
-export const EmptyValue = Template.bind({});
-EmptyValue.args = {
-  country: 'IN',
-  value: '91',
-  width: '500px',
-  onChange: () => {},
-  placeholder: 'Enter phone number',
-  onFocus: () => {},
-  onBlur: () => {},
-  isValid: false,
+  international: true,
+  enableAreaCodeStretch: true,
+  defaultCountry: 'IN',
+  disabled: false,
+  id: 'addPrimaryNumberId',
 };

package/src/components/PhoneInput/PhoneInput.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import PhoneInput from 'react-phone-input-2';
-import 'react-phone-input-2/lib/style.css';
 import { PhoneInputProps } from './types';
 import Typography from '../Typography';
 import './PhoneInput.scss';
@@ -13,6 +12,10 @@ const PhoneInputField: React.FC<PhoneInputProps> = ({
   placeholder = 'Enter phone number',
   onFocus,
   onBlur,
+  id,
+  dropdownStyle = {},
+  enableAreaCodeStretch = false,
+  disabled = false,
 }) => {
   const [phone, setPhone] = useState<string>(value);
   const [isFocused, setIsFocused] = useState(false);
@@ -57,8 +60,10 @@ const PhoneInputField: React.FC<PhoneInputProps> = ({
   };
 
   return (
-    <div>
+    <div id={id}>
       <PhoneInput
+        specialLabel=""
+        countryCodeEditable={false}
         country={country}
         value={phone}
         onChange={handlePhoneChange}
@@ -77,6 +82,9 @@ const PhoneInputField: React.FC<PhoneInputProps> = ({
         placeholder={placeholder}
         onFocus={handleFocus}
         onBlur={handleBlur}
+        dropdownStyle={dropdownStyle}
+        enableAreaCodeStretch={enableAreaCodeStretch}
+        disabled={disabled}
       />
       {error && !isFocused && (
         <Typography color={'var(--error_light)'} className="error">