trimble-terra-flyout

A React flyout navigation component for Trimble Terra applications.

Storybook · npm

Installation

npm install trimble-terra-flyout

Peer dependencies

| Package | Version | | ----------- | --------------------- | | react | ^18.3.1 \|\| ^19.0.0 | | react-dom | ^18.3.1 \|\| ^19.0.0 |

Quick start

import { useState } from 'react';
import { Flyout, FlyoutToggle } from 'trimble-terra-flyout';
import 'trimble-terra-flyout/styles.css';

export default function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <FlyoutToggle isDeployed={open} onClick={() => setOpen(true)} />

      <Flyout
        sectorFlyoutDeployed={open}
        authenticated={true}
        close={() => setOpen(false)}
        profile={{ name: 'Jane Doe', email: '[email protected]' }}
        customLinks={{
          links: [
            { text: 'Home', url: '/' },
            { text: 'About', url: '/about' },
          ],
        }}
      />
    </>
  );
}

Style import — you can use either of these paths; they resolve to the same file:

import 'trimble-terra-flyout/styles.css';   // package exports map
import 'trimble-terra-flyout/dist/styles.css'; // direct path

API

<Flyout>

| Prop | Type | Default | Description | | --- | --- | --- | --- | | sectorFlyoutDeployed | boolean | false | Whether the flyout panel is visible | | authenticated | boolean | false | Show authenticated vs. unauthenticated state | | close | () => void | — | Called when the user closes the flyout | | profile | ProfileProps | — | User profile (name, email, role, organization, image) | | accountSwitcher | AccountSwitcherProps | — | Account-switcher configuration | | customLinks | CustomLinksProps | — | Custom navigation links section | | marketingLinks | MarketingLinksProps | — | Marketing links section | | myAccountLinks | MyAccountLinksProps | — | "My Account" links section | | ecommerceLinks | EcommerceLinksProps | — | E-commerce links section | | legalLinks | LegalLinksProps | — | Legal / footer links section | | createAccount | CreateAccountProps | — | Create-account prompt for unauthenticated users | | logo | LogoProps | — | Custom logo (image source, alt text, link) | | Link | any | — | Custom router link component (e.g. React Router Link) | | login | boolean | — | Show login state | | signInBtnMethod | () => void | — | Called when the "Sign In" button is clicked | | signInLabel | string | — | Label for the sign-in button | | signOutBtnMethod | () => void | — | Called when the "Sign Out" button is clicked | | signOutLabel | string | — | Label for the sign-out button | | disableSearch | boolean | — | Hide the search input | | searchPlaceholder | string | — | Placeholder text for the search input | | desktopSearchDeployed | boolean | — | Whether desktop search is expanded | | setDesktopSearchDeployed | (v: boolean) => void | — | Toggle desktop search expansion | | setGlobalSearch | (v: boolean) => void | — | Toggle global search | | backbtnLabel | string | — | Label for the back button | | oldVersion | boolean | — | Render the legacy layout |

<FlyoutToggle>

| Prop | Type | Default | Description | | --- | --- | --- | --- | | isDeployed | boolean | false | When true the toggle is hidden (flyout is already open) | | onClick | () => void | — | Called when the toggle button is clicked |

Key types

interface ProfileProps {
  name: string;
  email?: string;
  role?: string;
  organization?: string;
  image?: { src: string; alt: string };
}

interface LinkProps {
  url: string;
  text: string;
}

interface CustomLinksProps {
  title?: string;
  links: LinkProps[];
  enabled?: boolean;
}

interface AccountType {
  id: string;
  name: string;
  role: string;
  formattedRole: string;
  sourceSystems: string[];
  isDefaultAccount: boolean;
  isDisabled: boolean;
}

Full type definitions are available in dist/index.d.ts after install.

Browser support

The component targets modern evergreen browsers (Chrome, Firefox, Safari, Edge). It ships as an ESM bundle.

Known issues & roadmap

| # | Issue | Scope | | --- | --- | --- | | K1 | JS files need conversion to TS | 1 file: formatSpecialCharText.js | | K2 | Excessive : any usage | 10 instances across 5 files | | K3 | eslint-disable overuse | 5 instances, including one blanket disable in useMouse.ts | | K3.5 | eslint-plugin-react-hooks disabled | — | | K4 | dangerouslySetInnerHTML used in 5 places | — | | K5 | Typo isAccountResticted in AccountSwitcherProps | — | | K6 | SCSS bloat / CSS size | — |

Contributing

See DEV_README.md for local development setup, build steps, CI, publishing, and project structure.

License

Proprietary — Trimble Inc.