@indico-data/design-system 1.0.4 → 1.0.6

package/lib/index.d.ts

@@ -0,0 +1,407 @@
+/// <reference types="react" />
+import React, { ChangeEvent } from 'react';
+import { PermafrostComponent, IconName } from '@/types';
+import { AriaButtonProps } from '@react-types/button';
+
+type Props$i = PermafrostComponent & {
+    content: React.ReactNode;
+    header?: React.ReactNode | string;
+    open?: boolean;
+};
+declare const Accordion: (props: Props$i) => React.JSX.Element;
+
+type Props$h = PermafrostComponent & {
+    style?: object;
+    children: React.ReactNode;
+};
+declare const Section: (props: Props$h) => React.JSX.Element;
+
+type Props$g = PermafrostComponent & {
+    title?: string;
+    style?: object;
+    children: React.ReactNode;
+};
+declare const SectionBlock: (props: Props$g) => React.JSX.Element;
+
+type SectionBodyProps = PermafrostComponent & {
+    style?: object;
+    children: React.ReactNode;
+};
+declare const SectionBody: (props: SectionBodyProps) => React.JSX.Element;
+
+type Props$f = PermafrostComponent & {
+    style?: object;
+    children?: React.ReactNode;
+};
+declare const SectionHeader: {
+    (props: Props$f): React.JSX.Element;
+    defaultProps: {
+        className: string;
+        style: {};
+    };
+};
+
+declare const SectionTable: (props: any) => React.JSX.Element;
+
+type ButtonVariant$1 = 'primary' | 'cta' | 'normal' | 'link-style' | 'no-style' | 'outline';
+type ButtonProps = PermafrostComponent & {
+    'aria-label'?: string;
+    'aria-pressed'?: boolean;
+    'aria-selected'?: boolean;
+    busy?: boolean;
+    children: React.ReactNode | React.ReactNode[];
+    disabled?: boolean;
+    onClick: (...args: any[]) => void;
+    onFocus?: () => void;
+    role?: string;
+    style?: React.CSSProperties;
+    tabindex?: 0 | -1;
+    type?: 'submit' | 'button' | 'reset';
+    variant?: ButtonVariant$1;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+};
+declare function Button(props: ButtonProps): React.ReactElement;
+
+type ButtonVariant = 'default' | 'primary' | 'destructive';
+type ButtonSize = 'normal' | 'large';
+
+type Props$e = PermafrostComponent & {
+    /**
+     * Adjusts vertical alignment of the text label, in relation to the icon
+     */
+    adjustAlignment?: number;
+    busy?: boolean;
+    iconName: IconName;
+    iconSide?: 'start' | 'end';
+    isDisabled?: boolean;
+    /**
+     * If element will be an `<a>`, the href URL
+     */
+    isLink?: string;
+    label?: string;
+    size?: ButtonSize;
+    style?: React.CSSProperties;
+    variant?: ButtonVariant;
+} & AriaButtonProps;
+/**
+ * General utility “button with an icon” component. May also be used for links that _look_
+ * like buttons, via the `isLink` property.
+ *
+ * The button handler must be passed in via the `onPress` property (replaces `onClick`).
+ *
+ * @see {@link https://react-spectrum.adobe.com/blog/building-a-button-part-1.html}
+ */
+declare function IconButton(props: Props$e): React.JSX.Element;
+
+type Props$d = PermafrostComponent & {
+    defaultValue?: string;
+    disabled?: boolean;
+    horizontal?: boolean;
+    initialText?: string;
+    label?: string;
+    onChange(e: React.ChangeEvent<HTMLSelectElement>): void;
+    options: {
+        name: string;
+        value: string | number;
+    }[];
+    style?: object;
+    value?: string | number;
+    validationErrors?: string[];
+};
+declare const BorderSelect: (props: Props$d) => React.JSX.Element;
+
+type ComboboxProps = {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    className?: string;
+    closeMenuOnSelect?: boolean;
+    /**
+     * Function to generate a custom React component for every available list `Option`
+     * @see {@link https://react-select.com/props#option}
+     */
+    customOption?: (props: any) => JSX.Element;
+    /**
+     * Customize the text to appear in selected items.
+     *
+     * @example (option) => `${option.value}`
+     */
+    customOptionLabel?(option: any): string;
+    /**
+     * Customize the value for the Combobox to use. Defaults to `value`
+     *
+     * @example (option) => `${option.id}`
+     */
+    customOptionValue?(option: any): string;
+    defaultValue?: any[];
+    disabled?: boolean;
+    loading?: boolean;
+    menuIsOpen?: boolean;
+    /**
+     * Custom text to show if there are no more items available to select
+     */
+    noOptionsMessage?: string;
+    /**
+     * Combobox defaults to expect { label: string; value: string; } at minimum - use `customOptionLabel` and `customOptionValue` props to change
+     */
+    options: ComboboxOption[];
+    /**
+     * Input placeholder text
+     */
+    placeholder?: string;
+};
+type ComboboxOption = {
+    label?: string;
+    [key: string]: any;
+};
+type ComboboxSize = 'small' | 'medium';
+type ComboboxVariant = 'default' | 'light';
+
+type Props$c = PermafrostComponent & {
+    disabled?: boolean;
+    initialText?: string;
+    options: {
+        name: string;
+        value: string | number;
+    }[];
+    size?: ComboboxSize;
+    style?: object;
+    value?: string | number;
+    variant?: ComboboxVariant;
+    onChange(e: React.ChangeEvent<HTMLSelectElement>): void;
+    onClick?(e: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
+};
+declare const Select: (props: Props$c) => React.JSX.Element;
+
+/**
+ * Multiselect combobox component. If selections are not bound to outside state
+ * via the `value` prop, you will need to import and use the `useCombobox` hook
+ * in order to clear its selected value .
+ *
+ * @see [useCombobox]{@link import('useCombobox').useCombobox}
+ */
+declare const MultiCombobox: React.ForwardRefExoticComponent<PermafrostComponent & ComboboxProps & {
+    /**
+     * MultiValue is a selected option in the input area
+     */
+    multiValueProps?: {
+        'data-cy': string;
+    } | undefined;
+    optionProps?: {
+        'data-cy': string;
+    } | undefined;
+    values?: ComboboxOption[] | undefined;
+    onChange: (selectedOption: ComboboxOption[]) => void;
+} & React.RefAttributes<unknown>>;
+
+/**
+ * Combobox component to select a single option. If selections are not bound to
+ * outside state via the `value` prop, you will need to import and use the
+ * `useCombobox` hook in order to clear its selected value.
+ *
+ * @see [useCombobox]{@link import('useCombobox').useCombobox}
+ */
+declare const SingleCombobox: React.ForwardRefExoticComponent<PermafrostComponent & ComboboxProps & {
+    dropdownIndicatorProps?: {
+        'data-cy': string;
+    } | undefined;
+    optionProps?: {
+        'data-cy': string;
+    } | undefined;
+    value?: ComboboxOption | undefined;
+    onChange: (selectedOption: ComboboxOption) => void;
+} & React.RefAttributes<unknown>>;
+
+type Props$b = PermafrostComponent & {
+    ariaLabel?: string;
+    fill?: string;
+    name: IconName;
+    size?: [string | number] | [string | number, string | number];
+    style?: any;
+    onClick?(): void;
+};
+/**
+ * Generic icon component, hidden from Assistive Technology by default.
+ * If icon should be available to AT, pass the desired name into the `ariaLabel` prop.
+ */
+declare function Icon({ style, ...props }: Props$b): React.ReactElement | null;
+
+type Props$a = PermafrostComponent & {
+    children: React.ReactNode | string;
+    minLength?: number;
+    onUpdate?(newValue: string): void;
+};
+/**
+ * Wrapper component which enables text editing in place directly on a child component,
+ * element, or plain text.
+ */
+declare function EditableInput(props: Props$a): React.JSX.Element;
+
+type Props$9 = PermafrostComponent & {
+    autoFocus?: boolean;
+    decrement?(): void;
+    disabled?: boolean;
+    hiddenLabel?: boolean;
+    increment?(): void;
+    label: string;
+    max?: number;
+    min?: number;
+    onChange(value: number | ''): void;
+    placeholder?: string;
+    required?: boolean;
+    step?: string;
+    tabIndex?: number;
+    value: number | '';
+};
+/**
+ * Basic numeric input field. A label is required, but may be visually hidden
+ * using the `hiddenLabel` property.
+ */
+declare function NumberInput(props: Props$9): React.ReactElement;
+
+type Props$8 = PermafrostComponent & {
+    inputProps?: {
+        [key: string]: string;
+    };
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    value?: string;
+};
+declare const SearchInput: {
+    (props: Props$8): React.JSX.Element;
+    defaultProps: {
+        className: string;
+    };
+};
+
+type Props$7 = PermafrostComponent & {
+    autoComplete?: 'email' | 'current-password' | 'new-password' | string;
+    autoFocus?: boolean;
+    defaultValue?: string;
+    disabled?: boolean;
+    displayErrors?: boolean;
+    inputProps?: any;
+    label?: string;
+    maxLength?: number;
+    name?: string;
+    onBlur?(): void;
+    onChange?(event: ChangeEvent<HTMLInputElement>): void;
+    onFocus?(): void;
+    placeholder?: string;
+    promptProps?: any;
+    required?: boolean;
+    type?: 'text' | 'email' | 'password' | string;
+    validationErrors?: string[];
+    value?: string;
+    readOnly?: boolean;
+};
+declare function TextInput(props: Props$7): React.ReactElement;
+
+type Props$6 = PermafrostComponent & {
+    ariaLabel?: string;
+    size?: string;
+    style?: {
+        [key: string]: string;
+    };
+    fill?: string;
+};
+declare function CircleSpinner(props: Props$6): React.ReactElement;
+
+type Props$5 = PermafrostComponent & {
+    width?: string;
+};
+declare function BarSpinner(props: Props$5): React.ReactElement;
+
+type Props$4 = PermafrostComponent & {
+    color?: string;
+    overallSize?: string | number;
+    rippleSize?: string | number;
+    showRandomMessage?: boolean;
+};
+declare function CirclePulse(props: Props$4): React.ReactElement;
+
+declare const RandomLoadingMessage: () => React.JSX.Element;
+
+type Props$3 = PermafrostComponent & {
+    backgroundColor?: string;
+    foregroundColor?: string;
+    ringRadius?: number;
+    strokeWidth?: number;
+    /** an integer between 0 and 1 */
+    value: number;
+    valueFontSize?: number;
+};
+declare function PercentageRing(props: Props$3): React.JSX.Element;
+
+declare const LoadingList: () => React.JSX.Element;
+
+type Props$2 = PermafrostComponent & {
+    accordion?: boolean;
+    accordionDefaultOpen?: boolean;
+    emptyListMessage?: string;
+    error?: any;
+    errorMessage?: any;
+    headerComponent?: React.ReactNode;
+    listHeader: React.ReactNode;
+    listItems: React.ReactNode[];
+    loading?: any;
+    pagination?: {
+        currentPage: number;
+        limit: number;
+        pageInfo: {
+            startCursor: number;
+            endCursor: number;
+            hasNextPage: boolean;
+            aggregateCount: number;
+        };
+        getNextPage: (before: number) => void;
+        getPage: (after: number, pageOffset: number) => void;
+        getPreviousPage: (after: number) => void;
+    };
+    sortBy?: {
+        descending: boolean;
+        items: {
+            name: string;
+            value: string;
+        }[];
+        value: string;
+        onSort: (value: string) => void;
+        updateDescending: () => void;
+    };
+    subTitle?: string | React.ReactNode;
+    title: string;
+    totalCount?: number;
+};
+declare const ListTable: (props: Props$2) => React.JSX.Element;
+
+type Props$1 = PermafrostComponent & {
+    currentPage: number;
+    limit: number;
+    pageInfo: {
+        aggregateCount: number;
+        endCursor: number;
+        hasNextPage: boolean;
+        startCursor: number;
+    };
+    quantity: number;
+    skip?: number;
+    getPage(startCursor: number, endCursor: number): void;
+    getNextPage(cursor: number): void;
+    getPreviousPage(cursor: number): void;
+};
+declare function Pagination(props: Props$1): React.JSX.Element;
+
+type Props = PermafrostComponent & {
+    actionLink?: string;
+    actionText?: string;
+    buttonAction?(): void;
+    buttonText?: string;
+    message?: string | React.ReactNode;
+    messageProps?: {
+        'data-cy': string;
+    };
+};
+declare function Shrug(props: Props): React.ReactElement;
+
+export { Accordion, BarSpinner, BorderSelect, Button, CirclePulse, CircleSpinner, EditableInput, Icon, IconButton, ListTable, LoadingList, MultiCombobox, NumberInput, Pagination, PercentageRing, RandomLoadingMessage, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, TextInput };