@connectif/ui-components 2.3.4 → 2.4.0

package/dist/components/card/EnhancedCard.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps } from '@mui/material';
+import { BoxProps, SxProps } from '@mui/material';
 import * as React from 'react';
 import { IconId } from '../icon/Icon';
 import { EnhancedCardImageProps } from './EnhancedCardImage';
@@ -92,6 +92,8 @@ export type EnhancedCardProps = React.PropsWithChildren<{
      * If `true` the onClick callback will also be triggered on aux click. Default is `false`.
      */
     enableAuxClick?: boolean;
-} & Pick<BoxProps, 'onClick' | 'onMouseDown'>>;
+    /** sx styles for card  */
+    sx?: Omit<SxProps, 'accentColor'>;
+} & Pick<BoxProps, 'onClick' | 'onMouseDown' | 'onMouseEnter' | 'onMouseLeave'>>;
 declare const _default: EnhancedCardCompound;
 export default _default;

package/dist/components/icon/icons.d.ts

@@ -369,6 +369,7 @@ export declare const icons: {
     'cellphone-link': string;
     'cellphone-link-off': string;
     'cellphone-message': string;
+    'cellphone-off': string;
     'cellphone-settings': string;
     certificate: string;
     'chair-school': string;
@@ -733,6 +734,7 @@ export declare const icons: {
     filmstrip: string;
     'filmstrip-off': string;
     filter: string;
+    'filter-off': string;
     'filter-outline': string;
     'filter-remove': string;
     'filter-remove-outline': string;
@@ -1693,6 +1695,7 @@ export declare const icons: {
     tag: string;
     'tag-faces': string;
     'tag-heart': string;
+    'tag-hidden': string;
     'tag-multiple': string;
     'tag-outline': string;
     'tag-plus': string;

package/dist/components/input/DateIntervalPicker.d.ts

@@ -71,6 +71,10 @@ export type DateIntervalPickerProps = {
      * Set of intervals to show at the DateIntervalPicker popover. All showed by default.
      */
     allowedIntervals?: DateInterval[];
+    /**
+     * Also show time
+     */
+    showTime?: boolean;
     /**
      * Function to be called when the date interval changes
      */
@@ -79,5 +83,5 @@ export type DateIntervalPickerProps = {
 /**
  * Date interval picker component, which allows to select an interval between two Dates.
  */
-declare const DateIntervalPicker: ({ interval, startDate, endDate, color, maxSelectableDays, disabled, allowCompare, comparisonInterval, comparisonStartDate, comparisonEndDate, comparisonColor, intersectionColor, minDate, maxDate, allowedIntervals, onChange }: DateIntervalPickerProps) => import("react/jsx-runtime").JSX.Element;
+declare const DateIntervalPicker: ({ interval, startDate, endDate, color, maxSelectableDays, disabled, allowCompare, comparisonInterval, comparisonStartDate, comparisonEndDate, comparisonColor, intersectionColor, minDate, maxDate, allowedIntervals, showTime, onChange }: DateIntervalPickerProps) => import("react/jsx-runtime").JSX.Element;
 export default DateIntervalPicker;

package/dist/components/input/DateIntervalPickerInputs.d.ts

@@ -1,17 +1,23 @@
 export type FocusableInputDate = 'startDate' | 'endDate' | 'comparisonStartDate' | 'comparisonEndDate';
 export type DateIntervalPickerInputsProps = {
     startDate: string;
+    startTime: Date;
     endDate: string;
+    endTime: Date;
     comparisonStartDate: string;
+    comparisonStartTime: Date;
     comparisonEndDate: string;
+    comparisonEndTime: Date;
     placeholder: string;
     highlightedInput: FocusableInputDate;
     color: string;
     comparisonColor: string;
     isComparing?: boolean;
+    showTime?: boolean;
     onChange: (value: string) => void;
+    onChangeTime: (value: Date) => void;
     onFocus: (focusableInput: FocusableInputDate) => void;
     onBlur: (focusableInput: FocusableInputDate, value: string) => void;
 };
-declare const DateIntervalPickerInputs: ({ startDate, endDate, comparisonStartDate, comparisonEndDate, placeholder, highlightedInput, color, comparisonColor, isComparing, onChange, onFocus, onBlur }: DateIntervalPickerInputsProps) => import("react/jsx-runtime").JSX.Element;
+declare const DateIntervalPickerInputs: ({ startDate, startTime, endDate, endTime, comparisonStartDate, comparisonStartTime, comparisonEndDate, comparisonEndTime, placeholder, highlightedInput, color, comparisonColor, isComparing, showTime, onChange, onChangeTime, onFocus, onBlur }: DateIntervalPickerInputsProps) => import("react/jsx-runtime").JSX.Element;
 export default DateIntervalPickerInputs;

package/dist/components/input/DateIntervalPickerPopover.d.ts

@@ -17,6 +17,7 @@ export type DateIntervalPickerPopoverProps = {
     maxDate: Date;
     allowedIntervals?: DateInterval[];
     anchorEl?: HTMLElement | null;
+    showTime?: boolean;
     onApply: (values: {
         interval: DateInterval;
         startDate: Date;
@@ -27,5 +28,5 @@ export type DateIntervalPickerPopoverProps = {
     }) => void;
     onCancel: () => void;
 };
-declare const DateIntervalPickerPopover: ({ interval, startDate, endDate, color, maxSelectableDays, allowCompare, comparisonInterval, comparisonStartDate, comparisonEndDate, comparisonColor, intersectionColor, anchorEl, minDate, maxDate, allowedIntervals, onApply, onCancel }: DateIntervalPickerPopoverProps) => import("react/jsx-runtime").JSX.Element;
+declare const DateIntervalPickerPopover: ({ interval, startDate, endDate, color, maxSelectableDays, allowCompare, comparisonInterval, comparisonStartDate, comparisonEndDate, comparisonColor, intersectionColor, anchorEl, minDate, maxDate, allowedIntervals, showTime, onApply, onCancel }: DateIntervalPickerPopoverProps) => import("react/jsx-runtime").JSX.Element;
 export default DateIntervalPickerPopover;

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

@@ -93,15 +93,19 @@ export type SelectPopoverProps = Pick<PopoverProps, 'anchorEl'> & {
     /**
      * Text to show when the list is empty.
      */
-    emptyListPlaceholder?: string;
+    emptyListPlaceholder?: string | React.ReactNode;
     /**
      * If `true`, the Apply button will be disabled when there are no changes
      * @default false
      */
     disableApplyWithoutChanges?: boolean;
+    /** Popover will be centered in screen */
+    centeredInScreen?: boolean;
+    /** Padding for div content*/
+    paddingContent?: string;
 };
 /**
  * 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) => import("react/jsx-runtime").JSX.Element;
+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, centeredInScreen, paddingContent }: SelectPopoverProps) => import("react/jsx-runtime").JSX.Element;
 export default SelectPopover;

package/dist/components/layout/SwipeableViews.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
-export declare function SwipeableViews({ className, index, style, slideStyle, onChangeIndex, children, ...rootProps }: {
+export declare function SwipeableViews({ className, index, style, slideStyle, onChangeIndex, children, disableScroll, ...rootProps }: {
     className?: string;
     index: number;
     style?: React.CSSProperties;
     slideStyle?: React.CSSProperties;
+    disableScroll?: boolean;
     onChangeIndex: (index: number) => void;
 } & React.HTMLProps<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/popover/Popover.d.ts

@@ -15,11 +15,13 @@ export type PopoverProps = Pick<MuiPopoverProps, 'children' | 'anchorEl' | 'sx'
     anchorVerticalAlign?: 'bottom' | 'center' | 'top';
     /** If `true`, the modal will not restore focus to previously focused element once modal is hidden or unmounted.*/
     disableRestoreFocus?: boolean;
+    /** Popover will be centered in screen */
+    centeredInScreen?: boolean;
 };
 /**
  * A Popover can be used to display some content on top of another.
  * It is shown when the anchor element is set and hidden when unset.
  * By default it is positioned below the anchor element.
  */
-declare const Popover: ({ horizontalAlign, anchorHorizontalOrigin, verticalAlign, anchorVerticalAlign, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+declare const Popover: ({ horizontalAlign, anchorHorizontalOrigin, verticalAlign, anchorVerticalAlign, centeredInScreen, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
 export default Popover;

package/dist/components/scrollable/Carousel.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export type CarouselProps<T> = {
+    items: T[];
+    renderItem: (item: T, index: number) => React.ReactNode;
+    gap?: number;
+    padding?: number;
+};
+declare function Carousel<T>({ items, renderItem, gap, padding }: CarouselProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Carousel;

package/dist/components/scrollable/index.d.ts

@@ -1,2 +1,4 @@
 export { default as HorizontalScrollable } from './HorizontalScrollable';
 export type { HorizontalScrollableProps } from './HorizontalScrollable';
+export { default as Carousel } from './Carousel';
+export type { CarouselProps } from './Carousel';

package/dist/components/tab/TabContent.d.ts

@@ -1,5 +1,10 @@
 import * as React from 'react';
-export type TabContentProps = React.PropsWithChildren<Record<never, never>>;
+export type TabContentProps = React.PropsWithChildren<{
+    /**
+     * Property to hide tabContent with display: none instead hide content. (This is valid to manage forms)
+     */
+    keepMounted?: boolean;
+}>;
 /**
  * The element that should be used as first child of Tabs component.
  */

package/dist/components/tab/Tabs.d.ts

@@ -38,6 +38,10 @@ export type TabsProps = {
      * Set the scrollbarGutter property for each slide of the SwipeableViews component.
      */
     scrollbarGutter?: 'stable' | 'auto';
+    /**
+     * Hide scroll in tab content
+     */
+    disableContentScroll?: boolean;
 };
 /**
  * Define a Tabs container, with a fixed header and a transitions on change between tabs.
@@ -48,5 +52,5 @@ export type TabsProps = {
  * define a callback function to be called when the tab is clicked, so you can do something
  * with the current tab index.
  */
-declare const Tabs: ({ tabButtons, children, currentTabIndex, onChangeTab, variant, fullHeight, contained, scrollbarGutter }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tabs: ({ tabButtons, children, currentTabIndex, onChangeTab, variant, fullHeight, contained, scrollbarGutter, disableContentScroll }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export default Tabs;

package/dist/i18n/en.d.ts

@@ -179,8 +179,9 @@ export declare const en: {
             YESTERDAY: string;
         };
         END_DATE: string;
+        END_HOUR: string;
         START_DATE: string;
-        TO: string;
+        START_HOUR: string;
     };
     SELECT_POPOVER: {
         APPLY: string;

package/dist/i18n/es.d.ts

@@ -179,8 +179,9 @@ export declare const es: {
             YESTERDAY: string;
         };
         END_DATE: string;
+        END_HOUR: string;
         START_DATE: string;
-        TO: string;
+        START_HOUR: string;
     };
     SELECT_POPOVER: {
         APPLY: string;

package/dist/i18n/fr.d.ts

@@ -179,8 +179,9 @@ export declare const fr: {
             YESTERDAY: string;
         };
         END_DATE: string;
+        END_HOUR: string;
         START_DATE: string;
-        TO: string;
+        START_HOUR: string;
     };
     SELECT_POPOVER: {
         APPLY: string;

package/dist/i18n/it.d.ts

@@ -179,8 +179,9 @@ export declare const it: {
             YESTERDAY: string;
         };
         END_DATE: string;
+        END_HOUR: string;
         START_DATE: string;
-        TO: string;
+        START_HOUR: string;
     };
     SELECT_POPOVER: {
         APPLY: string;

package/dist/i18n/pt.d.ts

@@ -179,8 +179,9 @@ export declare const pt: {
             YESTERDAY: string;
         };
         END_DATE: string;
+        END_HOUR: string;
         START_DATE: string;
-        TO: string;
+        START_HOUR: string;
     };
     SELECT_POPOVER: {
         APPLY: string;