@shlinkio/shlink-frontend-kit 1.4.0 → 1.5.0

package/dist/feedback/Tooltip.stories.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    component: import('react').FC<import('./Tooltip').TooltipProps>;
+    tags: string[];
+};
+export default _default;
+export declare const AutoTooltip: () => import("react").JSX.Element;
+export declare const BottomTooltip: () => import("react").JSX.Element;
+export declare const TopTooltip: () => import("react").JSX.Element;
+export declare const LeftTooltip: () => import("react").JSX.Element;
+export declare const RightTooltip: () => import("react").JSX.Element;

package/dist/feedback/index.d.ts

@@ -0,0 +1,5 @@
+export * from './CardModal';
+export * from './Message';
+export * from './ModalDialog';
+export * from './Result';
+export * from './Tooltip';

package/dist/form/BooleanControl.d.ts

@@ -0,0 +1,6 @@
+import { ChangeEvent, FC, HTMLProps, Ref } from 'react';
+export type BooleanControlProps = Omit<HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'value' | 'defaultValue'> & {
+    onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
+    ref?: Ref<HTMLInputElement>;
+};
+export declare const BooleanControl: FC<BooleanControlProps>;

package/dist/form/Button.d.ts

@@ -0,0 +1,17 @@
+import { FC, HTMLProps, PropsWithChildren, Ref } from 'react';
+import { LinkProps } from 'react-router';
+import { Size } from '../types';
+type RegularButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>;
+type LinkButtonProps = LinkProps;
+export type ButtonProps = PropsWithChildren<{
+    disabled?: boolean;
+    className?: string;
+    variant?: 'primary' | 'secondary' | 'danger';
+    type?: HTMLButtonElement['type'];
+    size?: Size;
+    inline?: boolean;
+    solid?: boolean;
+    ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
+} & (RegularButtonProps | LinkButtonProps)>;
+export declare const Button: FC<ButtonProps>;
+export {};

package/dist/form/Button.stories.d.ts

@@ -0,0 +1,26 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./Button').ButtonProps>;
+    tags: string[];
+    argTypes: {
+        variant: {
+            options: string[];
+        };
+        type: {
+            options: string[];
+        };
+        size: import('storybook/internal/csf').InputType;
+        disabled: import('storybook/internal/csf').InputType;
+        inline: import('storybook/internal/csf').InputType;
+        solid: import('storybook/internal/csf').InputType;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Main: Story;
+export declare const Secondary: Story;
+export declare const Danger: Story;
+export declare const Sizes: () => import("react").JSX.Element;
+export declare const Solid: () => import("react").JSX.Element;
+export declare const Disabled: () => import("react").JSX.Element;
+export declare const AsLink: Story;

package/dist/form/Checkbox.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { BooleanControlProps } from './BooleanControl';
+export type CheckboxProps = BooleanControlProps;
+export declare const Checkbox: FC<CheckboxProps>;

package/dist/form/Checkbox.stories.d.ts

@@ -0,0 +1,9 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./BooleanControl').BooleanControlProps>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const InCard: Story;

package/dist/form/CloseButton.d.ts

@@ -0,0 +1,11 @@
+import { FC, HTMLProps, Ref } from 'react';
+import { Size } from '../types';
+export type CloseButtonProps = {
+    label?: string;
+    onClick?: HTMLProps<HTMLButtonElement>['onClick'];
+    className?: string;
+    size?: Size;
+    solid?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+};
+export declare const CloseButton: FC<CloseButtonProps>;

package/dist/form/CloseButton.stories.d.ts

@@ -0,0 +1,12 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./CloseButton').CloseButtonProps>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const Solid: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const CustomAccessibleLabel: Story;

package/dist/form/FormControlWithFeedback.d.ts

@@ -0,0 +1,12 @@
+import { FC, PropsWithChildren, ReactNode } from 'react';
+export type FormControlWithFeedbackProps = PropsWithChildren<{
+    /** An error message to display under the input. Will cause the input to be set with `error` feedback. */
+    error?: ReactNode;
+    /** Informative help to be display under the input */
+    helpText?: ReactNode;
+    'data-testid'?: string;
+}>;
+/**
+ * This component should not be exported from the module. It's designed to reuse as a helper wrapper
+ */
+export declare const FormControlWithFeedback: FC<FormControlWithFeedbackProps>;

package/dist/form/Input.d.ts

@@ -0,0 +1,16 @@
+import { FC, InputHTMLAttributes, Ref } from 'react';
+import { Size } from '../types';
+export type BaseInputProps = {
+    size?: Size;
+    feedback?: 'error';
+    /**
+     * Whether the input should have an opinionated style or not. Defaults to 'default'.
+     * An unstyled input can be useful to wrap or customize.
+     */
+    variant?: 'default' | 'unstyled';
+};
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'checked' | 'defaultChecked'> & BaseInputProps & {
+    borderless?: boolean;
+    ref?: Ref<HTMLInputElement>;
+};
+export declare const Input: FC<InputProps>;

package/dist/form/Input.stories.d.ts

@@ -0,0 +1,20 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./Input').InputProps>;
+    tags: string[];
+    argTypes: {
+        feedback: {
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Regular: Story;
+export declare const Error: Story;
+export declare const Disabled: Story;
+export declare const Readonly: Story;
+export declare const Unstyled: Story;
+export declare const Number: Story;
+export declare const Password: Story;
+export declare const InCard: Story;

package/dist/form/Label.d.ts

@@ -0,0 +1,5 @@
+import { FC, HTMLProps } from 'react';
+export type LabelProps = HTMLProps<HTMLLabelElement> & {
+    required?: boolean;
+};
+export declare const Label: FC<LabelProps>;

package/dist/form/Label.stories.d.ts

@@ -0,0 +1,9 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./Label').LabelProps>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Regular: Story;
+export declare const Required: Story;

package/dist/form/LabelledInput.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { RequiredReactNode } from '../types';
+import { FormControlWithFeedbackProps } from './FormControlWithFeedback';
+import { InputProps } from './Input';
+export type LabelledInputProps = Omit<InputProps, 'className' | 'id' | 'feedback'> & FormControlWithFeedbackProps & {
+    label: RequiredReactNode;
+    inputClassName?: string;
+    /** Alternative to `required`. Causes the input to be required, without displaying an asterisk */
+    hiddenRequired?: boolean;
+};
+/**
+ * An input with a label linked to it
+ */
+export declare const LabelledInput: FC<LabelledInputProps>;

package/dist/form/LabelledInput.stories.d.ts

@@ -0,0 +1,12 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./LabelledInput').LabelledInputProps>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Regular: Story;
+export declare const Required: Story;
+export declare const HiddenRequired: Story;
+export declare const WithHelpText: Story;
+export declare const Error: Story;

package/dist/form/LabelledRevealablePasswordInput.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { RequiredReactNode } from '../types';
+import { FormControlWithFeedbackProps } from './FormControlWithFeedback';
+import { RevealablePasswordInputProps } from './RevealablePasswordInput';
+export type LabelledRevealablePasswordInputProps = Omit<RevealablePasswordInputProps, 'className' | 'id' | 'feedback'> & FormControlWithFeedbackProps & {
+    label: RequiredReactNode;
+    inputClassName?: string;
+    /** Alternative to `required`. Causes the input to be required, without displaying an asterisk */
+    hiddenRequired?: boolean;
+};
+/**
+ * Same as the `LabelledInput`, but wrapping a `RevealablePasswordInput` instead
+ */
+export declare const LabelledRevealablePasswordInput: FC<LabelledRevealablePasswordInputProps>;

package/dist/form/LabelledRevealablePasswordInput.stories.d.ts

@@ -0,0 +1,8 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./LabelledRevealablePasswordInput').LabelledRevealablePasswordInputProps>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Regular: Story;

package/dist/form/LabelledSelect.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { RequiredReactNode } from '../types';
+import { FormControlWithFeedbackProps } from './FormControlWithFeedback';
+import { SelectProps } from './Select';
+export type LabelledSelectProps = Omit<SelectProps, 'className' | 'id'> & FormControlWithFeedbackProps & {
+    label: RequiredReactNode;
+    selectClassName?: string;
+    /** Alternative to `required`. Causes the input to be required, without displaying an asterisk */
+    hiddenRequired?: boolean;
+};
+export declare const LabelledSelect: FC<LabelledSelectProps>;

package/dist/form/LabelledSelect.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./LabelledSelect').LabelledSelectProps>;
+    tags: string[];
+    argTypes: {
+        children: import('storybook/internal/csf').InputType;
+        error: {
+            type: "string";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Regular: Story;
+export declare const Error: Story;

package/dist/form/RevealablePasswordInput.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { InputProps } from './Input';
+export type RevealablePasswordInputProps = Omit<InputProps, 'type'> & {
+    containerClassName?: string;
+};
+/**
+ * A password input where the value can be manually revealed
+ */
+export declare const RevealablePasswordInput: FC<RevealablePasswordInputProps>;

package/dist/form/RevealablePasswordInput.stories.d.ts

@@ -0,0 +1,8 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./RevealablePasswordInput').RevealablePasswordInputProps>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Regular: Story;

package/dist/form/SearchCombobox.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode, Ref } from 'react';
+import { SearchInputProps } from './SearchInput';
+type BaseInputProps = Omit<SearchInputProps, 'role' | 'aria-autocomplete' | 'aria-expanded' | 'aria-controls' | 'aria-activedescendant' | 'onChange' | 'autoComplete' | 'autoCorrect'>;
+export type SearchComboboxProps<Item> = BaseInputProps & {
+    /** If defined, it will display a listbox with the search results */
+    searchResults?: Map<string, Item>;
+    /** Invoked when the search input value changes */
+    onSearch: (searchTerm: string) => void;
+    /** Invoked when the active search result is selected */
+    onSelectSearchResult: (item: Item) => void;
+    /** To customize the look and feel of a search result */
+    renderSearchResult: (item: Item) => ReactNode;
+    /**
+     * Determines how the listbox should span when visible.
+     * - `full`: Be always as big as the input, regardless its content.
+     * - `auto`: Take only the needed space to display its content, up to the width of the input.
+     *
+     * Defaults to `full`.
+     */
+    listboxSpan?: 'full' | 'auto';
+    /** Classes to add to the wrapping container */
+    containerClassName?: string;
+    /** Classes to add to the listbox */
+    listboxClassName?: string;
+    ref?: Ref<HTMLInputElement>;
+};
+/**
+ * This component combines a `SearchInput` with a `Listbox`, to behave close to an editable combobox with autocomplete,
+ * as described in [Combobox Autocomplete List pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/).
+ * The main difference is that the input is used only to search in the listbox. Once an item is selected, the input is
+ * cleared and the listbox is closed.
+ */
+export declare function SearchCombobox<Item>({ searchResults, onSearch, onSelectSearchResult, renderSearchResult, size, // SearchInput defaults its size to 'lg'. Change it to 'md'
+listboxSpan, onFocus, containerClassName, listboxClassName, ref, ...rest }: SearchComboboxProps<Item>): import("react").JSX.Element;
+export {};

package/dist/form/SearchCombobox.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: ({ searchResults, onSearch, onSelectSearchResult, renderSearchResult, size, listboxSpan, onFocus, containerClassName, listboxClassName, ref, ...rest }: import('./SearchCombobox').SearchComboboxProps<{
+        name: string;
+        value: string;
+    }>) => import("react").JSX.Element;
+    tags: string[];
+    argTypes: {
+        size: import('storybook/internal/csf').InputType;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Sync: Story;
+export declare const Async: Story;

package/dist/form/SearchInput.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { InputProps } from './Input';
+export type SearchInputProps = Omit<InputProps, 'className' | 'onChange' | 'value'> & {
+    onChange: (searchTerm: string) => void;
+    containerClassName?: string;
+    inputClassName?: string;
+    /** When set to true, it displays a loading indicator in place of the magnifyinf glass icon */
+    loading?: boolean;
+    /**
+     * Whether onChange should be triggered immediately or debounced.
+     * Defaults to false.
+     */
+    immediate?: boolean;
+};
+export declare const SearchInput: FC<SearchInputProps>;

package/dist/form/SearchInput.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./SearchInput').SearchInputProps>;
+    tags: string[];
+    argTypes: {
+        size: import('storybook/internal/csf').InputType;
+        variant: {
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Regular: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const Borderless: Story;
+export declare const Loading: Story;

package/dist/form/Select.d.ts

@@ -0,0 +1,8 @@
+import { FC, HTMLProps, PropsWithChildren, Ref } from 'react';
+import { BaseInputProps } from './Input';
+type SelectElementProps = Omit<HTMLProps<HTMLSelectElement>, 'size' | 'checked' | 'defaultChecked'>;
+export type SelectProps = PropsWithChildren<SelectElementProps & BaseInputProps> & {
+    ref?: Ref<HTMLSelectElement>;
+};
+export declare const Select: FC<SelectProps>;
+export {};

package/dist/form/Select.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react-vite';
+import { SelectProps } from './Select';
+declare const meta: {
+    component: import('react').FC<SelectProps>;
+    tags: string[];
+    argTypes: {
+        children: import('storybook/internal/csf').InputType;
+        size: import('storybook/internal/csf').InputType;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Regular: Story;
+export declare const Error: Story;
+export declare const Disabled: Story;
+export declare const Small: Story;
+export declare const Large: Story;

package/dist/form/TagsAutocomplete.d.ts

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { SearchComboboxProps } from './SearchCombobox';
+export type TagItemProps = {
+    name: string;
+    color: string;
+};
+export type TagsAutocompleteProps = {
+    /** Full list of tags from which to build the suggestions */
+    tags: string[];
+    /** Tags currently selected */
+    selectedTags?: string[];
+    /** Invoked when tags are added or removed */
+    onTagsChange?: (tags: string[]) => void;
+    /** Invoked to determine what is the color of a tag */
+    getColorForTag?: (tag: string) => string;
+    /** Search input placeholder */
+    placeholder?: string;
+    /** Classes to be added to the wrapping container */
+    containerClassName?: string;
+    /**
+     * Whether to allow adding new arbitrary tags, or only select from the list of tags.
+     * Defaults to false.
+     */
+    immutable?: boolean;
+    /**
+     * How to filter the list of tags when searching:
+     *   - `startsWith`: those that start with the search term
+     *   -  `includes`: those that include the search term
+     * Defaults to `startsWith`.
+     */
+    searchMode?: 'startsWith' | 'includes';
+} & Pick<SearchComboboxProps<string>, 'placeholder' | 'size' | 'disabled' | 'aria-label'>;
+export declare const TagsAutocomplete: FC<TagsAutocompleteProps>;

package/dist/form/TagsAutocomplete.stories.d.ts

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./TagsAutocomplete').TagsAutocompleteProps>;
+    tags: string[];
+    argTypes: {
+        size: import('storybook/internal/csf').InputType;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Regular: Story;
+export declare const WithSelectedTags: Story;
+export declare const WithCustomColors: Story;
+export declare const SearchByIncludes: Story;

package/dist/form/ToggleSwitch.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { BooleanControlProps } from './BooleanControl';
+export type ToggleSwitchProps = BooleanControlProps;
+export declare const ToggleSwitch: FC<ToggleSwitchProps>;

package/dist/form/ToggleSwitch.stories.d.ts

@@ -0,0 +1,9 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./BooleanControl').BooleanControlProps>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const InCard: Story;

package/dist/form/index.d.ts

@@ -0,0 +1,14 @@
+export * from './Button';
+export * from './Checkbox';
+export * from './CloseButton';
+export * from './Input';
+export * from './Label';
+export * from './LabelledInput';
+export * from './LabelledRevealablePasswordInput';
+export * from './LabelledSelect';
+export * from './RevealablePasswordInput';
+export * from './SearchCombobox';
+export * from './SearchInput';
+export * from './Select';
+export * from './TagsAutocomplete';
+export * from './ToggleSwitch';

package/dist/helpers/index.d.ts

@@ -0,0 +1,3 @@
+export * from './normalize-tag';
+export * from './numbers';
+export * from './pagination';

package/dist/helpers/normalize-tag.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Normalizes a tag, making it lowercase, trimmed and replacing space characters with dashes
+ */
+export declare const normalizeTag: (tag: string) => string;

package/dist/helpers/numbers.d.ts

@@ -0,0 +1,2 @@
+export declare const formatNumber: (number: number | string) => string;
+export declare const roundTen: (number: number) => number;

package/dist/helpers/pagination.d.ts

@@ -0,0 +1,8 @@
+export declare const ELLIPSIS = "...";
+type Ellipsis = typeof ELLIPSIS;
+export type NumberOrEllipsis = number | Ellipsis;
+export declare const progressivePagination: (currentPage: number, pageCount: number) => NumberOrEllipsis[];
+export declare const pageIsEllipsis: (pageNumber: NumberOrEllipsis) => pageNumber is Ellipsis;
+export declare const prettifyPageNumber: (pageNumber: NumberOrEllipsis) => string;
+export declare const keyForPage: (pageNumber: NumberOrEllipsis, index: number) => string;
+export {};

package/dist/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export * from './use-arrow-key-navigation';
+export * from './use-go-back';
+export * from './use-parsed-query';
+export * from './use-tags-search';
+export * from './use-timeout';
+export * from './use-timeout-toggle';
+export * from './use-toggle';

package/dist/hooks/use-arrow-key-navigation.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+export type ArrowKeyNavigationOptions = {
+    /** Query selector for focusable elements that need to be included in the loop */
+    elementsSelector: string;
+    /** Whether first focusable item should be focused or not. Defaults to false */
+    focusFirstItem?: boolean;
+    /** Enables up and down arrows navigation. Defaults to true */
+    vertical?: boolean;
+    /** Enables left and right arrows navigation. Defaults to true */
+    horizontal?: boolean;
+};
+/**
+ * Allows focus navigation via arrow keys on the elements of a container.
+ *
+ * Initially, the first element with [data-selected=true] or the first globally, matching `elementsSelector`, will be
+ * focusable via Tab, then arrow keys need to be used to move through the sequence.
+ */
+export declare function useArrowKeyNavigation(containerRef: RefObject<HTMLElement | null>, { elementsSelector, focusFirstItem, vertical, horizontal }: ArrowKeyNavigationOptions): void;

package/dist/hooks/use-go-back.d.ts

@@ -0,0 +1 @@
+export declare const useGoBack: () => () => void | Promise<void>;

package/dist/hooks/use-parsed-query.d.ts

@@ -0,0 +1 @@
+export declare const useParsedQuery: <T>() => T;

package/dist/hooks/use-tags-search.d.ts

@@ -0,0 +1,34 @@
+export type TagsSearchOptions = {
+    /** Full list of tags to search on */
+    tags: string[];
+    /** Tags that are already selected, to ignore them while searching */
+    selectedTags: string[];
+    /** How to do the search term matching on tags, via `startsWith` or `includes` */
+    searchMode: 'startsWith' | 'includes';
+    /** Max amount of matching tags to return. Defaults to 5 */
+    searchLimit?: number;
+    /**
+     * Whether new entries are allowed or not.
+     * When this is true, it will be allowed to add the search term verbatim in the search result.
+     */
+    allowAdding?: boolean;
+};
+export type TagsSearchResult = {
+    /**
+     * A Map with the list of tags that match the search result, with the tag used both as key and value.
+     * Returned as a Map for convenience to use with SearchCombobox.
+     *
+     * When the search term is empty, `undefined` is returned, so that it is possible to differentiate a search producing
+     * no results from not currently performing a search at all.
+     *
+     * @see {SearchCombobox}
+     */
+    searchResults: Map<string, string> | undefined;
+    /** A callback used to perform a search in the list of tags */
+    onSearch: (searchTerm: string) => void;
+};
+/**
+ * Allows to search on a list of tags and only return the ones that match.
+ * Search can be done by `startsWith` or `includes`.
+ */
+export declare function useTagsSearch({ tags, selectedTags, searchMode, searchLimit, allowAdding }: TagsSearchOptions): TagsSearchResult;

package/dist/hooks/use-timeout-toggle.d.ts

@@ -0,0 +1,14 @@
+export type TimeoutToggleOptions = {
+    /**
+     * What should the flag value be initially.
+     * This will drive the behavior of the callback, which will set the opposite value, and then go back to the initial
+     * value after a delay.
+     *
+     * Defaults to false.
+     */
+    initialValue?: boolean;
+    /** Delay in ms after which the flag should return to its initial value. Defaults to 2000 */
+    delay?: number;
+};
+export declare const useTimeoutToggle: ({ initialValue, delay }?: TimeoutToggleOptions, setTimeout_?: typeof setTimeout, clearTimeout_?: typeof clearTimeout) => [boolean, () => void];
+export type TimeoutToggle = typeof useTimeoutToggle;

package/dist/hooks/use-timeout.d.ts

@@ -0,0 +1,15 @@
+export type Callback = () => unknown;
+export type UseTimeoutResult = {
+    /**
+     * Clears any in-progress timeout, and schedules a new callback.
+     * It optionally allows a delay to be provided, or falls back to the default delay otherwise.
+     */
+    setTimeout: (callback: Callback, delay?: number) => void;
+    /** Clears any in-progress timeout */
+    clearCurrentTimeout: () => void;
+};
+export declare function useTimeout(defaultDelay: number, 
+/** Test seam. Defaults to global setTimeout */
+setTimeout_?: typeof globalThis.setTimeout, 
+/** Test seam. Defaults to global clearTimeout */
+clearTimeout_?: typeof clearTimeout): UseTimeoutResult;

package/dist/hooks/use-toggle.d.ts

@@ -0,0 +1,7 @@
+export type ToggleResult = {
+    flag: boolean;
+    toggle: () => void;
+    setToTrue: () => void;
+    setToFalse: () => void;
+};
+export declare function useToggle(initialValue?: boolean): ToggleResult;