luna-one 3.1.594 → 3.1.596

package/dist/luna/components/NavBar/NavMiniMenu.js

@@ -11,7 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _crossMediumBlue = _interopRequireDefault(require("../../images/cross-medium-blue.svg"));
 var _crossMediumWhite = _interopRequireDefault(require("../../images/cross-medium-white.svg"));
 var _formatID = _interopRequireDefault(require("../../utils/formatID"));
-var _lodash = require("lodash");
 var _NavBar = require("./NavBar");
 var _useIsChrome2 = _interopRequireDefault(require("../../utils/hooks/useIsChrome"));
 var _terraOne = require("terra-one");
@@ -92,7 +91,7 @@ var NavMiniMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
-    id: (0, _lodash.uniqueId)("mini-menu-"),
+    id: (0, _react.useId)(),
     className: "".concat(mouse ? "ter-nav-mini-menu" : "ter-nav-mini-menu tabFocus", " ").concat(isChrome ? "ter-nav-mini-menu--chrome-browser" : "", " ").concat(displayIcons ? "ter-nav-mini-menu--with-icons" : ""),
     onKeyDown: function onKeyDown(e) {
       return mouseOverWithKeys(e, contentfulId);
@@ -105,11 +104,11 @@ var NavMiniMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     "aria-expanded": isOpen,
     "aria-label": "".concat(navText, " menu")
   }, /*#__PURE__*/_react["default"].createElement("p", {
-    id: (0, _formatID["default"])("".concat(navText, "-ter-nav-mini-menu-text")),
+    id: (0, _formatID["default"])("".concat(navText, "-ter-nav-mini-menu-text-").concat((0, _react.useId)())),
     className: "ter-nav-mini-menu__text ".concat(isOpen && " ter-nav-mini-menu__text--is-open", "\n        ").concat(active ? "active" : "", "\n        ").concat(displayIcons ? "ter-nav-mini-menu__text--with-icons" : "", "\n        ").concat(theme ? "ter-nav-mini-menu__text--".concat(theme) : "", "\n        "),
     "data-depth": 1
   }, navText, /*#__PURE__*/_react["default"].createElement("img", {
-    id: (0, _lodash.uniqueId)("cross-icon-"),
+    id: (0, _react.useId)(),
     src: theme === "blue" ? _crossMediumWhite["default"] : _crossMediumBlue["default"],
     alt: "cross icon",
     "aria-label": isOpen ? "Opened" : "Closed",

package/dist/luna/components/NavBar/NavigationBarDocumentation.mdx

@@ -1,245 +1,245 @@
-#### NavBar
-
-###### Notes -
-
-This component uses the `react-slidedown` library for the innerpage navigation links in the `utilityNav`. The `link.url` string should be a reference to the name of the `<Element>` that wraps the corresponding organism that the window should scroll to.
-
-This parent component consists of the `<NavBarTop />`, `<UtilityNav />`, `<NavSearch />`, `<Flyout />`, `<LanguageSelector />`, `<Login />`, and various menu components. All props are listed below.
-
-###### Props -
-
-- `rightLinks` - array of objects used for generating links to the right of the search icon. Each object requires `url` and `text` strings.
-- `logo` **(required)** - object consisting of `url` and `altText` strings (for generating the logo image) in addition to a link object with a `url` string for generating the `href` property.
-- `divisionName` **(required)** - string used for generating the name of the Trimble division that is to the right of the logo.
-- `featuredLink` - object consisting of `url` and `text`. This will display on the far right of the main (middle) section.
-- `isExpanded` - boolean that determines if navigation menus are displayed as collapsed hierarchies or expanded lists. If `isExpanded` is set to true, only one level of menu will be displayed (tertiary navigation items will be ignored). Additionally, if `isExpanded` is set to true, Luna will check for `imageUrl` and `description` keys on each link object. If seen, the image and description will display instead of text.
-- `disableSectorFlyout` - boolean that determines if the sector fly-out menu is displayed.
-- `disableSearch` - boolean that determines if the search input is displayed.
-- `disableLanguageRegion` - boolean that determines if the language/region selector item is displayed.
-- `disableLogin` - boolean that determines if the login item is displayed.
-- `navOptions` - array of objects used for generating the main (middle) section of the nav. All objects will have a type indicating whether to render a `<MegaMenu />` (type = 'category'), a simple drop down of links `<MiniMenu />` (type = 'links'), or a single link `singleLink` (type = 'link'). See examples below on how to load up these objects. The `MegaMenu` can render a child both with and without subcategories. `MegaMenu` can also hold an array of `featuredLinks` with a corresponding `featuredLinksTitle`.
-- `utilityNav` - object consisting of a `pageTitle` string as well as a `links` array of objects consisting of `text` and `url` strings. See example below.
-- `currentLanguage` - object with `region` and `language` strings that indicate the current region and language selected.
-- `languageSelectorData` - object consisting of data needed to populate the `LanguageSelector` component. See example below.
-- `setLanguage` - method used to set the region and language, which it takes as string key/values in an object as an argument
-- `location` - prop used to close the mobile menu when a user clicks on one of the rightLinks. In your project, pass in `location={this.props.location}`
-- `searchComponent` - react component used to render the search input and results.
-- `searchDeployed` - boolean that determines if the search modal is displayed on initial render.
-- `setSearchDeployed` **(required)** - method used to set the search modal state.
-
-###### Example -
-
-```
-const rightLinks = [
-  {
-    url: "/link",
-    text: "Contact Us",
-  }
-];
-
-const logo = {
-  url: Logo (should be imported in the application),
-  altText: 'Trimble Logo',
-  link: {
-    url: 'www.trimble.com'
-  }
-};
-
-const divisionName = 'Geospatial';
-const location = 'N. America';
-
-const location = this.props.location
-
-const utilityNav = {
-  pageTitle: "Trimble Accubid Enterprise",
-  links: [
-    {
-      text: "Product Anchor One",
-      url: "/#"
-    },
-    {
-      text: "Product Anchor Two",
-      url: "/#"
-    }
-  ]
-};
-
-const megaMenu = {
-  type: "category",
-  text: "Products",
-  featuredLinksTitle: "Featured Links",
-  featuredLinks: [
-    {
-      url: "/#products",
-      text: "All Products",
-    },
-    {
-      url: "/1",
-      text: "What's New",
-    },
-  ],
-  links: [
-    {
-      text: "Mechanical",
-      links: [
-        {
-          url: "/#",
-          text: "BIM Collaboration"
-        },
-        {
-          url: "/#",
-          text: "MEP Content"
-        }
-      ]
-    },
-    {
-      text: "Electrical",
-      links: [
-        {
-          url: "/#",
-          text: "Design/Detailing"
-        },
-        {
-          url: "/#",
-          text: "Project Management"
-        }
-      ]
-    },
-    {
-      text: "Plumbing",
-      link: {url: "/#"}
-    },
-  ]
-};
-
-const miniMenus = [
-  {
-    type: "links",
-    text: "Services",
-    links: [
-      {
-        url: "/#",
-        text: "Link One"
-      },
-      {
-        url: "/#",
-        text: "Link Two"
-      }
-    ]
-  },
-  {
-    type: "links",
-    text: "Resources",
-    links: [
-      {
-        url: "/#",
-        text: "Link One"
-      },
-      {
-        url: "/#",
-        text: "Link Two"
-      }
-    ]
-  }
-];
-
-const singleLink = {
-  type: "link",
-  url: "/#",
-  text: "Process"
-};
-
-const languageSelectorData = {
-  labels: {
-    currentRegion: "Current Region",
-    cancel: "Cancel",
-    save: "Save"
-  },
-  regions: [
-    {
-      region: "North America",
-      languages: [
-        "EN: English (US)",
-        "EN-UK: English (UK)",
-        "FR: French",
-        "DE: German",
-        "NL: Dutch"
-      ]
-    },
-    {
-      region: "UK and Middle East",
-      languages: [
-        "EN: English (US)",
-        "EN-UK: English (UK)",
-        "FR: French",
-        "DE: German",
-        "NL: Dutch"
-      ]
-    },
-    {
-      region: "France",
-      languages: [
-        "EN: English (US)",
-        "EN-UK: English (UK)",
-        "FR: French",
-        "DE: German",
-        "NL: Dutch"
-      ]
-    },
-    {
-      region: "Germany and Austria",
-      languages: [
-        "EN: English (US)",
-        "EN-UK: English (UK)",
-        "FR: French",
-        "DE: German",
-        "NL: Dutch"
-      ]
-    },
-    {
-      region: "Switzerland",
-      languages: [
-        "EN: English (US)",
-        "EN-UK: English (UK)",
-        "FR: French",
-        "DE: German",
-        "NL: Dutch"
-      ]
-    }
-  ],
-  currentRegionLanguage: {
-    region: "UK and Middle East",
-    language: "EN-UK"
-  },
-
-  activeRegion: {
-    region: "UK and Middle East",
-    language: "EN: English"
-  },
-
-  companyDivision: "MEP"
-
-};
-
-
-return (
-  <NavBar
-    location={location}
-    rightLinks={rightLinks}
-    currentLanguage={{ region: "N. America", language: "EN: English" }}
-    logo={logo}
-    divisionName="MEP"
-    navCTA={navCTA}
-    navOptions={[megaMenu, ...miniMenus, singleLink]}
-    utilityNav={utilityNav}
-    languageSelectorData={languageSelectorData}
-    isExpanded={false}
-    disableSectorFlyOut={false}
-    disableSearch={false}
-    disableLanguageRegion={false}
-    disableSectorFlyOut={true}
-    disableLogin={true}
-  />
-)
-
-```
+#### NavBar
+
+###### Notes -
+
+This component uses the `react-slidedown` library for the innerpage navigation links in the `utilityNav`. The `link.url` string should be a reference to the name of the `<Element>` that wraps the corresponding organism that the window should scroll to.
+
+This parent component consists of the `<NavBarTop />`, `<UtilityNav />`, `<NavSearch />`, `<Flyout />`, `<LanguageSelector />`, `<Login />`, and various menu components. All props are listed below.
+
+###### Props -
+
+- `rightLinks` - array of objects used for generating links to the right of the search icon. Each object requires `url` and `text` strings.
+- `logo` **(required)** - object consisting of `url` and `altText` strings (for generating the logo image) in addition to a link object with a `url` string for generating the `href` property.
+- `divisionName` **(required)** - string used for generating the name of the Trimble division that is to the right of the logo.
+- `featuredLink` - object consisting of `url` and `text`. This will display on the far right of the main (middle) section.
+- `isExpanded` - boolean that determines if navigation menus are displayed as collapsed hierarchies or expanded lists. If `isExpanded` is set to true, only one level of menu will be displayed (tertiary navigation items will be ignored). Additionally, if `isExpanded` is set to true, Luna will check for `imageUrl` and `description` keys on each link object. If seen, the image and description will display instead of text.
+- `disableSectorFlyout` - boolean that determines if the sector fly-out menu is displayed.
+- `disableSearch` - boolean that determines if the search input is displayed.
+- `disableLanguageRegion` - boolean that determines if the language/region selector item is displayed.
+- `disableLogin` - boolean that determines if the login item is displayed.
+- `navOptions` - array of objects used for generating the main (middle) section of the nav. All objects will have a type indicating whether to render a `<MegaMenu />` (type = 'category'), a simple drop down of links `<MiniMenu />` (type = 'links'), or a single link `singleLink` (type = 'link'). See examples below on how to load up these objects. The `MegaMenu` can render a child both with and without subcategories. `MegaMenu` can also hold an array of `featuredLinks` with a corresponding `featuredLinksTitle`.
+- `utilityNav` - object consisting of a `pageTitle` string as well as a `links` array of objects consisting of `text` and `url` strings. See example below.
+- `currentLanguage` - object with `region` and `language` strings that indicate the current region and language selected.
+- `languageSelectorData` - object consisting of data needed to populate the `LanguageSelector` component. See example below.
+- `setLanguage` - method used to set the region and language, which it takes as string key/values in an object as an argument
+- `location` - prop used to close the mobile menu when a user clicks on one of the rightLinks. In your project, pass in `location={this.props.location}`
+- `searchComponent` - react component used to render the search input and results.
+- `searchDeployed` - boolean that determines if the search modal is displayed on initial render.
+- `setSearchDeployed` **(required)** - method used to set the search modal state.
+
+###### Example -
+
+```
+const rightLinks = [
+  {
+    url: "/link",
+    text: "Contact Us",
+  }
+];
+
+const logo = {
+  url: Logo (should be imported in the application),
+  altText: 'Trimble Logo',
+  link: {
+    url: 'www.trimble.com'
+  }
+};
+
+const divisionName = 'Geospatial';
+const location = 'N. America';
+
+const location = this.props.location
+
+const utilityNav = {
+  pageTitle: "Trimble Accubid Enterprise",
+  links: [
+    {
+      text: "Product Anchor One",
+      url: "/#"
+    },
+    {
+      text: "Product Anchor Two",
+      url: "/#"
+    }
+  ]
+};
+
+const megaMenu = {
+  type: "category",
+  text: "Products",
+  featuredLinksTitle: "Featured Links",
+  featuredLinks: [
+    {
+      url: "/#products",
+      text: "All Products",
+    },
+    {
+      url: "/1",
+      text: "What's New",
+    },
+  ],
+  links: [
+    {
+      text: "Mechanical",
+      links: [
+        {
+          url: "/#",
+          text: "BIM Collaboration"
+        },
+        {
+          url: "/#",
+          text: "MEP Content"
+        }
+      ]
+    },
+    {
+      text: "Electrical",
+      links: [
+        {
+          url: "/#",
+          text: "Design/Detailing"
+        },
+        {
+          url: "/#",
+          text: "Project Management"
+        }
+      ]
+    },
+    {
+      text: "Plumbing",
+      link: {url: "/#"}
+    },
+  ]
+};
+
+const miniMenus = [
+  {
+    type: "links",
+    text: "Services",
+    links: [
+      {
+        url: "/#",
+        text: "Link One"
+      },
+      {
+        url: "/#",
+        text: "Link Two"
+      }
+    ]
+  },
+  {
+    type: "links",
+    text: "Resources",
+    links: [
+      {
+        url: "/#",
+        text: "Link One"
+      },
+      {
+        url: "/#",
+        text: "Link Two"
+      }
+    ]
+  }
+];
+
+const singleLink = {
+  type: "link",
+  url: "/#",
+  text: "Process"
+};
+
+const languageSelectorData = {
+  labels: {
+    currentRegion: "Current Region",
+    cancel: "Cancel",
+    save: "Save"
+  },
+  regions: [
+    {
+      region: "North America",
+      languages: [
+        "EN: English (US)",
+        "EN-UK: English (UK)",
+        "FR: French",
+        "DE: German",
+        "NL: Dutch"
+      ]
+    },
+    {
+      region: "UK and Middle East",
+      languages: [
+        "EN: English (US)",
+        "EN-UK: English (UK)",
+        "FR: French",
+        "DE: German",
+        "NL: Dutch"
+      ]
+    },
+    {
+      region: "France",
+      languages: [
+        "EN: English (US)",
+        "EN-UK: English (UK)",
+        "FR: French",
+        "DE: German",
+        "NL: Dutch"
+      ]
+    },
+    {
+      region: "Germany and Austria",
+      languages: [
+        "EN: English (US)",
+        "EN-UK: English (UK)",
+        "FR: French",
+        "DE: German",
+        "NL: Dutch"
+      ]
+    },
+    {
+      region: "Switzerland",
+      languages: [
+        "EN: English (US)",
+        "EN-UK: English (UK)",
+        "FR: French",
+        "DE: German",
+        "NL: Dutch"
+      ]
+    }
+  ],
+  currentRegionLanguage: {
+    region: "UK and Middle East",
+    language: "EN-UK"
+  },
+
+  activeRegion: {
+    region: "UK and Middle East",
+    language: "EN: English"
+  },
+
+  companyDivision: "MEP"
+
+};
+
+
+return (
+  <NavBar
+    location={location}
+    rightLinks={rightLinks}
+    currentLanguage={{ region: "N. America", language: "EN: English" }}
+    logo={logo}
+    divisionName="MEP"
+    navCTA={navCTA}
+    navOptions={[megaMenu, ...miniMenus, singleLink]}
+    utilityNav={utilityNav}
+    languageSelectorData={languageSelectorData}
+    isExpanded={false}
+    disableSectorFlyOut={false}
+    disableSearch={false}
+    disableLanguageRegion={false}
+    disableSectorFlyOut={true}
+    disableLogin={true}
+  />
+)
+
+```

package/dist/luna/components/NavBar/UtilityNav.js

@@ -1,13 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _useMouse2 = _interopRequireDefault(require("../../utils/hooks/useMouse"));
-var _lodash = require("lodash");
 var _formatID = _interopRequireDefault(require("../../utils/formatID"));
 var _terraOne = require("terra-one");
 var _reactScroll = require("react-scroll");
@@ -23,7 +23,7 @@ var UtilityNav = function UtilityNav(_ref) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "ter-utility-nav__wrapper",
     tabIndex: mouse ? "" : "0",
-    id: (0, _lodash.uniqueId)("id-")
+    id: (0, _react.useId)()
   }, /*#__PURE__*/_react["default"].createElement("section", {
     className: "ter-utility-nav"
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -44,14 +44,14 @@ var UtilityNav = function UtilityNav(_ref) {
       duration: 500,
       delay: 200,
       offset: -48,
-      id: (0, _formatID["default"])("".concat(link.text, "-utility-nav-link"))
+      id: (0, _formatID["default"])("".concat(link.text, "-utility-nav-link-").concat((0, _react.useId)()))
     }, /*#__PURE__*/_react["default"].createElement("p", null, link.text));
   }))), navCTA && /*#__PURE__*/_react["default"].createElement(_terraOne.Button, {
     url: navCTA.link.url,
     text: navCTA.link.text,
     className: "ter-button--secondary--3",
     external: navCTA.link.external,
-    id: (0, _formatID["default"])("".concat(navCTA.link.text, "-utility-bar-right-link")),
+    id: (0, _formatID["default"])("".concat(navCTA.link.text, "-utility-bar-right-link-").concat((0, _react.useId)())),
     Link: Link
   })));
 };

package/dist/luna/components/NavBarTop/NavBarTop.js

@@ -11,7 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 require("./NavBarTop.scss");
 var _iconSearch = _interopRequireDefault(require("../../images/icon-search.svg"));
 var _formatID = _interopRequireDefault(require("../../utils/formatID"));
-var _lodash = require("lodash");
 var _utilizeFocus = require("../../utils/utilizeFocus");
 var _NavBar = require("../NavBar/NavBar");
 var _terraOne = require("terra-one");
@@ -107,7 +106,7 @@ var NavBarTop = function NavBarTop(props) {
         text = link.text;
       return /*#__PURE__*/_react["default"].createElement(_terraOne.LunaLink, {
         tabIndex: mouse ? "" : "0",
-        id: (0, _formatID["default"])("".concat(text, "-navbar-top-link")),
+        id: (0, _formatID["default"])("".concat(text, "-navbar-top-link-").concat((0, _react.useId)())),
         key: text,
         to: url,
         style: {
@@ -170,7 +169,7 @@ var NavBarTop = function NavBarTop(props) {
   }, /*#__PURE__*/_react["default"].createElement(_terraOne.LunaLink, {
     role: "tab",
     tabIndex: mouse ? "" : "0",
-    id: (0, _formatID["default"])("".concat(divisionName, "-navbar-link")),
+    id: (0, _formatID["default"])("".concat(divisionName, "-navbar-link-").concat((0, _react.useId)())),
     className: "ter-navbar-top__logo-link ".concat(mouse ? "" : "tabFocus"),
     to: logo.link.url,
     Link: Link,
@@ -203,7 +202,7 @@ var NavBarTop = function NavBarTop(props) {
     "aria-expanded": desktopSearchDeployed,
     "aria-controls": "".concat(divisionName, "-search-input-field")
   }, /*#__PURE__*/_react["default"].createElement("img", {
-    id: (0, _lodash.uniqueId)("id-"),
+    id: (0, _react.useId)(),
     className: "ter-navbar-top__search",
     src: _iconSearch["default"],
     alt: "magnifying glass"
@@ -218,7 +217,7 @@ var NavBarTop = function NavBarTop(props) {
   }, "|")), generateRightLinks(), (!disableLanguageRegion || !disableLogin) && /*#__PURE__*/_react["default"].createElement("span", {
     className: "ter-navbar-top__pipe"
   }, "|"), !disableLanguageRegion && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-    id: (0, _lodash.uniqueId)("id-"),
+    id: (0, _react.useId)(),
     tabIndex: mouse ? "" : "0",
     className: "ter-navbar-top__location ".concat(mouse ? "" : "tabFocus"),
     onKeyDown: function onKeyDown(e) {
@@ -259,7 +258,7 @@ var NavBarTop = function NavBarTop(props) {
     "aria-expanded": desktopSearchDeployed,
     "aria-controls": "".concat(divisionName, "-search-input-field")
   }, /*#__PURE__*/_react["default"].createElement("img", {
-    id: (0, _lodash.uniqueId)("id-"),
+    id: (0, _react.useId)(),
     className: "ter-navbar-top__search",
     src: _iconSearch["default"],
     alt: "magnifying glass"
@@ -282,10 +281,10 @@ var NavBarTop = function NavBarTop(props) {
       return simulateHamburgerClickWithEnter(e);
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    id: (0, _lodash.uniqueId)("id-"),
+    id: (0, _react.useId)(),
     className: "ter-navbar-top__hamburger-and-login-container"
   }, children, /*#__PURE__*/_react["default"].createElement("div", {
-    id: (0, _lodash.uniqueId)("id-"),
+    id: (0, _react.useId)(),
     className: "ter-navbar-top__right--mobile-hamburger ".concat(hamburgerIsOpen ? "ter-navbar-top__right--mobile-hamburger--is-open" : "")
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "ter-navbar-top__right--mobile-hamburger-top ".concat(theme ? "ter-navbar-top__right--mobile-hamburger-top--".concat(theme) : "")