@bethinkpl/design-system 26.4.0 → 26.6.0

package/dist/lib/js/components/DatePickers/DatePicker/DatePicker.composables.d.ts

@@ -16,7 +16,7 @@ interface InitFlatpickrPrams {
 }
 interface InitFlatpickr {
     datePicker: DatePickerInstance | null;
-    createDatePicker: (flatpickrInputElement: HTMLInputElement, dateRangePickerRef: HTMLElement) => Promise<DatePickerInstance | undefined>;
+    createDatePicker: (flatpickrInputElement: HTMLInputElement, dateRangePickerRef: HTMLElement, updatePositionBasedOnScrollableSelector: string) => Promise<DatePickerInstance | undefined>;
     isOpen: Ref<boolean>;
     toggle: () => void;
 }

package/dist/lib/js/components/DatePickers/DatePicker/DatePicker.vue.d.ts

@@ -9,12 +9,13 @@ declare const _default: import('vue').DefineComponent<{
     date: Date;
     isInteractive: boolean;
     state: DatePickerStates;
+    updatePositionBasedOnScrollableSelector: string;
 }, {
     flatpickrInputRef: Ref<HTMLInputElement, HTMLInputElement>;
     datePickerRef: Ref<HTMLDivElement, HTMLDivElement>;
     isOpen: Ref<boolean, boolean>;
     toggleDatePicker: () => void;
-    createDatePicker: (flatpickrInputElement: HTMLInputElement, dateRangePickerRef: HTMLElement) => Promise<import('flatpickr/dist/types/instance').Instance | undefined>;
+    createDatePicker: (flatpickrInputElement: HTMLInputElement, dateRangePickerRef: HTMLElement, updatePositionBasedOnScrollableSelector: string) => Promise<import('flatpickr/dist/types/instance').Instance | undefined>;
     DATE_PICKER_CALENDAR_POSITIONS: Readonly<{
         TOP: string;
         TOP_LEFT: string;
@@ -38,7 +39,12 @@ declare const _default: import('vue').DefineComponent<{
         BOX: string;
         TILE: string;
     }>;
+    TILE_ADDITIONAL_TEXT_MAX_WIDTHS: Readonly<{
+        readonly SMALL: "small";
+        readonly MEDIUM: "medium";
+    }>;
 }, {}, {
+    borderColor(): "warning" | "danger" | "neutralWeak" | "primary" | "dangerWeak" | "warningWeak";
     eyebrowText(): string;
     text(): any;
     tileIcon(): any;
@@ -56,6 +62,7 @@ declare const _default: import('vue').DefineComponent<{
     date: Date;
     isInteractive: boolean;
     state: DatePickerStates;
+    updatePositionBasedOnScrollableSelector: string;
 }> & Readonly<{
     "onUpdate:date"?: ((date: Date) => any) | undefined;
 }>, {
@@ -76,6 +83,7 @@ declare const _default: import('vue').DefineComponent<{
     disableDates: Date[];
     minDate: Date;
     maxDate: Date;
+    updatePositionBasedOnScrollableSelector: string;
 }, {}, {
     DsTile: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
         interactive: {
@@ -134,9 +142,14 @@ declare const _default: import('vue').DefineComponent<{
             type: BooleanConstructor;
             default: boolean;
         };
-        hasBorder: {
-            type: BooleanConstructor;
-            default: boolean;
+        borderColor: {
+            type: PropType<import('../../Tile').TileBorderColors>;
+            default: null;
+        };
+        additionalTextMaxWidth: {
+            type: PropType<import('../../Tile').TileAdditionalTextMaxWidths>;
+            default: "small";
+            validator(value: import('../../Tile').TileAdditionalTextMaxWidths): boolean;
         };
     }>, {}, {
         ICONS: Readonly<{
@@ -361,6 +374,10 @@ declare const _default: import('vue').DefineComponent<{
             readonly DISABLED: "disabled";
             readonly LOADING: "loading";
         }>;
+        TILE_ADDITIONAL_TEXT_MAX_WIDTHS: Readonly<{
+            readonly SMALL: "small";
+            readonly MEDIUM: "medium";
+        }>;
     }, {
         tileColor(): any;
         tileState(): any;
@@ -421,16 +438,21 @@ declare const _default: import('vue').DefineComponent<{
             type: BooleanConstructor;
             default: boolean;
         };
-        hasBorder: {
-            type: BooleanConstructor;
-            default: boolean;
+        borderColor: {
+            type: PropType<import('../../Tile').TileBorderColors>;
+            default: null;
+        };
+        additionalTextMaxWidth: {
+            type: PropType<import('../../Tile').TileAdditionalTextMaxWidths>;
+            default: "small";
+            validator(value: import('../../Tile').TileAdditionalTextMaxWidths): boolean;
         };
     }>> & Readonly<{}>, {
         color: import('../../Tile').TileColors;
         state: import('../../Tile').TileStates;
         iconLeft: Record<string, any>;
         iconRight: Record<string, any>;
-        hasBorder: boolean;
+        borderColor: import('../../Tile').TileBorderColors;
         interactive: boolean;
         isIconRightHiddenOnMobile: boolean;
         eyebrowText: string;
@@ -438,6 +460,7 @@ declare const _default: import('vue').DefineComponent<{
         isEyebrowTextUppercase: boolean;
         eyebrowEllipsis: boolean;
         textEllipsis: boolean;
+        additionalTextMaxWidth: import('../../Tile').TileAdditionalTextMaxWidths;
     }, {}, {
         DsIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
             icon: {

package/dist/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue.d.ts

@@ -10,12 +10,13 @@ declare const _default: import('vue').DefineComponent<{
     endDate: Date;
     isInteractive: boolean;
     state: DatePickerStates;
+    updatePositionBasedOnScrollableSelector: string;
 }, {
     dateRangePickerRef: Ref<HTMLDivElement, HTMLDivElement>;
     flatpickrInputRef: Ref<HTMLInputElement, HTMLInputElement>;
     isOpen: Ref<boolean, boolean>;
     toggleDatePicker: () => void;
-    createDatePicker: (flatpickrInputElement: HTMLInputElement, dateRangePickerRef: HTMLElement) => Promise<import('flatpickr/dist/types/instance').Instance | undefined>;
+    createDatePicker: (flatpickrInputElement: HTMLInputElement, dateRangePickerRef: HTMLElement, updatePositionBasedOnScrollableSelector: string) => Promise<import('flatpickr/dist/types/instance').Instance | undefined>;
     DATE_PICKER_CALENDAR_POSITIONS: Readonly<{
         TOP: string;
         TOP_LEFT: string;
@@ -59,6 +60,7 @@ declare const _default: import('vue').DefineComponent<{
     endDate: Date;
     isInteractive: boolean;
     state: DatePickerStates;
+    updatePositionBasedOnScrollableSelector: string;
 }> & Readonly<{
     "onUpdate:date"?: ((value: {
         startDate: Date;
@@ -79,6 +81,7 @@ declare const _default: import('vue').DefineComponent<{
     disableDates: Date[];
     minDate: Date;
     maxDate: Date;
+    updatePositionBasedOnScrollableSelector: string;
 }, {}, {
     DatePickerBox: import('vue').DefineComponent<{}, {}, {
         ICONS: Readonly<{

package/dist/lib/js/components/Drawer/DrawerTile/DrawerTile.vue.d.ts

@@ -55,9 +55,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-    hasBorder: {
-        type: BooleanConstructor;
-        default: boolean;
+    borderColor: {
+        type: import('vue').PropType<import('../../Tile').TileBorderColors>;
+        default: null;
+    };
+    additionalTextMaxWidth: {
+        type: import('vue').PropType<import('../../Tile').TileAdditionalTextMaxWidths>;
+        default: "small";
+        validator(value: import('../../Tile').TileAdditionalTextMaxWidths): boolean;
     };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     click: () => true;
@@ -118,9 +123,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-    hasBorder: {
-        type: BooleanConstructor;
-        default: boolean;
+    borderColor: {
+        type: import('vue').PropType<import('../../Tile').TileBorderColors>;
+        default: null;
+    };
+    additionalTextMaxWidth: {
+        type: import('vue').PropType<import('../../Tile').TileAdditionalTextMaxWidths>;
+        default: "small";
+        validator(value: import('../../Tile').TileAdditionalTextMaxWidths): boolean;
     };
 }>> & Readonly<{
     onClick?: (() => any) | undefined;
@@ -129,7 +139,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     state: import('../../Tile').TileStates;
     iconLeft: Record<string, any>;
     iconRight: Record<string, any>;
-    hasBorder: boolean;
+    borderColor: import('../../Tile').TileBorderColors;
     interactive: boolean;
     isIconRightHiddenOnMobile: boolean;
     eyebrowText: string;
@@ -137,6 +147,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     isEyebrowTextUppercase: boolean;
     eyebrowEllipsis: boolean;
     textEllipsis: boolean;
+    additionalTextMaxWidth: import('../../Tile').TileAdditionalTextMaxWidths;
 }, {}, {
     DsTile: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
         interactive: {
@@ -195,9 +206,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
-        hasBorder: {
-            type: BooleanConstructor;
-            default: boolean;
+        borderColor: {
+            type: import('vue').PropType<import('../../Tile').TileBorderColors>;
+            default: null;
+        };
+        additionalTextMaxWidth: {
+            type: import('vue').PropType<import('../../Tile').TileAdditionalTextMaxWidths>;
+            default: "small";
+            validator(value: import('../../Tile').TileAdditionalTextMaxWidths): boolean;
         };
     }>, {}, {
         ICONS: Readonly<{
@@ -422,6 +438,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly DISABLED: "disabled";
             readonly LOADING: "loading";
         }>;
+        TILE_ADDITIONAL_TEXT_MAX_WIDTHS: Readonly<{
+            readonly SMALL: "small";
+            readonly MEDIUM: "medium";
+        }>;
     }, {
         tileColor(): any;
         tileState(): any;
@@ -482,16 +502,21 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
-        hasBorder: {
-            type: BooleanConstructor;
-            default: boolean;
+        borderColor: {
+            type: import('vue').PropType<import('../../Tile').TileBorderColors>;
+            default: null;
+        };
+        additionalTextMaxWidth: {
+            type: import('vue').PropType<import('../../Tile').TileAdditionalTextMaxWidths>;
+            default: "small";
+            validator(value: import('../../Tile').TileAdditionalTextMaxWidths): boolean;
         };
     }>> & Readonly<{}>, {
         color: import('../../Tile').TileColors;
         state: import('../../Tile').TileStates;
         iconLeft: Record<string, any>;
         iconRight: Record<string, any>;
-        hasBorder: boolean;
+        borderColor: import('../../Tile').TileBorderColors;
         interactive: boolean;
         isIconRightHiddenOnMobile: boolean;
         eyebrowText: string;
@@ -499,6 +524,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         isEyebrowTextUppercase: boolean;
         eyebrowEllipsis: boolean;
         textEllipsis: boolean;
+        additionalTextMaxWidth: import('../../Tile').TileAdditionalTextMaxWidths;
     }, {}, {
         DsIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
             icon: {

package/dist/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue.d.ts

@@ -1119,6 +1119,10 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
             type: BooleanConstructor;
             default: boolean;
         };
+        isHiddenOnMobile: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>, {}, {}, {
         tooltipParams(): {
             position: any;
@@ -1135,6 +1139,7 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
                 borderRadius: string;
                 maxWidth: string;
             };
+            class: string | null;
             ptOptions: {
                 mergeProps: boolean;
             };
@@ -1165,12 +1170,17 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
             type: BooleanConstructor;
             default: boolean;
         };
+        isHiddenOnMobile: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>> & Readonly<{}>, {
         text: string;
         inline: boolean;
         placement: import('../../Tooltip').TooltipPlacement;
         isDisabled: boolean;
         isPointerVisible: boolean;
+        isHiddenOnMobile: boolean;
     }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/lib/js/components/Outline/OutlineItem/OutlineItem.vue.d.ts

@@ -228,6 +228,7 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
     isDisabled(): boolean;
 }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {
     size: string;
+    label: string;
     state: string;
     iconLeft: Record<string, any>;
     iconRight: Record<string, any>;

package/dist/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue.d.ts

@@ -44,6 +44,7 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
     hasActionsSlotDivider: boolean;
     isSelectable: boolean;
     supportingTextEllipsis: boolean;
+    isSupportingTextTooltipEnabled: boolean;
     isEyebrowUppercase: boolean;
 }, {}, {
     DsTextGroup: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
@@ -99,6 +100,22 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
             type: PropType<TextGroupState>;
             default: "default";
         };
+        isSupportingTextTooltipEnabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        isSupportingTextTooltipEnabledOnMobile: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        isSupportingTextTooltipAutoFilledWithContent: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        supportingTextTooltipContent: {
+            type: (StringConstructor | null)[];
+            default: null;
+        };
     }>, {}, {
         TEXT_GROUP_SIZES: Readonly<{
             SMALL: string;
@@ -167,6 +184,22 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
             type: PropType<TextGroupState>;
             default: "default";
         };
+        isSupportingTextTooltipEnabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        isSupportingTextTooltipEnabledOnMobile: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        isSupportingTextTooltipAutoFilledWithContent: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        supportingTextTooltipContent: {
+            type: (StringConstructor | null)[];
+            default: null;
+        };
     }>> & Readonly<{}>, {
         size: string;
         color: "neutral";
@@ -181,6 +214,10 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
         mainTextEllipsis: boolean;
         supportingTextEllipsis: boolean;
         skeletonLoadingSize: string;
+        isSupportingTextTooltipEnabled: boolean;
+        isSupportingTextTooltipEnabledOnMobile: boolean;
+        isSupportingTextTooltipAutoFilledWithContent: boolean;
+        supportingTextTooltipContent: string | null;
     }, {}, {
         DsSkeleton: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
             height: {
@@ -224,6 +261,91 @@ declare const _default: import('vue').DefineComponent<{}, {}, {
         }, {}, {
             PrimeSkeleton: import('@primevue/core').DefineComponent<import('primevue/skeleton').SkeletonProps, import('primevue/skeleton').SkeletonSlots, (e: string, ...args: any[]) => void, {}>;
         }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        DsTooltip: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+            placement: {
+                type: PropType<import('../../Tooltip').TooltipPlacement>;
+                default: "bottom";
+                validator(placement: import('../../Tooltip').TooltipPlacement): boolean;
+            };
+            text: {
+                type: StringConstructor;
+                default: string;
+            };
+            isDisabled: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            isPointerVisible: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            inline: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            isHiddenOnMobile: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>, {}, {}, {
+            tooltipParams(): {
+                position: any;
+                event: string;
+            };
+            options(): {
+                value: any;
+                disabled: any;
+                dt: {
+                    shadow: string;
+                    padding: string;
+                    background: string;
+                    color: string;
+                    borderRadius: string;
+                    maxWidth: string;
+                };
+                class: string | null;
+                ptOptions: {
+                    mergeProps: boolean;
+                };
+                pt: {
+                    text: string;
+                    arrow: string;
+                };
+            };
+        }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            placement: {
+                type: PropType<import('../../Tooltip').TooltipPlacement>;
+                default: "bottom";
+                validator(placement: import('../../Tooltip').TooltipPlacement): boolean;
+            };
+            text: {
+                type: StringConstructor;
+                default: string;
+            };
+            isDisabled: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            isPointerVisible: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            inline: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            isHiddenOnMobile: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>> & Readonly<{}>, {
+            text: string;
+            inline: boolean;
+            placement: import('../../Tooltip').TooltipPlacement;
+            isDisabled: boolean;
+            isPointerVisible: boolean;
+            isHiddenOnMobile: boolean;
+        }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
     }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
     RichListItem: import('vue').DefineComponent<{}, {}, {
         ICONS: Readonly<{

package/dist/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.vue.d.ts

@@ -55,9 +55,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-    hasBorder: {
-        type: BooleanConstructor;
-        default: boolean;
+    borderColor: {
+        type: import('vue').PropType<import('../../Tile').TileBorderColors>;
+        default: null;
+    };
+    additionalTextMaxWidth: {
+        type: import('vue').PropType<import('../../Tile').TileAdditionalTextMaxWidths>;
+        default: "small";
+        validator(value: import('../../Tile').TileAdditionalTextMaxWidths): boolean;
     };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     interactive: {
@@ -116,16 +121,21 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-    hasBorder: {
-        type: BooleanConstructor;
-        default: boolean;
+    borderColor: {
+        type: import('vue').PropType<import('../../Tile').TileBorderColors>;
+        default: null;
+    };
+    additionalTextMaxWidth: {
+        type: import('vue').PropType<import('../../Tile').TileAdditionalTextMaxWidths>;
+        default: "small";
+        validator(value: import('../../Tile').TileAdditionalTextMaxWidths): boolean;
     };
 }>> & Readonly<{}>, {
     color: import('../../Tile').TileColors;
     state: import('../../Tile').TileStates;
     iconLeft: Record<string, any>;
     iconRight: Record<string, any>;
-    hasBorder: boolean;
+    borderColor: import('../../Tile').TileBorderColors;
     interactive: boolean;
     isIconRightHiddenOnMobile: boolean;
     eyebrowText: string;
@@ -133,6 +143,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     isEyebrowTextUppercase: boolean;
     eyebrowEllipsis: boolean;
     textEllipsis: boolean;
+    additionalTextMaxWidth: import('../../Tile').TileAdditionalTextMaxWidths;
 }, {}, {
     DsTile: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
         interactive: {
@@ -191,9 +202,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
-        hasBorder: {
-            type: BooleanConstructor;
-            default: boolean;
+        borderColor: {
+            type: import('vue').PropType<import('../../Tile').TileBorderColors>;
+            default: null;
+        };
+        additionalTextMaxWidth: {
+            type: import('vue').PropType<import('../../Tile').TileAdditionalTextMaxWidths>;
+            default: "small";
+            validator(value: import('../../Tile').TileAdditionalTextMaxWidths): boolean;
         };
     }>, {}, {
         ICONS: Readonly<{
@@ -418,6 +434,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly DISABLED: "disabled";
             readonly LOADING: "loading";
         }>;
+        TILE_ADDITIONAL_TEXT_MAX_WIDTHS: Readonly<{
+            readonly SMALL: "small";
+            readonly MEDIUM: "medium";
+        }>;
     }, {
         tileColor(): any;
         tileState(): any;
@@ -478,16 +498,21 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
-        hasBorder: {
-            type: BooleanConstructor;
-            default: boolean;
+        borderColor: {
+            type: import('vue').PropType<import('../../Tile').TileBorderColors>;
+            default: null;
+        };
+        additionalTextMaxWidth: {
+            type: import('vue').PropType<import('../../Tile').TileAdditionalTextMaxWidths>;
+            default: "small";
+            validator(value: import('../../Tile').TileAdditionalTextMaxWidths): boolean;
         };
     }>> & Readonly<{}>, {
         color: import('../../Tile').TileColors;
         state: import('../../Tile').TileStates;
         iconLeft: Record<string, any>;
         iconRight: Record<string, any>;
-        hasBorder: boolean;
+        borderColor: import('../../Tile').TileBorderColors;
         interactive: boolean;
         isIconRightHiddenOnMobile: boolean;
         eyebrowText: string;
@@ -495,6 +520,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         isEyebrowTextUppercase: boolean;
         eyebrowEllipsis: boolean;
         textEllipsis: boolean;
+        additionalTextMaxWidth: import('../../Tile').TileAdditionalTextMaxWidths;
     }, {}, {
         DsIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
             icon: {