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

package/dist/panel/column/index.d.ts

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

package/dist/panel/content/PanelContent.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+declare const PanelContent: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export interface Props {
+    /**
+     * Main content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Optional panel content's class name in non-edit mode.
+     */
+    className?: string;
+    /**
+     * Component shown in edit mode. By default, regular input field is shown in edit mode.
+     */
+    editComponent?: React.ReactNode;
+    /**
+     * Optional header in edit mode.
+     */
+    editHeader?: string;
+    /**
+     * Optional header in non-edit mode.
+     */
+    header?: string;
+}
+export default PanelContent;

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

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

package/dist/panel/contentProp/PanelContentProp.d.ts

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

package/dist/panel/contentProp/index.d.ts

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

package/dist/panel/context/PanelContext.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ListDndChildProps } from '../../sortableDndList';
+export interface PanelContextShape extends Partial<ListDndChildProps> {
+    /**
+     * Toggles `edit` mode.
+     */
+    edit?: boolean;
+}
+/**
+ * Defines React context for `Panel` component.
+ */
+export declare const PanelContext: React.Context<PanelContextShape>;

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

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

package/dist/panel/dragHandle/PanelDragHandle.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const PanelDragHandle: React.ForwardRefExoticComponent<React.RefAttributes<HTMLDivElement>>;
+export default PanelDragHandle;

package/dist/panel/dragHandle/index.d.ts

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

package/dist/panel/index.d.ts

@@ -0,0 +1,11 @@
+export { default as PanelActions } from './actions';
+export { default as PanelColumn } from './column';
+export { default as PanelContent } from './content';
+export { default as PanelContentProp } from './contentProp';
+export { default as PanelDragHandle } from './dragHandle';
+export { default as PanelList } from './list';
+export { default as PanelListDivider } from './listDivider';
+export { default as PanelSide } from './side';
+export { default as PanelSkeleton } from './skeleton';
+export { default as PanelTitle } from './title';
+export { default } from './Panel';

package/dist/panel/list/PanelList.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+declare const PanelList: React.FC<Props>;
+export interface Props {
+    /**
+     * Main content.
+     */
+    children: React.ReactNode;
+    /**
+     * Optional toolbar rendered on top of the list.
+     */
+    toolbar?: React.ReactNode;
+    /**
+     * Toggles loading effect for the toolbar.
+     */
+    toolbarLoading?: boolean;
+}
+export default PanelList;

package/dist/panel/list/index.d.ts

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

package/dist/panel/listDivider/PanelListDivider.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare const PanelListDivider: React.FC<Props>;
+export interface Props {
+    /**
+     * Toggles component opacity.
+     */
+    opaque?: boolean;
+}
+export default PanelListDivider;

package/dist/panel/listDivider/index.d.ts

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

package/dist/panel/side/PanelSide.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { IconName, IconRenderProp } from '../../icon';
+declare const PanelSide: React.FC<Props>;
+export interface Props {
+    /**
+     * Icon to display.
+     */
+    icon?: IconName;
+    /**
+     * Renders custom icon.
+     *
+     * Pass either a React component or raw markup as string.
+     * Passed string must be sanitized beforehand so that it's safe to use.
+     */
+    iconRender?: IconRenderProp;
+}
+export default PanelSide;

package/dist/panel/side/index.d.ts

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

package/dist/panel/skeleton/PanelSkeleton.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+declare const PanelSkeleton: React.FC<Props>;
+export interface Props {
+    /**
+     * Number of loading blocks.
+     */
+    blocks?: number;
+    /**
+     * Relative size of a loading block.
+     */
+    size?: 'sm' | 'md' | 'lg';
+}
+export default PanelSkeleton;

package/dist/panel/skeleton/index.d.ts

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

package/dist/panel/title/PanelTitle.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Props as PanelContentProps } from '../content';
+declare const PanelTitle: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export interface Props extends Omit<PanelContentProps, 'children'> {
+    /**
+     * Panel's title.
+     */
+    title: string;
+    /**
+     * Panel's description.
+     */
+    description?: string;
+    /**
+     * Tooltip for panel's description.
+     */
+    descriptionTooltip?: string;
+}
+export default PanelTitle;

package/dist/panel/title/index.d.ts

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

package/dist/popper/Popper.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { PopperPlacement, PopperOffset } from './types';
+declare const Popper: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
+export interface Props {
+    /**
+     * Anchor element. Popper will be mounted to this element.
+     */
+    anchorEl?: HTMLElement | null;
+    /**
+     * Popper content.
+     */
+    children: React.ReactNode;
+    /**
+     * Class name that will be applied to popper content-wrapper.
+     */
+    className?: string;
+    /**
+     * Disables popper auto-flip.
+     */
+    disableFlip?: boolean;
+    /**
+     * Popper placement.
+     */
+    placement?: PopperPlacement;
+    /**
+     * Displacement from its reference element.
+     */
+    offset?: PopperOffset;
+    /**
+     * Aria role.
+     */
+    role?: React.AriaRole;
+    /**
+     * Makes popper same width as its anchor.
+     */
+    sameWidth?: boolean;
+}
+export default Popper;

package/dist/popper/arrow/PopperArrow.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const PopperArrow: React.FC<Props>;
+export interface Props {
+    /**
+     * Sets arrow size.
+     */
+    size?: 'sm' | 'md';
+}
+export default PopperArrow;

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

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

package/dist/popper/context/PopperContext.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface PopperContext {
+    /**
+     * Forces synchronous popper position update.
+     */
+    forceUpdate?: () => void;
+}
+/**
+ * Defines React context for `Popper` component.
+ */
+export declare const PopperContext: React.Context<PopperContext>;
+export declare const usePopperCtx: () => PopperContext;

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

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

package/dist/popper/index.d.ts

@@ -0,0 +1,4 @@
+export * from './context';
+export * from './types';
+export { default as PopperArrow } from './arrow';
+export { default } from './Popper';

package/dist/popper/types.d.ts

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

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

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

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

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

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

package/dist/propertiesTable/PropertiesTable.d.ts

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

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

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

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

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

package/dist/rangeSlider/RangeSlider.d.ts

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

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

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

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

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

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

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

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

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

package/dist/responsiveImage/index.d.ts

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

package/dist/searchDialog/SearchDialog.d.ts

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

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

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

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

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

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

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

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

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

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

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