{"id":12129,"library":"terra-application-utility","title":"Terra Application Utility","description":"The Terra Application Utility library, currently at version 2.60.1, provides React components specifically designed for disclosing utility menus within applications built using the Cerner Terra design system. It offers two distinct versions: a 'header' variant for integration with `terra-application-header-layout` and a 'menu' variant for use with `terra-application-menu-layout`. This structured approach ensures consistent UI patterns and behaviors for common application functionalities such as user settings, help, notifications, or profile management. While a specific release cadence is not detailed in the provided documentation, the package's versioning indicates active development and maintenance within the broader Terra framework. Its key differentiator is its tight integration into the Terra ecosystem, providing pre-styled and functional components that adhere to Cerner's established design language and accessibility standards, reducing development overhead for Terra-based applications.","status":"active","version":"2.60.1","language":"javascript","source_language":"en","source_url":"https://github.com/cerner/terra-framework","tags":["javascript","ApplicationUtility","Cerner","Framework","Terra","terra-application-utility","UI"],"install":[{"cmd":"npm install terra-application-utility","lang":"bash","label":"npm"},{"cmd":"yarn add terra-application-utility","lang":"bash","label":"yarn"},{"cmd":"pnpm add terra-application-utility","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for core React component functionality and rendering.","package":"react","optional":false},{"reason":"Required for mounting and rendering React components to the DOM.","package":"react-dom","optional":false},{"reason":"Provides internationalization and localization capabilities, often used for text within UI components. While functionally optional, it's a common peer dependency in the Terra ecosystem for full feature support.","package":"react-intl","optional":true}],"imports":[{"note":"The primary default export for the utility component. Generally used as a namespace for Header and Menu variants.","wrong":"const ApplicationUtility = require('terra-application-utility');","symbol":"ApplicationUtility","correct":"import ApplicationUtility from 'terra-application-utility';"},{"note":"The Header version of the utility, used within `terra-application-header-layout` components. It's a property of the default export, not a named export.","wrong":"import { Header } from 'terra-application-utility';","symbol":"ApplicationUtility.Header","correct":"import ApplicationUtility from 'terra-application-utility';\n// ... inside JSX: <ApplicationUtility.Header />"},{"note":"The Menu version of the utility, typically used within `terra-application-menu-layout` components. Similar to Header, it's accessed via the default export.","wrong":"import { Menu } from 'terra-application-utility';","symbol":"ApplicationUtility.Menu","correct":"import ApplicationUtility from 'terra-application-utility';\n// ... inside JSX: <ApplicationUtility.Menu />"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport ApplicationUtility from 'terra-application-utility';\nimport Button from 'terra-button'; // Assuming terra-button for demonstration\n\nconst MyUtilityMenu = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const handleToggle = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const handleClose = () => {\n    setIsOpen(false);\n  };\n\n  return (\n    <ApplicationUtility.Menu\n      id=\"my-app-utility-menu\"\n      variant=\"menu\"\n      isOpen={isOpen}\n      title=\"User Menu\"\n      onChange={handleToggle}\n      onClose={handleClose}\n      button={(<Button onClick={handleToggle} text=\"Open User Menu\" />)}\n    >\n      {/* Example utility items */}\n      <div style={{ padding: '15px' }}>\n        <div>Settings</div>\n        <div>Help</div>\n        <div onClick={() => alert('Logged out!')}>Logout</div>\n      </div>\n    </ApplicationUtility.Menu>\n  );\n};\n\nexport default MyUtilityMenu;","lang":"typescript","description":"Demonstrates a basic implementation of `ApplicationUtility.Menu` with state management for opening and closing, including placeholder content."},"warnings":[{"fix":"Ensure you are using `terra-application-utility` within a compatible Terra layout component as intended by the framework's design.","message":"Terra components, including Application Utility, are designed to work within the broader Terra Framework. Using them in isolation without the correct layout components (e.g., `terra-application-header-layout` or `terra-application-menu-layout`) may lead to unexpected styling or functional issues.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Consult the official Terra Framework migration guides and release notes for each major version upgrade to identify and address breaking changes in props, APIs, or required peer dependency versions.","message":"As a component within the Terra Framework, major version updates of `terra-application-utility` or its peer dependencies (like React or `react-intl`) may introduce breaking changes. Always review the release notes for the Terra Framework and individual component packages when upgrading major versions.","severity":"breaking","affected_versions":">=2.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install terra-application-utility` or `yarn add terra-application-utility` to install the package.","cause":"The package `terra-application-utility` has not been installed or is misspelled.","error":"Module not found: Can't resolve 'terra-application-utility'"},{"fix":"Ensure you are importing `ApplicationUtility` as a default import: `import ApplicationUtility from 'terra-application-utility';` and that the package is correctly installed.","cause":"The default import for `terra-application-utility` is undefined, likely due to an incorrect import statement, or the package failed to load.","error":"TypeError: Cannot read properties of undefined (reading 'Header')"},{"fix":"Verify that `terra-application-utility` is installed, and your import statement for `ApplicationUtility` is correct. Also, ensure you are accessing `.Header` or `.Menu` as properties of the default `ApplicationUtility` import, not as named exports.","cause":"This often occurs in React if a component is imported incorrectly or is undefined at runtime. For `terra-application-utility`, it could mean `ApplicationUtility` itself or its sub-components (`.Header`, `.Menu`) are not correctly resolved.","error":"Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined."}],"ecosystem":"npm"}