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

package/dist/popper/types.d.ts

@@ -1,5 +0,0 @@
-import { Placement } from '@popperjs/core';
-export declare type PopperPlacement = Placement;
-export declare type PopperAnchorRef = HTMLElement | null | undefined;
-export declare type PopperOffsetValue = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export declare type PopperOffset = [PopperOffsetValue, PopperOffsetValue];

package/dist/popper/usePopper/index.d.ts

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

package/dist/popper/usePopper/usePopper.d.ts

@@ -1,36 +0,0 @@
-import React from 'react';
-import { Instance } from '@popperjs/core';
-import { PopperPlacement, PopperOffset } from '../types';
-/**
- * Creates and mounts popper element to the anchor element.
- *
- * @param props Popper hook options
- * @returns object containing reference setter
- */
-export declare const usePopper: ({ anchorEl, ...opts }: UsePopper) => {
-    instance: Instance | null;
-    setPopper: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
-};
-interface UsePopper {
-    /**
-     * Anchor element.
-     */
-    anchorEl?: HTMLElement | null;
-    /**
-     * Disables popper auto-flip.
-     */
-    disableFlip?: boolean;
-    /**
-     * Displacement from its reference element.
-     */
-    offset?: PopperOffset;
-    /**
-     * Popper placement.
-     */
-    placement?: PopperPlacement;
-    /**
-     * Makes popper same width as anchor.
-     */
-    sameWidth?: boolean;
-}
-export {};

package/dist/progressPanel/ProgressPanel.d.ts

@@ -1,37 +0,0 @@
-import * as React from 'react';
-declare const ProgressPanel: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export interface Props {
-    /**
-     * Additional info rendered close to a title.
-     */
-    additionalInfo?: React.ReactNode;
-    /**
-     * Applies error styling.
-     */
-    error?: boolean;
-    /**
-     * Applies warning styling.
-     */
-    warning?: boolean;
-    /**
-     * Applies full progress styling.
-     */
-    completed?: boolean;
-    /**
-     * Help text displayed below the bar.
-     */
-    helpText?: React.ReactNode;
-    /**
-     * Unique identifier of a panel.
-     */
-    id: string;
-    /**
-     * Panel title.
-     */
-    title: string;
-    /**
-     * Current progress value in %.
-     */
-    value: number;
-}
-export default ProgressPanel;

package/dist/progressPanel/index.d.ts

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

package/dist/propertiesTable/PropertiesTable.d.ts

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

package/dist/propertiesTable/index.d.ts

@@ -1,2 +0,0 @@
-export { default as PropertiesTableRow } from './row';
-export { default } from './PropertiesTable';

package/dist/propertiesTable/row/PropertiesTableRow.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-declare const PropertiesTableRow: React.FC<Props>;
-export interface Props {
-    /**
-     * Item's label.
-     */
-    label: string;
-    /**
-     * Item's value.
-     */
-    value: React.ReactNode;
-}
-export default PropertiesTableRow;

package/dist/propertiesTable/row/index.d.ts

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

package/dist/rangeSlider/RangeSlider.d.ts

@@ -1,43 +0,0 @@
-import * as React from 'react';
-declare const RangeSlider: React.FC<Props>;
-export declare type Props = {
-    /**
-     * Toggles animation, e.g. width transition.
-     */
-    animated?: boolean;
-    /**
-     * Forces component to occupy half of the available width.
-     */
-    halfWidth?: boolean;
-    /**
-     * Slider value.
-     */
-    value: number;
-    /**
-     * Slider on change callback.
-     *
-     * @param value new slider value
-     */
-    onChange(value: number): void;
-    /**
-     * Slider step.
-     */
-    step: number;
-    /**
-     * Slider minimum value.
-     */
-    min: number;
-    /**
-     * Slider maximum value.
-     */
-    max: number;
-    /**
-     * Slider text values.
-     */
-    textValues?: Record<string, string>;
-    /**
-     * Renders range slider values labels.
-     */
-    showLabels?: boolean;
-};
-export default RangeSlider;

package/dist/rangeSlider/index.d.ts

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

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

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

package/dist/rangeSlider/utils/utils.d.ts

@@ -1,32 +0,0 @@
-declare type RangeSliderConfig = {
-    /**
-     * Max value.
-     */
-    max: number;
-    /**
-     * Min value.
-     */
-    min: number;
-    /**
-     * Step between values.
-     */
-    step: number;
-};
-/**
- * Normalizes value to be set in range slider.
- *
- * @param value value to normalize
- * @param config normalization config
- * @returns normalized value
- */
-export declare const normalizeValue: (value: number, { max, min, step }: RangeSliderConfig) => number;
-/**
- * Returns new range slider value based on mouse position and slider track element.
- *
- * @param sliderTrackElement slider track DOM element
- * @param xPos mouse x position
- * @param rangeSliderConfig range slider config
- * @returns new range slider value
- */
-export declare const calculateValueFromMousePosition: (sliderTrackElement: HTMLDivElement, xPos: number, { max, min, step }: RangeSliderConfig) => number;
-export {};

package/dist/responsiveImage/ResponsiveImage.d.ts

@@ -1,84 +0,0 @@
-/**
- * The `ResponsiveImage` component is responsible for displaying images in a responsive manner.
- *
- * Noteworthy, it is impossible to use a purely native approach based on `img`'s attributes such as `srcset` and `sizes`,
- * since those require media queries to be defined upfront. It is not guaranteed that `ResponsiveImage` component will be used in a manner
- * that allows for media queries to be defined at all. Most likely, the component will be used in a fluid environment
- * in which size of the image's container changes frequently.
- *
- * Therefore, a hybrid approach is used. Native `srcset` and `sizes` attributes are used in combination with a mechanism that
- * updates `sizes` attribute under the hood based on current size of the image's container and a list of available breakpoints.
- * As soon as a fitting breakpoint value is found, it gets assigned to `sizes` attribute. From that moment onwards,
- * the browser takes over and its native features are used to ensure responsiveness and related features:
- *
- * 1. Art direction is possible to achieve via `srcSet` prop. Therefore, different images can be displayed based on current display size.
- *
- * 2. Various image formats can be passed within `srcSet`. The browser will choose the first one supported.
- * For instance, `webp` sources can be supplied via `srcSet.optional` prop and browsers supporting `webp` format will default to that.
- *
- * 3. The `sizes` attribute is leveraged to force the browser to choose the most suitable source.
- * The `sizes` attribtue is set internally by the component in the form of `${ breakpoint }px` value.
- *
- * The images are loaded lazily. A visibility check is used to ensure that only images visible within a given container will be loaded.
- * As a loader, a blurred version of the image can be shown if `blurHash` value is passed.
- */
-import * as React from 'react';
-declare const ResponsiveImage: React.FC<Props>;
-export interface Props {
-    /**
-     * Image's description.
-     *
-     * Used for accessibilty purposes and in case of image loading errors.
-     */
-    alt: string;
-    /**
-     * Original image's blurhash. Blurhash will be decoded under the hood into base64.
-     *
-     * It will be displayed as long as image is being loaded.
-     */
-    blurHash?: string;
-    /**
-     * List of available image widths.
-     */
-    breakpoints: number[];
-    /**
-     * Reference to a scrollable container that contains the image.
-     *
-     * It is used to detect image's visibility.
-     */
-    container?: HTMLDivElement | null;
-    /**
-     * Maps breakpoint value to a flag indicating if it is possible to display thumbnail as a cover for that breakpoint.
-     */
-    cover?: Record<number, boolean>;
-    /**
-     * Original image's height.
-     */
-    height?: number;
-    /**
-     * Available sources for the image.
-     */
-    srcSet: {
-        /**
-         * Optional source.
-         */
-        optional?: string[];
-        /**
-         * Required default source.
-         */
-        default: string[];
-    };
-    /**
-     * Optional sources' mime type.
-     */
-    optionalSrcMimeType?: string;
-    /**
-     * Original image's width.
-     */
-    width?: number;
-    /**
-     * Callback invoked when a resource failed to load, or can't be used.
-     */
-    onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
-}
-export default ResponsiveImage;

package/dist/responsiveImage/fallback/ResponsiveImageFallback.d.ts

@@ -1,21 +0,0 @@
-import * as React from 'react';
-declare const ResponsiveImageFallback: React.FC<Props>;
-export interface Props {
-    /**
-     * Indicates if cover is allowed for the image.
-     */
-    allowsCover?: boolean;
-    /**
-     * Original image's blurhash. Blurhash will be decoded under the hood into base64.
-     */
-    blurHash?: string;
-    /**
-     * Original image's height.
-     */
-    height?: number;
-    /**
-     * Original image's width.
-     */
-    width?: number;
-}
-export default ResponsiveImageFallback;

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

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

package/dist/responsiveImage/index.d.ts

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

package/dist/searchDialog/SearchDialog.d.ts

@@ -1,21 +0,0 @@
-import * as React from 'react';
-declare const SearchDialog: React.FC<Props>;
-export interface Props {
-    /**
-     * Main content of the component.
-     */
-    children: React.ReactNode;
-    /**
-     * Label of the dialog element.
-     */
-    label?: string;
-    /**
-     * Callback invoked when dialog is closed.
-     */
-    onClose?: () => void;
-    /**
-     * Opens file preview.
-     */
-    open?: boolean;
-}
-export default SearchDialog;

package/dist/searchDialog/actions/SearchDialogActions.d.ts

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

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

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

package/dist/searchDialog/content/SearchDialogContent.d.ts

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

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

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

package/dist/searchDialog/context/SearchDialogContext.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-export interface SearchDialogContext {
-    /**
-     * Callback invoked when dialog is closed.
-     */
-    onClose?: () => void;
-}
-export declare const SearchDialogContext: React.Context<SearchDialogContext>;
-export declare const useSearchDialogCtx: () => SearchDialogContext;

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

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

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

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

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

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

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

@@ -1,25 +0,0 @@
-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

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

package/dist/searchDialog/index.d.ts

@@ -1,7 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

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

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

@@ -1,13 +0,0 @@
-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

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

package/dist/searchResultsBar/SearchResultsBar.d.ts

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

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

package/dist/searchResultsBar/index.d.ts

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

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

@@ -1,17 +0,0 @@
-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

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

package/dist/select/Select.d.ts

@@ -1,46 +0,0 @@
-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

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

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

@@ -1,45 +0,0 @@
-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

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

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

@@ -1,25 +0,0 @@
-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;