@instructure/ui-top-nav-bar 8.55.1 → 8.56.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.56.0](https://github.com/instructure/instructure-ui/compare/v8.55.1...v8.56.0) (2024-05-06)
+
+
+### Features
+
+* **ui-top-nav-bar:** add onclick prop for hidden menu item ([7228ae1](https://github.com/instructure/instructure-ui/commit/7228ae160a449939f0427222b009b747b0daf926))
+
+
+
+
+
 ## [8.55.1](https://github.com/instructure/instructure-ui/compare/v8.55.0...v8.55.1) (2024-04-30)
 
 

package/es/TopNavBar/TopNavBarItem/props.js

@@ -52,6 +52,7 @@ const propTypes = {
   renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   href: PropTypes.string,
   onClick: PropTypes.func,
+  onHiddenClick: PropTypes.func,
   onSubmenuToggle: PropTypes.func,
   onMouseOver: PropTypes.func,
   onMouseOut: PropTypes.func,
@@ -63,5 +64,5 @@ const propTypes = {
   itemRef: PropTypes.func,
   shouldCloseOnClick: PropTypes.oneOf(['auto', 'always', 'never'])
 };
-const allowedProps = ['id', 'as', 'children', 'variant', 'status', 'renderSubmenu', 'showSubmenuChevron', 'customPopoverConfig', 'tooltip', 'renderAvatar', 'renderIcon', 'href', 'onClick', 'onSubmenuToggle', 'onMouseOver', 'onMouseOut', 'onFocus', 'onBlur', 'onKeyDown', 'onKeyUp', 'elementRef', 'itemRef', 'shouldCloseOnClick'];
+const allowedProps = ['id', 'as', 'children', 'variant', 'status', 'renderSubmenu', 'showSubmenuChevron', 'customPopoverConfig', 'tooltip', 'renderAvatar', 'renderIcon', 'href', 'onClick', 'onHiddenClick', 'onSubmenuToggle', 'onMouseOver', 'onMouseOut', 'onFocus', 'onBlur', 'onKeyDown', 'onKeyUp', 'elementRef', 'itemRef', 'shouldCloseOnClick'];
 export { propTypes, allowedProps, topNavBarItemTooltipPropType };

package/es/TopNavBar/utils/mapItemsForDrilldown.js

@@ -123,7 +123,13 @@ const renderMappedItemDrilldownSubpages = mappedItems => {
 };
 const renderMappedItemsAsDrilldownOptions = mappedItems => {
   return mappedItems.map(mappedItem => {
-    const optionData = mappedItem.optionData;
+    const optionData = mappedItem.optionData,
+      originalItem = mappedItem.item;
+    const onHiddenClick = originalItem.props.onHiddenClick;
+    if (onHiddenClick) {
+      // if the `onHiddenClick` prop is provided for the MenuItem it should overwrite the `onClick` prop if there is any
+      optionData.onOptionClick = onHiddenClick;
+    }
     return /*#__PURE__*/React.createElement(Drilldown.Option, Object.assign({}, optionData, {
       key: optionData.id,
       afterLabelContentVAlign: "center"

package/lib/TopNavBar/TopNavBarItem/props.js

@@ -59,6 +59,7 @@ const propTypes = exports.propTypes = {
   renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   href: _propTypes.default.string,
   onClick: _propTypes.default.func,
+  onHiddenClick: _propTypes.default.func,
   onSubmenuToggle: _propTypes.default.func,
   onMouseOver: _propTypes.default.func,
   onMouseOut: _propTypes.default.func,
@@ -70,4 +71,4 @@ const propTypes = exports.propTypes = {
   itemRef: _propTypes.default.func,
   shouldCloseOnClick: _propTypes.default.oneOf(['auto', 'always', 'never'])
 };
-const allowedProps = exports.allowedProps = ['id', 'as', 'children', 'variant', 'status', 'renderSubmenu', 'showSubmenuChevron', 'customPopoverConfig', 'tooltip', 'renderAvatar', 'renderIcon', 'href', 'onClick', 'onSubmenuToggle', 'onMouseOver', 'onMouseOut', 'onFocus', 'onBlur', 'onKeyDown', 'onKeyUp', 'elementRef', 'itemRef', 'shouldCloseOnClick'];
+const allowedProps = exports.allowedProps = ['id', 'as', 'children', 'variant', 'status', 'renderSubmenu', 'showSubmenuChevron', 'customPopoverConfig', 'tooltip', 'renderAvatar', 'renderIcon', 'href', 'onClick', 'onHiddenClick', 'onSubmenuToggle', 'onMouseOver', 'onMouseOut', 'onFocus', 'onBlur', 'onKeyDown', 'onKeyUp', 'elementRef', 'itemRef', 'shouldCloseOnClick'];

package/lib/TopNavBar/utils/mapItemsForDrilldown.js

@@ -133,7 +133,13 @@ const renderMappedItemDrilldownSubpages = mappedItems => {
 exports.renderMappedItemDrilldownSubpages = renderMappedItemDrilldownSubpages;
 const renderMappedItemsAsDrilldownOptions = mappedItems => {
   return mappedItems.map(mappedItem => {
-    const optionData = mappedItem.optionData;
+    const optionData = mappedItem.optionData,
+      originalItem = mappedItem.item;
+    const onHiddenClick = originalItem.props.onHiddenClick;
+    if (onHiddenClick) {
+      // if the `onHiddenClick` prop is provided for the MenuItem it should overwrite the `onClick` prop if there is any
+      optionData.onOptionClick = onHiddenClick;
+    }
     return /*#__PURE__*/_react.default.createElement(_Drilldown.Drilldown.Option, Object.assign({}, optionData, {
       key: optionData.id,
       afterLabelContentVAlign: "center"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-top-nav-bar",
-  "version": "8.55.1",
+  "version": "8.56.0",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,38 +24,38 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/console": "8.55.1",
-    "@instructure/emotion": "8.55.1",
-    "@instructure/shared-types": "8.55.1",
-    "@instructure/ui-a11y-content": "8.55.1",
-    "@instructure/ui-avatar": "8.55.1",
-    "@instructure/ui-breadcrumb": "8.55.1",
-    "@instructure/ui-buttons": "8.55.1",
-    "@instructure/ui-dialog": "8.55.1",
-    "@instructure/ui-dom-utils": "8.55.1",
-    "@instructure/ui-drilldown": "8.55.1",
-    "@instructure/ui-icons": "8.55.1",
-    "@instructure/ui-link": "8.55.1",
-    "@instructure/ui-popover": "8.55.1",
-    "@instructure/ui-prop-types": "8.55.1",
-    "@instructure/ui-react-utils": "8.55.1",
-    "@instructure/ui-responsive": "8.55.1",
-    "@instructure/ui-testable": "8.55.1",
-    "@instructure/ui-tooltip": "8.55.1",
-    "@instructure/ui-tray": "8.55.1",
-    "@instructure/ui-truncate-list": "8.55.1",
-    "@instructure/ui-utils": "8.55.1",
-    "@instructure/ui-view": "8.55.1",
+    "@instructure/console": "8.56.0",
+    "@instructure/emotion": "8.56.0",
+    "@instructure/shared-types": "8.56.0",
+    "@instructure/ui-a11y-content": "8.56.0",
+    "@instructure/ui-avatar": "8.56.0",
+    "@instructure/ui-breadcrumb": "8.56.0",
+    "@instructure/ui-buttons": "8.56.0",
+    "@instructure/ui-dialog": "8.56.0",
+    "@instructure/ui-dom-utils": "8.56.0",
+    "@instructure/ui-drilldown": "8.56.0",
+    "@instructure/ui-icons": "8.56.0",
+    "@instructure/ui-link": "8.56.0",
+    "@instructure/ui-popover": "8.56.0",
+    "@instructure/ui-prop-types": "8.56.0",
+    "@instructure/ui-react-utils": "8.56.0",
+    "@instructure/ui-responsive": "8.56.0",
+    "@instructure/ui-testable": "8.56.0",
+    "@instructure/ui-tooltip": "8.56.0",
+    "@instructure/ui-tray": "8.56.0",
+    "@instructure/ui-truncate-list": "8.56.0",
+    "@instructure/ui-utils": "8.56.0",
+    "@instructure/ui-view": "8.56.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "8.55.1",
-    "@instructure/ui-babel-preset": "8.55.1",
-    "@instructure/ui-color-utils": "8.55.1",
-    "@instructure/ui-scripts": "8.55.1",
-    "@instructure/ui-test-locator": "8.55.1",
-    "@instructure/ui-test-utils": "8.55.1",
-    "@instructure/ui-themes": "8.55.1",
+    "@instructure/ui-axe-check": "8.56.0",
+    "@instructure/ui-babel-preset": "8.56.0",
+    "@instructure/ui-color-utils": "8.56.0",
+    "@instructure/ui-scripts": "8.56.0",
+    "@instructure/ui-test-locator": "8.56.0",
+    "@instructure/ui-test-utils": "8.56.0",
+    "@instructure/ui-themes": "8.56.0",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1"

package/src/TopNavBar/TopNavBarItem/props.ts

@@ -198,6 +198,13 @@ type TopNavBarItemOwnProps = {
     event: React.MouseEvent<ViewOwnProps> | React.KeyboardEvent<ViewOwnProps>
   ) => void
 
+  /**
+   * Only fires when the item is hidden because of truncation or mobile view. Intended to be used for navigation when the item would otherwise be a link.
+   */
+  onHiddenClick?: (
+    event: React.MouseEvent<ViewOwnProps> | React.KeyboardEvent<ViewOwnProps>
+  ) => void
+
   /**
    * __In desktop mode__, the callback fired when the item's submenu ([Drilldown](#Drilldown)) is toggled open/closed.
    */
@@ -298,6 +305,7 @@ const propTypes: PropValidators<PropKeys> = {
   renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   href: PropTypes.string,
   onClick: PropTypes.func,
+  onHiddenClick: PropTypes.func,
   onSubmenuToggle: PropTypes.func,
   onMouseOver: PropTypes.func,
   onMouseOut: PropTypes.func,
@@ -324,6 +332,7 @@ const allowedProps: AllowedPropKeys = [
   'renderIcon',
   'href',
   'onClick',
+  'onHiddenClick',
   'onSubmenuToggle',
   'onMouseOver',
   'onMouseOut',

package/src/TopNavBar/utils/mapItemsForDrilldown.tsx

@@ -206,7 +206,13 @@ const renderMappedItemsAsDrilldownOptions = (
   mappedItems: ItemMappedForDrilldownOption[]
 ) => {
   return mappedItems.map<DrilldownOptionChild>((mappedItem) => {
-    const { optionData } = mappedItem
+    const { optionData, item: originalItem } = mappedItem
+    const onHiddenClick = originalItem.props.onHiddenClick
+
+    if (onHiddenClick) {
+      // if the `onHiddenClick` prop is provided for the MenuItem it should overwrite the `onClick` prop if there is any
+      optionData.onOptionClick = onHiddenClick as any
+    }
 
     return (
       <Drilldown.Option