pixel-react 1.2.0 → 1.2.1

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/index.d.ts

@@ -194,7 +194,7 @@ interface DrawerProps {
 
 declare const Drawer: FC<DrawerProps>;
 
-interface IconProps {
+interface IconProps$1 {
     name: string;
     className?: string;
     height?: number;
@@ -206,7 +206,7 @@ interface IconProps {
     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 {
     /**
@@ -622,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 {
     /**
@@ -1195,7 +1202,7 @@ interface InputWithDropdownProps {
     /**
      * onChange handler for dropdown changes
      */
-    onDropdownChangeHandler?: (option: Option$1) => void;
+    onDropdownChangeHandler?: (option: any) => void;
     /**
      * onInputBlurHandler action for input field
      */
@@ -1840,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;
 
@@ -1887,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 };