wjec-one 4.0.1-alpha.3 → 4.0.2

package/config/jest.config.js

@@ -11,33 +11,33 @@ const coverageThreshold = overrides.coverageThreshold === undefined ? 100 : over
 
 module.exports = {
   collectCoverageFrom: [
-    'auth/**/*.{ts,tsx}',
-    'localization/**/*.{ts,tsx}',
-    'portal/**/*.{ts,tsx}',
-    'services/**/*.{ts,tsx}',
-    'src/**/*.{ts,tsx}',
-    'store/**/*.{ts,tsx}',
-    'theme/**/*.{ts,tsx}',
-    'utils/**/*.{ts,tsx}',
+    './auth/**/*.{ts,tsx}',
+    './localization/**/*.{ts,tsx}',
+    './portal/**/*.{ts,tsx}',
+    './services/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+    './store/**/*.{ts,tsx}',
+    './theme/**/*.{ts,tsx}',
+    './utils/**/*.{ts,tsx}',
 
-    '!**/*.d.ts',
-    '!localization/index.ts',
-    '!portal/index.ts',
-    '!portal/**/store/state.{ts,tsx}',
-    '!services/index.ts',
-    '!src/ColorPalette*.ts',
-    '!src/components/**/styles.{ts,tsx}',
-    '!src/StylePalette.ts',
-    '!src/styles',
-    '!test/**/*',
-    '!theme/index.ts',
-    '!theme/ThemeContext.ts',
-    '!theme/ThemeState.ts',
-    '!theme/utils.ts',
-    '!**/types',
-    '!types.ts',
-    '!utils/index.ts',
-    '!utils/ConfigUtils.ts'
+    '!./**/*.d.ts',
+    '!./localization/index.ts',
+    '!./portal/index.ts',
+    '!./portal/**/store/state.{ts,tsx}',
+    '!./services/index.ts',
+    '!./src/ColorPalette*.ts',
+    '!./src/components/**/styles.{ts,tsx}',
+    '!./src/StylePalette.ts',
+    '!./src/styles',
+    '!./test/**/*',
+    '!./theme/index.ts',
+    '!./theme/ThemeContext.ts',
+    '!./theme/ThemeState.ts',
+    '!./theme/utils.ts',
+    '!./**/types',
+    '!./types.ts',
+    '!./utils/index.ts',
+    '!./utils/ConfigUtils.ts'
   ],
   coverageReporters: ['cobertura', 'json', 'text'],
   coverageThreshold: {

package/index.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { Interpolation, ArrayInterpolation } from '@emotion/core';
 import * as _emotion_utils from '@emotion/utils';
-import React$1, { SVGProps, ButtonHTMLAttributes, CSSProperties, FC, PropsWithChildren, InputHTMLAttributes, MouseEvent, Dispatch, Context } from 'react';
+import React$1, { SVGProps, ButtonHTMLAttributes, CSSProperties, FC, PropsWithChildren, InputHTMLAttributes, MouseEvent, Dispatch, Context, ReactNode, Key } from 'react';
 import { AriaButtonProps } from 'react-aria';
 import { GapProperty, BottomProperty, LeftProperty, RightProperty, TopProperty, ColorProperty, WidthProperty, HeightProperty, MarginProperty, PaddingProperty } from 'csstype';
 import { Record } from 'immutable';
+import { Interpolation, ArrayInterpolation } from '@emotion/core';
 
 type ColorPalette = {
     border: string;
@@ -48,8 +48,7 @@ type ColorPalette = {
     welshBaccFoundation: string;
     welshBaccNational: string;
     welshBaccKS4: string;
-};
-type Styles = Interpolation | ArrayInterpolation<any>;
+};
 
 declare const _default$2: ColorPalette;
 
@@ -1653,72 +1652,102 @@ declare const SubParagraph: WjecOneComponent<SubParagraphProps>;
 
 declare const SubTitle: WjecOneComponent;
 
-type CellAlignment = 'center' | 'left' | 'right';
-type CellStyleExtractor<T> = (row: T, cellValue: string | number | JSX.Element, index: number) => Styles;
 type ColumnOptions = {
+    /**
+     * Determines the alignment of cell content (may result in unexpected behaviour if a component/element is provided as the cell's content)
+     * @default "left"
+     */
     align?: 'center' | 'left' | 'right';
+    /**
+     * Determines the spacing between columns
+     * @default "16px"
+     */
+    gap?: CSSProperties['gap'];
 };
-type ColumnWidth = 'max' | 'min' | CSSProperties['width'];
-type RowOptions<T> = {
-    group?: (row: T) => string;
+type RowOptions = {
+    /**
+     * Determines the spacing between rows
+     * @default "8px"
+     */
+    gap?: CSSProperties['gap'];
+    /**
+     * Determines the highlight behaviour of the row:
+     *  * "hover" - highlight will appear when the cursor moves over a row
+     *  * "selected" - highlight will appear when a row is the specified `selectedRow` (also applies for "hover")
+     *  * false - no highlighting will be applied
+     * @default false
+     */
+    highlight?: 'hover' | 'selected' | false;
+    /**
+     * Determines the colour of the row highlight, where applicable
+     * @default ```js
+     *   ColorPalette.highlight
+     * ```
+     */
+    highlightColor?: CSSProperties['color'];
 };
-type RowStyleExtractor<T> = (row: T, index: number) => Styles;
 type SortDirection = 'ascending' | 'descending';
-type TableColumnCellRenderer<T> = (row?: T) => JSX.Element;
-type TableColumnExtractor<T> = (row: T) => Array<TableColumnEntry<T>>;
-type TableColumnValueExtractor<T> = (row?: T) => FormattedString | number;
-interface TableColumnEntryTemplate<T> {
-    align?: CellAlignment;
-    headingStyle?: Styles;
-    onSort?: (direction: SortDirection) => void;
+type TableColumn<T, N extends string = string> = {
+    /**
+     * Determines the alignment of cell content (may result in unexpected behaviour if a component/element is provided as the cell's content)
+     * @default "left"
+     */
+    align?: 'center' | 'left' | 'right';
+    /**
+     * Specifies either an explicit value to display, or the return value of a function to which the current row is provided as an argument */
+    displayValue: ReactNode | ((row: T) => ReactNode);
+    /** A unique identifier for each column. Strongly recommended when using dynamically-defined columns and/or sorting */
+    name?: N;
+    /** A handler that will be called when the column header cell is pressed */
+    onPressHeader?: () => void;
+    /** Determines whether this column is sortable (may override/be overridden by top-level `sortable` value) */
     sortable?: boolean;
-    sortableValue?: KeyExtractor<T>;
-    sorted?: SortDirection | false;
-    style?: Styles | CellStyleExtractor<T>;
-    title: FormattedString;
-    width?: ColumnWidth;
-}
-interface TableColumnEntryWithComponent<T> extends TableColumnEntryTemplate<T> {
-    render: JSX.Element | TableColumnCellRenderer<T>;
-}
-interface TableColumnEntryWithKey<T> extends TableColumnEntryTemplate<T> {
-    key: keyof T;
-}
-interface TableColumnEntryWithValue<T> extends TableColumnEntryTemplate<T> {
-    value: FormattedString | number | TableColumnValueExtractor<T>;
-}
-type TableColumnEntry<T> = TableColumnEntryWithComponent<T> | TableColumnEntryWithKey<T> | TableColumnEntryWithValue<T>;
-type TableProps<T> = {
-    /** A React styles object or a serialized Emotion styles object (or a function that returns either of these) used to style each cell */
-    cellStyle?: Styles | CellStyleExtractor<T>;
-    /** A list of column configuration objects (or a function that returns the same) used to determine what is displayed by the Table */
-    columns: Array<TableColumnEntry<T>> | TableColumnExtractor<T>;
+    /** Determines the value to be considered by the Table's internal sorting algorithm */
+    sortableValue?: (row: T) => number | string;
+    /** Determines the value to be displayed in the column's header cell */
+    title?: ReactNode;
+    /** Specifies the width of the column  */
+    width?: 'max' | 'min' | CSSProperties['width'];
+};
+type TableProps<T, N extends string> = {
+    /** A list of column configurations objects used to determine what is displayed by the Table */
+    columns: Array<TableColumn<T, N>>;
     /** Options that will be applied to all columns in the Table (some options may be overridden on a per-column basis) */
     columnOptions?: ColumnOptions;
     /** The array of data that will be used to populate the table */
     data: T[];
-    /** A function that will be used to return a unique key for each row; required if data contains non-primitive entries */
-    keyExtractor?: KeyExtractor<T>;
     /**
-     * A handler that will be called when a row in the table is clicked
-     * @deprecated onClickRow has been deprecated in favor of the new onPressRow prop, which behaves similarly but with better accessibility support
-    */
-    onClickRow?: (row: T, index: number) => void;
+     * A function that will be used to return a unique key for each row; required if data contains non-primitive entries
+     * @default ```ts
+     *   (row) => data.indexOf(row)
+     * ```
+     */
+    keyExtractor?: (row: T) => Key;
     /** A handler that will be called when a row in the table is pressed */
-    onPressRow?: (row: T, index: number) => void;
-    /** Determines whether the data arrives pre-sorted; if true, the Table will not attempt to sort the data itself even if sortable controls are presented */
-    preSorted?: boolean;
+    onPressRow?: (row: T) => void;
+    /** A handler that will be called whenever the sort order is changed as a result of the Table component's internal algorithm */
+    onSort?: (columnName: string, columnIndex: number, direction: SortDirection) => void;
     /** Options that will be applied to all rows in the Table */
-    rowOptions?: RowOptions<T>;
-    /** A React styles object or a serialized Emotion styles object (or a function that returns either of these) used to style each row */
-    rowStyle?: Styles | RowStyleExtractor<T>;
-    /** Determines whether the row for a particular data entry should be visually highlighted */
+    rowOptions?: RowOptions;
+    /** Specifies the active row. May be used to trigger visual highlight depending on rowOptions */
     selectedRow?: T;
-    /** Determines whether the Table should present sortable controls (may be overridden on a per-column basis, and behavior may differ depending on the value of the preSorted prop) */
+    /** Determines whether the Table should present sortable controls (may be overridden on a per-column basis) */
     sortable?: boolean;
+    /** Specifies whether the `data` is already sorted. If `true`, the component's sorting algorithm will NOT be used */
+    sorted?: boolean;
+    /**
+     * Specifies the sorted column, by index or column name (using column names is strongly recommended)
+     * @default (First sortable column)
+     */
+    sortedColumn?: number | N;
+    /**
+     * Specifies the direction of the sort
+     * @default "ascending"
+     */
+    sortedDirection?: SortDirection;
 };
 
-declare const Table: <T extends {}>({ cellStyle, columns, columnOptions, data, keyExtractor, id, onClickRow, onPressRow, preSorted, rowOptions, rowStyle, selectedRow, sortable }: WjecOneComponentProps<TableProps<T>>) => JSX.Element;
+declare const Table: <T extends unknown, N extends string>({ columnOptions, columns, data, id, keyExtractor, onPressRow, onSort, rowOptions, selectedRow, sortable, sorted, sortedColumn: defaultSortedColumn, sortedDirection: defaultSortedDirection }: WjecOneComponentProps<TableProps<T, N>>) => React$1.JSX.Element;
 
 type TabsProps<T> = {
     backgroundStyle?: 'filled' | 'transparent';
@@ -1737,4 +1766,4 @@ type TabsProps<T> = {
 } & Pick<AriaProperties, 'ariaLabel'>;
 declare const Tabs: <T extends unknown>({ ariaLabel, backgroundStyle, disabledTabs, id, keyExtractor, labelExtractor, onSelect, scrollable, selectedTab, selectedTabColor, tabs }: WjecOneComponentProps<TabsProps<T>>) => JSX.Element;
 
-export { Accordion, Breadcrumb, Button, Card, Carousel, CheckBox, CircularProgress, _default$2 as ColorPalette, _default$1 as ColorPaletteEduqas, ContextHelp, ContextMenu, DateTimePicker, DestructiveButton, DragAndDropList, Email, Emphasis, ErrorCard, ErrorNotification, FileInput, FilterList, Footer, Form, Header, IconButton, InfoNotification, InformationCard, Input, LinearProgress, Link, LinkButton, LocalizationMenu, Modal, Notification, Page, PageTitle, Pagination, Paragraph, Password, Popup, PopupWindow, PrimaryButton, PrintLayout, PrintWindow, RadioGroup, ScrollableContainer, SecondaryButton, SectionHeading, SectionTitle, Select, SigninForm, SigninMenu, _default as StylePalette, SubParagraph, SubTitle, SuccessCard, SuccessNotification, Table, Tabs, TextArea, Toggle, VerificationCodeInput, WarningCard };
+export { Accordion, Breadcrumb, Button, Card, Carousel, CheckBox, CircularProgress, _default$2 as ColorPalette, _default$1 as ColorPaletteEduqas, ColumnOptions, ContextHelp, ContextMenu, DateTimePicker, DestructiveButton, DragAndDropList, Email, Emphasis, ErrorCard, ErrorNotification, FileInput, FilterList, Footer, Form, Header, IconButton, InfoNotification, InformationCard, Input, LinearProgress, Link, LinkButton, LocalizationMenu, Modal, Notification, Page, PageTitle, Pagination, Paragraph, Password, Popup, PopupWindow, PrimaryButton, PrintLayout, PrintWindow, RadioGroup, RowOptions, ScrollableContainer, SecondaryButton, SectionHeading, SectionTitle, Select, SigninForm, SigninMenu, SortDirection, _default as StylePalette, SubParagraph, SubTitle, SuccessCard, SuccessNotification, Table, TableColumn, Tabs, TextArea, Toggle, VerificationCodeInput, WarningCard };