@hexure/ui 1.13.23 → 1.13.25

package/dist/cjs/index.js

@@ -261,7 +261,7 @@ const Badge$1 = styled.span `
   margin-right: ${props => (props.$small ? '-5px' : '-10px')};
 `;
 const Button = (_a) => {
-    var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary', toolTip } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format", "toolTip"]);
+    var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary', toolTip, title = '' } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format", "toolTip", "title"]);
     const theme = React.useContext(styled.ThemeContext) || EditableTheme;
     const has_children = children && children.length > 0;
     const button_type_mapping = {
@@ -295,7 +295,7 @@ const Button = (_a) => {
         },
     };
     const format_styles = button_type_mapping[format];
-    const button_view = (React.createElement(StyledButton, Object.assign({ "$bg_color": format_styles.background_color, "$border_color": format_styles.border_color, "$disabled": disabled || loading, "$hasChildren": !!has_children, "$margin": margin, "$small": small, onClick: disabled || loading ? undefined : onClick, type: isForm ? 'submit' : undefined }, accessibleProps),
+    const button_view = (React.createElement(StyledButton, Object.assign({ "$bg_color": format_styles.background_color, "$border_color": format_styles.border_color, "$disabled": disabled || loading, "$hasChildren": !!has_children, "$margin": margin, "$small": small, onClick: disabled || loading ? undefined : onClick, title: title, type: isForm ? 'submit' : undefined }, accessibleProps),
         children ? (React.createElement(Label$5, { "$content_color": format_styles.content_color, "$small": small }, children)) : null,
         icon && !badge ? (React.createElement(StyledIcon$5, { "$hasChildren": !!has_children },
             React.createElement(Icon, { color: format ? format_styles.content_color : '#fff', path: loading ? js.mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
@@ -554,9 +554,12 @@ const SidebarContainer = styled.div `
   padding: 12px 0px;
   width: ${props => (props.$isOpen ? props.$width : '60px')};
 `;
-const MenuWrapper$1 = styled.div `
+const MenuWrapper$1 = styled.button `
   display: flex;
   align-items: center;
+  border: 0px;
+  background-color: transparent;
+  padding-left: 0px;
   border-left-width: 4px;
   border-left-style: solid;
   border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
@@ -636,7 +639,7 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
     return (React.createElement(SidebarContainer, { "$isOpen": !collapsed, "$width": defaultWidth },
         React.createElement(SidebarMenuContainer, null, menu.map(nav_item => {
             return (React.createElement(React.Fragment, { key: nav_item.label },
-                React.createElement(MenuWrapper$1, { "$active": !!nav_item.is_active, "$color": theme.PRIMARY_COLOR, onClick: nav_item.onClick },
+                React.createElement(MenuWrapper$1, { "$active": !!nav_item.is_active, "$color": theme.PRIMARY_COLOR, onClick: nav_item.onClick, title: collapsed ? (nav_item === null || nav_item === void 0 ? void 0 : nav_item.title) || nav_item.label : '' },
                     React.createElement(MenuIcon, { "$active": !!nav_item.is_active, path: nav_item.icon }),
                     collapsed ? null : (React.createElement(MenuLabel, { "$active": nav_item.is_active, "$color": theme.PRIMARY_COLOR }, nav_item.label))),
                 nav_item.is_active && nav_item.menu && !collapsed ? (React.createElement(SubMenu, null, nav_item.menu.map(menu_item => (React.createElement(SubMenuItem, { "$active": menu_item.is_active, "$color": theme.PRIMARY_COLOR, key: menu_item.label, onClick: menu_item.onClick }, menu_item.label))))) : null));
@@ -1651,7 +1654,9 @@ const StyledInput = styled.input `
   font-weight: 400;
   font-family: ${FontStyles.DEFAULT};
   line-height: 1.28em;
-  color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex)};
+  color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
+    ? Colors.RED.Hex
+    : Colors.BLACK.Hex};
   position: relative;
   height: ${props => props.$height || 'auto'};
   padding: 10px;
@@ -1674,7 +1679,9 @@ const StyledTextArea = styled.textarea `
   height: ${props => props.$height || 'auto'};
   font-family: 'Roboto', Helvetica, Arial, sans-serif;
   line-height: 1.28em;
-  color: ${({ $invalid }) => ($invalid ? '#ff0000' : '#000000')};
+  color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
+    ? Colors.RED.Hex
+    : Colors.BLACK.Hex};
   position: relative;
   padding: 10px;
   opacity: 1;
@@ -1785,7 +1792,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, type = 'text', value = '' } = _a, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "loading", "max", "maxLength", "min", "onBlur", "onChange", "onFocus", "onKeyDown", "onSuggestedSelect", "placeholder", "readOnly", "showCharCount", "step", "style", "suggestedValues", "type", "value"]);
+    onSuggestedSelect = () => { }, placeholder, readOnly, showCharCount, step, style, suggestedValues, showErrorTextColor = false, type = 'text', value = '' } = _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"]);
     const [show_options, setShowOptions] = React.useState(false);
     const [internalValue, setInternalValue] = React.useState(value);
     const [internalSuggestedValues, setInternalSuggestedValues] = React.useState(suggestedValues || []);
@@ -1852,7 +1859,7 @@ const Input$1 = (_a) => {
         formatted_value = formatAsSsn(internalValue);
     }
     return type === 'textarea' ? (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length },
-        React.createElement(StyledTextArea, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, maxLength: maxLength, onBlur: readOnly
+        React.createElement(StyledTextArea, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$showErrorTextColor": showErrorTextColor, maxLength: maxLength, onBlur: readOnly
                 ? e => e.preventDefault()
                 : e => {
                     if (onBlur)
@@ -1872,7 +1879,7 @@ const Input$1 = (_a) => {
         showCharCount ? (React.createElement(CharacterCount, null,
             internalValue.length,
             maxLength ? ` / ${maxLength}` : null)) : null)) : (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length },
-        React.createElement(StyledInput, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, max: max, maxLength: maxLength, min: min, onBlur: readOnly
+        React.createElement(StyledInput, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$showErrorTextColor": showErrorTextColor, max: max, maxLength: maxLength, min: min, onBlur: readOnly
                 ? e => e.preventDefault()
                 : e => {
                     if (onBlur)