@coreui/react 5.10.0 → 5.11.0

package/src/components/search-button/__tests__/__snapshots__/CSearchButton.spec.tsx.snap

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSearchButton customize 1`] = `
+<div>
+  <button
+    class="search-button bazinga"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="search-button-icon"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="m479.6 399.716-81.084-81.084-62.368-25.767A175 175 0 0 0 368 192c0-97.047-78.953-176-176-176S16 94.953 16 192s78.953 176 176 176a175.03 175.03 0 0 0 101.619-32.377l25.7 62.2 81.081 81.088a56 56 0 1 0 79.2-79.195M48 192c0-79.4 64.6-144 144-144s144 64.6 144 144-64.6 144-144 144S48 271.4 48 192m408.971 264.284a24.03 24.03 0 0 1-33.942 0l-76.572-76.572-23.894-57.835 57.837 23.894 76.573 76.572a24.03 24.03 0 0 1-.002 33.941"
+        fill="currentColor"
+      />
+    </svg>
+    <span
+      class="search-button-placeholder"
+    >
+      Command palette
+    </span>
+    <span
+      aria-hidden="true"
+      class="search-button-keys"
+    >
+      <span
+        class="search-button-key"
+        data-coreui-search-button-key="⌘"
+      >
+        ⌘
+      </span>
+      <span
+        class="search-button-key"
+        data-coreui-search-button-key="K"
+      >
+        K
+      </span>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`loads and displays CSearchButton component 1`] = `
+<div>
+  <button
+    class="search-button"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="search-button-icon"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="m479.6 399.716-81.084-81.084-62.368-25.767A175 175 0 0 0 368 192c0-97.047-78.953-176-176-176S16 94.953 16 192s78.953 176 176 176a175.03 175.03 0 0 0 101.619-32.377l25.7 62.2 81.081 81.088a56 56 0 1 0 79.2-79.195M48 192c0-79.4 64.6-144 144-144s144 64.6 144 144-64.6 144-144 144S48 271.4 48 192m408.971 264.284a24.03 24.03 0 0 1-33.942 0l-76.572-76.572-23.894-57.835 57.837 23.894 76.573 76.572a24.03 24.03 0 0 1-.002 33.941"
+        fill="currentColor"
+      />
+    </svg>
+    <span
+      class="search-button-placeholder"
+    >
+      Search
+    </span>
+    <span
+      aria-hidden="true"
+      class="search-button-keys"
+    >
+      <span
+        class="search-button-key"
+        data-coreui-search-button-key="⌘"
+      >
+        ⌘
+      </span>
+      <span
+        class="search-button-key"
+        data-coreui-search-button-key="/"
+      >
+        /
+      </span>
+    </span>
+  </button>
+</div>
+`;

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

@@ -0,0 +1,3 @@
+import { CSearchButton } from './CSearchButton'
+
+export { CSearchButton }

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

@@ -0,0 +1,10 @@
+export type SearchButtonShortcut = {
+  key: string
+  modifiers: {
+    alt: boolean
+    ctrl: boolean
+    meta: boolean
+    shift: boolean
+  }
+  shortcut: string
+}

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()
   })