@hexure/ui 1.13.57 → 1.13.59

package/dist/cjs/types/components/Checkbox/Checkbox.d.ts

@@ -17,6 +17,7 @@ export interface CheckboxProps extends AccessibleProps {
     tooltip?: TooltipProps;
     /** Optional ID for automation purposes */
     dataItemid?: string;
+    isInvalidRedBackground?: boolean;
 }
 declare const Checkbox: FC<CheckboxProps>;
 export default Checkbox;

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

@@ -1,5 +1,6 @@
 import { FC, ReactNode } from 'react';
 import { AccessibleProps } from '../../utils/Accessibility';
+import { TooltipProps } from '../Tooltip/Tooltip';
 export interface ButtonProps extends AccessibleProps {
     disabled?: boolean;
     children: string;
@@ -8,6 +9,10 @@ export interface ButtonProps extends AccessibleProps {
     onClick: (e?: any) => void;
     tabIndex?: number;
     loading?: boolean;
+    /** Tooltip Props */
+    toolTip?: TooltipProps;
+    /** Set the title of the button on hover */
+    title?: string;
 }
 export interface DrawerProps extends AccessibleProps {
     primaryButton?: ButtonProps;
@@ -29,6 +34,7 @@ export interface DrawerProps extends AccessibleProps {
     onClose: (e?: any) => void;
     /** Optional ID for automation purposes */
     dataItemid?: string;
+    bottomNotes?: string | ReactNode;
 }
 declare const Drawer: FC<DrawerProps>;
 export default Drawer;

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

@@ -35,6 +35,7 @@ export interface InputProps extends AccessibleProps {
     mask?: string;
     onPaste?: (e?: any) => void;
     autoComplete?: React.InputHTMLAttributes<HTMLInputElement>['autoComplete'];
+    isInvalidRedBackground?: boolean;
 }
 declare const Input: FC<InputProps>;
 export default Input;

package/dist/cjs/types/components/Radio/Radio.d.ts

@@ -18,6 +18,7 @@ export interface RadioProps extends AccessibleProps {
     tooltip?: TooltipProps;
     /** Optional ID for automation purposes */
     dataItemid?: string;
+    isInvalidRedBackground?: boolean;
 }
 declare const Radio: FC<RadioProps>;
 export default Radio;

package/dist/cjs/types/components/Select/Select.d.ts

@@ -29,6 +29,7 @@ export interface SelectProps extends AccessibleProps {
     onSearch?: (searchTerm: string) => void;
     /** Optional ID for automation purposes */
     dataItemid?: string;
+    isInvalidRedBackground?: boolean;
 }
 declare const Select: FC<SelectProps>;
 export default Select;

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

@@ -10,6 +10,8 @@ export interface TooltipProps {
     trigger?: any;
     /** Optional ID for automation purposes */
     dataItemid?: string;
+    /** Override the default icon / wrapper height of 16px */
+    height?: string;
 }
 declare const Tooltip: FC<TooltipProps>;
 export default Tooltip;

package/dist/esm/index.js

@@ -137,11 +137,11 @@ Copy.defaultProps = {
     type: 'default',
 };
 
-const Wrapper$h = styled.div `
-  display: inline-block;
-  position: relative;
-  height: 16px;
-`;
+const Wrapper$h = styled.div(props => ({
+    display: 'inline-block',
+    position: 'relative',
+    height: props.$height || '16px',
+}));
 const StyledIcon$6 = styled(Icon) `
   width: 16px;
   height: 16px;
@@ -180,10 +180,10 @@ const positions = {
 };
 const Content$3 = styled.div(props => (Object.assign({ position: 'absolute', borderRadius: '4px', borderWidth: '1px', borderStyle: 'solid', borderColor: props.theme.PRIMARY_COLOR.Hex, background: '#ffffff', boxShadow: '0px 5px 30px -10px rgba(0, 0, 0, 0.5)', width: props.$width || '240px', padding: '10px 12px', zIndex: 9999 }, positions[props.$position])));
 Content$3.defaultProps = { theme: EditableTheme };
-const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, dataItemid, }) => {
+const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, dataItemid, height, }) => {
     const [show_content, toggleContent] = useState(false);
     const baseId = dataItemid || 'tooltip';
-    return (React.createElement(Wrapper$h, { "data-itemid": `${baseId}-wrapper`, onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
+    return (React.createElement(Wrapper$h, { "$height": height, "data-itemid": `${baseId}-wrapper`, onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
         trigger || React.createElement(StyledIcon$6, { "data-itemid": `${baseId}-icon`, path: mdiInformationOutline }),
         show_content ? (React.createElement(Content$3, { "$position": position, "$width": width, "data-itemid": `${baseId}-content` }, children && (React.createElement(Copy, { "data-itemid": `${baseId}-copy`, type: 'small' }, children)))) : null));
 };
@@ -951,6 +951,7 @@ const Check$1 = styled.span `
   border-width: 2px;
   border-style: solid;
   border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
+  background-color: ${props => props.$invalid && props.$isInvalidRedBackground ? '#ffe5e5' : '#ffffff'};
   box-sizing: border-box;
   position: relative;
   &:after {
@@ -979,11 +980,11 @@ const Label$3 = styled.span `
   box-sizing: border-box;
 `;
 const Checkbox = (_a) => {
-    var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex, dataItemid } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex", "dataItemid"]);
+    var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex, dataItemid, isInvalidRedBackground = false } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground"]);
     const baseId = dataItemid || 'checkbox';
     return (React.createElement(Wrapper$b, Object.assign({ "$disabled": disabled }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
         React.createElement(Input$2, { checked: checked, "data-itemid": `${baseId}-input`, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'checkbox' }),
-        React.createElement(Check$1, { "$invalid": invalid, "data-itemid": `${baseId}-check` }),
+        React.createElement(Check$1, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "data-itemid": `${baseId}-check` }),
         children ? (React.createElement(Label$3, { color: color, "data-itemid": `${baseId}-label` },
             children,
             tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
@@ -1046,6 +1047,7 @@ const Wrapper$a = styled.div `
   border-width: 1px;
   border-style: solid;
   border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
+  background-color: ${props => props.$invalid && props.$isInvalidRedBackground ? '#ffe5e5' : '#ffffff'};
   border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
   flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
   box-sizing: border-box;
@@ -1101,7 +1103,7 @@ const SearchInput$1 = styled.input `
   white-space: nowrap;
 `;
 const Select = (_a) => {
-    var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style, tabIndex, dataItemid } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style", "tabIndex", "dataItemid"]);
+    var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style, tabIndex, dataItemid, isInvalidRedBackground = false } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style", "tabIndex", "dataItemid", "isInvalidRedBackground"]);
     const [searchTerm, setSearchTerm] = useState('');
     const [value, setValue] = useState(propValue || '');
     const baseId = dataItemid || 'select';
@@ -1124,7 +1126,7 @@ const Select = (_a) => {
     const filteredOptionGroups = searchable
         ? optionGroups === null || optionGroups === void 0 ? void 0 : optionGroups.map(group => (Object.assign(Object.assign({}, group), { options: group.options.filter(option => { var _a; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm.toLowerCase()); }) })))
         : optionGroups;
-    return (React.createElement(Wrapper$a, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "data-itemid": `${baseId}-wrapper` },
+    return (React.createElement(Wrapper$a, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$readOnly": readOnly, "$style": style, "data-itemid": `${baseId}-wrapper` },
         searchable && (React.createElement(SearchInput$1, Object.assign({ "data-itemid": `${baseId}-search-input`, onChange: handleSearch, placeholder: placeholder, tabIndex: readOnly ? -1 : tabIndex, type: 'text', value: searchTerm }, accessibleProps))),
         React.createElement(Trigger$1, Object.assign({ "data-itemid": `${baseId}-trigger`, disabled: readOnly, onChange: handleChange, placeholder: placeholder, tabIndex: readOnly ? -1 : tabIndex, value: value }, accessibleProps),
             placeholder && !value && (React.createElement("option", { "data-itemid": `${baseId}-placeholder`, disabled: true, value: '' }, placeholder)),
@@ -1289,9 +1291,14 @@ const ButtonBar$1 = styled.div `
   gap: 10px;
   flex-shrink: 0;
   background: #fff;
+  flex-direction: column;
+`;
+const ButtonBarNote = styled.div `
+  display: flex;
+  gap: 10px;
 `;
 const Drawer = (_a) => {
-    var { children, description, title, onClose, primaryButton, position = 'fixed', secondaryButton, tertiaryButton, scrim = 'dark', width, dataItemid } = _a, accessibleProps = __rest(_a, ["children", "description", "title", "onClose", "primaryButton", "position", "secondaryButton", "tertiaryButton", "scrim", "width", "dataItemid"]);
+    var { children, description, title, onClose, primaryButton, position = 'fixed', secondaryButton, tertiaryButton, scrim = 'dark', width, dataItemid, bottomNotes } = _a, accessibleProps = __rest(_a, ["children", "description", "title", "onClose", "primaryButton", "position", "secondaryButton", "tertiaryButton", "scrim", "width", "dataItemid", "bottomNotes"]);
     useEffect(() => {
         document.onkeydown = e => {
             if (e.key === 'Escape') {
@@ -1313,9 +1320,11 @@ const Drawer = (_a) => {
                     React.createElement(Button, { dataItemid: `${baseId}-close-button`, format: 'secondary', icon: mdiClose, small: true }))),
             React.createElement(ContentWrapper$1, { "data-itemid": `${baseId}-content-wrapper` }, children),
             primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar$1, { "data-itemid": `${baseId}-button-bar` },
-                tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { "data-itemid": `${baseId}-tertiary-button`, format: tertiaryButton.format || 'secondary' }))) : null,
-                secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { "data-itemid": `${baseId}-secondary-button`, format: secondaryButton.format || 'secondary' }))) : null,
-                primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { "data-itemid": `${baseId}-primary-button`, format: primaryButton.format || 'primary' }))) : null)) : null),
+                React.createElement(Copy, { "data-itemid": `${baseId}-button-bar-notes`, type: 'small' }, bottomNotes),
+                React.createElement(ButtonBarNote, null,
+                    tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { "data-itemid": `${baseId}-tertiary-button`, format: tertiaryButton.format || 'secondary' }))) : null,
+                    secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { "data-itemid": `${baseId}-secondary-button`, format: secondaryButton.format || 'secondary' }))) : null,
+                    primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { "data-itemid": `${baseId}-primary-button`, format: primaryButton.format || 'primary' }))) : null))) : null),
         scrim ? (React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, "data-itemid": `${baseId}-scrim`, onClick: onClose })) : null));
 };
 
@@ -1815,6 +1824,7 @@ const StyledWrapper = styled.div `
   border-width: 1px;
   border-style: solid;
   border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
+  background-color: ${props => props.$invalid && props.$isInvalidRedBackground ? '#ffe5e5' : '#ffffff'};
   border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
 
   &:focus-within {
@@ -1880,7 +1890,7 @@ const Loader$1 = styled.div `
 const Input$1 = (_a) => {
     var { format, suffix, height, invalid, loading, max, maxLength, min, onBlur, onChange, onFocus, onKeyDown, 
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onSuggestedSelect = () => { }, placeholder, readOnly, showCharCount, step, style, suggestedValues, showErrorTextColor = false, type = 'text', value = '', innerRef = null, tabIndex, isAutoComplete = false, dataItemid, mask, onPaste, autoComplete } = _a, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "loading", "max", "maxLength", "min", "onBlur", "onChange", "onFocus", "onKeyDown", "onSuggestedSelect", "placeholder", "readOnly", "showCharCount", "step", "style", "suggestedValues", "showErrorTextColor", "type", "value", "innerRef", "tabIndex", "isAutoComplete", "dataItemid", "mask", "onPaste", "autoComplete"]);
+    onSuggestedSelect = () => { }, placeholder, readOnly, showCharCount, step, style, suggestedValues, showErrorTextColor = false, type = 'text', value = '', innerRef = null, tabIndex, isAutoComplete = false, dataItemid, mask, onPaste, autoComplete, isInvalidRedBackground = false } = _a, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "loading", "max", "maxLength", "min", "onBlur", "onChange", "onFocus", "onKeyDown", "onSuggestedSelect", "placeholder", "readOnly", "showCharCount", "step", "style", "suggestedValues", "showErrorTextColor", "type", "value", "innerRef", "tabIndex", "isAutoComplete", "dataItemid", "mask", "onPaste", "autoComplete", "isInvalidRedBackground"]);
     const [show_options, setShowOptions] = useState(false);
     const [internalValue, setInternalValue] = useState(value);
     const [internalSuggestedValues, setInternalSuggestedValues] = useState(suggestedValues || []);
@@ -1956,7 +1966,7 @@ const Input$1 = (_a) => {
         formatted_value = formatAsMask(internalValue, mask);
     }
     const baseId = dataItemid || 'input';
-    return type === 'textarea' ? (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, "data-itemid": `${baseId}-wrapper`, style: style },
+    return type === 'textarea' ? (React.createElement(StyledWrapper, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, "data-itemid": `${baseId}-wrapper`, style: style },
         React.createElement(StyledTextArea, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$showErrorTextColor": showErrorTextColor, autoComplete: autoComplete, maxLength: maxLength, onBlur: readOnly
                 ? e => e.preventDefault()
                 : e => {
@@ -1979,7 +1989,7 @@ const Input$1 = (_a) => {
             React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: mdiLoading, size: '20px', spin: true }))) : null,
         showCharCount ? (React.createElement(CharacterCount, { "data-itemid": `${baseId}-char-count` },
             internalValue.length,
-            maxLength ? ` / ${maxLength}` : null)) : null)) : (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, "data-itemid": `${baseId}-wrapper`, style: style },
+            maxLength ? ` / ${maxLength}` : null)) : null)) : (React.createElement(StyledWrapper, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, "data-itemid": `${baseId}-wrapper`, style: style },
         React.createElement(StyledInput, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$showErrorTextColor": showErrorTextColor, autoComplete: autoComplete, max: max, maxLength: maxLength, min: min, onBlur: readOnly
                 ? e => e.preventDefault()
                 : e => {
@@ -2534,6 +2544,7 @@ const Check = styled.span `
   border-width: 2px;
   border-style: solid;
   border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
+  background-color: ${props => props.$invalid && props.$isInvalidRedBackground ? '#ffe5e5' : '#ffffff'};
   box-sizing: border-box;
   position: relative;
   &:after {
@@ -2557,11 +2568,11 @@ const Label = styled.span `
   margin-left: 6px;
 `;
 const Radio = (_a) => {
-    var { children, disabled, checked, onChange, value, invalid, tooltip, tabIndex, dataItemid } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex", "dataItemid"]);
+    var { children, disabled, checked, onChange, value, invalid, tooltip, tabIndex, dataItemid, isInvalidRedBackground = false } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground"]);
     const baseId = dataItemid || 'radio';
     return (React.createElement(Wrapper$2, Object.assign({}, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
         React.createElement(Input, { checked: checked, "data-itemid": `${baseId}-input`, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'radio', value: value }),
-        React.createElement(Check, { "$invalid": invalid, "data-itemid": `${baseId}-check` }),
+        React.createElement(Check, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "data-itemid": `${baseId}-check` }),
         React.createElement(Label, { "data-itemid": `${baseId}-label` },
             children,
             tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));