- update: react-popper v 2.1 added

- update: CDropdown, CDropdownMenu, CDropdownToggle update
- fix: CToggler classes with prefix c- replace old classes

Author: Tomasz John

package.json

@@ -40,6 +40,7 @@
     "link": "npm link && link.sh"
   },
   "dependencies": {
+    "@popperjs/core": "^2.2.1",
     "classnames": "^2.2.6",
     "core-js": "^3.6.4",
     "lodash.isfunction": "^3.0.9",

src/CDropdown.js

@@ -31,7 +31,11 @@ const CDropdown = props=>{
 
   //render
 
-  return <CDropdownCustom {...attributes} show={show} toggle={toggle} />;
+  return <CDropdownCustom
+    {...attributes}
+    show={show}
+    toggle={toggle}
+  />;
 
 }
 

src/CDropdownCustom.js

@@ -194,7 +194,8 @@ const CDropdownCustom = props=>{
 
   const direction = props.direction; //(props.direction === 'down' && dropup) ? 'up' :
 
-  attributes.tag = attributes.tag || (inNav ? 'li' : 'div');
+  //attributes.tag
+  let Tag = attributes.tag || (inNav ? 'li' : 'div');
 
   let subItemIsActive = false;
 
@@ -221,6 +222,27 @@ const CDropdownCustom = props=>{
     }
   ), cssModule);
 
+  return (
+    <Context.Provider value={{
+      toggle: props.toggle,
+      isOpen: props.show,
+      direction: props.direction, //(props.direction === 'down' && props.dropup) ? 'up' :
+      inNavbar: props.inNavbar,
+    }}>
+      <Tag
+        {...attributes}
+        className={classes}
+        onKeyDown={handleKeyDown}
+        ref={reference}
+      >
+        <Manager>
+          {props.children}
+        </Manager>
+      </Tag>
+    </Context.Provider>
+  );
+
+  /*
   return (
     <Context.Provider value={{
       toggle: props.toggle,
@@ -238,6 +260,7 @@ const CDropdownCustom = props=>{
       </CPopperContentWrapper>
     </Context.Provider>
   );
+  */
 
 }
 

src/CDropdownMenu.js

@@ -11,6 +11,7 @@ const CDropdownMenu = props=>{
 
   const {
     className,
+    children,
     cssModule,
     right,
     tag,
@@ -44,29 +45,48 @@ const CDropdownMenu = props=>{
   ), cssModule);
 
   let Tag = tag;
+  let placement;
+  let myModifiers = modifiers;
 
   if (persist || (context.isOpen && !context.inNavbar)) {
     Tag = Popper;
     const position1 = directionPositionMap[context.direction] || 'bottom';
     const position2 = right ? 'end' : 'start';
-    attributes.placement = `${position1}-${position2}`;
-    attributes.component = tag;
-    attributes.modifiers = !flip ? {
+    placement = `${position1}-${position2}`;
+    //attributes.component = tag;
+    myModifiers = !flip ? {
       ...modifiers,
       ...noFlipModifier,
     } : modifiers;
   }
 
+  /*
+  x-placement={attributes.placement}
+  ref={innerRef}
+  */
   return (
     <Tag
-      tabIndex="-1"
-      role="menu"
-      {...attributes}
-      aria-hidden={!context.isOpen}
-      className={classes}
-      x-placement={attributes.placement}
-      ref={innerRef}
-    />
+      placement = {placement}
+      modifiers = {myModifiers}
+    >
+      {({ ref, style, placement, arrowProps }) => {
+        //console.log(style, children);
+        return (
+          <div
+            {...attributes}
+            tabIndex="-1"
+            role="menu"
+            aria-hidden={!context.isOpen}
+            className={classes}
+
+            ref={ref}
+            data-placement={placement}
+          >
+            {children}
+          </div>
+        )}
+      }
+    </Tag>
   );
 
 }

src/CDropdownToggle.js

@@ -2,9 +2,10 @@ import React, {useContext} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {tagPropType, mapToCssModules} from './Shared/helper.js';
-import {Target} from 'react-popper';
+import {Reference} from 'react-popper';
 import CButton from './CButton';
 import {Context} from './CDropdownCustom';
+import CHeaderNavLink from './CHeaderNavLink';
 
 //component - CoreUI / CDropdownToggle
 
@@ -14,6 +15,7 @@ const CDropdownToggle = props=>{
     className,
     color,
     cssModule,
+
     //
     innerRef,
     caret,
@@ -24,7 +26,7 @@ const CDropdownToggle = props=>{
     togglerHtml,
     ...attributes
   } = props;
-  
+
   const context = useContext(Context);
 
   const onClick = e=>{
@@ -98,6 +100,24 @@ const CDropdownToggle = props=>{
       );
   }
 
+  return (
+    <Reference>
+      {({ ref }) => (
+        <Tag
+          ref={ref}
+          {...attributes}
+          className={classes}
+          onClick={onClick}
+          aria-expanded={context.isOpen}
+          ref={innerRef}
+        >
+          {children}
+        </Tag>
+      )}
+    </Reference>
+  );
+
+  /*
   return (
     <Target
       {...attributes}
@@ -110,7 +130,7 @@ const CDropdownToggle = props=>{
       {children}
     </Target>
   );
-
+  */
 }
 
 CDropdownToggle.propTypes = {

src/CToggler.js

@@ -39,12 +39,12 @@ const CToggler = props=>{
 
   const classes = mapToCssModules(classNames(
     className,
-    togglerType ? `${togglerType}-toggler` : null,
+    togglerType ? `c-${togglerType}-toggler` : null,
   ), cssModule);
 
   if (!custom){
     const classesTrigger = mapToCssModules(classNames(
-      togglerType ? `${togglerType}-toggler-icon` : null,
+      togglerType ? `c-${togglerType}-toggler-icon` : null,
     ), cssModule);
     return (
       <Tag {...attributes} className={classes} onClick={onClick}>