Allows for native titles to replace Reqore popovers.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "ReQore is a UI library of components for Qorus connected apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/components/Sidebar/index.tsx

@@ -50,6 +50,7 @@ export interface IQorusSidebarProps {
   path: string;
   wrapperStyle?: React.CSSProperties;
   onBookmarksChange?: (bookmarks: string[]) => void;
+  useNativeTitle?: boolean;
 }
 
 const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>`
@@ -312,6 +313,7 @@ const ReqoreSidebar: React.FC<IQorusSidebarProps> = ({
   collapseLabel,
   wrapperStyle,
   onBookmarksChange,
+  useNativeTitle,
 }) => {
   const [_isCollapsed, setIsCollapsed] = useState<boolean>(
     isCollapsed || false
@@ -389,6 +391,7 @@ const ReqoreSidebar: React.FC<IQorusSidebarProps> = ({
                       onUnfavoriteClick={handleUnfavoriteClick}
                       sectionName={sectionId}
                       hasFavorites={!!onBookmarksChange}
+                      useNativeTitle={useNativeTitle}
                     />
                   ))}
                 </div>

src/components/Sidebar/item.tsx

@@ -27,6 +27,7 @@ export interface SidebarItemProps {
   currentPath: string;
   sectionName: string;
   hasFavorites: boolean;
+  useNativeTitle?: boolean;
 }
 
 export interface ISidebarTooltipProps {
@@ -37,6 +38,7 @@ export interface ISidebarTooltipProps {
   isSubcategory: boolean;
   isSubitem: boolean;
   onClick: any;
+  useNativeTitle?: boolean;
 }
 
 const SidebarItemTooltip: Function = ({
@@ -47,9 +49,28 @@ const SidebarItemTooltip: Function = ({
   isSubitem,
   isSubcategory,
   onClick,
+  useNativeTitle,
 }: ISidebarTooltipProps) => {
   const Element = itemData.as || 'div';
 
+  if (useNativeTitle) {
+    return (
+      //@ts-ignore
+      <Element
+        {...itemData.props}
+        onClick={itemData.props?.onClick || onClick}
+        className={classnames('sidebarItem', 'sidebarLink', {
+          sidebarSubItem: isSubitem,
+          active: isActive,
+          submenuCategory: isSubcategory,
+        })}
+        title={itemData.name}
+      >
+        {children}
+      </Element>
+    );
+  }
+
   return (
     //@ts-ignore
     <ReqorePopover
@@ -85,6 +106,7 @@ const SidebarItem: Function = ({
   currentPath,
   sectionName,
   hasFavorites,
+  useNativeTitle,
 }: SidebarItemProps) => {
   const handleFavoriteClick = (event) => {
     event.persist();
@@ -122,6 +144,7 @@ const SidebarItem: Function = ({
         itemData={itemData}
         isActive={isActive}
         isSubitem={subItem}
+        useNativeTitle={useNativeTitle}
         onClick={
           onSectionToggle
             ? () => {
@@ -172,6 +195,7 @@ const SidebarItemWrapper: Function = ({
   onUnfavoriteClick,
   hasFavorites,
   sectionName,
+  useNativeTitle,
 }: SidebarItemProps) => {
   const theme: IReqoreTheme = useContext(ThemeContext);
 
@@ -222,6 +246,7 @@ const SidebarItemWrapper: Function = ({
         onUnfavoriteClick={onUnfavoriteClick}
         sectionName={sectionName}
         hasFavorites={hasFavorites}
+        useNativeTitle={useNativeTitle}
       />
       {expandedSection === itemData.name &&
         map(itemData.submenu, (subItemData: any, key: number) => (
@@ -236,6 +261,7 @@ const SidebarItemWrapper: Function = ({
             onUnfavoriteClick={onUnfavoriteClick}
             sectionName={sectionName}
             hasFavorites={hasFavorites}
+            useNativeTitle={useNativeTitle}
           />
         ))}
     </>

src/stories/Sidebar/Sidebar.stories.tsx

@@ -94,3 +94,9 @@ WithCustomColors.args = {
   },
   path: '/item-3/item-2',
 } as IReqoreUIProviderProps & IQorusSidebarProps;
+
+export const WithNativeTitles = Template.bind({});
+
+WithNativeTitles.args = {
+  useNativeTitle: true,
+} as IReqoreUIProviderProps & IQorusSidebarProps;