@hyphen/hyphen-components 2.9.0 → 2.9.2

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

@@ -0,0 +1,57 @@
+import React, { ChangeEvent, FocusEvent, ReactNode } from 'react';
+import { ResponsiveProp } from '../../../types';
+type BaseSize = 'sm' | 'md' | 'lg';
+export type RadioSize = BaseSize | ResponsiveProp<BaseSize>;
+export interface RadioInputProps {
+    /**
+     * Radio input name.
+     */
+    name: string;
+    /**
+     * Callback function to call on change event.
+     */
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Options for radio group.
+     */
+    option: {
+        id: string;
+        value: string;
+        label: ReactNode;
+        disabled?: boolean | null;
+    };
+    /**
+     * Additional classes to add.
+     */
+    className?: string;
+    /**
+     * If the radio group should be disabled and not focusable.
+     */
+    isDisabled?: boolean;
+    /**
+     * If the radio input should be hidden to make way for a custom radio.
+     */
+    isHidden?: boolean;
+    /**
+     * The required and aria-required attributes
+     */
+    isRequired?: boolean;
+    /**
+     * If the radio group should be disabled and not focusable.
+     */
+    isSelected?: 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;
+    /**
+     * The size of the radio icon.
+     */
+    size: RadioSize;
+}
+export declare const RadioInput: React.ForwardRefExoticComponent<RadioInputProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { BoxProps } from '../../Box/Box';
+import { RadioInputProps } from './RadioInput';
+import { RadioGroupProps } from '../RadioGroup';
+export interface RadioIconProps 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?: RadioGroupProps['error'];
+    /**
+     * Whether the radio is selected.
+     */
+    isSelected?: RadioInputProps['isSelected'];
+    /**
+     * If the input should be disabled and not focusable.
+     */
+    isDisabled?: RadioInputProps['isDisabled'];
+    /**
+     * Additional props to be spread to rendered element
+     */
+    [x: string]: any;
+}
+export declare const RadioInputIcon: React.FC<RadioIconProps>;

package/dist/components/ResponsiveProvider/ResponsiveProvider.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ResponsiveContextShape {
+    isCreated: boolean;
+    innerWidth?: number;
+    innerHeight?: number;
+    outerWidth?: number;
+    outerHeight?: number;
+}
+export declare const ResponsiveContext: React.Context<ResponsiveContextShape>;
+export interface ResponsiveProviderProps {
+    children?: React.ReactNode;
+    /**
+     * Time (in milliseconds) to delay execution of resize handler. Default is 50.
+     */
+    throttle?: number;
+}
+export declare const ResponsiveProvider: React.FC<ResponsiveProviderProps>;

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

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

package/dist/components/SelectInput/SelectInput.d.ts

@@ -0,0 +1,110 @@
+import { FC, FocusEvent, ReactNode } from 'react';
+import { OptionsOrGroups, OnChangeValue } from 'react-select';
+import { ResponsiveProp } from '../../types';
+import { GroupBase } from 'react-select/dist/declarations/src/types';
+type SelectOptions = any;
+type SelectGroupOptions = GroupBase<SelectOptions>;
+export type SelectInputOptions = OptionsOrGroups<SelectOptions, SelectGroupOptions>;
+export type SimulatedEventPayloadType = {
+    target: {
+        name: string;
+        value: OnChangeValue<SelectInputOptions, boolean>;
+    };
+};
+export type TextInputSize = 'sm' | 'md' | 'lg' | ResponsiveProp<'sm' | 'md' | 'lg'>;
+export interface SelectInputProps {
+    /**
+     * The id attribute of the input.
+     */
+    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;
+    /**
+     * Callback function to call on change event.
+     */
+    onChange: (event: SimulatedEventPayloadType) => void;
+    /**
+     * Options for dropdown list.
+     */
+    options: SelectInputOptions;
+    /**
+     * The value(s) of select.
+     */
+    value: any | any[];
+    /**
+     * Autofocus select input on render.
+     */
+    autoFocus?: boolean;
+    /**
+     * 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;
+    /**
+     * Visually hide the label.
+     */
+    hideLabel?: boolean;
+    /**
+     * If the input value is clearable programmatically.
+     */
+    isClearable?: boolean;
+    /**
+     * If the input should be disabled and not focusable.
+     */
+    isDisabled?: boolean;
+    /**
+     * Is multi select enabled.
+     */
+    isMulti?: boolean;
+    /**
+     * The required and aria-required attributes on the input
+     */
+    isRequired?: boolean;
+    /**
+     * Select 'name' attribute.
+     */
+    name?: string;
+    /**
+     * A ref to portal the dropdown menu to. This is useful when the dropdown is located in a smaller container
+     * and we want to avoid cutting off the menu.
+     */
+    menuPortalTarget?: HTMLElement;
+    /**
+     * Callback function to call on blur event.
+     */
+    onBlur?: (event: FocusEvent<HTMLElement>) => void;
+    /**
+     * Callback function to call on focus event.
+     */
+    onFocus?: (event: FocusEvent<HTMLElement>) => void;
+    /**
+     * Placeholder for input.
+     */
+    placeholder?: string;
+    /**
+     * Visual indicator that the field is required, that gets appended to the label
+     */
+    requiredIndicator?: ReactNode;
+    /**
+     * The size of the text input.
+     */
+    size?: TextInputSize;
+    /**
+     * Additional props to be spread. These will be applied specifically to
+     * the `react-select` component that powers the select. For full docs on
+     * react-select props, [Click Here](https://react-select.com/props)
+     */
+    [x: string]: any;
+}
+export declare const SelectInput: FC<SelectInputProps>;
+export {};

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { SelectInput } from './SelectInput';
+import type { Meta } from '@storybook/react';
+declare const meta: Meta<typeof SelectInput>;
+export default meta;
+export declare const Default: () => React.JSX.Element;
+export declare const PreSelected: () => React.JSX.Element;
+export declare const HelpText: () => React.JSX.Element;
+export declare const Placeholder: () => React.JSX.Element;
+export declare const HiddenLabel: () => React.JSX.Element;
+export declare const MultiSelect: () => React.JSX.Element;
+export declare const MultiSelectAndPreSelected: () => React.JSX.Element;
+export declare const Autofocus: () => React.JSX.Element;
+export declare const Required: () => React.JSX.Element;
+export declare const Disabled: () => React.JSX.Element;
+export declare const Clearable: () => React.JSX.Element;
+export declare const Error: () => React.JSX.Element;
+export declare const Sizes: () => React.JSX.Element;
+export declare const WithPortal: () => React.JSX.Element;
+export declare const CustomClasses: () => React.JSX.Element;

package/dist/components/SelectInputInset/SelectInputInset.d.ts

@@ -0,0 +1,92 @@
+import { ChangeEvent, MouseEvent, KeyboardEvent, FocusEvent, ForwardRefExoticComponent, ReactNode, HTMLProps } from 'react';
+import { ResponsiveProp } from '../../types';
+import { BoxProps } from '../Box/Box';
+export type SelectInputInsetSize = 'md' | 'lg';
+export interface SelectInputInsetProps {
+    /**
+     * 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;
+    /**
+     * List of options for the select input.
+     */
+    options: {
+        value: string | number;
+        label: string | number;
+    }[];
+    /**
+     * Callback function to call on change event.
+     */
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Value of selected option. Should match the value key in the option object.
+     */
+    value: string | number | null;
+    /**
+     * Automatically focus the input when the page is loaded.
+     */
+    autoFocus?: boolean;
+    /**
+     * Custom class to be added to standard input classes.
+     */
+    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;
+    /**
+     * Props passed directly to the input element of the component
+     */
+    inputProps?: BoxProps & HTMLProps<HTMLInputElement>;
+    /**
+     * The input's disabled attribute
+     */
+    isDisabled?: boolean;
+    /**
+     * The required and aria-required attributes on the input
+     */
+    isRequired?: boolean;
+    /**
+     * The input's 'name' attribute.
+     */
+    name?: string;
+    /**
+     * Callback function to call on blur event.
+     */
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function to call when input us cleared. When this is passed,
+     * the input will display an icon on the right side, for triggering this callback.
+     */
+    onClear?: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+    /**
+     * Callback function to call on focus event.
+     */
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * The input placeholder attribute.
+     */
+    placeholder?: string;
+    /**
+     * Visual indicator that the field is required, that gets appended to the label
+     */
+    requiredIndicator?: ReactNode;
+    /**
+     * The size of the text input.
+     */
+    size?: SelectInputInsetSize | ResponsiveProp<SelectInputInsetSize>;
+    /**
+     * Additional props to be spread to rendered element
+     */
+    [x: string]: any;
+}
+export declare const SelectInputInset: ForwardRefExoticComponent<SelectInputInsetProps>;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SelectInputInset } from './SelectInputInset';
+import type { Meta } from '@storybook/react';
+declare const meta: Meta<typeof SelectInputInset>;
+export default meta;
+export declare const Default: () => React.JSX.Element;
+export declare const Required: () => React.JSX.Element;
+export declare const HelpText: () => React.JSX.Element;
+export declare const ValidationError: () => React.JSX.Element;
+export declare const Disabled: () => React.JSX.Element;
+export declare const Clearable: () => React.JSX.Element;
+export declare const Sizes: () => React.JSX.Element;

package/dist/components/SelectInputNative/SelectInputNative.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ResponsiveProp } from '../../types';
+import { BoxProps } from '../Box/Box';
+import { FormControlProps } from '../FormControl/FormControl';
+export type SelectInputNativeSize = 'sm' | 'md' | 'lg';
+export interface SelectInputNativeProps extends BoxProps, FormControlProps {
+    /**
+     * List of options for the select input.
+     */
+    options: {
+        value: string | number;
+        label: string | number;
+    }[];
+    /**
+     * onChange callback from select element.
+     */
+    onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    /**
+     * Value of selected option. Should match the value key in the option object.
+     */
+    value: string | number | null;
+    /**
+     * The input's 'name' attribute.
+     */
+    name?: string;
+    /**
+     * Visual indicator that the field is required, that gets appended to the label
+     */
+    requiredIndicator?: React.ReactNode;
+    /**
+     * Size of the input. ('sm' | 'md' | 'lg')
+     */
+    size?: SelectInputNativeSize | ResponsiveProp<SelectInputNativeSize>;
+    /**
+     * Whether the input is autofocused on initial render.
+     */
+    autoFocus?: HTMLSelectElement['autofocus'];
+    /**
+     * Additional props to be spread.
+     */
+    [x: string]: any;
+}
+export declare const SelectInputNative: React.FC<SelectInputNativeProps>;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SelectInputNative } from './SelectInputNative';
+import type { Meta } from '@storybook/react';
+declare const meta: Meta<typeof SelectInputNative>;
+export default meta;
+export declare const Default: () => React.JSX.Element;
+export declare const PreSelected: () => React.JSX.Element;
+export declare const HelpText: () => React.JSX.Element;
+export declare const Placeholder: () => React.JSX.Element;
+export declare const HiddenLabel: () => React.JSX.Element;
+export declare const Autofocus: () => React.JSX.Element;
+export declare const Required: () => React.JSX.Element;
+export declare const CustomRequiredIndicator: () => React.JSX.Element;
+export declare const Disabled: () => React.JSX.Element;
+export declare const Error: () => React.JSX.Element;
+export declare const Sizes: () => React.JSX.Element;

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+export interface SpinnerProps {
+    /**
+     * Custom className to be applied to spinner container div element.
+     */
+    className?: string;
+    /**
+     * Size of the spinner.
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+export declare const Spinner: FC<SpinnerProps>;

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

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

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,86 @@
+import { FC } from 'react';
+import { Column, Row, EventWithColumnKey } from '../../types';
+export interface TableProps {
+    /**
+     * Columns for the table. See Column definition below for details.
+     */
+    columns: Column[];
+    /**
+     * The data rows to be displayed
+     */
+    rows: Row[];
+    /**
+     * Key that represents a unique value for a row. This is necessary in
+     * order to supply React with a node key on each row.
+     */
+    rowKey: string;
+    /**
+     * Additional classes to add.
+     */
+    className?: string;
+    /**
+     * Text alignment for all table cells. Can be superseded by passing the same prop into the `Column` object
+     * for a specific column.
+     */
+    align?: 'left' | 'right' | 'center';
+    /**
+     * Global placeholder for empty cells. Can be overwritten by setting the same attribute
+     * in the `Column` config.
+     */
+    emptyCellPlaceholder?: string | number | undefined;
+    /**
+     * Enable a hover state on table rows.
+     */
+    hoverableRows?: boolean;
+    /**
+     * Remove borders around table, thead, tbody, td, etc.
+     */
+    isBorderless?: boolean;
+    /**
+     * Make Table more compact by cutting cell padding in half.
+     */
+    isCompact?: boolean;
+    /**
+     * If table scrolls vertically, header will remain stuck to the top of the table, and not scroll away.
+     */
+    hasStickyHeader?: boolean;
+    /**
+     * Set to true if data is loading.
+     */
+    isLoading?: boolean;
+    /**
+     * Set the maximum width and height and enable scrolling within the container when the table grows
+     * past those values. Useful for when we want to render a large table but not force the parent container
+     * to grow and instead make the user scroll. Set values to boolean `true` to enable `overflow: scroll` on the table
+     * without specifying a width/height
+     */
+    isScrollable?: {
+        x?: boolean;
+        y?: boolean;
+    };
+    /**
+     * Adds zebra-striping to any table row within the table body.
+     */
+    isStriped?: boolean;
+    /**
+     * Callback function to fire on sorting one of the table headers.
+     */
+    onSort?: (event: EventWithColumnKey) => void;
+    /**
+     * The key of the sorted column and its sort direction.
+     */
+    sortedColumn?: {
+        dataKey: string | undefined;
+        sortDirection: 'none' | 'ascending' | 'descending' | undefined;
+    };
+    /**
+     * Control the `table-layout` css property for the table.
+     */
+    useFixedTableLayout?: boolean;
+    /**
+     * Truncate overflow inside column based on column width. Can be overwritten on specific columns,
+     * by passing `truncateOverflow` value on a specific Column
+     */
+    truncateOverflow?: boolean;
+}
+export declare const Table: FC<TableProps>;

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

@@ -0,0 +1,31 @@
+import type { Meta } from '@storybook/react';
+import React from 'react';
+import { Table } from './Table';
+declare const meta: Meta<typeof Table>;
+export default meta;
+export declare const Column: () => React.JSX.Element;
+export declare const CommonExample: () => React.JSX.Element;
+export declare const Loading: () => React.JSX.Element;
+export declare const Sortable: () => React.JSX.Element;
+export declare const SortablewithDefaultSortedColumn: () => React.JSX.Element;
+export declare const SortableAndLoading: () => React.JSX.Element;
+export declare const Scrollable: () => React.JSX.Element;
+export declare const ScrollablewithStickyHeader: () => React.JSX.Element;
+export declare const ScrollablewithFirstColumnStuckToLeft: () => React.JSX.Element;
+export declare const ScrollablewithStickyHeaderAndNthColumnStuckToLeft: () => React.JSX.Element;
+export declare const ScrollableWithLastColumnStuckToRight: () => React.JSX.Element;
+export declare const ScrollableWithStickyHeaderAndFirstColumnStuckToLeft: () => React.JSX.Element;
+export declare const ScrollableAndLoading: () => React.JSX.Element;
+export declare const FixedWidthColumns: () => React.JSX.Element;
+export declare const FixedTableLayout: () => React.JSX.Element;
+export declare const TruncateOverflow: () => React.JSX.Element;
+export declare const CustomActions: () => React.JSX.Element;
+export declare const EmptyCellPlaceholder: () => React.JSX.Element;
+export declare const Borderless: () => React.JSX.Element;
+export declare const Compact: () => React.JSX.Element;
+export declare const Striped: () => React.JSX.Element;
+export declare const Hoverable: () => React.JSX.Element;
+export declare const StripedAndHoverable: () => React.JSX.Element;
+export declare const AligningCellText: () => React.JSX.Element;
+export declare const GlobalAlign: () => React.JSX.Element;
+export declare const ComponentAsColumnHeader: () => React.JSX.Element;

package/dist/components/Table/TableBody/TableBody.d.ts

@@ -0,0 +1,52 @@
+import { FC, Key } from 'react';
+import { Column, Row } from '../../../types';
+export interface TableBodyProps {
+    /**
+     * The table columns to be rendered
+     */
+    columns: Column[];
+    /**
+     * The unique key to identify a React node for each row.
+     */
+    rowKey: Key;
+    /**
+     * The table rows to be rendered
+     */
+    rows: Row[];
+    /**
+     * Text alignment for all table cells. Can be superseded by passing the same prop into the `Column` object
+     * for a specific column.
+     */
+    align?: 'left' | 'right' | 'center';
+    /**
+     * A custom class to apply to the table body.
+     */
+    className?: string;
+    /**
+     * A global placeholder for empty cells. Note: can be overwriten by
+     * the same attribute passed for an individual column config object.
+     */
+    emptyCellPlaceholder?: string | number | undefined;
+    /**
+     * Enable a hover state on table rows.
+     */
+    hoverableRows?: boolean;
+    /**
+     * Whether the table has borders or not.
+     */
+    isBorderless?: boolean;
+    /**
+     * Whether the table rows have smaller padding
+     */
+    isCompact?: boolean;
+    /**
+     * Whether the table rows have a striped pattern
+     */
+    isStriped?: boolean;
+    /**
+     * Truncate overflow inside column based on column width. Can be overwritten on specific columns,
+     * by passing `truncateOverflow` value on a specific Column
+     */
+    truncateOverflow?: boolean;
+}
+export declare const TableBody: FC<TableBodyProps>;

package/dist/components/Table/TableBody/TableBodyCell/TableBodyCell.d.ts

@@ -0,0 +1,45 @@
+import { FC, ReactNode } from 'react';
+export interface TableBodyCellProps {
+    /**
+     * Text alignment for all table cells. Can be superseded by passing the same prop into the `Column` object
+     * for a specific column.
+     */
+    align?: 'left' | 'right' | 'center';
+    /**
+     * Children node to be rendered.
+     */
+    children?: ReactNode;
+    /**
+     * Custom class to be applied to `<tr>` element.
+     */
+    className?: string;
+    /**
+     * Remove borders around td elements.
+     */
+    isBorderless?: boolean;
+    /**
+     * Reduces padding inside table cells.
+     */
+    isCompact?: boolean;
+    /**
+     * Will stick to either the left or right side of a table during horizontal scroll.
+     */
+    sticky?: 'left' | 'right';
+    /**
+     * Truncates the cell contents based on width established by `Column`
+     * NOTE: Truncate only on cells with primitive data types.
+     */
+    truncateOverflow?: boolean;
+    /**
+     * Placeholder for an empty cell, will be rendered when content is `null` `undefined`
+     * or `''`. Placeholders will not be rendered on values of `0`.
+     */
+    emptyCellPlaceholder?: ReactNode;
+    /**
+     * Fixed width for a particular cell.
+     * Value should be taken from column config so it matches its parent.
+     */
+    width?: number;
+}
+declare const TableBodyCell: FC<TableBodyCellProps>;
+export default TableBodyCell;