@spectric/ui 0.0.9 → 0.0.11

package/dist/components/Button.d.ts

@@ -19,13 +19,13 @@ export declare enum ButtonVariants {
 type ButtonVariantsTypes = `${ButtonVariants}`;
 export interface ButtonProps {
     /** Is this the principal call to action on the page? */
-    variant: ButtonVariantsTypes;
+    variant?: ButtonVariantsTypes;
     /** What background color to use */
     backgroundColor?: string;
     /** How large should the button be? */
     size: ButtonSizesTypes;
     label?: string;
-    disabled: boolean;
+    disabled?: boolean;
     danger?: boolean;
     icon?: boolean;
     tooltip?: DomRenderable;

package/dist/components/pagination/pagination.d.ts

@@ -4,11 +4,11 @@ import { ButtonSizesTypes } from '../Button';
 export declare const PaginationElementTag = "spectric-pagination";
 export type { PaginationProps, PaginationChangeProps, PaginationEvents };
 interface PaginationChangeProps {
-    page: number;
-    pageSize: number;
+    page?: number;
+    pageSize?: number;
 }
 interface PaginationProps extends PaginationChangeProps {
-    size: ButtonSizesTypes;
+    size?: ButtonSizesTypes;
     totalItems?: number;
     pageSizeOptions?: number[];
 }
@@ -42,7 +42,7 @@ declare global {
     namespace JSX {
         interface IntrinsicElements {
             /**
-             * @see {@link DialogElement}
+             * @see {@link PaginationElement}
              */
             [PaginationElementTag]: ReactElementWithPropsAndEvents<PaginationElement, PaginationProps, PaginationEvents>;
         }
@@ -51,7 +51,7 @@ declare global {
         namespace JSX {
             interface IntrinsicElements {
                 /**
-                 * @see {@link DialogElement}
+                 * @see {@link PaginationElement}
                  */
                 [PaginationElementTag]: ReactElementWithPropsAndEvents<PaginationElement, PaginationProps, PaginationEvents>;
             }

package/dist/components/query_bar/QueryBar.d.ts

@@ -33,7 +33,7 @@ export interface IQueryProps {
     /**
      * The output of the query in a specific format
      */
-    outputLanguage: SupportedLanguagesTypes;
+    outputLanguage?: SupportedLanguagesTypes;
     /**
      * The output of the query
      */
@@ -41,15 +41,15 @@ export interface IQueryProps {
     /**
      * Fields that are used for the auto complete
      */
-    fields: FieldTypes[];
+    fields?: FieldTypes[];
     /**
      * Callback that will provide values for specific fields
      */
-    getValuesForField: (field: string, text: string) => Promise<string[]>;
+    getValuesForField?: (field: string, text: string) => Promise<string[]>;
     /**
      * Input placeholder
      */
-    placeholder: string;
+    placeholder?: string;
 }
 /**
  * The Query component will take Opensearch Dashboard Query language and transform it into various outputs

package/dist/components/table/cell.d.ts

@@ -55,4 +55,5 @@ declare global {
         }
     }
 }
+export declare const rowGetValue: (context: Record<string, any>, key: string) => any;
 export {};

package/dist/components/table/header.d.ts

@@ -11,10 +11,11 @@ interface HeaderProps<T> {
 export declare class TableHeaderElement<T> extends LitElement implements HeaderProps<T> {
     columns: ColumnSettings<T>[];
     protected createRenderRoot(): HTMLElement | DocumentFragment;
+    _handleSortChange: (column: ColumnSettings<T>) => void;
     protected render(): unknown;
 }
 interface TableHeaderEvents {
-    'sort': (event: CustomEvent<ColumnSettings<any>>) => void;
+    'sortChange': (event: CustomEvent<ColumnSettings<any>>) => void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/table/sorting.d.ts

@@ -0,0 +1,5 @@
+import { ColumnSettings } from './table';
+/**
+ * Creates a chain of sort functions so you can perform multi column sorting.
+ */
+export declare const createSortChain: <T>(sorts: ColumnSettings<T>[]) => ((a: T, b: T) => number | undefined)[];

package/dist/components/table/table.d.ts

@@ -5,66 +5,73 @@ import { FilterEvent } from './cell';
 export declare const TableElementTag = "spectric-table";
 export type { TableProps, TableEvents };
 export type DomRenderable = HTMLElement | TemplateResult | string | number | null;
+export declare enum TableSelectOptions {
+    multi = "multi",
+    single = "single",
+    none = "none"
+}
+export declare enum TableSortOption {
+    multi = "multi",
+    single = "single"
+}
+export type TableSortOptionTypes = `${TableSortOption}`;
+export declare enum TableSortDirection {
+    ascending = "ascending",
+    decending = "decending",
+    none = "none"
+}
+export type TableSortDirectionTypes = `${TableSortDirection}`;
 export type ColumnSettings<T> = {
     width?: number;
     whiteSpace?: "nowrap";
     hidden?: boolean;
     sortable?: boolean;
+    sortDirection?: TableSortDirectionTypes;
     filterable?: boolean;
     title?: DomRenderable;
+    /**
+     * Key to used for getting data from an object for a cell
+     */
     key?: string;
+    /**
+     * Render function to render a table cell for displaying custom html
+     */
     render?: (row: T, table: TableElement<T>) => DomRenderable;
+    /**
+     * Custom comparator function for sorting
+     */
+    compareFn?: ((a: T, b: T) => number) | undefined;
 };
-type TableSelectOptions = "multi" | "single";
-interface TableProps<T> {
+export type TableSelectOptionsTypes = `${TableSelectOptions}`;
+export interface TableDataOptions<T> {
     pagination?: PaginationProps;
     columns: ColumnSettings<T>[];
+}
+interface TableProps<T> extends TableDataOptions<T> {
     data: T[];
-    select?: TableSelectOptions;
+    select: TableSelectOptionsTypes;
+    sort?: TableSortOptionTypes;
 }
 type DomEvent<T> = Event & {
     target: T;
 };
 /**
- * Table Element
- *
- * The table element is a bit more complex and the column settings and data can only be set through the properties
- *
+ * React example
+ * <iframe  width="100%" height="400px" src="https://stackblitz.com/edit/react-ts-2ue7azag?ctl=1&embed=1&file=App.tsx&hideExplorer=1&hideNavigation=1"/>
  *
- * React
- *
- * ``` tsx
- * <spectric-table data={[{col1:1}]} columns={[{key:"col1",}]} ></spectric-table>
- * ```
- *
- * Javascript
- *
- * ``` js
- * table = document.createElement("spectric-table")
- * table.data = [{col1:1}]
- * table.columns = [{key:"col1",}]
- * ```
- *
- * HTML
- *
- * ``` html
- * <spectric-table id="table"></spectric-table>
- * <script>
- * document.querySelector("#table")
- * table.data = [{col1:1}]
- * table.columns = [{key:"col1",}]
- * </script>
- * ```
  */
 export declare class TableElement<T> extends LitElement implements TableProps<T> {
     data: T[];
-    pagination?: PaginationProps | undefined;
+    pagination?: PaginationProps;
     columns: ColumnSettings<T>[];
-    select?: TableSelectOptions;
+    select: TableSelectOptionsTypes;
+    sort: TableSortOptionTypes;
+    static getDefaultDataSorterAndPaginatior<T>(data: T[]): (props: TableDataOptions<T>) => T[];
     private _handlePaginationChange;
+    private _handleSortChange;
     private _emitChange;
     private __DO_NOT_USE_filter;
-    selected: T[];
+    private selected;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     _handleSelectAllChange: (e: DomEvent<HTMLInputElement>) => void;
     protected render(): unknown;
@@ -82,7 +89,7 @@ declare global {
     namespace JSX {
         interface IntrinsicElements {
             /**
-             * @see {@link DialogElement}
+             * @see {@link TableElement}
              */
             [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>;
         }
@@ -91,7 +98,7 @@ declare global {
         namespace JSX {
             interface IntrinsicElements {
                 /**
-                 * @see {@link DialogElement}
+                 * @see {@link TableElement}
                  */
                 [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>;
             }

package/dist/components/tooltip/tooltip.d.ts

@@ -77,7 +77,7 @@ declare global {
     namespace JSX {
         interface IntrinsicElements {
             /**
-             * @see {@link DialogElement}
+             * @see {@link TooltipElement}
              */
             [TooltipElementTag]: ReactElementWithPropsAndEvents<TooltipElement, TooltipProps, TooltipEvents>;
         }
@@ -86,7 +86,7 @@ declare global {
         namespace JSX {
             interface IntrinsicElements {
                 /**
-                 * @see {@link DialogElement}
+                 * @see {@link TooltipElement}
                  */
                 [TooltipElementTag]: ReactElementWithPropsAndEvents<TooltipElement, TooltipProps, TooltipEvents>;
             }

package/dist/custom-elements.json

@@ -2015,16 +2015,36 @@
     },
     {
       "name": "spectric-table-header",
-      "description": "Pagination Element\n\nProperties:\n\n  * `columns` {`ColumnSettings<T>[]`} - ",
-      "attributes": []
+      "description": "Pagination Element\n\nEvents:\n\n  * `sortChange` {`CustomEvent<ColumnSettings<T>>`} - \n\nProperties:\n\n  * `_handleSortChange` - \n\n  * `columns` {`ColumnSettings<T>[]`} - ",
+      "attributes": [
+        {
+          "name": "onsortChange",
+          "description": "`sortChange` {`CustomEvent<ColumnSettings<T>>`} - "
+        }
+      ]
     },
     {
       "name": "spectric-table",
-      "description": "Table Element\n\nThe table element is a bit more complex and the column settings and data can only be set through the properties\n\n\nReact\n\n``` tsx\n<spectric-table data={[{col1:1}]} columns={[{key:\"col1\",}]} ></spectric-table>\n```\n\nJavascript\n\n``` js\ntable = document.createElement(\"spectric-table\")\ntable.data = [{col1:1}]\ntable.columns = [{key:\"col1\",}]\n```\n\nHTML \n\n``` html\n<spectric-table id=\"table\"></spectric-table>\n<script>\ndocument.querySelector(\"#table\")\ntable.data = [{col1:1}]\ntable.columns = [{key:\"col1\",}]\n</script>\n```\n\nEvents:\n\n  * `change` {`CustomEvent<{ pagination?: PaginationChangeProps | undefined; }>`} - \n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\n  * `select` {`CustomEvent<T[]>`} - \n\nAttributes:\n\n  * `select` {`TableSelectOptions | undefined`} - \n\nProperties:\n\n  * `_handlePaginationChange` - \n\n  * `_emitChange` - \n\n  * `__DO_NOT_USE_filter` - \n\n  * `selected` {`T[]`} - \n\n  * `_handleSelectAllChange` - \n\n  * `pagination` {`PaginationProps | undefined`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `data` {`T[]`} - \n\n  * `select` {`TableSelectOptions | undefined`} - ",
+      "description": "React example\n<iframe  width=\"100%\" height=\"400px\" src=\"https://stackblitz.com/edit/react-ts-2ue7azag?ctl=1&embed=1&file=App.tsx&hideExplorer=1&hideNavigation=1\"/>\n\nEvents:\n\n  * `change` {`CustomEvent<TableDataOptions<T>>`} - \n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\n  * `selected` {`CustomEvent<T[]>`} - \n\nAttributes:\n\n  * `select` {`\"none\" | \"multi\" | \"single\"`} - \n\n  * `sort` {`\"multi\" | \"single\"`} - \n\nProperties:\n\n  * `_handlePaginationChange` - \n\n  * `_handleSortChange` - \n\n  * `_emitChange` - \n\n  * `__DO_NOT_USE_filter` - \n\n  * `selected` {`T[]`} - \n\n  * `_handleSelectAllChange` - \n\n  * `data` {`T[]`} - \n\n  * `select` {`\"none\" | \"multi\" | \"single\"`} - \n\n  * `sort` {`\"multi\" | \"single\"`} - \n\n  * `pagination` {`PaginationProps | undefined`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - ",
       "attributes": [
         {
           "name": "select",
-          "description": "`select` {`TableSelectOptions | undefined`} - \n\nProperty: select",
+          "description": "`select` {`\"none\" | \"multi\" | \"single\"`} - \n\nProperty: select\n\nDefault: none",
+          "values": [
+            {
+              "name": "none"
+            },
+            {
+              "name": "multi"
+            },
+            {
+              "name": "single"
+            }
+          ]
+        },
+        {
+          "name": "sort",
+          "description": "`sort` {`\"multi\" | \"single\"`} - \n\nProperty: sort\n\nDefault: single",
           "values": [
             {
               "name": "multi"
@@ -2036,15 +2056,15 @@
         },
         {
           "name": "onchange",
-          "description": "`change` {`CustomEvent<{ pagination?: PaginationChangeProps | undefined; }>`} - "
+          "description": "`change` {`CustomEvent<TableDataOptions<T>>`} - "
         },
         {
           "name": "onfilter",
           "description": "`filter` {`CustomEvent<FilterEvent<T>>`} - "
         },
         {
-          "name": "onselect",
-          "description": "`select` {`CustomEvent<T[]>`} - "
+          "name": "onselected",
+          "description": "`selected` {`CustomEvent<T[]>`} - "
         }
       ]
     },
@@ -2095,7 +2115,7 @@
     },
     {
       "name": "spectric-storybook-example-content",
-      "description": "Attributes:\n\n  * `frameWidth` {`number`} - \n\nProperties:\n\n  * `frameWidth` {`number`} - \n\n  * `query` {`SpectricQuery`} - \n\n  * `dialogOpen` {`boolean`} - \n\n  * `tableData` {`TestData[]`} - \n\n  * `pagination` {`{ page: number; pageSize: number; size: string; totalItems: number; }`} - \n\n  * `_handleFilter` - \n\n  * `_handlePaginationChange` - ",
+      "description": "Attributes:\n\n  * `frameWidth` {`number`} - \n\nProperties:\n\n  * `frameWidth` {`number`} - \n\n  * `query` {`SpectricQuery`} - \n\n  * `dataSorter` - \n\n  * `dialogOpen` {`boolean`} - \n\n  * `tableData` {`TestData[]`} - \n\n  * `columns` {`ColumnSettings<TestData>[]`} - \n\n  * `pagination` {`PaginationProps`} - \n\n  * `_handleFilter` - \n\n  * `_handlePaginationChange` - ",
       "attributes": [
         {
           "name": "frameWidth",