@skedulo/sked-ui 0.0.0-preview-react-18

package/dist/components/forms/ReadOnly.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string;
+    name: string;
+    locked?: boolean;
+    className?: string;
+    placeholderValue?: string;
+    maxContentLength?: number;
+}
+export declare const ReadOnly: React.SFC<IProps>;
+export {};

package/dist/components/forms/SkedFormValidation.d.ts

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { FormContext, FormProps, ValidationContext, Transforms, FieldsConfig, CustomValidatorFunction, ValueValidatorConfig } from 'calidation';
+export { Dirty, Errors, Fields, Transform, Transforms, FieldsConfig, Validator, FormContext, CustomValidatorFunction, SimpleValidator, SimpleValidatorConfig, FieldConfig, ValueValidatorConfig, ValueValidator, ValidatorContext } from 'calidation';
+export declare type FormSubmission<T extends object> = FormContext<T>;
+export declare type FormConfig<T extends object> = FieldsConfig<T>;
+export declare type CustomValueValidatorFunction<T extends object, P = any> = (config: ValueValidatorConfig<P, T>) => (value: P) => string | null;
+interface IBehaviourOptions {
+    clickToEdit: boolean;
+}
+export declare type SkedFormChildren<T extends object> = Omit<ValidationContext<T>, 'dirty'> & {
+    isFormReadonly: boolean;
+    fieldsModified: Set<keyof T>;
+    setFormReadonly: (event?: React.FormEvent<HTMLElement>) => void;
+    resetFieldsToInitialValues: () => void;
+    customFieldUpdate: <K extends keyof T>(fieldName: K, runOnUpdate?: (fields: T) => T) => (value: T[K]) => void;
+    isValidOnSubmit: (fieldName: keyof T) => {
+        isValid: boolean;
+        error: string;
+    };
+    isValidAfterModified: (fieldName: keyof T) => {
+        isValid: boolean;
+        error: string;
+    };
+};
+export interface SkedFormValidationProps<T extends object> {
+    /**
+     * The configuraton object for the fields in your form.
+     * It should include all your fields and any validations
+     * associated with them.
+     *
+     * Eg:
+     *
+     * const config = {
+     *    name: {
+     *        isRequired: 'Name must be provided
+     *    },
+     *    address: {},
+     *    age: {
+     *      isRequired: 'Age must be provided',
+     *      isGreaterThan: {
+     *        message: 'You must be at least 18 to use this site',
+     *        value: 17
+     *      }
+     *   }
+     * }
+     */
+    config: FieldsConfig<T>;
+    /**
+     * Any starting values for fields defined in the config
+     */
+    initialValues?: T;
+    onSubmit: FormProps<T>['onSubmit'];
+    children: (args: SkedFormChildren<T>) => JSX.Element;
+    options?: IBehaviourOptions;
+    /**
+     * Define any custom validations that aren't available in
+     * calidation here
+     */
+    customValidators?: Record<string, CustomValidatorFunction<T> | CustomValueValidatorFunction<T>>;
+    /**
+     * Transform a value before it is saved to form state.
+     */
+    transforms?: Transforms<T>;
+}
+export interface SkedFormValidationState<T> {
+    fieldsModified: Set<keyof T>;
+    isFormReadonly: boolean;
+    initialValues: T;
+}
+/**
+ * This component is just a wrapper for FormValidation that extends the functionality
+ * of the calidation library for our project, such as providing custom functions that allow us to update the form state
+ * from widgets.
+ */
+export declare class SkedFormValidation<T extends object> extends React.PureComponent<SkedFormValidationProps<T>, SkedFormValidationState<T>> {
+    private _form;
+    static defaultProps: {
+        options: {
+            clickToEdit: boolean;
+        };
+    };
+    constructor(props: SkedFormValidationProps<T>);
+    componentDidUpdate(prevProps: SkedFormValidationProps<T>): void;
+    onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+    setModifiedField: (fieldName: keyof T) => void;
+    /**
+     * Used for widget updates that don't emit an onChange event (Autocomplete list selection
+     * for instance - input has onchange and will bubble up, needs a way of adding name)
+     */
+    customFormFieldUpdate: (setField: SkedFormChildren<T>['setField'], fields: T, setModified?: (name: keyof T) => void) => (fieldName: keyof T, runOnUpdate?: (fields: T) => T) => (value: any) => void;
+    wrapInValidatorProvider: (customValidators: SkedFormValidationProps<T>['customValidators']) => JSX.Element;
+    handleClick: (evt: React.FormEvent<HTMLElement>) => void;
+    handleFormSubmit: (formData: FormContext<T>) => Promise<void>;
+    setFormReadonly: (event?: React.FormEvent<HTMLElement>) => void;
+    resetFieldsToInitialValues: () => void;
+    renderFormValidation: () => JSX.Element;
+    render(): JSX.Element;
+}

package/dist/components/forms/SkedFormValidation.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/__tests__/ReadOnly.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/elements/AsyncMultiSearchSelect.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ISelectItem, AsyncMultiSearchSelectBox } from './interfaces';
+export declare const AsyncMultiSearchSelect: <T extends ISelectItem<any>>({ fetchItems, debounceTime, fetchStrategy, useCache, minChars, onSelectedItemsChange, disabled, ...rest }: AsyncMultiSearchSelectBox<T>) => JSX.Element;

package/dist/components/forms/elements/AsyncSearchSelect.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ISelectItem, AsyncSelectBox } from './interfaces';
+/**
+ * Asynchronous version of SearchSelect for use with remote fetching
+ */
+export declare const AsyncSearchSelect: <T extends ISelectItem<any>>({ fetchItems, debounceTime, fetchStrategy, useCache, minChars, icon, id, name, placeholder, autoFocus, className, onSelectedItemChange, disabled, itemToString, ItemRenderer, ...rest }: AsyncSelectBox<T>) => JSX.Element;

package/dist/components/forms/elements/AsyncSelectSearch.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/elements/FormElements.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+interface InputFormValidationProps {
+    inlineLabel?: string | JSX.Element;
+    inlineLabelStatus?: LabelStatus;
+    inlineLabelClassName?: string;
+    inputAndInlineLabelWrapperClassName?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+declare type InputSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'full';
+interface FormElementWrapperProps {
+    readOnlyValue?: string;
+    isReadOnly?: boolean;
+    readOnlyPlaceholder?: string;
+    name?: string;
+    locked?: boolean;
+    size?: InputSize;
+}
+export interface ValidationProps {
+    validation?: {
+        isValid?: boolean;
+        error?: string | null;
+    };
+}
+declare type FormElementProps = InputFormValidationProps & React.InputHTMLAttributes<HTMLInputElement>;
+/**
+ * Standard form inputs should be created using FormElement. It is responsible for creating the type of input you need as well as
+ * displaying validation errors. Radio’s and Checkboxes can utilise the inlineLabel prop to show a label inline with the input.
+ * The id of the input will be used as the ‘for’ attribute on the label for accessibility.
+ */
+export declare class FormInputElement extends React.PureComponent<FormElementProps, {}> {
+    private _inputClassNames;
+    isOfTextType: () => boolean;
+    withInlineLabel: (inputComponent: React.ReactElement, props: FormElementProps) => JSX.Element;
+    render(): JSX.Element;
+}
+declare type LabelStatus = 'required' | 'optional';
+/**
+ * Will render a form label and apply ‘required’ styling if required
+ */
+export declare const FormLabel: React.FunctionComponent<{
+    status?: LabelStatus;
+    inline?: boolean;
+} & React.LabelHTMLAttributes<HTMLLabelElement>>;
+/**
+ *  FormElementWrapper should be used to wrap custom input components (such as Autocomplete). It will ensure that errors
+ *  are displayed in a consistent fashion. The resulting input will need to have the class form-element__outline applied
+ *  to it for us to hook into it to apply appropriate styling.
+ */
+export declare const FormElementWrapper: React.SFC<FormElementWrapperProps & ValidationProps & React.HTMLAttributes<HTMLDivElement>>;
+/**
+ * Use when a validation error isn’t tied to a particular field
+ */
+export declare const FormValidationCallout: React.FunctionComponent<ValidationProps & React.HTMLAttributes<HTMLDivElement>>;
+export {};

package/dist/components/forms/elements/MultiSearchSelect.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ISelectItem, MultiSearchSelectBox } from './interfaces';
+export declare const MultiSearchSelect: <T extends ISelectItem<any>>({ initialSelectedItems, items, id, name, placeholder, autoFocus, className, onSelectedItemsChange, disabled, loading, itemToString, ItemRenderer, MenuItemsRenderer, selectAll, onInputValueChange, onMenuToggle, getKey, ...rest }: MultiSearchSelectBox<T>) => JSX.Element;

package/dist/components/forms/elements/MultiSearchSelect.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/elements/NumberInput.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+/**
+ * NumberInput is a HTML5 number input underneath with the added benefit of
+ * handling precision in float numbers.
+ * When using with SkedFormValidation, use the validators to set min and max
+ * For convenience for users who aren't using a form library, you can pass
+ * through these values and it will behave native to the browser (tool tip for
+ * invalid data before submit, message on submit)
+ */
+interface INumberInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    value: number | string;
+    onValueChange: (value: number | string) => void;
+    maxLength?: number;
+    precision?: number;
+}
+export declare const NumberInput: React.FunctionComponent<INumberInputProps>;
+export {};

package/dist/components/forms/elements/PlainAsyncMultiSearchSelect.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ISelectItem } from './interfaces';
+export interface IPlainAsyncMultiSearchSelectProps {
+    initialSelectedItems?: ISelectItem[];
+    fetchItems: (searchTerm: string) => Promise<ISelectItem[]>;
+    onSelectedItemsChange: (items: ISelectItem[]) => void;
+}
+export declare const PlainAsyncMultiSearchSelect: React.FC<IPlainAsyncMultiSearchSelectProps>;

package/dist/components/forms/elements/PlainAsyncMultiSearchSelect.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/elements/PlainMultiSearchSelect.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { IMenuProps } from '../../menus/menu/Menu';
+interface ISelectItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface IPlainMultiSelectProps {
+    items: ISelectItem[];
+    initialSelectedItems?: ISelectItem[];
+    onSearchInputChange: (inputValue: string) => void;
+    onSelectedItemsChange: (items: ISelectItem[]) => void;
+    itemToString?: (item: ISelectItem) => string;
+    loading?: boolean;
+}
+export declare const PlainMultiSearchSelect: React.FC<IPlainMultiSelectProps>;
+export interface IPlainMenuRendererProps extends IMenuProps {
+    items: ISelectItem[];
+    isItemSelected: (item: ISelectItem) => boolean;
+    handleItemSelection: (item: ISelectItem, isSelected: boolean) => void;
+    loading: boolean;
+}
+export declare const PlainMenuRenderer: React.ForwardRefExoticComponent<IPlainMenuRendererProps & React.RefAttributes<HTMLUListElement>>;
+export {};

package/dist/components/forms/elements/PlainMultiSearchSelect.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/elements/SearchSelect.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ISelectItem, SelectBox } from './interfaces';
+/**
+ * A searchable select component. Just like it's native counterpart, only a valid listed option is allowed.
+ */
+export declare const SearchSelect: <T extends ISelectItem<any>>({ id, name, items, placeholder, autoFocus, className, icon, onSelectedItemChange, disabled, onMenuToggle, loading, itemToString, ItemRenderer, filterHandler, itemIsValid, getNewItemData, ...rest }: SelectBox<T>) => JSX.Element;

package/dist/components/forms/elements/SearchSelect.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/elements/TextArea.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+interface ITextArea extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /**
+     * Is this a controlled component? If so then provide the value
+     */
+    value?: string;
+    /**
+     * Minimum rows
+     */
+    minRows?: number;
+    /**
+     * Maximum rows
+     */
+    maxRows?: number;
+    /**
+     * Disable Content Length
+     */
+    disableContentLength?: boolean;
+    /**
+     * onChange listener
+     */
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+export declare const TextArea: React.FunctionComponent<ITextArea>;
+export {};

package/dist/components/forms/elements/TextArea.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/elements/__tests__/AsyncMultiSearchSelect.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/elements/__tests__/AsyncSearchSelect.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/elements/__tests__/FormElements.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/elements/__tests__/MultiSearchSelect.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/elements/__tests__/NumberInput.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/elements/__tests__/PlainAsyncMultiSearchSelect.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/elements/__tests__/PlainMultiSearchSelect.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/elements/__tests__/SearchSelect-renders.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/elements/__tests__/SearchSelect.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/elements/__tests__/__mocks__/searchData.d.ts

@@ -0,0 +1,11 @@
+import { ISelectItem, AsyncSelectBox } from '../../interfaces';
+export declare const selectItems: ({
+    value: string;
+    label: string;
+    disabled: boolean;
+} | {
+    value: string;
+    label: string;
+    disabled?: undefined;
+})[];
+export declare const loadItems: AsyncSelectBox<ISelectItem>['fetchItems'];

package/dist/components/forms/elements/interfaces.d.ts

@@ -0,0 +1,105 @@
+/// <reference types="react" />
+import { UseComboboxProps, UseMultipleSelectionProps } from 'downshift';
+import { IconNames } from '../../icon/Icon';
+export interface ISelectItem<T = any> {
+    value: T;
+    label: string;
+    disabled?: boolean;
+}
+export interface ISearchSelect<T extends ISelectItem> {
+    /**
+     * name for the input
+     */
+    name?: string;
+    items: T[];
+    /**
+     * Defaults to name. Will be used for the id of the input
+     * and for generating the associated aria attributes.
+     */
+    id?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    autoFocus?: boolean;
+    /**
+     * Class names to apply to SearchSelect wrapper
+     */
+    className?: string;
+    /**
+     * Defaults to using itemToString
+     */
+    ItemRenderer?: (item: T) => React.ReactNode;
+    /**
+     * Defaults to item => item.label
+     */
+    itemToString?: UseComboboxProps<T>['itemToString'];
+}
+interface IAsyncSearchSelect<T extends ISelectItem> {
+    fetchItems: (inputValue: string) => Promise<T[]>;
+    /**
+     * Defaults to 300
+     * Milliseconds before input value is sent to fetchItems. Will respect minChars.
+     */
+    debounceTime?: number;
+    /**
+     * Default onMenuOpen
+     * fetchStrategy determines when fetchItems is called
+     * onMount will call fetchItems immediately once the component is mounted and then whenever the input value changes.
+     * onMenuOpen will call fetchItems every time the menu is opened and then whenever the input value changes.
+     * onMinChars will call fetchItems only when the minChars value is met
+     */
+    fetchStrategy?: 'onMount' | 'onMenuOpen' | 'onMinChars';
+    /**
+     * Only takes effect when fetching strategy is onMinChars
+     */
+    minChars?: number;
+    /**
+     * Defaults to true
+     * Caches responses from fetchItems
+     */
+    useCache?: boolean;
+}
+export declare type CommonComboBoxTypes<T extends ISelectItem> = Pick<UseComboboxProps<T>, 'initialIsOpen' | 'isOpen' | 'initialHighlightedIndex' | 'highlightedIndex'>;
+interface ISelectBox<T extends ISelectItem> extends ISearchSelect<T> {
+    onSelectedItemChange: (item: T) => void;
+    /**
+     * Defaults to chevronDown
+     * Icon to use in input
+     */
+    icon?: IconNames;
+    /**
+     * Should we include the value according to the filter provided
+     */
+    filterHandler?: (input: string, item: T) => boolean;
+    /**
+     * To allow selections that don't match a list of items,
+     * supply a function that will check if it's acceptable input
+     */
+    itemIsValid?: (inputValue: string) => boolean;
+    /**
+     * Default to inputValue => ({ value: inputValue, label: inputValue })
+     */
+    getNewItemData?: (inputValue: string) => T[];
+}
+export declare type SelectBox<T extends ISelectItem> = ISelectBox<T> & CommonComboBoxTypes<T> & Pick<UseComboboxProps<T>, 'initialSelectedItem' | 'selectedItem'> & {
+    onMenuToggle?: (isOpen: boolean) => void;
+    loading?: boolean;
+};
+export declare type AsyncSelectBox<T extends ISelectItem> = Omit<SelectBox<T>, 'items' | 'itemIsValid' | 'getNewItemData'> & IAsyncSearchSelect<T>;
+export interface IMultiSearchSelect<T extends ISelectItem> extends ISearchSelect<T> {
+    selectAll?: 'enabled' | 'disabled';
+    onMenuToggle?: (isOpen: boolean) => void;
+    MenuItemsRenderer?: React.FC<{
+        items: T[];
+        MenuItemRenderer: (item: T, index: number) => JSX.Element;
+        inputValue: string;
+    }>;
+    onInputValueChange?: UseComboboxProps<T>['onInputValueChange'];
+    onSelectedItemsChange: (items: T[]) => void;
+}
+export declare type MultiSearchSelectBox<T extends ISelectItem> = IMultiSearchSelect<T> & CommonComboBoxTypes<T> & Pick<UseMultipleSelectionProps<T>, 'initialSelectedItems' | 'selectedItems'> & {
+    loading?: boolean;
+} & {
+    getKey?: (item: T) => string;
+};
+export declare type AsyncMultiSearchSelectBox<T extends ISelectItem> = Omit<MultiSearchSelectBox<T>, 'items'> & IAsyncSearchSelect<T>;
+export {};

package/dist/components/forms/elements/select-components.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { UseComboboxGetItemPropsOptions } from 'downshift';
+import { IconNames, IPillProps, IMenuProps } from '../../..';
+import { ISelectItem, ISearchSelect } from './interfaces';
+export interface ISelectMenuItem<T extends ISelectItem> {
+    item: T;
+    ItemRenderer: ISearchSelect<T>['ItemRenderer'];
+    index: number;
+    highlightedIndex: number;
+    getItemProps: (options: UseComboboxGetItemPropsOptions<T>) => React.HTMLAttributes<HTMLLIElement>;
+}
+interface ISearchSelectTrigger {
+    comboboxProps: React.HTMLAttributes<HTMLDivElement>;
+    toggleButtonProps: React.HTMLAttributes<HTMLButtonElement>;
+    inputProps: React.HTMLAttributes<HTMLInputElement>;
+    className?: string;
+    icon?: IconNames;
+}
+export declare const SearchSelectTrigger: React.FC<ISearchSelectTrigger & React.InputHTMLAttributes<HTMLInputElement>>;
+export declare const SelectMenu: React.ForwardRefExoticComponent<IMenuProps & React.RefAttributes<HTMLUListElement>>;
+export declare const SelectMenuItem: <T extends ISelectItem<any>>({ item, ItemRenderer, index, highlightedIndex, getItemProps }: ISelectMenuItem<T>) => JSX.Element;
+export interface IPlainMultiSelectMenuItemProps extends React.HTMLAttributes<HTMLLIElement> {
+    item: ISelectItem;
+    isSelected: boolean;
+}
+export declare const PlainMultiSelectMenuItem: React.FC<IPlainMultiSelectMenuItemProps>;
+export declare const MultiSelectMenuItem: <T extends ISelectItem<any>>({ item, ItemRenderer, isSelected, index, highlightedIndex, getItemProps }: ISelectMenuItem<T> & {
+    isSelected: boolean;
+}) => JSX.Element;
+export declare const SelectEmptyState: React.FC;
+interface IMultiSearchSelectTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
+    hasItems: boolean;
+    disabled: boolean;
+    className: string;
+}
+export declare const MultiSearchSelectTrigger: React.ForwardRefExoticComponent<IMultiSearchSelectTriggerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const MultiSelectPill: React.ForwardRefExoticComponent<IPillProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/forms/elements/select-hooks.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Modifier, StrictModifier } from 'react-popper';
+declare type MatchTriggerWidthModifer = Modifier<'matchTriggerWidth', {}>;
+declare type CustomModifiers = MatchTriggerWidthModifer;
+interface IUseSelectPopperConfigReturnType {
+    selectPopperModifiers: (StrictModifier | CustomModifiers)[];
+}
+export declare const useSelectPopperConfig: (updatePositionWhenChanged: any) => IUseSelectPopperConfigReturnType;
+export declare const usePromise: <T extends unknown, P>(fn: (args?: P) => T | Promise<T>, initialValue?: T, callOnMount?: boolean, args?: P[]) => {
+    response: T;
+    pending: boolean;
+    error: any;
+};
+interface IUseAutoExpandingInput {
+    inputProps: React.InputHTMLAttributes<HTMLInputElement>;
+    defaultInputWidth?: number;
+    className?: string;
+}
+export declare const useAutoExpandingInput: ({ defaultInputWidth, inputProps, className }: IUseAutoExpandingInput) => {
+    inputScrollRef: React.MutableRefObject<HTMLDivElement>;
+    placeholderRef: React.MutableRefObject<HTMLDivElement>;
+    defaultInputWidth: number;
+    inputValueWidth: number;
+    updateInputWidth: () => void;
+    setInputValueWidth: React.Dispatch<React.SetStateAction<number>>;
+    AutoExpandingInput: JSX.Element;
+};
+export declare function useOnClickOutside(refs: React.RefObject<HTMLElement>[], handler: (event: MouseEvent) => void): void;
+export interface UseRunPromiseState<D> {
+    data: D | undefined;
+    error: Error | undefined;
+    pending: boolean;
+}
+export interface UseRunPromiseRes<D, A extends any[]> extends UseRunPromiseState<D> {
+    run: (...args: A) => void;
+}
+export declare function useRunPromise<D, A extends any[]>(func: (...args: A) => Promise<D>): UseRunPromiseRes<D, A>;
+export {};

package/dist/components/forms/elements/select-utils.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { UseMultipleSelectionState, UseMultipleSelectionStateChangeOptions, UseComboboxState, UseComboboxStateChangeOptions } from 'downshift';
+import { ISelectItem } from './interfaces';
+export declare const formatReadonlySelect: <T extends ISelectItem<any>>(items: T[]) => string;
+export declare const defaultItemToStringFn: <T extends ISelectItem<any>>(item: T) => string;
+export declare const searchFilterFn: (value: string, item: string) => boolean;
+export declare const usePluralIf: (usePlural: boolean, singular: string, plural: string) => string;
+export declare const environmentAwareLayoutEffect: typeof React.useEffect;
+export declare const multiStateReducer: (focusInput: () => void) => <T extends ISelectItem<any>>(_state: UseMultipleSelectionState<T>, { type, changes }: UseMultipleSelectionStateChangeOptions<T>) => UseMultipleSelectionState<T>;
+export declare const SELECT_ALL_ID = "sked-select-all";
+interface IMultiComboboxStateReducer<T extends ISelectItem> {
+    resetDisplayItems: () => void;
+    setSelectedItems: (items: T[]) => void;
+    addSelectedItem: (item: T) => void;
+    removeSelectedItem: (item: T) => void;
+    items: T[];
+    validItems: T[];
+    selectedItems: T[];
+    selectAll: 'enabled' | 'disabled';
+}
+export declare const multiComboboxStateReducer: <T extends ISelectItem<any>>({ resetDisplayItems, setSelectedItems, addSelectedItem, removeSelectedItem, items, validItems, selectedItems, selectAll }: IMultiComboboxStateReducer<T>) => (state: UseComboboxState<T>, { type, changes }: UseComboboxStateChangeOptions<T>) => UseComboboxState<T>;
+export {};

package/dist/components/icon/Icon.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import icons from './iconPaths';
+export declare type IconNames = keyof typeof icons;
+interface IProps extends React.SVGAttributes<SVGElement> {
+    /**
+     * Name of the icon
+     */
+    name: IconNames;
+    /**
+     * className applied to the containing div
+     */
+    className?: string;
+    /**
+     * Size of the icon to override the default (pixels)
+     */
+    size?: number;
+    /**
+     * Function to call on click
+     */
+    onClick?: (event?: React.MouseEvent<SVGElement>) => void;
+}
+/**
+ * The Icon component should be used whenever an icon needs to be displayed. It will naturally inherit any text colour but this can be changed by supplied a class directly. Default size of 18px/18px.
+ */
+export declare const Icon: ({ name, className, size, onClick, ...otherProps }: IProps) => JSX.Element;
+export {};

package/dist/components/icon/Icon.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/icon/Icon.stories.d.ts

@@ -0,0 +1 @@
+export {};