pixel-react 1.8.4 → 1.8.6

package/.prettierrc.js

@@ -1,13 +1,13 @@
-module.exports = {
-  printWidth: 80, // max 080 chars in line, code is easy to read
-  useTabs: false, // use spaces instead of tabs
-  tabWidth: 2, // "visual width" of of the "tab"
-  trailingComma: 'es5', // add trailing commas in objects, arrays, etc.
-  semi: true, // add ; when needed
-  singleQuote: true, // '' for stings instead of ""
-  bracketSpacing: true, // import { some } ... instead of import {some} ...
-  arrowParens: 'always', // braces even for single param in arrow functions (a) => { }
-  jsxSingleQuote: false, // "" for react props, like in html
-  bracketSameLine: false, // pretty JSX
-  endOfLine: 'lf', // 'lf' for linux, 'crlf' for windows, we need to use 'lf' for git
-};
+module.exports = {
+  printWidth: 80, // max 080 chars in line, code is easy to read
+  useTabs: false, // use spaces instead of tabs
+  tabWidth: 2, // "visual width" of of the "tab"
+  trailingComma: 'es5', // add trailing commas in objects, arrays, etc.
+  semi: true, // add ; when needed
+  singleQuote: true, // '' for stings instead of ""
+  bracketSpacing: true, // import { some } ... instead of import {some} ...
+  arrowParens: 'always', // braces even for single param in arrow functions (a) => { }
+  jsxSingleQuote: false, // "" for react props, like in html
+  bracketSameLine: false, // pretty JSX
+  endOfLine: 'lf', // 'lf' for linux, 'crlf' for windows, we need to use 'lf' for git
+};

package/.storybook/main.ts

@@ -1,26 +1,26 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-
-const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.tsx'],
-
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-onboarding',
-    '@storybook/addon-interactions',
-    '@chromatic-com/storybook',
-    "storybook-addon-theme-provider",
-  ],
-
-  framework: {
-    name: '@storybook/react-vite',
-    options: {},
-  },
-
-  docs: {},
-
-  typescript: {
-    reactDocgen: 'react-docgen-typescript'
-  }
-};
-export default config;
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.tsx'],
+
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    '@chromatic-com/storybook',
+    "storybook-addon-theme-provider",
+  ],
+
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  }
+};
+export default config;

package/.storybook/preview-head.html

@@ -1,3 +1,3 @@
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

package/.storybook/preview.ts

@@ -1,26 +1,26 @@
-import type { Preview } from '@storybook/react';
-import { withThemeProvider } from 'storybook-addon-theme-provider';
-import ThemeProvider from '../src/components/ThemeProvider/ThemeProvider';
-import '../index.scss';
-import '../src/assets/Themes/Theme.scss';
-
-const preview: Preview = {
-  parameters: {
-    actions: {},
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-    docs: {
-      source: {
-        language: 'tsx',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  decorators: [withThemeProvider(ThemeProvider)],
-};
-
-export default preview;
+import type { Preview } from '@storybook/react';
+import { withThemeProvider } from 'storybook-addon-theme-provider';
+import ThemeProvider from '../src/components/ThemeProvider/ThemeProvider';
+import '../index.scss';
+import '../src/assets/Themes/Theme.scss';
+
+const preview: Preview = {
+  parameters: {
+    actions: {},
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      source: {
+        language: 'tsx',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  decorators: [withThemeProvider(ThemeProvider)],
+};
+
+export default preview;

package/.yarnrc.yml

@@ -1 +1 @@
-nodeLinker: node-modules
+nodeLinker: node-modules

package/README.md

@@ -1,75 +1,75 @@
----
-title: PixelReact UI
----
-
-import { Button, Input } from 'pixel-react';
-
-<h1 align="center">PixelReact UI</h1>
-
-<p align="center">
-  <strong>PixelReact UI</strong> is an open-source React component library, designed to offer a sleek, customizable, and easy-to-use collection of components for building modern user interfaces.
-</p>
-
----
-
-## Table of Contents
-
-- [Installation](#installation)
-- [Usage](#usage)
-- [Documentation](#documentation)
-- [Contributing](#contributing)
-- [License](#license)
-
----
-
-## Installation
-
-Install PixelReact UI in your project directory with:
-
-```bash
-npm install pixel-react
-```
-
-or with Yarn:
-
-```bash
-yarn add pixel-react
-```
-
-## Usage
-
-Once installed, you can start importing and using PixelReact components in your React application. Here's a quick example:
-
-```jsx
-import { Button } from 'pixel-react';
-
-function App() {
-  return (
-    <div>
-      <Button label="Button Label" variant="primary" />
-    </div>
-  );
-}
-
-export default App;
-```
-
-## Documentation
-
-For detailed documentation and live examples, [click here](https://main--65d5ca6d09c1eaf0731601fc.chromatic.com/).
-
-## Example
-
-```jsx
-import { Button } from 'pixel-react';
-
-function ExampleComponent() {
-  return <Button label="Click Me!" variant="primary" />;
-}
-```
-
-## License
-
-PixelReact UI is licensed under the [MIT License](LICENSE). Feel free to use it in your projects, both personal and commercial.
-
----
+---
+title: PixelReact UI
+---
+
+import { Button, Input } from 'pixel-react';
+
+<h1 align="center">PixelReact UI</h1>
+
+<p align="center">
+  <strong>PixelReact UI</strong> is an open-source React component library, designed to offer a sleek, customizable, and easy-to-use collection of components for building modern user interfaces.
+</p>
+
+---
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Documentation](#documentation)
+- [Contributing](#contributing)
+- [License](#license)
+
+---
+
+## Installation
+
+Install PixelReact UI in your project directory with:
+
+```bash
+npm install pixel-react
+```
+
+or with Yarn:
+
+```bash
+yarn add pixel-react
+```
+
+## Usage
+
+Once installed, you can start importing and using PixelReact components in your React application. Here's a quick example:
+
+```jsx
+import { Button } from 'pixel-react';
+
+function App() {
+  return (
+    <div>
+      <Button label="Button Label" variant="primary" />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Documentation
+
+For detailed documentation and live examples, [click here](https://main--65d5ca6d09c1eaf0731601fc.chromatic.com/).
+
+## Example
+
+```jsx
+import { Button } from 'pixel-react';
+
+function ExampleComponent() {
+  return <Button label="Click Me!" variant="primary" />;
+}
+```
+
+## License
+
+PixelReact UI is licensed under the [MIT License](LICENSE). Feel free to use it in your projects, both personal and commercial.
+
+---

package/index.scss

@@ -1,5 +1,5 @@
-/* global.css or component CSS */
-body {
-    font-family: 'Poppins', sans-serif;
-  }
+/* global.css or component CSS */
+body {
+    font-family: 'Poppins', sans-serif;
+  }
   

package/lib/components/Charts/DashboardDonutChart/types.d.ts

@@ -7,6 +7,7 @@ export type ChartItem = {
     key: string;
     value: string | number;
     color?: string;
+    percentage?: string | number;
 };
 export type NormalizedChartItem = {
     key: string;
@@ -15,6 +16,7 @@ export type NormalizedChartItem = {
     normalizedValue?: number;
     unit?: string;
     labelValue?: number;
+    percentage?: string | number;
 };
 export type LegendType = 'numberLegend' | 'pillLegend' | 'memoryLegend' | 'tableLegend';
 export type DashboardDonutChartProps = {
@@ -25,6 +27,7 @@ export type DashboardDonutChartProps = {
     isLegendDetails: boolean;
     gapAngle?: number;
     legendType: LegendType;
+    apiDataLabel: string | number;
     showOnlyLabel?: boolean;
     unit?: string;
     showUnit?: boolean;

package/lib/components/DatePicker/types.d.ts

@@ -51,6 +51,8 @@ export interface DatePickerProps {
      * Select only date .
      */
     dateOnly?: boolean;
+    className?: string;
+    zIndex?: number;
 }
 export type DateValue = Date | undefined;
 export interface CustomCaptionProps {

package/lib/components/Drawer/Types.d.ts

@@ -154,4 +154,8 @@ export interface DrawerProps {
      * Custom overflow for the drawer
      */
     overflow?: string;
+    /**
+     * Callback function returns a boolean value when the drawer is collapsed.
+     */
+    onCollapse?: (value: boolean) => void;
 }

package/lib/components/Excel/ExcelContextMenu/ExcelContextMenu.d.ts

@@ -2,6 +2,10 @@ import './ExcelContextMenu.scss';
 import { ContextMenuState } from '../ExcelFile/ExcelFileComponents/types';
 type ExcelContextMenuProps = {
     contextMenu: ContextMenuState;
+    position: {
+        x: number;
+        y: number;
+    };
 };
 declare const ExcelContextMenu: React.FC<ExcelContextMenuProps>;
 export default ExcelContextMenu;

package/lib/components/Excel/ExcelFile/ExcelFile.d.ts

@@ -7,14 +7,20 @@ interface ExcelFileProps {
     };
     /** Optional: Provide context menu options for actions like right-click */
     contextOption?: {
-        name: string;
-        title: React.ReactNode;
-        action: () => void;
-    }[];
+        open: boolean;
+        options: {
+            label: string;
+            value: string;
+            iconName: string;
+            action: () => void;
+        }[];
+    };
     /** Controls whether the toolbar is shown, disabled, or hidden */
     toolbar?: 'show' | 'disable' | 'hide';
     /** Callback function to save the Excel data */
     onSave?: (saveData: any) => void;
+    contextHeightPositioning?: number;
+    contextWidthPositioning?: number;
     /** Set your dynamic sheet Height*/
     sheetHeight?: string;
 }

package/lib/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.d.ts

@@ -2,6 +2,16 @@ import * as React from 'react';
 import * as Types from './types';
 type Props = {
     DataEditor: Types.DataEditorComponent;
+    setContextMenu: React.Dispatch<React.SetStateAction<ContextMenuState>>;
+    contextOption?: {
+        open: boolean;
+        options: {
+            label: string;
+            value: string;
+            iconName: string;
+            action: () => void;
+        }[];
+    };
 };
 declare const ActiveCell: React.FC<Props>;
 export default ActiveCell;

package/lib/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.d.ts

@@ -3,6 +3,6 @@ import * as Types from './types';
 export declare const TRUE_TEXT = "TRUE";
 export declare const FALSE_TEXT = "FALSE";
 /** The default Spreadsheet DataViewer component */
-declare const DataViewer: <Cell extends Types.CellBase<Value>, Value>({ cell, evaluatedCell, setContextMenu, }: Types.DataViewerProps<Cell>) => React.ReactElement;
+declare const DataViewer: <Cell extends Types.CellBase<Value>, Value>({ cell, evaluatedCell, }: Types.DataViewerProps<Cell>) => React.ReactElement;
 export default DataViewer;
 export declare function convertBooleanToText(value: boolean): string;

package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts

@@ -62,6 +62,15 @@ export type Props<CellType extends Types.CellBase> = {
     setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
     /** Set your dynamic sheet Height*/
     sheetHeight: string;
+    contextOption?: {
+        open: boolean;
+        options: {
+            label: string;
+            value: string;
+            iconName: string;
+            action: () => void;
+        }[];
+    };
 };
 /**
  * The Spreadsheet component

package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts

@@ -102,7 +102,6 @@ export type CellComponentProps<Cell extends CellBase = CellBase> = {
     setCellDimensions: (point: Point, dimensions: Dimensions) => void;
     /** Set data of the cell */
     setCellData: (cell: Cell) => void;
-    setContextMenu: React.Dispatch<React.SetStateAction<ContextMenuState>>;
 };
 /** Type of the Spreadsheet Cell component */
 export type CellComponent<Cell extends CellBase = CellBase> = React.ComponentType<CellComponentProps<Cell>>;
@@ -114,7 +113,6 @@ type DataComponentProps<Cell extends CellBase> = {
 export type DataViewerProps<Cell extends CellBase = CellBase> = DataComponentProps<Cell> & {
     /** Set data of the cell */
     setCellData: (cell: Cell) => void;
-    setContextMenu: React.Dispatch<React.SetStateAction<ContextMenuState>>;
     evaluatedCell: Cell | undefined;
 };
 /** Type of the Spreadsheet DataViewer component */

package/lib/components/Excel/Types.d.ts

@@ -64,16 +64,6 @@ interface ContextOption {
     /** Array of context menu actions for right-click options */
     value: ContextAction[];
 }
-interface ContextMenuState {
-    /** Whether the context menu is visible */
-    visible: boolean;
-    /** X-coordinate position for the context menu */
-    x: number;
-    /** Y-coordinate position for the context menu */
-    y: number;
-    /** Type of the context menu ('cell', 'row', 'column', or 'sheet_options') */
-    type: 'cell' | 'row' | 'column' | 'sheet_options' | null;
-}
 interface SelectedCell {
     /** The row index of the selected cell */
     row: number;
@@ -88,6 +78,20 @@ interface ColorContainer {
     /** The border color used for the cell (hex code) */
     borderColor: string;
 }
+interface ContextMenuState {
+    open: boolean;
+    position: {
+        x: number;
+        y: number;
+    };
+    options: optionsType[];
+}
+interface optionsType {
+    label: string;
+    value: string;
+    iconName: string;
+    action: () => void;
+}
 interface SelectedValue {
     /** The value inside the selected cell */
     value: string;

package/lib/components/FF_Captcha/Recaptcha.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 import ReCAPTCHA from 'react-google-recaptcha';
 import { RecaptchaProps } from './types';
 import './Recaptcha.scss';
-declare const Recaptcha: import("react").ForwardRefExoticComponent<RecaptchaProps & import("react").RefAttributes<ReCAPTCHA>>;
+declare const Recaptcha: React.ForwardRefExoticComponent<RecaptchaProps & React.RefAttributes<ReCAPTCHA>>;
 export default Recaptcha;

package/lib/components/FF_Captcha/types.d.ts

@@ -1,6 +1,14 @@
 import { ComponentProps } from 'react';
-import ReCAPTCHA from 'react-google-recaptcha';
-export interface RecaptchaProps extends Omit<ComponentProps<typeof ReCAPTCHA>, 'onChange'> {
+type FixedReCAPTCHA = React.ComponentType<{
+    sitekey: string;
+    onChange: (token: string | null) => void;
+    className?: string;
+    theme?: 'light' | 'dark';
+    size?: 'compact' | 'normal' | 'invisible';
+    tabindex?: number;
+    badge?: 'bottomright' | 'bottomleft' | 'inline';
+}>;
+export interface RecaptchaProps extends Omit<ComponentProps<FixedReCAPTCHA>, 'onChange'> {
     /**
      * Callback function that receives the verification token
      */
@@ -18,3 +26,4 @@ export interface RecaptchaProps extends Omit<ComponentProps<typeof ReCAPTCHA>, '
      */
     sitekey: string;
 }
+export {};

package/lib/components/Select/components/types.d.ts

@@ -13,6 +13,7 @@ export interface DropdownProps {
     heightFromTop: number;
     selectedOption?: Option;
     showIcon?: boolean;
+    showToolTip?: boolean;
 }
 export declare const dropdownDefaultCSSData: {
     margin: number;

package/lib/components/Select/types.d.ts

@@ -24,6 +24,14 @@ export interface SelectProps {
     disableInput?: boolean;
     showIcon?: boolean;
     iconName?: string;
+    /**
+     * Provide the placehoder for the select
+     */
+    placeHolder?: string;
+    /**
+     * Provide the boolean value if tooltip is reuired or not
+     */
+    showToolTip?: boolean;
 }
 export interface DropdownPosition {
     positionX: number;