spok-ui/dist/index.d.ts

UI Library for SPOK system

import * as React from 'react';
import React__default, { FC } from 'react';
import Imask from 'imask';
import { TextFieldProps } from '@mui/material';
import { TreeItemProps } from '@mui/lab';
import * as lodash from 'lodash';

interface Props$3 {
    value?: string;
    onChange?: (event?: React__default.ChangeEvent<HTMLInputElement>) => unknown;
    fullWidth?: boolean;
    onClear?: () => void;
    background?: string;
    mask?: Imask.AnyMaskedOptions['mask'];
}
declare const SearchField: FC<Props$3>;

declare type CustomProps = TextFieldProps & {
    mask?: Imask.AnyMaskedOptions['mask'];
};
declare const TextField: FC<CustomProps>;

interface Option {
    title: string;
    id: string | number;
    [key: string]: any;
}
interface FCProps {
    margin?: 'normal' | 'dense';
    label?: string;
    options: Option[];
    style?: React.CSSProperties;
}
declare const Select: React.FC<FCProps>;

declare enum Align {
    left = "left",
    right = "right",
    center = "center",
    inherit = "inherit",
    justify = "justify"
}
interface HeadCell {
    id: string;
    numeric?: boolean;
    disablePadding?: boolean;
    title: string;
    align?: Align;
    width?: number;
}
interface EnhancedTableProps {
    numSelected?: number;
    onRequestSort?: (event: React__default.MouseEvent<unknown>, property: unknown) => void;
    onSelectAllClick?: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
    order?: 'asc' | 'desc';
    orderBy?: string;
    rowCount?: number;
    checkboxes?: boolean;
    headCells: HeadCell[];
}
declare const Head: (props: EnhancedTableProps) => JSX.Element;

interface IRow {
    id: string;
}
interface BodyProps<T> {
    rows: T[];
    selected?: string;
    onClick?: () => void;
    checkbox?: boolean;
    accessors: Array<{
        accessor: keyof T;
        align?: Align;
    }>;
}
declare const Body: <T extends IRow>(props: BodyProps<T>) => JSX.Element;

interface TabProps {
    tabs: {
        id: number | string;
        title: string;
    }[];
    value: number;
    onChange: (event: React__default.SyntheticEvent<Element, Event>, value: any) => void;
}
declare const Tab: FC<TabProps>;

interface TabPanelProps {
    children?: React__default.ReactNode;
    index: number;
    value: number;
}
declare const TabPanel: (props: TabPanelProps) => JSX.Element;

declare enum FontSize {
    default = "default",
    medium = "medium",
    small = "small",
    tiny = "tiny"
}
declare enum Variants {
    title = "title",
    subtitle = "subtitle",
    link = "link",
    body = "body"
}
declare enum FWeights {
    regular = "regular",
    bold = "bold",
    semibold = "semibold"
}
declare enum TextAlign {
    left = "left",
    right = "right",
    center = "center"
}
declare const Text: StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps, JSXProps>;

interface SimpleOption {
    id: number;
    name: string;
}
interface GlobalTheme {
    layouts: SimpleOption[];
    themes: SimpleOption[];
    ruleValues: RuleListItem[];
    ruleElements: RuleElement[];
}
declare const elementIds: {
    readonly 23: "accordion-body";
    readonly 22: "accordion-header";
    readonly 17: "banner-error";
    readonly 15: "banner-info";
    readonly 18: "banner-success";
    readonly 16: "banner-warn";
    readonly 25: "button-as-text";
    readonly 5: "button-contained";
    readonly 24: "button-outline";
    readonly 8: "check-box-selected";
    readonly 29: "check-box-unselected";
    readonly 11: "chips-choice";
    readonly 26: "chips-filter";
    readonly 27: "chips-input";
    readonly 28: "chips-region";
    readonly 7: "combo-box";
    readonly 3: "container";
    readonly 2: "expand-collapse-arrow";
    readonly 41: "interaction-effect";
    readonly 36: "interaction-effect-selected";
    readonly 40: "interaction-effect-unselect";
    readonly 14: "list-container";
    readonly 4: "list-item";
    readonly 999: "list-item";
    readonly 42: "main-header";
    readonly 44: "main-header-button";
    readonly 21: "pagination-records";
    readonly 20: "quote";
    readonly 10: "radio-box-selected";
    readonly 30: "radio-box-unselected";
    readonly 45: "scroll-bar";
    readonly 43: "splitter";
    readonly 9: "switch-box-selected";
    readonly 31: "switch-box-unselected";
    readonly 19: "switch-tab";
    readonly 32: "tab-content";
    readonly 33: "tab-filter";
    readonly 12: "table";
    readonly 35: "table-header";
    readonly 34: "table-of-contents";
    readonly 6: "text-field";
    readonly 38: "text-field-global-search";
    readonly 37: "text-field-section-search";
    readonly 13: "text-link";
    readonly 39: "treeview-item";
    readonly 1: "text";
};
declare type ElementIdsKeys = keyof typeof elementIds;
declare type ElementIdsValues = typeof elementIds[ElementIdsKeys];
declare const attributeIds: {
    readonly 1: "background";
    readonly 8: "border";
    readonly 2: "color";
    readonly 3: "text-background";
    readonly 5: "text-bold";
    readonly 4: "text-color";
    readonly 7: "text-italic";
    readonly 6: "text-underline";
};
declare type AttributeIdsKeys = keyof typeof attributeIds;
declare type AttributeIdsValues = typeof attributeIds[AttributeIdsKeys];
declare type ReturnGetTheme = {
    msg: string;
    data: GlobalTheme;
    code: number;
};
declare const sleep: (ms: number) => Promise<unknown>;
declare const mockGetTheme: () => Promise<ReturnGetTheme>;
declare type PopperPosition = 'auto-end' | 'auto-start' | 'auto' | 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top' | null;
declare type RuleType = 'ACTIVATED' | 'FOCUSED' | 'ENABLED' | 'DISABLED' | 'HOVER' | 'PRESSED' | 'EXPANDED' | 'COLLAPSED' | 'ERROR';
interface RuleElementAttribute {
    attr_id: AttributeIdsKeys;
    rule_value_id: number;
    rule_value_type_id: string;
    layouts: number[];
    themes: number[];
}
interface RuleElement {
    element_id: ElementIdsKeys;
    attrs: RuleElementAttribute[];
}
interface RuleValue {
    style: string;
    color: string;
}
declare type Rule = Partial<Record<RuleType, RuleValue>>;
interface RuleListItem {
    id: number;
    value: Rule;
}
declare type GlobalLayouts = Record<number, GlobalThemeType>;
declare type DiscribeRule = Record<RuleType, RuleValue>;
declare type GlobalThemeType = Record<number, Record<ElementIdsValues, Record<AttributeIdsValues, DiscribeRule>> | Record<string, unknown>>;
interface FolderTreeItem {
    id: number;
    title: string;
    childrens: FolderTreeItem[];
}

interface Props$2 {
    tree: FolderTreeItem[];
}
declare const Tree: React.FC<Props$2>;

declare type StyledTreeItemProps = TreeItemProps & {
    labelIcon: (...args: any) => JSX.Element;
    labelInfo?: string;
    labelText: string;
    childrens: FolderTreeItem[];
};
declare const TreeItem: (props: StyledTreeItemProps) => JSX.Element;

interface Props$1 {
    position?: PopperPosition;
    children: React__default.ReactChild;
    anchor?: HTMLElement | null;
    handleClose?: () => void;
}
declare const SimplePopper: FC<Props$1>;

declare type AnchorHook = () => [HTMLElement | null, (event: any) => void, () => void];
declare const useAnchorElement: AnchorHook;

declare global {
    interface Window {
        activeLayout: number;
        activeTheme: number;
        layouts: GlobalLayouts;
    }
}
declare module '@mui/material/Button' {
    interface ButtonPropsVariantOverrides {
        header: true;
    }
}
declare enum Colors {
    gray = "#221F3E",
    green = "#017D7D",
    blue = "#5E54CC",
    red = "#DE294D",
    yellow = "#F2D883"
}
declare const blue: {
    1: string;
    2: string;
    3: string;
    4: string;
    5: string;
    6: string;
    7: string;
    8: string;
};
declare const gray: {
    1: string;
    2: string;
    3: string;
    4: string;
    5: string;
    6: string;
    7: string;
    8: string;
};
declare const red: {
    2: string;
    3: string;
};
interface Props {
    children: React__default.ReactElement;
}
declare const GlobalThemeProvider: FC<Props>;

declare enum Mask {
    phone = "phone"
}

declare const installTheme: (globalTheme: GlobalTheme) => void;

declare const getStyles: lodash.CurriedFunction4<ElementIdsValues, AttributeIdsValues, RuleType, keyof RuleValue, string>;

declare const changeActiveGlobalLayout: (layout: number) => void;
declare const changeActiveGlobalTheme: (theme: number) => void;

export { Align, AttributeIdsKeys, AttributeIdsValues, Body, BodyProps, Colors, DiscribeRule, ElementIdsKeys, ElementIdsValues, EnhancedTableProps, FWeights, FolderTreeItem, FontSize, GlobalLayouts, GlobalTheme, GlobalThemeProvider, GlobalThemeType, Head, HeadCell, Mask, PopperPosition, ReturnGetTheme, Rule, RuleElement, RuleElementAttribute, RuleListItem, RuleType, RuleValue, SearchField, Select, SimpleOption, SimplePopper, Tab, TabPanel, Text, TextAlign, TextField, Tree, TreeItem, Variants, attributeIds, blue, changeActiveGlobalLayout, changeActiveGlobalTheme, elementIds, getStyles, gray, installTheme, mockGetTheme, red, sleep, useAnchorElement };