@hexure/ui 1.6.9 → 1.7.0

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/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

@@ -7,7 +7,7 @@ interface MenuItemProps extends AccessibleProps {
 }
 export interface MoreMenuProps extends AccessibleProps {
     menuItems: MenuItemProps[];
-    maxHeight: string | number;
+    maxHeight?: string | number;
 }
 declare const MoreMenu: FC<MoreMenuProps>;
 export default MoreMenu;

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

@@ -189,6 +189,16 @@ interface DrawerProps extends AccessibleProps {
 }
 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,6 +217,8 @@ 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>;
 
@@ -249,21 +261,37 @@ 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>;
@@ -323,7 +351,7 @@ interface MenuItemProps extends AccessibleProps {
 }
 interface MoreMenuProps extends AccessibleProps {
     menuItems: MenuItemProps[];
-    maxHeight: string | number;
+    maxHeight?: string | number;
 }
 declare const MoreMenu: FC<MoreMenuProps>;
 
@@ -482,4 +510,4 @@ interface ZeroStateProps extends AccessibleProps {
 }
 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 };
+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.9",
+  "version": "1.7.0",
   "description": "A library of shared UI components used within Hexure products.",
   "scripts": {
     "rollup": "rollup -c rollup.config.mjs",