@ukic/canary-web-components 2.0.0-canary.14 → 2.0.0-canary.15

package/dist/types/components/ic-data-table/story-data.d.ts

@@ -52,6 +52,41 @@ export declare const ROW_ALIGNMENT: ({
     address: string;
 })[];
 export declare const LONG_COLS: IcDataTableColumnObject[];
+export declare const ICON_COLS: IcDataTableColumnObject[];
+export declare const ICON_DATA: ({
+    firstName: {
+        data: string;
+        icon: string;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    lastName: {
+        data: string;
+        icon: string;
+    };
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    lastName: string;
+    age: number;
+    jobTitle: {
+        data: string;
+        icon: string;
+    };
+    address: string;
+})[];
 export declare const LONG_DATA: {
     employeeNumber: number;
     name: string;
@@ -89,6 +124,22 @@ export declare const DATA_ELEMENTS: ({
     address: string;
     actions: string;
 })[];
+export declare const DATA_REACT_ELEMENTS: ({
+    firstName: {
+        data: string;
+        href: string;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+})[];
 export declare const createDataTableElement: (caption: string, columns?: IcDataTableColumnObject[], data?: object[]) => HTMLIcDataTableElement;
 export declare const Basic: () => HTMLIcDataTableElement;
 export declare const Embedded: () => HTMLIcDataTableElement;
@@ -103,3 +154,11 @@ export declare const ColumnOverrides: () => HTMLIcDataTableElement;
 export declare const RowOverrides: () => HTMLIcDataTableElement;
 export declare const CellOverrides: () => HTMLIcDataTableElement;
 export declare const LinksHTMLElements: () => HTMLIcDataTableElement;
+export declare const Empty: () => HTMLIcDataTableElement;
+export declare const EmptySlotted: () => HTMLIcDataTableElement;
+export declare const Loading: () => HTMLIcDataTableElement;
+export declare const Updating: () => HTMLIcDataTableElement;
+export declare const CustomIcons: () => HTMLIcDataTableElement;
+export declare const CustomRowHeights: () => HTMLElement;
+export declare const CustomTitleBar: () => HTMLIcDataTableElement;
+export declare const UpdatingData: () => HTMLElement;

package/dist/types/components/ic-data-table-title-bar/ic-data-table-title-bar.d.ts

@@ -0,0 +1,36 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcDensityUpdateEventDetail } from "../ic-data-table/ic-data-table.types";
+/**
+ * @slot primary-action - Render an interactive element that will perform a primary action. Renders to the right of the density select.
+ * @slot custom-actions - Render additional custom actions to the left of the density select.
+ * @slot heading - The heading to render on the data table title bar.
+ * @slot description - Render an alternative description in the description section.
+ */
+export declare class DataTableTitleBar {
+    private initialDensitySelectOption;
+    private isEmbedded;
+    el: HTMLIcDataTableTitleBarElement;
+    /**
+     * The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot.
+     */
+    description?: string;
+    /**
+     * The heading of the title bar. Can be overridden with the `heading` slot. If used with an `ic-data-table` it will default to the table's `caption` unless overridden.
+     */
+    heading?: string;
+    /**
+     * When `true`, the density select will not be rendered.
+     */
+    hideDensitySelect?: boolean;
+    /**
+     * The metadata displayed next to the `heading`.
+     */
+    metadata?: string;
+    /**
+     * Emitted when the table density select value is changed.
+     */
+    icTableDensityUpdate: EventEmitter<IcDensityUpdateEventDetail>;
+    componentWillLoad(): void;
+    private changeDensity;
+    render(): any;
+}

package/dist/types/components/ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -12,12 +12,15 @@ export declare class Menu {
     private isMultiSelect;
     private isSearchBar;
     private isSearchableSelect;
+    private lastOptionSelected;
+    private lastOptionFocused;
     private menu;
     private multiOptionClicked;
     private popperInstance;
     private preventClickOpen;
     private preventMenuFocus;
     private selectAllButton;
+    private shiftPressed;
     private ungroupedOptions;
     el: HTMLIcMenuWithMultiElement;
     focusFromSearchKeypress: boolean;
@@ -178,6 +181,8 @@ export declare class Menu {
     private setHighlightedOption;
     private autoSetInputValueKeyboardOpen;
     private selectHighlightedOption;
+    private isOptionSelected;
+    private deselectSelectedOptions;
     private manualSetInputValueKeyboardOpen;
     private setInputValue;
     private handleOptionClick;
@@ -191,12 +196,17 @@ export declare class Menu {
     private handleSelectAllBlur;
     private handleSelectAllFocus;
     private handleSelectAllMouseDown;
+    private handleSingleShiftSelect;
+    private handleMultipleShiftSelect;
+    private handleOptionSelect;
+    private getFirstOptionInSelection;
     private emitSelectAll;
     private emitMenuKeyPress;
     private autoSetValueOnMenuKeyDown;
     private getOptionId;
     private getOptionAriaLabel;
     private getSortedOptions;
+    private getOptionHighlightedIndex;
     private isManualMode;
     private scrollToSelected;
     private loadUngroupedOptions;

package/dist/types/components/ic-pagination-bar/ic-pagination-bar.d.ts

@@ -1,19 +1,24 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
-import { IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "../ic-pagination/ic-pagination.types";
+import { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
 export declare class PaginationBar {
-    private PAGINATION;
-    private TEXT_FIELD;
-    private TOOLTIP;
     private PAGE_INPUT_FIELD_ID;
     private INVALID_PAGE_ERROR;
     private NAN_ERROR;
     private resizeObserver;
+    private pageDropdownEl;
+    private pageInputEl;
+    private pageInputTooltipEl;
     private paginationBarEl;
+    private paginationEl;
     el: HTMLIcPaginationBarElement;
     currentPage: number;
+    displayedItemsPerPageOptions?: {
+        label: string;
+        value: string;
+    }[];
     inputError: string;
-    itemsPerPage: string;
+    itemsPerPage: number;
     lowerBound: number;
     paginationWidth: number;
     paginationWrapped: boolean;
@@ -28,9 +33,9 @@ export declare class PaginationBar {
      */
     appearance?: IcThemeForeground;
     /**
-     * The label which will be used in place of 'items' if paginationType is data. Should be capitalised.
+     * The label which will be used in place of 'items' if type is data. Should be capitalised.
      */
-    itemLabel?: string;
+    rangeItemLabel?: 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.
      */
@@ -38,16 +43,17 @@ export declare class PaginationBar {
         label: string;
         value: string;
     }[];
+    watchItemsPerPageOptionsHandler(): void;
     /**
      * Whether the displayed pagination is simple or complex.
      */
-    paginationControl?: IcPaginationControlTypes;
+    type?: IcPaginationTypes;
     /**
      * Whether total number of items and current item range or total number of pages and current page is displayed.
      */
-    paginationType?: IcPaginationTypes;
+    rangeLabelType?: IcPaginationLabelTypes;
     /**
-     * The label which will be used in place of 'Page' if paginationType is page. Should be capitalised.
+     * The label which will be used in place of 'Page' if rangeLabelType is page. Should be capitalised.
      */
     pageLabel?: string;
     /**
@@ -55,9 +61,9 @@ export declare class PaginationBar {
      */
     showGoToPageControl?: boolean;
     /**
-     * If `true`, the number of total items and current item range or number of total pages and current page should be displayed.
+     * If `true`, the number of total items and current item range or number of total pages and current page will be hidden.
      */
-    showItemsPerPage?: boolean;
+    hideRangeLabel?: boolean;
     /**
      * If `true`, the select input to control 'items per page' should be displayed.
      */
@@ -66,6 +72,7 @@ export declare class PaginationBar {
      * Total number of items to be displayed across all pages.
      */
     totalItems: number;
+    watchTotalItemsHandler(): void;
     /**
      * Emitted when a page is navigated to via the 'go to' input.
      */
@@ -93,11 +100,14 @@ export declare class PaginationBar {
     private paginationShouldWrap;
     private resizeObserverCallback;
     private runResizeObserver;
-    private setDefaultItemsPerPage;
-    private setDefaultItemsPerPageOptions;
+    private setDisplayedItemsPerPageOptions;
     private setGoToPageInputStyles;
+    private setInputError;
+    private setItemsPerPage;
     private setNumberPages;
+    private setPaginationBarContent;
     private setUpperBound;
     private trimItemsPerPageOptions;
+    private updateItemsPerPage;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -5,16 +5,16 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableSortOrderOptions } from "./components/ic-data-table/ic-data-table.types";
-import { IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types";
+import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDensityUpdateEventDetail } from "./components/ic-data-table/ic-data-table.types";
+import { IcActivationTypes, IcMenuOption, IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
+import { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
 import { IcDateFormat, IcInformationStatusOrEmpty, IcSearchMatchPositions, IcSizes, IcValueEventDetail, IcWeekDays } from "./utils/types";
-import { IcActivationTypes, IcMenuOption } from "@ukic/web-components/dist/types/utils/types";
 import { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEventDetail, IcSearchBarSearchModes } from "@ukic/web-components/dist/types/components";
 import { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
-export { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableSortOrderOptions } from "./components/ic-data-table/ic-data-table.types";
-export { IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types";
+export { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDensityUpdateEventDetail } from "./components/ic-data-table/ic-data-table.types";
+export { IcActivationTypes, IcMenuOption, IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
+export { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
 export { IcDateFormat, IcInformationStatusOrEmpty, IcSearchMatchPositions, IcSizes, IcValueEventDetail, IcWeekDays } from "./utils/types";
-export { IcActivationTypes, IcMenuOption } from "@ukic/web-components/dist/types/utils/types";
 export { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEventDetail, IcSearchBarSearchModes } from "@ukic/web-components/dist/types/components";
 export { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
 export namespace Components {
@@ -39,21 +39,50 @@ export namespace Components {
           * Applies a border to the table container.
          */
         "embedded"?: boolean;
+        /**
+          * Sets the row height on all rows in the table that aren't set using the `variableRowHeight` method.
+         */
+        "globalRowHeight"?: IcDataTableRowHeights;
         /**
           * If `true`, column headers will not be visible.
          */
         "hideColumnHeaders"?: boolean;
+        /**
+          * When set to `true`, the full table will show a loading state, featuring a radial indicator.
+         */
+        "loading"?: boolean;
+        /**
+          * Sets the props for the circular loading indicator used in the loading state.
+         */
+        "loadingOptions"?: {
+    appearance?: IcThemeForegroundNoDefault;
+    description?: string;
+    label?: string;
+    labelDuration?: number;
+    max?: number;
+    min?: number;
+    progress?: number;
+    showBackground?: boolean;
+  };
+        /**
+          * The minimum amount of time the `loading` state displays for before showing the data. Used to prevent flashing in the component.
+         */
+        "minimumLoadingDisplayDuration"?: number;
         /**
           * Sets the props for the pagination bar.
          */
         "paginationOptions"?: {
     itemsPerPage?: { label: string; value: string }[];
+    rangeLabelType?: IcPaginationLabelTypes;
     type?: IcPaginationTypes;
-    control?: IcPaginationControlTypes;
     itemsPerPageControl?: boolean;
     goToPageControl?: boolean;
     alignment?: IcPaginationAlignmentOptions;
   };
+        /**
+          * Resets the `globalRowHeight` prop to `40px` and sets the `variableRowHeight` prop to `null`.
+         */
+        "resetRowHeights": () => Promise<void>;
         /**
           * If `true`, adds a pagination bar to the bottom of the table.
          */
@@ -77,6 +106,45 @@ export namespace Components {
           * If `true`, row headers will remain to the left when scrolling horizontally.
          */
         "stickyRowHeaders"?: boolean;
+        /**
+          * If `true`, the table displays a linear loading indicator below the header row to indicate an updating state.
+         */
+        "updating"?: boolean;
+        /**
+          * Sets the props for the linear loading indicator used in the updating state.
+         */
+        "updatingOptions"?: {
+    appearance?: IcThemeForegroundNoDefault;
+    description?: string;
+    max?: number;
+    min?: number;
+    progress?: number;
+  };
+        /**
+          * 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.
+         */
+        "variableRowHeight"?: (params: {
+    [key: string]: any;
+    index: number;
+  }) => IcDataTableRowHeights | null;
+    }
+    interface IcDataTableTitleBar {
+        /**
+          * The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot.
+         */
+        "description"?: string;
+        /**
+          * The heading of the title bar. Can be overridden with the `heading` slot. If used with an `ic-data-table` it will default to the table's `caption` unless overridden.
+         */
+        "heading"?: string;
+        /**
+          * When `true`, the density select will not be rendered.
+         */
+        "hideDensitySelect"?: boolean;
+        /**
+          * The metadata displayed next to the `heading`.
+         */
+        "metadata"?: string;
     }
     interface IcDateInput {
         /**
@@ -350,9 +418,9 @@ export namespace Components {
          */
         "appearance"?: IcThemeForeground;
         /**
-          * The label which will be used in place of 'items' if paginationType is data. Should be capitalised.
+          * If `true`, the number of total items and current item range or number of total pages and current page will be hidden.
          */
-        "itemLabel"?: string;
+        "hideRangeLabel"?: boolean;
         /**
           * 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.
          */
@@ -361,25 +429,21 @@ export namespace Components {
     value: string;
   }[];
         /**
-          * The label which will be used in place of 'Page' if paginationType is page. Should be capitalised.
+          * The label which will be used in place of 'Page' if rangeLabelType is page. Should be capitalised.
          */
         "pageLabel"?: string;
         /**
-          * Whether the displayed pagination is simple or complex.
+          * The label which will be used in place of 'items' if type is data. Should be capitalised.
          */
-        "paginationControl"?: IcPaginationControlTypes;
+        "rangeItemLabel"?: string;
         /**
           * Whether total number of items and current item range or total number of pages and current page is displayed.
          */
-        "paginationType"?: IcPaginationTypes;
+        "rangeLabelType"?: IcPaginationLabelTypes;
         /**
           * If `true`, the 'go to page' control should be displayed.
          */
         "showGoToPageControl"?: boolean;
-        /**
-          * If `true`, the number of total items and current item range or number of total pages and current page should be displayed.
-         */
-        "showItemsPerPage"?: boolean;
         /**
           * If `true`, the select input to control 'items per page' should be displayed.
          */
@@ -388,6 +452,10 @@ export namespace Components {
           * Total number of items to be displayed across all pages.
          */
         "totalItems": number;
+        /**
+          * Whether the displayed pagination is simple or complex.
+         */
+        "type"?: IcPaginationTypes;
     }
     interface IcSelectWithMulti {
         /**
@@ -540,6 +608,14 @@ export namespace Components {
         "value"?: string | string[];
     }
 }
+export interface IcDataTableCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcDataTableElement;
+}
+export interface IcDataTableTitleBarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcDataTableTitleBarElement;
+}
 export interface IcDateInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcDateInputElement;
@@ -561,12 +637,40 @@ export interface IcSelectWithMultiCustomEvent<T> extends CustomEvent<T> {
     target: HTMLIcSelectWithMultiElement;
 }
 declare global {
+    interface HTMLIcDataTableElementEventMap {
+        "icRowHeightChange": void;
+    }
     interface HTMLIcDataTableElement extends Components.IcDataTable, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIcDataTableElementEventMap>(type: K, listener: (this: HTMLIcDataTableElement, ev: IcDataTableCustomEvent<HTMLIcDataTableElementEventMap[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 HTMLIcDataTableElementEventMap>(type: K, listener: (this: HTMLIcDataTableElement, ev: IcDataTableCustomEvent<HTMLIcDataTableElementEventMap[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 HTMLIcDataTableElement: {
         prototype: HTMLIcDataTableElement;
         new (): HTMLIcDataTableElement;
     };
+    interface HTMLIcDataTableTitleBarElementEventMap {
+        "icTableDensityUpdate": IcDensityUpdateEventDetail;
+    }
+    interface HTMLIcDataTableTitleBarElement extends Components.IcDataTableTitleBar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIcDataTableTitleBarElementEventMap>(type: K, listener: (this: HTMLIcDataTableTitleBarElement, ev: IcDataTableTitleBarCustomEvent<HTMLIcDataTableTitleBarElementEventMap[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 HTMLIcDataTableTitleBarElementEventMap>(type: K, listener: (this: HTMLIcDataTableTitleBarElement, ev: IcDataTableTitleBarCustomEvent<HTMLIcDataTableTitleBarElementEventMap[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 HTMLIcDataTableTitleBarElement: {
+        prototype: HTMLIcDataTableTitleBarElement;
+        new (): HTMLIcDataTableTitleBarElement;
+    };
     interface HTMLIcDateInputElementEventMap {
         "calendarButtonClicked": { value: Date };
         "icBlur": { value: Date };
@@ -672,6 +776,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "ic-data-table": HTMLIcDataTableElement;
+        "ic-data-table-title-bar": HTMLIcDataTableTitleBarElement;
         "ic-date-input": HTMLIcDateInputElement;
         "ic-date-picker": HTMLIcDatePickerElement;
         "ic-menu-with-multi": HTMLIcMenuWithMultiElement;
@@ -701,17 +806,46 @@ declare namespace LocalJSX {
           * Applies a border to the table container.
          */
         "embedded"?: boolean;
+        /**
+          * Sets the row height on all rows in the table that aren't set using the `variableRowHeight` method.
+         */
+        "globalRowHeight"?: IcDataTableRowHeights;
         /**
           * If `true`, column headers will not be visible.
          */
         "hideColumnHeaders"?: boolean;
+        /**
+          * When set to `true`, the full table will show a loading state, featuring a radial indicator.
+         */
+        "loading"?: boolean;
+        /**
+          * Sets the props for the circular loading indicator used in the loading state.
+         */
+        "loadingOptions"?: {
+    appearance?: IcThemeForegroundNoDefault;
+    description?: string;
+    label?: string;
+    labelDuration?: number;
+    max?: number;
+    min?: number;
+    progress?: number;
+    showBackground?: boolean;
+  };
+        /**
+          * The minimum amount of time the `loading` state displays for before showing the data. Used to prevent flashing in the component.
+         */
+        "minimumLoadingDisplayDuration"?: number;
+        /**
+          * Emitted when the `globalRowHeight` or `variableRowHeight` properties change in the data table.
+         */
+        "onIcRowHeightChange"?: (event: IcDataTableCustomEvent<void>) => void;
         /**
           * Sets the props for the pagination bar.
          */
         "paginationOptions"?: {
     itemsPerPage?: { label: string; value: string }[];
+    rangeLabelType?: IcPaginationLabelTypes;
     type?: IcPaginationTypes;
-    control?: IcPaginationControlTypes;
     itemsPerPageControl?: boolean;
     goToPageControl?: boolean;
     alignment?: IcPaginationAlignmentOptions;
@@ -739,6 +873,49 @@ declare namespace LocalJSX {
           * If `true`, row headers will remain to the left when scrolling horizontally.
          */
         "stickyRowHeaders"?: boolean;
+        /**
+          * If `true`, the table displays a linear loading indicator below the header row to indicate an updating state.
+         */
+        "updating"?: boolean;
+        /**
+          * Sets the props for the linear loading indicator used in the updating state.
+         */
+        "updatingOptions"?: {
+    appearance?: IcThemeForegroundNoDefault;
+    description?: string;
+    max?: number;
+    min?: number;
+    progress?: number;
+  };
+        /**
+          * 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.
+         */
+        "variableRowHeight"?: (params: {
+    [key: string]: any;
+    index: number;
+  }) => IcDataTableRowHeights | null;
+    }
+    interface IcDataTableTitleBar {
+        /**
+          * The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot.
+         */
+        "description"?: string;
+        /**
+          * The heading of the title bar. Can be overridden with the `heading` slot. If used with an `ic-data-table` it will default to the table's `caption` unless overridden.
+         */
+        "heading"?: string;
+        /**
+          * When `true`, the density select will not be rendered.
+         */
+        "hideDensitySelect"?: boolean;
+        /**
+          * The metadata displayed next to the `heading`.
+         */
+        "metadata"?: string;
+        /**
+          * Emitted when the table density select value is changed.
+         */
+        "onIcTableDensityUpdate"?: (event: IcDataTableTitleBarCustomEvent<IcDensityUpdateEventDetail>) => void;
     }
     interface IcDateInput {
         /**
@@ -1008,9 +1185,9 @@ declare namespace LocalJSX {
          */
         "appearance"?: IcThemeForeground;
         /**
-          * The label which will be used in place of 'items' if paginationType is data. Should be capitalised.
+          * If `true`, the number of total items and current item range or number of total pages and current page will be hidden.
          */
-        "itemLabel"?: string;
+        "hideRangeLabel"?: boolean;
         /**
           * 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.
          */
@@ -1027,25 +1204,21 @@ declare namespace LocalJSX {
          */
         "onIcPageChange"?: (event: IcPaginationBarCustomEvent<{ value: number }>) => void;
         /**
-          * The label which will be used in place of 'Page' if paginationType is page. Should be capitalised.
+          * The label which will be used in place of 'Page' if rangeLabelType is page. Should be capitalised.
          */
         "pageLabel"?: string;
         /**
-          * Whether the displayed pagination is simple or complex.
+          * The label which will be used in place of 'items' if type is data. Should be capitalised.
          */
-        "paginationControl"?: IcPaginationControlTypes;
+        "rangeItemLabel"?: string;
         /**
           * Whether total number of items and current item range or total number of pages and current page is displayed.
          */
-        "paginationType"?: IcPaginationTypes;
+        "rangeLabelType"?: IcPaginationLabelTypes;
         /**
           * If `true`, the 'go to page' control should be displayed.
          */
         "showGoToPageControl"?: boolean;
-        /**
-          * If `true`, the number of total items and current item range or number of total pages and current page should be displayed.
-         */
-        "showItemsPerPage"?: boolean;
         /**
           * If `true`, the select input to control 'items per page' should be displayed.
          */
@@ -1054,6 +1227,10 @@ declare namespace LocalJSX {
           * Total number of items to be displayed across all pages.
          */
         "totalItems": number;
+        /**
+          * Whether the displayed pagination is simple or complex.
+         */
+        "type"?: IcPaginationTypes;
     }
     interface IcSelectWithMulti {
         /**
@@ -1235,6 +1412,7 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "ic-data-table": IcDataTable;
+        "ic-data-table-title-bar": IcDataTableTitleBar;
         "ic-date-input": IcDateInput;
         "ic-date-picker": IcDatePicker;
         "ic-menu-with-multi": IcMenuWithMulti;
@@ -1247,6 +1425,7 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "ic-data-table": LocalJSX.IcDataTable & JSXBase.HTMLAttributes<HTMLIcDataTableElement>;
+            "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>;