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

package/dist/tabs/tab/Tab.d.ts

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

package/dist/tabs/tab/index.d.ts

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

package/dist/tag/Tag.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+declare const Tag: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export interface Props {
+    /**
+     * Sets component's children.
+     */
+    children?: React.ReactNode;
+    /**
+     * Disables focusability of any focusable element.
+     */
+    disableFocusability?: boolean;
+    /**
+     * Callback invoked upon clicking on remove icon.
+     */
+    onRemove?: React.MouseEventHandler;
+    /**
+     * Sets tag radius.
+     */
+    radius?: 'md' | 'lg' | 'xl';
+    /**
+     * Sets tag as removable.
+     */
+    removable?: boolean;
+    /**
+     * Label associated with remove button.
+     */
+    removeLabel?: string;
+}
+export default Tag;

package/dist/tag/index.d.ts

@@ -0,0 +1,3 @@
+export { default as TagList } from './list';
+export { default as TagLabel } from './label';
+export { default } from './Tag';

package/dist/tag/label/TagLabel.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+declare const TagLabel: React.FC<Props>;
+interface Props {
+    /**
+     * Emphasizes tag content.
+     */
+    bold?: boolean;
+    /**
+     * Sets component's children.
+     */
+    children: React.ReactNode;
+}
+export default TagLabel;

package/dist/tag/label/index.d.ts

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

package/dist/tag/list/TagList.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+declare const TagList: React.FC<Props>;
+export interface Props {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Optional root class name.
+     */
+    className?: string;
+    /**
+     * Indicates whether tag list should hide overflown items.
+     */
+    itemOverflow?: boolean;
+}
+export default TagList;

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

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

package/dist/tagInput/TagInput.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+declare const TagInput: React.FC<Props>;
+export interface Props {
+    /**
+     * Input's class name.
+     */
+    className?: string;
+    /**
+     * Label displayed in the popup when hovering over copy button.
+     */
+    copyBtnLabel?: string;
+    /**
+     * Label displayed in the popup upon clicking on the copy button.
+     */
+    copyBtnLabelCopied?: string;
+    /**
+     * Input field id.
+     */
+    id: string;
+    /**
+     * Callback invoked when component gains focus.
+     */
+    onFocus?: () => void;
+    /**
+     * Callback invoked when component loses focus.
+     */
+    onBlur?: () => void;
+    /**
+     * Callback invoked when tags change.
+     */
+    onChange: (tags: string[]) => void;
+    /**
+     * Input placeholder.
+     */
+    placeholder?: string;
+    /**
+     * Indicate error in input element.
+     */
+    error?: boolean;
+    /**
+     * List of tags to render.
+     */
+    tags: {
+        label: string;
+        bold?: boolean;
+        removeLabel?: string;
+        title?: string;
+    }[];
+}
+export default TagInput;

package/dist/tagInput/index.d.ts

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

package/dist/tooltip/Tooltip.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { PopperPlacement } from '../popper';
+declare const Tooltip: React.FC<Props>;
+export interface Props {
+    /**
+     * Main content of the component.
+     * It must be a single child that accepts `ref`.
+     */
+    children: React.ReactNode;
+    /**
+     * Delay before displaying the tooltip.
+     */
+    delay?: number;
+    /**
+     * Tooltip placement.
+     */
+    placement?: PopperPlacement;
+    /**
+     * Tooltip helper text.
+     */
+    title: string;
+}
+export default Tooltip;

package/dist/tooltip/icon/TooltipIcon.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { IconName } from '../../icon';
+import { PopperPlacement } from '../../popper';
+declare const TooltipIcon: React.FC<Props>;
+export interface Props {
+    /**
+     * Icon to display.
+     */
+    iconName: IconName;
+    /**
+     * Delay before displaying the tooltip.
+     */
+    delay?: number;
+    /**
+     * Tooltip placement.
+     */
+    placement?: PopperPlacement;
+    /**
+     * Tooltip helper text.
+     */
+    title: string;
+}
+export default TooltipIcon;

package/dist/tooltip/icon/index.d.ts

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

package/dist/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TooltipIcon } from './icon';
+export { default } from './Tooltip';

package/dist/topbar/Topbar.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+declare const Topbar: React.FC<Props>;
+interface Props {
+    /**
+     * Main content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Content rendered on the right side of the bar.
+     */
+    sideContent: React.ReactNode;
+}
+export default Topbar;

package/dist/topbar/action/TopbarAction.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { IconName, IconSize } from '../../icon';
+/**
+ * `TopbarAction` component acts as a props carrier only.
+ */
+declare const TopbarAction: React.FC<Props>;
+export interface Props {
+    /**
+     * Applies active styling.
+     */
+    active?: boolean;
+    /**
+     * Associated icon.
+     */
+    icon: IconName;
+    /**
+     * Icon size.
+     */
+    iconSize?: IconSize;
+    /**
+     * Action label.
+     */
+    label: string;
+    /**
+     * Indicates if loading is in progress.
+     */
+    loading?: boolean;
+    /**
+     * Displays as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Action invoked upon click.
+     */
+    onClick?: () => void;
+    /**
+     * Download action URL.
+     */
+    downloadUrl?: string;
+}
+export default TopbarAction;

package/dist/topbar/action/index.d.ts

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

package/dist/topbar/actions/TopbarActions.d.ts

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

package/dist/topbar/actions/TopbarActionsMenuItems.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Props as TopbarActionProps } from '../action';
+declare const TopbarActionsMenuItems: React.FC<Props>;
+export interface Props {
+    items: TopbarActionProps[];
+    visibleItems: number;
+}
+export default TopbarActionsMenuItems;

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

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

package/dist/topbar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TopbarAction } from './action';
+export { default } from './Topbar';

package/dist/uiProvider/UIProvider.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { ViewDialogProps } from '../viewDialog';
+declare const UIProvider: React.FC<Props>;
+export interface Props {
+    /**
+     * Main content.
+     */
+    children: React.ReactNode;
+    /**
+     * Initial navbar mode.
+     */
+    navbarCollapsed?: boolean;
+    /**
+     * Initial navbar width.
+     */
+    navbarWidth?: number;
+    /**
+     * Callback invoked whenever navbar mode changes.
+     */
+    onNavbarCollapse?: (collapsed: boolean) => void;
+    /**
+     * Callback invoked whenever navbar resize ends.
+     */
+    onNavbarWidthChange?: (width: number) => void;
+    /**
+     * Dialog mode options.
+     */
+    dialog?: Omit<ViewDialogProps, 'children'>;
+    /**
+     * Name of selected theme.
+     */
+    theme?: string;
+    /**
+     * Aria label to set on root element.
+     */
+    label?: string;
+}
+export default UIProvider;

package/dist/uiProvider/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const CONTAINER_QUERY_BREAKPOINTS: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};

package/dist/uiProvider/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useUIContext';
+export { Props as UIProviderProps } from './UIProvider';
+export { default } from './UIProvider';

package/dist/uiProvider/useUIContext.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+export interface UIContext {
+    /**
+     * Represents UI's root element.
+     */
+    rootEl: HTMLDivElement | null;
+    /**
+     * Holds info about animation duration (in ms).
+     *
+     * Note that these values are extracted from CSS variables.
+     * Therefore, CSS variables act here as the single source of truth.
+     */
+    animationDuration: {
+        primary: number;
+        secondary: number;
+    };
+    /**
+     * Indicates if navbar should be collapsed.
+     */
+    navbarCollapsed?: boolean;
+    /**
+     * Initial navbar width.
+     */
+    navbarWidth?: number;
+    /**
+     * Callback invoked whenever navbar is collapsed.
+     */
+    onNavbarCollapse: (collapsed: boolean) => void;
+    /**
+     * Callback invoked whenever navbar width changes.
+     */
+    onNavbarWidthChange: (width: number) => void;
+}
+/**
+ * Defines React context for i18n and sets defaults.
+ */
+export declare const UIContext: React.Context<UIContext>;
+export declare const useUIContext: () => UIContext;

package/dist/utils/base64FromBlurHash/base64FromBlurHash.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Generates base64-encoded image from its `blurhash` representation.
+ *
+ * @param hash blurhash representation of an image
+ * @returns base64-encoded image
+ */
+export declare const base64FromBlurHash: (hash?: string) => string;

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

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

package/dist/utils/clamp/clamp.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Given preferred value and optional edge values,
+ * chooses the one that is most suitable:
+ *
+ * - min value if preferred value is below min
+ * - max value if preferred value is above max
+ * - preferred value otherwise
+ *
+ * @param val preferred value
+ * @param min optional minimum value
+ * @param max optional maximum value
+ * @returns chosen value
+ */
+export declare const clamp: (val: number, min?: number, max?: number) => number;

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

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

package/dist/utils/clipboard/clipboard.d.ts

@@ -0,0 +1 @@
+export declare const copyToClipboard: (text: string) => Promise<void>;

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

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

package/dist/utils/clsx/clsx.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Filters off falsey values and concatenates list of classes.
+ *
+ * @param classes list of classes / falsey values
+ * @returns classes
+ */
+export declare const clsx: (...classes: (string | undefined | null | number | boolean)[]) => string;

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

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

package/dist/utils/events/events.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Values representing mouse button.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+ */
+export declare enum MouseEventButton {
+    Main = 0,
+    Auxiliary = 1,
+    Secondary = 2,
+    Fourth = 3,
+    Fifth = 4
+}

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

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

package/dist/utils/formatTimeDistance/formatTimeDistance.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Unit multipliers (in s).
+ */
+export declare const m = 60;
+export declare const h: number;
+/**
+ * Given time distance in s, formats it by rounding to nearest time unit in accordance with predefined buckets.
+ *
+ * @param t time left (in s)
+ */
+export declare const formatTimeDistance: (t: number) => {
+    h: number;
+    m: number;
+    s: number;
+};

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

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

package/dist/utils/getPixelCountFromImageBlob/getPixelCountFromImageBlob.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Retrieves amount of pixels in a blob if it's an image.
+ * If given blob is an invalid image, returns undefined.
+ *
+ * @param data blob data to measure
+ * @returns amount of pixels
+ */
+export declare const getPixelCountFromImageBlob: (data: Blob) => Promise<number | undefined>;

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

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

package/dist/utils/getStandardDeviation/getStandardDeviation.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Calculates standard deviation based on provided list of numbers.
+ *
+ * @param array list of numbers
+ * @returns standard deviation
+ */
+export declare const getStandardDeviation: (array: number[]) => number | undefined;

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

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

package/dist/utils/getValidChildren/getValidChildren.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const getValidChildren: <ChildProps>(children: React.ReactNode) => React.ReactElement<ChildProps, string | React.JSXElementConstructor<any>>[];

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

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

package/dist/utils/hasOwnProperty/hasOwnProperty.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Shorthand for recommended use of hasOwnProperty (see https://eslint.org/docs/rules/no-prototype-builtins).
+ *
+ * @param object checked object
+ * @param propertyKey property key to check
+ */
+export declare const hasOwnProperty: (object: Record<string, unknown>, propertyKey: string) => boolean;

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

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

package/dist/utils/index.d.ts

@@ -0,0 +1,34 @@
+export * from './base64FromBlurHash';
+export * from './clamp';
+export * from './clipboard';
+export * from './clsx';
+export * from './events';
+export * from './formatTimeDistance';
+export * from './getPixelCountFromImageBlob';
+export * from './getStandardDeviation';
+export * from './getValidChildren';
+export * from './hasOwnProperty';
+export * from './keyboard';
+export * from './noOp';
+export * from './rInterval';
+export * from './useBatchUpdate';
+export * from './useClickAway';
+export * from './useClipboard';
+export * from './useDeferredUnmount';
+export * from './useDelay';
+export * from './useDraggable';
+export * from './useIsMounted';
+export * from './useIsomorphicLayoutEffect';
+export * from './useItemsOverflow';
+export * from './useResettableTimeout';
+export * from './useResponsiveSizes';
+export * from './useElementVisibility';
+export * from './useFilesDrop';
+export * from './useGridSelection';
+export * from './useResize';
+export * from './useToggle';
+export * from './useScaleDown';
+export * from './useScroll';
+export * from './useScrollDnd';
+export * from './useDownload';
+export * from './validators';

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

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

package/dist/utils/keyboard/keyboard.d.ts

@@ -0,0 +1,17 @@
+import { KeyCombination, KeyEventLike, KeyProps } from './types';
+/**
+ * Checks if event matches a single key combination.
+ *
+ * @param evt keyboard event
+ * @param currentValue event key or code value
+ * @param combination key combination
+ * @returns flag indicating if combination is matched
+ */
+export declare const matchesCombination: (evt: KeyEventLike, currentValue: string, { value, mod }: KeyCombination) => boolean;
+/**
+ * Creates `keydown` event listener for configured key combination(s).
+ *
+ * @param props key props
+ * @returns event listener
+ */
+export declare const getKeyHandler: (props: KeyProps[] | KeyProps) => (evt: KeyEventLike) => void;

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

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

package/dist/utils/noOp/noOp.d.ts

@@ -0,0 +1 @@
+export declare const noOp: () => void;

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

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

package/dist/utils/rInterval/rInterval.d.ts

@@ -0,0 +1,10 @@
+import { RInterval } from './types';
+/**
+ * Allows to use `requestAnimationFrame` in a manner similar to `setInterval`.
+ * It should be used for animations instead of `setTimeout` and `setInterval`.
+ *
+ * @param callback callback invoked within a fram
+ * @param delay optional callback invocation delay
+ * @returns interval utils
+ */
+export declare const rInterval: (callback: () => void, delay?: number) => RInterval;

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

@@ -0,0 +1,3 @@
+export interface RInterval {
+    clear: () => void;
+}

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

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

package/dist/utils/useBatchUpdate/useBatchUpdate.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { BatchUpdateBatch, BatchUpdatePayload } from './types';
+/**
+ * Batches updates and releases them in specified intervals.
+ * Accumulates total number of updates that happened within a batch.
+ *
+ * This hook is useful for grouping high frequency updates into a single batch,
+ * so that downstream updates do not happen too often.
+ *
+ * @param updateCb callback that receives current batch in specified intervals
+ * @param batchUpdateInterval instructs how often batch is released
+ * @returns actions and batch
+ */
+export declare const useBatchUpdate: <Payload extends BatchUpdatePayload>(updateCb: (batch: BatchUpdateBatch<Payload>) => void, batchUpdateInterval: number) => {
+    batch: React.MutableRefObject<BatchUpdateBatch<Payload>>;
+    pushUpdate: (payload: Payload) => void;
+};

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

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

package/dist/utils/useClickAway/useClickAway.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Hook that allows to detect click events within app root but outside specified element.
+ *
+ * @param container outer container
+ * @param el element outside which clicks should be detected
+ * @param ignoredEl optional element to ignore
+ * @param onClick callback invoked if click outside registered elements was detected
+ * @returns action for registering elements
+ */
+export declare const useClickAway: (container?: HTMLElement | null, el?: HTMLElement | null, ignoredEl?: HTMLElement | null, onClick?: () => void) => void;

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

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

package/dist/utils/useClipboard/useClipboard.d.ts

@@ -0,0 +1,4 @@
+export declare const useClipboard: () => {
+    copied: boolean;
+    onCopy: (txtContent: string) => Promise<void>;
+};