@qui/react

Highlights

• fix (QCombobox): click events on a filterable combobox input now adjust the cursor position as expected.

Highlights

• fix (QCombobox): the Home and End keys move the cursor to the beginning/end of the input field.

Highlights

• fix (QPagination): fixed the type of the QRowsPerPageChangeDetails event.

Highlights

• feat: updated utility imports from @qui/base for readability.

Highlights

• fix (QBadge): border-radius adjusted to 1px for text and icon variants.

Highlights

• fix (QCheckbox): adjusted checkbox border-radius to 1px.

Highlights

• feat (QDialog): added closeOnOutsideClick prop, defaults to true. Set to false to prevent the dialog from closing when the user clicks the content behind it.

Highlights

• feat (QStepper): the active step is now indicated to screen readers by aria-current="step".
• feat (QStepper): each QStep component is now associated with its label (if present) by aria-labelledby.
• feat (QStepper): each QStep component is now associated with its description (if present) by aria-describedby.
• feat (QCollapse): added innerWrapperProps to customize props for the element that wraps the children.
• feat (QSideNavigationItem): improved accessibility by associating items with labels and descriptions using aria-label, aria-labelledby, and aria-describedby.
• feat (InternalStepContext): introduced internal context for managing stepper step IDs.
• feat (QStepDescription): integrated descriptionId management with InternalStepContext.
• feat (QStepLabel): integrated labelId management with InternalStepContext.
• fix (QSideNavigation): removed incorrect role="menu" from the root element.
• fix (QSideNavigationItem): added div wrapper element with role="listitem" to fix accessibility issues.
• fix (QStep): added role prop with default value "region" and applied necessary ARIA attributes.
• dev: updated test assertions related to changes in QSideNavigation component.
• dev: removed unnecessary role="menu" from QSideNavigation component.

Highlights

• fix (QListItem): the label, if provided, is now associated with the root element for improved accessibility.
• fix (QTabs): when a tab preceding the active one is closed, the active tab's index now correctly decreases by one to maintain the proper order.

Highlights

• chore (LazyMode): moved internal utilities to @qui/base package.

Highlights

• fix (QAccordionProps): fixed JSDoc description of the onExpandedChange parameters.
• fix (QAccordionProps): fixed JSDoc link in the description of the multiple prop.

Highlights

• fix (QTabs): fixed tab bar and active tab initial render. The active tab is now properly highlighted on the initial render, including SSR.

Highlights

• fix (QTab): the onMouseDown prop is no longer swallowed.
• fix (QTab): fixed a bug that was causing the :focus-visible style to appear on some click events.

Highlights

• feat (QCombobox): enhanced JSDoc comments for various function arguments.
• feat (QDialog): enhanced JSDoc comments for various function arguments.
• feat (QNotification): enhanced JSDoc comments for various function arguments.
• feat (QOverlayPanel): enhanced JSDoc comments for various function arguments.
• feat (QPagination): enhanced JSDoc comments for various function arguments.
• feat (QTextArea): enhanced JSDoc comments for various function arguments.
• feat (QTextInput): enhanced JSDoc comments for various function arguments.

Highlights

• feat (QCombobox): added JSDoc @param tags to each on*Change function.

Highlights

• feat (QBreadcrumbItem): added automatic id and label association for accessibility.
• fix (QTooltip): added role="tooltip" to floating element.
• dev (Testing): userEvent imports are now sourced from @vitest/browser/context for more reliable event triggers.
• dev (Testing): modified IS_REACT_ACT_ENVIRONMENT for compatibility with vitest browser mode.

Highlights

• fix (dependencies): updated react-remove-scroll dependencies for React 19 compat.

Highlights

• fix (MutableRefObject): updated imports to RejObject, as MutableRefObject was deprecated in v19.
• fix (QSlide): fixed onEntered prop not providing the node reference in the callback.
• fix (QSlide): removed forwardRef.

Highlights

• breaking (React): the minimum required version is now 19.
• breaking (QHeaderLegacy): this component was deprecated in v1.0.0 and has been removed. Migrate to the QHeader component.
• breaking (QWrapBalancer): the component has been removed. Migrate to the text-wrap CSS property.
• chore (refs): removed all instances of forwardRef in favor of the new ref prop.

Highlights

• feat (QSideNavigation): added onCollapsedChange property for controlling the collapsed state.
• feat (QSideNavigation): added defaultCollapsed property for passing the initial uncontrolled value to the collapsed state.
• deprecation (QWrapBalancer): this component predates the text-wrap CSS property, which accomplishes the same thing and is browser native.
• fix (input styles): the shared input style for hidden inputs, like those on the switch, radio, checkbox, etc., have been modified for better accessibility.
• fix (QAccordionButton): the label wrapper element is no longer invalid (changed to span from div).
• dev (testing): Cypress component tests have been removed in favor of vitest browser tests + testing-library.
• dev (testing): increased code coverage to 91.5%.

Highlights

• fix (various): ESLint fixes to align with updated configuration.

Highlights

• fix (QSideNavigation): removed extra space between the topNode and items.

Highlights

• updated @qui/base version to bring in Side Nav CSS fixes.
• fix (QSideNavigation): Simplified the collapse button implementation and fixed incorrect styles.
• fix (QSideNavigationItem): The onClick property from the render prop now fires as expected.

Highlights

• fix (QStepper): removed background color change for step separators.

Highlights

• fix (QTextArea): the label style now matches QDS 2.0.

Highlights

• feat (QStepper): added 5 new statuses: aborted, initializing, running, started, and success.

Highlights

• Loosened the peer dependencies for @qui packages.

Highlights

• Update dependencies: @qui/base

Highlights

• fix (QCombobox): the listboxRef prop is now passed as expected to the listbox element.

Highlights

• Update dependencies: @qui/base
• feat: public interfaces now use the @public JSDoc tag instead of the custom @group docs tag.

Highlights

• Update dependencies: @qui/base, @qui/styles
• fix (QHeader): the height has been adjusted down from 61px to 48px to match QDS styles (removed vertical padding).
• fix (QHeader): vertically oriented q-divider separators are now centered with a height of 24px to match QDS styles.

Highlights

• Update dependencies: @qui/styles
• feat: replaced default React import with named imports.

Highlights

• Update dependencies: @qui/base
• fix (QButton/QIconButton): the negative variant's text color has been adjusted to match QDS 2.0 styles.

Highlights

• Update dependencies: @qui/base
• bugfix (QTooltip): default max-width is now 200px.
• bugfix (QTooltip): added missing box-shadow style.

Highlights

• bugfix: lucide-react peerDependency adjusted to range. instead of static version.

Highlights

• Update dependencies: @qui/base
• bugfix (QNotification): close-icon element CSS fixed.
• bugfix (QTooltip): styles updated.
• bugfix (QTooltip): arrow is now enabled by default.
• bugfix (QTooltip, QOverlayPanel): the arrow position now aligns relative to the center of the reference element.

Highlights

• Update dependencies: @qui/base

Highlights

• chore: updated @tanstack/react-virtual dependency to 3.5.0.
• feat (QCombobox): added virtualOptions prop for configuring the virtual renderer.
• fix (QCombobox): the option.disabled property now styles the element as expected.

Highlights

• feat (QCombobox): added the listboxWrapperProps prop for customizing the element that wraps the listbox.

Highlights

• feat (QCombobox): added the renderOption prop for custom option rendering.

Highlights

• Update dependencies: @qui/base, @qui/styles

Highlights

• Update dependencies: @qui/base, @qui/styles

Highlights

• Update dependencies: @qui/base, @qui/styles
• dev: upgraded vite to v5.
• Changed package type to module.
• The CommonJS export is now index.cjs, and the ESM export is now index.js.

Highlights

• fix (QCombobox): fixed a bug that was preventing the text field from being filterable if the No Options label had been clicked.

Highlights

• feat (QCombobox): The active option is now highlighted when the combobox is opened.
• feat (QCombobox): When filterable is true and multiple is false, the presence of a value will no longer cause the Combobox to filter out the remaining options.
• fix (QMenu): Fixed an issue that was preventing the item's onClick prop (if supplied to the JSX of the render prop) from being fired.

Highlights

• fix: @floating-ui/react is now marked as external in the build process.

Highlights

This release features the 1.0 milestone. We've added the remaining QDS components, and reworked a few of our existing components for better DX. At that, we've introduced a few breaking changes.

Header Rework

The QHeader component has been reworked and now features similar composition to components like the Dialog and Stepper. This approach is more intuitive and customizable. Refer to the updated documentation for more details.

• breaking (QHeader): renamed to QHeaderLegacy. This component will be removed in a future update.

Other breaking changes:

• breaking (QOverlayPanel): the children prop is now required.
• breaking: @floating-ui/react has been moved to a peer dependency.

Additions and Fixes

• feat (QCombobox): Added QComboboxOnOpenChange type alias.
• feat (QCombobox): Added QComboboxOnInputChange type alias.
• feat (QCombobox): refined some prop comments for clarity.
• feat (QOverlayPanel): child components can now update the panel's aria-describedby and aria-labeledby using context.
• fix (QOverlayPanel): the anchor element now receives the correct aria-* attributes based on the visibility of the panel.
• feat (QOverlayPanel): added QOverlayPanelOpenChange type alias.
• feat (QOverlayPanel): added QOverlayPanelState type alias.
• feat (QOverlayPanel): added the useOverlayPanelContext hook. This is a utility hook available for child components of the Overlay Panel.
• feat (QOverlayPanel): the children prop is now available as a render prop.
• fix (QInlineAlert): the className prop no longer overwrites the base css class.

Docs

• Added the named type alias for many union and function properties.

Highlights

• feat (QStepper): simplified the horizontal stepper separator.

Highlights

• fix (QDialogBody): fixed a bug that was preventing the id from applying.

Highlights

• feat (QCombobox): added disableOptionToggle prop.
• fix (QPagination): the rows per page dropdown will no longer reset if the selected option is selected again.

Highlights

• feat (QDialog): the QDialogHeader and QDialogBody ID's are associated with the role=dialog element for ARIA conformance.
• feat (QDialog): the dialog content's default element has been changed from div to section.
• feat (QDialog): the dialog header's default element has been changed from div to h2.

Highlights

• Update dependencies: @qui/base

Highlights

• Moved internal DescendantsManager to @qui/base.

Highlights

• Update dependencies: @qui/base, @qui/styles.

Highlights

• feat (QCombobox): added role='alert' to the error element.
• feat (QCombobox): added aria-errormessage attribute to input element when error is present.
• feat (QList): the role prop now defaults to list.
• feat (QListItem): the role prop now defaults to listitem.
• feat (QMenu): added role prop for customizing the role of the element that wraps the menu items. Defaults to menu.
• feat (QMenu): the aria-label and aria-labelledby props are now forwarded to the element that wraps the menu items.
• fix (QMenu): fixed arrow roving for inline menus.
• fix (QMenu): inline menu tabIndex is now -1 for every menuitem except for the first menuitem.
• feat (QMenuItem): added role property for customizing the role. Defaults to menuitem.
• feat (QRadioGroup): added role prop. Defaults to radiogroup.
• fix (QTextArea): aria-describedby now refers to the error element if error is present.
• feat (QTextArea): added aria-errormessage attribute to input element when error is present.
• fix (QTextInput): aria-describedby now refers to the error element if error is present.
• feat (QTextInput): added aria-errormessage attribute to input element when error is present.

Highlights

• Fixed pre/post publish scripts.

Highlights

• feat (QWrapBalancer): added component. Still needs docs.

Highlights

• feat (QSkeleton): added component.

Highlights

• fix (QCombobox): Fixed a rare bug that was preventing the combobox value from updating in response to asynchronous value changes.

Highlights

• fix (QCombobox): The clear value button is now tabbable.
• fix (QTextInput): The clear value button is no longer focusable if the input is disabled.

Highlights

• feat (QCombobox): added virtual rendering support, enabled via the virtual input.
• feat (QCombobox): added the listboxProps input for passing props to the listbox element that wraps the options.
• feat (QCombobox): added the listboxRef input for passing a ref to the listbox element that wraps the options.
• feat (QCombobox): the options prop can now be an array of strings.
  • the optionLabel prop is no longer required unless an option is provided as an object.

Highlights

• fix (QCollapse): no longer emits <style> warning.

Highlights

• feat: Every component has been given a displayName for enhanced debugging.
• fix: Every polymorphic component now returns ReactNode instead of ReactElement | null. This change fixes type incompatibilities that were introduced from a more recent version of the @types/react package.
• feat: the IconOrElement type has been updated from JSX.Element | LucideIcon to ReactNode | LucideIcon.
• feat (QHeaderNavItem): the component is now polymorphic.
• feat (QMenu): the component is now polymorphic.

Highlights

• Fixed ESLint errors from the prettier v3 update.

Highlights

• @qui/base update: added Skeleton styles and utility classes.

Highlights

• Removed devDependencies and scripts from the published package.json.

Highlights

• fix (QDialogTrigger): no longer adds the aria-expanded attribute.
• fix (QButton): replaced aria-selected attribute with aria-checked for button group buttons.
• feat (QButton): added role='checkbox' to button group buttons for better accessibility.
• feat (QBreadcrumbs): added default aria-label.
• fix (QCombobox): the error message now renders with the correct aria attribute.
• fix (QCombobox): the listbox now contains the appropriate aria-* attributes and role.
• fix (QMenu): the menu now has the correct aria role (menu).
• fix (QMenu): the listbox now has the correct aria-* attributes.
• fix (QMenuItem): the menu items now have the correct aria role (menuitem).
• feat (QPagination): the rowsPerPage dropdown now has an accessible label.
• feat (QProgressBar): updated docs with recommended accessibility guidelines.
• feat (QProgressBar): added aria-label prop forwarding to the progress element.
• feat (QProgressBar): added role prop forwarding to the progress element. This defaults to progressbar.
• feat (QProgressCircle): added aria-label and aria-labelledby prop forwarding to the progress element.
• feat (QProgressCircle): updated docs with recommended accessibility guidelines.
• feat (QSideNavigationItem): added the aria-label property. Use this to provide an accessible label to the item.
• fix (QTextInput): the "clear value" button now has an accessible label.
• fix (QTextInput): the error message now renders with the correct aria attribute.
• fix (QTextArea): the error message now renders with the correct aria attribute.

Highlights

• feat (QCard): added the QCard component.
• feat (QAvatar): the icon prop can now be supplied as a ReactNode.
• feat: Removed brackets for simple string properties.
• fix (QCombobox): clicking the scrollbar will no longer close the pop-up.
• Updated @qui/base with new card styles.
• Updated source code to align with react/jsx-curly-brace-presence ESLint rule update.

Highlights

• @qui/base update.
  • Side Navigation fixes and Accordion background customization.
  • Stepper Content CSS adjustment.
• @qui/styles update: Added --q-accordion-background variable.

Highlights

• Fixed the font of the Stepper's counter. The intended font variable is now applied as expected.

Highlights

• Added the ability to supply both an icon and text to the Badge component when kind is text. Previously, these were only available independently.

Highlights

• QDialogCloseButton
  • The className prop will now be merged into the element's classes instead of overwriting the existing className.
• QDialogContent
  • The contentContainerProps.className property will now be merged into the content container's classes instead of overwriting the existing className.

Highlights

• Added the QStepper component and supporting subcomponents.

Highlights

• Fixed every JSDoc @see tag. These should now link properly in VSCode and WebStorm.

Highlights

• Added the QAccordion component.

Breaking Changes

• The signature of the QSideNavigation's onExpandedChange has changed: the updated state is now the first parameter. The other parameters have been reordered as a result of this change. This change makes it easier to use the callback with state setters, namely useState.

Highlights

• The QNotificationProviderProps interface is now exported and documented.
• Added a notificationProviderProps prop to the QuiRoot component for configuring the root QNotificationProvider.
• The QCombobox now accepts an autoComplete prop which defaults to 'off'.

Highlights

• Added the QButtonGroup component.
• QTab: Added a hideSeparator prop. If true, the separator element between tabs will not be shown.
• QTabs: The focused tab index will now default to the controlled tab index in controlled mode.
• Added a useDebounced hook.
• Removed unnecessary paragraph from the shared style prop JSDoc comment.
• The QCheckbox onChange prop now accepts a second parameter: checked, which will have the value of event.target.checked. It is a more convenient shorthand for the aforementioned.

Highlights

• Fixed a bug with the Overlay Panel's Anchor as Ref strategy that was causing unnecessary re-renders in specific DOM contexts.

Highlights

• @qui/base CSS updates for Firefox compatibility.

Highlights

• Fixed a bug that was causing the QCombobox dropdown panel to open on the same click event that triggered the close of the panel. This bug was only triggering when the padding of the combobox container was clicked (i.e. not the input field).

Highlights

• Added the QPagination component.
• Added TSDoc tags to several props interfaces to enable linking from the properties tables.
• QCombobox
  • Added the inputProps prop to the component. Use with caution, as this will override the props by the same name that are spread to the component's input element.
  • The QCombobox now uses a "ghost" label matching the input value to determine the size of the input container.
  • Removed the minWidth style from the root of the component. This was previously set to 120px. The user can manually adjust the width of the root element by passing the className or style props.
  • Fixed a bug that was preventing the Combobox's input value from updating when multiple=false and a controlled value changed.

Highlights

• Fixed a bug that was preventing the QCollapse component's nested class selectors from registering in the Next.js 13+ app directory.
• Added the "use client" directive to the emitted bundle for Next.js 13+ support.

Highlights

• Removed clsx from peerDependencies.
• clsx is now imported from @qui/base.
• The border color of text and number inputs will no longer flash on initial load.

Highlights

• Added the QList and QListItem components.

Bug Fixes

• Fixed an issue with the Progress Bar types that was causing the 'react' reference type to be included with the @qui/base package.

Changes

• Breadcrumb separators are no longer nested as children of each breadcrumb item. This was causing them to be clickable.
• Adjusted the tabIndex of each breadcrumb item. Items now only have one element with a tab index.
• CSS transitions will now only apply on interaction for the following components:
  • Button
  • Icon Button
  • Link
  • Switch
  • Tag

Highlights

• Added the Overlay Panel component.
• Floating components now emit a third parameter in the onOpenChange prop, which describes why the panel was opened or closed (e.g. escape-key, click, focus, hover). This enhancement applies to the following components:
  • QCombobox (already emitted this parameter in some scenarios, now emits in more)
  • QDialog
  • QMenu
  • QOverlayPanel
  • QTooltip
• QNotification
  • Removed the iconSize prop. The icon prop has been enhanced with the ability to render a ReactNode. Should the size need customization, the user can supply a QIcon component instead with a custom size. This interface is consistent with how we handle icons in our other components.

Bug fixes

• Fixed a bug that was preventing the QCombobox value from applying to the input field when a controlled value was provided on the first render of the component.
• Corrected the switch layout in full width mode.
• Fixed a bug that was preventing the QBreadcrumbs items from aligning vertically when the icon prop was provided.

Other Changes

• Updated @floating-ui/react to v0.26.4.
• QBreadcrumbs
  • The QBreadcrumbItem component is no longer exported by the library. The functionality of the QBreadcrumbs component remains unchanged: items are still supplied via the items prop.
  • Added a listItemRender prop to customize the element that wraps each breadcrumb item.
• QCombobox
  • The onChange prop's value type now adjusts based on the current value of multiple.
  • Added the inputRef prop for passing a ref to the underlying <input> element.
• QDialog
  • Added the restoreFocus prop for customizing the focus restoration behavior when the dialog is closed.
• QDialogContent
  • Added the wrapperProps prop: use to provide props to the Dialog's wrapper element.
  • Added the contentContainetProps props: use to provide props to the Dialog's content container element.
• Improved the QNotification type documentation.

Highlights

• CSS fix for q-side-navigation container while collapsed.

Highlights

• Added the QHeader and QSideNavigation components.
• Narrowed the QCombobox Option generic type parameter for clarity.
• Updated typedoc parser.
  • Type documentation is now more accurate.
  • Improved generics resolver.

Highlights

• Added the QBreadcrumbs component.

Highlights

• Added the QProgressBar component.

Highlights

• Fixed a bug that was preventing the QCombobox dropdown from closing when the user pressed the Tab key.

Highlights

Added the following components:

• QTabs
• QTextArea

Highlights

• JSDoc type improvements.

New Components

• QCombobox

Changes

• QMenu
  • Changed the name of the autoFocus prop to autoHighlight to avoid a conflict between the built-in autoFocus prop on input elements.
• QRadioGroup
  • The value has been changed from a string to a generic type that extends string. This type has also been applied to the onChange prop.

import {useState} from "react"
import {QRadioContext, QRadio} from "@qui/react"

function Example() {
  const [value, setValue] = useState<"a" | "b" | "c">("a")

  return (
    <QRadioContext
      // The compiler now detects that `value`
      // has the union type of 'a' | 'b' | 'c'
      onChange={(event, value) => {
        setValue(value)
      }}
      value={value}
    >
      <QRadio label={"A"} value={"a"} />
      <QRadio label={"B"} value={"b"} />
      <QRadio label={"C"} value={"c"} />
    </QRadioContext>
  )
}

• QSwitch
  • The label's className is now being applied as expected. The font size should now match the QDS designs.
• QTag
  • Changed the readonly prop to readOnly for consistency with the React prop by the same name and our other input components.
• Removed the defaultValue warning from useControlledState.
• useAccessibleInput now omits labels for unsupplied properties, e.g. if the consumer doesn't supply an error, the errorId parameter will not be returned.
• Added keyboard events table to @qui/react-docs-shared package for documenting keyboard events.
• The React docs site's header is now sticky, changed from fixed.
• The QDialog component's backdrop now has a z-index of 990.
• Added utility hooks:
  • usePreviousProps
  • useEventCallback

Patch Changes

• Updated dependencies
  • @qui/base@2.4.1