@hyphen/hyphen-components 2.9.0 → 2.9.2

package/dist/components/CheckboxInput/CheckboxInput.d.ts

@@ -0,0 +1,72 @@
+import React from 'react';
+import { CheckboxSize, CheckboxProps } from './components/Checkbox';
+export interface CheckboxInputProps {
+    /**
+     * The id attribute of the input.
+     */
+    id: string;
+    /**
+     * The checkbox input "checked" attribute.
+     */
+    isChecked: boolean;
+    /**
+     * Custom content to be displayed to right of checkbox.
+     */
+    label: string;
+    /**
+     * Callback function when input is changed.
+     */
+    onChange: (event: React.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?: React.ReactNode;
+    /**
+     * Additional clarifying text to help describe the input
+     */
+    helpText?: React.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;
+    /**
+     * Whether the checkbox is rendered in an indeterminate state.
+     * NOTE: this change is only visual and it does not affect the checked or unchecked state of the checkbox.
+     */
+    isIndeterminate?: CheckboxProps['isIndeterminate'];
+    /**
+     * The required and aria-required attributes on the input
+     */
+    isRequired?: boolean;
+    /**
+     * Callback function when input is blurred.
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function when input is focused.
+     */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Visual indicator that the field is required, that gets appended to the label
+     */
+    requiredIndicator?: React.ReactNode;
+    /**
+     * The size of the checkbox.
+     */
+    size?: CheckboxSize;
+    /**
+     * Additional props to be spread to rendered element
+     */
+    [x: string]: any;
+}
+export declare const CheckboxInput: React.FC<CheckboxInputProps>;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import { CheckboxInput } from './CheckboxInput';
+declare const meta: Meta<typeof CheckboxInput>;
+export default meta;
+export declare const Basic: () => React.JSX.Element;
+export declare const Default: () => React.JSX.Element;
+export declare const States: () => React.JSX.Element;
+export declare const IndeterminateCheckboxes: () => React.JSX.Element;
+export declare const Required: () => React.JSX.Element;
+export declare const CustomRequiredIndicator: () => React.JSX.Element;
+export declare const Sizes: () => React.JSX.Element;
+export declare const HelpText: () => React.JSX.Element;
+export declare const CheckedInitialState: () => React.JSX.Element;
+export declare const HiddenLabel: () => React.JSX.Element;
+export declare const DisabledAndUnchecked: () => React.JSX.Element;
+export declare const DisabledAndChecked: () => React.JSX.Element;
+export declare const Error: () => React.JSX.Element;

package/dist/components/CheckboxInput/components/Checkbox.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+import { ResponsiveProp } from '../../../types';
+import { BoxProps } from '../../Box/Box';
+type BaseSize = 'sm' | 'md' | 'lg';
+export type CheckboxSize = BaseSize | ResponsiveProp<BaseSize>;
+export interface CheckboxProps extends Omit<BoxProps, 'radius' | 'background' | 'as' | 'height'> {
+    /**
+     * The id attribute of the input.
+     */
+    id: string;
+    /**
+     * The checkbox input "checked" attribute.
+     */
+    isChecked: boolean;
+    /**
+     * Custom content to be displayed to right of checkbox.
+     */
+    label: string;
+    /**
+     * Callback function when input is changed.
+     */
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Custom class to apply to the checkbox container.
+     */
+    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?: React.ReactNode;
+    /**
+     * id of the element that labels the Checkbox
+     */
+    labelledby?: string;
+    /**
+     * If the input should be disabled and not focusable.
+     */
+    isDisabled?: boolean;
+    /**
+     * If the radio input should be hidden to make way for a custom checkbox.
+     */
+    isHidden?: boolean;
+    /**
+     * Whether the checkbox is rendered in an indeterminate state.
+     * NOTE: this change is only visual and it does not affect the checked or unchecked state of the checkbox.
+     */
+    isIndeterminate?: boolean;
+    /**
+     * The required and aria-required attributes on the input
+     */
+    isRequired?: boolean;
+    /**
+     * Callback function when input is blurred.
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function when input is focused.
+     */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * The size of the checkbox.
+     */
+    size?: CheckboxSize;
+    /**
+     * Value of the checkbox input element
+     */
+    value?: string | number;
+}
+export declare const Checkbox: React.FC<CheckboxProps>;
+export {};

package/dist/components/CheckboxInput/components/CheckboxIcon.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { BoxProps } from '../../Box/Box';
+import { CheckboxProps } from './Checkbox';
+export interface CheckboxIconProps extends BoxProps {
+    /**
+     * Custom className to be applied to root node of component.
+     */
+    className?: string;
+    /**
+     * Whether the input is in an error state. The icon will visually change accordingly.
+     */
+    error?: CheckboxProps['error'];
+    /**
+     * The checkbox input "checked" attribute.
+     */
+    isChecked?: CheckboxProps['isChecked'];
+    /**
+     * If the input should be disabled and not focusable.
+     */
+    isDisabled?: CheckboxProps['isDisabled'];
+    /**
+     * Whether the checkbox is rendered in an indeterminate state.
+     * NOTE: this change is only visual and it does not affect the checked or unchecked state of the checkbox.
+     */
+    isIndeterminate?: CheckboxProps['isIndeterminate'];
+}
+export declare const CheckboxIcon: React.FC<CheckboxIconProps>;

package/dist/components/DateInput/DateInput.d.ts

@@ -0,0 +1,55 @@
+import { FC } from 'react';
+import { DatePickerProps } from '../DatePicker/DatePicker';
+import { TextInputProps } from '../TextInput/TextInput';
+import { PopoverProps } from '../Popover/Popover';
+export interface DateInputProps {
+    /**
+     * Props object for DatePicker component.
+     */
+    datePickerProps: DatePickerProps;
+    /**
+     * Props object for TextInput component.
+     */
+    textInputProps: Omit<TextInputProps, 'onChange'>;
+    /**
+     * Format for final date to be displayed.
+     * Relies on date-fns/format --> https://date-fns.org/v1.9.0/docs/format
+     */
+    dateFormat?: string;
+    /**
+     * Additional settings for formatting date.
+     */
+    dateOptions?: {
+        /**
+         * The user's locale.
+         */
+        locale?: globalThis.Locale | undefined;
+        /**
+         * Start of week.
+         */
+        weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+        /**
+         * Should determine which week is week 1 of a new year.
+         */
+        firstWeekContainsDate?: number | undefined;
+        /**
+         * Whether to accept unicode tokens in format.
+         * See here --> https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
+         */
+        useAdditionalWeekYearTokens?: boolean | undefined;
+        /**
+         * Whether to accept unicode tokens in format.
+         * See here --> https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
+         */
+        useAdditionalDayOfYearTokens?: boolean | undefined;
+    };
+    /**
+     * Props to pass down to the Popover component.
+     */
+    popoverProps?: Omit<PopoverProps, 'children' | 'content' | 'isOpen'>;
+    /**
+     * Additional props to be spread to the `TextInput` element.
+     */
+    [x: string]: any;
+}
+export declare const DateInput: FC<DateInputProps>;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import { DateInput } from './DateInput';
+declare const meta: Meta<typeof DateInput>;
+export default meta;
+export declare const Basic: () => React.JSX.Element;
+export declare const Default: () => React.JSX.Element;
+export declare const DateRange: () => React.JSX.Element;
+export declare const WithMinAndMaxDates: () => React.JSX.Element;
+export declare const CustomDateFormat: () => React.JSX.Element;
+export declare const InputBlurEvent: () => React.JSX.Element;

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,86 @@
+import React, { FC, SyntheticEvent, ReactNode } from 'react';
+import { ReactDatePickerProps } from 'react-datepicker';
+export interface DatePickerProps extends ReactDatePickerProps<any, any> {
+    /**
+     * React children (to be rendered below the calendar dates).
+     */
+    children?: ReactNode;
+    /**
+     * Custom classname to be applied to the DatePicker container.
+     */
+    className?: string;
+    /**
+     * Callback that fires when a date is changed/selected.
+     */
+    onChange: (date: Date | [Date, Date] | null, event?: React.SyntheticEvent<any> | undefined) => void;
+    /**
+     * Callback that fires when a date is clicked.
+     */
+    onSelect?: ((date: Date, event: SyntheticEvent<any, Event> | undefined) => void) | undefined;
+    /**
+     * Custom Class to be applied to a single day element based on a date.
+     */
+    dayClassName?: ((date: Date) => string | null) | undefined;
+    /**
+     * Custom Class to be applied to a single week element based on a date.
+     */
+    weekClassName?: ((date: Date) => string | null) | undefined;
+    /**
+     * Custom Class to be applied to a single month element based on a date.
+     */
+    monthClassName?: ((date: Date) => string | null) | undefined;
+    /**
+     * Custom Class to be applied to a specific time.
+     */
+    timeClassName?: ((date: Date) => string | null) | undefined;
+    /**
+     * Custom format for weekday.
+     */
+    formatWeekDay?: (formattedDate: string) => string;
+    /**
+     * Last allowable/shown date
+     */
+    maxDate?: Date | null;
+    /**
+     * First allowable/shown date
+     */
+    minDate?: Date | null;
+    /**
+     * Months to be shown at one time
+     */
+    monthsShown?: number;
+    /**
+     * Date that the calendar will open to by default.
+     */
+    openToDate?: Date;
+    /**
+     * Currently selected date.
+     */
+    selected?: Date | null;
+    /**
+     * Whether or not the picker will return a range of dates.
+     */
+    selectsRange?: boolean;
+    /**
+     * Start date in a range
+     */
+    startDate?: Date | null;
+    /**
+     * Show month picker in two columns
+     */
+    showTwoColumnMonthYearPicker?: boolean;
+    /**
+     * See full month name in the month picker
+     */
+    showFullMonthYearPicker?: boolean;
+    /**
+     * Use the month picker
+     */
+    showMonthYearPicker?: boolean;
+    /**
+     * Additional props to be spread to rendered element
+     */
+    [x: string]: any;
+}
+export declare const DatePicker: FC<DatePickerProps>;
+export default DatePicker;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { DatePicker } from './DatePicker';
+import type { Meta } from '@storybook/react';
+declare const meta: Meta<typeof DatePicker>;
+export default meta;
+export declare const BasicExample: () => React.JSX.Element;
+export declare const DateRange: () => React.JSX.Element;
+export declare const MinAndMaxDates: () => React.JSX.Element;
+export declare const MonthPicker: () => React.JSX.Element;
+export declare const ShowMultipleMonths: () => React.JSX.Element;
+export declare const WithTimePicker: () => React.JSX.Element;
+export declare const OpenByDefaultOnASpecificDate: () => React.JSX.Element;
+export declare const WithChildren: () => React.JSX.Element;

package/dist/components/Details/Details.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DetailsSummary } from './DetailsSummary';
+import { BoxProps } from '../Box/Box';
+export interface DetailsProps extends BoxProps {
+    /**
+     * Whether the details below the summary are opened. Directly corresponds to `open` property in <details> element.
+     */
+    isOpen: boolean;
+}
+export declare const DetailsBaseComponent: React.FC<DetailsProps>;
+export interface DetailsStatic {
+    Summary: typeof DetailsSummary;
+}
+export type DetailsWithStaticComponents = typeof DetailsBaseComponent & DetailsStatic;
+export declare const Details: DetailsWithStaticComponents;

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

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

package/dist/components/Details/DetailsSummary.d.ts

@@ -0,0 +1,7 @@
+import React, { MouseEvent, KeyboardEvent } from 'react';
+import { BoxProps } from '../Box/Box';
+export interface DetailsSummaryProps extends BoxProps {
+    isDetailsOpen: boolean;
+    onToggle?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+}
+export declare const DetailsSummary: React.FC<DetailsSummaryProps>;

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,88 @@
+import React, { RefObject } from 'react';
+import { DimensionSize, CssDimensionValue } from '../../types';
+export type DrawerPlacementType = 'left' | 'right' | 'top' | 'bottom';
+export interface DrawerProps {
+    /**
+     * If the drawer is open
+     */
+    isOpen: boolean;
+    /**
+     * Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
+     */
+    allowPinchZoom?: boolean;
+    /**
+     * A drawer needs to be properly labeled to provide context for users with
+     * assistive technology such as screen readers. If a drawer 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 drawer's label by assistive technologies like screen readers.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Contents of the dialog.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional class names to add to the drawer content.
+     */
+    className?: string;
+    /**
+     * Whether the drawer has a visible close button.
+     * If a title is defined, then a close button will be rendered
+     */
+    closeButton?: boolean;
+    /**
+     * If true, the drawer will close when the overlay is clicked
+     */
+    closeOnOverlayClick?: boolean;
+    /**
+     * The ref of the container where the drawer will be inserted into the DOM.
+     * By default, drawers are inserted in the document.body, but if need be they can
+     * be scoped as necessary.
+     */
+    containerRef?: React.RefObject<Node>;
+    /**
+     * By default, focus is trapped within the drawer.
+     * If true, focus will not be trapped within the contents of the drawer.
+     */
+    dangerouslyBypassFocusLock?: boolean;
+    /**
+     * By default, the drawer locks scrolling on the body, but in some cases you may want to allow for scrolling.
+     * If true, this will allow the body to scroll while the drawer is open.
+     */
+    dangerouslyBypassScrollLock?: boolean;
+    /**
+     * If true, the overlay will not be rendered, scrolling for the entire page will remain enabled,
+     * and focus will not be locked to the contents of the drawer
+     */
+    hideOverlay?: 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>;
+    /**
+     * Which edge of the viewport should the drawer appear from
+     */
+    placement?: DrawerPlacementType;
+    /**
+     * Function that is called whenever the user either hits
+     *  the "Escape" key, clicks the close button icon, or clicks the overlay.
+     */
+    onDismiss?: (event?: React.SyntheticEvent) => void;
+    /**
+     * Title to be displayed at the top of the Drawer.
+     * A close button will be rendered automatically if this prop is defined.
+     */
+    title?: string;
+    /**
+     * The width of the Drawer when opened. Can be given a standard css value (px, rem, em, %),
+     * or a [width token](/?path=/story/design-tokens-design-tokens--page#width)
+     */
+    width?: DimensionSize | CssDimensionValue;
+}
+export declare const Drawer: React.FC<DrawerProps>;

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

@@ -0,0 +1,15 @@
+import { Drawer } from './Drawer';
+import type { Meta } from '@storybook/react';
+import React from 'react';
+declare const meta: Meta<typeof Drawer>;
+export default meta;
+export declare const BasicUsage: () => React.JSX.Element;
+export declare const Placement: () => React.JSX.Element;
+export declare const DrawerHeader: () => React.JSX.Element;
+export declare const TitleAndCloseButton: () => React.JSX.Element;
+export declare const CloseButtonOnly: () => React.JSX.Element;
+export declare const Width: () => React.JSX.Element;
+export declare const Height: () => React.JSX.Element;
+export declare const HiddenOverlay: () => React.JSX.Element;
+export declare const InitialFocusRef: () => React.JSX.Element;
+export declare const ContainedDrawer: () => React.JSX.Element;

package/dist/components/FormControl/FormControl.d.ts

@@ -0,0 +1,38 @@
+import React, { ReactNode } from 'react';
+import { BoxProps } from '../Box/Box';
+export interface FormControlProps extends BoxProps {
+    /**
+     * The input's id attribute. Used to programmatically tie the input with its label.
+     */
+    id: string;
+    /**
+     * Custom content to be displayed above the input. If the label is hidden, will be used to set aria-label attribute.
+     */
+    label: 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;
+    /**
+     * Visually hide the label.
+     */
+    hideLabel?: boolean;
+    /**
+     * Additional clarifying text to help describe the input
+     */
+    helpText?: ReactNode;
+    /**
+     * The input's disabled attribute
+     */
+    isDisabled?: boolean;
+    /**
+     * The required and aria-required attributes on the input
+     */
+    isRequired?: boolean;
+    /**
+     * Visual indicator that the field is required, that gets appended to the label
+     */
+    requiredIndicator?: ReactNode;
+}
+export declare const FormControl: React.ForwardRefExoticComponent<Omit<FormControlProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/FormLabel/FormLabel.d.ts

@@ -0,0 +1,41 @@
+import { FC, ReactNode } from 'react';
+import { BoxProps } from '../Box/Box';
+export interface FormLabelProps extends BoxProps {
+    /**
+     * Content to be rendered inside the label.
+     */
+    children: ReactNode;
+    /**
+     * The id of the form control that the label is labeling
+     */
+    inputId: string;
+    /**
+     * Custom class to pass to label element.
+     */
+    className?: string;
+    /**
+     * Additional clarifying text to that helps describe the field
+     */
+    helpText?: ReactNode;
+    /**
+     * Mark the label has disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * prop deprecated: no longer in use and will be remove in next major release.
+     */
+    isFieldRequired?: boolean;
+    /**
+     * Apply custom styling to labels for a radio input
+     */
+    isRadioInputLabel?: boolean;
+    /**
+     * Visual indicator that the field is required, that gets appended to the label
+     */
+    requiredIndicator?: ReactNode;
+    /**
+     * Additional props to be spread to rendered element
+     */
+    [x: string]: any;
+}
+export declare const FormLabel: FC<FormLabelProps>;

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

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

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

@@ -0,0 +1,18 @@
+import React from 'react';
+declare const meta: {
+    title: string;
+    parameters: {
+        chromatic: {
+            modes: {
+                light: {
+                    theme: string;
+                };
+                dark: {
+                    theme: string;
+                };
+            };
+        };
+    };
+};
+export default meta;
+export declare const FormikForm: () => React.JSX.Element;

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

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

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

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

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

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

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

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