@coreui/react 5.9.2 → 5.11.0

package/src/components/search-button/utils.ts

@@ -0,0 +1,140 @@
+import type { SearchButtonShortcut } from './types'
+
+const MODIFIER_KEYS = new Set(['alt', 'ctrl', 'meta', 'shift'])
+const KEY_ALIASES: Record<string, string> = {
+  ' ': 'space',
+  cmd: 'meta',
+  command: 'meta',
+  control: 'ctrl',
+  esc: 'escape',
+  option: 'alt',
+  return: 'enter',
+  spacebar: 'space',
+}
+const KEY_LABELS: Record<string, string> = {
+  alt: 'Alt',
+  ctrl: 'Ctrl',
+  meta: '⌘',
+  shift: 'Shift',
+  space: 'Space',
+}
+const EDITABLE_TARGET_SELECTOR =
+  'input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]'
+
+export const normalizeKey = (key: string) => KEY_ALIASES[key.toLowerCase()] || key.toLowerCase()
+
+export const parseShortcut = (shortcut: string): SearchButtonShortcut[] =>
+  shortcut
+    .split(',')
+    .map((value) => value.trim())
+    .filter(Boolean)
+    .map((value) => {
+      const keys = value.split('+').map((part) => normalizeKey(part.trim()))
+      const modifiers = {
+        alt: false,
+        ctrl: false,
+        meta: false,
+        shift: false,
+      }
+
+      let key = ''
+
+      for (const part of keys) {
+        if (MODIFIER_KEYS.has(part)) {
+          modifiers[part as keyof typeof modifiers] = true
+          continue
+        }
+
+        key = part
+      }
+
+      return {
+        key,
+        modifiers,
+        shortcut: value,
+      }
+    })
+
+const getPlatform = () => {
+  if (typeof window === 'undefined') {
+    return ''
+  }
+
+  const navigator = window.navigator as Navigator & {
+    userAgentData?: {
+      platform?: string
+    }
+  }
+
+  return navigator.userAgentData?.platform || navigator.platform || navigator.userAgent || ''
+}
+
+export const isMacOS = () => /Mac|iPhone|iPad|iPod|macOS|Macintosh/.test(getPlatform())
+
+export const getPreferredShortcut = (shortcuts: SearchButtonShortcut[]) =>
+  shortcuts.find((shortcut) => (isMacOS() ? shortcut.modifiers.meta : shortcut.modifiers.ctrl)) ||
+  shortcuts[0] ||
+  null
+
+export const getKeyLabel = (key: string) =>
+  KEY_LABELS[key] ||
+  (key.length === 1 ? key.toUpperCase() : `${key.charAt(0).toUpperCase()}${key.slice(1)}`)
+
+export const formatShortcutTokens = (shortcut: string) =>
+  shortcut
+    .split('+')
+    .map((part) => normalizeKey(part.trim()))
+    .map((part) => getKeyLabel(part))
+    .filter(Boolean)
+
+export const getPressedKeys = (event: KeyboardEvent) => {
+  const pressedKeys = new Set<string>()
+
+  if (event.altKey) {
+    pressedKeys.add(KEY_LABELS.alt)
+  }
+
+  if (event.ctrlKey) {
+    pressedKeys.add(KEY_LABELS.ctrl)
+  }
+
+  if (event.metaKey) {
+    pressedKeys.add(KEY_LABELS.meta)
+  }
+
+  if (event.shiftKey) {
+    pressedKeys.add(KEY_LABELS.shift)
+  }
+
+  const normalizedKey = normalizeKey(event.key)
+
+  if (!MODIFIER_KEYS.has(normalizedKey) && event.type === 'keydown') {
+    pressedKeys.add(getKeyLabel(normalizedKey))
+  }
+
+  return pressedKeys
+}
+
+export const isEditableTarget = (target: EventTarget | null) => {
+  if (!(target instanceof Element)) {
+    return false
+  }
+
+  return target.matches(EDITABLE_TARGET_SELECTOR) || !!target.closest(EDITABLE_TARGET_SELECTOR)
+}
+
+export const shouldIgnoreShortcut = (event: KeyboardEvent) =>
+  isEditableTarget(event.target) && !event.ctrlKey && !event.metaKey
+
+export const matchesShortcut = (shortcut: SearchButtonShortcut, event: KeyboardEvent) => {
+  if (!shortcut.key || normalizeKey(event.key) !== shortcut.key) {
+    return false
+  }
+
+  return (
+    shortcut.modifiers.alt === event.altKey &&
+    shortcut.modifiers.ctrl === event.ctrlKey &&
+    shortcut.modifiers.meta === event.metaKey &&
+    shortcut.modifiers.shift === event.shiftKey
+  )
+}

package/src/components/sidebar/CSidebarNav.tsx

@@ -28,6 +28,18 @@ export interface CSidebarNavProps extends HTMLAttributes<HTMLUListElement> {
    * A string of all className you want applied to the component.
    */
   className?: string
+  /**
+   * Make navigation more compact by cutting link padding in half.
+   *
+   * @since 5.11.0
+   */
+  compact?: boolean
+  /**
+   * Sets the navigation variant.
+   *
+   * @since 5.11.0
+   */
+  variant?: 'tree'
 }
 
 const isNavElement = (
@@ -69,7 +81,7 @@ const recursiveClone = (children: ReactNode, id?: string, updateId?: boolean): R
 export const CSidebarNav: PolymorphicRefForwardingComponent<'ul', CSidebarNavProps> = forwardRef<
   HTMLUListElement,
   CSidebarNavProps
->(({ children, as: Component = 'ul', className, ...rest }, ref) => {
+>(({ children, as: Component = 'ul', className, compact, variant, ...rest }, ref) => {
   const [visibleGroup, setVisibleGroup] = useState('')
   const CNavContextValues = {
     visibleGroup,
@@ -78,7 +90,18 @@ export const CSidebarNav: PolymorphicRefForwardingComponent<'ul', CSidebarNavPro
 
   return (
     <CSidebarNavContext.Provider value={CNavContextValues}>
-      <Component className={classNames('sidebar-nav', className)} ref={ref} {...rest}>
+      <Component
+        className={classNames(
+          'sidebar-nav',
+          {
+            compact,
+            'sidebar-nav-tree': variant === 'tree',
+          },
+          className
+        )}
+        ref={ref}
+        {...rest}
+      >
         {recursiveClone(children)}
       </Component>
     </CSidebarNavContext.Provider>
@@ -89,6 +112,8 @@ CSidebarNav.propTypes = {
   as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
+  compact: PropTypes.bool,
+  variant: PropTypes.oneOf(['tree']),
 }
 
 CSidebarNav.displayName = 'CSidebarNav'

package/src/components/tooltip/CTooltip.tsx

@@ -188,13 +188,24 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
       ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
     }
 
+    const handleShow = () => {
+      setMounted(true)
+      onShow?.()
+    }
+
+    const handleHide = () => {
+      setTimeout(() => {
+        setVisible(false)
+        onHide?.()
+      }, _delay.hide)
+    }
+
     useEffect(() => {
-      if (visible) {
+      if (visible === true) {
         handleShow()
-        return
+      } else if (visible === false) {
+        handleHide()
       }
-
-      handleHide()
     }, [visible])
 
     useEffect(() => {
@@ -220,22 +231,6 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
       }
     }, [_visible])
 
-    const handleShow = () => {
-      setMounted(true)
-      if (onShow) {
-        onShow()
-      }
-    }
-
-    const handleHide = () => {
-      setTimeout(() => {
-        setVisible(false)
-        if (onHide) {
-          onHide()
-        }
-      }, _delay.hide)
-    }
-
     useEffect(() => {
       updatePopper()
     }, [content])

package/src/components/tooltip/__tests__/CTooltip.spec.tsx

@@ -66,6 +66,9 @@ test('CTooltip onShow and onHide', async () => {
 
   act(() => {
     fireEvent.click(btn)
+  })
+
+  act(() => {
     jest.runAllTimers()
   })
 
@@ -74,6 +77,9 @@ test('CTooltip onShow and onHide', async () => {
 
   act(() => {
     fireEvent.click(btn)
+  })
+
+  act(() => {
     jest.runAllTimers()
   })