@ukic/web-components 2.6.0 → 2.8.0

package/dist/types/components/ic-dialog/ic-dialog.d.ts

@@ -6,7 +6,8 @@ import { EventEmitter } from "../../stencil-public-runtime";
  * @slot alert - Content will be placed at the top of the content area of the dialog.
  */
 export declare class Dialog {
-  private DATA_OVERFLOW;
+  private backdropEl;
+  private contentArea;
   private DATA_GETS_FOCUS;
   private DATA_GETS_FOCUS_SELECTOR;
   private DIALOG_CONTROLS;
@@ -49,6 +50,15 @@ export declare class Dialog {
    * Sets the dismiss label tooltip and aria label.
    */
   dismissLabel?: string;
+  /**
+   * If set to `true`, the content area max height and overflow properties are removed allowing the dialog to stretch below the fold.
+   * This prop also prevents popover elements from being cut off within the content area.
+   */
+  disableHeightConstraint?: boolean;
+  /**
+   * If `true`, the close button will not be displayed.
+   */
+  hideCloseButton?: boolean;
   /**
    * Sets the heading for the dialog.
    */
@@ -94,8 +104,10 @@ export declare class Dialog {
    * Emitted when dialog has opened.
    */
   icDialogOpened: EventEmitter<void>;
+  disconnectedCallback(): void;
   componentWillLoad(): void;
   componentDidLoad(): void;
+  componentDidRender(): void;
   handleKeyboard(ev: KeyboardEvent): void;
   handleClick(ev: MouseEvent): void;
   /**
@@ -114,9 +126,11 @@ export declare class Dialog {
    * Confirms the dialog. Used by the default 'Confirm' button or can be called manually to trigger confirming of dialog.
    */
   confirmDialog(): Promise<void>;
-  private setContentOverflow;
+  private dialogOpened;
   private runResizeObserver;
   private resizeObserverCallback;
+  private refreshInteractiveElementsOnSlotChange;
+  private removeSlotChangeListener;
   private setInitialFocus;
   private getFocusedElementIndex;
   private setAlertVariant;
@@ -129,5 +143,6 @@ export declare class Dialog {
   private getButtonVariant;
   private loopNextFocusIndexIfLastElement;
   private setFocusIndexBasedOnShiftKey;
+  private renderDialog;
   render(): any;
 }

package/dist/types/components/ic-horizontal-scroll/ic-horizontal-scroll.d.ts

@@ -15,6 +15,10 @@ export declare class HorizontalScroll {
    * The appearance of the horizontal scroll, e.g. dark, light or the default.
    */
   appearance?: IcThemeForeground;
+  /**
+   * @internal The name of the event that triggers focus handler logic.
+   */
+  focusTrigger?: string;
   componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;

package/dist/types/components/ic-menu/ic-menu.d.ts

@@ -3,7 +3,6 @@ import { IcActivationTypes, IcMenuOption, IcSizesNoLarge, IcValueEventDetail } f
 import { IcOptionSelectEventDetail, IcMenuChangeEventDetail, IcMenuOptionIdEventDetail } from "./ic-menu.types";
 import { IcSearchBarSearchModes } from "../ic-search-bar/ic-search-bar.types";
 export declare class Menu {
-  private firstRender;
   private disabledOptionSelected;
   private hasPreviouslyBlurred;
   private hasTimedOut;
@@ -14,7 +13,7 @@ export declare class Menu {
   private popperInstance;
   private preventClickOpen;
   private ungroupedOptions;
-  el: HTMLIcMenuElement;
+  host: HTMLIcMenuElement;
   focusFromSearchKeypress: boolean;
   initialOptionsListRender: boolean;
   keyboardNav: boolean;
@@ -56,6 +55,7 @@ export declare class Menu {
    * If `true`, the menu will be displayed open.
    */
   open: boolean;
+  watchOpenHandler(): void;
   /**
    * @internal - The parent element if ic-menu is nested inside another component.
    */
@@ -64,6 +64,10 @@ export declare class Menu {
    * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.
    */
   searchMode?: IcSearchBarSearchModes;
+  /**
+   * @internal If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.
+   */
+  selectOnEnter?: boolean;
   /**
    * The size of the menu component.
    */
@@ -145,6 +149,12 @@ export declare class Menu {
    * @internal Used to highlight the first option in the menu.
    */
   handleSetFirstOption(): Promise<void>;
+  /**
+   * @internal Used to initialize popperJS with an anchor element.
+   * 5/12/2023: Tested with Floating UI, however, discovered inconsistent
+   * boundary behaviour so sticking with PopperJS.
+   */
+  initPopperJs(anchor: HTMLElement): Promise<void>;
   private handleClearListener;
   private handleSubmitSearch;
   private handleMenuChange;

package/dist/types/components/ic-popover-menu/ic-popover-menu.d.ts

@@ -3,7 +3,6 @@ export declare class PopoverMenu {
   private ARIA_LABEL;
   private backButton;
   private currentFocus;
-  private firstRender;
   private popoverMenuEls;
   private popperInstance;
   el: HTMLIcPopoverMenuElement;
@@ -58,5 +57,6 @@ export declare class PopoverMenu {
   private addMenuItems;
   private getMenuAriaLabel;
   private handleBackButtonClick;
+  private initPopperJS;
   render(): any;
 }

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

@@ -128,6 +128,10 @@ export declare class Select {
    * Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering.
    */
   searchMatchPosition?: IcSearchMatchPositions;
+  /**
+   * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.
+   */
+  selectOnEnter?: boolean;
   /**
    * If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select.
    */

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

@@ -13,6 +13,7 @@ export declare class Switch {
    * If `true`, the switch will display as checked.
    */
   checked?: boolean;
+  checkedChangeHandler(): void;
   /**
    * If `true`, the disabled state will be set.
    */

package/dist/types/components/ic-text-field/ic-text-field.d.ts

@@ -208,6 +208,7 @@ export declare class TextField {
    * Sets focus on the native `input`.
    */
   setFocus(): Promise<void>;
+  private getMaxLengthExceeded;
   private onInput;
   private onBlur;
   private onFocus;

package/dist/types/components/ic-toast/ic-toast.d.ts

@@ -53,7 +53,7 @@ export declare class Toast {
   handleKeyboard(ev: KeyboardEvent): void;
   handleTimer(ev: MouseEvent): void;
   /**
-   * Used to display the individual toast
+   * @internal Used to display the individual toast.
    * @returns The element that previously had focus before the toast appeared
    */
   setVisible(): Promise<HTMLElement>;

package/dist/types/components/ic-toast-region/ic-toast-region.d.ts

@@ -2,10 +2,15 @@ export declare class ToastRegion {
   private pendingVisibility;
   private previouslyFocused;
   el: HTMLIcToastRegionElement;
+  /**
+   * The toast element to be displayed.
+   */
+  openToast: HTMLIcToastElement;
+  watchOpenToastHandler(newValue: HTMLIcToastElement): void;
   handleDismissedToast(): void;
+  private showToast;
   /**
-   * Handles setting the visibility of various toasts based on what is already visible
-   * @param toast The toast element being requested to display
+   * @deprecated Use openToast prop to display toast instead.
    */
   setVisible(toast: HTMLIcToastElement): Promise<void>;
   render(): any;

package/dist/types/components/ic-top-navigation/ic-top-navigation.d.ts

@@ -3,6 +3,7 @@ import { IcAlignment, IcThemeForeground } from "../../utils/types";
 /**
  * @slot app-icon - Content will be rendered to left of app title.
  * @slot app-title - Handle routing by nesting a route in the app title.
+ * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).
  * @slot search - Content will be rendered in search area to left of buttons.
  * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices
  * @slot navigation - Content will be rendered in navigation panel.

package/dist/types/components.d.ts

@@ -591,6 +591,10 @@ export namespace Components {
           * If default buttons are displayed, sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button.
          */
         "destructive"?: boolean;
+        /**
+          * If set to `true`, the content area max height and overflow properties are removed allowing the dialog to stretch below the fold. This prop also prevents popover elements from being cut off within the content area.
+         */
+        "disableHeightConstraint"?: boolean;
         /**
           * Sets the dismiss label tooltip and aria label.
          */
@@ -599,6 +603,10 @@ export namespace Components {
           * Sets the heading for the dialog.
          */
         "heading": string;
+        /**
+          * If `true`, the close button will not be displayed.
+         */
+        "hideCloseButton"?: boolean;
         /**
           * @deprecated This method should not be used anymore. Use open prop to set dialog visibility.
          */
@@ -757,6 +765,7 @@ export namespace Components {
           * The appearance of the horizontal scroll, e.g. dark, light or the default.
          */
         "appearance"?: IcThemeForeground;
+        "focusTrigger"?: string;
         "scrollItemIntoView": (itemPosition: number) => Promise<void>;
     }
     interface IcInputComponentContainer {
@@ -973,6 +982,7 @@ export namespace Components {
          */
         "handleKeyboardOpen": (event: KeyboardEvent) => Promise<void>;
         "handleSetFirstOption": () => Promise<void>;
+        "initPopperJs": (anchor: HTMLElement) => Promise<void>;
         /**
           * The reference to the input element.
          */
@@ -1002,6 +1012,7 @@ export namespace Components {
           * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.
          */
         "searchMode"?: IcSearchBarSearchModes;
+        "selectOnEnter"?: boolean;
         /**
           * The size of the menu component.
          */
@@ -1668,6 +1679,10 @@ export namespace Components {
           * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options.
          */
         "searchable"?: boolean;
+        /**
+          * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.
+         */
+        "selectOnEnter"?: boolean;
         /**
           * Sets focus on the input box.
          */
@@ -2099,7 +2114,6 @@ export namespace Components {
          */
         "neutralIconAriaLabel"?: string;
         /**
-          * Used to display the individual toast
           * @returns The element that previously had focus before the toast appeared
          */
         "setVisible": () => Promise<HTMLElement>;
@@ -2110,8 +2124,11 @@ export namespace Components {
     }
     interface IcToastRegion {
         /**
-          * Handles setting the visibility of various toasts based on what is already visible
-          * @param toast The toast element being requested to display
+          * The toast element to be displayed.
+         */
+        "openToast": HTMLIcToastElement;
+        /**
+          * @deprecated Use openToast prop to display toast instead.
          */
         "setVisible": (toast: HTMLIcToastElement) => Promise<void>;
     }
@@ -3274,6 +3291,10 @@ declare namespace LocalJSX {
           * If default buttons are displayed, sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button.
          */
         "destructive"?: boolean;
+        /**
+          * If set to `true`, the content area max height and overflow properties are removed allowing the dialog to stretch below the fold. This prop also prevents popover elements from being cut off within the content area.
+         */
+        "disableHeightConstraint"?: boolean;
         /**
           * Sets the dismiss label tooltip and aria label.
          */
@@ -3282,6 +3303,10 @@ declare namespace LocalJSX {
           * Sets the heading for the dialog.
          */
         "heading": string;
+        /**
+          * If `true`, the close button will not be displayed.
+         */
+        "hideCloseButton"?: boolean;
         /**
           * Sets the optional label for the dialog which appears above the heading.
          */
@@ -4404,6 +4429,10 @@ declare namespace LocalJSX {
           * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options.
          */
         "searchable"?: boolean;
+        /**
+          * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.
+         */
+        "selectOnEnter"?: boolean;
         /**
           * If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select.
          */
@@ -4840,6 +4869,10 @@ declare namespace LocalJSX {
         "variant"?: IcStatusVariants;
     }
     interface IcToastRegion {
+        /**
+          * The toast element to be displayed.
+         */
+        "openToast"?: HTMLIcToastElement;
     }
     interface IcTooltip {
         /**

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

@@ -54,7 +54,7 @@ export declare const isMobileOrTablet: () => boolean;
  */
 export declare const handleHiddenFormButtonClick: (form: HTMLFormElement, button: HTMLIcButtonElement | HTMLButtonElement) => void;
 export declare const isEmptyString: (value: string) => boolean;
-export declare const isPropDefined: (prop: string) => string;
+export declare const isPropDefined: (prop: string) => string | null;
 /**
  * Extracts the label using the value from an object. Requires the object to have a label and value property.
  * @param value - value from object
@@ -117,7 +117,7 @@ export declare const elementOverflowsX: (element: HTMLElement) => boolean;
 export declare const getParentElementType: (child: HTMLElement) => string;
 export declare const getParentElement: (child: HTMLElement) => HTMLElement;
 export declare const hasClassificationBanner: () => boolean;
-export declare const getForm: (el: HTMLElement) => HTMLFormElement | null;
+export declare const getForm: (el: HTMLElement) => HTMLFormElement;
 export declare const addFormResetListener: (el: HTMLElement, callbackFn: IcCallbackFunctionNoReturn) => void;
 export declare const removeFormResetListener: (el: HTMLElement, callbackFn: IcCallbackFunctionNoReturn) => void;
 export declare const pxToRem: (px: string, base?: number) => string;