@peculiar/react-components 0.0.2-alpha.29 → 0.0.2-alpha.290

package/dist/types/Slider/slider.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+declare type BaseProps = {
+    className?: string;
+    /**
+     * The default element value. Use when the component is not controlled.
+     */
+    defaultValue?: number;
+    /**
+     * The value of the slider.
+     */
+    value?: number;
+    /**
+     * If `true`, the slider will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The maximum allowed value of the slider. Should not be equal to min.
+     */
+    max?: number;
+    /**
+     * The minimum allowed value of the slider. Should not be equal to max.
+     */
+    min?: number;
+    /**
+     * Name attribute of the hidden `input` element.
+     */
+    name?: string;
+    /**
+     * The granularity with which the slider can step through values
+     */
+    step?: number;
+    /**
+     * Callback function that is fired when the slider's value changed.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    'data-testid'?: string;
+};
+export declare type SliderProps = BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue'>;
+export declare const Slider: React.ForwardRefExoticComponent<BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "defaultValue"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/Switch/index.d.ts

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

package/dist/types/Switch/switch.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+declare type BaseProps = {
+    /**
+     * If `true`, the component is checked.
+     */
+    checked?: boolean;
+    /**
+     * If `true`, the component is checked by default.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Attributes applied to the input element.
+     */
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'>;
+    /**
+     * The content of the component.
+     */
+    className?: string;
+    /**
+     * If `true`, the Switch will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The `id` of the input element.
+     */
+    id?: string;
+    /**
+     * If `true`, the `input` element will be required.
+     */
+    required?: boolean;
+    /**
+     * Name attribute of the `input` element.
+     */
+    name?: string;
+    /**
+     * Callback fired when the state is changed.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    'data-testid'?: string;
+};
+export declare type SwitchProps = BaseProps & Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children' | 'htmlFor' | 'onChange'>;
+export declare const Switch: React.ForwardRefExoticComponent<BaseProps & Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "children" | "htmlFor" | "onChange"> & React.RefAttributes<HTMLLabelElement>>;
+export {};

package/dist/types/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { Tabs } from './tabs';
+export { Tab } from './tab';

package/dist/types/Tabs/tab.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+declare type BaseProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Unique identifier used to control which tab is selected.
+     */
+    id: string;
+    /**
+     * The className of the component.
+     */
+    className?: string;
+    /**
+     * If `true`, the tab will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The color of the component.
+     */
+    color?: ('black' | 'white');
+    /**
+     * The component used for the root node.
+     */
+    component?: React.ElementType;
+    /**
+     * Callback fired when the value changes.
+     */
+    onChange?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
+    'data-testid'?: string;
+};
+export declare type TabBaseProps = BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onChange'>;
+export declare const Tab: React.ForwardRefExoticComponent<BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "onClick"> & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/types/Tabs/tabs.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Tab, TabBaseProps } from './tab';
+declare type BaseProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactElement<TabBaseProps, typeof Tab>[];
+    /**
+     * The value of the currently selected `Tab`.
+     */
+    value: string;
+    /**
+     * The className of the component.
+     */
+    className?: string;
+    /**
+     * Callback fired when the value changes.
+     */
+    onChange?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
+};
+export declare const Tabs: React.ForwardRefExoticComponent<BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/TextField/index.d.ts

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

package/dist/types/TextField/text_field.d.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+declare type BaseProps = {
+    /**
+     * If `true`, the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The size of the input.
+     */
+    size?: ('small' | 'medium' | 'large');
+    /**
+     * The className of the component.
+     */
+    className?: string;
+    /**
+     * Attributes applied to the `input` element.
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: string;
+    /**
+     * The id of the `input` element.
+     */
+    id?: string;
+    /**
+     * The label of the input. It is only used for layout.
+     */
+    label?: string;
+    /**
+     * The value of the `input` element, required for a controlled component.
+     */
+    value?: string;
+    /**
+     * The short hint displayed in the `input` before the user enters a value.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the `input` element is required.
+     */
+    required?: boolean;
+    /**
+     * Name attribute of the `input` element.
+     */
+    name?: string;
+    /**
+     * Pass a ref to the `input` element.
+     */
+    inputRef?: React.ForwardedRef<HTMLInputElement>;
+    /**
+     * If `true`, the `input` element is focused during the first mount.
+     */
+    autoFocus?: boolean;
+    /**
+     * If `true`, the `input` will indicate an error.
+     */
+    error?: boolean;
+    errorText?: string;
+    /**
+     * It prevents the user from changing the value of
+     * the field (not from interacting with the field).
+     */
+    readOnly?: boolean;
+    /**
+     * Type of the `input` element.
+     */
+    type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
+    /**
+     * Callback fired when the value is changed.
+     */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    'data-testid'?: string;
+};
+export declare const TextField: React.ForwardRefExoticComponent<BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/TextareaField/index.d.ts

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

package/dist/types/TextareaField/textarea_field.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+declare type BaseProps = {
+    /**
+     * If `true`, the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The size of the input.
+     */
+    size?: ('small' | 'medium' | 'large');
+    /**
+     * The className of the component.
+     */
+    className?: string;
+    /**
+     * Attributes applied to the `input` element.
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLTextAreaElement>;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: string;
+    /**
+     * The id of the `input` element.
+     */
+    id?: string;
+    /**
+     * The label of the input. It is only used for layout.
+     */
+    label?: string;
+    /**
+     * Callback fired when the value is changed.
+     */
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+    /**
+     * The value of the `input` element, required for a controlled component.
+     */
+    value?: string;
+    /**
+     * The short hint displayed in the `input` before the user enters a value.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the `input` element is required.
+     */
+    required?: boolean;
+    /**
+     * Name attribute of the `input` element.
+     */
+    name?: string;
+    /**
+     * Pass a ref to the `input` element.
+     */
+    inputRef?: React.ForwardedRef<HTMLTextAreaElement>;
+    /**
+     * If `true`, the `input` element is focused during the first mount.
+     */
+    autoFocus?: boolean;
+    /**
+     * If `true`, the `input` will indicate an error.
+     */
+    error?: boolean;
+    errorText?: string;
+    /**
+     * It prevents the user from changing the value of
+     * the field (not from interacting with the field).
+     */
+    readOnly?: boolean;
+    'data-testid'?: string;
+};
+export declare const TextareaField: React.ForwardRefExoticComponent<BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/Toast/index.d.ts

@@ -0,0 +1,3 @@
+export { ToastProvider } from './toast_provider';
+export { useToast } from './use_toast';
+export { BaseToastType, ToastType } from './toast_context';

package/dist/types/Toast/toast.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { AlertProps } from '../Alert';
+declare type BaseProps = {
+    /**
+     * The `id` of the toast. Mostly used when you need to prevent duplicate.
+     */
+    id: string;
+    /**
+     * Callback fired when the component requests to be closed.
+     */
+    onClose: (id: string) => void;
+    /**
+     * The delay before the toast hides (in milliseconds). If set to `null`, toast will never dismiss.
+     */
+    duration?: number | null;
+    /**
+     * If `true`, toast will show a close button.
+     */
+    isClosable?: boolean;
+    /**
+     * Props applied to the `Alert` element.
+     */
+    alertProps?: Omit<AlertProps, 'children' | 'onClose'>;
+};
+export declare const Toast: React.FC<BaseProps>;
+export {};

package/dist/types/Toast/toast_container.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+declare type BaseProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+};
+export declare type ToastContainerProps = BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
+export declare const ToastContainer: React.FC<ToastContainerProps>;
+export {};

package/dist/types/Toast/toast_context.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { AlertProps } from '../Alert';
+export declare type BaseToastType = {
+    /**
+     * The message of the toast.
+     */
+    message: string;
+    /**
+     * The status of the toast.
+     */
+    variant?: AlertProps['variant'];
+    /**
+     * If `true`, the toast start icon will be hidden.
+     */
+    disableIcon?: boolean;
+    /**
+     * If `true`, toast will show a close button.
+     */
+    isClosable?: boolean;
+    /**
+     * The delay before the toast hides (in milliseconds).
+     * If set to `null`, toast will never dismiss.
+     */
+    duration?: number | null;
+    /**
+     * The `id` of the toast. Mostly used when you need to prevent duplicate.
+     * By default, we generate a unique `id` for each toast.
+     */
+    id?: string;
+};
+export declare type ToastType = BaseToastType & {
+    createdAt: number;
+};
+export declare type ToastContextType = {
+    addToast: (options: BaseToastType) => void;
+    removeToast: (id: string) => void;
+    removeAllToasts: () => void;
+};
+export declare const ToastContext: React.Context<ToastContextType>;

package/dist/types/Toast/toast_provider.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { ToastContainerProps } from './toast_container';
+declare type BaseProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Maximum snackbars that can be stacked on bottom of one another.
+     */
+    maxToasts?: number;
+    /**
+     * Props applied to the `ToastContainer` element.
+     */
+    toastContainerProps?: Omit<ToastContainerProps, 'children'>;
+};
+export declare const ToastProvider: React.FC<BaseProps>;
+export {};

package/dist/types/Toast/use_toast.d.ts

@@ -0,0 +1,2 @@
+import { ToastContextType } from './toast_context';
+export declare const useToast: () => ToastContextType;

package/dist/types/Tooltip/index.d.ts

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

package/dist/types/Tooltip/tooltip.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Placement } from '@popperjs/core';
+declare type BaseProps = {
+    /**
+     * Tooltip reference element.
+     */
+    children: React.ReactElement;
+    /**
+     * Tooltip title.
+     */
+    title: React.ReactNode;
+    /**
+     * Tooltip placement.
+     */
+    placement?: Placement;
+    /**
+     * The className of the component.
+     */
+    className?: string;
+    /**
+     * Do not respond to focus events.
+     */
+    disableFocusListener?: boolean;
+    /**
+     * Do not respond to hover events.
+     */
+    disableHoverListener?: boolean;
+    /**
+     * Do not respond to long press touch events.
+     */
+    disableTouchListener?: boolean;
+    /**
+     * Makes a tooltip interactive, i.e. will not close when the user hovers over the tooltip.
+     */
+    interactive?: boolean;
+    /**
+     * The size of the tooltip.
+     */
+    size?: ('small' | 'large');
+    /**
+     * The color of the tooltip.
+     */
+    color?: ('black' | 'white');
+    /**
+     * Disable the portal behavior. The children stay within it's parent DOM hierarchy.
+     */
+    disablePortal?: boolean;
+};
+declare type TooltipProps = BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'children'>;
+export declare const Tooltip: React.FC<TooltipProps>;
+export {};

package/dist/types/Typography/index.d.ts

@@ -0,0 +1 @@
+export { Typography, TypographyBaseProps, TypographyProps } from './typography';

package/dist/types/Typography/typography.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { ColorType, TypographyType } from '../styles';
+export declare type TypographyBaseProps = {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * The variant to use.
+     */
+    variant?: TypographyType;
+    /**
+     * The color of the component.
+     */
+    color?: ColorType | 'inherit';
+    /**
+     * The className of the component.
+     */
+    className?: string;
+    /**
+     * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
+     * Note that text overflow can only happen with block or inline-block level elements
+     * (the element needs to have a width in order to overflow).
+     */
+    noWrap?: boolean;
+    /**
+     * The component used for the root node.
+     */
+    component?: React.ElementType;
+    'data-testid'?: string;
+};
+export declare type TypographyProps = TypographyBaseProps & React.HTMLAttributes<HTMLElement>;
+export declare const Typography: React.ForwardRefExoticComponent<TypographyBaseProps & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;

package/dist/types/hooks/index.d.ts

@@ -0,0 +1,9 @@
+export { useMediaQuery } from './use_media_query';
+export { useMergedRef } from './use_merged_ref';
+export { useClipboard, UseClipboardOptions } from './use_clipboard';
+export { useControllableState, UseControllableStateProps } from './use_controllable';
+export { useId } from './use_id';
+export { useImage } from './use_image';
+export { useWindowEventListener } from './use_window_event_listener';
+export { useAutocomplete, UseAutocompleteProps, UseAutocompleteReturnType, AutocompleteValue, AutocompleteGroupedOption, AutocompleteChangeReason, AutocompleteChangeDetails, } from './use_autocomplete';
+export { useEventCallback } from './use_event_callback';

package/dist/types/hooks/use_autocomplete.d.ts

@@ -0,0 +1,97 @@
+import React from 'react';
+import type { PopoverProps } from '../Popover';
+/**
+ * Types.
+ */
+export declare type AutocompleteHighlightChangeReason = ('auto' | 'mouse' | 'keyboard');
+export declare type AutocompleteHighlightChangeDirectionType = ('next' | 'previous');
+export declare type AutocompleteHighlightChangeDiffType = (number | 'reset' | 'start' | 'end');
+export declare type AutocompleteChangeReason = ('selectOption' | 'removeOption');
+export interface AutocompleteChangeDetails<T = string> {
+    option: T;
+    index: number;
+}
+export declare type AutocompleteFilterOptionsType<T> = (options: ReadonlyArray<T>, inputValue: string, getOptionLabel: (option: T) => string) => ReadonlyArray<T>;
+export declare type AutocompleteValue<T, Multiple> = Multiple extends undefined | false ? T | null : T[];
+export declare type AutocompleteGroupedOption<T> = {
+    key: number;
+    index: number;
+    group: string;
+    options: T[];
+};
+export declare type UseAutocompleteProps<T, Multiple extends boolean | undefined = undefined> = {
+    /**
+     * This prop is used to help implement the accessibility logic.
+     * If you don't provide an id it will fall back to a randomly generated one.
+     */
+    id?: string;
+    /**
+     * Array of options.
+     */
+    options: ReadonlyArray<T>;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: AutocompleteValue<T, Multiple>;
+    /**
+     * The value of the select.
+     */
+    value?: AutocompleteValue<T, Multiple>;
+    /**
+     * If `true`, the popup won't close when a value is selected.
+     */
+    disableCloseOnSelect?: boolean;
+    /**
+     * If `true`, `value` must be an array and the menu will support multiple selections.
+     */
+    multiple?: Multiple;
+    /**
+     * If provided, the options will be grouped under the returned string.
+     */
+    groupBy?: (option: T) => string;
+    /**
+     * Used to determine the string value for a given option. It's used to fill the input.
+     */
+    getOptionLabel?: (option: T) => string;
+    /**
+    * A filter function that determines the options that are eligible.
+    */
+    filterOptions?: AutocompleteFilterOptionsType<T>;
+    /**
+     * Callback fired when the popup requests to be closed.
+     */
+    onClose?: (event: React.SyntheticEvent) => void;
+    /**
+     * Callback fired when the popup requests to be opened.
+     */
+    onOpen?: (event: React.SyntheticEvent) => void;
+    /**
+     * Callback fired when the value changes.
+     */
+    onChange?: (event: React.SyntheticEvent, value: AutocompleteValue<T, Multiple>, details: AutocompleteChangeDetails<T>, reason: AutocompleteChangeReason) => void;
+    /**
+     * Callback fired when the input value changes.
+     */
+    onInputChange?: (event: React.SyntheticEvent, value: string) => void;
+};
+export declare type UseAutocompleteReturnType<T, Multiple extends boolean | undefined = undefined> = {
+    groupedOptions: ReadonlyArray<T> | ReadonlyArray<AutocompleteGroupedOption<T>>;
+    value: AutocompleteValue<T, Multiple>;
+    searchValue: string;
+    popupOpen: boolean;
+    id: string;
+    getOptionProps: (option: T, index: number) => React.HTMLAttributes<HTMLLIElement>;
+    getListboxProps: () => React.HTMLAttributes<HTMLUListElement>;
+    getRootProps: () => React.HTMLAttributes<HTMLDivElement>;
+    getInputProps: () => React.HTMLAttributes<HTMLInputElement>;
+    getClearProps: () => React.HTMLAttributes<HTMLDivElement>;
+    getPopoverProps: () => Pick<Required<PopoverProps>, 'open' | 'anchorEl' | 'onClose' | 'onKeyDown'>;
+    getTagProps: (option: T, index: number) => {
+        key: number;
+        'data-tag-index': number;
+        tabIndex: -1;
+        onDelete: (event: React.SyntheticEvent) => void;
+    };
+    getOptionLabel: (option: T) => string;
+};
+export declare function useAutocomplete<T, Multiple extends boolean | undefined = undefined>(props: UseAutocompleteProps<T, Multiple>): UseAutocompleteReturnType<T, Multiple>;

package/dist/types/hooks/use_clipboard.d.ts

@@ -0,0 +1,26 @@
+export declare type UseClipboardOptions = {
+    /**
+     * timeout delay (in ms) to switch back to initial state once copied.
+     */
+    timeout?: number;
+    /**
+     * Set the desired MIME type
+     */
+    format?: string;
+};
+/**
+ * React hook to copy content to clipboard
+ *
+ * @param text the text or value to copy
+ * @param {Number} [optionsOrTimeout=1500] optionsOrTimeout -
+ * delay (in ms) to switch back to initial state once copied.
+ * @param {Object} optionsOrTimeout
+ * @param {string} optionsOrTimeout.format - set the desired MIME type
+ * @param {number} optionsOrTimeout.timeout -
+ * delay (in ms) to switch back to initial state once copied.
+ */
+export declare function useClipboard(text: string, optionsOrTimeout?: number | UseClipboardOptions): {
+    value: string;
+    onCopy: () => void;
+    hasCopied: boolean;
+};

package/dist/types/hooks/use_controllable.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export declare type UseControllableStateProps<T> = {
+    /**
+     * The value to used in controlled mode
+     */
+    value?: T;
+    /**
+     * The initial value to be used, in uncontrolled mode
+     */
+    defaultValue?: T | (() => T);
+    /**
+     * The callback fired when the value changes
+     */
+    onChange?: (value: T) => void;
+    /**
+     * The function that determines if the state should be updated
+     */
+    shouldUpdate?: (prev: T, next: T) => boolean;
+};
+/**
+ * React hook for using controlling component state.
+ * @param props
+ */
+export declare function useControllableState<T>(props: UseControllableStateProps<T>): [T, import("react").Dispatch<import("react").SetStateAction<T>>];

package/dist/types/hooks/use_event_callback.d.ts

@@ -0,0 +1,4 @@
+/**
+ * https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ */
+export declare function useEventCallback<Args extends unknown[], Return>(fn: (...args: Args) => Return): (...args: Args) => Return;