@oc-digital/react-component-library 7.2.3-beta.0 → 7.2.3-beta.1

package/build/Alert/Alert.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { IAlertProps } from './Alert.types';
+
+declare const Alert: React.FC<IAlertProps>;
+export default Alert;

package/build/Alert/Alert.types.d.ts

@@ -0,0 +1,14 @@
+import { ReactChild } from 'react';
+import { FormStatuses } from '../globals';
+
+export interface IAlertProps {
+    alertActionHandler?: () => void;
+    formStatus: FormStatuses;
+    actionButton?: {
+        handler: () => void;
+        text: string;
+    };
+    alertMessage: ReactChild;
+    addBreak?: boolean;
+    styling?: string;
+}

package/build/AlphabeticalList/AlphabeticalList.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { IAlphabeticalListProps } from './AlphabeticalList.types';
+
+declare const AlphabeticalList: React.FC<IAlphabeticalListProps>;
+export default AlphabeticalList;

package/build/AlphabeticalList/AlphabeticalList.types.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export interface IAlphabeticalListProps {
+    array: any[] | undefined | null;
+    sortFn?: (arg1: any, arg2: any) => number;
+    sortKey?: string;
+    loading?: boolean;
+    buttonClick?: (item?: any) => void;
+    linkTo?: (item?: any) => string;
+    ItemTemplate: React.FC<{
+        item: any;
+    }>;
+    arrayKey?: string;
+    loadingMessage?: string;
+    emptyMessage?: string | JSX.Element;
+    alphabetisedHeader?: boolean;
+    isItemDisabled?: (item: any) => {
+        disabled: true;
+        reason: string;
+    } | {
+        disabled: false;
+    };
+}

package/build/AutoSave/Select/AutoSave.types.d.ts

@@ -0,0 +1,11 @@
+export interface AutoSaveSelectFieldProps {
+    autoSave: (newValue: string) => Promise<void>;
+    selectOptions: {
+        value: string;
+        description: string;
+    }[];
+    value: string;
+    className: string;
+    label: string;
+    disabled: boolean;
+}

package/build/AutoSave/Select/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { AutoSaveSelectFieldProps } from './AutoSave.types';
+
+export declare const AutoSaveSelectField: React.FC<AutoSaveSelectFieldProps>;

package/build/AutoSave/Text/AutoSave.types.d.ts

@@ -0,0 +1,17 @@
+import { FocusEvent } from 'react';
+import { AccessLevels } from '../../globals';
+
+export interface AutoSaveTextFieldProps {
+    autoSave: (value: string) => void;
+    value: string;
+    className: string;
+    label: string;
+    onBlur?: {
+        (e: FocusEvent<any, Element>): void;
+        <T = any>(fieldOrEvent: T): T extends string ? (e: any) => void : void;
+    };
+    disabled: boolean;
+    accessLevel: AccessLevels | undefined;
+    error: boolean;
+    helperText: string | false | undefined;
+}

package/build/AutoSave/Text/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { AutoSaveTextFieldProps } from './AutoSave.types';
+
+export declare const AutoSaveTextField: React.FC<AutoSaveTextFieldProps>;

package/build/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { IBreadcrumbsProps } from './Breadcrumbs.types';
+
+declare const Breadcrumbs: React.FC<IBreadcrumbsProps>;
+export default Breadcrumbs;

package/build/Breadcrumbs/Breadcrumbs.types.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+
+type BreadcrumbSlot = {
+    name: string;
+    link: string;
+};
+type BreadCrumbKeys = "first" | "second" | "third";
+type IBreadcrumbs = {
+    [K in BreadCrumbKeys]?: BreadcrumbSlot;
+};
+type colorOptions = {
+    background?: string;
+    color?: string;
+};
+type ColorKeys = "primary" | "secondary" | "tertiary";
+export type IBreadcrumbColors = {
+    [K in ColorKeys]?: colorOptions;
+};
+export interface IBreadcrumbsProps {
+    logo: ReactNode;
+    content: IBreadcrumbs;
+    colors?: IBreadcrumbColors;
+}
+export {};

package/build/Button/Button.d.ts

@@ -0,0 +1,4 @@
+import { IButtonProps } from './Button.types';
+
+declare function Button({ loading, children, errors, type, onClick, disabled, variant, styling, color, accessLevel, ...rest }: IButtonProps): JSX.Element | null;
+export default Button;

package/build/Button/Button.types.d.ts

@@ -0,0 +1,10 @@
+import { IAuthoriserProp } from '../globals';
+import { ButtonProps } from '@mui/material/Button';
+
+export type IButtonProps<C extends React.ElementType = React.ElementType> = ButtonProps<C, {
+    component?: C;
+}> & IAuthoriserProp & {
+    loading?: boolean;
+    errors?: boolean;
+    styling?: string;
+};

package/build/ButtonWithConfirm/ButtonWithConfirm.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { IButtonWithConfirmProps } from './ButtonWithConfirm.types';
+
+declare const ButtonWithConfirm: React.FC<IButtonWithConfirmProps>;
+export default ButtonWithConfirm;

package/build/ButtonWithConfirm/ButtonWithConfirm.types.d.ts

@@ -0,0 +1,9 @@
+import { IAuthoriserProp } from '../globals';
+import { ButtonProps } from '@mui/material';
+
+export interface IButtonWithConfirmProps extends ButtonProps, IAuthoriserProp {
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    loading: boolean;
+    styling?: string;
+    confirmButtonLabel?: string;
+}

package/build/ContentBox/ContentBox.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { IContentBoxProps } from './ContentBox.types';
+
+declare const ContentBox: React.FC<IContentBoxProps>;
+export default ContentBox;

package/build/ContentBox/ContentBox.types.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface IContentBoxProps {
+    id?: string;
+    children: React.ReactNode;
+    limitWidth?: boolean;
+    styling?: string;
+}

package/build/ContentLabel/ContentLabel.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { IContentLabelProps } from './ContentLabel.types';
+
+declare const ContentLabel: React.FC<IContentLabelProps>;
+export default ContentLabel;

package/build/ContentLabel/ContentLabel.types.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface IContentLabelProps {
+    children: React.ReactNode;
+    styling?: null | string;
+}

package/build/DatePicker/DatePicker.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { IDatePickerProps } from './DatePicker.types';
+
+declare const DatePicker: React.FC<IDatePickerProps>;
+export default DatePicker;

package/build/DatePicker/DatePicker.types.d.ts

@@ -0,0 +1,6 @@
+import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
+import { IAuthoriserProp } from '../globals';
+
+export type IDatePickerProps = DatePickerProps<Date> & IAuthoriserProp & {
+    styling?: string;
+};

package/build/EditableTable/EditableTable.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { IEditableTableProps } from './EditableTable.types';
+
+declare const EditableTable: React.FC<IEditableTableProps>;
+export default EditableTable;

package/build/EditableTable/EditableTable.types.d.ts

@@ -0,0 +1,107 @@
+import { CellProps, HeaderGroup, Row, TableBodyPropGetter, TableBodyProps, TablePropGetter, TableProps } from 'react-table';
+import { SchemaOf } from 'yup';
+import { default as React } from 'react';
+
+export type IAlignment = "left" | "right" | "inherit" | "center" | "justify";
+export type RowData = {
+    [key: string]: any;
+};
+export type ITableHeader = {
+    Header: string | JSX.Element;
+    accessor: string;
+    textAlign?: IAlignment;
+};
+export type TableCellValues = null | undefined | string | number | Date | boolean | string[];
+export type SynchCellWithStateFn = (rowIndex: number, columnId: string, value: TableCellValues, errorStatus: boolean, forceUpdate?: boolean) => void;
+export type FieldConfig = {
+    [key: string]: {
+        validationRule?: SchemaOf<any>;
+        dependentValidationRule?: (values: {
+            [key: string]: any;
+        }) => SchemaOf<any>;
+        customRenderFn?: (args: ICustomRenderFnProps) => JSX.Element;
+        prefix?: React.ReactNode | React.JSXElementConstructor<any>;
+        suffix?: React.ReactNode | React.JSXElementConstructor<any>;
+        textAlign?: IAlignment;
+        onBlur?: (args: {
+            rowIndex: number;
+            value: string;
+            setRows: React.Dispatch<React.SetStateAction<RowData[] | null>>;
+            values: RowData;
+        }) => Promise<void>;
+        isCheckbox?: boolean;
+        isDateField?: boolean;
+        onChangeValueModifier?: (value: string) => TableCellValues;
+        getCalculatedValue?: (values: RowData) => TableCellValues;
+        total?: boolean;
+    };
+};
+export interface IEditableTableProps {
+    tableRows: RowData[] | null;
+    tableHeaders: ITableHeader[];
+    syncCellWithState: SynchCellWithStateFn;
+    setRows?: React.Dispatch<React.SetStateAction<RowData[] | null>> | undefined;
+    skipPageReset?: boolean;
+    fieldConfig: FieldConfig;
+    disabled?: boolean;
+    setSelectedRows?: React.Dispatch<React.SetStateAction<number[]>>;
+    includeRowSelect?: boolean;
+    filterTypes?: {
+        [key: string]: (rows: any, id: any, filterValue: any) => any;
+    };
+    filterData?: {
+        filterRow: string;
+        filterValues: RowData[];
+    };
+    emptyTableText?: string;
+    paginate?: boolean;
+    defaultPageSize?: number;
+    virtContainerStyling?: string;
+    overscan?: number;
+    rowHeight?: number;
+    includeGlobalSearch?: boolean;
+    disableHeaderSelect?: boolean;
+}
+type AdditionalCellProps = Pick<IEditableTableProps, "fieldConfig" | "syncCellWithState" | "setRows">;
+export interface ExtendedCellProps extends AdditionalCellProps, CellProps<RowData> {
+    disabled: boolean;
+}
+export interface IEssentialRenderFnProps {
+    error: string | false;
+    disabled: boolean;
+    value: TableCellValues;
+    onChange: (e: any) => void;
+    onBlur: any;
+    prefix?: React.ReactNode | React.JSXElementConstructor<any> | Element;
+    suffix?: React.ReactNode | React.JSXElementConstructor<any> | Element;
+    numberField?: boolean;
+    textAlign?: IAlignment;
+    fixedDecimalScale?: boolean;
+}
+export interface ICustomRenderFnProps extends IEssentialRenderFnProps {
+    values: {
+        [key: string]: any;
+    };
+    originalValues: {
+        [key: string]: any;
+    };
+}
+export interface ITableContentProps extends Pick<IEditableTableProps, "disabled" | "includeRowSelect"> {
+    getTableProps: (propGetter?: TablePropGetter<RowData> | undefined) => TableProps;
+    headerGroups: HeaderGroup<RowData>[];
+    getTableBodyProps: (propGetter?: TableBodyPropGetter<RowData> | undefined) => TableBodyProps;
+    prepareRow: (row: Row<RowData>) => void;
+    rowsToRender: Row<RowData>[];
+    disabled: boolean;
+    includeRowSelect: boolean;
+    isAllRowsSelected: boolean;
+    selectedFlatRows: Row<RowData>[];
+    fieldConfig: FieldConfig;
+    tableHeaders: ITableHeader[];
+}
+export interface IGlobalFilterProps {
+    preGlobalFilteredRows: RowData[];
+    globalFilter: string | undefined;
+    setGlobalFilter: (val: string | undefined) => void;
+}
+export {};

package/build/EditableTable/components/TableCheckbox.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface ITableCheckboxProps {
+    disabled?: boolean;
+    value: boolean | null | undefined;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const TableCheckbox: ({ disabled, value, onChange }: ITableCheckboxProps) => JSX.Element;
+export {};

package/build/EditableTable/components/TableDateInput.d.ts

@@ -0,0 +1,8 @@
+interface ITableDateInputProps {
+    disabled: boolean;
+    value: Date | string | null | undefined;
+    error: string | false;
+    onChange: (value: Date | string) => void;
+}
+export declare const TableDateInput: ({ disabled, value, error, onChange, }: ITableDateInputProps) => JSX.Element;
+export {};

package/build/EditableTable/components/TableTextInput.d.ts

@@ -0,0 +1,21 @@
+import { PureComponent } from 'react';
+
+export interface ITableTextInputProps {
+    name?: string;
+    value: string | number | null | undefined;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    prefix?: string | React.ReactElement | JSX.Element | null;
+    suffix?: string | React.ReactElement | JSX.Element | null;
+    textAlign?: "start" | "end" | "left" | "right" | "center" | "justify" | "match-parent" | "inherit";
+    numberField?: boolean;
+    fixedDecimalScale?: boolean;
+    error?: string | false;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    wrapperStyling?: string;
+    styling?: string;
+}
+export declare class TableTextInput extends PureComponent<ITableTextInputProps> {
+    render(): JSX.Element;
+}

package/build/EditableTable/components/utils/getTextWidth.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Optimised for TableTextField.
+ *
+ * Instead of accepting a HTMLElement, which would require a re-render to get the correct width,
+ * this function is oprimised to accept only the text and max width.
+ */
+export declare function getTableTextInputTextWidth(text: string, minWidth?: number, maxWidth?: number): string;
+/**
+ * Calculates the width of a given string in pixels (perfect result)
+ *
+ * When using this to size inputs, the input must have CSS box-sizing: content-box
+ */
+export declare function getTextWidth(text: string, element: HTMLElement, minWidth?: number, maxWidth?: number): string;

package/build/EditableTable/defaultCells.d.ts

@@ -0,0 +1,31 @@
+import { default as React, ReactChild, ReactNode } from 'react';
+import { ICustomRenderFnProps, IEssentialRenderFnProps } from './EditableTable.types';
+
+export declare const tableTextField: (tableProps: ICustomRenderFnProps) => JSX.Element;
+export declare const tableNumericStringField: (tableProps: ICustomRenderFnProps) => JSX.Element;
+export declare const tableNumericStringFixedDecimalField: (tableProps: ICustomRenderFnProps) => JSX.Element;
+export declare const tableDateField: ({ value, onChange, disabled, error, }: ICustomRenderFnProps) => JSX.Element;
+export declare const tableCheckbox: (tableProps: ICustomRenderFnProps) => JSX.Element;
+interface INonEditableField extends Pick<IEssentialRenderFnProps, "numberField" | "prefix" | "suffix" | "textAlign" | "fixedDecimalScale"> {
+    text: React.ReactText;
+    styling?: string;
+    inputStyling?: string;
+    widthOverride?: string | undefined;
+    fullWidth?: boolean;
+}
+export declare const NonEditableField: React.FC<INonEditableField>;
+interface ITableSelect extends IEssentialRenderFnProps {
+    selectOptions: {
+        [key: string]: ReactChild;
+    };
+}
+export declare const TableSelect: React.FC<ITableSelect>;
+interface IMultipleTableSelect extends Omit<IEssentialRenderFnProps, "value"> {
+    selectOptions: {
+        [key: string]: ReactChild;
+    };
+    value: string[];
+    renderValue?: (value: any) => ReactNode;
+}
+export declare const TableMultipleSelect: React.FC<IMultipleTableSelect>;
+export {};

package/build/EntityList/EntityList.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { IEntityListProps } from './EntityList.types';
+
+declare const EntityList: React.FC<IEntityListProps>;
+export default EntityList;

package/build/EntityList/EntityList.types.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+export interface IEntity {
+    id: string;
+    name: string;
+    link: string;
+    [key: string]: any;
+}
+export interface IEntityListProps {
+    entities: IEntity[] | undefined;
+    icon: (entity?: IEntity) => ReactNode;
+    loadingMessage?: string;
+    emptyMessage?: string;
+    onClick?: (org: IEntity) => void;
+}

package/build/ErrorIndicator/ErrorIndicator.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { IErrorIndicatorProps } from './ErrorIndicator.types';
+
+declare const ErrorIndicator: React.FC<IErrorIndicatorProps>;
+export default ErrorIndicator;

package/build/ErrorIndicator/ErrorIndicator.types.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+
+export interface IErrorIndicatorProps {
+    text?: ReactNode;
+}

package/build/ImageDisplayAndUpload/ImageDisplayAndUpload.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { IImageDisplayAndUploadProps } from './ImageDisplayAndUpload.types';
+
+declare const ImageDisplayAndUpload: React.FC<IImageDisplayAndUploadProps>;
+export default ImageDisplayAndUpload;

package/build/ImageDisplayAndUpload/ImageDisplayAndUpload.types.d.ts

@@ -0,0 +1,9 @@
+import { IAuthoriserProp } from '../globals';
+
+export interface IImageDisplayAndUploadProps extends IAuthoriserProp {
+    id?: string;
+    url: string | null;
+    handleSaveImage: (format: string, buffer: ArrayBuffer, file: File) => Promise<void>;
+    roundedAvatar?: boolean;
+    alt?: string;
+}

package/build/KeyboardDatePicker/KeyboardDatePicker.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { IDatePickerProps } from './KeyboardDatePicker.types';
+
+declare const KeyboardDatePicker: React.FC<IDatePickerProps>;
+export default KeyboardDatePicker;

package/build/KeyboardDatePicker/KeyboardDatePicker.types.d.ts

@@ -0,0 +1,6 @@
+import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
+import { IAuthoriserProp } from '../globals';
+
+export interface IDatePickerProps extends IAuthoriserProp, DatePickerProps<Date> {
+    styling?: string;
+}

package/build/LeftNavigation/LeftNavigation.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ILeftNavigationProps } from './LeftNavigation.types';
+
+declare const LeftNavigation: React.FC<ILeftNavigationProps>;
+export default LeftNavigation;

package/build/LeftNavigation/LeftNavigation.types.d.ts

@@ -0,0 +1,97 @@
+import { default as React, ReactNode, ReactChild } from 'react';
+import { ISvgComponentProps } from '../SvgComponents/types';
+
+export interface INavigationLink {
+    field: string;
+    path: string;
+    Icon: React.FC<ISvgComponentProps>;
+    hasSecondary?: boolean;
+}
+export type IExpandedOptions = {
+    view: string;
+    expanded: boolean;
+};
+export interface IMainNavigationItem {
+    id: string;
+    name: ReactChild;
+    route: string;
+    archived?: boolean;
+}
+export interface ISecondaryNavigationSubItem {
+    id: string;
+    name: ReactChild;
+    route: string;
+}
+export interface ISecondaryNavigationItem {
+    mainItem: IMainNavigationItem;
+    subItems?: ISecondaryNavigationSubItem[];
+    startDate: string;
+}
+export interface ISecondaryNavigationElement {
+    items: ISecondaryNavigationItem[];
+    archivedItems?: ISecondaryNavigationItem[];
+    button?: {
+        url: string;
+        text: string;
+    };
+}
+export interface ISecondaryNavigationElements {
+    [key: string]: ISecondaryNavigationElement;
+}
+export interface IPrimaryConfig {
+    background?: string;
+    text?: string;
+    activeText?: string;
+    moveLastItemToBottom?: boolean;
+    activeBorderColor?: string;
+}
+export interface ISecondaryMainConfig {
+    mainBackground?: string;
+    mainText?: string;
+    mainHover?: string;
+    mainIcon?: string;
+    mainActiveText?: string;
+}
+export interface ISecondarySubConfig {
+    subItemBackground?: string;
+    subItemText?: string;
+    subItemHover?: string;
+    subItemActiveBackground?: string;
+    subItemActiveHover?: string;
+    subItemActiveText?: string;
+}
+export interface ISideNavConfig {
+    rootRouteName: string;
+    primary?: IPrimaryConfig;
+    secondary?: {
+        mainItemColors?: ISecondaryMainConfig;
+        subItemColors?: ISecondarySubConfig;
+        closeButtonSvg?: ReactNode;
+        titleColor?: string;
+        titleIconColor?: string;
+    };
+}
+export interface ILeftNavigationProps {
+    primaryNavItems: INavigationLink[];
+    secondaryNavItems: ISecondaryNavigationElements;
+    config: ISideNavConfig;
+}
+export interface IListItemProps extends ISecondaryNavigationItem {
+    config: ISideNavConfig;
+    Icon: React.FC<ISvgComponentProps>;
+}
+export interface INavListItemStyleProps extends ISecondaryMainConfig, ISecondarySubConfig {
+}
+export interface IPrimaryLeftNavContainerProps {
+    expandedOptions: IExpandedOptions;
+    navigationLinks: INavigationLink[];
+    setExpandedOptions: React.Dispatch<React.SetStateAction<IExpandedOptions>>;
+    config: ISideNavConfig;
+}
+export interface ISecondaryLeftNavContainerProps {
+    secondaryNavItems: ISecondaryNavigationElements;
+    primaryNavItems: INavigationLink[];
+    expandedOptions: IExpandedOptions;
+    setExpandedOptions: React.Dispatch<React.SetStateAction<IExpandedOptions>>;
+    config: ISideNavConfig;
+}

package/build/LeftNavigation/NavListItem.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { IListItemProps } from './LeftNavigation.types';
+
+declare const NavListItem: React.FC<IListItemProps>;
+export default NavListItem;

package/build/LeftNavigation/PrimaryLeftNavigation.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { IPrimaryLeftNavContainerProps } from './LeftNavigation.types';
+
+declare const PrimaryLeftNavContainer: React.FC<IPrimaryLeftNavContainerProps>;
+export default PrimaryLeftNavContainer;

package/build/LeftNavigation/SecondaryLeftNavigation.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ISecondaryLeftNavContainerProps } from './LeftNavigation.types';
+
+declare const SecondaryLeftNavContainer: React.FC<ISecondaryLeftNavContainerProps>;
+export default SecondaryLeftNavContainer;

package/build/LoadingSpinner/LoadingSpinner.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ILoadingSpinnerProps } from './LoadingSpinner.types';
+
+declare const LoadingSpinner: React.FC<ILoadingSpinnerProps>;
+export default LoadingSpinner;

package/build/LoadingSpinner/LoadingSpinner.types.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+
+export interface ILoadingSpinnerProps {
+    text?: ReactNode;
+    styling?: string;
+}

package/build/MainLayout/MainLayout.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { IMainLayoutProps } from './MainLayout.types';
+
+declare const MainLayout: React.FC<IMainLayoutProps>;
+export default MainLayout;

package/build/MainLayout/MainLayout.types.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+
+export interface IMainLayoutProps {
+    id?: string;
+    sideNavigation?: ReactElement;
+    desktopWidth?: boolean | string;
+    children: ReactElement;
+    topOffset?: number | string;
+}
+export interface IMainLayoutStyleProps extends Pick<IMainLayoutProps, "topOffset"> {
+}

package/build/MobileDatePicker/MobileDatePicker.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { IMobileDatePickerProps } from './MobileDatePicker.types';
+
+declare const MobileDatePicker: React.FC<IMobileDatePickerProps>;
+export default MobileDatePicker;

package/build/MobileDatePicker/MobileDatePicker.types.d.ts

@@ -0,0 +1,6 @@
+import { MobileDatePickerProps } from '@mui/x-date-pickers/MobileDatePicker';
+import { IAuthoriserProp } from '../globals';
+
+export type IMobileDatePickerProps = MobileDatePickerProps<Date> & IAuthoriserProp & {
+    styling?: string;
+};

package/build/NavbarLayout/Navbar.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { ISvgComponentProps } from '../SvgComponents/types';
+
+export type NavbarProps = {
+    tabs: Array<{
+        Icon: FC<ISvgComponentProps>;
+        field: string;
+        path: string;
+        separate?: boolean;
+    }>;
+};
+declare const Navbar: ({ tabs }: NavbarProps) => JSX.Element;
+export default Navbar;

package/build/NavbarLayout/NavbarLayout.d.ts

@@ -0,0 +1,17 @@
+import { default as React, FC } from 'react';
+import { ISvgComponentProps } from '../SvgComponents/types';
+
+export type NavbarLayoutTabs = Array<{
+    Icon: FC<ISvgComponentProps>;
+    field: string;
+    path: string;
+    separate?: boolean;
+}>;
+export type NavbarLayoutProps = {
+    tabs: NavbarLayoutTabs;
+    hideTabs?: boolean;
+    leaveHeightForMenu?: boolean;
+    children: React.ReactNode;
+};
+declare const NavbarLayout: ({ tabs, hideTabs, leaveHeightForMenu, children, }: NavbarLayoutProps) => JSX.Element;
+export default NavbarLayout;

package/build/NavbarLayout/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NavbarLayout } from './NavbarLayout';
+export type { NavbarLayoutProps, NavbarLayoutTabs } from './NavbarLayout';

package/build/SearchBar/SearchBar.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ISearchBarProps } from './SearchBar.types';
+
+declare const SearchBar: React.FC<ISearchBarProps>;
+export default SearchBar;

package/build/SearchBar/SearchBar.types.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+export interface ISearchBarProps {
+    array: any[] | undefined | null;
+    sortFn?: (arg1: any, arg2: any) => number;
+    sortKey?: string;
+    loading?: boolean;
+    buttonClick?: (item?: any) => void;
+    linkTo?: (item?: any) => string;
+    ItemTemplate: React.FC<{
+        item: any;
+    }>;
+    arrayKey?: string;
+    loadingMessage?: string;
+    emptyMessage?: string;
+    inputBackgroundColor?: string;
+    placeholder?: string;
+    disabledSearch?: boolean;
+    delay?: number;
+    minQueryLength?: number;
+    handleOnChange?: (query: string) => void;
+    searchKeys?: string[];
+    alphabetisedHeader?: boolean;
+    /** setting this will initialise the search query to a value */
+    initialSearchQuery?: string;
+    /** dynamically generate an empty list message based on what was searched for */
+    dynamicEmptyMessage?: (query: string) => string | JSX.Element;
+    isResultDisabled?: (result: any) => {
+        disabled: true;
+        reason: string;
+    } | {
+        disabled: false;
+    };
+}

package/build/Select/Select.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ISelectProps } from './Select.types';
+
+declare const Select: React.FC<ISelectProps>;
+export default Select;

package/build/Select/Select.types.d.ts

@@ -0,0 +1,16 @@
+import { OutlinedTextFieldProps } from '@mui/material';
+import { IAuthoriserProp } from '../globals';
+
+export interface ISelectProps extends IAuthoriserProp, Omit<OutlinedTextFieldProps, "variant"> {
+    selectOptions: {
+        value: string | number;
+        description: React.ReactNode;
+        disabled?: boolean;
+    }[];
+    maxListHeight?: number;
+    styling?: string;
+    variant?: "outlined" | "standard";
+    onOpen?: () => unknown;
+    onClose?: () => unknown;
+    itemClassName?: string;
+}

package/build/StaticTable/StaticTable.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { IStaticTableProps } from './StaticTable.types';
+
+declare const StaticTable: React.FC<IStaticTableProps>;
+export default StaticTable;

package/build/StaticTable/StaticTable.types.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export type cellAlignmentOptions = "centerJustify" | "leftJustify" | "rightJustify";
+export type headerColours = {
+    background?: string;
+    border?: string;
+    text?: string;
+};
+export interface IStaticTableProps {
+    headers?: React.ReactNode[];
+    headerCellAlignment?: cellAlignmentOptions[];
+    rows: {
+        onClick?: () => void;
+        row: React.ReactNode[];
+    }[] | null | undefined;
+    rowCellAlignment?: cellAlignmentOptions[];
+    rowBorderSeparation?: boolean;
+    styling?: string;
+    headerColours?: headerColours;
+    paginate?: boolean;
+    itemsPerPage?: number;
+}

package/build/SvgComponents/ContainedPartnersLogo.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ISvgComponentProps } from './types';
+
+declare const ContainedPartnersLogo: React.FC<ISvgComponentProps>;
+export default ContainedPartnersLogo;

package/build/SvgComponents/HomeSvg.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ISvgComponentProps } from './types';
+
+declare const HomeSvg: React.FC<ISvgComponentProps>;
+export default HomeSvg;

package/build/SvgComponents/NovelLogoSvg.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ISvgComponentProps } from './types';
+
+declare const NovelLogoSvg: React.FC<ISvgComponentProps>;
+export default NovelLogoSvg;

package/build/SvgComponents/OrganisationList.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ISvgComponentProps } from './types';
+
+declare const OrganisationList: React.FC<ISvgComponentProps>;
+export default OrganisationList;

package/build/SvgComponents/ProjectsSvg.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ISvgComponentProps } from './types';
+
+declare const ProjectsSvg: React.FC<ISvgComponentProps>;
+export default ProjectsSvg;

package/build/SvgComponents/index.d.ts

@@ -0,0 +1,5 @@
+export { default as NovelLogoSvg } from './NovelLogoSvg';
+export { default as ContainedPartnersLogo } from './ContainedPartnersLogo';
+export { default as OrganisationList } from './OrganisationList';
+export { default as HomeSvg } from './HomeSvg';
+export { default as ProjectsSvg } from './ProjectsSvg';

package/build/SvgComponents/types.d.ts

@@ -0,0 +1,6 @@
+export interface ISvgComponentProps {
+    color?: string;
+    styling?: string;
+    fontSize?: "small" | "medium" | "large" | "inherit";
+    id?: string;
+}

package/build/TextField/TextField.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { NumericFormatProps } from 'react-number-format';
+import { ITextFieldProps } from './TextField.types';
+
+declare const TextField: React.FC<ITextFieldProps>;
+export default TextField;
+interface INumberFormatProps extends Omit<NumericFormatProps, "onChange"> {
+    onChange: (event: {
+        target: {
+            name: string;
+            value: string;
+        };
+    }) => void;
+    fixedDecimalScale: boolean;
+}
+export declare const NumberFormatField: (props: INumberFormatProps) => JSX.Element;

package/build/TextField/TextField.types.d.ts

@@ -0,0 +1,8 @@
+import { OutlinedTextFieldProps } from '@mui/material';
+import { IAuthoriserProp } from '../globals';
+
+export interface ITextFieldProps extends IAuthoriserProp, Omit<OutlinedTextFieldProps, "variant"> {
+    styling?: string;
+    numberField?: boolean;
+    fixedDecimalScale?: boolean;
+}

package/build/Tooltip/OptionalTooltip.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+interface IOptionalTooltipProps {
+    showTooltip: boolean;
+    tooltipText: string;
+    children: JSX.Element;
+}
+export declare const OptionalTooltip: React.FC<IOptionalTooltipProps>;
+export {};

package/build/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './OptionalTooltip';

package/build/globals/index.d.ts

@@ -0,0 +1,26 @@
+export declare const HALF_REM = "0.5rem";
+export declare const ONE_REM = "1rem";
+export declare const ONE_AND_HALF_REM = "1.5rem";
+export declare const TWO_REM = "3rem";
+export declare const THREE_REM = "3rem";
+export declare const EDITED_STATUS = "EDITED";
+export declare const NEW_STATUS = "NEW";
+export declare const VALIDATION_MESSAGE_REQUIRED = "Required";
+export declare const REGEX_NUMBER_WITH_DECIMALS: RegExp;
+export declare const YUP_REQUIRED_STRING_SHORT_MESSAGE: import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+export declare const YUP_STRING_NUMBER_WITH_DECIMALS: import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+export declare const FORM_SUCCESS = "success";
+export declare const FORM_ERROR = "error";
+export declare const FORM_LOADING = "loading";
+export declare const FORM_ENABLED = "enabled";
+export declare const FORM_WARNING = "warning";
+export declare const FORM_DELETING = "deleting";
+export type FormStatuses = typeof FORM_SUCCESS | typeof FORM_ERROR | typeof FORM_LOADING | typeof FORM_ENABLED | typeof FORM_WARNING | typeof FORM_DELETING;
+export declare const READ_LEVEL = "read";
+export declare const WRITE_LEVEL = "write";
+export declare const NO_ACCESS_LEVEL = "noAccess";
+export type AccessLevels = typeof READ_LEVEL | typeof WRITE_LEVEL | typeof NO_ACCESS_LEVEL;
+export interface IAuthoriserProp {
+    accessLevel?: AccessLevels;
+}
+export declare const BORDER_RADIUS = "14px";

package/build/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { default as useDebounceEffect } from './useDebounceEffect';
+export { default as useInterval } from './useInterval';
+export { default as useWhyDidYouUpdate } from './useWhyDidYouUpdate';

package/build/hooks/useDebounceEffect.d.ts

@@ -0,0 +1,2 @@
+declare const useDebounceEffect: (effect: (query: string) => void, deps: any[], delay?: number) => void;
+export default useDebounceEffect;

package/build/hooks/useInterval.d.ts

@@ -0,0 +1,2 @@
+declare const useInterval: (callback: () => void, delay: number | null) => void;
+export default useInterval;

package/build/hooks/useWhyDidYouUpdate.d.ts

@@ -0,0 +1 @@
+export default function useWhyDidYouUpdate(name: string, props: Record<string, any>): void;

package/build/index.d.ts

@@ -0,0 +1,38 @@
+import { default as Button } from './Button/Button';
+import { default as ContentLabel } from './ContentLabel/ContentLabel';
+import { default as ContentBox } from './ContentBox/ContentBox';
+import { default as StaticTable } from './StaticTable/StaticTable';
+import { default as LoadingSpinner } from './LoadingSpinner/LoadingSpinner';
+import { default as Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
+import { default as EntityList } from './EntityList/EntityList';
+import { IEntity } from './EntityList/EntityList.types';
+import { default as ErrorIndicator } from './ErrorIndicator/ErrorIndicator';
+import { default as LeftNavigation } from './LeftNavigation/LeftNavigation';
+import { INavigationLink, ISecondaryNavigationItem, ISecondaryNavigationSubItem } from './LeftNavigation/LeftNavigation.types';
+import { default as MainLayout } from './MainLayout/MainLayout';
+import { default as SearchBar } from './SearchBar/SearchBar';
+import { default as TextField, NumberFormatField } from './TextField/TextField';
+import { default as Select } from './Select/Select';
+import { default as DatePicker } from './DatePicker/DatePicker';
+import { default as KeyboardDatePicker } from './KeyboardDatePicker/KeyboardDatePicker';
+import { default as ButtonWithConfirm } from './ButtonWithConfirm/ButtonWithConfirm';
+import { default as EditableTable } from './EditableTable/EditableTable';
+import { FieldConfig, RowData, ITableHeader, TableCellValues, SynchCellWithStateFn, ICustomRenderFnProps, IEssentialRenderFnProps } from './EditableTable/EditableTable.types';
+import { tableNumericStringField, tableNumericStringFixedDecimalField, tableDateField, tableCheckbox, TableSelect, TableMultipleSelect, NonEditableField } from './EditableTable/defaultCells';
+import { useDebounceEffect, useInterval, useWhyDidYouUpdate } from './hooks';
+import { didCellValueChange } from './utils';
+import { default as ImageDisplayAndUpload } from './ImageDisplayAndUpload/ImageDisplayAndUpload';
+import { default as Alert } from './Alert/Alert';
+import { default as AlphabeticalList } from './AlphabeticalList/AlphabeticalList';
+import { ISelectProps } from './Select/Select.types';
+import { NavbarLayout, NavbarLayoutTabs } from './NavbarLayout';
+import { FORM_SUCCESS, FORM_ERROR, FORM_LOADING, FORM_ENABLED, FORM_WARNING, FORM_DELETING, FormStatuses } from './globals';
+import { default as MobileDatePicker } from './MobileDatePicker/MobileDatePicker';
+import { AutoSaveTextField } from './AutoSave/Text';
+import { AutoSaveSelectField } from './AutoSave/Select';
+import { OptionalTooltip } from './Tooltip';
+import { TableDateInput } from './EditableTable/components/TableDateInput';
+import { TableTextInput } from './EditableTable/components/TableTextInput';
+
+export { ImageDisplayAndUpload, Alert, Button, ContentLabel, ContentBox, StaticTable, LoadingSpinner, Breadcrumbs, EntityList, ErrorIndicator, LeftNavigation, MainLayout, SearchBar, TextField, Select, DatePicker, AutoSaveTextField, AutoSaveSelectField, KeyboardDatePicker, MobileDatePicker, ButtonWithConfirm, EditableTable, TableSelect, TableMultipleSelect, NonEditableField, TableDateInput as TableDatePicker, TableTextInput as TableTextField, tableNumericStringField, tableNumericStringFixedDecimalField, tableDateField, tableCheckbox, didCellValueChange, useDebounceEffect, useInterval, useWhyDidYouUpdate, AlphabeticalList, NumberFormatField, NavbarLayout, OptionalTooltip, FORM_SUCCESS, FORM_ERROR, FORM_LOADING, FORM_ENABLED, FORM_WARNING, FORM_DELETING, };
+export type { FieldConfig, RowData, ITableHeader, TableCellValues, SynchCellWithStateFn, ICustomRenderFnProps, IEssentialRenderFnProps, ISelectProps, IEntity, INavigationLink, ISecondaryNavigationItem, ISecondaryNavigationSubItem, NavbarLayoutTabs, FormStatuses, };

package/build/stories/Button.d.ts

@@ -0,0 +1,28 @@
+
+interface ButtonProps {
+    /**
+     * Is this the principal call to action on the page?
+     */
+    primary?: boolean;
+    /**
+     * What background color to use
+     */
+    backgroundColor?: string;
+    /**
+     * How large should the button be?
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Button contents
+     */
+    label: string;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => JSX.Element;
+export {};

package/build/stories/Button.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Large: Story;
+export declare const Small: Story;

package/build/stories/Header.d.ts

@@ -0,0 +1,12 @@
+
+type User = {
+    name: string;
+};
+interface HeaderProps {
+    user?: User;
+    onLogin: () => void;
+    onLogout: () => void;
+    onCreateAccount: () => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => JSX.Element;
+export {};

package/build/stories/Header.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Header } from './Header';
+
+declare const meta: Meta<typeof Header>;
+export default meta;
+type Story = StoryObj<typeof Header>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;

package/build/stories/Page.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+
+export declare const Page: React.FC;

package/build/stories/Page.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Page } from './Page';
+
+declare const meta: Meta<typeof Page>;
+export default meta;
+type Story = StoryObj<typeof Page>;
+export declare const LoggedOut: Story;
+export declare const LoggedIn: Story;

package/build/styles/colours.d.ts

@@ -0,0 +1,3 @@
+export declare const RED = "#d32f2f";
+export declare const GREY = "rgb(158, 158, 158)";
+export declare const PRIMARY = "rgb(115, 196, 202)";

package/build/styles/font.d.ts

@@ -0,0 +1 @@
+export declare const useFontStyles: (props?: any) => import('@mui/styles/withStyles').ClassNameMap<"boldText" | "bolderText" | "smallText" | "warningColor" | "centerText">;

package/build/styles/index.d.ts

@@ -0,0 +1,3 @@
+export * from './spacing';
+export * from './font';
+export * from './layout';

package/build/styles/layout.d.ts

@@ -0,0 +1 @@
+export declare const useLayoutStyles: (props?: any) => import('@mui/styles/withStyles').ClassNameMap<"contentBox" | "limitWidth60rem" | "limitWidth50rem" | "limitWidth45rem" | "limitWidth40rem" | "limitWidth35rem" | "limitWidth30rem" | "limitWidth25rem" | "centeredText" | "startAlignedText" | "width20" | "width49" | "width50" | "width60" | "width100" | "flexCenter" | "centerJustify" | "leftJustify" | "rightJustify" | "adornmentGap">;

package/build/styles/spacing.d.ts

@@ -0,0 +1 @@
+export declare const useSpacingStyles: (props?: any) => import('@mui/styles/withStyles').ClassNameMap<"labelBreak" | "contentBreak" | "sectionBreak" | "doubleSectionBreak" | "rightSpacer1" | "rightSpacer2" | "leftSpacer1" | "leftSpacer2" | "buttonSpacing" | "leftRightPadding1" | "leftRightPadding2" | "topBottomPadding1" | "topBottomPadding2">;

package/build/styles/themes.d.ts

@@ -0,0 +1,2 @@
+export declare const novelTheme: import('@mui/material/styles').Theme;
+export declare const partnersTheme: import('@mui/material/styles').Theme;

package/build/utils/index.d.ts

@@ -0,0 +1,6 @@
+import { TableCellValues } from '../EditableTable/EditableTable.types';
+
+export declare function sortDescendingStartDateString<T extends {
+    startDate: string;
+}>(array: T[]): T[];
+export declare const didCellValueChange: (oldVal: TableCellValues, newVal: TableCellValues, isDateValue?: boolean) => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oc-digital/react-component-library",
   "type": "module",
-  "version": "7.2.3-beta.0",
+  "version": "7.2.3-beta.1",
   "description": "React component library for Optimal Compliance",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -43,6 +43,10 @@
     "@storybook/react": "^8.0.10",
     "@storybook/react-webpack5": "^8.0.10",
     "@storybook/test": "^8.0.10",
+    "@chromatic-com/storybook": "^1.3.4",
+    "@storybook/react-dom-shim": "^8.0.10",
+    "@storybook/react-vite": "^8.0.10",
+    "vite": "^5.2.11",
     "@types/react": "^17.0.21",
     "@types/react-table": "^7.7.8",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
@@ -72,6 +76,7 @@
     "storybook": "^8.0.10",
     "tslib": "^2.3.1",
     "typescript": "^4.4.3",
+    "vite-plugin-dts": "^3.9.1",
     "yup": "^0.32.11"
   },
   "peerDependencies": {
@@ -134,11 +139,5 @@
   "lint-staged": {
     "*.+(js|ts|jsx|tsx)": "eslint --fix",
     "*.+(json|css|md)": "prettier --write"
-  },
-  "dependencies": {
-    "@chromatic-com/storybook": "^1.3.4",
-    "@storybook/react-dom-shim": "^8.0.10",
-    "@storybook/react-vite": "^8.0.10",
-    "vite": "^5.2.11"
   }
 }