@coreui/react 5.0.0-alpha.2 → 5.0.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +1 -1
  2. package/dist/components/dropdown/CDropdownToggle.d.ts +6 -0
  3. package/dist/index.es.js +6 -2
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/index.js +6 -2
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/dropdown/CDropdownToggle.tsx +17 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coreui/react",
3
- "version": "5.0.0-alpha.2",
3
+ "version": "5.0.0-alpha.3",
4
4
  "description": "UI Components Library for React.js",
5
5
  "keywords": [
6
6
  "react",
package/src/components/dropdown/CDropdownToggle.tsx CHANGED
@@ -18,6 +18,12 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
18
18
  * Create a custom toggler which accepts any content.
19
19
  */
20
20
  custom?: boolean
21
+ /**
22
+ * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
23
+ *
24
+ * @since v5.0.0-alpha.3
25
+ */
26
+ navLink?: boolean
21
27
  /**
22
28
  * Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
23
29
  */
@@ -35,11 +41,12 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
35
41
  caret = true,
36
42
  custom,
37
43
  className,
44
+ navLink = true,
38
45
  split,
39
46
  trigger = 'click',
40
47
  ...rest
41
48
  }) => {
42
- const { dropdownToggleRef, visible, setVisible } = useContext(CDropdownContext)
49
+ const { dropdownToggleRef, variant, visible, setVisible } = useContext(CDropdownContext)
43
50
 
44
51
  const triggers = {
45
52
  ...((trigger === 'click' || trigger.includes('click')) && {
@@ -57,6 +64,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
57
64
  const togglerProps = {
58
65
  className: classNames(
59
66
  {
67
+ 'nav-link': variant === 'nav-item' && navLink,
60
68
  'dropdown-toggle': caret,
61
69
  'dropdown-toggle-split': split,
62
70
  show: visible,
@@ -80,6 +88,14 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
80
88
  )
81
89
  }
82
90
 
91
+ if (variant === 'nav-item' && navLink) {
92
+ return (
93
+ <a href="#" {...togglerProps} role="button" ref={dropdownToggleRef}>
94
+ {children}
95
+ </a>
96
+ )
97
+ }
98
+
83
99
  return (
84
100
  <CButton {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>
85
101
  {children}