@hyphen/hyphen-components 2.9.0 → 2.9.2

package/dist/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { SelectInputProps } from '../SelectInput/SelectInput';
+export type TimePickerProps = Omit<SelectInputProps, 'options'> & {
+    /**
+     * Options to govern the display of the option labels in the select.
+     * This is a direct passthrough to the second argument of JS `toLocaleTimeString`.
+     * [More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString)
+     */
+    dateDisplayOptions?: Intl.DateTimeFormatOptions;
+    /**
+     * End hour and minute
+     */
+    endTime?: {
+        hour: number;
+        minute: number;
+    };
+    /**
+     * Interval of displayed times (in seconds). Defaults to 900 seconds (15 minutes).
+     */
+    interval?: number;
+    /**
+     * Locale(s) to be passed down in order to format the label values in the select.
+     * This corresponds to the first argument of JS `toLocaleTimeString`.
+     * [More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString)
+     */
+    locales?: string | string[];
+    /**
+     * Start hour and minute
+     */
+    startTime?: {
+        hour: number;
+        minute: number;
+    };
+};
+export declare const TimePicker: FC<TimePickerProps>;

package/dist/components/TimePicker/TimePicker.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta } from '@storybook/react';
+import React from 'react';
+import { TimePicker } from './TimePicker';
+declare const meta: Meta<typeof TimePicker>;
+export default meta;
+export declare const Default: () => React.JSX.Element;
+export declare const WithASpecificInterval: () => React.JSX.Element;
+export declare const WithMinAndMaxTimes: () => React.JSX.Element;
+export declare const WithCustomDateDisplay: () => React.JSX.Element;
+export declare const WithOpenMenu: () => React.JSX.Element;
+export declare const HelpText: () => React.JSX.Element;
+export declare const Sizes: () => React.JSX.Element;

package/dist/components/TimePickerNative/TimePickerNative.d.ts

@@ -0,0 +1,39 @@
+import { FC } from 'react';
+import { SelectInputNativeProps } from '../SelectInputNative/SelectInputNative';
+export interface TimePickerNativeProps extends Omit<SelectInputNativeProps, 'options'> {
+    /**
+     * Options to govern the display of the option labels in the select.
+     * This is a direct passthrough to the second argument of JS `toLocaleTimeString`.
+     * [More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString)
+     */
+    dateDisplayOptions?: Intl.DateTimeFormatOptions;
+    /**
+     * End hour and minute
+     */
+    endTime?: {
+        hour: number;
+        minute: number;
+    };
+    /**
+     * Interval of displayed times (in seconds). Defaults to 900 seconds (15 minutes).
+     */
+    interval?: number;
+    /**
+     * Locale(s) to be passed down in order to format the label values in the select.
+     * This corresponds to the first argument of JS `toLocaleTimeString`.
+     * [More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString)
+     */
+    locales?: string | string[];
+    /**
+     * Start hour and minute
+     */
+    startTime?: {
+        hour: number;
+        minute: number;
+    };
+    /**
+     *  Should be ISO timestamp as returned by `onChange`, and matching value of option object.
+     */
+    value: SelectInputNativeProps['value'];
+}
+export declare const TimePickerNative: FC<TimePickerNativeProps>;

package/dist/components/TimePickerNative/TimePickerNative.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta } from '@storybook/react';
+import React from 'react';
+import { TimePickerNative } from './TimePickerNative';
+declare const meta: Meta<typeof TimePickerNative>;
+export default meta;
+export declare const Default: () => React.JSX.Element;
+export declare const WithASpecificInterval: () => React.JSX.Element;
+export declare const WithMinAndMaxTimes: () => React.JSX.Element;
+export declare const WithCustomDateDisplay: () => React.JSX.Element;
+export declare const HelpText: () => React.JSX.Element;
+export declare const Sizes: () => React.JSX.Element;

package/dist/components/Toast/Toast.store.d.ts

@@ -0,0 +1,36 @@
+import { Toast, ExtendedToastOptions } from './Toast.types';
+export declare enum ToastStoreActionType {
+    ADD_TOAST = "TOAST/ADD_TOAST",
+    UPDATE_TOAST = "TOAST/UPDATE_TOAST",
+    UPSERT_TOAST = "TOAST/UPSERT_TOAST",
+    DISMISS_TOAST = "TOAST/DISMISS_TOAST",
+    REMOVE_TOAST = "TOAST/REMOVE_TOAST",
+    START_PAUSE = "TOAST/START_PAUSE",
+    END_PAUSE = "TOAST/END_PAUSE"
+}
+type GenericAction<TActionType extends PropertyKey, TPayload extends Record<string, unknown>> = {
+    type: TActionType;
+    payload: TPayload;
+};
+type ToastStoreAction = GenericAction<ToastStoreActionType.ADD_TOAST, {
+    toast: Toast;
+}> | GenericAction<ToastStoreActionType.UPSERT_TOAST, {
+    toast: Toast;
+}> | GenericAction<ToastStoreActionType.UPDATE_TOAST, {
+    toast: Partial<Toast>;
+}> | GenericAction<ToastStoreActionType.DISMISS_TOAST, {
+    toastId?: string;
+}> | GenericAction<ToastStoreActionType.REMOVE_TOAST, {
+    toastId?: string;
+}> | GenericAction<ToastStoreActionType.START_PAUSE, {
+    time: number;
+}> | GenericAction<ToastStoreActionType.END_PAUSE, {
+    time: number;
+}>;
+interface ToastState {
+    toasts: Toast[];
+    pausedAt: number | undefined;
+}
+export declare const dispatch: (action: ToastStoreAction) => void;
+export declare const useToastStore: (toastOptions?: ExtendedToastOptions) => ToastState;
+export {};

package/dist/components/Toast/Toast.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta } from '@storybook/react';
+import React from 'react';
+import { ToastContainer } from './';
+declare const meta: Meta<typeof ToastContainer>;
+export default meta;
+export declare const Example: () => React.JSX.Element;
+export declare const Column: () => React.JSX.Element;
+export declare const Position: () => React.JSX.Element;
+export declare const Duration: () => React.JSX.Element;
+export declare const NotDismissible: () => React.JSX.Element;
+export declare const ProgrammaticDismiss: () => React.JSX.Element;
+export declare const Compact: () => React.JSX.Element;
+export declare const BasicTypes: () => React.JSX.Element;
+export declare const AdvancedTypes: () => React.JSX.Element;

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import { ValueOrFunction } from '../../types';
+export type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface Toast {
+    /**
+     * Type of toast to create.
+     */
+    type: ToastType;
+    /**
+     * Unique id for the toast.
+     */
+    id: string;
+    /**
+     * Toast message
+     */
+    message: ValueOrFunction<React.ReactNode, Toast>;
+    /**
+     * Determine of toast layout is compact or default.
+     */
+    isCompact?: boolean;
+    /**
+     * Custom duration for toast.
+     */
+    duration?: number;
+    /**
+     * Amount of time the toast timeout has been paused for.
+     * When the toast timeout is paused, its auto-dismissal will be delayed.
+     */
+    pauseDuration: number;
+    /**
+     * Custom toast position, use as needed to override global position from ToastContainer.
+     */
+    position?: ToastPosition;
+    /**
+     * Accessibility options
+     */
+    ariaProps: {
+        role: 'status' | 'alert';
+        'aria-live': 'assertive' | 'off' | 'polite';
+    };
+    /**
+     * Whether the toast can be dismissed (if true, the toast will include a close button)
+     */
+    canDismiss?: boolean;
+    /**
+     * Custom styles.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Epoch timestamp
+     */
+    createdAt: number;
+    /**
+     * Whether the toast is visible at the current time.
+     * Used in order to display a proper fade-out animation before the element is fully removed from the DOM.
+     */
+    visible: boolean;
+    /**
+     * Height of element (calculated with getBoundingClientRect)
+     */
+    height?: number;
+}
+export type ToastOptions = Partial<Pick<Toast, 'id' | 'duration' | 'ariaProps' | 'className' | 'style' | 'position' | 'canDismiss' | 'isCompact'>>;
+/**
+ * Extends toast options so that you can include options for each type of toast in the options.
+ * e.g: { duration: 1000, success: { duration: 2000 } }
+ */
+export type ExtendedToastOptions = ToastOptions & {
+    [key in ToastType]?: ToastOptions;
+};

package/dist/components/Toast/ToastContainer.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Toast, ToastPosition, ExtendedToastOptions } from './Toast.types';
+export declare const createRectRef: (onRect: (rect: DOMRect) => void) => (el: HTMLElement | null) => void;
+export interface ToastContainerProps {
+    /**
+     * Render function for each individual toast.
+     * This can be used to render custom toasts, although we recommend using the standard version,
+     * unless absolutely necessary.
+     */
+    children?: (t: Toast) => JSX.Element;
+    /**
+     * Style object for the toast container if needed.
+     */
+    containerStyle?: React.CSSProperties;
+    /**
+     * Custom classname for toast container if needed.
+     */
+    containerClassName?: string;
+    /**
+     * The vertical gap between each toast notification when multiple toasts are on screen (in pixels).
+     */
+    gutter?: number;
+    /**
+     * Global position for all toasts in container.
+     * NOTE: This can be overwritten by the position property of each individual toast.
+     */
+    position?: ToastPosition;
+    /**
+     * Display toasts in reverse order.
+     * NOTE: Reverse order in this case means that older toasts remain close to the position origin.
+     * and newer toasts appear further away from the origin.
+     */
+    reverseOrder?: boolean;
+    /**
+     * Global options for each toast. Can be overwritten for each individual toast as needed.
+     */
+    toastOptions?: ExtendedToastOptions;
+    /**
+     * Props spread into main container.
+     */
+    [x: string]: unknown;
+}
+export declare const ToastContainer: React.FC<ToastContainerProps>;

package/dist/components/Toast/ToastNotification.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Toast, ToastPosition } from './Toast.types';
+interface ToastNotificationProps {
+    /**
+     * Toast object
+     */
+    toast: Toast;
+    /**
+     * Custom position for toast (overrides global container toast position).
+     */
+    position?: ToastPosition;
+    /**
+     * Custom styles for toast.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Render function to create custom toast notification.
+     */
+    children?: (components: {
+        message: React.ReactNode;
+    }) => React.ReactNode;
+    /**
+     * Handler for when the dismiss button is pressed.
+     */
+    onDismiss?: () => void;
+}
+export declare const ToastNotification: React.FC<ToastNotificationProps>;
+export {};

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

@@ -0,0 +1,4 @@
+export * from './ToastContainer';
+export * from './Toast.types';
+export * from './toast';
+export * from './useToasts';

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ValueOrFunction } from '../../types';
+import { Toast, ToastOptions, ExtendedToastOptions } from './Toast.types';
+type Message = ValueOrFunction<React.ReactNode, Toast>;
+type ToastHandler = (message: Message, options?: ToastOptions) => string;
+declare const toast: {
+    (message: Message, opts?: ToastOptions): string;
+    error: ToastHandler;
+    success: ToastHandler;
+    loading: ToastHandler;
+    custom: ToastHandler;
+    dismiss(toastId?: string): void;
+    remove(toastId?: string): void;
+    async<T>(promise: Promise<T>, messages: {
+        loading: React.ReactNode;
+        success: ValueOrFunction<React.ReactNode, T>;
+        error: ValueOrFunction<React.ReactNode, unknown>;
+    }, opts?: ExtendedToastOptions): Promise<T>;
+};
+export { toast };

package/dist/components/Toast/useToasts.d.ts

@@ -0,0 +1,14 @@
+import { ExtendedToastOptions, Toast, ToastPosition } from './Toast.types';
+export declare const useToasts: (toastOptions?: ExtendedToastOptions) => {
+    toasts: Toast[];
+    handlers: {
+        startPause: () => void;
+        endPause: () => void;
+        updateHeight: (toastId: string, height: number) => void;
+        calculateOffset: (currentToast: Toast, opts: {
+            reverseOrder: boolean;
+            gutter: number;
+            defaultPosition?: ToastPosition;
+        }) => number;
+    };
+};

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,64 @@
+import React, { ChangeEvent, FC, FocusEvent, ReactNode } from 'react';
+import { ResponsiveProp } from '../../types';
+export type ToggleSize = 'sm' | 'md' | 'lg';
+export interface ToggleProps {
+    /**
+     * The id attribute of the input.
+     */
+    id: string;
+    /**
+     * The toggle input "checked" attribute.
+     */
+    isChecked: boolean;
+    /**
+     * Custom content to be displayed to right of toggle.
+     */
+    label: string;
+    /**
+     * Callback function when input is changed.
+     */
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Additional classes to add.
+     */
+    className?: string;
+    /**
+     * Mark the input field as invalid and display a validation message.
+     * Pass a string or node to render a validation message below the input.
+     */
+    error?: ReactNode;
+    /**
+     * Additional clarifying text to help describe the input
+     */
+    helpText?: ReactNode;
+    /**
+     * Determines if the label is not shown for stylistic reasons.
+     * Note the label is still a required prop and will be used as the aria-label for accessibility reasons.
+     */
+    hideLabel?: boolean;
+    /**
+     * If the input should be disabled and not focusable.
+     */
+    isDisabled?: boolean;
+    /**
+     * The required and aria-required attributes on the input
+     */
+    isRequired?: boolean;
+    /**
+     * Callback function when input is blurred.
+     */
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function when input is focused.
+     */
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Visual indicator that the field is required, that gets appended to the label
+     */
+    requiredIndicator?: React.ReactNode;
+    /**
+     * The size of the toggle.
+     */
+    size?: ToggleSize | ResponsiveProp<ToggleSize>;
+}
+export declare const Toggle: FC<ToggleProps>;

package/dist/components/Toggle/Toggle.stories.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import { Toggle } from './Toggle';
+declare const meta: Meta<typeof Toggle>;
+export default meta;
+export declare const Overview: () => React.JSX.Element;
+export declare const Basic: () => React.JSX.Element;
+export declare const HelpText: () => React.JSX.Element;
+export declare const HiddenLabel: () => React.JSX.Element;
+export declare const Sizes: () => React.JSX.Element;
+export declare const Disabled: () => React.JSX.Element;
+export declare const Error: () => React.JSX.Element;

package/dist/constants/keyCodes.d.ts

@@ -0,0 +1,2 @@
+export declare const ENTER = 13;
+export declare const SPACE = 32;