@ilo-org/react 0.17.8 → 0.18.1

package/lib/types/components/Tabs/Tabs.props.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { IconProps } from '../Icon/Icon.props';
+
+export interface TabsProps {
+    /**
+     * Specify the items inside a tab
+     */
+    items: Required<Array<TabItem>>;
+}
+export interface TabItem {
+    icon?: IconProps;
+    label: Required<string>;
+    content: Required<ReactNode>;
+}

package/lib/types/components/Tabs/index.d.ts

@@ -0,0 +1 @@
+export { default as Tabs } from './Tabs';

package/lib/types/components/Tag/Tag.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { TagProps } from './Tag.props';
+
+declare const Tag: FC<TagProps>;
+export default Tag;

package/lib/types/components/Tag/Tag.props.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { TagTypes } from '../../types';
+
+export interface TagProps {
+    /**
+     * Callback to event;
+     */
+    callback?: (e: React.MouseEvent<HTMLButtonElement>) => unknown;
+    /**
+     * Specify the label for the tag
+     */
+    children?: ReactNode;
+    /**
+     * The tag's unique id.
+     */
+    id: string;
+    /**
+     * Specify an optional className to be added to your Tag.
+     */
+    className?: string;
+    /**
+     * Specify a tag type
+     */
+    type?: TagTypes;
+    /**
+     * Specify an optional url to be added to your Tag.
+     */
+    url?: string;
+}

package/lib/types/components/Tag/TagCtx.d.ts

@@ -0,0 +1,3 @@
+import { TagSetContextProps } from './TagSet.props';
+
+export declare const TagSetContext: import('react').Context<TagSetContextProps>;

package/lib/types/components/Tag/TagSet.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { TagSetProps } from './TagSet.props';
+
+declare const TagSet: FC<TagSetProps>;
+export default TagSet;

package/lib/types/components/Tag/TagSet.props.d.ts

@@ -0,0 +1,31 @@
+import { Dispatch, ReactElement, SetStateAction } from 'react';
+
+export { default as TagSet } from './TagSet';
+export interface TagSetProps {
+    /**
+     * Allow multiple tags to be active at once
+     */
+    allowMultipleActive?: boolean;
+    /**
+     * Callback to onButtonClick event;
+     */
+    onButtonClick?: (e: React.MouseEvent<HTMLButtonElement>, i: number) => unknown;
+    /**
+     * Specify the content of your Tag.
+     */
+    children?: ReactElement<TagSetProps> | ReactElement<TagSetProps>[];
+    /**
+     * Specify an optional className to be added to your accordion.
+     */
+    className?: string;
+    /**
+     * Default Tags that are active
+     */
+    defaultTagActive?: string[];
+}
+export interface TagSetContextProps {
+    activeItems: string[];
+    setActiveItems: Dispatch<SetStateAction<string[]>>;
+    allowMultipleActive: boolean;
+    onButtonClick?: (e: React.MouseEvent<HTMLButtonElement>, i: number) => void;
+}

package/lib/types/components/Tag/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tag } from './Tag';
+export { default as TagSet } from './TagSet';

package/lib/types/components/TextInput/TextInput.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { TextInputProps } from './TextInput.props';
+
+declare const LabelledTextInput: React.ForwardRefExoticComponent<TextInputProps & import('../FormControl/FormControl.props').FormControlPublicProps & {
+    inputStyle?: React.CSSProperties | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default LabelledTextInput;

package/lib/types/components/TextInput/TextInput.props.d.ts

@@ -0,0 +1,17 @@
+import { FormFieldProps, TextInputTypes, LabelledFormFieldProps } from '../../types';
+
+export interface TextInputProps extends FormFieldProps<HTMLInputElement> {
+    /**
+     * Optional pattern attribute for phone numbers, zip codes, etc.
+     */
+    pattern?: string;
+    /**
+     * Specify an optional className to be added to your Input component.
+     */
+    placeholder?: string;
+    /**
+     * The input's type.
+     */
+    type: TextInputTypes;
+}
+export type LabelledTextInputProps = LabelledFormFieldProps<TextInputProps>;

package/lib/types/components/TextInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TextInput } from './TextInput';
+export * as TextInputArgs from './TextInput.args';

package/lib/types/components/Textarea/Textarea.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { TextareaProps } from './Textarea.props';
+
+declare const LabelledTextarea: React.ForwardRefExoticComponent<TextareaProps & import('../FormControl/FormControl.props').FormControlPublicProps & {
+    inputStyle?: React.CSSProperties | undefined;
+} & React.RefAttributes<HTMLTextAreaElement>>;
+export default LabelledTextarea;

package/lib/types/components/Textarea/Textarea.props.d.ts

@@ -0,0 +1,37 @@
+import { FormFieldProps, LabelledFormFieldProps } from '../../types';
+
+export interface TextareaProps extends FormFieldProps<HTMLTextAreaElement> {
+    /**
+     * The Textarea's onChange callback.
+     */
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => unknown;
+    /**
+     * Activate automatic spelling correction and processing of text substitutions
+     **/
+    autocorrect?: "on" | "off";
+    /**
+     *  The id of the form element the Textarea belongs to if it's not nested inside the form.
+     **/
+    form?: string;
+    /**
+     * The Textarea's maxlength
+     */
+    maxlength?: number;
+    /**
+     * The Textarea's minlength
+     */
+    minlength?: number;
+    /**
+     * Specify an optional className to be added to your Textarea component.
+     */
+    placeholder?: string;
+    /**
+     * Specifies whether the textarea is subject to spellchecking by the underlying browser/OS
+     **/
+    spellcheck?: boolean | "default";
+    /**
+     *  How the control should wrap the value for submission.
+     **/
+    wrap?: "hard" | "soft" | "off";
+}
+export type LabelledTextareaProps = LabelledFormFieldProps<TextareaProps>;

package/lib/types/components/Textarea/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea.props';
+export { default as TextareaArgs } from './Textarea.args';

package/lib/types/components/Toggle/Toggle.d.ts

@@ -0,0 +1,6 @@
+import { ToggleProps } from './Toggle.props';
+
+declare const LabelledToggle: import('react').ForwardRefExoticComponent<ToggleProps & import('../FormControl/FormControl.props').FormControlPublicProps & {
+    inputStyle?: import('react').CSSProperties | undefined;
+} & import('react').RefAttributes<HTMLInputElement>>;
+export default LabelledToggle;

package/lib/types/components/Toggle/Toggle.props.d.ts

@@ -0,0 +1,22 @@
+import { FormFieldProps, LabelledFormFieldProps } from '../../types';
+
+export interface ToggleProps extends FormFieldProps<HTMLInputElement> {
+    /**
+     * Specify the size of your Toggle. Defaults to "medium".
+     */
+    size?: "large" | "medium" | "small";
+    /**
+     * Specify whether your Toggle is checked by default. Defaults to false.
+     *
+     */
+    defaultChecked?: boolean;
+    /**
+     * Specify whether your Toggle is checked. Defaults to undefined.
+     */
+    checked?: boolean;
+    /**
+     * OnClick handler for the input element.
+     */
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => unknown;
+}
+export type LabelledToggleProps = LabelledFormFieldProps<ToggleProps>;

package/lib/types/components/Toggle/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Toggle } from './Toggle';
+export type { ToggleProps } from './Toggle.props';
+export * as ToggleArgs from './Toggle.args';

package/lib/types/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { TooltipProps } from './Tooltip.props';
+
+declare const Tooltip: FC<TooltipProps>;
+export default Tooltip;

package/lib/types/components/Tooltip/Tooltip.props.d.ts

@@ -0,0 +1,33 @@
+import { TooltipThemes, TooltipIconThemes } from '../../types';
+
+export interface TooltipProps {
+    /**
+     * Specify an optional className to be added to your Tooltip.
+     */
+    className?: string;
+    /**
+     * Should the tooltip appear on hover of an info icon?
+     */
+    icon?: boolean;
+    /**
+     * Set the id of the tooltip
+     */
+    id?: string;
+    /**
+     * Set the label for the tooltip
+     */
+    label?: Required<string>;
+    /**
+     * Set whether the tooltip is visible or not
+     */
+    isVisible?: boolean;
+    /**
+     * Describe the theme of the tooltip
+     */
+    theme?: Required<TooltipThemes>;
+    /**
+     * Describe the background theme of the tooltip
+     */
+    iconTheme?: Required<TooltipIconThemes>;
+    children?: React.ReactNode;
+}

package/lib/types/components/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export { default as Tooltip } from './Tooltip';

package/lib/types/components/Video/Video.d.ts

@@ -0,0 +1,5 @@
+import { VideoProps } from './Video.props';
+import { VideoPlayerRef } from './VideoPlayer.props';
+
+declare const Video: import('react').ForwardRefExoticComponent<VideoProps & import('react').RefAttributes<VideoPlayerRef>>;
+export default Video;

package/lib/types/components/Video/Video.props.d.ts

@@ -0,0 +1,29 @@
+import { VideoPlayerControls } from './VideoPlayer.props';
+
+export interface Poster {
+    src: string;
+    alt: string;
+}
+export interface VideoProps {
+    src: string;
+    /**
+     * Specify the strings to be used as labels for the video controls
+     */
+    controls?: VideoPlayerControls;
+    /**
+     * if YouTube, set to true
+     */
+    youtube?: boolean;
+    /**
+     * Specify the caption for the image/video
+     */
+    caption?: string;
+    /**
+     * Specify an optional className to be added to your Media.
+     */
+    className?: string;
+    /**
+     * Specify the image src for the image
+     */
+    poster?: Poster;
+}

package/lib/types/components/Video/VideoPlayer.d.ts

@@ -0,0 +1,4 @@
+import { VideoPlayerProps, VideoPlayerRef } from './VideoPlayer.props';
+
+declare const VideoPlayer: import('react').ForwardRefExoticComponent<VideoPlayerProps & import('react').RefAttributes<VideoPlayerRef>>;
+export default VideoPlayer;

package/lib/types/components/Video/VideoPlayer.props.d.ts

@@ -0,0 +1,43 @@
+import { Poster } from './Video.props';
+import { default as videojs } from 'video.js';
+
+export interface VideoPlayerRef {
+    player: videojs.Player | undefined;
+}
+export interface VideoPlayerControls {
+    /**
+     * Specify the label for the fullscreen button
+     */
+    fullscreen: string;
+    /**
+     * Specify the label for the  play button
+     */
+    play: string;
+    /**
+     * Specify the label for the pause button
+     */
+    pause: string;
+    /**
+     * Specify the label for the volume button
+     */
+    volume: string;
+}
+export interface VideoPlayerProps {
+    src: string;
+    /**
+     * Specify an optional className to be added to your Media.
+     */
+    className?: string;
+    /**
+     * Specify the strings to be used as labels for the video controls
+     */
+    controls?: VideoPlayerControls;
+    /**
+     *  poster image for video
+     */
+    poster?: Poster;
+    /**
+     * if YouTube, set to true
+     */
+    youtube?: boolean;
+}

package/lib/types/components/Video/index.d.ts

@@ -0,0 +1 @@
+export { default as Video } from './Video';

package/lib/types/components/index.d.ts

@@ -0,0 +1,41 @@
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, } from './Accordion';
+export { Form } from './Form';
+export { Collapse } from './Collapse';
+export { Empty } from './Empty';
+export { Image } from './Image';
+export { Loading } from './Loading';
+export { Radio } from './Radio';
+export { Tag } from './Tag';
+export { Button } from './Button';
+export { ContextMenu } from './ContextMenu';
+export { Fieldset } from './Fieldset';
+export { GlobalProvider } from './GlobalProvider';
+export { Notification } from './Notification';
+export { ReadMore } from './ReadMore';
+export { Textarea } from './Textarea';
+export { Callout } from './Callout';
+export { Credit } from './Credit';
+export { FileUpload } from './FileUpload';
+export { Heading } from './Heading';
+export { Link } from './Link';
+export { NumberPicker } from './NumberPicker';
+export { RichText } from './RichText';
+export { Tooltip } from './Tooltip';
+export { Checkbox } from './Checkbox';
+export { DatePicker } from './DatePicker';
+export { Hero } from './Hero';
+export { LinkList } from './LinkList';
+export { Pagination } from './Pagination';
+export { SearchField } from './SearchField';
+export { Video } from './Video';
+export { Dropdown } from './Dropdown';
+export { Icon } from './Icon';
+export { List } from './List';
+export { Profile } from './Profile';
+export { TableOfContents } from './TableOfContents';
+export { Footer } from './Footer';
+export { LocalNav } from './LocalNav';
+export { Navigation } from './Navigation';
+export { CardGroup } from './Cards/CardGroup';
+export { Breadcrumb } from './Breadcrumb';
+export { Tabs } from './Tabs';

package/lib/types/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useGlobalSettings } from './useGlobalSettings';
+export { default as usePrevious } from './usePrevious';

package/lib/types/hooks/useGlobalSettings.d.ts

@@ -0,0 +1,4 @@
+declare const useGlobalSettings: () => {
+    prefix: string | undefined;
+};
+export default useGlobalSettings;

package/lib/types/hooks/usePrevious.d.ts

@@ -0,0 +1,2 @@
+export declare function usePrevious<T>(value: T): T | undefined;
+export default usePrevious;

package/lib/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './hooks';

package/lib/types/types/index.d.ts

@@ -0,0 +1,92 @@
+import { FormControlPublicProps } from '../components/FormControl/FormControl.props';
+
+export type ThemeTypes = "light" | "dark";
+export type ButtonFunctions = "button" | "submit" | "reset";
+export type ButtonTypes = "primary" | "secondary" | "tertiary" | "alert";
+export type CalloutTypes = "info" | "error" | "success" | "warning";
+export type ChoiceGroupFieldTypes = "checkbox" | "radio";
+export type FieldTypes = "checkbox" | "date" | "dropdown" | "formgroup" | "input" | "number" | "radio" | "textarea" | "toggle" | "file";
+export type FormGroupTypes = "default" | "filter";
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type TextInputTypes = "email" | "hidden" | "password" | "search" | "tel" | "text" | "url";
+export type Language = "en" | "fr" | "es";
+export type LabelTypes = "default" | "actionable" | "light";
+export type LinkTypes = "light" | "dark" | "footer" | "button";
+export type LinkListThemes = "light" | "dark";
+export type TooltipThemes = "light" | "dark";
+export type TooltipIconThemes = "light" | "dark";
+export type TooltipAlignment = "top" | "right" | "bottom" | "left";
+export type TooltipPlacement = "negative" | "center" | "positive";
+export type LoadingStatus = "idle" | "loading" | "loaded";
+export type LoadingSize = "small" | "large";
+export type NotificationPlacement = "dialog" | "inline";
+export type NotificationTypes = "error" | "info" | "success" | "warning";
+export type PositionTypes = "top" | "bottom" | "left" | "right";
+export type SizeTypes = "small" | "medium" | "large";
+export type TagTypes = "anchor" | "display" | "button";
+export type SocialTypes = "facebook" | "x" | "instagram" | "linkedin" | "youtube" | "tiktok" | "flickr";
+export type CardColor = "turquoise" | "green" | "yellow" | "blue";
+export type CardSize = "wide" | "standard" | "narrow" | "fluid";
+export type CardCornerType = boolean;
+export type CardAlignment = "left" | "right";
+export type CardTypes = "stat" | "multilink" | "text" | "promo" | "feature" | "detail" | "factlist" | "data";
+export type HeadingTypes = "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export interface EventDate {
+    unix?: string;
+    human?: string;
+}
+export interface FormFieldProps<T> {
+    /**
+     * The input's onChange callback.
+     */
+    onChange?: (e: React.ChangeEvent<T>) => unknown;
+    /**
+     * The input's onBlur callback.
+     */
+    onBlur?: (e: React.FocusEvent<T>) => unknown;
+    /**
+     * Specify an optional className to be added to your input.
+     */
+    className?: string;
+    /**
+     * Is the input disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Does the input have an error?
+     */
+    error?: boolean;
+    /**
+     * The input's id attribute. Will otherwise be set to the same value as `name`.
+     */
+    id?: string;
+    /**
+     * The input's name attribute.
+     */
+    name: string;
+    /**
+     * Specify whether this input is required
+     */
+    required?: boolean;
+    /**
+     * Inline styles applies to the outermost container
+     */
+    style?: React.CSSProperties;
+}
+export interface ChoiceFieldProps<T> extends FormFieldProps<T> {
+    /**
+     * Whether the input should be checked by default
+     **/
+    defaultChecked?: boolean;
+    /**
+     * Whether the input is checked
+     */
+    checked?: boolean;
+    /**
+     * The input's value attribute.
+     */
+    value?: string;
+}
+export type LabelledFormFieldProps<T> = T & FormControlPublicProps & {
+    inputStyle?: React.CSSProperties;
+};

package/lib/types/utils/checkArrayDuplicates.d.ts

@@ -0,0 +1 @@
+export declare function checkArrayDuplicates(array: string[]): boolean;

package/lib/types/utils/createChainedFunction.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Safe chained function
+ *
+ * Will only create a new function if needed,
+ * otherwise will pass back existing functions or null.
+ *
+ * @param {function} functions to chain
+ * @returns {function|null}
+ */
+declare function createChainedFunction(...funcs: any[]): any;
+export default createChainedFunction;

package/lib/types/utils/getDefaultDimensionValue.d.ts

@@ -0,0 +1,3 @@
+type Dimension = "height" | "width";
+export default function getDefaultDimensionValue(dimension: Dimension, elem: HTMLElement): number;
+export {};

package/lib/types/utils/hoursMinutesSeconds.d.ts

@@ -0,0 +1 @@
+export default function hoursMinutesSeconds(secs: number): string;

package/lib/types/utils/index.d.ts

@@ -0,0 +1,6 @@
+export { checkArrayDuplicates } from './checkArrayDuplicates';
+export { default as createChainedFunctions } from './createChainedFunction';
+export { default as getDefaultDimensionValue } from './getDefaultDimensionValue';
+export { default as hoursMinutesSeconds } from './hoursMinutesSeconds';
+export { default as transitionEndListener } from './transitionEndListener';
+export { default as triggerBrowserReflow } from './triggerBrowserReflow';

package/lib/types/utils/transitionEndListener.d.ts

@@ -0,0 +1 @@
+export default function transitionEndListener(element: HTMLElement, handler: (e: TransitionEvent) => void): void;

package/lib/types/utils/triggerBrowserReflow.d.ts

@@ -0,0 +1 @@
+export default function triggerBrowserReflow(node: HTMLElement): void;