@hexure/ui 1.6.10 → 1.8.0

package/dist/esm/types/components/ButtonMenu/ButtonMenu.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { MenuItemProps } from '../MoreMenu/MoreMenu';
+export interface ButtonMenuProps {
+    disabled?: boolean;
+    label: string;
+    small?: boolean;
+    menuItems: Array<MenuItemProps>;
+    maxHeight?: string | number;
+    position?: 'left' | 'right';
+}
+declare const ButtonMenu: FC<ButtonMenuProps>;
+export default ButtonMenu;

package/dist/esm/types/components/ButtonMenu/index.d.ts

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

package/dist/esm/types/components/Field/Field.d.ts

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from 'react';
+import { TooltipProps } from '../Tooltip/Tooltip';
 import { AccessibleProps } from '../../utils/Accessibility';
 interface ActionProps {
     label: string;
@@ -18,6 +19,8 @@ export interface FieldProps extends AccessibleProps {
     label: string;
     /** It is used to give description to input. */
     description?: string;
+    /** Display a tooltip next to the label */
+    tooltip?: TooltipProps;
 }
 declare const Field: FC<FieldProps>;
 export default Field;

package/dist/esm/types/components/FileUpload/FileUpload.d.ts

@@ -1,23 +1,23 @@
 import { FC } from 'react';
-import { AccessibleProps } from '../../utils/Accessibility';
-export interface FileUploadProps extends AccessibleProps {
-    /** It is used to get the array of files. */
-    onChange: (e: any) => void;
-    /** It is used to get the delete file. */
-    onFileDelete: (e: any) => void;
-    /** It is used to get max file size in MBs. */
-    maxFileSize: number;
-    /** It is used to whether the progress bar should be shown or not. */
-    progress: boolean;
-    /** It is used to set the upload progress value from 0 to 100. */
-    UploadProgress?: {
-        index: number;
-        progress: number;
-    };
-    /** It is used to set the value of multile file upload in boolean. */
-    multiple: boolean;
-    /** It is used to set the value of acceptable files. Example ".jpg, .jpeg, .pdf"*/
-    acceptFiles: string;
+export interface FileUploadProps {
+    /** A method to call when files are added/removed. Return the new file or array of files. */
+    onChange?: (files: Array<File>) => void;
+    /** A method to call when files are rejected. Returns an array of files and their errors */
+    onError?: (errors: Array<ErrorObject>) => void;
+    /** The maximum number of files that be added. */
+    maxFiles?: number;
+    /** The maximum file size allowed, in MBs. */
+    maxSize?: number;
+    /** Display a message in the dropzone area */
+    message?: string;
+    /** A string of comma separated file types */
+    accept?: string;
+    /** A method that will be run against each file to determine if it's valid before being added. Must return a boolean.  */
+    validateFile?: (file: File) => boolean;
+}
+interface ErrorObject {
+    file: File;
+    message: string;
 }
 declare const FileUpload: FC<FileUploadProps>;
 export default FileUpload;

package/dist/esm/types/components/Input/Input.d.ts

@@ -4,21 +4,37 @@ export interface styleProps {
     width?: number | string;
 }
 export interface InputProps extends AccessibleProps {
+    /** Force a specific format/mask for the Input value */
     format?: 'phone' | 'currency' | 'currency_decimal' | 'ssn';
+    /** Set the height of the textarea. This should only be used with textarea */
     height?: string;
+    /** Display a read only suffix. Example: kg, lbs, etc */
     suffix?: string;
+    /** Display the input as invalid, with a red border and red text */
     invalid?: boolean;
+    /** Use with a number input to define the max allowed number */
     max?: string;
+    /** Use with a text input to define the max number of characters */
     maxLength?: number;
+    /** Use with a number input to define the min allowed number */
     min?: string;
+    /** A method to be called when the changes focus away from the input */
     onBlur?: (e?: any) => void;
+    /** A method to be called when the value of the input changes */
     onChange?: (e?: any) => void;
+    /** A method to be called when the use presses a key */
     onKeyDown?: (e?: any) => void;
+    /** Display placeholder text in the input */
     placeholder?: string;
+    /** Display the input as read only, preventing the user from inteacting with it */
     readOnly?: boolean;
+    /** Use with a number input to define how the number increments */
     step?: number;
+    /** Set the css of the wrapping div */
     style?: styleProps;
-    type?: 'date' | 'email' | 'number' | 'password' | 'tel' | 'text' | 'url' | 'textarea';
+    /** Define the type of input to be displayed */
+    type?: 'date' | 'email' | 'number' | 'password' | 'tel' | 'text' | 'url' | 'textarea' | 'search';
+    /** Set the value of the input. This should be used by the parent component to control the input's value. */
     value?: string;
 }
 declare const Input: FC<InputProps>;

package/dist/esm/types/components/MoreMenu/MoreMenu.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { AccessibleProps } from '../../utils/Accessibility';
-interface MenuItemProps extends AccessibleProps {
+export interface MenuItemProps extends AccessibleProps {
     icon?: string;
     label?: string;
     onClick: (e?: any) => void;

package/dist/esm/types/components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { MenuItemProps } from '../MoreMenu/MoreMenu';
+export interface PageHeaderProps {
+    title?: string;
+    breadcrumbs?: Array<{
+        label: string;
+        onClick?: (e: any) => void;
+    }>;
+    actions?: Array<{
+        disabled?: boolean;
+        format?: 'primary' | 'secondary' | 'red';
+        icon?: string;
+        label: string;
+        onClick?: (e: any) => void;
+    }>;
+    buttonMenu?: {
+        disabled?: boolean;
+        icon?: string;
+        label: string;
+        menuItems: Array<MenuItemProps>;
+    };
+}
+declare const PageHeader: FC<PageHeaderProps>;
+export default PageHeader;

package/dist/esm/types/components/PageHeader/index.d.ts

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

package/dist/esm/types/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+export interface TooltipProps {
+    /** It is used to give label to tag. */
+    children: string;
+    /** It is callback function called when user wants to close the tag. */
+    position?: 'right-top' | 'right-bottom' | 'right-center' | 'left-top' | 'left-bottom' | 'left-center';
+    /** Override the default content width of 240px */
+    width?: string;
+}
+declare const Tooltip: FC<TooltipProps>;
+export default Tooltip;

package/dist/esm/types/components/Tooltip/index.d.ts

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

package/dist/esm/types/index.d.ts

@@ -25,4 +25,5 @@ export { default as Table } from './components/Table';
 export { default as Tabs } from './components/Tabs';
 export { default as Tag } from './components/Tag';
 export { default as Toggle } from './components/Toggle';
+export { default as Tooltip } from './components/Tooltip';
 export { default as ZeroState } from './components/ZeroState';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import React, { FC, ReactNode } from 'react';
-
+import React, { FC, ReactNode } from 'react';
+
 interface AccessibleProps {
     /** Set the css id for the main wrapping html element */
     id?: string;
@@ -13,8 +13,8 @@ interface AccessibleProps {
     tabIndex?: number;
     /** Set a label for an interactive element. See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label */
     'aria-label'?: string;
-}
-
+}
+
 interface AccordionProps extends AccessibleProps {
     title?: string;
     /** Define the content to be displayed */
@@ -24,8 +24,8 @@ interface AccordionProps extends AccessibleProps {
     /** Method to call when the header is clicked */
     onClick: (e?: any) => void;
 }
-declare const Accordion: FC<AccordionProps>;
-
+declare const Accordion: FC<AccordionProps>;
+
 interface ButtonProps$4 {
     children: string;
     format?: 'primary' | 'red';
@@ -45,8 +45,8 @@ interface ActionDialogProps extends AccessibleProps {
     /** Set the tertiary action for the dialog. This should only be defined after a secondary action is defined */
     tertiaryButton?: ButtonProps$4;
 }
-declare const ActionDialog: FC<ActionDialogProps>;
-
+declare const ActionDialog: FC<ActionDialogProps>;
+
 interface ActionProps$1 extends AccessibleProps {
     label: string;
     onClick: (e?: any) => void;
@@ -60,8 +60,8 @@ interface AlertProps extends AccessibleProps {
     /** Display a link to display below the description */
     action?: ActionProps$1;
 }
-declare const Alert: FC<AlertProps>;
-
+declare const Alert: FC<AlertProps>;
+
 interface ButtonProps$3 {
     children: string;
     onClick: (e?: any) => void;
@@ -74,8 +74,8 @@ interface BulkActionBarProps extends AccessibleProps {
     onClear: (e?: any) => void;
     selectedCount?: number;
 }
-declare const BulkActionBar: FC<BulkActionBarProps>;
-
+declare const BulkActionBar: FC<BulkActionBarProps>;
+
 interface ButtonProps$2 extends AccessibleProps {
     /** Display a number badge on the right side of the button */
     badge?: number;
@@ -98,8 +98,8 @@ interface ButtonProps$2 extends AccessibleProps {
     /** Define which button format to display. By default the Primary button will be used.  */
     format?: 'primary' | 'secondary' | 'red';
 }
-declare const Button: FC<ButtonProps$2>;
-
+declare const Button: FC<ButtonProps$2>;
+
 interface CheckboxProps extends AccessibleProps {
     /** It is used to give label to checkbox. */
     children?: string;
@@ -110,8 +110,8 @@ interface CheckboxProps extends AccessibleProps {
     /** It is used to change value of checkbox. */
     onChange: (e?: any) => void;
 }
-declare const Checkbox: FC<CheckboxProps>;
-
+declare const Checkbox: FC<CheckboxProps>;
+
 interface OptionProps$3 {
     label?: string;
     value: string | number;
@@ -123,8 +123,8 @@ interface ChecklistProps extends AccessibleProps {
     selected: (string | number)[];
     showSelectAll?: boolean;
 }
-declare const Checklist: FC<ChecklistProps>;
-
+declare const Checklist: FC<ChecklistProps>;
+
 interface CopyProps extends AccessibleProps {
     /** Set the text to be displayed */
     children: string;
@@ -138,8 +138,8 @@ interface CopyProps extends AccessibleProps {
     /** Set the color of the copy based on the design system color pallette */
     color?: 'PRIMARY' | 'GREEN' | 'RED' | 'YELLOW' | 'BLACK' | 'GRAY' | 'MEDIUM_GRAY' | 'LIGHT_GRAY';
 }
-declare const Copy: FC<CopyProps>;
-
+declare const Copy: FC<CopyProps>;
+
 interface styleProps$3 {
     width?: number | string;
 }
@@ -159,8 +159,8 @@ interface DateProps extends AccessibleProps {
     /** Override default styles */
     style?: styleProps$3;
 }
-declare const DatePicker: FC<DateProps>;
-
+declare const DatePicker: FC<DateProps>;
+
 interface ButtonProps$1 extends AccessibleProps {
     disabled: boolean;
     children: string;
@@ -187,8 +187,18 @@ interface DrawerProps extends AccessibleProps {
     /**  It is used to close drawer. */
     onClose: (e?: any) => void;
 }
-declare const Drawer: FC<DrawerProps>;
-
+declare const Drawer: FC<DrawerProps>;
+
+interface TooltipProps {
+    /** It is used to give label to tag. */
+    children: string;
+    /** It is callback function called when user wants to close the tag. */
+    position?: 'right-top' | 'right-bottom' | 'right-center' | 'left-top' | 'left-bottom' | 'left-center';
+    /** Override the default content width of 240px */
+    width?: string;
+}
+declare const Tooltip: FC<TooltipProps>;
+
 interface ActionProps {
     label: string;
     onClick: (e?: any) => void;
@@ -207,30 +217,33 @@ interface FieldProps extends AccessibleProps {
     label: string;
     /** It is used to give description to input. */
     description?: string;
-}
-declare const Field: FC<FieldProps>;
-
-interface FileUploadProps extends AccessibleProps {
-    /** It is used to get the array of files. */
-    onChange: (e: any) => void;
-    /** It is used to get the delete file. */
-    onFileDelete: (e: any) => void;
-    /** It is used to get max file size in MBs. */
-    maxFileSize: number;
-    /** It is used to whether the progress bar should be shown or not. */
-    progress: boolean;
-    /** It is used to set the upload progress value from 0 to 100. */
-    UploadProgress?: {
-        index: number;
-        progress: number;
-    };
-    /** It is used to set the value of multile file upload in boolean. */
-    multiple: boolean;
-    /** It is used to set the value of acceptable files. Example ".jpg, .jpeg, .pdf"*/
-    acceptFiles: string;
-}
-declare const FileUpload: FC<FileUploadProps>;
-
+    /** Display a tooltip next to the label */
+    tooltip?: TooltipProps;
+}
+declare const Field: FC<FieldProps>;
+
+interface FileUploadProps {
+    /** A method to call when files are added/removed. Return the new file or array of files. */
+    onChange?: (files: Array<File>) => void;
+    /** A method to call when files are rejected. Returns an array of files and their errors */
+    onError?: (errors: Array<ErrorObject>) => void;
+    /** The maximum number of files that be added. */
+    maxFiles?: number;
+    /** The maximum file size allowed, in MBs. */
+    maxSize?: number;
+    /** Display a message in the dropzone area */
+    message?: string;
+    /** A string of comma separated file types */
+    accept?: string;
+    /** A method that will be run against each file to determine if it's valid before being added. Must return a boolean.  */
+    validateFile?: (file: File) => boolean;
+}
+interface ErrorObject {
+    file: File;
+    message: string;
+}
+declare const FileUpload: FC<FileUploadProps>;
+
 interface HeadingProps extends AccessibleProps {
     /** Toggle between bold and normal font weights */
     bold?: boolean;
@@ -243,31 +256,47 @@ interface HeadingProps extends AccessibleProps {
     /** Set the type of heading to display: primary, secondary, tertiary  */
     type?: 'primary' | 'secondary' | 'tertiary';
 }
-declare const Heading: FC<HeadingProps>;
-
+declare const Heading: FC<HeadingProps>;
+
 interface styleProps$2 {
     width?: number | string;
 }
 interface InputProps extends AccessibleProps {
+    /** Force a specific format/mask for the Input value */
     format?: 'phone' | 'currency' | 'currency_decimal' | 'ssn';
+    /** Set the height of the textarea. This should only be used with textarea */
     height?: string;
+    /** Display a read only suffix. Example: kg, lbs, etc */
     suffix?: string;
+    /** Display the input as invalid, with a red border and red text */
     invalid?: boolean;
+    /** Use with a number input to define the max allowed number */
     max?: string;
+    /** Use with a text input to define the max number of characters */
     maxLength?: number;
+    /** Use with a number input to define the min allowed number */
     min?: string;
+    /** A method to be called when the changes focus away from the input */
     onBlur?: (e?: any) => void;
+    /** A method to be called when the value of the input changes */
     onChange?: (e?: any) => void;
+    /** A method to be called when the use presses a key */
     onKeyDown?: (e?: any) => void;
+    /** Display placeholder text in the input */
     placeholder?: string;
+    /** Display the input as read only, preventing the user from inteacting with it */
     readOnly?: boolean;
+    /** Use with a number input to define how the number increments */
     step?: number;
+    /** Set the css of the wrapping div */
     style?: styleProps$2;
-    type?: 'date' | 'email' | 'number' | 'password' | 'tel' | 'text' | 'url' | 'textarea';
+    /** Define the type of input to be displayed */
+    type?: 'date' | 'email' | 'number' | 'password' | 'tel' | 'text' | 'url' | 'textarea' | 'search';
+    /** Set the value of the input. This should be used by the parent component to control the input's value. */
     value?: string;
 }
-declare const Input: FC<InputProps>;
-
+declare const Input: FC<InputProps>;
+
 interface LinkProps extends AccessibleProps {
     /** Set the text to be displayed */
     children: string;
@@ -276,14 +305,14 @@ interface LinkProps extends AccessibleProps {
     /** A method to execute when this component is clicked */
     onClick?: (e?: any) => void;
 }
-declare const Link: FC<LinkProps>;
-
+declare const Link: FC<LinkProps>;
+
 interface LogoProps extends AccessibleProps {
     type?: 'mark_red' | 'mark_white' | 'standard_white' | 'standard_black' | 'standard_full' | 'standard_reversed';
     height?: string;
 }
-declare const Logo: FC<LogoProps>;
-
+declare const Logo: FC<LogoProps>;
+
 interface ButtonProps {
     disabled?: boolean;
     children: string;
@@ -314,8 +343,8 @@ interface ModalProps extends AccessibleProps {
     /** Display steps at the top of the modal */
     steps?: StepProps[];
 }
-declare const Modal: FC<ModalProps>;
-
+declare const Modal: FC<ModalProps>;
+
 interface MenuItemProps extends AccessibleProps {
     icon?: string;
     label?: string;
@@ -325,8 +354,8 @@ interface MoreMenuProps extends AccessibleProps {
     menuItems: MenuItemProps[];
     maxHeight?: string | number;
 }
-declare const MoreMenu: FC<MoreMenuProps>;
-
+declare const MoreMenu: FC<MoreMenuProps>;
+
 interface OptionProps$2 {
     label?: string;
     value: string | number;
@@ -344,15 +373,15 @@ interface MultiSelectProps extends AccessibleProps {
     showSelectAll?: boolean;
     style?: styleProps$1;
 }
-declare const MultiSelect: FC<MultiSelectProps>;
-
+declare const MultiSelect: FC<MultiSelectProps>;
+
 interface PaginationProps extends AccessibleProps {
     currentPage: number;
     onClick: (e?: any) => void;
     pageCount: number;
 }
-declare const Pagination: FC<PaginationProps>;
-
+declare const Pagination: FC<PaginationProps>;
+
 interface RadioProps extends AccessibleProps {
     /** It is used to give label to radio. */
     children: string | number;
@@ -364,8 +393,8 @@ interface RadioProps extends AccessibleProps {
     onChange: (e?: any) => void;
     value: string | number;
 }
-declare const Radio: FC<RadioProps>;
-
+declare const Radio: FC<RadioProps>;
+
 interface OptionProps$1 {
     label?: string;
     value: string | number;
@@ -376,8 +405,8 @@ interface RadioListProps extends AccessibleProps {
     options: OptionProps$1[];
     value: string;
 }
-declare const RadioList: FC<RadioListProps>;
-
+declare const RadioList: FC<RadioListProps>;
+
 interface OptionProps {
     /** It is used to give label to option. */
     label?: string;
@@ -409,8 +438,8 @@ interface SelectProps extends AccessibleProps {
     /** It is used to change value when an option is clicked. */
     onChange: (e: any) => void;
 }
-declare const Select: FC<SelectProps>;
-
+declare const Select: FC<SelectProps>;
+
 interface RowObject {
     [key: string]: any;
 }
@@ -432,8 +461,8 @@ interface TableProps extends AccessibleProps {
     onSortChange?: (e?: any) => void;
     tableLayout?: string;
 }
-declare const Table: FC<TableProps>;
-
+declare const Table: FC<TableProps>;
+
 interface TabProps extends AccessibleProps {
     badgeCount?: number;
     errorBadge?: boolean;
@@ -444,8 +473,8 @@ interface TabProps extends AccessibleProps {
 interface TabsProps extends AccessibleProps {
     tabs: TabProps[];
 }
-declare const Tabs: FC<TabsProps>;
-
+declare const Tabs: FC<TabsProps>;
+
 interface TagProps extends AccessibleProps {
     /** It is used to select tag-type either default or removable. */
     color?: 'PRIMARY' | 'GREEN' | 'RED' | 'YELLOW' | 'BLACK' | 'SUBTLE_GRAY';
@@ -456,16 +485,16 @@ interface TagProps extends AccessibleProps {
     /** It is callback function called when user wants to close the tag. */
     removable?: boolean;
 }
-declare const Tag: FC<TagProps>;
-
+declare const Tag: FC<TagProps>;
+
 interface ToggleProps extends AccessibleProps {
     /** It is used to check whether Toggle is checked or not */
     on: boolean;
     /** Pass a callback then fires when user change value */
     onClick: (e?: any) => void;
 }
-declare const Toggle: FC<ToggleProps>;
-
+declare const Toggle: FC<ToggleProps>;
+
 interface ZeroStateProps extends AccessibleProps {
     /** The SVG path of the icon to show */
     icon: string;
@@ -480,6 +509,6 @@ interface ZeroStateProps extends AccessibleProps {
         onClick: (e?: any) => void;
     };
 }
-declare const ZeroState: FC<ZeroStateProps>;
-
-export { Accordion, ActionDialog, Alert, BulkActionBar, Button, Checkbox, Checklist, Copy, DatePicker, Drawer, Field, FileUpload, Heading, Input, Link, Logo, Modal, MoreMenu, MultiSelect, Pagination, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, ZeroState };
+declare const ZeroState: FC<ZeroStateProps>;
+
+export { Accordion, ActionDialog, Alert, BulkActionBar, Button, Checkbox, Checklist, Copy, DatePicker, Drawer, Field, FileUpload, Heading, Input, Link, Logo, Modal, MoreMenu, MultiSelect, Pagination, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexure/ui",
-  "version": "1.6.10",
+  "version": "1.8.0",
   "description": "A library of shared UI components used within Hexure products.",
   "scripts": {
     "rollup": "rollup -c rollup.config.mjs",