@ukic/web-components 3.18.0 → 3.20.0

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

@@ -1,6 +1,5 @@
 import { EventEmitter } from "../stencil-public-runtime";
-import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA, IcDeviceSizes, IcColor, IcBrandForegroundNoDefault, IcThemeMode } from "./types";
-import { IcMenuOption, IcBrandForeground } from "../utils/types";
+import { IcBrandForeground, IcBrandForegroundNoDefault, IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcMenuOption, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA, IcDeviceSizes, IcColor, IcThemeMode } from "./types";
 /**
  * converts an enum of strings into an array of strings
  */
@@ -165,3 +164,71 @@ export declare const hasDynamicChildSlots: (mutationList: MutationRecord[], slot
 export declare const renderDynamicChildSlots: (mutationList: MutationRecord[], slotNames: string | string[], ref: any) => void;
 export declare const getElementInheritedTheme: (el: HTMLElement) => IcThemeMode;
 export declare const isSafari: boolean;
+/**
+ * Focuses the provided element, or the next focusable element if it should be skipped. Used for focus trapping.
+ * @param focusAttemptCount - number of focus attempts that have been made
+ * @param focusedElementIndex - current focused element index
+ * @param interactiveElementList - list of interactive elements
+ * @param shiftKey - whether the shift key is pressed
+ */
+export declare const focusElement: (focusAttemptCount: number, focusedElementIndex: number, interactiveElementList: HTMLElement[], shiftKey?: boolean) => {
+    newFocusAttemptCount: number;
+    newFocusedElementIndex: number;
+} | undefined;
+/**
+ * Gets the index of the currently focused element. Used for focus trapping.
+ * @param el - host element of the component
+ * @param interactiveElementList - list of interactive elements
+ */
+export declare const getFocusedElementIndex: (el: HTMLElement, interactiveElementList: HTMLElement[]) => number | null;
+/**
+ * Gets the next focusable element index based on whether the shift key is pressed. Used for focus trapping.
+ * @param focusedElementIndex - current focused element index
+ * @param shiftKey - whether the shift key is pressed
+ */
+export declare const getFocusIndexBasedOnShiftKey: (focusedElementIndex: number, shiftKey: boolean) => number;
+/**
+ * Gets the next focusable element index, looping back to the start or end if necessary. Used for focus trapping.
+ * @param focusedElementIndex - current focused element index
+ * @param interactiveElementList - list of interactive elements
+ */
+export declare const getLoopedNextFocusIndexIfLastElement: (focusedElementIndex: number, interactiveElementList: HTMLElement[]) => number;
+/**
+ * Handles tab key press for focus trapping.
+ * @param el - host element of the component
+ * @param focusAttemptCount - number of focus attempts that have been made
+ * @param focusedElementIndex - current focused element index
+ * @param interactiveElementList - list of interactive elements
+ * @param shiftKey - whether the shift key is pressed
+ */
+export declare function handleFocusTrapTabKeyPress(el: HTMLElement, focusAttemptCount: number, focusedElementIndex: number, interactiveElementList: HTMLElement[], shiftKey: boolean): {
+    newFocusAttemptCount: number;
+    newFocusedElementIndex: number;
+    preventDefault: boolean;
+};
+/**
+ * Sets up listener and mutation observer to refresh interactive elements on slot changes. Used for focus trapping.
+ * @param contentWrapper - content wrapper element
+ * @param getInteractiveElements - function to get interactive elements
+ */
+export declare const refreshInteractiveElementsOnSlotChange: (contentWrapper: HTMLElement | null, getInteractiveElements: () => void) => {
+    contentAreaSlot: HTMLSlotElement | null;
+    contentAreaMutationObserver: MutationObserver | null;
+};
+/**
+ * Removes listener and disconnects mutation observer for slot changes. Used for focus trapping.
+ * @param contentAreaSlotMutationObserver - mutation observer for content area slot
+ * @param contentAreaSlot - content area slot element
+ * @param getInteractiveElements - function to get interactive elements
+ */
+export declare const removeInteractiveElementSlotChangeListener: (contentAreaSlot: HTMLSlotElement | null | undefined, contentAreaSlotMutationObserver: MutationObserver | null, getInteractiveElements: () => void) => void;
+/**
+ * Determines whether an element should be skipped when focusing interactive elements. Used for focus trapping.
+ * @param element - element to check
+ */
+export declare const shouldSkipElement: (element: HTMLElement) => boolean;
+/**
+ * Gets all interactive elements slotted within a component. Used for focus trapping.
+ * @param el - host element of the component
+ */
+export declare const slottedInteractiveElements: (el: HTMLElement) => HTMLElement[];

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

@@ -95,4 +95,5 @@ export type IcButtonTooltipPlacement = "top" | "right" | "bottom" | "left";
 export type IcThemeSettings = "dark" | "light" | "system";
 export type IcAriaLive = "polite" | "assertive" | "off";
 export type IcValidationAriaLive = "default" | "polite" | "assertive" | "off";
+export type IcPosition = "top" | "right" | "bottom" | "left";
 export {};