@ukic/canary-web-components 3.0.0-canary.1 → 3.0.0-canary.10

package/dist/types/components.d.ts

@@ -6,19 +6,15 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
+import { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSizes, IcThemeMode, IcWeekDays } from "./utils/types";
 import { IcDataTableColumnObject, IcDataTableDataType, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } from "./components/ic-data-table/ic-data-table.types";
-import { IcActivationTypes, IcMenuOption, IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
-import { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSearchMatchPositions, IcSizes, IcThemeForegroundNoDefault as IcThemeForegroundNoDefault1, IcValueEventDetail, IcWeekDays } from "./utils/types";
-import { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEventDetail, IcSearchBarSearchModes } from "@ukic/web-components/dist/types/components";
 import { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
-import { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
+import { IcPageChangeEventDetail } from "./components/ic-pagination-bar/ic-pagination-bar.types";
 export { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
+export { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSizes, IcThemeMode, IcWeekDays } from "./utils/types";
 export { IcDataTableColumnObject, IcDataTableDataType, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } from "./components/ic-data-table/ic-data-table.types";
-export { IcActivationTypes, IcMenuOption, IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
-export { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSearchMatchPositions, IcSizes, IcThemeForegroundNoDefault as IcThemeForegroundNoDefault1, IcValueEventDetail, IcWeekDays } from "./utils/types";
-export { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEventDetail, IcSearchBarSearchModes } from "@ukic/web-components/dist/types/components";
 export { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
-export { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
+export { IcPageChangeEventDetail } from "./components/ic-pagination-bar/ic-pagination-bar.types";
 export namespace Components {
     interface IcCardHorizontal {
         /**
@@ -65,12 +61,20 @@ export namespace Components {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
     }
     interface IcDataTable {
         /**
           * The title for the table only visible to screen readers.
          */
         "caption": string;
+        /**
+          * Determines whether the column header should be truncated and display a tooltip. Default is `false`.
+         */
+        "columnHeaderTruncation": boolean;
         /**
           * The column headers for the table.
          */
@@ -78,11 +82,15 @@ export namespace Components {
         /**
           * The row content for the table.
          */
-        "data": IcDataTableDataType[];
+        "data"?: IcDataTableDataType[];
         /**
           * Set the density of the table including font and padding.
          */
         "density"?: IcDataTableDensityOptions;
+        /**
+          * If `true`, the built in sort functionality will be disabled. For example, if rows will already be sorted from an external source.
+         */
+        "disableAutoSort"?: boolean;
         /**
           * Applies a border to the table container.
          */
@@ -99,6 +107,10 @@ export namespace Components {
           * If `true`, column headers will not be visible.
          */
         "hideColumnHeaders"?: boolean;
+        /**
+          * If `true`, the selected row is highlighted using a background colour.
+         */
+        "highlightSelectedRow"?: boolean;
         /**
           * When set to `true`, the full table will show a loading state, featuring a radial indicator.
          */
@@ -107,7 +119,6 @@ export namespace Components {
           * Sets the props for the circular loading indicator used in the loading state.
          */
         "loadingOptions"?: {
-    appearance?: IcThemeForegroundNoDefault;
     description?: string;
     label?: string;
     labelDuration?: number;
@@ -115,6 +126,8 @@ export namespace Components {
     min?: number;
     progress?: number;
     showBackground?: boolean;
+    monochrome?: boolean;
+    overlay?: boolean;
   };
         /**
           * Sets the maximum width of the data table. Can be set in `px`, `rem`, or `%`.
@@ -163,6 +176,10 @@ export namespace Components {
           * Sets the layout of the table
          */
         "tableLayout"?: "fixed" | "auto";
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * Sets the method used to truncate long text in cells where textWrap is `false`. The `tooltip` truncation pattern allows the overflowing text to be seen in a tooltip. The `show-hide` truncation pattern allows the overflowing text to be shown and hidden using the ic-typography "See more"/"See less" buttons.
          */
@@ -175,11 +192,11 @@ export namespace Components {
           * Sets the props for the linear loading indicator used in the updating state.
          */
         "updatingOptions"?: {
-    appearance?: IcThemeForegroundNoDefault;
     description?: string;
     max?: number;
     min?: number;
     progress?: number;
+    monochrome?: boolean;
   };
         /**
           * Allows for custom setting of row heights on individual rows based on an individual value from the `data` prop and the row index. If the function returns `null`, that row's height will be set to the `globalRowHeight` property.
@@ -257,6 +274,10 @@ export namespace Components {
           * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
          */
         "hideHelperText": boolean;
+        /**
+          * If `true`, the label will be visually hidden, but will still be read out by screen readers.
+         */
+        "hideLabel"?: boolean;
         /**
           * The ID for the input.
          */
@@ -296,6 +317,10 @@ export namespace Components {
           * The size of the date input to be displayed.
          */
         "size"?: IcSizes;
+        /**
+          * Sets the date picker to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         "triggerIcChange": (d: Date) => Promise<void>;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
@@ -351,6 +376,10 @@ export namespace Components {
           * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
          */
         "hideHelperText": boolean;
+        /**
+          * If `true`, the label will be visually hidden, but the required label will still be read out by screen readers.
+         */
+        "hideLabel"?: boolean;
         /**
           * The ID for the input field. The default will be an automatically generated value.
          */
@@ -403,6 +432,10 @@ export namespace Components {
           * The first day of the week. `0` for Sunday, `1` for Monday, etc. Default is Monday.
          */
         "startOfWeek"?: IcWeekDays;
+        /**
+          * Sets the date picker to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
          */
@@ -416,84 +449,19 @@ export namespace Components {
          */
         "value"?: string | Date | null | undefined;
     }
-    interface IcMenuWithMulti {
-        /**
-          * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.
-         */
-        "activationType"?: IcActivationTypes;
-        /**
-          * The reference to an anchor element the menu will position itself from when rendered.
-         */
-        "anchorEl": HTMLElement;
-        "autoFocusOnSelected": boolean;
-        /**
-          * If `true`, the menu will close when an option is selected.
-         */
-        "closeOnSelect": boolean;
-        /**
-          * If `true`, the menu will fill the width of the container.
-         */
-        "fullWidth": boolean;
-        "handleClickOpen": () => Promise<void>;
-        /**
-          * Used alongside activationType If menu is opened via keyboard navigation (i.e. Enter, ArrowUp or ArrowDown), emit optionSelect custom event.
-          * @param event - keyboard event
-         */
-        "handleKeyboardOpen": (event: KeyboardEvent) => Promise<void>;
-        "handleSetFirstOption": () => Promise<void>;
-        "initPopperJs": (anchor: HTMLElement) => Promise<void>;
-        /**
-          * The reference to the input element.
-         */
-        "inputEl": HTMLElement;
-        /**
-          * The label for the input element.
-         */
-        "inputLabel": string;
-        /**
-          * The custom name for the label field for IcMenuOption.
-         */
-        "labelField": string;
-        /**
-          * The ID of the menu.
-         */
-        "menuId": string;
-        /**
-          * If `true`, the menu will be displayed open.
-         */
-        "open": boolean;
-        /**
-          * The possible menu selection options.
-         */
-        "options": IcMenuOption[];
-        "parentEl"?: HTMLElement;
-        /**
-          * 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.
-         */
-        "size"?: IcSizes;
-        /**
-          * The value of the currently selected option - or array of values (if multiple options allowed).
-         */
-        "value": string | string[];
-        /**
-          * The custom name for the value field for IcMenuOption.
-         */
-        "valueField": string;
-    }
     interface IcPaginationBar {
         /**
           * Sets the alignment of the items in the pagination bar.
          */
         "alignment"?: IcPaginationAlignmentOptions;
         /**
-          * Sets the styling for the items in the pagination bar.
+          * The current page number to be displayed on the pagination bar.
          */
-        "appearance"?: IcThemeForeground;
+        "currentPage"?: number;
+        /**
+          * If `true`, the 'All' option will be hidden from the 'items per page' select input.
+         */
+        "hideAllFromItemsPerPage"?: boolean;
         /**
           * If `true`, the number of total items and current item range or number of total pages and current page will be hidden.
          */
@@ -503,12 +471,16 @@ export namespace Components {
          */
         "itemLabel"?: string;
         /**
-          * The options which will be displayed for 'items per page' select input. Set a maximum of 4 options including a required 'All' option with value equal to total number of items.
+          * The options which will be displayed for 'items per page' select input.
          */
         "itemsPerPageOptions"?: {
     label: string;
     value: string;
   }[];
+        /**
+          * If `true`, the pagination bar will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * The text which will be used in place of 'Page' on the pagination bar.
          */
@@ -517,6 +489,14 @@ export namespace Components {
           * Whether total number of items and current item range or total number of pages and current page is displayed.
          */
         "rangeLabelType"?: IcPaginationLabelTypes;
+        /**
+          * The items per page option to be selected.
+         */
+        "selectedItemsPerPage"?: number;
+        /**
+          * If `true`, the pagination bar is set to the first page when the 'items per page' changes
+         */
+        "setToFirstPageOnPaginationChange"?: boolean;
         /**
           * If `true`, the 'go to page' control should be displayed.
          */
@@ -525,6 +505,10 @@ export namespace Components {
           * If `true`, the select input to control 'items per page' should be displayed.
          */
         "showItemsPerPageControl"?: boolean;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * Total number of items to be displayed across all pages.
          */
@@ -534,135 +518,16 @@ export namespace Components {
          */
         "type"?: IcPaginationTypes;
     }
-    interface IcSelectWithMulti {
-        /**
-          * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
-         */
-        "debounce"?: number;
-        /**
-          * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
-         */
-        "disableAutoFiltering"?: boolean;
-        /**
-          * If `true`, the disabled state will be set.
-         */
-        "disabled"?: boolean;
-        /**
-          * The text displayed when there are no options in the option list.
-         */
-        "emptyOptionListText": string;
-        /**
-          * The <form> element to associate the select with.
-         */
-        "form"?: string;
-        /**
-          * If `true`, the select element will fill the width of the container. This prop should only be used with searchable select and will only be applied if searchable is true.
-         */
-        "fullWidth": boolean;
-        /**
-          * The helper text that will be displayed for additional field guidance.
-         */
-        "helperText"?: string;
-        /**
-          * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
-         */
-        "hideLabel"?: boolean;
-        /**
-          * If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering.
-         */
-        "includeDescriptionsInSearch"?: boolean;
-        /**
-          * If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering.
-         */
-        "includeGroupTitlesInSearch"?: boolean;
-        /**
-          * The label for the select.
-         */
-        "label": string;
-        /**
-          * If `true`, the loading state will be triggered when fetching options asynchronously.
-         */
-        "loading"?: boolean;
-        /**
-          * The message displayed when external loading times out.
-         */
-        "loadingErrorLabel"?: string;
-        /**
-          * The message displayed whilst the options are being loaded externally.
-         */
-        "loadingLabel"?: string;
-        /**
-          * If `true`, multiple options can be selected.
-         */
-        "multiple"?: boolean;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name"?: string;
-        /**
-          * The possible selection options.
-         */
-        "options"?: IcMenuOption[];
-        /**
-          * The placeholder value to be displayed.
-         */
-        "placeholder"?: string;
-        /**
-          * If `true`, the readonly state will be set.
-         */
-        "readonly"?: boolean;
-        /**
-          * If `true`, the select will require a value.
-         */
-        "required"?: boolean;
-        /**
-          * 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`, 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.
-         */
-        "setFocus": () => Promise<void>;
-        /**
-          * If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select.
-         */
-        "showClearButton"?: boolean;
-        /**
-          * The size of the select.
-         */
-        "size"?: IcSizes;
-        /**
-          * If using external filtering, set a timeout for when loading takes too long.
-         */
-        "timeout"?: number;
-        /**
-          * The validation status - e.g. 'error' | 'warning' | 'success'.
-         */
-        "validationStatus"?: IcInformationStatusOrEmpty;
-        /**
-          * The text to display as the validation message.
-         */
-        "validationText"?: string;
-        /**
-          * The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input. For the multi-select variant, the value must be an array of option values.
-         */
-        "value"?: string | string[];
-    }
     interface IcTreeItem {
-        "appearance"?: IcThemeForegroundNoDefault1;
         /**
           * If `true`, the tree item appears in the disabled state.
          */
         "disabled"?: boolean;
+        /**
+          * If `true`, the tree item appears in the expanded state.
+         */
         "expanded": boolean;
+        "focusInset"?: boolean;
         "hasParentExpanded": boolean;
         /**
           * The URL that the tree item link points to. If set, the tree item will render as an "a" tag, otherwise it will render as a div.
@@ -698,13 +563,21 @@ export namespace Components {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
+        /**
+          * If `true`, the tree item label will be truncated instead of text wrapping.
+         */
+        "truncateTreeItem"?: boolean;
         "updateAriaLabel": () => Promise<void>;
     }
     interface IcTreeView {
         /**
-          * The appearance of the tree view, e.g. dark, or light.
+          * If `true`, tree items will have inset focus.
          */
-        "appearance"?: IcThemeForegroundNoDefault1;
+        "focusInset"?: boolean;
         /**
           * The heading of the tree view.
          */
@@ -713,6 +586,18 @@ export namespace Components {
           * The size of the tree view.
          */
         "size"?: IcSizes;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
+        /**
+          * If `true`, the tree view heading will be truncated instead of text wrapping.
+         */
+        "truncateHeading"?: boolean;
+        /**
+          * If `true`, tree items will be truncated, unless they are individually overridden.
+         */
+        "truncateTreeItems"?: boolean;
     }
 }
 export interface IcDataTableCustomEvent<T> extends CustomEvent<T> {
@@ -731,18 +616,10 @@ export interface IcDatePickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcDatePickerElement;
 }
-export interface IcMenuWithMultiCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLIcMenuWithMultiElement;
-}
 export interface IcPaginationBarCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcPaginationBarElement;
 }
-export interface IcSelectWithMultiCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLIcSelectWithMultiElement;
-}
 export interface IcTreeItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcTreeItemElement;
@@ -756,6 +633,7 @@ declare global {
     };
     interface HTMLIcDataTableElementEventMap {
         "icRowHeightChange": void;
+        "icSelectedRowChange": object;
         "icSortChange": IcSortEventDetail;
     }
     interface HTMLIcDataTableElement extends Components.IcDataTable, HTMLStencilElement {
@@ -826,32 +704,8 @@ declare global {
         prototype: HTMLIcDatePickerElement;
         new (): HTMLIcDatePickerElement;
     };
-    interface HTMLIcMenuWithMultiElementEventMap {
-        "menuKeyPress": { isNavKey: boolean; key: string };
-        "menuOptionId": IcMenuOptionIdEventDetail;
-        "menuOptionSelect": IcOptionSelectEventDetail;
-        "menuOptionSelectAll": { select: boolean };
-        "menuStateChange": IcMenuChangeEventDetail;
-        "retryButtonClicked": IcValueEventDetail;
-        "timeoutBlur": { ev: FocusEvent };
-        "ungroupedOptionsSet": { options: IcMenuOption[] };
-    }
-    interface HTMLIcMenuWithMultiElement extends Components.IcMenuWithMulti, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLIcMenuWithMultiElementEventMap>(type: K, listener: (this: HTMLIcMenuWithMultiElement, ev: IcMenuWithMultiCustomEvent<HTMLIcMenuWithMultiElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLIcMenuWithMultiElementEventMap>(type: K, listener: (this: HTMLIcMenuWithMultiElement, ev: IcMenuWithMultiCustomEvent<HTMLIcMenuWithMultiElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLIcMenuWithMultiElement: {
-        prototype: HTMLIcMenuWithMultiElement;
-        new (): HTMLIcMenuWithMultiElement;
-    };
     interface HTMLIcPaginationBarElementEventMap {
-        "icPageChange": { value: number };
+        "icPageChange": IcPageChangeEventDetail;
         "icItemsPerPageChange": { value: number };
     }
     interface HTMLIcPaginationBarElement extends Components.IcPaginationBar, HTMLStencilElement {
@@ -868,30 +722,6 @@ declare global {
         prototype: HTMLIcPaginationBarElement;
         new (): HTMLIcPaginationBarElement;
     };
-    interface HTMLIcSelectWithMultiElementEventMap {
-        "icBlur": void;
-        "icChange": IcValueEventDetail;
-        "icClear": void;
-        "icFocus": void;
-        "icInput": IcValueEventDetail;
-        "icOptionSelect": IcOptionSelectEventDetail;
-        "icOptionDeselect": IcOptionSelectEventDetail;
-        "icRetryLoad": IcValueEventDetail;
-    }
-    interface HTMLIcSelectWithMultiElement extends Components.IcSelectWithMulti, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLIcSelectWithMultiElementEventMap>(type: K, listener: (this: HTMLIcSelectWithMultiElement, ev: IcSelectWithMultiCustomEvent<HTMLIcSelectWithMultiElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLIcSelectWithMultiElementEventMap>(type: K, listener: (this: HTMLIcSelectWithMultiElement, ev: IcSelectWithMultiCustomEvent<HTMLIcSelectWithMultiElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLIcSelectWithMultiElement: {
-        prototype: HTMLIcSelectWithMultiElement;
-        new (): HTMLIcSelectWithMultiElement;
-    };
     interface HTMLIcTreeItemElementEventMap {
         "icTreeItemSelected": { id: string };
     }
@@ -921,9 +751,7 @@ declare global {
         "ic-data-table-title-bar": HTMLIcDataTableTitleBarElement;
         "ic-date-input": HTMLIcDateInputElement;
         "ic-date-picker": HTMLIcDatePickerElement;
-        "ic-menu-with-multi": HTMLIcMenuWithMultiElement;
         "ic-pagination-bar": HTMLIcPaginationBarElement;
-        "ic-select-with-multi": HTMLIcSelectWithMultiElement;
         "ic-tree-item": HTMLIcTreeItemElement;
         "ic-tree-view": HTMLIcTreeViewElement;
     }
@@ -970,12 +798,20 @@ declare namespace LocalJSX {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
     }
     interface IcDataTable {
         /**
           * The title for the table only visible to screen readers.
          */
         "caption": string;
+        /**
+          * Determines whether the column header should be truncated and display a tooltip. Default is `false`.
+         */
+        "columnHeaderTruncation"?: boolean;
         /**
           * The column headers for the table.
          */
@@ -988,6 +824,10 @@ declare namespace LocalJSX {
           * Set the density of the table including font and padding.
          */
         "density"?: IcDataTableDensityOptions;
+        /**
+          * If `true`, the built in sort functionality will be disabled. For example, if rows will already be sorted from an external source.
+         */
+        "disableAutoSort"?: boolean;
         /**
           * Applies a border to the table container.
          */
@@ -1004,6 +844,10 @@ declare namespace LocalJSX {
           * If `true`, column headers will not be visible.
          */
         "hideColumnHeaders"?: boolean;
+        /**
+          * If `true`, the selected row is highlighted using a background colour.
+         */
+        "highlightSelectedRow"?: boolean;
         /**
           * When set to `true`, the full table will show a loading state, featuring a radial indicator.
          */
@@ -1012,7 +856,6 @@ declare namespace LocalJSX {
           * Sets the props for the circular loading indicator used in the loading state.
          */
         "loadingOptions"?: {
-    appearance?: IcThemeForegroundNoDefault;
     description?: string;
     label?: string;
     labelDuration?: number;
@@ -1020,6 +863,8 @@ declare namespace LocalJSX {
     min?: number;
     progress?: number;
     showBackground?: boolean;
+    monochrome?: boolean;
+    overlay?: boolean;
   };
         /**
           * Sets the maximum width of the data table. Can be set in `px`, `rem`, or `%`.
@@ -1037,6 +882,10 @@ declare namespace LocalJSX {
           * Emitted when the `globalRowHeight` or `variableRowHeight` properties change in the data table.
          */
         "onIcRowHeightChange"?: (event: IcDataTableCustomEvent<void>) => void;
+        /**
+          * Emitted when the selected row changes in the data table.
+         */
+        "onIcSelectedRowChange"?: (event: IcDataTableCustomEvent<object>) => void;
         /**
           * Emitted when a column sort button is clicked.
          */
@@ -1072,6 +921,10 @@ declare namespace LocalJSX {
           * Sets the layout of the table
          */
         "tableLayout"?: "fixed" | "auto";
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * Sets the method used to truncate long text in cells where textWrap is `false`. The `tooltip` truncation pattern allows the overflowing text to be seen in a tooltip. The `show-hide` truncation pattern allows the overflowing text to be shown and hidden using the ic-typography "See more"/"See less" buttons.
          */
@@ -1084,11 +937,11 @@ declare namespace LocalJSX {
           * Sets the props for the linear loading indicator used in the updating state.
          */
         "updatingOptions"?: {
-    appearance?: IcThemeForegroundNoDefault;
     description?: string;
     max?: number;
     min?: number;
     progress?: number;
+    monochrome?: boolean;
   };
         /**
           * Allows for custom setting of row heights on individual rows based on an individual value from the `data` prop and the row index. If the function returns `null`, that row's height will be set to the `globalRowHeight` property.
@@ -1165,6 +1018,10 @@ declare namespace LocalJSX {
           * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
          */
         "hideHelperText"?: boolean;
+        /**
+          * If `true`, the label will be visually hidden, but will still be read out by screen readers.
+         */
+        "hideLabel"?: boolean;
         /**
           * The ID for the input.
          */
@@ -1213,6 +1070,10 @@ declare namespace LocalJSX {
           * The size of the date input to be displayed.
          */
         "size"?: IcSizes;
+        /**
+          * Sets the date picker to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
          */
@@ -1267,6 +1128,10 @@ declare namespace LocalJSX {
           * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
          */
         "hideHelperText"?: boolean;
+        /**
+          * If `true`, the label will be visually hidden, but the required label will still be read out by screen readers.
+         */
+        "hideLabel"?: boolean;
         /**
           * The ID for the input field. The default will be an automatically generated value.
          */
@@ -1323,6 +1188,10 @@ declare namespace LocalJSX {
           * The first day of the week. `0` for Sunday, `1` for Monday, etc. Default is Monday.
          */
         "startOfWeek"?: IcWeekDays;
+        /**
+          * Sets the date picker to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
          */
@@ -1336,73 +1205,19 @@ declare namespace LocalJSX {
          */
         "value"?: string | Date | null | undefined;
     }
-    interface IcMenuWithMulti {
-        /**
-          * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.
-         */
-        "activationType"?: IcActivationTypes;
-        /**
-          * The reference to an anchor element the menu will position itself from when rendered.
-         */
-        "anchorEl": HTMLElement;
-        /**
-          * If `true`, the menu will close when an option is selected.
-         */
-        "closeOnSelect"?: boolean;
-        /**
-          * If `true`, the menu will fill the width of the container.
-         */
-        "fullWidth"?: boolean;
-        /**
-          * The reference to the input element.
-         */
-        "inputEl": HTMLElement;
-        /**
-          * The label for the input element.
-         */
-        "inputLabel": string;
-        /**
-          * The custom name for the label field for IcMenuOption.
-         */
-        "labelField"?: string;
-        /**
-          * The ID of the menu.
-         */
-        "menuId": string;
-        /**
-          * If `true`, the menu will be displayed open.
-         */
-        "open": boolean;
-        /**
-          * The possible menu selection options.
-         */
-        "options": IcMenuOption[];
-        /**
-          * 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;
-        /**
-          * The size of the menu.
-         */
-        "size"?: IcSizes;
-        /**
-          * The value of the currently selected option - or array of values (if multiple options allowed).
-         */
-        "value": string | string[];
-        /**
-          * The custom name for the value field for IcMenuOption.
-         */
-        "valueField"?: string;
-    }
     interface IcPaginationBar {
         /**
           * Sets the alignment of the items in the pagination bar.
          */
         "alignment"?: IcPaginationAlignmentOptions;
         /**
-          * Sets the styling for the items in the pagination bar.
+          * The current page number to be displayed on the pagination bar.
+         */
+        "currentPage"?: number;
+        /**
+          * If `true`, the 'All' option will be hidden from the 'items per page' select input.
          */
-        "appearance"?: IcThemeForeground;
+        "hideAllFromItemsPerPage"?: boolean;
         /**
           * If `true`, the number of total items and current item range or number of total pages and current page will be hidden.
          */
@@ -1412,20 +1227,24 @@ declare namespace LocalJSX {
          */
         "itemLabel"?: string;
         /**
-          * The options which will be displayed for 'items per page' select input. Set a maximum of 4 options including a required 'All' option with value equal to total number of items.
+          * The options which will be displayed for 'items per page' select input.
          */
         "itemsPerPageOptions"?: {
     label: string;
     value: string;
   }[];
+        /**
+          * If `true`, the pagination bar will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * Emitted when the items per page option is changed.
          */
         "onIcItemsPerPageChange"?: (event: IcPaginationBarCustomEvent<{ value: number }>) => void;
         /**
-          * Emitted when a page is navigated to via the 'go to' input.
+          * Emitted when a page is navigated to via the 'go to' input. The `detail` property contains `value` (i.e. the page number) and a `fromItemsPerPage` flag to indicate if the event was triggered by the `icItemsPerPageChange` event also occurring.
          */
-        "onIcPageChange"?: (event: IcPaginationBarCustomEvent<{ value: number }>) => void;
+        "onIcPageChange"?: (event: IcPaginationBarCustomEvent<IcPageChangeEventDetail>) => void;
         /**
           * The text which will be used in place of 'Page' on the pagination bar.
          */
@@ -1434,6 +1253,14 @@ declare namespace LocalJSX {
           * Whether total number of items and current item range or total number of pages and current page is displayed.
          */
         "rangeLabelType"?: IcPaginationLabelTypes;
+        /**
+          * The items per page option to be selected.
+         */
+        "selectedItemsPerPage"?: number;
+        /**
+          * If `true`, the pagination bar is set to the first page when the 'items per page' changes
+         */
+        "setToFirstPageOnPaginationChange"?: boolean;
         /**
           * If `true`, the 'go to page' control should be displayed.
          */
@@ -1442,6 +1269,10 @@ declare namespace LocalJSX {
           * If `true`, the select input to control 'items per page' should be displayed.
          */
         "showItemsPerPageControl"?: boolean;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * Total number of items to be displayed across all pages.
          */
@@ -1451,161 +1282,15 @@ declare namespace LocalJSX {
          */
         "type"?: IcPaginationTypes;
     }
-    interface IcSelectWithMulti {
-        /**
-          * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
-         */
-        "debounce"?: number;
-        /**
-          * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
-         */
-        "disableAutoFiltering"?: boolean;
-        /**
-          * If `true`, the disabled state will be set.
-         */
-        "disabled"?: boolean;
-        /**
-          * The text displayed when there are no options in the option list.
-         */
-        "emptyOptionListText"?: string;
-        /**
-          * The <form> element to associate the select with.
-         */
-        "form"?: string;
-        /**
-          * If `true`, the select element will fill the width of the container. This prop should only be used with searchable select and will only be applied if searchable is true.
-         */
-        "fullWidth"?: boolean;
-        /**
-          * The helper text that will be displayed for additional field guidance.
-         */
-        "helperText"?: string;
-        /**
-          * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
-         */
-        "hideLabel"?: boolean;
-        /**
-          * If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering.
-         */
-        "includeDescriptionsInSearch"?: boolean;
-        /**
-          * If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering.
-         */
-        "includeGroupTitlesInSearch"?: boolean;
-        /**
-          * The label for the select.
-         */
-        "label": string;
-        /**
-          * If `true`, the loading state will be triggered when fetching options asynchronously.
-         */
-        "loading"?: boolean;
-        /**
-          * The message displayed when external loading times out.
-         */
-        "loadingErrorLabel"?: string;
-        /**
-          * The message displayed whilst the options are being loaded externally.
-         */
-        "loadingLabel"?: string;
-        /**
-          * If `true`, multiple options can be selected.
-         */
-        "multiple"?: boolean;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name"?: string;
-        /**
-          * Emitted when the select loses focus.
-         */
-        "onIcBlur"?: (event: IcSelectWithMultiCustomEvent<void>) => void;
-        /**
-          * Emitted when the value changes.
-         */
-        "onIcChange"?: (event: IcSelectWithMultiCustomEvent<IcValueEventDetail>) => void;
-        /**
-          * Emitted when the clear button is clicked.
-         */
-        "onIcClear"?: (event: IcSelectWithMultiCustomEvent<void>) => void;
-        /**
-          * Emitted when the select gains focus.
-         */
-        "onIcFocus"?: (event: IcSelectWithMultiCustomEvent<void>) => void;
-        /**
-          * Emitted when a keyboard input occurred.
-         */
-        "onIcInput"?: (event: IcSelectWithMultiCustomEvent<IcValueEventDetail>) => void;
-        /**
-          * Emitted when `multiple` is `true` and an option is deselected.
-         */
-        "onIcOptionDeselect"?: (event: IcSelectWithMultiCustomEvent<IcOptionSelectEventDetail>) => void;
-        /**
-          * Emitted when an option is selected. Selecting an option will also trigger an `icChange/onIcChange` due to the value being updated.
-         */
-        "onIcOptionSelect"?: (event: IcSelectWithMultiCustomEvent<IcOptionSelectEventDetail>) => void;
-        /**
-          * Emitted when the 'retry loading' button is clicked for a searchable variant.
-         */
-        "onIcRetryLoad"?: (event: IcSelectWithMultiCustomEvent<IcValueEventDetail>) => void;
-        /**
-          * The possible selection options.
-         */
-        "options"?: IcMenuOption[];
-        /**
-          * The placeholder value to be displayed.
-         */
-        "placeholder"?: string;
-        /**
-          * If `true`, the readonly state will be set.
-         */
-        "readonly"?: boolean;
-        /**
-          * If `true`, the select will require a value.
-         */
-        "required"?: boolean;
-        /**
-          * 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`, 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.
-         */
-        "showClearButton"?: boolean;
-        /**
-          * The size of the select.
-         */
-        "size"?: IcSizes;
-        /**
-          * If using external filtering, set a timeout for when loading takes too long.
-         */
-        "timeout"?: number;
-        /**
-          * The validation status - e.g. 'error' | 'warning' | 'success'.
-         */
-        "validationStatus"?: IcInformationStatusOrEmpty;
-        /**
-          * The text to display as the validation message.
-         */
-        "validationText"?: string;
-        /**
-          * The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input. For the multi-select variant, the value must be an array of option values.
-         */
-        "value"?: string | string[];
-    }
     interface IcTreeItem {
         /**
           * If `true`, the tree item appears in the disabled state.
          */
         "disabled"?: boolean;
+        /**
+          * If `true`, the tree item appears in the expanded state.
+         */
+        "expanded"?: boolean;
         /**
           * The URL that the tree item link points to. If set, the tree item will render as an "a" tag, otherwise it will render as a div.
          */
@@ -1638,12 +1323,20 @@ declare namespace LocalJSX {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
+        /**
+          * If `true`, the tree item label will be truncated instead of text wrapping.
+         */
+        "truncateTreeItem"?: boolean;
     }
     interface IcTreeView {
         /**
-          * The appearance of the tree view, e.g. dark, or light.
+          * If `true`, tree items will have inset focus.
          */
-        "appearance"?: IcThemeForegroundNoDefault1;
+        "focusInset"?: boolean;
         /**
           * The heading of the tree view.
          */
@@ -1652,6 +1345,18 @@ declare namespace LocalJSX {
           * The size of the tree view.
          */
         "size"?: IcSizes;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
+        /**
+          * If `true`, the tree view heading will be truncated instead of text wrapping.
+         */
+        "truncateHeading"?: boolean;
+        /**
+          * If `true`, tree items will be truncated, unless they are individually overridden.
+         */
+        "truncateTreeItems"?: boolean;
     }
     interface IntrinsicElements {
         "ic-card-horizontal": IcCardHorizontal;
@@ -1659,9 +1364,7 @@ declare namespace LocalJSX {
         "ic-data-table-title-bar": IcDataTableTitleBar;
         "ic-date-input": IcDateInput;
         "ic-date-picker": IcDatePicker;
-        "ic-menu-with-multi": IcMenuWithMulti;
         "ic-pagination-bar": IcPaginationBar;
-        "ic-select-with-multi": IcSelectWithMulti;
         "ic-tree-item": IcTreeItem;
         "ic-tree-view": IcTreeView;
     }
@@ -1675,9 +1378,7 @@ declare module "@stencil/core" {
             "ic-data-table-title-bar": LocalJSX.IcDataTableTitleBar & JSXBase.HTMLAttributes<HTMLIcDataTableTitleBarElement>;
             "ic-date-input": LocalJSX.IcDateInput & JSXBase.HTMLAttributes<HTMLIcDateInputElement>;
             "ic-date-picker": LocalJSX.IcDatePicker & JSXBase.HTMLAttributes<HTMLIcDatePickerElement>;
-            "ic-menu-with-multi": LocalJSX.IcMenuWithMulti & JSXBase.HTMLAttributes<HTMLIcMenuWithMultiElement>;
             "ic-pagination-bar": LocalJSX.IcPaginationBar & JSXBase.HTMLAttributes<HTMLIcPaginationBarElement>;
-            "ic-select-with-multi": LocalJSX.IcSelectWithMulti & JSXBase.HTMLAttributes<HTMLIcSelectWithMultiElement>;
             "ic-tree-item": LocalJSX.IcTreeItem & JSXBase.HTMLAttributes<HTMLIcTreeItemElement>;
             "ic-tree-view": LocalJSX.IcTreeView & JSXBase.HTMLAttributes<HTMLIcTreeViewElement>;
         }