@ukic/canary-web-components 2.0.0-canary.11 → 2.0.0-canary.12

package/dist/types/components.d.ts

@@ -5,17 +5,17 @@
  * 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 { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail } from "./components/ic-data-table/ic-data-table.types";
+import { IcActivationTypes, IcMenuOption, IcSizes, IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
 import { IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "./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 { IcInformationStatusOrEmpty, IcSearchMatchPositions, IcValueEventDetail } from "./utils/types";
 import { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
-export { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableSortOrderOptions } from "./components/ic-data-table/ic-data-table.types";
+export { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail } from "./components/ic-data-table/ic-data-table.types";
+export { IcActivationTypes, IcMenuOption, IcSizes, IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
 export { IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "./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 { IcInformationStatusOrEmpty, IcSearchMatchPositions, IcValueEventDetail } from "./utils/types";
 export { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
 export namespace Components {
     interface IcDataTable {
@@ -39,10 +39,35 @@ 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.
          */
@@ -54,6 +79,10 @@ export namespace Components {
     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,195 +106,49 @@ export namespace Components {
           * If `true`, row headers will remain to the left when scrolling horizontally.
          */
         "stickyRowHeaders"?: boolean;
-    }
-    interface IcDateInput {
-        /**
-          * The format in which the date will be displayed.
-         */
-        "dateFormat"?: IcDateFormat;
-        /**
-          * The days of the week to disable.
-         */
-        "disableDays"?: IcWeekDays[];
-        /**
-          * The text to display as the validation message when `disableDays` is set and a disabled date is entered.
-         */
-        "disableDaysMessage"?: string;
-        /**
-          * If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered.
-         */
-        "disableFuture"?: boolean;
-        /**
-          * The text to display as the validation message when `disableFuture` is true and a date in the future is entered.
-         */
-        "disableFutureMessage"?: string;
-        /**
-          * If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered.
-         */
-        "disablePast"?: boolean;
-        /**
-          * The text to display as the validation message when `disablePast` is true and a date in the past is entered.
-         */
-        "disablePastMessage"?: string;
-        /**
-          * If `true`, the disabled state will be set.
-         */
-        "disabled"?: boolean;
-        /**
-          * Returns the value as a Date object
-          * @returns Date
-         */
-        "getDate": () => Promise<Date>;
-        /**
-          * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
-         */
-        "helperText"?: string;
         /**
-          * The ID for the input.
+          * For long text in cells that aren't set to textWrap, define how they should be truncated. `tooltip` adds a tooltip for the rest of the text, `showHide` adds the ic-typography "See More"/"See Less" buttons.
          */
-        "inputId"?: string;
+        "truncationPattern"?: IcDataTableTruncationTypes;
         /**
-          * The label for the date input.
+          * If `true`, the table displays a linear loading indicator below the header row to indicate an updating state.
          */
-        "label": string;
+        "updating"?: boolean;
         /**
-          * The latest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disableFuture` is set to `true`.
+          * Sets the props for the linear loading indicator used in the updating state.
          */
-        "max"?: string | Date;
-        /**
-          * The earliest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disablePast` is set to `true`.
-         */
-        "min"?: string | Date;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name": string;
-        /**
-          * If `true`, the input will require a value.
-         */
-        "required"?: boolean;
-        "setCalendarFocus": () => Promise<void>;
-        "setDisableDays": (days: IcWeekDays[]) => Promise<void>;
-        "showCalendarButton"?: boolean;
-        /**
-          * If `true`, a button which clears the date input when clicked will be displayed.
-         */
-        "showClearButton"?: boolean;
-        /**
-          * The size of the date input to be displayed.
-         */
-        "size"?: IcSizes;
-        "triggerIcChange": (d: Date) => Promise<void>;
-        /**
-          * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
-         */
-        "validationStatus"?: IcInformationStatusOrEmpty;
-        /**
-          * The text to display as the validation message. This will override the built-in date validation.
-         */
-        "validationText"?: string;
+        "updatingOptions"?: {
+    appearance?: IcThemeForegroundNoDefault;
+    description?: string;
+    max?: number;
+    min?: number;
+    progress?: number;
+  };
         /**
-          * The value of the date input. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+          * 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.
          */
-        "value"?: string | Date | null | undefined;
+        "variableRowHeight"?: (params: {
+    [key: string]: any;
+    index: number;
+  }) => IcDataTableRowHeights | null;
     }
-    interface IcDatePicker {
+    interface IcDataTableTitleBar {
         /**
-          * The format in which the date will be displayed.
+          * The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot.
          */
-        "dateFormat"?: IcDateFormat;
+        "description"?: string;
         /**
-          * The days of the week to disable.
+          * 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.
          */
-        "disableDays"?: IcWeekDays[];
+        "heading"?: string;
         /**
-          * The text to display as the validation message when `disableDays` is `true` and a disabled date is entered.
+          * When `true`, the density select will not be rendered.
          */
-        "disableDaysMessage"?: string;
+        "hideDensitySelect"?: boolean;
         /**
-          * If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered.
+          * The metadata displayed next to the `heading`.
          */
-        "disableFuture"?: boolean;
-        /**
-          * The text to display as the validation message when `disableFuture` is `true` and a date in the future is entered.
-         */
-        "disableFutureMessage"?: string;
-        /**
-          * If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered.
-         */
-        "disablePast"?: boolean;
-        /**
-          * The text to display as the validation message when `disablePast` is `true` and a date in the past is entered.
-         */
-        "disablePastMessage"?: string;
-        /**
-          * If `true`, the disabled state will be set.
-         */
-        "disabled"?: boolean;
-        /**
-          * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
-         */
-        "helperText"?: string;
-        /**
-          * The ID for the input field. The default will be an automatically generated value.
-         */
-        "inputId"?: string;
-        /**
-          * The label for the date input.
-         */
-        "label": string;
-        /**
-          * The latest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disableFuture` is set to `true`.
-         */
-        "max"?: string | Date;
-        /**
-          * The earliest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disablePast` is set to `true`.
-         */
-        "min"?: string | Date;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name"?: string;
-        /**
-          * The date visible when the calendar opens. Used if no date is currently selected. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
-         */
-        "openAtDate": string | Date;
-        /**
-          * If `true`, the input will require a value.
-         */
-        "required"?: boolean;
-        /**
-          * If `true`, days outside the current month will be visible in the date picker.
-         */
-        "showDaysOutsideMonth"?: boolean;
-        /**
-          * If `true`, the `Clear` button on the date picker will be visible.
-         */
-        "showPickerClearButton"?: boolean;
-        /**
-          * If `true`, the `Go to today` button on the date picker will be visible.
-         */
-        "showPickerTodayButton"?: boolean;
-        /**
-          * The size of the date picker to be displayed.
-         */
-        "size"?: IcSizes;
-        /**
-          * The first day of the week. `0` for Sunday, `1` for Monday, etc. Default is Monday.
-         */
-        "startOfWeek"?: IcWeekDays;
-        /**
-          * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
-         */
-        "validationStatus"?: IcInformationStatusOrEmpty;
-        /**
-          * The text to display as the validation message. This will override the built-in date validation.
-         */
-        "validationText"?: string;
-        /**
-          * The value of the date picker. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
-         */
-        "value"?: string | Date | null | undefined;
+        "metadata"?: string;
     }
     interface IcMenuWithMulti {
         /**
@@ -540,13 +423,13 @@ export namespace Components {
         "value"?: string | string[];
     }
 }
-export interface IcDateInputCustomEvent<T> extends CustomEvent<T> {
+export interface IcDataTableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLIcDateInputElement;
+    target: HTMLIcDataTableElement;
 }
-export interface IcDatePickerCustomEvent<T> extends CustomEvent<T> {
+export interface IcDataTableTitleBarCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLIcDatePickerElement;
+    target: HTMLIcDataTableTitleBarElement;
 }
 export interface IcMenuWithMultiCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -561,48 +444,39 @@ export interface IcSelectWithMultiCustomEvent<T> extends CustomEvent<T> {
     target: HTMLIcSelectWithMultiElement;
 }
 declare global {
-    interface HTMLIcDataTableElement extends Components.IcDataTable, HTMLStencilElement {
+    interface HTMLIcDataTableElementEventMap {
+        "icRowHeightChange": void;
     }
-    var HTMLIcDataTableElement: {
-        prototype: HTMLIcDataTableElement;
-        new (): HTMLIcDataTableElement;
-    };
-    interface HTMLIcDateInputElementEventMap {
-        "calendarButtonClicked": { value: Date };
-        "icBlur": { value: Date };
-        "icChange": { value: Date };
-        "icFocus": { value: Date };
-    }
-    interface HTMLIcDateInputElement extends Components.IcDateInput, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLIcDateInputElementEventMap>(type: K, listener: (this: HTMLIcDateInputElement, ev: IcDateInputCustomEvent<HTMLIcDateInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): 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 HTMLIcDateInputElementEventMap>(type: K, listener: (this: HTMLIcDateInputElement, ev: IcDateInputCustomEvent<HTMLIcDateInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): 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 HTMLIcDateInputElement: {
-        prototype: HTMLIcDateInputElement;
-        new (): HTMLIcDateInputElement;
+    var HTMLIcDataTableElement: {
+        prototype: HTMLIcDataTableElement;
+        new (): HTMLIcDataTableElement;
     };
-    interface HTMLIcDatePickerElementEventMap {
-        "icChange": { value: Date };
+    interface HTMLIcDataTableTitleBarElementEventMap {
+        "icTableDensityUpdate": IcDensityUpdateEventDetail;
     }
-    interface HTMLIcDatePickerElement extends Components.IcDatePicker, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLIcDatePickerElementEventMap>(type: K, listener: (this: HTMLIcDatePickerElement, ev: IcDatePickerCustomEvent<HTMLIcDatePickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    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 HTMLIcDatePickerElementEventMap>(type: K, listener: (this: HTMLIcDatePickerElement, ev: IcDatePickerCustomEvent<HTMLIcDatePickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): 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 HTMLIcDatePickerElement: {
-        prototype: HTMLIcDatePickerElement;
-        new (): HTMLIcDatePickerElement;
+    var HTMLIcDataTableTitleBarElement: {
+        prototype: HTMLIcDataTableTitleBarElement;
+        new (): HTMLIcDataTableTitleBarElement;
     };
     interface HTMLIcMenuWithMultiElementEventMap {
         "menuKeyPress": { isNavKey: boolean; key: string };
@@ -672,8 +546,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "ic-data-table": HTMLIcDataTableElement;
-        "ic-date-input": HTMLIcDateInputElement;
-        "ic-date-picker": HTMLIcDatePickerElement;
+        "ic-data-table-title-bar": HTMLIcDataTableTitleBarElement;
         "ic-menu-with-multi": HTMLIcMenuWithMultiElement;
         "ic-pagination-bar": HTMLIcPaginationBarElement;
         "ic-select-with-multi": HTMLIcSelectWithMultiElement;
@@ -701,10 +574,39 @@ 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.
          */
@@ -739,202 +641,53 @@ declare namespace LocalJSX {
           * If `true`, row headers will remain to the left when scrolling horizontally.
          */
         "stickyRowHeaders"?: boolean;
-    }
-    interface IcDateInput {
-        /**
-          * The format in which the date will be displayed.
-         */
-        "dateFormat"?: IcDateFormat;
-        /**
-          * The days of the week to disable.
-         */
-        "disableDays"?: IcWeekDays[];
-        /**
-          * The text to display as the validation message when `disableDays` is set and a disabled date is entered.
-         */
-        "disableDaysMessage"?: string;
-        /**
-          * If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered.
-         */
-        "disableFuture"?: boolean;
-        /**
-          * The text to display as the validation message when `disableFuture` is true and a date in the future is entered.
-         */
-        "disableFutureMessage"?: string;
-        /**
-          * If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered.
-         */
-        "disablePast"?: boolean;
-        /**
-          * The text to display as the validation message when `disablePast` is true and a date in the past is entered.
-         */
-        "disablePastMessage"?: string;
-        /**
-          * If `true`, the disabled state will be set.
-         */
-        "disabled"?: boolean;
-        /**
-          * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
-         */
-        "helperText"?: string;
-        /**
-          * The ID for the input.
-         */
-        "inputId"?: string;
-        /**
-          * The label for the date input.
-         */
-        "label": string;
-        /**
-          * The latest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disableFuture` is set to `true`.
-         */
-        "max"?: string | Date;
-        /**
-          * The earliest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disablePast` is set to `true`.
-         */
-        "min"?: string | Date;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name"?: string;
-        /**
-          * Emitted when the input loses focus.
-         */
-        "onIcBlur"?: (event: IcDateInputCustomEvent<{ value: Date }>) => void;
-        /**
-          * Emitted when the value has changed.
-         */
-        "onIcChange"?: (event: IcDateInputCustomEvent<{ value: Date }>) => void;
-        /**
-          * Emitted when the input gains focus.
-         */
-        "onIcFocus"?: (event: IcDateInputCustomEvent<{ value: Date }>) => void;
-        /**
-          * If `true`, the input will require a value.
-         */
-        "required"?: boolean;
         /**
-          * If `true`, a button which clears the date input when clicked will be displayed.
+          * For long text in cells that aren't set to textWrap, define how they should be truncated. `tooltip` adds a tooltip for the rest of the text, `showHide` adds the ic-typography "See More"/"See Less" buttons.
          */
-        "showClearButton"?: boolean;
-        /**
-          * The size of the date input to be displayed.
-         */
-        "size"?: IcSizes;
+        "truncationPattern"?: IcDataTableTruncationTypes;
         /**
-          * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
+          * If `true`, the table displays a linear loading indicator below the header row to indicate an updating state.
          */
-        "validationStatus"?: IcInformationStatusOrEmpty;
+        "updating"?: boolean;
         /**
-          * The text to display as the validation message. This will override the built-in date validation.
+          * Sets the props for the linear loading indicator used in the updating state.
          */
-        "validationText"?: string;
+        "updatingOptions"?: {
+    appearance?: IcThemeForegroundNoDefault;
+    description?: string;
+    max?: number;
+    min?: number;
+    progress?: number;
+  };
         /**
-          * The value of the date input. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+          * 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.
          */
-        "value"?: string | Date | null | undefined;
+        "variableRowHeight"?: (params: {
+    [key: string]: any;
+    index: number;
+  }) => IcDataTableRowHeights | null;
     }
-    interface IcDatePicker {
-        /**
-          * The format in which the date will be displayed.
-         */
-        "dateFormat"?: IcDateFormat;
-        /**
-          * The days of the week to disable.
-         */
-        "disableDays"?: IcWeekDays[];
-        /**
-          * The text to display as the validation message when `disableDays` is `true` and a disabled date is entered.
-         */
-        "disableDaysMessage"?: string;
-        /**
-          * If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered.
-         */
-        "disableFuture"?: boolean;
+    interface IcDataTableTitleBar {
         /**
-          * The text to display as the validation message when `disableFuture` is `true` and a date in the future is entered.
+          * The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot.
          */
-        "disableFutureMessage"?: string;
+        "description"?: string;
         /**
-          * If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered.
+          * 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.
          */
-        "disablePast"?: boolean;
-        /**
-          * The text to display as the validation message when `disablePast` is `true` and a date in the past is entered.
-         */
-        "disablePastMessage"?: string;
-        /**
-          * If `true`, the disabled state will be set.
-         */
-        "disabled"?: boolean;
-        /**
-          * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
-         */
-        "helperText"?: string;
-        /**
-          * The ID for the input field. The default will be an automatically generated value.
-         */
-        "inputId"?: string;
-        /**
-          * The label for the date input.
-         */
-        "label": string;
+        "heading"?: string;
         /**
-          * The latest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disableFuture` is set to `true`.
+          * When `true`, the density select will not be rendered.
          */
-        "max"?: string | Date;
+        "hideDensitySelect"?: boolean;
         /**
-          * The earliest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disablePast` is set to `true`.
+          * The metadata displayed next to the `heading`.
          */
-        "min"?: string | Date;
-        /**
-          * The name of the control, which is submitted with the form data.
-         */
-        "name"?: string;
-        /**
-          * Emitted when the value has changed.
-         */
-        "onIcChange"?: (event: IcDatePickerCustomEvent<{ value: Date }>) => void;
-        /**
-          * The date visible when the calendar opens. Used if no date is currently selected. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
-         */
-        "openAtDate"?: string | Date;
-        /**
-          * If `true`, the input will require a value.
-         */
-        "required"?: boolean;
-        /**
-          * If `true`, days outside the current month will be visible in the date picker.
-         */
-        "showDaysOutsideMonth"?: boolean;
-        /**
-          * If `true`, the `Clear` button on the date picker will be visible.
-         */
-        "showPickerClearButton"?: boolean;
-        /**
-          * If `true`, the `Go to today` button on the date picker will be visible.
-         */
-        "showPickerTodayButton"?: boolean;
-        /**
-          * The size of the date picker to be displayed.
-         */
-        "size"?: IcSizes;
-        /**
-          * The first day of the week. `0` for Sunday, `1` for Monday, etc. Default is Monday.
-         */
-        "startOfWeek"?: IcWeekDays;
-        /**
-          * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
-         */
-        "validationStatus"?: IcInformationStatusOrEmpty;
-        /**
-          * The text to display as the validation message. This will override the built-in date validation.
-         */
-        "validationText"?: string;
+        "metadata"?: string;
         /**
-          * The value of the date picker. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+          * Emitted when the table density select value is changed.
          */
-        "value"?: string | Date | null | undefined;
+        "onIcTableDensityUpdate"?: (event: IcDataTableTitleBarCustomEvent<IcDensityUpdateEventDetail>) => void;
     }
     interface IcMenuWithMulti {
         /**
@@ -1235,8 +988,7 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "ic-data-table": IcDataTable;
-        "ic-date-input": IcDateInput;
-        "ic-date-picker": IcDatePicker;
+        "ic-data-table-title-bar": IcDataTableTitleBar;
         "ic-menu-with-multi": IcMenuWithMulti;
         "ic-pagination-bar": IcPaginationBar;
         "ic-select-with-multi": IcSelectWithMulti;
@@ -1247,8 +999,7 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "ic-data-table": LocalJSX.IcDataTable & JSXBase.HTMLAttributes<HTMLIcDataTableElement>;
-            "ic-date-input": LocalJSX.IcDateInput & JSXBase.HTMLAttributes<HTMLIcDateInputElement>;
-            "ic-date-picker": LocalJSX.IcDatePicker & JSXBase.HTMLAttributes<HTMLIcDatePickerElement>;
+            "ic-data-table-title-bar": LocalJSX.IcDataTableTitleBar & JSXBase.HTMLAttributes<HTMLIcDataTableTitleBarElement>;
             "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>;