@connectif/ui-components 0.0.1

package/dist/src/components/input/DatePickerStatic.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export type DatePickerStaticProps = {
+    value?: Date | null;
+    onSelect: (date: Date | null) => void;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+};
+declare const DatePickerStatic: ({ value, onSelect, minDate, maxDate }: DatePickerStaticProps) => JSX.Element;
+export default DatePickerStatic;

package/dist/src/components/input/DaysOfWeekPicker.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export type DaysOfWeek = 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday';
+export type DaysOfWeekPickerProps = {
+    /**
+     * Value, should be a day of week
+     */
+    value: DaysOfWeek[];
+    onChange: (newValue: DaysOfWeek[]) => void;
+};
+declare const DaysOfWeekPicker: ({ value, onChange }: DaysOfWeekPickerProps) => JSX.Element;
+export default DaysOfWeekPicker;

package/dist/src/components/input/DaysOfWeekRow.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const DaysOfWeekRow: () => JSX.Element;
+export default DaysOfWeekRow;

package/dist/src/components/input/DebouncedTextField.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { TextFieldProps } from './TextField';
+export type DebouncedTextFieldProps = TextFieldProps & {
+    /**
+     * The time in ms that the debounce takes to trigger.
+     */
+    debounce?: number;
+};
+/**
+ * DebouncedTextField is a component that wraps up TextField with a debounce time.
+ */
+declare const DebouncedTextField: React.ForwardRefExoticComponent<TextFieldProps & {
+    /**
+     * The time in ms that the debounce takes to trigger.
+     */
+    debounce?: number | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default DebouncedTextField;

package/dist/src/components/input/InputHelperText.d.ts

@@ -0,0 +1,29 @@
+import { SxProps } from '@mui/material';
+import * as React from 'react';
+export type InputHelperTextProps = React.PropsWithChildren<{
+    /**
+     * The severity of this text
+     */
+    severity?: 'info' | 'error';
+    /**
+     * Styles to custom main Box component
+     */
+    sx?: SxProps;
+}>;
+/**
+ * A helper text to be shown along with form fields, like Select or TextFields, usually
+ * below the form field.
+ */
+declare const InputHelperText: React.ForwardRefExoticComponent<{
+    /**
+     * The severity of this text
+     */
+    severity?: "info" | "error" | undefined;
+    /**
+     * Styles to custom main Box component
+     */
+    sx?: SxProps | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export default InputHelperText;

package/dist/src/components/input/InputLabel.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { SxProps } from '@mui/material';
+export type InputLabelProps = React.PropsWithChildren<{
+    /**
+     * The `for` native attribute. Set here the `id` of the related
+     * form field associated to this label.
+     */
+    htmlFor?: string;
+    /**
+     * Styles to custom &lt;label&gt; component
+     */
+    sx?: SxProps;
+    /**
+     * The severity of this label
+     */
+    severity?: 'info' | 'error';
+    /**
+     * Show an info icon with the text as tooltip
+     */
+    infoText?: string;
+}>;
+/**
+ * A label text to be shown along with form fields, like Select or TextFields, usually
+ * above the form field.
+ */
+declare const InputLabel: React.ForwardRefExoticComponent<{
+    /**
+     * The `for` native attribute. Set here the `id` of the related
+     * form field associated to this label.
+     */
+    htmlFor?: string | undefined;
+    /**
+     * Styles to custom &lt;label&gt; component
+     */
+    sx?: SxProps | undefined;
+    /**
+     * The severity of this label
+     */
+    severity?: "error" | "info" | undefined;
+    /**
+     * Show an info icon with the text as tooltip
+     */
+    infoText?: string | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLLabelElement>>;
+export default InputLabel;

package/dist/src/components/input/ItemSelector.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { SelectPopoverProps } from './SelectPopover';
+export type ItemSelectorItem = {
+    id: string;
+};
+export type ItemSelectorProps<T extends ItemSelectorItem> = {
+    items: T[];
+    selectedItems: T[];
+    variant?: 'circular' | 'rounded' | 'transparent';
+    placeholder?: string;
+    disabled?: boolean;
+    helperText?: string;
+    isError?: boolean;
+    limitItemChips?: number;
+    itemChipWidth?: number;
+    renderChipLabel?: (item: T) => string;
+    renderItem?: (item: T) => {
+        title: string;
+        subtitle1: string;
+        subtitle2: string;
+    };
+    onChange: (value: T[]) => void;
+    onClose?: () => void;
+    onLoadMore?: (searchText: string) => void;
+} & Pick<SelectPopoverProps, 'applyButtonText' | 'emptyListPlaceholder' | 'hasMore' | 'isLoading' | 'isLoadingSubtitle2' | 'maxSelectedItems' | 'onSearch' | 'requiredSelectedItemsToApply' | 'disableApplyWithoutChanges' | 'popoverWidth'>;
+declare const ItemSelector: <T extends ItemSelectorItem>({ items, selectedItems, maxSelectedItems, variant, placeholder, disabled, helperText, isError, limitItemChips, itemChipWidth, isLoading, isLoadingSubtitle2, hasMore, applyButtonText, emptyListPlaceholder, requiredSelectedItemsToApply, disableApplyWithoutChanges, popoverWidth, renderChipLabel, renderItem, onChange, onLoadMore, onSearch, onClose }: ItemSelectorProps<T>) => JSX.Element;
+export default ItemSelector;

package/dist/src/components/input/NumberField.d.ts

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { TextFieldProps } from './TextField';
+export type NumberFieldProps = Omit<TextFieldProps, 'value' | 'onChange' | 'multiline' | 'onScroll' | 'type' | 'defaultValue'> & {
+    /**
+     * The numeric value of this input.
+     */
+    value?: number | null;
+    /**
+     * The numerical set to which the field belongs.
+     * * @default integer
+     */
+    type?: 'integer' | 'decimal';
+    /**
+     * Called when value is changed internally (both with user typing or
+     * by using arrowUp/arrowDown keyboard keys)
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: number | null) => void;
+    /**
+     * number of decimal places to which the number is rounded (only for the "decimal" type)
+     * @default 0
+     */
+    fractionDigits?: number;
+    /**
+     * Maximum value allowed
+     */
+    maxValue?: number;
+    /**
+     * Minimum value allowed
+     */
+    minValue?: number;
+    /**
+     * Number to be added or removed to the value on every arrowUp/arrowDown when input has focus
+     * @default 1
+     */
+    step?: number;
+    /**
+     * If true, the stepper buttons will be shown
+     * @default false
+     */
+    withStepperButtons?: boolean;
+    /**
+     * Tooltip for the increase stepper button when it is disabled
+     */
+    stepUpDisabledTooltip?: string;
+    /**
+     * Tooltip for the decrease stepper button when it is disabled
+     */
+    stepDownDisabledTooltip?: string;
+};
+/**
+ * NumberField is a component that renders an input field with type="text", but handles the value
+ * to allow only numeric values.
+ * It comes with some optional features like an InputLabel, an InputHelperText, a leading Icon
+ * and an IconButton to clear the current value of input.
+ *
+ * The exposed `ref` property is the refference to the native &lt;input&gt; element,
+ * typed as React.Ref&lt;HTMLInputElement&gt;
+ */
+declare const NumberField: React.ForwardRefExoticComponent<Omit<TextFieldProps, "type" | "onChange" | "onScroll" | "defaultValue" | "value" | "multiline"> & {
+    /**
+     * The numeric value of this input.
+     */
+    value?: number | null | undefined;
+    /**
+     * The numerical set to which the field belongs.
+     * * @default integer
+     */
+    type?: "decimal" | "integer" | undefined;
+    /**
+     * Called when value is changed internally (both with user typing or
+     * by using arrowUp/arrowDown keyboard keys)
+     */
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>, value: number | null) => void) | undefined;
+    /**
+     * number of decimal places to which the number is rounded (only for the "decimal" type)
+     * @default 0
+     */
+    fractionDigits?: number | undefined;
+    /**
+     * Maximum value allowed
+     */
+    maxValue?: number | undefined;
+    /**
+     * Minimum value allowed
+     */
+    minValue?: number | undefined;
+    /**
+     * Number to be added or removed to the value on every arrowUp/arrowDown when input has focus
+     * @default 1
+     */
+    step?: number | undefined;
+    /**
+     * If true, the stepper buttons will be shown
+     * @default false
+     */
+    withStepperButtons?: boolean | undefined;
+    /**
+     * Tooltip for the increase stepper button when it is disabled
+     */
+    stepUpDisabledTooltip?: string | undefined;
+    /**
+     * Tooltip for the decrease stepper button when it is disabled
+     */
+    stepDownDisabledTooltip?: string | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default NumberField;

package/dist/src/components/input/PageSelector.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+export type PageSelectorProps = {
+    /**
+     * The current page number.
+     */
+    currentPage: number;
+    /**
+     * The number of items per page.
+     */
+    pageSize: number;
+    /**
+     * The total number of items
+     * that are being paginated.
+     */
+    totalItems: number;
+    /**
+     * The text to display next to the page selector.
+     * It will be rendered as HTML, so make sure to sanitize it.
+     */
+    text?: string;
+    /**
+     * The function to call when the page is changed by the user.
+     */
+    onPageChange: (page: number) => void;
+};
+/**
+ * PageSelector component is used to navigate between pages of a list.
+ */
+declare const PageSelector: React.FC<PageSelectorProps>;
+export default PageSelector;

package/dist/src/components/input/PhoneField.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { TextFieldProps } from './TextField';
+import { SelectProps } from './Select';
+export type PhoneFieldProps = Omit<TextFieldProps, 'multiline' | 'onChange' | 'rows' | 'onScroll' | 'type' | 'defaultValue'> & {
+    /**
+     * Called when the value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Country code to be used by default if this field is firstly rendered with an empty value.
+     * It must be a code of 1, 2, 3 or 4 digits available in PhoneUtils.ts file.
+     */
+    defaultCountryCode?: string;
+    /**
+     * Country code select props
+     */
+    codeSelectProps?: SelectProps<string, false>['sx'];
+};
+/**
+ * PhoneField is a component that renders an input field with type="text" with a start adornment
+ * to select the country code from a predefined list of country codes.
+ * It comes with some optional features like an InputLabel, an InputHelperText, a leading Icon
+ * and an IconButton to clear the current value of input.
+ *
+ * The exposed `ref` property is the refference to the native &lt;input&gt; element,
+ * typed as React.Ref&lt;HTMLInputElement&gt;
+ */
+declare const PhoneField: React.ForwardRefExoticComponent<Omit<TextFieldProps, "type" | "onChange" | "onScroll" | "defaultValue" | "rows" | "multiline"> & {
+    /**
+     * Called when the value changes
+     */
+    onChange?: ((value: string) => void) | undefined;
+    /**
+     * Country code to be used by default if this field is firstly rendered with an empty value.
+     * It must be a code of 1, 2, 3 or 4 digits available in PhoneUtils.ts file.
+     */
+    defaultCountryCode?: string | undefined;
+    /**
+     * Country code select props
+     */
+    codeSelectProps?: SelectProps<string, false>['sx'];
+} & React.RefAttributes<HTMLInputElement>>;
+export default PhoneField;

package/dist/src/components/input/Radio.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { RadioProps as MuiRadioProps } from '@mui/material/Radio';
+import { SxProps } from '@mui/material';
+export type RadioProps<T extends string = string> = {
+    /**
+     * Wheather the radio is checked or not.
+     */
+    checked: boolean;
+    /**
+     * Value associated to this radio button.
+     */
+    value?: T;
+    /**
+     * Wheather the radio is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Optional text label to show before or after the radio.
+     */
+    label?: string;
+    /**
+     * Where to put the `label` text, if any.
+     */
+    labelPlacement?: 'start' | 'end';
+    /**
+     * Callback fired when the state is changed.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: T) => void;
+    /**
+     * Whether the Radio is in error state.
+     */
+    isError?: boolean;
+    /**
+     * The size of the radio
+     */
+    size?: 'S' | 'M';
+    /**
+     * Settled directly in DOM element, for testing easy location purposes.
+     */
+    'data-testid'?: string;
+    className?: string;
+    sx?: SxProps;
+    tabIndex?: MuiRadioProps['tabIndex'];
+};
+/**
+ * Radios can be used to select one and only one option from a set of options, each one being on a different Radio.
+ */
+declare const Radio: React.ForwardRefExoticComponent<RadioProps<string> & React.RefAttributes<HTMLButtonElement>>;
+export default Radio;

package/dist/src/components/input/Select.d.ts

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { SelectProps as MuiSelectProps } from '@mui/material/Select';
+import { ListItemButtonProps } from '../list/ListItemButton';
+type Colors = {
+    backgroundColor?: string;
+    color?: string;
+    selectedColor?: string;
+    hoverColor?: string;
+    borderColor?: string;
+};
+type SelectValue<T extends string | number | undefined, Multiple extends boolean | undefined> = Multiple extends undefined | false ? T : T[];
+/**
+ * NOTE: there is a limitation to perfectly model this SelectProps. Currently, when using the Select component
+ * we will have to set explicit multiple={false} to get the right typings and make TypeScript happy. This is probably
+ * a bug in TypeScript compiler. Take a look at this article:
+ * https://blog.andrewbran.ch/expressive-react-component-apis-with-discriminated-unions/#fn-1
+ * Also, the related bug looks to be this:
+ * https://github.com/Microsoft/TypeScript/issues/29340
+ */
+export type SelectProps<T extends string | number | undefined, Multiple extends boolean | undefined, Value = SelectValue<T, Multiple>> = Pick<MuiSelectProps<T>, 'id' | 'children' | 'sx' | 'disabled' | 'onClose'> & {
+    variant?: 'rounded' | 'circular' | 'transparent';
+    /**
+     * The placeholder to put in this Select when no value is selected.
+     */
+    placeholder?: string;
+    /**
+     * All available options to be listed as selectable when Select is open.
+     */
+    options?: ({
+        value: T;
+        label?: string;
+    } & Pick<ListItemButtonProps, 'disabled' | 'color' | 'endIconId' | 'startIconId' | 'startAdornment' | 'endAdornment' | 'typographyVariant' | 'sx'>)[];
+    /**
+     * Whether allow user to select multiple options or not
+     */
+    multiple?: Multiple;
+    /**
+     * The current value of Select
+     */
+    value: Value;
+    /**
+     * Whether to use or not virtualized list to render component. It is only compatible with single selection value, not multiple.
+     */
+    virtualized?: boolean;
+    /**
+     * Configuration of options list when using virtualization such as pixels width or number of overscan elements. Default value is {width: 250, overscanCount: 3, itemSize: 44}.
+     */
+    virtualizedProps?: {
+        width?: number;
+        overscanCount?: number;
+        itemSize?: number;
+    };
+    /**
+     * Called when selected data is changed by the user
+     */
+    onChange?: (data: Value) => void;
+    /**
+     * Render of the selected value
+     */
+    renderValue?: (value: T | T[], options?: ({
+        value: T;
+        label?: string;
+    } & Pick<ListItemButtonProps, 'disabled' | 'color' | 'endIconId' | 'startIconId' | 'startAdornment' | 'endAdornment' | 'typographyVariant' | 'sx'>)[]) => React.ReactNode;
+    /**
+     * The z-index of the menu when open
+     */
+    menuZIndex?: number;
+    /**
+     * The color of the menu
+     */
+    menuColors?: Colors;
+    /**
+     * The max height of the menu when open
+     */
+    menuMaxHeight?: string;
+    /**
+     * Ref to inner HTMLSelectElement
+     */
+    ref?: React.Ref<HTMLSelectElement>;
+    size?: 'S' | 'M';
+    className?: string;
+    paperClassName?: string;
+    dataTest?: string;
+    open?: boolean;
+    onOpen?: () => void;
+};
+export declare const BootstrapInput: import("@emotion/styled").StyledComponent<import("@mui/material/InputBase").InputBaseProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+declare const _default: <T extends string | number | undefined = string | number | undefined, Multiple extends boolean | undefined = undefined, Value = SelectValue<T, Multiple>>({ variant, placeholder, children, onChange, onClose, options, multiple, value, virtualized, virtualizedProps, className, paperClassName, size, sx, renderValue, menuZIndex, menuColors, menuMaxHeight, dataTest, open, onOpen, ...rest }: SelectProps<T, Multiple, Value>, ref: React.Ref<HTMLSelectElement>) => JSX.Element;
+export default _default;

package/dist/src/components/input/SelectPopover.d.ts

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { PopoverProps } from '../popover/Popover';
+import { IconId } from '../icon';
+export type SelectableItem = {
+    id: string;
+    name: string;
+    subtitle1?: string;
+    subtitle2?: string;
+    disabled?: boolean;
+    selected: boolean;
+    color?: string;
+    iconId?: IconId;
+    chipText?: string;
+    tooltip?: string;
+    isLoadingSubtitle2?: boolean;
+};
+export type SelectPopoverProps = Pick<PopoverProps, 'anchorEl'> & {
+    /**
+     * Called every time the popover apply changes.
+     */
+    onApply: (selectedItemsIds: string[]) => void;
+    /**
+     * Called every time the popover cancel changes.
+     */
+    onCancel: () => void;
+    /**
+     * Called every time the popover search items.
+     */
+    onSearch: (searchTerm: string) => void;
+    /**
+     * Called every time the popover load more items.
+     */
+    onLoadMore: () => void;
+    /**
+     * The time in ms that the debounce takes to trigger.
+     */
+    debounce?: number;
+    /**
+     * If selector can have multiple selections at same time.
+     */
+    multiple?: boolean;
+    /**
+     * If infinite scroll have to load more items.
+     */
+    hasMore?: boolean;
+    /**
+     * Are items loading.
+     */
+    isLoading?: boolean;
+    /**
+     * Are items subtitle2 loading.
+     */
+    isLoadingSubtitle2?: boolean;
+    /**
+     * The selectable items.
+     */
+    items: SelectableItem[];
+    /**
+     * Elements colors depending on state.
+     */
+    itemsColorStyles?: {
+        selectedColor: string;
+        disabledColor: string;
+    };
+    /**
+     * The selected items.
+     */
+    selectedItemsIds: string[];
+    popoverWidth?: React.CSSProperties['width'];
+    /** If `true`, the modal will not restore focus to previously focused element once modal is hidden or unmounted.*/
+    disableRestoreFocus?: boolean;
+    /**
+     * Only enable the Apply button when selected at least this quantity of items.
+     */
+    requiredSelectedItemsToApply?: number;
+    /**
+     * Text to show as placeholder of Search input.
+     */
+    searchPlaceholder?: string;
+    /**
+     * Text to show in the Apply button.
+     */
+    applyButtonText?: string;
+    /**
+     * Maximum number of items that can be selected.
+     */
+    maxSelectedItems?: number;
+    /**
+     * If `true`, the current selection will be kept when searching.
+     * @default true
+     */
+    keepCurrentSelectionOnSearch?: boolean;
+    /**
+     * Text to show when the list is empty.
+     */
+    emptyListPlaceholder?: string;
+    /**
+     * If `true`, the Apply button will be disabled when there are no changes
+     * @default false
+     */
+    disableApplyWithoutChanges?: boolean;
+};
+/**
+ * SelectPopover is a components that renders a complex selector with DataDisplayItems and is multiselectable, infinite scroll and search input.
+ */
+declare const SelectPopover: ({ onApply, onCancel, onLoadMore, onSearch, debounce, multiple, hasMore, isLoading, isLoadingSubtitle2, requiredSelectedItemsToApply, searchPlaceholder, items, anchorEl, itemsColorStyles, selectedItemsIds, popoverWidth, disableRestoreFocus, applyButtonText, maxSelectedItems, keepCurrentSelectionOnSearch, emptyListPlaceholder, disableApplyWithoutChanges }: SelectPopoverProps) => JSX.Element;
+export default SelectPopover;

package/dist/src/components/input/SelectPopoverItem.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { IconId } from '../icon';
+export type SelectPopoverItemProps = {
+    id: string;
+    name: string;
+    subtitle1?: string;
+    subtitle2?: string;
+    disabled?: boolean;
+    iconId?: IconId;
+    chipText?: string;
+    color?: string;
+    tooltip?: string;
+    isLoadingSubtitle2?: boolean;
+    onClick?: () => void;
+};
+declare const SelectPopoverItem: ({ id, name, subtitle1, subtitle2, disabled, iconId, chipText, color, tooltip, isLoadingSubtitle2, onClick }: SelectPopoverItemProps) => JSX.Element;
+export default SelectPopoverItem;

package/dist/src/components/input/Switch.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { SwitchProps as MuiSwitchProps } from '@mui/material';
+export type SwitchProps = {
+    /**
+     * If `true`, the component is checked.
+     */
+    checked: MuiSwitchProps['checked'];
+    /**
+     * If `true`, the component is disabled.
+     */
+    disabled?: MuiSwitchProps['disabled'];
+    /**
+     * Callback fired when the state is changed.
+     *
+     * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+     * You can pull out the new value by accessing `event.target.value` (string).
+     * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+     */
+    onChange?: MuiSwitchProps['onChange'];
+};
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+export default Switch;

package/dist/src/components/input/Switch.theme.d.ts

@@ -0,0 +1,2 @@
+import { Components, Theme } from '@mui/material';
+export declare const switchTheme: Components<Theme>['MuiSwitch'];