pixel-react 1.1.9 → 1.2.1

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

@@ -14,17 +14,17 @@ export interface AppHeaderProps {
     onQuickMenuClick?: (text: any) => void;
 }
 export interface appHeaderMenuItemProps {
-    menuLabel: string;
-    menuName?: string;
+    label: string;
+    path?: string;
     subMenuItems?: appHeaderSubMenuItemProps[];
 }
 export interface appHeaderSubMenuItemProps {
-    subMenuLabel: string;
-    subMenuName?: string;
+    label: string;
+    path?: string;
     quickMenuItems?: appHeaderQuickMenuItemProps[];
 }
 export interface appHeaderQuickMenuItemProps {
-    quickMenuLabel?: string;
-    quickMenuName?: string;
-    quickMenuIconName: string;
+    label?: string;
+    path?: string;
+    iconName: string;
 }

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

@@ -7,4 +7,6 @@ export declare const Default: Story;
 export declare const WithoutHeader: Story;
 export declare const WithCustomHeader: Story;
 export declare const WithCustomFooter: Story;
+export declare const WithTertiaryButtons: Story;
+export declare const WithCustomZIndex: Story;
 export declare const Controlled: Story;

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

@@ -106,4 +106,15 @@ export interface DrawerProps {
     * If provided, this will render in place of the default footer.
     */
     customFooter?: ReactNode;
+    /**
+     * Tertiary button properties (optional)
+     */
+    tertiaryButtonProps?: {
+        left?: BtnPropsCommon;
+        right?: BtnPropsCommon;
+    };
+    /**
+     * Custom z-index for the drawer
+     */
+    zIndex?: number;
 }

package/lib/components/Icon/Icon.stories.d.ts

@@ -4,4 +4,5 @@ declare const meta: Meta<typeof Icon>;
 type Story = StoryObj<typeof Icon>;
 export declare const Icons: Story;
 export declare const AllIcons: Story;
+export declare const DarkVariantIcons: Story;
 export default meta;

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

@@ -7,4 +7,5 @@ export interface IconProps {
     onClick?: (data?: any) => void;
     hoverEffect?: boolean;
     disabled?: boolean;
+    variant?: "dark" | "light";
 }

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

@@ -59,7 +59,7 @@ export interface InputWithDropdownProps {
     /**
      * onChange handler for dropdown changes
      */
-    onDropdownChangeHandler?: (option: Option) => void;
+    onDropdownChangeHandler?: (option: any) => void;
     /**
      * onInputBlurHandler action for input field
      */

package/lib/components/LabelEditTextField/LabelEditTextField.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import './LabelEditTextField.scss';
+import { LabelEditTextFieldTypes } from './types';
+declare const LabelEditTextField: FC<LabelEditTextFieldTypes>;
+export default LabelEditTextField;

package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import LabelEditTextField from './LabelEditTextField';
+import '../../assets/styles/_colors.scss';
+import './LabelEditTextField.scss';
+declare const meta: Meta<typeof LabelEditTextField>;
+type Story = StoryObj<typeof LabelEditTextField>;
+export declare const textField: Story;
+export declare const textFieldWithOutLabel: Story;
+export declare const textFieldWithDropdown: Story;
+export declare const textFieldWithHighlight: Story;
+export default meta;

package/lib/components/LabelEditTextField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './LabelEditTextField';

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

@@ -0,0 +1,38 @@
+export interface IconProps {
+    /** Name of the icon to be displayed. */
+    name: string;
+    /** Optional click handler function for the icon. */
+    onClick?: () => void;
+}
+export interface DropdownOption {
+    /** Unique identifier for the dropdown option. */
+    id: number;
+    /** Value associated with the dropdown option. */
+    value: string;
+    /** Label displayed for the dropdown option. */
+    label: string;
+}
+export interface LabelEditTextFieldTypes {
+    /** Label text displayed above the input field. */
+    label?: string;
+    /** Initial text displayed in the input field. */
+    text: string;
+    /** Text to be highlighted within the displayed text, if provided. */
+    highlightText?: string;
+    /** Custom error message to be displayed, if applicable. */
+    customError?: string;
+    /** Confirm icon properties including icon name and click handler. */
+    confirmIcon?: IconProps;
+    /** Cancel icon properties including icon name and click handler. */
+    cancelIcon?: IconProps;
+    /** Type of input field - standard text field or text field with a dropdown. */
+    variant?: 'textFieldWithDropdown' | 'textField';
+    /** Array of dropdown options used if the dropdown variant is selected. */
+    dropdownData?: DropdownOption[];
+    /** Width of the input field component. */
+    width?: string;
+    /** Height of the input field component. */
+    height?: string;
+    /** Function called when confirming input changes, with input and dropdown values as arguments. */
+    confirmAction?: (inputValue: string, dropdownValue: string) => void;
+}

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

@@ -1,4 +1,4 @@
 import { SelectProps } from './types';
 import './Select.scss';
-declare const Select: ({ label, showLabel, optionsList, selectedOption, onChange, errorMsg, className, optionZIndex, disabled, borderRadius, showBorder, required, optionsRequired, selectedOptionColor, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const Select: ({ label, showLabel, optionsList, selectedOption, onChange, errorMsg, className, optionZIndex, disabled, borderRadius, showBorder, required, optionsRequired, selectedOptionColor, labelAccessor, valueAccessor, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
 export default Select;

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

@@ -1,4 +1,4 @@
 import { DropDownListProps } from './dropdownTypes';
 import './Dropdown.scss';
-declare const Dropdown: ({ onSelectBlur, onSelectOptionSelector, dropdownPosition, options, optionZIndex, inputRef, }: DropDownListProps) => import("react/jsx-runtime").JSX.Element;
+declare const Dropdown: ({ onSelectBlur, onSelectOptionSelector, dropdownPosition, options, optionZIndex, inputRef, labelAccessor, }: DropDownListProps) => import("react/jsx-runtime").JSX.Element;
 export default Dropdown;

package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts

@@ -6,6 +6,8 @@ export interface DropDownListProps {
     options?: Option[];
     optionZIndex?: number;
     inputRef?: React.RefObject<HTMLInputElement>;
+    labelAccessor?: string;
+    valueAccessor?: string;
 }
 export declare const dropdownDefaultCSSData: {
     margin: number;

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

@@ -1,4 +1,3 @@
-import { ReactNode } from 'react';
 export interface SelectProps {
     label?: string;
     showLabel?: boolean;
@@ -20,6 +19,14 @@ export interface SelectProps {
      * selectedOptionColor prop provides the custom color for the selected option
      */
     selectedOptionColor?: string;
+    /**
+     * Label accessor
+     */
+    labelAccessor?: string;
+    /**
+     * Value accessor
+     */
+    valueAccessor?: string;
 }
 export interface DrowdownPosition {
     positionX: number;
@@ -69,8 +76,8 @@ export type SelectAction = {
         option: Option['value'];
     };
 };
+type OptionValue = any;
 export interface Option {
-    label: string | ReactNode;
-    value: string;
-    disabled?: boolean;
+    [key: string]: OptionValue;
 }
+export {};

package/lib/components/Table/Table.d.ts

@@ -1,4 +1,4 @@
 import './Table.scss';
 import { TableProps } from './Types';
-declare const Table: ({ data, columns, headerType, withCheckbox, onSelect, allSelected, partialSelected, withFixedHeader, borderWithRadius, headerCheckboxDisabled, height, className, tableHeadClass, tableBodyRowClass, }: TableProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const Table: ({ data, columns, headerType, withCheckbox, onSelect, allSelected, partialSelected, withFixedHeader, borderWithRadius, headerCheckboxDisabled, noDataContent, height, className, tableHeadClass, tableBodyRowClass, headerTextColor, tableDataTextColor, headerIconName, headerIconOnClick, }: TableProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Table;

package/lib/components/Table/Table.stories.d.ts

@@ -3,6 +3,8 @@ import Table from './Table';
 declare const meta: Meta<typeof Table>;
 type Story = StoryObj<typeof Table>;
 export declare const Default: Story;
+export declare const PrimaryHeaderTextColor: Story;
+export declare const TableDataTextColor: Story;
 export declare const PageTable: Story;
 export declare const PrimaryHeader: Story;
 export declare const FixedHeaderWithBorder: Story;

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

@@ -103,4 +103,20 @@ export interface TableProps {
      *  classNames for the table Row container
      */
     tableBodyRowClass?: string;
+    /**
+     * custom color for the column text
+     */
+    headerTextColor?: 'default' | 'primary';
+    /**
+     * custom color for the row text
+     */
+    tableDataTextColor?: string;
+    /**
+     * icon for the table header, for expand or other purposes
+     */
+    headerIconName?: string;
+    /**
+     * handle function for the table header icon
+     */
+    headerIconOnClick?: () => void;
 }

package/lib/index.d.ts

@@ -179,11 +179,22 @@ interface DrawerProps {
     * If provided, this will render in place of the default footer.
     */
     customFooter?: ReactNode;
+    /**
+     * Tertiary button properties (optional)
+     */
+    tertiaryButtonProps?: {
+        left?: BtnPropsCommon;
+        right?: BtnPropsCommon;
+    };
+    /**
+     * Custom z-index for the drawer
+     */
+    zIndex?: number;
 }
 
 declare const Drawer: FC<DrawerProps>;
 
-interface IconProps {
+interface IconProps$1 {
     name: string;
     className?: string;
     height?: number;
@@ -192,9 +203,10 @@ interface IconProps {
     onClick?: (data?: any) => void;
     hoverEffect?: boolean;
     disabled?: boolean;
+    variant?: "dark" | "light";
 }
 
-declare const Icon: React$1.ForwardRefExoticComponent<IconProps & React$1.RefAttributes<HTMLSpanElement>>;
+declare const Icon: React$1.ForwardRefExoticComponent<IconProps$1 & React$1.RefAttributes<HTMLSpanElement>>;
 
 interface AccordionProps {
     /**
@@ -610,14 +622,21 @@ interface SelectProps$1 {
      * selectedOptionColor prop provides the custom color for the selected option
      */
     selectedOptionColor?: string;
+    /**
+     * Label accessor
+     */
+    labelAccessor?: string;
+    /**
+     * Value accessor
+     */
+    valueAccessor?: string;
 }
+type OptionValue = any;
 interface Option$2 {
-    label: string | ReactNode;
-    value: string;
-    disabled?: boolean;
+    [key: string]: OptionValue;
 }
 
-declare const Select: ({ label, showLabel, optionsList, selectedOption, onChange, errorMsg, className, optionZIndex, disabled, borderRadius, showBorder, required, optionsRequired, selectedOptionColor, }: SelectProps$1) => react_jsx_runtime.JSX.Element;
+declare const Select: ({ label, showLabel, optionsList, selectedOption, onChange, errorMsg, className, optionZIndex, disabled, borderRadius, showBorder, required, optionsRequired, selectedOptionColor, labelAccessor, valueAccessor, }: SelectProps$1) => react_jsx_runtime.JSX.Element;
 
 interface TextareaProps {
     /**
@@ -925,9 +944,25 @@ interface TableProps {
      *  classNames for the table Row container
      */
     tableBodyRowClass?: string;
+    /**
+     * custom color for the column text
+     */
+    headerTextColor?: 'default' | 'primary';
+    /**
+     * custom color for the row text
+     */
+    tableDataTextColor?: string;
+    /**
+     * icon for the table header, for expand or other purposes
+     */
+    headerIconName?: string;
+    /**
+     * handle function for the table header icon
+     */
+    headerIconOnClick?: () => void;
 }
 
-declare const Table: ({ data, columns, headerType, withCheckbox, onSelect, allSelected, partialSelected, withFixedHeader, borderWithRadius, headerCheckboxDisabled, height, className, tableHeadClass, tableBodyRowClass, }: TableProps) => react_jsx_runtime.JSX.Element | null;
+declare const Table: ({ data, columns, headerType, withCheckbox, onSelect, allSelected, partialSelected, withFixedHeader, borderWithRadius, headerCheckboxDisabled, noDataContent, height, className, tableHeadClass, tableBodyRowClass, headerTextColor, tableDataTextColor, headerIconName, headerIconOnClick, }: TableProps) => react_jsx_runtime.JSX.Element | null;
 
 /**
  * Props for the Add Resource Button component.
@@ -1167,7 +1202,7 @@ interface InputWithDropdownProps {
     /**
      * onChange handler for dropdown changes
      */
-    onDropdownChangeHandler?: (option: Option$1) => void;
+    onDropdownChangeHandler?: (option: any) => void;
     /**
      * onInputBlurHandler action for input field
      */
@@ -1610,19 +1645,19 @@ interface AppHeaderProps {
     onQuickMenuClick?: (text: any) => void;
 }
 interface appHeaderMenuItemProps {
-    menuLabel: string;
-    menuName?: string;
+    label: string;
+    path?: string;
     subMenuItems?: appHeaderSubMenuItemProps[];
 }
 interface appHeaderSubMenuItemProps {
-    subMenuLabel: string;
-    subMenuName?: string;
+    label: string;
+    path?: string;
     quickMenuItems?: appHeaderQuickMenuItemProps[];
 }
 interface appHeaderQuickMenuItemProps {
-    quickMenuLabel?: string;
-    quickMenuName?: string;
-    quickMenuIconName: string;
+    label?: string;
+    path?: string;
+    iconName: string;
 }
 
 declare const AppHeader: React.FC<AppHeaderProps>;
@@ -1812,6 +1847,47 @@ interface AttachmentUploaderProps {
 
 declare const AttachmentButton: React__default.FC<AttachmentUploaderProps>;
 
+interface IconProps {
+    /** Name of the icon to be displayed. */
+    name: string;
+    /** Optional click handler function for the icon. */
+    onClick?: () => void;
+}
+interface DropdownOption {
+    /** Unique identifier for the dropdown option. */
+    id: number;
+    /** Value associated with the dropdown option. */
+    value: string;
+    /** Label displayed for the dropdown option. */
+    label: string;
+}
+interface LabelEditTextFieldTypes {
+    /** Label text displayed above the input field. */
+    label?: string;
+    /** Initial text displayed in the input field. */
+    text: string;
+    /** Text to be highlighted within the displayed text, if provided. */
+    highlightText?: string;
+    /** Custom error message to be displayed, if applicable. */
+    customError?: string;
+    /** Confirm icon properties including icon name and click handler. */
+    confirmIcon?: IconProps;
+    /** Cancel icon properties including icon name and click handler. */
+    cancelIcon?: IconProps;
+    /** Type of input field - standard text field or text field with a dropdown. */
+    variant?: 'textFieldWithDropdown' | 'textField';
+    /** Array of dropdown options used if the dropdown variant is selected. */
+    dropdownData?: DropdownOption[];
+    /** Width of the input field component. */
+    width?: string;
+    /** Height of the input field component. */
+    height?: string;
+    /** Function called when confirming input changes, with input and dropdown values as arguments. */
+    confirmAction?: (inputValue: string, dropdownValue: string) => void;
+}
+
+declare const LabelEditTextField: FC<LabelEditTextFieldTypes>;
+
 type valueType$1 = any;
 declare const checkEmpty: (value: valueType$1) => boolean;
 
@@ -1859,4 +1935,4 @@ declare const throttle: (func: Callback, limit: number) => ThrottledFunction;
 
 declare const truncateText: (text: string, maxLength: number) => string;
 
-export { Accordion, AddButton as AddResourceButton, AllProjectsDropdown, AppHeader, AttachmentButton, Button, Checkbox, Chip, Col, Container, DashboardDonutChart, CustomDatePicker as DatePicker, DonutChart, DragAndDrop, Drawer, ExpandableMenu, FileDropzone, Form, HighlightText, Icon, IconButton, IconRadioGroup, Input, InputWithDropdown, MachineInputField, MenuOption, MiniModal, Modal, MultiSelect, NlpInput as NLPInput, Paper, PieChart, RadialChart, RadioButton, RadioGroup, Recaptcha, Row, Search, Select, SequentialConnectingBranch, StateDropdown, StatusButton, Table, TableTree, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toggle, Tooltip, Typography, VariableInput, checkEmpty, compareArrays, compareObjects, debounce, ffid, findAndInsert, getEncryptedData, getExtension, getExtensionWithPeriod, throttle, truncateText, useTheme };
+export { Accordion, AddButton as AddResourceButton, AllProjectsDropdown, AppHeader, AttachmentButton, Button, Checkbox, Chip, Col, Container, DashboardDonutChart, CustomDatePicker as DatePicker, DonutChart, DragAndDrop, Drawer, ExpandableMenu, FileDropzone, Form, HighlightText, Icon, IconButton, IconRadioGroup, Input, InputWithDropdown, LabelEditTextField, MachineInputField, MenuOption, MiniModal, Modal, MultiSelect, NlpInput as NLPInput, Paper, PieChart, RadialChart, RadioButton, RadioGroup, Recaptcha, Row, Search, Select, SequentialConnectingBranch, StateDropdown, StatusButton, Table, TableTree, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toggle, Tooltip, Typography, VariableInput, checkEmpty, compareArrays, compareObjects, debounce, ffid, findAndInsert, getEncryptedData, getExtension, getExtensionWithPeriod, throttle, truncateText, useTheme };