@skedulo/sked-ui 0.0.1 → 0.0.2-react-18-preview

package/dist/components/datepicker/DateTime.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+export interface IDateTimeProps {
+    dateTime?: Date;
+    /**
+     * The date and time as it is selected by the user
+     */
+    onChange?: (value: Date) => void;
+    /**
+     * The date as it is selected by the user
+     */
+    onDateChange?: (value: Date) => void;
+    /**
+     * The time as it is selected by the user
+     */
+    onTimeChange?: (value: string) => void;
+    /**
+     * The incremental time to add for each selectable time window, by minutes
+     */
+    timeIncrement?: number;
+    /**
+     * Used for setting aria-labelledby
+     */
+    id?: string;
+    /**
+     * Is this input disabled?
+     */
+    disabled?: boolean;
+    /**
+     * The placeholder text for the input. Defaults to 'Select time'
+     */
+    timePlaceholder?: string;
+    /**
+     * The placeholder text for the input. Defaults to 'Select time'
+     */
+    datePlaceholder?: string;
+    /**
+     * The date to open the calendar to
+     */
+    openToDate?: Date;
+    /**
+     * The format of the date to display
+     */
+    dateFormat?: string;
+    /**
+     * increment-only will only allow selection of an interval
+     * freeform will allow valid time values that are not included in the intervals
+     * Defaults to increment-only
+     */
+    timeValueSelection?: 'increment-only' | 'freeform';
+}
+export declare const convertTimeStringTo24Hr: (value: string) => {
+    hours: number;
+    minutes: number;
+};
+export declare const DateTime: ({ timeIncrement, onChange, onDateChange, onTimeChange, dateTime, disabled, openToDate, dateFormat, timeValueSelection, timePlaceholder, datePlaceholder, id }: IDateTimeProps) => React.JSX.Element;

package/dist/components/datepicker/DateTime.stories.d.ts

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

package/dist/components/datepicker/Datepicker.d.ts

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { ReactDatePickerProps } from 'react-datepicker';
+import { RangeType } from '../calendar-controls/elements/RangePicker';
+export type LocaleType = 'AU' | 'US' | 'UK';
+type CustomInputType = React.InputHTMLAttributes<HTMLInputElement> & {
+    onBlurCustom: (event?: React.FocusEvent<HTMLInputElement>) => void;
+    openCalendar: (open: boolean) => void;
+    onBackspace: () => void;
+    Component: (props: React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>) => JSX.Element;
+};
+export interface DatepickerProps {
+    /**
+     * The currently selected date.
+     */
+    selected: Date;
+    /**
+     * The action to take when the date changes
+     */
+    onChange: (value?: Date) => void;
+    /**
+     * The date to open the calendar to
+     */
+    openToDate?: Date;
+    /**
+     * The locale to display the date in
+     */
+    locale?: LocaleType;
+    /**
+     * Should the calendar be displayed in the expanded state
+     */
+    inline?: boolean;
+    /**
+     * Maintain a consistent height by showing five weeks regardless of the month
+     */
+    fixedHeight?: ReactDatePickerProps['fixedHeight'];
+    /**
+     * Earliest date allowed to be selected.  This will also affect the month navigation
+     */
+    minDate?: ReactDatePickerProps['minDate'];
+    /**
+     * Latest date allowed to be selected.  This will also affect the month navigation
+     */
+    maxDate?: ReactDatePickerProps['maxDate'];
+    /**
+     * Disable updating the date picker
+     */
+    disabled?: boolean;
+    /**
+     * Provide placeholder text for the input
+     */
+    placeholderText?: string;
+    /**
+     * The format of the date to display
+     */
+    dateFormat?: string;
+    /**
+     * Any additional styling to add to the datepicker
+     */
+    className?: string;
+    /**
+     * An Array of Date that will be highlighted
+     */
+    highlightDates?: ReactDatePickerProps['highlightDates'];
+    /**
+     * Used to filter out dates that are not selectable
+     */
+    filterDate?: ReactDatePickerProps['filterDate'];
+    /**
+     * A component that will override the default Input
+     */
+    customInput?: CustomInputType['Component'];
+    /**
+     * Select the week Sunday to Saturday based on the current selected date
+     */
+    selectWeek?: boolean;
+    /**
+     * Used for calculating weeks to highlight and formatted date
+     */
+    selectedRange?: RangeType;
+    /**
+     * Highlight the week which contains the highlightWeek Date
+     */
+    highlightWeek?: Date;
+    /**
+     * The callback that will receive the dates for the week selected
+     */
+    onWeekSelect?: (value: Date[]) => void;
+    /**
+     * Capture the date that a mouse hovers over
+     */
+    onDayMouseEnter?: (value: Date) => void;
+    /**
+     * The callback used when a mouse leaves the calendar component
+     */
+    onMonthMouseLeave?: () => void;
+    /**
+     * The captured event when someone clicks away from the datepicker
+     */
+    onClickOutside?: () => void;
+    /**
+     * The element name for vaildation
+     */
+    name?: string;
+    /**
+     * The element id for vaildation
+     */
+    id?: string;
+    /**
+     * Allow the datepicker to be cleared
+     */
+    clearable?: boolean;
+    /**
+     * onCalendarClose fuction
+     */
+    onCalendarClose?: () => void;
+    inputRef?: React.MutableRefObject<HTMLInputElement>;
+}
+export declare const CustomInput: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    onBlurCustom: (event?: React.FocusEvent<HTMLInputElement>) => void;
+    openCalendar: (open: boolean) => void;
+    onBackspace: () => void;
+    Component: (props: React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>) => JSX.Element;
+} & React.RefAttributes<HTMLInputElement>>;
+export declare const Datepicker: React.FC<React.PropsWithChildren<DatepickerProps>>;
+export {};

package/dist/components/datepicker/Datepicker.stories.d.ts

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

package/dist/components/datepicker/Time.d.ts

@@ -0,0 +1,44 @@
+/** @format */
+import React from 'react';
+export declare const TIME_FORMAT = "h:mma";
+export declare const formatTime: (date: Date | number) => string;
+export declare const readonlyTimeFormat: ({ value, suffix }: {
+    value: string;
+    suffix?: string;
+}) => string;
+export interface ITimeProps {
+    /**
+     * The incremental time to add for each selectable time window, by minutes
+     */
+    increment: number;
+    id?: string;
+    name?: string;
+    /**
+     * The current value of the component.
+     * N.B. The component will scroll to the nearest 'before' time increment of the value provided
+     */
+    value?: string;
+    /**
+     * Any suffix to add after the time input
+     */
+    suffix?: string;
+    /**
+     * Is this input disabled?
+     */
+    disabled?: boolean;
+    /**
+     * The placeholder text for the input. Defaults to 'Select time'
+     */
+    placeholder?: string;
+    /**
+     * increment-only will only allow selection of an interval
+     * freeform will allow valid time values that are not included in the intervals
+     * Defaults to increment-only
+     */
+    valueSelection?: 'increment-only' | 'freeform';
+    /**
+     * The time as it is selected by the user
+     */
+    onChange?: (value: string) => void;
+}
+export declare const Time: ({ value, increment, suffix, onChange, placeholder, valueSelection, ...rest }: ITimeProps) => React.JSX.Element;

package/dist/components/datepicker/Time.stories.d.ts

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

package/dist/components/datepicker/__tests__/DateTime.spec.d.ts

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

package/dist/components/datepicker/__tests__/Datepicker.spec.d.ts

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

package/dist/components/datepicker/__tests__/Time.spec.d.ts

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

package/dist/components/dynamic-table/DynamicTable-utils.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { CellProps, TableToggleRowsSelectedProps, Hooks, Row, UseTableCellProps } from 'react-table';
+import { IDynamicTable } from './DynamicTable';
+import { ControlStates, ITableWrapper, ITableHeaderCell, IDynamicTableColumn } from './interfaces';
+export declare const ROW_SELECTION_ID = "sked-select-row";
+export declare const isEmptyCell: (value: any, columnId: string) => boolean;
+export declare function createTypedCellRenderer<T extends object>(): <K extends keyof T>(key: K, cellRenderer: (cellProps: CellProps<T, T[K]>) => React.ReactNode) => {
+    Cell: (cellProps: CellProps<T, T[K]>) => React.ReactNode;
+    accessor: K;
+};
+/**
+ * Before we render the table, if row selection has been requested, we add the selection header
+ * and table cells to the column config
+ */
+export declare const getRowSelectionHook: <T extends object>(props: IDynamicTable<T>) => (hooks: Hooks<T>) => number | ((columns: import("react-table").Column<T>[], meta: import("react-table").MetaBase<T>) => import("react-table").Column<T>[])[];
+export declare const getRowClickHook: <T extends object>(hooks: Hooks<T>) => number;
+export declare const getSortArgs: (sortByControl: ControlStates) => {
+    disableSortBy: boolean;
+    disableSortRemove?: undefined;
+    disableMultiSort?: undefined;
+    manualSortBy?: undefined;
+} | {
+    disableSortRemove: boolean;
+    disableSortBy: boolean;
+    disableMultiSort: boolean;
+    manualSortBy: boolean;
+};
+export declare const wrapperProps: ITableWrapper['getWrapperProps'];
+export type SortIconProps<T extends object> = Pick<ITableHeaderCell<T>, 'canSort' | 'isSorted' | 'isSortedDesc' | 'getSortByToggleProps' | 'displayType'>;
+export declare const SortIcon: <T extends object>({ canSort, isSorted, isSortedDesc, getSortByToggleProps, displayType }: SortIconProps<T>) => React.JSX.Element;
+export declare const SelectCell: (props: Partial<TableToggleRowsSelectedProps>) => React.JSX.Element;
+export declare const TableHeaderCell: <T extends object>(props: ITableHeaderCell<T>) => React.JSX.Element;
+export declare const ExpandedTableCell: <T extends object>(props: UseTableCellProps<T, any> & {
+    children?: React.ReactNode;
+}) => React.JSX.Element;
+export declare const CondensedTableCell: <T extends object>(props: UseTableCellProps<T, any>) => React.JSX.Element;
+export declare const DefaultRenderer: <T extends object>(instance: import("react-table").TableInstance<T> & {
+    column: import("react-table").ColumnInstance<T>;
+    row: Row<T>;
+    cell: import("react-table").Cell<T, any>;
+    value: any;
+} & {
+    column: IDynamicTableColumn<T>;
+}) => React.JSX.Element;
+export declare const DefaultWrapper: (wrapperClassName?: string) => React.FC<React.PropsWithChildren<ITableWrapper>>;

package/dist/components/dynamic-table/DynamicTable.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { Dictionary } from 'lodash';
+import { SortingRule, TableOptions } from 'react-table';
+import { IDynamicTableColumn, ControlStates, RowControlStates, DisplayType, ITableWrapper, UseRowClickOptions } from './interfaces';
+interface IDynamicTableProps<T extends object> {
+    columns: IDynamicTableColumn<T>[];
+    /**
+     * By default DynamicTable will display an expanded view that will use table-layout: auto to try to fit content as best it can based on what columns have in them, adhering to column width configurations. This is standard/common table behaviour. For the condensed view, table-layout: fixed is used which will create evenly spaced columns (unless otherwise told via width parameters) to create truncated columns within the width of the container. If you have many columns in a small container, then you'll need to give widths to each column for it to overflow, otherwise it could shrink them down to nothing.
+     * Also note that table-fixed only listens to the width property and will ignore min-width and max-width.
+     * @default expanded
+     */
+    displayType?: DisplayType;
+    /**
+     * @default true
+     */
+    stickyHeader?: boolean;
+    /**
+     * Controlled expects the consumer to handle the sorting of data and will
+     * call onSortBy.
+     *
+     * Uncontrolled will use the built-in react-table sorting.
+     *
+     * Disabled will turn off sorting on the table.
+     *
+     * @default disabled
+     */
+    sortByControl?: ControlStates;
+    /**
+     * The function to call when the user has sorted a column and
+     * sortByControl is set to 'controlled'
+     * Must be memoized
+     */
+    onSortBy?: (props: SortingRule<T>) => void;
+    /**
+     * rowOnly will not include a checkbox to select all rows.
+     *
+     * allRows will include a select all checkbox
+     *
+     * disabled will disable row selection on the table
+     *
+     * @default disabled
+     */
+    rowSelectControl?: RowControlStates;
+    /**
+     * The function called any row selection changes.
+     * Must be memoized.
+     */
+    onRowSelect?: (selectedRowIds: string[], isAllRowsSelected?: boolean, selectedRowData?: Dictionary<T>) => void;
+    /**
+     * Classes to be applied to the default wrapper.
+     * If you need additional control over the wrapper itself,
+     * supply the wrapper component to TableWrapper prop
+     */
+    wrapperClassName?: string;
+    /**
+     * Override the default table wrapper with your own.
+     * There are certain classes that ensure the table behaves the
+     * way it should, specifically around overflowing. If you need
+     * to add classes to your wrapper component, you can pass through
+     * classes to getWrapperProps and it will add them in addition to
+     * the required classes for the table.
+     *
+     * If you choose to overwrite the classes all together by supplying your
+     * own className to the wrapper container, ensure you add overflow-x overlay or auto
+     * to your classes so that the table can accommodate many columns of specified widths.
+     *
+     * Example:
+     * const TableWrapper: IDynamicTable<DataModelInterface>['TableWrapper'] = ({children, getWrapperProps}) => (
+     *     <div {...getWrapperProps('tw-flex-grow scroll')}>
+     *       {children} // this will be the table
+     *       <Pagination itemsPerPage={50} itemsTotal={data.length} currentPage={1} />
+     *     </div>
+     *   )
+     */
+    TableWrapper?: React.FC<React.PropsWithChildren<ITableWrapper>>;
+}
+export type IDynamicTable<T extends object> = Pick<TableOptions<T>, 'getRowId' | 'data' | 'initialState' | 'autoResetSortBy' | 'autoResetSelectedRows' | 'manualRowSelectedKey'> & UseRowClickOptions<T> & IDynamicTableProps<T>;
+export declare const DynamicTable: <T extends object>(props: IDynamicTable<T>) => React.JSX.Element;
+export {};

package/dist/components/dynamic-table/DynamicTable.stories.d.ts

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

package/dist/components/dynamic-table/__tests__/DynamicTable-renders.spec.d.ts

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

package/dist/components/dynamic-table/__tests__/DynamicTable-test-utils.d.ts

@@ -0,0 +1,3 @@
+import { IDynamicTable } from '../DynamicTable';
+import { DataModel } from './__mocks__/table-data';
+export declare const getConfig: (overrides?: Partial<IDynamicTable<DataModel>>) => IDynamicTable<DataModel>;

package/dist/components/dynamic-table/__tests__/DynamicTable-utils.spec.d.ts

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

package/dist/components/dynamic-table/__tests__/DynamicTable.spec.d.ts

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

package/dist/components/dynamic-table/__tests__/__mocks__/table-data.d.ts

@@ -0,0 +1,16 @@
+export interface DataModel {
+    id: string;
+    name: string;
+    description: string;
+    account: string | null;
+    contact: {
+        name: string;
+    } | null;
+    jobType: string;
+    scheduled: string;
+    status: string;
+    resources: string[];
+    locked: boolean;
+    followUp?: Date;
+}
+export declare const tableData: DataModel[];

package/dist/components/dynamic-table/interfaces.d.ts

@@ -0,0 +1,52 @@
+import { ColumnInterface, ColumnInstance, UseTableCellProps, Row, ColumnInterfaceBasedOnValue, HeaderProps, Renderer } from 'react-table';
+export interface UseRowClickOptions<D extends object> {
+    /**
+     * This will add row click behaviour. Whenever a cell is clicked within a row,
+     * it will call this function.
+     */
+    onRowClick?: (row: Row<D>) => void;
+}
+declare module 'react-table' {
+    interface TableOptions<D extends object> extends UseSortByOptions<D>, UseRowSelectOptions<D>, UseRowClickOptions<D> {
+    }
+    interface Hooks<D extends object = {}> extends UseSortByHooks<D>, UseRowSelectHooks<D> {
+    }
+    interface TableInstance<D extends object = {}> extends UseSortByInstanceProps<D>, UseRowSelectInstanceProps<D>, UseRowClickOptions<D> {
+    }
+    interface TableState<D extends object = {}> extends UseSortByState<D>, UseRowSelectState<D> {
+    }
+    interface ColumnInterface<D extends object = {}> extends UseSortByColumnOptions<D> {
+        accessor: keyof D;
+        emptyCellText?: string;
+    }
+    interface ColumnInstance<D extends object = {}> extends UseSortByColumnProps<D>, UseRowSelectRowProps<D> {
+        Header?: Renderer<HeaderProps<D>> | undefined;
+    }
+    interface Row<D extends object = {}> extends UseRowSelectRowProps<D> {
+    }
+    interface Cell<D extends object = {}> extends UseRowSelectRowProps<D> {
+    }
+}
+/**
+ * Deliberately setting Header to string only since we want to control headers
+ * within DynamicTable and because we want to use it for a default message
+ * for empty values.
+ */
+export interface IDynamicTableColumn<T extends object> extends Omit<ColumnInterface<T>, 'Header'>, ColumnInterfaceBasedOnValue<T> {
+    Header?: Renderer<HeaderProps<T>> | undefined;
+}
+export type ControlStates = 'controlled' | 'uncontrolled' | 'disabled';
+export type RowControlStates = 'rowOnly' | 'allRows' | 'disabled';
+export type DisplayType = 'expanded' | 'condensed';
+export interface ITableHeaderCell<T extends object> extends ColumnInstance<T> {
+    sticky: boolean;
+    displayType: DisplayType;
+}
+export type ICellContentRenderer<T extends object> = Pick<IDynamicTableColumn<T>, 'Header' | 'emptyCellText' | 'id'> & Pick<UseTableCellProps<T>, 'value'>;
+interface IGetWrapperProps {
+    className: string;
+}
+export interface ITableWrapper {
+    getWrapperProps: (additionalClasses?: string) => IGetWrapperProps;
+}
+export {};

package/dist/components/emptystate/EmptyState.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface IEmptyState extends React.HTMLAttributes<HTMLDivElement> {
+    imgSrc: string;
+    title: string;
+    message: string;
+    className?: string;
+}
+export declare const EmptyState: React.FC<React.PropsWithChildren<IEmptyState>>;
+export {};

package/dist/components/emptystate/EmptyState.spec.d.ts

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

package/dist/components/emptystate/EmptyState.stories.d.ts

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

package/dist/components/filter-bar/FilterBar.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { IFilter, IAppliedFilter as AppliedFilter, IFilterItem as FilterItem, IAddedFilter } from './interfaces';
+export type IAppliedFilter<T extends FilterItem> = AppliedFilter<T>;
+export type IFilterItem = FilterItem;
+export interface IFilterBarProps<T extends IFilterItem> {
+    /**
+     * An array of filter options. If a filter item is set to 'static' then it is permanently fixed and unable to be edited.
+     */
+    filters: IFilter<T>[];
+    onFilter: (filters: IFilterBarState<T>['appliedFilters']) => void;
+    loading?: boolean;
+    /**
+     * Apply custom styles to the content of the filter list.
+     */
+    scrollableContentClasses?: string;
+}
+interface IFilterBarState<T extends IFilterItem> {
+    appliedFilters: IAppliedFilter<T>[];
+    addedFilter: IAddedFilter;
+    editFilterId: string;
+}
+export declare class FilterBar<T extends IFilterItem> extends React.PureComponent<IFilterBarProps<T>, IFilterBarState<T>> {
+    constructor(props: IFilterBarProps<T>);
+    componentDidMount(): void;
+    /**
+     * When we 'add' a filter, we add a pill item to the filter bar and then list the options for it. It is not yet 'applied' until we select options.
+     * If we click on the add button for a filter that is already added, we want to launch an edit mode for it.
+     */
+    addFilter: (hideAddFilterDropdownList: () => void, filterToAdd: IAddedFilter) => () => void;
+    applyChangesToExistingFilter: (editFilterId: string, selectedItems: T[], existingFilters: IAppliedFilter<T>[]) => IAppliedFilter<T>[];
+    applyChangesToNewFilter: (filter: IFilter<T>, selectedItems: T[], existingFilters: IAppliedFilter<T>[]) => IAppliedFilter<T>[];
+    /**
+     *  Apply a filter to the filter bar with the options we have selected.
+     */
+    applySelectedItemsToFilter: (filter: IFilter<T>, selectedFilterItems: T[]) => IAppliedFilter<T>[];
+    applyAndSaveFilters: (filter: IFilter<T>) => (selectedFilterItems: T[]) => void;
+    saveFilters: (filters: IAppliedFilter<T>[]) => void;
+    renderAddFilterButton: () => React.JSX.Element;
+    /**
+     * Render the add filter control button.
+     */
+    renderAddFilterControl: () => React.JSX.Element;
+    clearTemporaryPill: () => void;
+    closeTemporaryPill: () => () => void;
+    renderFilterItemSearch: (filter: IFilter<T>, preSelectedItems: T[], scrollableContentClasses?: string) => React.JSX.Element;
+    /**
+     * After we 'add' a filter, we want to render this 'temporary' pill in the filter bar. This temporary pill will be removed once we hit apply or exit out of the dropdown.
+     */
+    renderTemporaryPill: (filterName: string, filterId: string, preSelectedItems: T[]) => React.JSX.Element;
+    removeFilter: (filterId: string) => void;
+    editFilter: (filterId: string) => void;
+    render(): React.JSX.Element;
+}
+export {};

package/dist/components/filter-bar/FilterBar.stories.d.ts

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

package/dist/components/filter-bar/__tests__/FilterBar.spec.d.ts

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

package/dist/components/filter-bar/filter-list/FilterList.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { IFilterItem } from '../interfaces';
+export interface IFilterListProps<T> {
+    items: T[];
+    itemRenderer: (item: T) => JSX.Element;
+    loading?: boolean;
+    className?: string;
+    scrollableContentClasses?: string;
+}
+export declare const FilterList: <T extends IFilterItem>({ items, itemRenderer, loading, className, scrollableContentClasses }: IFilterListProps<T>) => React.JSX.Element;

package/dist/components/filter-bar/filter-list/FilterListWithApply.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { IFilterListProps } from './FilterList';
+import { InputType, IFilterItem } from '../interfaces';
+interface IFilterListWithApplyProps<T> {
+    items: T[];
+    preSelectedItems: T[];
+    inputType: InputType;
+    applyFilter: (selectedFilterItems: T[]) => void;
+    loading?: boolean;
+    isListCollapsed?: boolean;
+    scrollableContentClasses?: IFilterListProps<T>['scrollableContentClasses'];
+}
+interface IFilterListWithApplyState<T extends IFilterItem> {
+    selected: T[];
+}
+export declare class FilterListWithApply<T extends IFilterItem> extends React.PureComponent<IFilterListWithApplyProps<T>, IFilterListWithApplyState<T>> {
+    constructor(props: IFilterListWithApplyProps<T>);
+    getSelectedItems: (item: T, checked?: boolean) => T[];
+    onItemChange: (item: T) => ({ target }: React.ChangeEvent<HTMLInputElement>) => void;
+    itemRenderer: (item: T) => React.JSX.Element;
+    applyFilters: () => void;
+    render(): React.JSX.Element;
+}
+export {};

package/dist/components/filter-bar/filter-list/FilterSearch.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IFilterItem } from '../interfaces';
+export interface IFilterSearchProps<T> {
+    items: T[];
+    children: React.FC<React.PropsWithChildren<{
+        filteredItems: T[];
+    }>>;
+    placeholder?: string;
+    className?: string;
+}
+interface IFilterSearchState<T> {
+    itemsWithSearchTermApplied: T[];
+}
+export declare class FilterSearch<T extends IFilterItem> extends React.PureComponent<IFilterSearchProps<T>, IFilterSearchState<T>> {
+    constructor(props: IFilterSearchProps<T>);
+    componentDidUpdate(prevProps: IFilterSearchProps<T>): void;
+    updateItemsState: (items: T[]) => void;
+    onFilterSearch: (value: string) => void;
+    render(): React.JSX.Element;
+}
+export {};

package/dist/components/filter-bar/filter-list/RemoteSearch.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { IFilterItem } from '../interfaces';
+export interface IRemoteSearchProps<T> {
+    useFetch: (searchTerm: string) => Promise<T[]>;
+    children: React.FC<React.PropsWithChildren<{
+        fetchedItems: T[];
+        searchTerm: string;
+        isFetching: boolean;
+    }>>;
+    preSelectedItems: T[];
+    placeholder?: string;
+    className?: string;
+}
+export interface IRemoteSearchState {
+    loading: boolean;
+    searchTerm: string;
+}
+export declare const DEBOUNCE_TIME = 700;
+export declare class RemoteSearch<T extends IFilterItem> extends React.PureComponent<IRemoteSearchProps<T>, IRemoteSearchState> {
+    private _fetchedItems;
+    private _debouncedSearch;
+    constructor(props: IRemoteSearchProps<T>);
+    onFilterSearch: (value: string) => void;
+    render(): React.JSX.Element;
+}

package/dist/components/filter-bar/filter-list/__tests__/FilterList.spec.d.ts

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

package/dist/components/filter-bar/filter-list/__tests__/FilterListWithApply.spec.d.ts

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

package/dist/components/filter-bar/filter-list/__tests__/FilterSearch.spec.d.ts

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

package/dist/components/filter-bar/filter-list/__tests__/RemoteSearch.spec.d.ts

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