@db-ux/wc-core-components 2.0.8 → 2.0.10-popover-d7e8b9a

package/dist/types/components/select/model.d.ts

@@ -1,7 +1,8 @@
 import { ChangeEventProps, ChangeEventState, ClickEventProps, ClickEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FromValidState, GlobalProps, GlobalState, IconProps, InitializedState, InputEventProps, InputEventState, ShowIconProps } from '../../shared/model';
 export type DBSelectDefaultProps = {
     /**
-     * Enable multiple select -> use DBCustomSelect/db-custom-select for a better look
+     * @deprecated
+     * Enables multiple select, but it isn't styled, please use DBCustomSelect/db-custom-select instead
      */
     multiple?: boolean;
     /**

package/dist/types/components/select/select.d.ts

@@ -31,6 +31,7 @@ export declare class DBSelect {
     size: DBSelectProps["size"];
     autocomplete: DBSelectProps["autocomplete"];
     multiple: DBSelectProps["multiple"];
+    ariaDescribedBy: DBSelectProps["ariaDescribedBy"];
     options: DBSelectProps["options"];
     placeholder: DBSelectProps["placeholder"];
     messageIcon: DBSelectProps["messageIcon"];

package/dist/types/components/switch/switch.d.ts

@@ -20,6 +20,7 @@ export declare class DBSwitch {
     value: DBSwitchProps["value"];
     disabled: DBSwitchProps["disabled"];
     describedbyid: DBSwitchProps["describedbyid"];
+    ariaDescribedBy: DBSwitchProps["ariaDescribedBy"];
     validation: DBSwitchProps["validation"];
     name: DBSwitchProps["name"];
     required: DBSwitchProps["required"];

package/dist/types/components/textarea/textarea.d.ts

@@ -36,6 +36,7 @@ export declare class DBTextarea {
     wrap: DBTextareaProps["wrap"];
     spellCheck: DBTextareaProps["spellCheck"];
     autocomplete: DBTextareaProps["autocomplete"];
+    ariaDescribedBy: DBTextareaProps["ariaDescribedBy"];
     placeholder: DBTextareaProps["placeholder"];
     rows: DBTextareaProps["rows"];
     cols: DBTextareaProps["cols"];

package/dist/types/components/tooltip/model.d.ts

@@ -1,7 +1,9 @@
-import { ClickEventState, EmphasisProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState } from '../../shared/model';
+import { ClickEventState, DocumentScrollState, EmphasisProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState } from '../../shared/model';
 export type DBTooltipDefaultProps = {
     showArrow?: boolean | string;
 };
 export type DBTooltipProps = DBTooltipDefaultProps & GlobalProps & EmphasisProps & PlacementProps & PopoverProps;
-export type DBTooltipDefaultState = {};
-export type DBTooltipState = DBTooltipDefaultState & GlobalState & ClickEventState<HTMLElement> & PopoverState & InitializedState;
+export type DBTooltipDefaultState = {
+    getParent: () => HTMLElement;
+};
+export type DBTooltipState = DBTooltipDefaultState & GlobalState & ClickEventState<HTMLElement> & PopoverState & InitializedState & DocumentScrollState;

package/dist/types/components/tooltip/tooltip.d.ts

@@ -7,17 +7,24 @@ import { ClickEvent } from "../../shared/model";
 export declare class DBTooltip {
     private _ref;
     id: DBTooltipProps["id"];
+    placement: DBTooltipProps["placement"];
     className: DBTooltipProps["className"];
     emphasis: DBTooltipProps["emphasis"];
     animation: DBTooltipProps["animation"];
     delay: DBTooltipProps["delay"];
     width: DBTooltipProps["width"];
     showArrow: DBTooltipProps["showArrow"];
-    placement: DBTooltipProps["placement"];
     _id: string;
     initialized: boolean;
+    _documentScrollListenerCallbackId: any;
+    _observer: any;
     handleClick(event: ClickEvent<HTMLElement>): void;
-    handleAutoPlacement(): void;
+    handleEscape(event: any): void;
+    getParent(): any;
+    handleAutoPlacement(parent?: HTMLElement): void;
+    handleDocumentScroll(event: any, parent?: HTMLElement): void;
+    handleLeave(): void;
+    handleEnter(parent?: HTMLElement): void;
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component

package/dist/types/components.d.ts

@@ -143,6 +143,7 @@ export namespace Components {
         "spacing": DBCardProps["spacing"];
     }
     interface DbCheckbox {
+        "ariaDescribedBy": DBCheckboxProps["ariaDescribedBy"];
         "checked": DBCheckboxProps["checked"];
         "className": DBCheckboxProps["className"];
         "disabled": DBCheckboxProps["disabled"];
@@ -163,6 +164,7 @@ export namespace Components {
     }
     interface DbCustomSelect {
         "amountText": DBCustomSelectProps["amountText"];
+        "ariaDescribedBy": DBCustomSelectProps["ariaDescribedBy"];
         "ariaListLabel": DBCustomSelectProps["ariaListLabel"];
         "className": DBCustomSelectProps["className"];
         "clearSelectionText": DBCustomSelectProps["clearSelectionText"];
@@ -394,6 +396,7 @@ export namespace Components {
         "width": DBPopoverProps["width"];
     }
     interface DbRadio {
+        "ariaDescribedBy": DBRadioProps["ariaDescribedBy"];
         "checked": DBRadioProps["checked"];
         "className": DBRadioProps["className"];
         "describedbyid": DBRadioProps["describedbyid"];
@@ -414,6 +417,7 @@ export namespace Components {
         "width": DBSectionProps["width"];
     }
     interface DbSelect {
+        "ariaDescribedBy": DBSelectProps["ariaDescribedBy"];
         "autocomplete": DBSelectProps["autocomplete"];
         "className": DBSelectProps["className"];
         "disabled": DBSelectProps["disabled"];
@@ -448,6 +452,7 @@ export namespace Components {
         "wrap": DBStackProps["wrap"];
     }
     interface DbSwitch {
+        "ariaDescribedBy": DBSwitchProps["ariaDescribedBy"];
         "checked": DBSwitchProps["checked"];
         "className": DBSwitchProps["className"];
         "describedbyid": DBSwitchProps["describedbyid"];
@@ -518,6 +523,7 @@ export namespace Components {
         "text": DBTagProps["text"];
     }
     interface DbTextarea {
+        "ariaDescribedBy": DBTextareaProps["ariaDescribedBy"];
         "autocomplete": DBTextareaProps["autocomplete"];
         "className": DBTextareaProps["className"];
         "cols": DBTextareaProps["cols"];
@@ -1188,6 +1194,7 @@ declare namespace LocalJSX {
         "spacing"?: DBCardProps["spacing"];
     }
     interface DbCheckbox {
+        "ariaDescribedBy"?: DBCheckboxProps["ariaDescribedBy"];
         "checked"?: DBCheckboxProps["checked"];
         "className"?: DBCheckboxProps["className"];
         "disabled"?: DBCheckboxProps["disabled"];
@@ -1211,6 +1218,7 @@ declare namespace LocalJSX {
     }
     interface DbCustomSelect {
         "amountText"?: DBCustomSelectProps["amountText"];
+        "ariaDescribedBy"?: DBCustomSelectProps["ariaDescribedBy"];
         "ariaListLabel"?: DBCustomSelectProps["ariaListLabel"];
         "className"?: DBCustomSelectProps["className"];
         "clearSelectionText"?: DBCustomSelectProps["clearSelectionText"];
@@ -1455,6 +1463,7 @@ declare namespace LocalJSX {
         "width"?: DBPopoverProps["width"];
     }
     interface DbRadio {
+        "ariaDescribedBy"?: DBRadioProps["ariaDescribedBy"];
         "checked"?: DBRadioProps["checked"];
         "className"?: DBRadioProps["className"];
         "describedbyid"?: DBRadioProps["describedbyid"];
@@ -1478,6 +1487,7 @@ declare namespace LocalJSX {
         "width"?: DBSectionProps["width"];
     }
     interface DbSelect {
+        "ariaDescribedBy"?: DBSelectProps["ariaDescribedBy"];
         "autocomplete"?: DBSelectProps["autocomplete"];
         "className"?: DBSelectProps["className"];
         "disabled"?: DBSelectProps["disabled"];
@@ -1517,6 +1527,7 @@ declare namespace LocalJSX {
         "wrap"?: DBStackProps["wrap"];
     }
     interface DbSwitch {
+        "ariaDescribedBy"?: DBSwitchProps["ariaDescribedBy"];
         "checked"?: DBSwitchProps["checked"];
         "className"?: DBSwitchProps["className"];
         "describedbyid"?: DBSwitchProps["describedbyid"];
@@ -1594,6 +1605,7 @@ declare namespace LocalJSX {
         "text"?: DBTagProps["text"];
     }
     interface DbTextarea {
+        "ariaDescribedBy"?: DBTextareaProps["ariaDescribedBy"];
         "autocomplete"?: DBTextareaProps["autocomplete"];
         "className"?: DBTextareaProps["className"];
         "cols"?: DBTextareaProps["cols"];

package/dist/types/shared/model.d.ts

@@ -13,6 +13,7 @@ export type GlobalProps = {
      */
     class?: string | any;
     /**
+     * @deprecated
      * [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) is used to link to the elements that describe the element with the set attribute.
      */
     describedbyid?: string;
@@ -148,9 +149,6 @@ export type PopoverProps = {
      */
     width?: PopoverWidthType;
 };
-export type PopoverState = {
-    handleAutoPlacement: () => void;
-};
 export type NameProps = {
     /**
      * The name attribute gives the name of the element to group it.
@@ -491,3 +489,14 @@ export type ValueLabelType = {
     value: string;
     label?: string;
 };
+export type DocumentScrollState = {
+    _documentScrollListenerCallbackId?: string;
+    handleDocumentScroll: (event: any, parent?: HTMLElement) => void;
+    _observer?: IntersectionObserver;
+};
+export type PopoverState = {
+    handleEscape: (event: any) => void;
+    handleAutoPlacement: (parent?: HTMLElement) => void;
+    handleEnter: (parent?: HTMLElement) => void;
+    handleLeave: (event?: any) => void;
+} & DocumentScrollState;

package/dist/types/utils/document-scroll-listener.d.ts

@@ -0,0 +1,9 @@
+export declare class DocumentScrollListener {
+    private static callbacks;
+    private static _instance;
+    private static runCallbacks;
+    private ticking;
+    constructor();
+    addCallback(callback: (event: any) => void): string;
+    removeCallback(id: string): void;
+}

package/dist/types/utils/floating-components.d.ts

@@ -0,0 +1,7 @@
+export interface DBDataOutsidePair {
+    vx?: 'left' | 'right';
+    vy?: 'top' | 'bottom';
+}
+export declare const handleDataOutside: (el: HTMLElement) => DBDataOutsidePair;
+export declare const handleFixedDropdown: (element: HTMLElement, parent: HTMLElement, placement: string) => void;
+export declare const handleFixedPopover: (element: HTMLElement, parent: HTMLElement, placement: string) => void;

package/dist/types/utils/index.d.ts

@@ -7,19 +7,6 @@ export type ClassNameArg = string | {
     [key: string]: boolean | undefined;
 } | undefined;
 export declare const cls: (...args: ClassNameArg[]) => string;
-export declare const visibleInVX: (el: Element) => boolean;
-export declare const visibleInVY: (el: Element) => boolean;
-export declare const isInView: (el: Element) => {
-    outTop: boolean;
-    outBottom: boolean;
-    outLeft: boolean;
-    outRight: boolean;
-};
-export interface DBDataOutsidePair {
-    vx?: 'left' | 'right';
-    vy?: 'top' | 'bottom';
-}
-export declare const handleDataOutside: (el: Element) => DBDataOutsidePair;
 export declare const isArrayOfStrings: (value: unknown) => value is string[];
 export declare const hasVoiceOver: () => boolean;
 export declare const delay: (fn: () => void, ms: number) => Promise<unknown>;

package/dist/types/utils/navigation.d.ts

@@ -15,7 +15,7 @@ export declare class NavigationItemSafeTriangle {
     private initialized;
     private mouseX;
     private mouseY;
-    constructor(element: HTMLElement | null, subNavigation: Element | null);
+    constructor(element: HTMLElement | null, subNavigation: HTMLElement | null);
     private init;
     enableFollow(): void;
     disableFollow(): void;

package/dist/vscode.html-custom-data.json

@@ -90,11 +90,7 @@
           "description": "The value attribute specifies an initial [value for the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value).",
           "values": []
         },
-        {
-          "name": "describedbyid",
-          "description": "[`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) is used to link to the elements that describe the element with the set attribute.",
-          "values": []
-        },
+        { "name": "describedbyid", "description": "", "values": [] },
         {
           "name": "ariaexpanded",
           "description": "If the button controls a grouping of other elements, the ariaexpanded state [indicates whether the controlled grouping is currently expanded or collapsed](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded).",
@@ -479,6 +475,11 @@
           "description": "The value property is to receive results from the native form element.",
           "values": []
         },
+        {
+          "name": "aria-described-by",
+          "description": "Overwrites auto handling for aria-describedby.",
+          "values": []
+        },
         {
           "name": "label",
           "description": "The label attribute specifies the caption of the form element.",
@@ -678,14 +679,7 @@
             { "name": "64" }
           ]
         },
-        {
-          "name": "variant",
-          "values": [
-            { "name": "default" },
-            { "name": "inverted" },
-            { "name": "filled" }
-          ]
-        },
+        { "name": "variant", "values": [] },
         {
           "name": "text",
           "description": "Alternative for default slot/children.",
@@ -1138,7 +1132,12 @@
           "description": "The disabled attribute can be set to keep a user from clicking on the form element.",
           "values": []
         },
-        { "name": "describedbyid", "values": [] },
+        { "name": "describedbyid", "description": "", "values": [] },
+        {
+          "name": "aria-described-by",
+          "description": "Overwrites auto handling for aria-describedby.",
+          "values": []
+        },
         {
           "name": "value",
           "description": "The value property is to receive results from the native form element.",
@@ -1346,9 +1345,10 @@
             { "name": "webauthn" }
           ]
         },
+        { "name": "multiple", "description": "", "values": [] },
         {
-          "name": "multiple",
-          "description": "Enable multiple select -> use DBCustomSelect/db-custom-select for a better look",
+          "name": "aria-described-by",
+          "description": "Overwrites auto handling for aria-describedby.",
           "values": []
         },
         {
@@ -1418,9 +1418,10 @@
           "description": "The disabled attribute can be set to keep a user from clicking on the form element.",
           "values": []
         },
+        { "name": "describedbyid", "description": "", "values": [] },
         {
-          "name": "describedbyid",
-          "description": "[`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) is used to link to the elements that describe the element with the set attribute.",
+          "name": "aria-described-by",
+          "description": "Overwrites auto handling for aria-describedby.",
           "values": []
         },
         {
@@ -1798,6 +1799,11 @@
             { "name": "webauthn" }
           ]
         },
+        {
+          "name": "aria-described-by",
+          "description": "Overwrites auto handling for aria-describedby.",
+          "values": []
+        },
         {
           "name": "placeholder",
           "description": "Text that appears in the form control when it has no value set",
@@ -1998,6 +2004,11 @@
       "name": "db-popover",
       "description": "\n---\n\n\n### **Slots:**\n - **children** - default slot\n- **trigger** - The trigger to open the popover e.g. a button",
       "attributes": [
+        {
+          "name": "placement",
+          "description": "The `placement` attributes values change the position to absolute and adds a transform based on the placement.",
+          "values": [{ "name": "undefined" }, { "name": "undefined" }]
+        },
         {
           "name": "id",
           "description": "[ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the component, generated automatically for some components as a fallback if unset.",
@@ -2042,11 +2053,6 @@
           "name": "width",
           "description": "Use fixed with for default max-width",
           "values": [{ "name": "auto" }, { "name": "fixed" }]
-        },
-        {
-          "name": "placement",
-          "description": "The `placement` attributes values change the position to absolute and adds a transform based on the placement.",
-          "values": [{ "name": "undefined" }, { "name": "undefined" }]
         }
       ],
       "references": []
@@ -2060,6 +2066,11 @@
           "description": "[ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the component, generated automatically for some components as a fallback if unset.",
           "values": []
         },
+        {
+          "name": "placement",
+          "description": "The `placement` attributes values change the position to absolute and adds a transform based on the placement.",
+          "values": [{ "name": "undefined" }, { "name": "undefined" }]
+        },
         {
           "name": "classname",
           "description": "React specific for adding className to the component.",
@@ -2085,12 +2096,7 @@
           "description": "Use fixed with for default max-width",
           "values": [{ "name": "auto" }, { "name": "fixed" }]
         },
-        { "name": "show-arrow", "values": [] },
-        {
-          "name": "placement",
-          "description": "The `placement` attributes values change the position to absolute and adds a transform based on the placement.",
-          "values": [{ "name": "undefined" }, { "name": "undefined" }]
-        }
+        { "name": "show-arrow", "values": [] }
       ],
       "references": []
     },
@@ -2409,6 +2415,11 @@
           "description": "Enables or disables the visibility of the message.",
           "values": []
         },
+        {
+          "name": "aria-described-by",
+          "description": "Overwrites auto handling for aria-describedby.",
+          "values": []
+        },
         {
           "name": "show-no-results",
           "description": "Dropdown - enable no options infotext",
@@ -2482,6 +2493,18 @@
           "description": "Optional: if you use selectedType=tag and options, you need to set the removeTagsTexts for screen reader users",
           "values": [{ "name": "string[]" }]
         },
+        {
+          "name": "placement",
+          "description": "The `placement` attributes values change the position to absolute and adds a transform based on the placement.",
+          "values": [
+            { "name": "top" },
+            { "name": "bottom" },
+            { "name": "top-start" },
+            { "name": "top-end" },
+            { "name": "bottom-start" },
+            { "name": "bottom-end" }
+          ]
+        },
         {
           "name": "classname",
           "description": "React specific for adding className to the component.",
@@ -2497,18 +2520,6 @@
           "description": "Change the variant of the label to float or hidden",
           "values": [{ "name": "above" }, { "name": "floating" }]
         },
-        {
-          "name": "placement",
-          "description": "The `placement` attributes values change the position to absolute and adds a transform based on the placement.",
-          "values": [
-            { "name": "top" },
-            { "name": "bottom" },
-            { "name": "top-start" },
-            { "name": "top-end" },
-            { "name": "bottom-start" },
-            { "name": "bottom-end" }
-          ]
-        },
         {
           "name": "show-label",
           "description": "Enables/disables the visibility of the label",