pixel-react 1.0.4 → 1.0.6

package/lib/assets/utils/functionUtils.d.ts

@@ -1 +1,4 @@
 export declare const isFunction: (functionToCheck: any) => any;
+export declare const convertTo24Hour: (time12h: string) => string;
+export declare const convertTo12Hour: (time24: string) => string;
+export declare const isValid12HourTime: (timeString: string) => boolean;

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

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

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import CustomDatePicker from './DatePicker';
+declare const meta: Meta<typeof CustomDatePicker>;
+export default meta;
+type Story = StoryObj<typeof CustomDatePicker>;
+export declare const Default: Story;
+export declare const StartDateFilter: Story;
+export declare const EndDateInput: Story;
+export declare const ScheduleDateInput: Story;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TimePickerProps } from './types';
+declare const TimePicker: React.FC<TimePickerProps>;
+export default TimePicker;

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

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

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

@@ -0,0 +1,81 @@
+export interface DatePickerProps {
+    /**
+     * The minimum selectable date.
+     */
+    minDate?: DateValue;
+    /**
+     * The maximum selectable date.
+     */
+    maxDate?: DateValue;
+    /**
+     * Selected date value.
+     */
+    value?: DateValue;
+    /**
+     * Function to handle date selection.
+     */
+    onChange: (value: DateValue) => void;
+    /**
+     * Placeholder text for the input field.
+     */
+    placeholder?: string;
+    /**
+     * Disables the date picker.
+     */
+    disabled?: boolean;
+    /**
+     * Format for displaying the selected date. Default is 'EEEE, dd MMM yyyy'.
+     */
+    dateFormat?: string;
+    /**
+     * Format for displaying the selected time. Default is 'hh:mm a'.
+     */
+    timeFormat?: string;
+    /**
+     * Timezone for the date picker.
+     */
+    timezone?: string;
+    /**
+     * Custom width for the calendar. This will override the default width of the calendar.
+     */
+    calendarWidth?: number;
+    /**
+     * When true, displays the input field error.
+     */
+    error?: boolean;
+    /**
+     * Helper text to display below the input field, used for error messages or instructions.
+     */
+    helperText?: string | undefined;
+}
+export type DateValue = Date | undefined;
+export interface CustomCaptionProps {
+    children?: React.ReactNode;
+}
+export interface CustomCalenderButtonProps {
+    className?: string;
+    disabled?: boolean | undefined;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+export interface TimePickerProps {
+    /**
+     * The current time value, in string format (e.g., '14:30').
+     */
+    value: string;
+    /**
+     * Function to handle time selection changes, receiving the selected time as a string.
+     */
+    onChange: (time: string) => void;
+    /**
+     * The minimum selectable time, used to restrict the earliest selectable time.
+     */
+    minTime?: string;
+    /**
+     * The maximum selectable time, used to restrict the latest selectable time.
+     */
+    maxTime?: string;
+    /**
+     * Function to handle error state changes, receiving a boolean indicating the presence of an error.
+     */
+    onErrorChange: (error: boolean) => void;
+}

package/lib/components/IconButton/IconButton.d.ts

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

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import IconButton from './IconButton';
+declare const meta: Meta<typeof IconButton>;
+type Story = StoryObj<typeof IconButton>;
+export declare const PrimaryIconButton: Story;
+export default meta;

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

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

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

@@ -0,0 +1,5 @@
+export interface IconButtonProps {
+    label: string;
+    iconName: string;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}

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

@@ -1,4 +1,4 @@
 import './InputWithDropdown.scss';
 import { InputWithDropdownProps } from './types';
-declare const InputWithDropdown: ({ name, label, value, type, disabled, required, placeholder, error, helperText, optionsList, selectedOption, onDropdownChangeHandler, onInputChangeHandler, optionsRequired, }: InputWithDropdownProps) => import("react/jsx-runtime").JSX.Element;
+declare const InputWithDropdown: ({ name, label, value, disabled, required, placeholder, error, helperText, optionsList, selectedOption, onDropdownChangeHandler, onInputChangeHandler, onInputBlurHandler, optionsRequired, }: InputWithDropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default InputWithDropdown;

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

@@ -15,15 +15,11 @@ export interface InputWithDropdownProps {
     /**
      * value | input field value
      */
-    value: string | number;
+    value?: number;
     /**
      * variants to set color/style of the input field
      */
     variant?: 'default' | 'primary';
-    /**
-     * type to set the input field type
-     */
-    type: 'text' | 'password' | 'number' | 'time';
     /**
      * error | If true, error message will be displayed
      */
@@ -65,9 +61,9 @@ export interface InputWithDropdownProps {
      */
     onDropdownChangeHandler?: (option: Option) => void;
     /**
-     * onFocus action for input field
+     * onInputBlurHandler action for input field
      */
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onInputBlurHandler?: (event: React.FocusEvent<HTMLInputElement>) => void;
     /**
      * id to select the input field uniquely
      */

package/lib/components/TableTree/TableTree.d.ts

@@ -17,5 +17,5 @@ interface TableTreeProps {
     treeData: Array<ObjectProps>;
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, data: any) => void;
 }
-declare const TableTree: ({ columnsData, treeData, onClick, }: TableTreeProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableTree: ({ columnsData, treeData, withCheckBox, onClick, }: TableTreeProps) => import("react/jsx-runtime").JSX.Element;
 export default TableTree;

package/lib/index.d.ts

@@ -1052,15 +1052,11 @@ interface InputWithDropdownProps {
     /**
      * value | input field value
      */
-    value: string | number;
+    value?: number;
     /**
      * variants to set color/style of the input field
      */
     variant?: 'default' | 'primary';
-    /**
-     * type to set the input field type
-     */
-    type: 'text' | 'password' | 'number' | 'time';
     /**
      * error | If true, error message will be displayed
      */
@@ -1102,9 +1098,9 @@ interface InputWithDropdownProps {
      */
     onDropdownChangeHandler?: (option: Option) => void;
     /**
-     * onFocus action for input field
+     * onInputBlurHandler action for input field
      */
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onInputBlurHandler?: (event: React.FocusEvent<HTMLInputElement>) => void;
     /**
      * id to select the input field uniquely
      */
@@ -1128,7 +1124,7 @@ interface InputWithDropdownProps {
     optionsRequired?: boolean;
 }
 
-declare const InputWithDropdown: ({ name, label, value, type, disabled, required, placeholder, error, helperText, optionsList, selectedOption, onDropdownChangeHandler, onInputChangeHandler, optionsRequired, }: InputWithDropdownProps) => react_jsx_runtime.JSX.Element;
+declare const InputWithDropdown: ({ name, label, value, disabled, required, placeholder, error, helperText, optionsList, selectedOption, onDropdownChangeHandler, onInputChangeHandler, onInputBlurHandler, optionsRequired, }: InputWithDropdownProps) => react_jsx_runtime.JSX.Element;
 
 declare const RadioButton: React__default.FC<RadioButtonProps>;
 
@@ -1241,7 +1237,7 @@ interface TableTreeProps {
     treeData: Array<ObjectProps>;
     onClick?: (event: React__default.MouseEvent<HTMLDivElement, MouseEvent>, data: any) => void;
 }
-declare const TableTree: ({ columnsData, treeData, onClick, }: TableTreeProps) => react_jsx_runtime.JSX.Element;
+declare const TableTree: ({ columnsData, treeData, withCheckBox, onClick, }: TableTreeProps) => react_jsx_runtime.JSX.Element;
 
 interface TabsProps {
     /**
@@ -1330,6 +1326,60 @@ interface SearchProps {
 
 declare const Search: ({ placeholder, onSearch, disabled, width, }: SearchProps) => react_jsx_runtime.JSX.Element;
 
+interface DatePickerProps {
+    /**
+     * The minimum selectable date.
+     */
+    minDate?: DateValue;
+    /**
+     * The maximum selectable date.
+     */
+    maxDate?: DateValue;
+    /**
+     * Selected date value.
+     */
+    value?: DateValue;
+    /**
+     * Function to handle date selection.
+     */
+    onChange: (value: DateValue) => void;
+    /**
+     * Placeholder text for the input field.
+     */
+    placeholder?: string;
+    /**
+     * Disables the date picker.
+     */
+    disabled?: boolean;
+    /**
+     * Format for displaying the selected date. Default is 'EEEE, dd MMM yyyy'.
+     */
+    dateFormat?: string;
+    /**
+     * Format for displaying the selected time. Default is 'hh:mm a'.
+     */
+    timeFormat?: string;
+    /**
+     * Timezone for the date picker.
+     */
+    timezone?: string;
+    /**
+     * Custom width for the calendar. This will override the default width of the calendar.
+     */
+    calendarWidth?: number;
+    /**
+     * When true, displays the input field error.
+     */
+    error?: boolean;
+    /**
+     * Helper text to display below the input field, used for error messages or instructions.
+     */
+    helperText?: string | undefined;
+}
+type DateValue = Date | undefined;
+
+declare const CustomDatePicker: React__default.FC<DatePickerProps>;
+
 interface StateDropdownProps {
     value: string;
     nodeObj: {};
@@ -1344,6 +1394,14 @@ interface StateDropdownProps {
 
 declare const StateDropdown: ({ value, nodeObj, isReviewer, isApprovePage, handleStateValueClick, handleDropdownOptionsClick, disabled, isOnlyReviewer, userHasOnlyViewAccess, }: StateDropdownProps) => react_jsx_runtime.JSX.Element;
 
+interface IconButtonProps {
+    label: string;
+    iconName: string;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+declare const IconButton: React__default.FC<IconButtonProps>;
+
 type valueType$1 = any;
 declare const checkEmpty: (value: valueType$1) => boolean;
 
@@ -1351,4 +1409,4 @@ type valueType = File | string;
 declare const getExtension: (value: valueType) => string | undefined;
 declare const getExtensionWithPeriod: (value: valueType) => string;
 
-export { Accordion, AddButton as AddResourceButton, Button, Checkbox, Chip, Col, Container, DonutChart, Drawer, ExpandableMenu, FileDropzone, Form, HighlightText, Icon, Input, InputWithDropdown, MenuOption, MiniModal, MultiSelect, RadialChart, RadioButton, RadioGroup, Row, Search, Select, StateDropdown, StatusButton, Table, TableTree, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toggle, Tooltip, Typography, checkEmpty, getExtension, getExtensionWithPeriod, useTheme };
+export { Accordion, AddButton as AddResourceButton, Button, Checkbox, Chip, Col, Container, CustomDatePicker as DatePicker, DonutChart, Drawer, ExpandableMenu, FileDropzone, Form, HighlightText, Icon, IconButton, Input, InputWithDropdown, MenuOption, MiniModal, MultiSelect, RadialChart, RadioButton, RadioGroup, Row, Search, Select, StateDropdown, StatusButton, Table, TableTree, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toggle, Tooltip, Typography, checkEmpty, getExtension, getExtensionWithPeriod, useTheme };