@npm-questionpro/global-features

Reusable global features and components for QuestionPro applications.

Installation

npm install @npm-questionpro/global-features

Peer Dependencies

This package relies on your project's React installation.

• React: >=18.0.0 <20.0.0
• React DOM: >=18.0.0 <20.0.0

As peer dependencies, React and React DOM are not bundled with this package; your app's versions are used.

Usage

Import CSS

Important: You must import the CSS file in your application's entry point (e.g., main.tsx or index.tsx):

import '@npm-questionpro/global-features/lib/styles/global-features.css'

Basic Usage

import {GlobalDataSearch} from '@npm-questionpro/global-features'
import type {ISearchItem} from '@npm-questionpro/global-features'

const MyComponent = () => {
  const [items, setItems] = useState<ISearchItem[]>([])
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    setIsLoading(true)
    fetchSearchData().then(data => {
      setItems(data)
      setIsLoading(false)
    })
  }, [])

  const handleItemClick = (item: ISearchItem) => {
    console.log('Clicked:', item)
  }

  return (
    <GlobalDataSearch
      items={items}
      isLoading={isLoading}
      onItemClick={handleItemClick}
    />
  )
}

Custom Icons

import {GlobalDataSearch} from '@npm-questionpro/global-features'
import {WuIcon} from '@npm-questionpro/wick-ui-lib'
;<GlobalDataSearch
  items={items}
  isLoading={isLoading}
  onItemClick={handleItemClick}
  searchIcon={<WuIcon icon="wm-search" style={{fontSize: '18px'}} />}
/>

Props

GlobalDataSearch

| Prop | Type | Required | Default | Description | | ----------------- | ----------------------------- | -------- | ------------------------------------- | ----------------------------- | | items | ISearchItem[] | Yes | - | Array of search items | | isLoading | boolean | No | false | Loading state | | placeholder | string | No | 'Search surveys, folders, or tools' | Input placeholder | | noResultsText | string | No | 'No results found' | No results message | | topItemsCount | number | No | 3 | Recent items count when empty | | onItemClick | (item: ISearchItem) => void | Yes | - | Item click handler | | onSearch | (query: string) => void | No | - | Query change handler | | onClear | () => void | No | - | Clear handler | | onFocus | () => void | No | - | Focus handler | | onClose | () => void | No | - | Close handler | | onExpand | () => void | No | - | Expand handler | | onCollapse | () => void | No | - | Collapse handler | | defaultExpanded | boolean | No | false | Initially expanded | | searchIcon | React.ReactNode | No | - | Custom search icon |

ISearchItem

interface ISearchItem {
  id: string | number
  label: string
  category: string
  actionURL?: string
  lastEditTimeStamp?: number
  icon?: string
}

Features

• Collapsible search with toggle icon
• Expand/collapse animations
• Live filtering
• Grouped results by category
• Click outside to close
• Customizable icons

Accessibility & Behavior

Keyboard Support

• Toggle button: Responds to Enter and Space keys to expand/collapse
• Clear button: Responds to Enter and Space keys to clear the search query
• Input focus: Automatically focuses the search input when expanded

ARIA Labels

The component includes comprehensive ARIA labels for screen readers:

• app header search - Main container
• toggle search - Toggle button to expand/collapse search
• search input - Search input field
• search results - Dropdown container with search results
• clear search - Clear/close icon button
• search icon - Search icon (decorative)

Roles

• Toggle button: role="button" with tabIndex={0}
• Clear button: role="button" with tabIndex={0}
• Search icon: role="img"

Behavior

• Dropdown visibility: Shown only when isExpanded && isFocused && !isLoading
• Expand/Collapse callbacks: onExpand and onCollapse fire after animation transitions (150ms)
• Top items: When search is empty, shows top topItemsCount items sorted by lastEditTimeStamp (descending)
• Item filtering: Items without lastEditTimeStamp are excluded from top items display
• Click outside: Automatically collapses when clicking outside the component

Packaging Notes

Only compiled outputs (lib/**/*), README.md, and package.json are published. Source, tests, and configs are excluded.

License

ISC