@ckbox/components 1.1.1-dev.0 → 1.2.0-dev.0

package/dist/searchDialog/fallback/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SearchDialogFallback';

package/dist/searchDialog/header/SearchDialogHeader.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+declare const SearchDialogHeader: React.FC<Props>;
+export interface Props {
+    /**
+     * Optional action rendered next to close button.
+     */
+    action?: React.ReactNode;
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Aria label for the close button.
+     */
+    closeBtnLabel: string;
+    /**
+     * Aria label for the input.
+     */
+    inputLabel: string;
+    /**
+     * Callback invoked when form is submitted.
+     */
+    onSubmit?: React.FormEventHandler;
+}
+export default SearchDialogHeader;

package/dist/searchDialog/header/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SearchDialogHeader';

package/dist/searchDialog/index.d.ts

@@ -0,0 +1,7 @@
+export { default as SearchDialogActions } from './actions';
+export { default as SearchDialogContent } from './content';
+export { default as SearchDialogFallback } from './fallback';
+export { default as SearchDialogHeader } from './header';
+export { default as SearchDialogInput } from './input';
+export { default as SearchDialogSection } from './section';
+export { default } from './SearchDialog';

package/dist/searchDialog/input/SearchDialogInput.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+declare const SearchDialogInput: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+export interface Props {
+    /**
+     * Input's name to register.
+     */
+    name?: string;
+    /**
+     * Callback invoked when the blur event is fired.
+     */
+    onBlur?: (evt: React.ChangeEvent) => void;
+    /**
+     * Callback invoked when the value is changed.
+     */
+    onChange?: (evt: React.ChangeEvent) => void;
+    /**
+     * Callback invoked when the element receives focus.
+     */
+    onFocus?: (evt: React.ChangeEvent) => void;
+    /**
+     * Input's placeholder text.
+     */
+    placeholder?: string;
+    /**
+     * Input's value.
+     */
+    value?: string;
+}
+export default SearchDialogInput;

package/dist/searchDialog/input/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SearchDialogInput';

package/dist/searchDialog/section/SearchDialogSection.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+declare const SearchDialogSection: React.FC<Props>;
+export interface Props {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Header of the section.
+     */
+    header?: string;
+}
+export default SearchDialogSection;

package/dist/searchDialog/section/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SearchDialogSection';

package/dist/searchResultsBar/SearchResultsBar.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare const SearchResultsBar: React.FC<Props>;
+interface Props {
+    /**
+     * Sets component's children.
+     */
+    children: React.ReactNode;
+}
+export default SearchResultsBar;

package/dist/searchResultsBar/filters/SearchResultsBarFilters.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare const SearchResultsBarFilters: React.FC<Props>;
+interface Props {
+    /**
+     * Sets component's children.
+     */
+    children: React.ReactNode;
+}
+export default SearchResultsBarFilters;

package/dist/searchResultsBar/filters/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SearchResultsBarFilters';

package/dist/searchResultsBar/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SearchResultsBarPhrase } from './phrase';
+export { default as SearchResultsBarFilters } from './filters';
+export { default } from './SearchResultsBar';

package/dist/searchResultsBar/phrase/SearchResultsBarPhrase.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+declare const SearchResultsBarPhrase: React.FC<Props>;
+interface Props {
+    /**
+     * Sets the placeholder.
+     */
+    placeholder: string;
+    /**
+     * Sets the search phrase.
+     */
+    searchPhrase: string;
+    /**
+     * Sets the search results total count.
+     */
+    count: number;
+}
+export default SearchResultsBarPhrase;

package/dist/searchResultsBar/phrase/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SearchResultsBarPhrase';

package/dist/select/Select.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { SelectOption, SelectToggleHandler } from './types';
+declare const Select: React.FC<Props>;
+export interface Props {
+    /**
+     * Indicate error in input element.
+     */
+    error?: boolean;
+    /**
+     * ID of the input element.
+     */
+    id?: string;
+    /**
+     * Allows to select multiple options.
+     */
+    multiSelect?: boolean;
+    /**
+     * Callback invoked when component loses focus.
+     */
+    onBlur?: () => void;
+    /**
+     * Callback invoked whenever an item is selected or deselected.
+     */
+    onSelectToggle: SelectToggleHandler;
+    /**
+     * Message displayed if listbox is empty.
+     */
+    noOptionsLabel?: string;
+    /**
+     * List of options.
+     */
+    options: SelectOption[];
+    /**
+     * Textual placeholder if there are no options selected.
+     */
+    placeholder?: string;
+    /**
+     * List of selected options.
+     */
+    selected: SelectOption[];
+    /**
+     * Allows to search through options.
+     */
+    searchable?: boolean;
+}
+export default Select;

package/dist/select/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export { default } from './Select';

package/dist/select/input/SelectInput.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+declare const SelectInput: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+export interface Props {
+    /**
+     * Fits input width to content size.
+     */
+    fitWidth?: boolean;
+    /**
+     * ID of input element.
+     */
+    id?: string;
+    /**
+     * ID of the corresponding listbox element.
+     */
+    listboxId?: string;
+    /**
+     * Indicates if corresponding listbox is open.
+     */
+    listboxOpen?: boolean;
+    /**
+     * Callback invoked when component loses focus.
+     */
+    onBlur?: React.FocusEventHandler;
+    /**
+     * Callback invoked when component gains focus.
+     */
+    onFocus?: React.FocusEventHandler;
+    /**
+     * Change event handler.
+     */
+    onChange: React.ChangeEventHandler;
+    /**
+     * Keyboard handler for the input element.
+     */
+    onKeyDown?: React.KeyboardEventHandler;
+    /**
+     * Textual placeholder if there are no options selected.
+     */
+    placeholder?: string;
+    /**
+     * Input value.
+     */
+    value: string;
+}
+export default SelectInput;

package/dist/select/input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SelectInput';
+export { default } from './SelectInput';

package/dist/select/listbox/SelectListbox.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+declare const SelectListbox: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
+export interface Props {
+    /**
+     * Anchor element.
+     */
+    anchorEl?: HTMLElement | null;
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * ID of the listbox.
+     */
+    listboxId: string;
+    /**
+     * Message displayed if listbox is empty.
+     */
+    noOptionsLabel?: string;
+    /**
+     * Callback invoked when component is about to close.
+     */
+    onClose?: () => void;
+}
+export default SelectListbox;

package/dist/select/listbox/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SelectListbox';

package/dist/select/listboxItem/SelectListboxItem.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { SelectOption, SelectToggleHandler } from '../types';
+declare const SelectListboxItem: React.FC<Props>;
+export interface Props {
+    /**
+     * Blocks hover.
+     */
+    blockHover?: boolean;
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Allows to select multiple options.
+     */
+    multiSelect?: boolean;
+    /**
+     * Associated option.
+     */
+    option: SelectOption;
+    /**
+     * Callback invoked when hover block is turned off.
+     */
+    onBlockHoverStop?: () => void;
+    /**
+     * Callback invoke upon pre-selecting an item.
+     */
+    onPreSelect: SelectToggleHandler;
+    /**
+     * Callback invoke upon selecting an item.
+     */
+    onSelectToggle: SelectToggleHandler;
+    /**
+     * Marks item as pre-selected (e.g. when navigating with arrows).
+     */
+    preSelected?: boolean;
+    /**
+     * Marks item as selected.
+     */
+    selected: boolean;
+}
+export default SelectListboxItem;

package/dist/select/listboxItem/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SelectListboxItem';

package/dist/select/listboxList/SelectListboxList.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+declare const SelectListboxList: React.FC<Props>;
+export interface Props {
+    /**
+     * Element to which listbox is anchored.
+     */
+    anchorEl?: HTMLElement | null;
+    /**
+     * Main content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * ID of the listbox.
+     */
+    listboxId: string;
+    /**
+     * Message displayed if listbox is empty.
+     */
+    noOptionsLabel?: string;
+}
+export default SelectListboxList;

package/dist/select/listboxList/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SelectListboxList';

package/dist/select/multiList/SelectMultiList.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { SelectOption, SelectToggleHandler } from '../types';
+import { Props as SelectInputProps } from '../input';
+declare const SelectMultiList: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+export interface Props {
+    /**
+     * Props for the input element.
+     */
+    inputProps: SelectInputProps;
+    /**
+     * Callback invoked upon toggling asset selection.
+     */
+    onSelectToggle: SelectToggleHandler;
+    /**
+     * Allows to search through options.
+     */
+    searchable?: boolean;
+    /**
+     * List of selected options.
+     */
+    selected: SelectOption[];
+}
+export default SelectMultiList;

package/dist/select/multiList/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SelectMultiList';

package/dist/select/multiListItem/SelectMultiListItem.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SelectOption, SelectToggleHandler } from '../types';
+declare const SelectMultiListItem: React.FC<Props>;
+export interface Props {
+    /**
+     * Main content of the component.
+     */
+    children: string;
+    /**
+     * Associated option.
+     */
+    option: SelectOption;
+    /**
+     * Callback invoked upon toggling asset selection.
+     */
+    onSelectToggle: SelectToggleHandler;
+}
+export default SelectMultiListItem;

package/dist/select/multiListItem/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SelectMultiListItem';

package/dist/select/single/SelectSingle.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Props as SelectInputProps } from '../input';
+import { SelectOption } from '../types';
+declare const SelectSingle: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+export interface Props {
+    /**
+     * Props for the input element.
+     */
+    inputProps: SelectInputProps;
+    /**
+     * Allows to search through options.
+     */
+    searchable?: boolean;
+    /**
+     * List of selected options.
+     */
+    selected?: SelectOption;
+}
+export default SelectSingle;

package/dist/select/single/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SelectSingle';

package/dist/select/types.d.ts

@@ -0,0 +1,40 @@
+export interface SelectOption {
+    /**
+     * Unique ID of an option.
+     */
+    id: string;
+    /**
+     * Value displayed for the user.
+     */
+    label: string;
+}
+export interface SelectKeyboardNavProps {
+    /**
+     * Listbox element.
+     */
+    listboxEl: HTMLElement | null;
+    /**
+     * Flag indicating if listbox is currently open.
+     */
+    listboxOpen: boolean;
+    /**
+     * Callback that is called whenever listbox opening is requested.
+     */
+    onListboxOpen: () => void;
+    /**
+     * Toggles selection of an option.
+     */
+    onSelectToggle: SelectToggleHandler;
+    /**
+     * List of options to navigate.
+     */
+    options: SelectOption[];
+}
+/**
+ * Toggles selection of a provided option.
+ */
+export declare type SelectToggleHandler = (opt: SelectOption) => void;
+/**
+ * Gets next / previous option (for keyboard selection).
+ */
+export declare type SelectKeyboardNextIdGetter = (options: SelectOption[], currentIndex: number) => SelectOption | undefined;

package/dist/select/useKeyboardNav/index.d.ts

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

package/dist/select/useKeyboardNav/useKeyboardNav.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { SelectKeyboardNavProps, SelectOption } from '../types';
+export declare const useKeyboardNav: ({ listboxEl, listboxOpen, options, onSelectToggle, onListboxOpen, }: SelectKeyboardNavProps) => {
+    blockHover: boolean;
+    onBlockHoverStop: () => void;
+    onPreSelect: React.Dispatch<React.SetStateAction<SelectOption | undefined>>;
+    onKeyDown: (evt: import("../../utils/keyboard/types").KeyEventLike) => void;
+    preSelected: SelectOption | undefined;
+};

package/dist/select/utils/index.d.ts

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

package/dist/select/utils/utils.d.ts

@@ -0,0 +1,26 @@
+import { SelectKeyboardNextIdGetter, SelectOption } from '../types';
+/**
+ * Creates a predicate function that checks if option mathes searched phrase.
+ *
+ * @param searchText search phrase
+ * @returns predicate function
+ */
+export declare const createOptPredicate: (searchText: string) => ({ label }: SelectOption) => boolean;
+/**
+ * Gets previous option in a list of options by going one step back.
+ * If there is no selection yet or the first option is selected, then last option is returned.
+ *
+ * @param options list of available options
+ * @param currentIndex index of currently selected option
+ * @returns next selected option
+ */
+export declare const getPrevOption: SelectKeyboardNextIdGetter;
+/**
+ * Gets next option in a list of options by going one step forward.
+ * If there is no selection yet or the last option is selected, then first option is returned.
+ *
+ * @param options list of available options
+ * @param currentIndex index of currently selected option
+ * @returns next selected option
+ */
+export declare const getNextOption: SelectKeyboardNextIdGetter;

package/dist/selectionArea/SelectionArea.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SelectionAreaCoords } from './types';
+declare const SelectionArea: React.FC<Props>;
+export interface Props {
+    /**
+     * Selection area container.
+     */
+    container?: HTMLDivElement | null;
+    /**
+     * Area selection change handler.
+     */
+    onSelectionChange?: (area: SelectionAreaCoords) => void;
+    /**
+     * Selector for ignoring areas started within passed selector.
+     */
+    ignoredSelector?: string;
+}
+export default SelectionArea;

package/dist/selectionArea/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectionAreaCoords } from './types';
+export { default } from './SelectionArea';

package/dist/skeleton/Skeleton.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+declare const Skeleton: React.FC<Props>;
+export interface Props {
+    /**
+     * Optional class name. It overrides class responsible for background color.
+     */
+    className?: string;
+    /**
+     * Specifies component height.
+     */
+    height?: string;
+    /**
+     * Specifies component width.
+     */
+    width?: string;
+}
+export default Skeleton;

package/dist/skeleton/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Skeleton';

package/dist/sortButton/SortButton.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+declare const SortButton: React.FC<Props>;
+export interface Props {
+    /**
+     * Button's aria label.
+     */
+    label?: string;
+    /**
+     * Tooltip displayed on hover.
+     */
+    tooltip: string;
+    /**
+     * Order indicated on button's icon.
+     */
+    order: 'asc' | 'desc';
+    /**
+     * Sets `click` event handler.
+     */
+    onClick?: () => void;
+}
+export default SortButton;

package/dist/sortButton/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SortButton';

package/dist/sortableDndList/SortableDndList.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { SortableDndListContextShape } from './context';
+declare const SortableDndList: React.FC<Props>;
+export interface Props extends SortableDndListContextShape {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Container element to scroll while dragging.
+     */
+    scrollableContainer?: HTMLElement | null;
+}
+export default SortableDndList;

package/dist/sortableDndList/context/SortableDndListContext.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { ListDndMoveItem, ListDndOnDragEnd, ListDndSetDraggable } from '../types';
+export interface SortableDndListContextShape {
+    /**
+     * Callback that performs list reordering.
+     */
+    moveItem: ListDndMoveItem;
+    /**
+     * Marks item as draggable / non-draggable.
+     */
+    setDraggable: ListDndSetDraggable;
+    /**
+     * Item type. Same value must be provided for all list items.
+     */
+    type: string;
+    /**
+     * Optional callback invoked when drag is over.
+     */
+    onDragEnd?: ListDndOnDragEnd;
+}
+/**
+ * Defines React context for `SortableDndList` component.
+ */
+export declare const SortableDndListContext: React.Context<SortableDndListContextShape>;
+export declare const useSortableDndListContext: () => SortableDndListContextShape;

package/dist/sortableDndList/context/index.d.ts

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

package/dist/sortableDndList/dragLayer/SortableDndListDragLayer.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare const SortableDndListDragLayer: React.FC<Props>;
+export interface Props {
+    /**
+     * Main content.
+     */
+    children: React.ReactNode;
+}
+export default SortableDndListDragLayer;

package/dist/sortableDndList/dragLayer/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SortableDndListDragLayer';

package/dist/sortableDndList/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './useListDnd';
+export { default as SortableDndListItem } from './item';
+export { default } from './SortableDndList';