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

package/dist/utils/useDraggable/types.d.ts

@@ -1,73 +0,0 @@
-/// <reference types="react" />
-import { Dimensions } from '../useResize';
-export declare type DragHandler = (diff: {
-    /**
-     * Dragged element.
-     */
-    draggableEl: HTMLElement;
-    /**
-     * Initial X offset of dragged element in relation to its closest positioned ancestor.
-     */
-    initOffsetX: number;
-    /**
-     * Initial Y offset of dragged element in relation to its closest positioned ancestor.
-     */
-    initOffsetY: number;
-    /**
-     * Initial offset width of dragged element.
-     */
-    initOffsetWidth: number;
-    /**
-     * Initial offset height of dragged element.
-     */
-    initOffsetHeight: number;
-    /**
-     * Pointer's X client offset.
-     */
-    clientOffsetX: number;
-    /**
-     * Pointer's Y client offset.
-     */
-    clientOffsetY: number;
-    /**
-     * Value of a vector representing pointer movement in X axis.
-     */
-    clientVX: number;
-    /**
-     * Value of a vector representing pointer movement in Y axis.
-     */
-    clientVY: number;
-}) => void;
-export declare type DragDimensionsHandler = (dimensions: Dimensions) => void;
-export interface DraggableOptions {
-    /**
-     * Callback invoked on dragging. Passes most recent drag vectors.
-     */
-    onDrag?: DragHandler;
-    /**
-     * Callback invoked on drag end.
-     */
-    onDragEnd?: DragDimensionsHandler;
-    /**
-     * Callback invoked on drag start.
-     */
-    onDragStart?: React.MouseEventHandler<HTMLElement>;
-}
-export interface DraggableState {
-    /**
-     * Dragged element.
-     */
-    draggableEl: HTMLElement | null;
-    /**
-     * Indicates if dragging is happening.
-     */
-    isDragging?: boolean;
-    /**
-     * Event handler that should be attached to drag handle.
-     */
-    onMouseDown?: React.MouseEventHandler<HTMLElement>;
-    /**
-     * Setter for element that will be dragged.
-     */
-    setDraggableEl: (el: HTMLElement | null) => void;
-}

package/dist/utils/useDraggable/useDraggable.d.ts

@@ -1,8 +0,0 @@
-import { DraggableOptions, DraggableState } from './types';
-/**
- * Manages element dragging.
- *
- * @param opts dragging options
- * @returns dragging state and utils
- */
-export declare const useDraggable: (opts?: DraggableOptions) => DraggableState;

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

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

package/dist/utils/useElementVisibility/useElementVisibility.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-/**
- * Detects visibility of an element inside a scrollable container.
- *
- * @param container scrollable container
- * @returns hook state and methods
- */
-export declare const useElementVisibility: (container?: HTMLElement | null) => {
-    setElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
-    visible: boolean;
-};

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

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

package/dist/utils/useFilesDrop/useFilesDrop.d.ts

@@ -1,17 +0,0 @@
-interface UseFilesDropProps {
-    /**
-     * Callback invoked when files are dropped.
-     */
-    onDrop?: (files: File[]) => void;
-}
-/**
- * Hook that allows to connect any container and make it a drop target for files.
- *
- * @param hook props
- * @returns hook state and methods
- */
-export declare const useFilesDrop: ({ onDrop }: UseFilesDropProps) => {
-    drop: import("react-dnd").ConnectDropTarget;
-    isActive: boolean;
-};
-export {};

package/dist/utils/useGridSelection/constants.d.ts

@@ -1,49 +0,0 @@
-export declare enum ActionType {
-    /**
-     * Selects all cells.
-     */
-    SELECT_ALL = 0,
-    /**
-     * Selects cells in a range mode.
-     *
-     * If no cells are preselected and selection is made by provided ID,
-     * then all cells are selected starting from the first one up to the provided ID.
-     *
-     * If no cells are preselected and selection is made by provided step, then:
-     * - First cell gets selected if step is positive.
-     * - Last cell gets selected if step is negative.
-     *
-     * If any cell is preselected, then all cells get selected from that cell up to the provided ID or step.
-     *
-     * One of the preselected cells become reference to any consecutive selections in range mode:
-     * - First preselected cell is made a reference cell if selection was made by a negative step.
-     * - Last preselected cell is made a reference cell if selection was made by a positive step.
-     *
-     * Once a cell is established as a reference cell for range mode, it stays as such until any non-range mode selection is made.
-     *
-     * Any consecutive selection in range mode takes the reference cell as a starting point.
-     */
-    SELECT_RANGE = 1,
-    /**
-     * Selects a single cell with provided ID or moves current selection by provided step.
-     * Only a single cell can be selected as a result of this action.
-     *
-     * If no cells are preselected and selection is made by provided step, then:
-     * - First cell gets selected if step is positive
-     * - Last cell gets selected if step is negative
-     */
-    SELECT_SINGLE = 2,
-    /**
-     * Selects all cells with provided IDs. Other cells get deselected.
-     */
-    SELECT_SOME = 3,
-    /**
-     * Extends selection with a cell of provided ID.
-     * If the cell was already selected, then it gets deselected.
-     */
-    TOGGLE_SELECTION = 4,
-    /**
-     * Updates cells. Previous selection is preserved via ID comparison.
-     */
-    UPDATE_CELLS = 5
-}

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

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

package/dist/utils/useGridSelection/reducer.d.ts

@@ -1,2 +0,0 @@
-import { Action, State } from './types';
-export declare const gridSelectionReducer: (state: State, action: Action) => State;

package/dist/utils/useGridSelection/useGridSelection.d.ts

@@ -1,26 +0,0 @@
-/**
- * This hook is responsible for selecting elements in a grid.
- * A list of cells with unique IDs must be provided along with a getter for column numbers.
- *
- * @param cells list of cell ids
- * @param getColumns getter for column number
- * @returns state setters / state slices
- */
-export declare const useGridSelection: (cells: string[], getColumns: () => number) => {
-    deselectAll: () => void;
-    toggleSelection: (id: string) => void;
-    selectAll: () => void;
-    selectDown: () => void;
-    selectLeft: () => void;
-    selectRange: (id: string) => void;
-    selectRangeDown: () => void;
-    selectRangeLeft: () => void;
-    selectRangeRight: () => void;
-    selectRangeUp: () => void;
-    selectRight: () => void;
-    selectSingle: (id: string) => void;
-    selectSome: (ids: string[]) => void;
-    selectUp: () => void;
-    lastSelectedId: string | undefined;
-    selectedIds: import("./types").Selected;
-};

package/dist/utils/useGridSelection/utils.d.ts

@@ -1,103 +0,0 @@
-import { Selected, State } from './types';
-/**
- * Initializes grid selection state.
- *
- * @param cells list of cells
- * @returns initial state
- */
-export declare const getInitialState: (cells: string[]) => State;
-/**
- * Extends selection to a cell with provided id if it's not selected. Deselects that cell otherwise.
- *
- * @param selected set of selected cells
- * @param id cell id
- * @returns next set of selected cells
- */
-export declare const toggleSelection: (selected: Selected, id: string) => Set<string>;
-/**
- * Selects all provided cells.
- *
- * @param cells list of cells
- * @returns next set of selected cells
- */
-export declare const selectAll: (cells: string[]) => Selected;
-/**
- * Selects all cells within the provided range, edges included.
- *
- * @param cells list of cells
- * @param startId start id
- * @param endId end id
- * @returns next set of selected cells
- */
-export declare const selectRange: (cells: string[], startId: string, endId: string) => Selected;
-/**
- * Finds index of the first selected cell.
- *
- * @param selected set of selected cells
- * @param cells list of cells
- * @returns index of a found cell
- */
-export declare const findFirstSelectedIndex: (selected: Selected, cells: string[]) => number;
-/**
- * Finds index of the last selected cell.
- *
- * @param selected set of selected cells
- * @param cells list of cells
- * @returns index of a found cell
- */
-export declare const findLastSelectedIndex: (selected: Selected, cells: string[]) => number;
-/**
- * Gets index of a next cell after performing a provided step.
- *
- * @param cells list of cells
- * @param index starting index
- * @param step step to perform
- * @returns next index
- */
-export declare const getNextIndex: (cells: string[], index: number, step: number) => number;
-/**
- * Gets initial start index for a direction implied by the provided step.
- *
- * @param cells list of cells
- * @param step step to perform
- * @returns initial start index
- */
-export declare const getStartIndex: (cells: string[], step: number) => number;
-/**
- * Gets index of the starting cell.
- *
- * @param selected set of selected cells
- * @param cells list of cells
- * @param step step to perform
- * @returns cell index
- */
-export declare const getSelectedStartIndex: (selected: Selected, cells: string[], step: number) => number;
-/**
- * Gets id of the starting cell.
- *
- * @param selected set of selected cells
- * @param cells list of cells
- * @param step step to perform
- * @returns cell id
- */
-export declare const getInitIdByStep: (selected: Selected, cells: string[], step: number) => string;
-/**
- * Gets id of the cell by moving from currently selected cells by provided step.
- *
- * @param selected set of selected cells
- * @param cells list of cells
- * @param step step to perform
- * @returns cell id
- */
-export declare const getNextIdByStep: (selected: Selected, cells: string[], step: number) => string;
-/**
- * Gets id of the cell by moving from currently selected cells by provided step
- * and by respecting rules for selecting ranges of ids.
- *
- * @param selected set of selected cells
- * @param cells list of cells
- * @param step step to perform
- * @param rangeInitId starting id for the range
- * @returns cell id
- */
-export declare const getNextRangeIdByStep: (selected: Selected, cells: string[], step: number, rangeInitId: string) => string;

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

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

package/dist/utils/useIsMounted/useIsMounted.d.ts

@@ -1,9 +0,0 @@
-/**
- * Keeps info about mount state.
- *
- * This hook is useful when paired with async effects.
- * For instance, an effect might be in progress but its parent hook gets unmounted. In such case, it's advised to not update hook state.
- *
- * @returns callback that returns info about mount state
- */
-export declare const useIsMounted: () => () => boolean;

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

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

package/dist/utils/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.ts

@@ -1,2 +0,0 @@
-import { useEffect } from 'react';
-export declare const useIsomorphicLayoutEffect: typeof useEffect;

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

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

package/dist/utils/useItemsOverflow/useItemsOverflow.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { ItemsOverflowOptions } from './types';
-/**
- * Calculates number of items that are visible within a container.
- *
- * @param opts hook options
- * @returns items overflow state
- */
-export declare const useItemsOverflow: (opts: ItemsOverflowOptions) => {
-    init: boolean;
-    setContainer: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;
-    visibleItems: number;
-};

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

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

package/dist/utils/useResettableTimeout/useResettableTimeout.d.ts

@@ -1,14 +0,0 @@
-/**
- * Use this hook in order to invoke a callback once the specified time passes.
- *
- * The hook exposes actions for initializing and resetting the timeout.
- *
- * @param onTimeout callback invoked when time specified by `delay` passes
- * @param delay timeout (in ms)
- * @returns timeout actions
- */
-export declare const useResettableTimeout: (onTimeout: () => void, delay: number) => {
-    initTimeout: () => void;
-    removeTimeout: () => void;
-    resetTimeout: () => void;
-};

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

@@ -1,2 +0,0 @@
-export * from './types';
-export * from './useResize';

package/dist/utils/useResize/types.d.ts

@@ -1,20 +0,0 @@
-export interface Dimensions {
-    width: number;
-    height: number;
-    top: number;
-    left: number;
-}
-export interface ResizeOptions {
-    /**
-     * Resize direction.
-     */
-    dir?: 'SE' | 'SW';
-    /**
-     * Minimum resize width.
-     */
-    minWidth?: number;
-    /**
-     * Callback invoked when resizing is done.
-     */
-    onResizeEnd?: (dimensions: Dimensions) => void;
-}

package/dist/utils/useResize/useResize.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { ResizeOptions } from './types';
-/**
- * Manages element resize.
- *
- * @param opts resize options
- * @returns resize state and utils
- */
-export declare const useResize: (opts: ResizeOptions) => {
-    onMouseDown: React.MouseEventHandler<HTMLElement> | undefined;
-    setResizableEl: (el: HTMLElement | null) => void;
-    isResizing: boolean | undefined;
-};

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

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

package/dist/utils/useResponsiveSizes/useResponsiveSizes.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-/**
- * Provided with a list of breakpoints, chooses a breakpoint value that is greater than or equal container's width.
- * Additionally, it chooses another breakpoint by taking device's pixel ratio into account.
- *
- * Container's size changes are observed via `ResizeObserver`. Observer's callback invocation is throttled.
- *
- * @param breakpoints list of possible image widths
- * @param enabled toggles `ResizeObserver`
- * @returns state and ref setters
- */
-export declare const useResponsiveSizes: (breakpoints: number[], enabled?: boolean) => {
-    sizes: number | undefined;
-    setContainer: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
-    pixelAdjSizes: number;
-};

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

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

package/dist/utils/useScaleDown/scaleDown.d.ts

@@ -1,13 +0,0 @@
-/**
- * Mimicks behavior of `object-fit: scale-down`.
- *
- * @param width original image's width
- * @param height original image's height
- * @param containerWidth container's width
- * @param containerHeight container's height
- * @returns image's size
- */
-export declare const scaleDown: (width?: number, height?: number, containerWidth?: number, containerHeight?: number) => {
-    width: number;
-    height: number;
-};

package/dist/utils/useScaleDown/useScaleDown.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-/**
- * Listens to source element's size changes and sets target's width and height accordingly.
- *
- * This hook is useful if `object-fit: scale-down` CSS rule cannot be used,
- * e.g. if image's placeholder has different size than the original image
- * but the placeholder must be still scaled to fit the size of the original image.
- *
- * @param originalWidth original image's width
- * @param originalHeight original image's height
- * @returns ref setters
- */
-export declare const useScaleDown: (originalWidth?: number, originalHeight?: number, enabled?: boolean) => {
-    setSrcElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
-    setTargetElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
-};

package/dist/utils/useScroll/getScrollVectors.d.ts

@@ -1,11 +0,0 @@
-import { ScrollCoordsConfig, XYCoord } from './types';
-/**
- * Calculates scrolling vector based on initial client coords, current client coords, and scrolling options.
- *
- * @param container scrollable container
- * @param initOffset initial client offset (e.g. mouse coords)
- * @param currentOffset current client offset (e.g. mouse coords)
- * @param config config option
- * @returns scrolling vector
- */
-export declare const getScrollVectors: (container: HTMLElement, initOffset: XYCoord, currentOffset: XYCoord, config?: ScrollCoordsConfig) => number;

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

@@ -1,3 +0,0 @@
-export * from './getScrollVectors';
-export * from './types';
-export * from './useScroll';

package/dist/utils/useScroll/types.d.ts

@@ -1,49 +0,0 @@
-export interface XYCoord {
-    x: number;
-    y: number;
-}
-export interface ScrollCoordsConfig {
-    /**
-     * Specifies fraction of the container
-     * that will be used as upper and lower scroll bounds
-     * (scrolling can happen only within those bounds).
-     */
-    containerMargin?: number;
-    /**
-     * Represents a value by which scroll vector is multiplied.
-     * Adjust the value to fine tune scrolling speed.
-     */
-    speedCoef?: number;
-    /**
-     * Specifies the number of pixels that vertical mouse movement
-     * must exceed so that scroll can happen.
-     */
-    initThresh?: number;
-}
-export declare type OnScrollHandler = (vStart: {
-    startX: number;
-    startY: number;
-}, vCurrent: {
-    currentX: number;
-    currentY: number;
-}) => void;
-export interface ScrollOptions {
-    /**
-     * Triggering `mousedown` events on elements with the provided selector
-     * will not initialize scrolling.
-     */
-    ignoredSelector?: string;
-    /**
-     * Callback that is invoked in intervals if scrolling has been initialied.
-     * The callback is invoked for every `tick` of scrolling interval.
-     */
-    onScroll?: OnScrollHandler;
-    /**
-     * Callback invoked upon scroll end.
-     */
-    onScrollEnd?: () => void;
-    /**
-     * Callback invoked upon scroll start.
-     */
-    onScrollStart?: () => void;
-}

package/dist/utils/useScroll/useScroll.d.ts

@@ -1,16 +0,0 @@
-import { ScrollOptions } from './types';
-/**
- * Allows to scroll a container while performing actions within that container.
- *
- * Container scrolling is initiated by a `mousedown` event within that container.
- * Then, on `mousemove` the scrolling can be either accelerated or slowed down.
- *
- * Scrolling can happen only if mouse pointer is placed close to the upper or lower edge of the container.
- *
- * @param container scrollable container
- * @param opts scroll options
- * @returns scroll info
- */
-export declare const useScroll: (container?: HTMLElement | null, opts?: ScrollOptions) => {
-    isScrolling: boolean;
-};

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

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

package/dist/utils/useScrollDnd/useScrollDnd.d.ts

@@ -1,7 +0,0 @@
-/**
- * Allows to scroll a container while dragging an item.
- *
- * @param container scrollable container
- * @param type item type that will trigger scrolling
- */
-export declare const useScrollDnd: (container?: HTMLElement | null, type?: string) => void;

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

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

package/dist/utils/useToggle/useToggle.d.ts

@@ -1,12 +0,0 @@
-/**
- * A helper hook for a building a simple state machine. Useful for togglable popper-based components such as menus.
- *
- * @param initValue initial value
- * @returns toggle actions
- */
-export declare const useToggle: (initValue?: boolean) => {
-    value: boolean;
-    toggle: () => void;
-    on: () => void;
-    off: () => void;
-};

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

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

package/dist/utils/validators/validators.d.ts

@@ -1,60 +0,0 @@
-/**
- * Defines validators that can be used to check various user inputs.
- * They are intended to be used downstream to build validation rules for HTML forms.
- *
- * Validators must conform to the convention used by `react-hook-form`: They must return either `boolean` or an error message.
- * For more info see `validate` option: https://react-hook-form.com/api/useform/register
- */
-/**
- * Creates validation rule that checks if supplied `value` is non-empty.
- * Whitespaces are trimmed before the check.
- *
- * @param msg error message
- * @returns validator that returns `true` if check passes, error message otherwise
- */
-export declare const nonEmpty: (msg: string) => (value?: string) => string | true;
-/**
- * Creates validation rule that checks if supplied `value` is present in `allowedValues`.
- *
- * @param msg error message
- * @param allowedValues list of allowed values
- * @returns validator that returns `true` if check passes, error message otherwise
- */
-export declare const isAllowed: <T>(msg: string, allowedValues: T[]) => (value?: T | undefined) => string | true;
-/**
- * Creates validation rule that checks if supplied array has at least one item.
- *
- * @param msg error message
- * @returns validator that returns `true` if check passes, error message otherwise
- */
-export declare const nonEmptyArray: <T>(msg: string) => (value?: T[] | undefined) => string | true;
-/**
- * Creates validation rule that checks if supplied array does not exceed `max` items.
- *
- * @param msg error message
- * @returns validator that returns `true` if check passes, error message otherwise
- */
-export declare const maxItems: <T>(msg: string, max: number) => (value?: T[] | undefined) => string | true;
-/**
- * Creates validation rule that checks if supplied `value` is not already present within `existingValues`.
- *
- * @param msg error message
- * @param existingValues list of existing values
- * @returns validator that returns `true` if check passes, error message otherwise
- */
-export declare const unique: <T>(msg: string, existingValues: T[]) => (value?: T | undefined) => string | true;
-/**
- * Creates validation rule that checks if supplied value contains a dot.
- *
- * @param msg error message
- * @returns validator that returns `true` if check passes, error message otherwise
- */
-export declare const nonDotValue: (msg: string) => (values?: string[]) => string | true;
-/**
- * Creates validation rule that checks if string length in an array doesn't exceed max length.
- *
- * @param msg error message
- * @param maxLength maximum length of the string in the array
- * @returns validator that returns `true` if check passes, error message otherwise
- */
-export declare const maxLength: (msg: string, maxLength: number) => (values?: string[]) => string | true;

package/dist/view/View.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-declare const View: React.FC<Props>;
-interface Props {
-    /**
-     * Sets component's children.
-     */
-    children?: React.ReactNode;
-    /**
-     * Indicates whether view contains side content.
-     */
-    sideContent?: boolean;
-}
-export default View;