@hyphen/hyphen-components 2.9.0 → 2.9.2

package/dist/components/Formik/FormikSelectInputNative/FormikSelectInputNative.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FormikTouched, FormikErrors, FieldAttributes, FormikValues } from 'formik';
+import { SelectInputNativeProps } from '../../SelectInputNative/SelectInputNative';
+export interface FormikSelectInputNativeProps extends Omit<SelectInputNativeProps, 'onChange'> {
+    field: FieldAttributes<HTMLSelectElement>;
+    form: {
+        touched: FormikTouched<FormikValues>;
+        errors: FormikErrors<FormikValues>;
+    };
+    onChange?: SelectInputNativeProps['onChange'];
+}
+export declare const FormikSelectInputNative: React.FC<FormikSelectInputNativeProps>;

package/dist/components/Formik/FormikTextInput/FormikTextInput.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FormikTouched, FormikErrors, FieldAttributes, FormikValues } from 'formik';
+import { TextInputProps } from '../../TextInput/TextInput';
+export interface FormikTextInputProps extends Omit<TextInputProps, 'onChange'> {
+    field: FieldAttributes<HTMLInputElement>;
+    form: {
+        touched: FormikTouched<FormikValues>;
+        errors: FormikErrors<FormikValues>;
+    };
+    onChange?: TextInputProps['onChange'];
+}
+export declare const FormikTextInput: React.FC<FormikTextInputProps>;

package/dist/components/Formik/FormikTextInputInset/FormikTextInputInset.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FormikTouched, FormikErrors, FieldAttributes, FormikValues } from 'formik';
+import { TextInputInsetProps } from '../../TextInputInset/TextInputInset';
+export interface FormikTextInputInsetProps extends Omit<TextInputInsetProps, 'onChange'> {
+    field: FieldAttributes<HTMLInputElement>;
+    form: {
+        touched: FormikTouched<FormikValues>;
+        errors: FormikErrors<FormikValues>;
+    };
+    onChange?: TextInputInsetProps['onChange'];
+}
+export declare const FormikTextInputInset: React.FC<FormikTextInputInsetProps>;

package/dist/components/Formik/FormikTextareaInput/FormikTextareaInput.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { FormikTouched, FormikErrors, FormikValues, FieldAttributes } from 'formik';
+import { TextareaInputProps } from '../../TextareaInput/TextareaInput';
+export interface FormikTextareaInputProps extends Omit<TextareaInputProps, 'onChange'> {
+    field: FieldAttributes<HTMLTextAreaElement>;
+    form: {
+        touched: FormikTouched<FormikValues>;
+        errors: FormikErrors<FormikValues>;
+    };
+    onChange?: TextareaInputProps['onChange'];
+}
+export declare const FormikTextareaInput: FC<FormikTextareaInputProps>;

package/dist/components/Formik/FormikTextareaInputInset/FormikTextareaInputInset.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { FormikTouched, FormikErrors, FormikValues, FieldAttributes } from 'formik';
+import { TextareaInputInsetProps } from '../../TextareaInputInset/TextareaInputInset';
+export interface FormikTextareaInputInsetProps extends Omit<TextareaInputInsetProps, 'onChange'> {
+    field: FieldAttributes<HTMLTextAreaElement>;
+    form: {
+        touched: FormikTouched<FormikValues>;
+        errors: FormikErrors<FormikValues>;
+    };
+    onChange?: TextareaInputInsetProps['onChange'];
+}
+export declare const FormikTextareaInputInset: FC<FormikTextareaInputInsetProps>;

package/dist/components/Formik/FormikTimePicker/FormikTimePicker.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { FormikTouched, FormikErrors, FormikValues, FieldAttributes } from 'formik';
+import { TimePickerProps } from '../../TimePicker/TimePicker';
+export interface FormikTimePickerProps extends Omit<TimePickerProps, 'onChange'> {
+    field: FieldAttributes<HTMLSelectElement>;
+    form: {
+        touched: FormikTouched<FormikValues>;
+        errors: FormikErrors<FormikValues>;
+    };
+    onChange?: TimePickerProps['onChange'];
+}
+export declare const FormikTimePicker: FC<FormikTimePickerProps>;

package/dist/components/Formik/FormikTimePickerNative/FormikTimePickerNative.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { FormikTouched, FormikErrors, FormikValues, FieldAttributes } from 'formik';
+import { TimePickerNativeProps } from '../../TimePickerNative/TimePickerNative';
+export interface FormikTimePickerNativeProps extends Omit<TimePickerNativeProps, 'onChange'> {
+    field: FieldAttributes<HTMLTextAreaElement>;
+    form: {
+        touched: FormikTouched<FormikValues>;
+        errors: FormikErrors<FormikValues>;
+    };
+    onChange: TimePickerNativeProps['onChange'];
+}
+export declare const FormikTimePickerNative: FC<FormikTimePickerNativeProps>;

package/dist/components/Formik/FormikToggle/FormikToggle.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FormikTouched, FormikErrors, FieldAttributes, FormikValues } from 'formik';
+export interface FormikToggleProps {
+    field: FieldAttributes<HTMLTextAreaElement>;
+    form: {
+        touched: FormikTouched<FormikValues>;
+        errors: FormikErrors<FormikValues>;
+    };
+    id: string;
+    label: string;
+}
+export declare const FormikToggle: React.FC<FormikToggleProps>;

package/dist/components/Heading/Heading.constants.d.ts

@@ -0,0 +1,10 @@
+export type HEADING_LEVELS_TYPE = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export declare const HEADING_LEVELS: HEADING_LEVELS_TYPE[];
+export declare const HEADING_DEFAULT_SIZE_MAP: {
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+};

package/dist/components/Heading/Heading.d.ts

@@ -0,0 +1,35 @@
+import { FC, ReactNode } from 'react';
+import { FontColor, HeadingSize, ResponsiveProp } from '../../types';
+import { HEADING_LEVELS_TYPE } from './Heading.constants';
+export interface HeadingProps {
+    /**
+     * The DOM tag or react component to use for the element.
+     * Select the appropriate semantic element (h1-h6).
+     */
+    as?: HEADING_LEVELS_TYPE;
+    /**
+     * Content of the heading. Can be a string or any valid DOM node.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names to add.
+     */
+    className?: string;
+    /**
+     * A variant token identifier to use for the text variant. Available variants found:
+     * [here](https://github.com/hyphen/hyphen-design-tokens/blob/main/properties/color/font.json).
+     */
+    color?: FontColor;
+    /**
+     * By default, size is determined by the chosen tag (e.g. h1 is bigger than h2).
+     * However, size can be set independently so that its size is appropriate for the surrounding content.
+     * Available sizes found:
+     * [here](https://github.com/hyphen/hyphen-design-tokens/blob/main/properties/size/font.json).
+     */
+    size?: HeadingSize | ResponsiveProp<HeadingSize>;
+    /**
+     * Additional props to be spread to rendered element
+     */
+    [x: string]: any;
+}
+export declare const Heading: FC<HeadingProps>;

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

@@ -0,0 +1,9 @@
+import { Heading } from './Heading';
+import type { Meta } from '@storybook/react';
+import React from 'react';
+declare const meta: Meta<typeof Heading>;
+export default meta;
+export declare const Levels: () => React.JSX.Element;
+export declare const Sizes: () => React.JSX.Element;
+export declare const ResponsiveSizes: () => React.JSX.Element;
+export declare const Colors: () => React.JSX.Element;

package/dist/components/HelpText/HelpText.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface HelpTextProps {
+    /**
+     * Contents of the help text.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional class names to add.
+     */
+    className?: string;
+}
+export declare const HelpText: React.ForwardRefExoticComponent<HelpTextProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,22 @@
+import { FontColor, FontSize, IconName, ResponsiveProp } from '../../types';
+import { FC } from 'react';
+export interface IconProps {
+    className?: string;
+    /**
+     * A color token identifier to use for the text color.
+     */
+    color?: FontColor | ResponsiveProp<FontColor>;
+    /**
+     * A [font size token](/?path=/docs/design-tokens-design-tokens--page#font-size) identifier
+     */
+    size?: FontSize | ResponsiveProp<FontSize>;
+    /**
+     * Name of the icon
+     */
+    name: IconName;
+    /**
+     * Additional props to be spread to rendered element
+     */
+    [x: string]: any;
+}
+export declare const Icon: FC<IconProps>;

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

@@ -0,0 +1,10 @@
+import { Icon } from './Icon';
+import type { Meta } from '@storybook/react';
+import React from 'react';
+declare const meta: Meta<typeof Icon>;
+export default meta;
+export declare const Default: () => React.JSX.Element;
+export declare const Sizes: () => React.JSX.Element;
+export declare const Colors: () => React.JSX.Element;
+export declare const UnknownIcon: () => React.JSX.Element;
+export declare const AvailableIcons: () => React.JSX.Element;

package/dist/components/InputValidationMessage/InputValidationMessage.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+/**
+ * Used by form inputs such as TextInput, to display a validation message for an invalid input.
+ */
+export interface InputValidationMessageProps {
+    children: ReactNode;
+    size?: 'xs' | 'sm' | 'md';
+}
+export declare const InputValidationMessage: FC<InputValidationMessageProps>;

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,75 @@
+import React, { ReactNode, RefObject } from 'react';
+import { CssOverflowValue } from '../../types';
+import { BoxProps } from '../Box/Box';
+import { ModalFooter, ModalHeader, ModalBody } from './components';
+export interface ModalProps {
+    /**
+     * Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
+     */
+    allowPinchZoom?: boolean;
+    /**
+     * Each modal needs to be properly labeled to provide context for users with
+     * assistive technology such as screen readers. If a modal is announced to
+     * the user without a label, it can be confusing and difficult to navigate.
+     */
+    ariaLabel?: string;
+    /**
+     * The id of the element that should be used as the Modal's label by assistive
+     * technologies like screen readers. Usually the id is set on the `Modal.Header`
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Contents of the dialog.
+     */
+    children?: ReactNode;
+    /**
+     * Additional ClassNames to add to dialog.
+     */
+    className?: string;
+    /**
+     * The ref of the container where the dialog will be inserted into the DOM.
+     * By default, Modals are inserted in the document.body, but if need be they can
+     * be scoped as necessary.
+     */
+    containerRef?: React.RefObject<Node>;
+    /**
+     * At mobile viewport widths, the modal will take up the fullscreen
+     */
+    fullScreenMobile?: boolean;
+    /**
+     * By default the first focusable element will receive focus when the dialog
+     * opens but you can provide a ref to focus instead.
+     *
+     * @see Docs https://reach.tech/dialog#dialog-initialfocusref
+     */
+    initialFocusRef?: RefObject<HTMLDivElement>;
+    /**
+     * Whether the modal is visible or not
+     */
+    isOpen: boolean;
+    /**
+     * Max width for modal content. Uses the same maxWidth prop as the `Box` component,
+     * and as such can be responsive as well.
+     */
+    maxWidth?: BoxProps['maxWidth'];
+    /**
+     * Function that is called whenever the user hits "Escape" key or clicks outside the modal.
+     */
+    onDismiss: (event?: React.SyntheticEvent) => void;
+    /**
+     * The css overflow behavior of the Modal
+     */
+    overflow?: CssOverflowValue;
+    /**
+     * Allows spread props
+     */
+    [x: string]: any;
+}
+export declare const ModalBaseComponent: React.FC<ModalProps>;
+export interface ModalStatic {
+    Body: typeof ModalBody;
+    Header: typeof ModalHeader;
+    Footer: typeof ModalFooter;
+}
+export type ModalWithStaticComponents = typeof ModalBaseComponent & ModalStatic;
+export declare const Modal: ModalWithStaticComponents;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Modal } from './Modal';
+import type { Meta } from '@storybook/react';
+declare const meta: Meta<typeof Modal>;
+export default meta;
+export declare const BasicUsage: () => React.JSX.Element;
+export declare const BodyAndFooter: () => React.JSX.Element;
+export declare const CloseButton: () => React.JSX.Element;
+export declare const WithoutHeader: () => React.JSX.Element;
+export declare const FullscreenMobile: () => React.JSX.Element;
+export declare const MaxWidth: () => React.JSX.Element;

package/dist/components/Modal/components/ModalBody/ModalBody.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { BoxProps } from '../../../Box/Box';
+export type ModalBodyProps = BoxProps;
+export declare const ModalBody: FC<ModalBodyProps>;

package/dist/components/Modal/components/ModalFooter/ModalFooter.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { BoxProps } from '../../../Box/Box';
+export type ModalFooterProps = Omit<BoxProps, 'as' | 'background' | 'borderColor' | 'borderWidth' | 'radius'>;
+export declare const ModalFooter: FC<ModalFooterProps>;

package/dist/components/Modal/components/ModalHeader/ModalHeader.d.ts

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+export type ModalHeaderProps = {
+    /**
+     * id of the element containing the title, used by the Modal `aria-labelledby` prop
+     */
+    id: string;
+    /**
+     * Modal's header title
+     */
+    title?: string;
+    /**
+     * If defined, will render a 'x' close button on the right side of the ModalHeader
+     */
+    onDismiss?: (event?: React.SyntheticEvent) => void;
+};
+export declare const ModalHeader: FC<ModalHeaderProps>;

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

@@ -0,0 +1,4 @@
+import { ModalFooter } from './ModalFooter/ModalFooter';
+import { ModalHeader } from './ModalHeader/ModalHeader';
+import { ModalBody } from './ModalBody/ModalBody';
+export { ModalFooter, ModalHeader, ModalBody };

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,51 @@
+import { FC, ReactNode } from 'react';
+export interface PaginationProps {
+    /**
+     * The current page number being displayed.
+     */
+    activePage: number;
+    /**
+     * The number of list items contained in a page.
+     */
+    itemsPerPage: number;
+    /**
+     * Callback fired when the user clicks a page or prev/next button.
+     */
+    onChange: (pageNumber: number) => void;
+    /**
+     * The total number of items in the list
+     */
+    totalItemsCount: number;
+    /**
+     * Boolean to determine if individual page buttons (or dropdown are visible). Takes a `ResponsiveProp`
+     * if you want to render it differently at different breakpoints
+     */
+    arePagesVisible?: boolean;
+    /**
+     * Custom class to pass down to the pagination container.
+     */
+    className?: string;
+    /**
+     * Pass true to render a version of Pagination with smaller buttons.
+     */
+    isCompact?: boolean;
+    /**
+     * Boolean to determine if the list totals (and current range) are visible.
+     * NOTE: these are hidden on mobile regardless of this prop value.
+     */
+    isTotalVisible?: boolean;
+    /**
+     * The text (or react node) to pass to the NEXT page button.
+     */
+    nextPageText?: string | ReactNode;
+    /**
+     * Number of pages shown in paginator, not including navigation blocks (prev, next), as well as first, last pages.
+     * In other words the number of pages displayed 'in the middle', that the user can navigate to.
+     */
+    numberOfPagesDisplayed?: number;
+    /**
+     * The text (or react node) to pass to the PREVIOUS page button.
+     */
+    prevPageText?: string | ReactNode;
+}
+export declare const Pagination: FC<PaginationProps>;

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

@@ -0,0 +1,8 @@
+import { Pagination } from './Pagination';
+import type { Meta } from '@storybook/react';
+import React from 'react';
+declare const meta: Meta<typeof Pagination>;
+export default meta;
+export declare const Default: () => React.JSX.Element;
+export declare const Compact: () => React.JSX.Element;
+export declare const PageNumbers: () => React.JSX.Element;

package/dist/components/Pagination/Pagination.utilities.d.ts

@@ -0,0 +1,11 @@
+export interface Page {
+    isPage: boolean;
+    pageNumber: number;
+}
+export declare const generatePages: (pageRange: number, pageTotal: number, activePage: number, numberOfPagesDisplayed: number) => Page[];
+export declare const generatePageRange: (numberOfPagesDisplayed: number, pageTotal: number) => number;
+export declare const generatePageTotal: (totalItemsCount: number, itemsPerPage: number) => number;
+export declare const generateActiveListRange: (activePage: number, totalItemsCount: number, itemsPerPage: number) => {
+    first?: number;
+    last?: number;
+};

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,80 @@
+import { FC, ReactNode } from 'react';
+import { Placement } from '@popperjs/core';
+import { BackgroundColor } from '../../types';
+import { BoxProps } from '../Box/Box';
+export type PopoverProps = {
+    /**
+     * Custom class to apply to the alert.
+     */
+    className?: string;
+    /**
+     * The trigger element
+     */
+    children: ReactNode;
+    /**
+     * Content of the tooltip. Can be any JSX node.
+     */
+    content: ReactNode;
+    /**
+     * The Popover is a controlled input, and will be shown when `isOpen === true`.
+     */
+    isOpen: boolean;
+    /**
+     * Color of the arrow background. NOTE: That the arrowColor will default to the
+     * `background` color applied in the `contentContainerProps`, but can be overwritten
+     * by passing a specific value here.
+     */
+    arrowColor?: BackgroundColor;
+    /**
+     * An object matching the interface of the `Box` component props.
+     * This is useful for styling the tooltip container using all the options available in
+     * a `Box`.
+     */
+    contentContainerProps?: BoxProps;
+    /**
+     * Whether the arrow is shown.
+     */
+    hasArrow?: boolean;
+    /**
+     * How far (in pixels) the Popover element will be from the target.
+     * Note that this is from the edge of the target to the edge of the popover content,
+     * and it DOES NOT include the arrow element.
+     */
+    offsetFromTarget?: number;
+    /**
+     * Callback function to handle when a user clicks outside the Popover
+     */
+    onClickOutside?: (event: MouseEvent | KeyboardEvent) => void;
+    /**
+     * The placement (position) of the Popover relative to its trigger.
+     */
+    placement?: Placement;
+    /**
+     * Whether you want to trap focus in the Popover element when it is open.
+     * Read more about focus traps:
+     * [Here](https://allyjs.io/tutorials/accessible-dialog.html#trapping-focus-inside-the-dialog)
+     */
+    trapFocus?: boolean;
+    /**
+     * Additional props to be spread to rendered element
+     */
+    [x: string]: any;
+} & ({
+    /**
+     * Whether the element should be rendered outside its DOM structure
+     * for reasons of placement. Use this when the element is being cut-off or
+     * re-positioned due to lack of space in the parent container.
+     * NOTE: `portalTarget` is required if this is true.
+     */
+    withPortal: true;
+    /**
+     * The target element where the Popover will be portaled to, when `withPortal === true`.
+     * `document.body` will work for many cases, but you can also use a custom container for this.
+     * Only required if withPortal is true.
+     */
+    portalTarget: HTMLElement;
+} | {
+    withPortal?: false;
+    portalTarget?: never;
+});
+export declare const Popover: FC<PopoverProps>;

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

@@ -0,0 +1,14 @@
+import { Popover } from './Popover';
+import type { Meta } from '@storybook/react';
+import React from 'react';
+declare const meta: Meta<typeof Popover>;
+export default meta;
+export declare const BasicUsage: () => React.JSX.Element;
+export declare const PopoverStyling: () => React.JSX.Element;
+export declare const Placement: () => React.JSX.Element;
+export declare const WithAPortal: () => React.JSX.Element;
+export declare const HoverTrigger: () => React.JSX.Element;
+export declare const RespondToOutsideClicks: () => React.JSX.Element;
+export declare const TrappingFocus: () => React.JSX.Element;
+export declare const WithoutAnArrow: () => React.JSX.Element;
+export declare const OffsetDistance: () => React.JSX.Element;

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,75 @@
+import React, { FC, ChangeEvent, FocusEvent, ReactNode } from 'react';
+import { RadioInputProps } from './RadioInput/RadioInput';
+export interface RadioGroupProps {
+    /**
+     * Radio group name.
+     */
+    name: string;
+    /**
+     * Callback function to call on change event.
+     */
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Options for radio group.
+     */
+    options: {
+        id: string;
+        value: string;
+        label: ReactNode;
+        disabled?: boolean | null;
+    }[];
+    /**
+     * Additional classes to add.
+     */
+    className?: string;
+    /**
+     * Description to be displayed below the title, and above the RadioGroup.
+     */
+    description?: ReactNode;
+    /**
+     * Whether the radios should be aligned in a row or in a column
+     */
+    direction?: 'row' | 'column';
+    /**
+     * Mark the radio group as invalid and display a validation message.
+     * Pass a string or node to render a validation message below the input.
+     */
+    error?: ReactNode;
+    /**
+     * If the radio group should be disabled and not focusable.
+     */
+    isDisabled?: boolean;
+    /**
+     * If the radio group is required or not
+     */
+    isRequired?: boolean;
+    /**
+     * Callback function to call on blur event.
+     */
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function to call on focus event.
+     */
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Visual indicator that the field is required, that gets appended to the label
+     */
+    requiredIndicator?: React.ReactNode;
+    /**
+     * Size of the radio icons in the group.
+     */
+    size?: RadioInputProps['size'];
+    /**
+     * Title to be displayed above the RadioGroup.
+     */
+    title?: ReactNode;
+    /**
+     * The value of selected radio input.
+     */
+    value?: string;
+    /**
+     * Additional props to be spread to rendered element
+     */
+    [x: string]: any;
+}
+export declare const RadioGroup: FC<RadioGroupProps>;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { RadioGroup } from './RadioGroup';
+import type { Meta } from '@storybook/react';
+declare const meta: Meta<typeof RadioGroup>;
+export default meta;
+export declare const Default: () => React.JSX.Element;
+export declare const Title: () => React.JSX.Element;
+export declare const TitleAndDescription: () => React.JSX.Element;
+export declare const Required: () => React.JSX.Element;
+export declare const CustomRequiredIndicator: () => React.JSX.Element;
+export declare const PreSelectedOption: () => React.JSX.Element;
+export declare const DisabledOption: () => React.JSX.Element;
+export declare const DisabledGroup: () => React.JSX.Element;
+export declare const Error: () => React.JSX.Element;
+export declare const Sizes: () => React.JSX.Element;
+export declare const HorizontallyAligned: () => React.JSX.Element;