@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.0

package/dist/types/components/data-table/table-interface.d.ts

@@ -0,0 +1,280 @@
+import type { JSXBase } from '../../stencil-public-runtime';
+import type { VNode, FunctionalComponent } from '../../stencil-public-runtime';
+
+export declare namespace TableTypes {
+  /** The column property */
+  type ColumnProp = string | number;
+
+  /** Possible positions. Horizontally means l/r. Vertically means top/bottom */
+  type Position = 'start' | 'end' | 'top' | 'bottom';
+
+  /** A function to assess whether a rendered row will be pinned to the top or bottom */
+  type PinFunc = (props?: RowDataSchemaModel) => Position;
+
+  /** Function called, via intersection observer, when an element's pinned status changes */
+  type PinnedCb = (
+    positions: { [key in Position]?: boolean },
+    target: Element
+  ) => void;
+
+  /** Potential column ordering options */
+  type Order = 'asc' | 'desc' | undefined;
+
+  /** Column filtering */
+  interface Filter {
+    prop: TableTypes.Prop;
+    filter: string | boolean | string[];
+  }
+
+  /** Column sorting */
+  interface Sort {
+    prop: TableTypes.Prop;
+    order: TableTypes.Order;
+  }
+
+  /** Potential html properties which can be passed to a cell or column */
+  type CellProps = JSXBase.ThHTMLAttributes<HTMLTableCellElement>;
+
+  /** Potential html properties which can be passed to a row */
+  type RowProps = JSXBase.HTMLAttributes<HTMLTableRowElement>;
+
+  /** data model passed to cell rendering functions */
+  interface RenderModel<T = RowGeneric> {
+    /** The column property being iterated over */
+    prop: keyof T;
+    /** The data for this cell */
+    cellModel: any;
+    /** The column config object */
+    column: ColumnConfig<T>;
+    /** The row index currently being iterated over */
+    rowIndex: number;
+    /** The row model currently being iterated over  */
+    rowModel: RowData<T>;
+  }
+
+  /** data model passed to row rendering functions */
+  interface RowDataSchemaModel<T = RowGeneric> {
+    /** the current data row model being iterated over */
+    rowModel?: RowData<T>;
+    /** the current data row index  */
+    rowIndex?: number;
+    /** The row being rendered. You *must* nest this in your render function otherwise it will not be shown */
+    renderedRow?: VNode;
+  }
+
+  /** A JSX `createElement` function passed to rendering functions.
+   * You can use this to create markup outside of JSX environments
+   * e.g. https://reactjs.org/docs/react-without-jsx.html */
+  interface HFunc<T> {
+    (tag: any): T;
+  }
+  interface HFunc<T> {
+    (tag: any, data: any): T;
+  }
+  interface HFunc<T> {
+    (tag: any, text: string): T;
+  }
+  interface HFunc<T> {
+    (sel: any, children: Array<T | undefined | null>): T;
+  }
+  interface HFunc<T> {
+    (sel: any, data: any, text: string): T;
+  }
+  interface HFunc<T> {
+    (sel: any, data: any, children: Array<T | undefined | null>): T;
+  }
+  interface HFunc<T> {
+    (sel: any, data: any, children: T): T;
+  }
+
+  /**
+   * Properties that can be used with the row template `TableCell` jsx partial
+   */
+  type TableRowCellHelperProps = {
+    header?: boolean;
+    wrap?: boolean;
+    cellProps?: CellProps;
+    wrapperProps?: JSXBase.HTMLAttributes<HTMLDivElement>;
+  };
+
+  /**
+   * A row render function, called during a any row's render to the dom.
+   * It can be used to add extra markup around any given table row
+   **/
+  type RowTemplateFunc<T, P> = (
+    /** use this to create markup outside of JSX environments
+     * e.g. https://reactjs.org/docs/react-without-jsx.html */
+    createElement: HFunc<T>,
+    /** data passed to each template */
+    props: RowDataSchemaModel<P>,
+    /** a helper template to minimise boilerplate.
+     * A shortcut for `<td><div class="nano-tbl__cell-content"></div></td>` */
+    TableCell: FunctionalComponent<TableRowCellHelperProps>
+  ) => T | undefined;
+
+  /**
+   * A cell render function, called during any cell's render to the dom.
+   * It can be used to add any markup within a table cell.
+   */
+  type CellTemplateFunc<T, P> = (
+    createElement: HFunc<T>,
+    props: RenderModel<P>
+  ) => TplResult;
+
+  /**
+   * A table header render function, called during any column's render to the dom.
+   * It can be used to add any markup within a table header `th`.
+   */
+  type ColumnTemplateFunc<T, P> = (
+    createElement: HFunc<T>,
+    col: ColumnConfig<P>
+  ) => TplResult;
+
+  /** A function used to assess the order of any given column.
+   * e.g. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
+   */
+  type ColSortComparator = (
+    prop: keyof RowData,
+    order: Order
+  ) => (a: RowData, b: RowData) => number;
+
+  /** A function which can be used to apply any html attribute/s onto a table cell `td` */
+  type PropertiesFunc = (props: RenderModel) => CellProps | void | undefined;
+
+  /** A function which can be used to apply any html attribute/s onto a table head `th` */
+  type ColPropertiesFunc<T> = (
+    props: ColumnConfig<T>
+  ) => CellProps | void | undefined;
+
+  /** A function which can be used to apply any html attribute/s onto a table row `tr` */
+  type RowPropertiesFunc<T> = (
+    props: RowDataSchemaModel<T>
+  ) => RowProps | void | undefined;
+
+  type RowGeneric = { [key: string | number]: any };
+
+  /** An individual table cell's data */
+  type RowData<T = RowGeneric> = T & {
+    __uuid?: string | number;
+    __index?: number;
+  };
+
+  /** A data property */
+  type Prop = keyof RowData;
+
+  /** Valid column data types */
+  type ColumnType =
+    | 'text'
+    | 'string'
+    | 'number'
+    | 'date'
+    | 'boolean'
+    | 'unknown';
+
+  type LibJSX = { [key: string]: any };
+  type JSXRender = VNode | VNode[] | LibJSX | LibJSX[];
+  type TplReturn = JSXRender | string | Element | undefined;
+  type TplResult = TplReturn | Promise<string>;
+
+  /**
+   * A table column's configuration
+   */
+  interface ColumnConfig<T = RowData> {
+    /** The title of the column. Displayed in the table header `th` */
+    title?: string;
+    /** The row's data property to retrieve per cell render */
+    prop?: keyof T;
+    /** The type of data. Will affect how it is sorted and the available
+     * filter operations ('text' uses browser locale to compare).
+     * If none supplied, it will be derived by default using the first row of data retrieved. */
+    type?: ColumnType;
+    /** Whether this column is horizontally pinned to viewport */
+    pinned?: Position;
+    /** By default cell content too wide for the cell will not wrap,
+     * but rather be trimmed with '...'.
+     * *Note* 'wrap' is mutually-exclusive from `autoTooltip` */
+    wrap?: boolean;
+    /** Setting this to true, will automatically watch content that
+     * doesn't fit and duplicate it to show in a tooltip.
+     * *Note* 'autoTooltip' is mutually-exclusive from `wrap` */
+    autoTooltip?: boolean;
+    /** Whether this column is a row header; the cell will render a `th` not a `td` */
+    rowHeader?: boolean;
+    /** Whether this column can be sorted. Defaults to true */
+    sortable?: boolean;
+    /** Current order of this column */
+    order?: Order;
+    /** Whether to include this column when doing a general search. Defaults to true */
+    searchable?: boolean;
+    /** Current filters applied to this column  */
+    filter?: string | boolean | string[];
+    /** Whether this column is rendered. Defaults to false */
+    hidden?: boolean;
+    /**
+     * A cell render function, called during any cell's render to the dom.
+     * It can be used to add any markup within a table cell.
+     */
+    cellTemplate?: CellTemplateFunc<JSXRender, T>;
+    /** A function which can be used to apply any html attribute/s onto a table cell `td` */
+    cellProperties?: PropertiesFunc;
+    /**
+     * A table header render function, called during any column's render to the dom.
+     * It can be used to add any markup within a table header `th`.
+     */
+    columnTemplate?: ColumnTemplateFunc<JSXRender, T>;
+    /** A function which can be used to apply any html attribute/s onto a table head `th` */
+    columnProperties?: ColPropertiesFunc<T>;
+    /** A custom sorting comparator function - assess the order of any given column.
+     *  e.g. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort */
+    sortCompareFn?: ColSortComparator | string;
+  }
+
+  /**
+   * Row renderer property. Called during the rendering of any table row
+   * controlling it's visual state.
+   */
+  interface RowRenderer<T = RowData> {
+    /** Function to decide whether the row is vertically pinned. */
+    pinned?: PinFunc;
+    /**
+     * A row render function, called during a any row's render to the dom.
+     * It can be used to add extra markup around any given table row
+     **/
+    template?: RowTemplateFunc<VNode | VNode[], T>;
+    /** A function which can be used to apply any html attribute/s onto a table row `tr` */
+    rowProperties?: RowPropertiesFunc<T>;
+  }
+
+  /**
+   * Row renderer property. Called during the rendering of a tables head and foot
+   * controlling their visual state.
+   */
+  interface HeadFootRenderer<T = RowData> {
+    /** Position prop. Defaults to `top` for the header and `bottom` the footer */
+    pinned: Position;
+    /**
+     * A row render function, called during a any row's render to the dom.
+     * It can be used to add extra markup around any given table row.
+     * If used, and you want to see the rendered row, you *must* nest it within your
+     * jsx function e.g. `(h, props) => { return [props.renderedRow, <tr><td>Custom thing</td></tr>]}`
+     **/
+    template?: RowTemplateFunc<VNode | VNode[], T>;
+    /** A function which can be used to apply any html attribute/s onto a table row `tr` */
+    rowProperties?: () => RowProps | void | undefined;
+  }
+
+  type TBody = {
+    rows: TableTypes.NanoTable['rows'];
+    __uuid: string | number;
+  };
+
+  class NanoTable<T = RowGeneric> {
+    rows: T[];
+    columns: ColumnConfig<T>[];
+    rowRender: RowRenderer<T>;
+    headRender: HeadFootRenderer<T>;
+    footRender: HeadFootRenderer<T>;
+  }
+
+  type Falsy = false | 0 | '' | null | undefined;
+}

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

@@ -0,0 +1,250 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import type { TableTypes } from './table-interface';
+/**
+ * Enables the search, filter and sort of tabular data.
+ *
+ * @version 3.0.0
+ * @status stable
+ *
+ * @slot caption - The table's caption. You must either use this or the `caption` attribute.
+ * @slot no-results - text to display when search or filtering yields no results
+ */
+export declare class NanoDataTable implements ComponentInterface {
+    constructor();
+    /** Function called whenever `col.cellTemplate` renders an unknown object.
+     * The function should render a valid HTMLElement to the cell arg.
+     * Example usage - render JSX from a 3rd party lib and append the result to the cell element. */
+    customRenderer: (node: any, cell: HTMLElement | DocumentFragment) => void | Promise<string>;
+    /** If true, will render any nested table in a scrollable container (using `overflow: auto`) */
+    scrollable: boolean;
+    /** A descriptive title of the table.
+     * You must use this or the `slot="caption"` for accessibility */
+    caption: string;
+    /** Show the caption on-screen */
+    showCaption: boolean;
+    /** Will show a loading state when set to true.
+     * By default, will be shown automatically if `rows` is a promise waiting to resolve / or falsy
+     * *or* when performing custom filtering or sorting.
+     * *Note* when set manually, will overwrite any internal loading state.
+     * Set to 'undefined' to revert to default behaviour. */
+    loading: boolean;
+    get _loading(): boolean;
+    set _loading(l: boolean);
+    private debounceSetLoading;
+    internalLoading: boolean;
+    /** When loading rows asynchronously render this number of placeholder rows */
+    placeholderSize: number;
+    /** The data to place in the table */
+    rows: TableTypes.NanoTable['rows'] | Promise<TableTypes.NanoTable['rows']>;
+    handleRowsChange(): void;
+    /** The column config used to present the rows of data */
+    columns: TableTypes.NanoTable<any>['columns'];
+    handleColsChange(): Promise<void>;
+    /** Used for custom thead row rendering */
+    headRender: TableTypes.HeadFootRenderer;
+    /** Used for custom row rendering */
+    rowRender: TableTypes.RowRenderer;
+    /** Used for custom tfoot row rendering */
+    footRender: TableTypes.HeadFootRenderer;
+    /** Whether to show a `<tfoot>` component */
+    showFooter: boolean;
+    /** To improve performance, data is split into blocks
+     * which are shown / hidden and rendered as they become visible.
+     * Use this to control the number of hits within a block -
+     * A block should fill a scrolling viewport.
+     * The less perBlock the better for performance */
+    perBlock: number;
+    /** The number of total blocks currently rendered in the table. @readonly */
+    get blocksLength(): number;
+    /** Term to search for in the data */
+    searchTerm: string;
+    /** A custom filtering function. Should return a promise.
+     * If the promise resolves as `true` the column UI will be updated.
+     * If the promise resolves as falsy, the sort will be performed by the component.
+     * A good use-case would be performing the filter on a server / via fetch.
+     * Then on success, updating the table's data via the `rows` property */
+    customFilterFn?: (filters: TableTypes.Filter[]) => Promise<true | TableTypes.Falsy>;
+    /** A custom sorting function. Should return a promise.
+     * If the promise resolves as `true` the column UI will be updated.
+     * If the promise resolves as falsey, the sort will be performed by the component.
+     * A good use-case would be performing the sort on a server / via fetch.
+     * Then on success, updating the table's data via the `rows` property */
+    customSortFn?: (property: TableTypes.Prop, order: TableTypes.Order) => Promise<true | TableTypes.Falsy>;
+    /**
+     * The default sortable option for all columns.
+     * `true` will enable column sorting unless you set `sortable: false` on a column
+     * `false` will disable column sorting unless you set `sortable: true` on a column
+     */
+    defaultSort: boolean;
+    handleSearchTermChange(): void;
+    /** If true, will show a spinner at the bottom of the table when loading */
+    showPaginateSpinner: boolean;
+    /** Use this to render the table with roughly the correct dimensions.
+     * a use-case might be; fetch a small initial dataset to minimise load-time,
+     * render the table with the correct dimensions, the table becomes interactive,
+     * load the rest of the data
+     */
+    virtualTotalItems: number;
+    virtualTotalItemsChangeHandler(): void;
+    /** @readonly - shows the currently applied filters */
+    get appliedFilters(): TableTypes.Filter[];
+    /** Fired when the table has done it's first complete render */
+    nanoTblReady: EventEmitter;
+    /** Fired whenever a block is activated by scrolling into view / becoming visible
+     * This could be leveraged for infinite scrolling / to fetch more data.
+     */
+    nanoTblBlockRendered: EventEmitter<{
+        block: number;
+        totalBlocks: number;
+    }>;
+    /** Fired before a column is sorted.
+     * `event.preventDefault()` to stop sorting.  */
+    nanoTblBeforeSort: EventEmitter<{
+        column: TableTypes.Prop;
+        order: TableTypes.Order;
+    }>;
+    /** Fired after a column is sorted */
+    nanoTblAfterSort: EventEmitter<{
+        column: TableTypes.Prop;
+        order: TableTypes.Order;
+    }>;
+    /** Fired before a column is filtered.
+     * `event.preventDefault()` to stop filtering. */
+    nanoTblBeforeFilter: EventEmitter<{
+        filters: TableTypes.Filter[];
+    }>;
+    /** Fired after a column is sorted */
+    nanoTblAfterFilter: EventEmitter<{
+        filters: TableTypes.Filter[];
+    }>;
+    /** Fired before a general search.
+     * `event.preventDefault()` to stop searching.  */
+    nanoTblBeforeSearch: EventEmitter<{
+        term: string;
+    }>;
+    /** Fired after a general / cross column search */
+    nanoTblAfterSearch: EventEmitter<{
+        term: string;
+    }>;
+    /** Fired before a general search.
+     * `event.preventDefault()` to stop searching.  */
+    nanoTblBeforeEdit: EventEmitter<{
+        term: string;
+    }>;
+    /** Remove any column sorts currently applied
+     * @returns a promise which resolves when complete */
+    resetSorting(): Promise<void>;
+    /** Apply a sort on a column
+     * @returns a promise which resolves when complete */
+    addSort(column: TableTypes.Prop, order: TableTypes.Order): Promise<void>;
+    /** Remove any column filters currently applied
+     * @returns a promise which resolves when complete */
+    resetFilters(): Promise<void>;
+    /** Apply a filter on a column
+     * @param filters - the filters to apply
+     * @param additive - if true, will add the filters to any currently applied
+     * @returns a promise which resolves when complete
+     */
+    addFilters(filters: TableTypes.Filter[], additive?: boolean): Promise<void>;
+    /** Remove filters from a column
+     * @param columnNames - the filters to apply
+     * @returns a promise which resolves when complete
+     */
+    removeFilters(columnNames: TableTypes.Prop[]): Promise<void>;
+    /** Updates a row model at a given index
+     * @param row - the row to update.
+     * @param rowIndex - the row index to insert this row
+     */
+    updateRow(row: TableTypes.RowData, rowIndex: number): Promise<void>;
+    host: HTMLNanoDataTableElement;
+    private renderId;
+    private store;
+    private filters;
+    private currentFilters;
+    private currentSort;
+    private tableEle;
+    private topAnchorEle;
+    private activeWatcherIo;
+    private tablePinnedService;
+    private customFilterApplied;
+    /** `tr` elements split into units - defined by `perBlock`
+      These are show / hidden for perf */
+    blocks: TableTypes.TBody[];
+    activeBlocks: number[];
+    private measureHeight;
+    private blockElements;
+    private blockHeights;
+    private set measureEle(value);
+    private unitHeight;
+    private get scrollParent();
+    private set scrollParent(value);
+    private _scrollParent;
+    private get primaryBlockIndex();
+    private set primaryBlockIndex(value);
+    private _primaryBlockIndex;
+    private get isReady();
+    private set isReady(value);
+    private _isReady;
+    private handleReady;
+    /**
+     * Start a sort - can be cancelled by `preventDefault`
+     * @param order - column order
+     * @param column - column config object
+     * @returns A promise
+     */
+    private sortStart;
+    /**
+     * Complete a sort. Reflects the order to ui.
+     * @param order - column order
+     * @param column - column config object
+     */
+    private sortComplete;
+    private searchStart;
+    private filterStart;
+    private filterComplete;
+    /** Scrolls to the top immediately - used whilst sorting / filtering */
+    private scrollToTop;
+    private setMeasureElement;
+    /**
+     * Makes sure we have dimensions on at least one, active tbody element.
+     * We'll use this is a yard stick for inactive tbody elements in future.
+     * These elements have no natural height (on account of all their rows being hidden)
+     */
+    private setInitialBlockDimension;
+    /** Apply initial columns settings */
+    private columnInit;
+    /** Split up all incoming rows into 'blocks' split amongst tbody elements.
+     * These can then be hidden / shown to improve performance.
+     */
+    private setBlocks;
+    /**
+     * Returns a block render height.
+     * If it's currently active - let auto do it's thing
+     * If we've rendered it before - return that
+     * If all else fails, let's guess it
+     * @param blockIndex
+     * @returns a height string (incl px)
+     */
+    private getBlockHeight;
+    /** cache the height for all active blocks for later renders */
+    private setBlockHeight;
+    /**
+     * On scroll, loop through all blocks' heights and cumulatively, add them together.
+     * When we find that the scroll position is less than this cumulative block height -
+     * stop loop - it's on the current active block.
+     */
+    private scrollHandler;
+    /** Process slotted content */
+    private processSlots;
+    /** Adds an IO. Makes sure our scroll listener is only active when
+     * the table is in viewport */
+    private setupActiveWatcher;
+    componentWillLoad(): Promise<void>;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    componentShouldUpdate(_newVal: any, _oldVal: any, stateName: keyof NanoDataTable): boolean;
+    componentWillRender(): void | Promise<void>;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/data-table/table.store.d.ts

@@ -0,0 +1,24 @@
+import { ObservableMap } from '@stencil/store';
+import type { TableTypes } from './table-interface';
+export interface TableStores {
+    data: ObservableMap<{
+        rows: TableTypes.NanoTable['rows'];
+    }>;
+    config: ObservableMap<{
+        columns: TableTypes.NanoTable['columns'];
+    }>;
+    general: ObservableMap<{
+        workerId: string;
+        scrollParent: HTMLElement;
+        host: HTMLNanoDataTableElement;
+        isReady: boolean;
+        isActive?: boolean;
+    }>;
+}
+export declare function generateStore(host: HTMLNanoDataTableElement, columns: TableTypes.NanoTable['columns'], scrollParent: HTMLElement, isReady: boolean): Promise<TableStores>;
+export declare function getStore(host: HTMLElement): TableStores;
+export declare function storeSetData(host: HTMLElement, rows: TableTypes.RowData[]): Promise<boolean>;
+export declare function storeSetConfig(host: HTMLElement, columns: TableTypes.ColumnConfig[]): Promise<boolean>;
+export declare function storeSearch(host: HTMLElement, term: string): Promise<void>;
+export declare function storeFilter(host: HTMLElement, filters: TableTypes.Filter[]): Promise<void>;
+export declare function storeSort(host: HTMLNanoDataTableElement, prop: TableTypes.Prop, order: TableTypes.Order): Promise<void>;

package/dist/types/components/data-table/table.utils.d.ts

@@ -0,0 +1,63 @@
+import { VNode } from '../../stencil-public-runtime';
+import type { TableTypes } from './table-interface';
+type ValidRenderTypes = 'tr' | 'th' | 'td';
+/**
+ * Get a model object for custom cell / property renderers.
+ * @param rowIndex - the current row index being rendered
+ * @param colIndex - the current column index being rendered
+ * @returns a model object which will be passed to custom renderers
+ */
+export declare function colDataModel(rowIndex: number, colIndex: number): TableTypes.RenderModel;
+/**
+ * Get a model object for custom row renderers.
+ * @param rowIndex
+ * @returns a model object passed to custom row renderers
+ */
+export declare function rowDataModel(rowIndex: number): TableTypes.RowDataSchemaModel;
+/**
+ * Merges 2 objects of properties together
+ * @param current - property object
+ * @param extra - additional object property
+ * @returns - merged properties that can be applied to a node
+ */
+export declare function mergeProperties<T extends TableTypes.CellProps>(current: T, extra: T): T;
+/**
+ * Returns the current nano-data-table's stores.
+ * @returns the current nano-data-table stores
+ */
+export declare function fetchStores(): import("./table.store").TableStores;
+/**
+ * Merges any defined cell properties with properties
+ * required by `nano-data-table` functionality
+ * @param rowIndex - the current row index being rendered
+ * @param colIndex = the current column index being rendered
+ * @param defaultProps - default properties required by `nano-data-table`
+ * @returns - the merged properties that will be applied to a node
+ */
+export declare function mergeCellProperties(rowIndex: number, colIndex: number, defaultProps: TableTypes.CellProps): TableTypes.CellProps;
+/**
+ * Renders a table header (within a thead) using a custom template if set.
+ * @param col - the current column config object
+ * @returns - a JSX node
+ */
+export declare function colheadFootRender(col: TableTypes.ColumnConfig): VNode;
+/**
+ * Renders a class string or map for pinned classes on the v axis.
+ * @param type - element tagName
+ * @param vPinned - whether element is currently pinned vertically to top or bottom
+ * @param toString - render as a string (defaults to class map)
+ * @returns a class string or class map
+ */
+export declare function headerPinClasses(type: ValidRenderTypes, vPinned?: TableTypes.Position, toString?: false): {
+    [key: string]: boolean;
+};
+export declare function headerPinClasses(type: ValidRenderTypes, vPinned?: TableTypes.Position, toString?: true): string;
+/**
+ * Turns a class map {'string': boolean} to class string
+ * @param classes - the class map to convert
+ * @returns a class string
+ */
+export declare function classListToStr(classes: {
+    [key: string]: boolean;
+}): string;
+export {};

package/dist/types/components/datalist/datalist.d.ts

@@ -2,10 +2,10 @@ import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import type { Dropdown } from '../dropdown/dropdown';
 import type { OptionInterface } from '../option/option-interface';
 /**
- * `nano-datalist` a visually consistent and more flexible replacement for a native
- * [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`
- * or linked to any input control via the `input` prop. Is used internally within `nano-select`.
- * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop
+ * Represents a permissible or recommended list of options available to choose from within other controls.
+ *
+ * @version 2.0.0
+ * @status stable
  *
  * @slot - use `<nano-option>` elements for more complex html. Alternatively use the `options` prop
  * @slot list-top - shows at the top of the list when there are options present
@@ -49,7 +49,7 @@ export declare class DataList implements ComponentInterface {
     /** Tweaks the datalist behaviour and linked control semantics and behaviour.
      * e.g. 'select' will make the linked input control `readonly`.
      */
-    type: 'select' | 'selctMulti' | 'input';
+    type: 'select' | 'selectMulti' | 'input';
     /** return all the active options currently within the datalist. Can be useful for validation */
     get activeOptions(): HTMLNanoOptionElement[];
     /** Force datalist open */