@instructure/ui-navigation 11.6.0 → 11.6.1-snapshot-129

package/es/AppNav/v2/Item/index.js

@@ -0,0 +1,115 @@
+var _dec, _class, _Item;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component } from 'react';
+import { logError as error } from '@instructure/console';
+import { callRenderProp, getElementType, matchComponentTypes, passthroughProps } from '@instructure/ui-react-utils';
+import { View } from '@instructure/ui-view/latest';
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+/**
+---
+parent: AppNav
+id: AppNav.Item
+---
+@module Item
+**/
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+let Item = (_dec = withStyle(generateStyle), _dec(_class = (_Item = class Item extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+    this.handleClick = e => {
+      const _this$props = this.props,
+        isDisabled = _this$props.isDisabled,
+        onClick = _this$props.onClick;
+      if (isDisabled) {
+        e.preventDefault();
+        e.stopPropagation();
+      } else if (typeof onClick === 'function') {
+        onClick(e);
+      }
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props2;
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props3;
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+  }
+  render() {
+    var _this$props$styles, _this$props$styles2;
+    const ElementType = getElementType(Item, this.props);
+    const _this$props4 = this.props,
+      renderIcon = _this$props4.renderIcon,
+      renderLabel = _this$props4.renderLabel,
+      href = _this$props4.href,
+      renderAfter = _this$props4.renderAfter,
+      cursor = _this$props4.cursor,
+      isDisabled = _this$props4.isDisabled;
+    const icon = callRenderProp(renderIcon);
+    const label = callRenderProp(renderLabel);
+    const labelIsForScreenReaders = matchComponentTypes(label, [ScreenReaderContent]);
+    if (icon) {
+      error(labelIsForScreenReaders, '[AppNav] If an icon is used, the label text should be wrapped in <ScreenReaderContent />.');
+    }
+    return _jsxs(View, {
+      ...passthroughProps(this.props),
+      as: ElementType,
+      href: href,
+      onClick: this.handleClick,
+      disabled: isDisabled,
+      elementRef: this.handleRef,
+      display: "flex",
+      position: "relative",
+      borderRadius: "medium",
+      cursor: isDisabled ? 'not-allowed' : cursor,
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.item,
+      "data-cid": "AppNav.Item",
+      children: [icon, labelIsForScreenReaders ? label : _jsx("span", {
+        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label,
+        children: label
+      }), renderAfter && callRenderProp(renderAfter)]
+    });
+  }
+}, _Item.displayName = "Item", _Item.componentId = 'AppNav.Item', _Item.allowedProps = allowedProps, _Item.defaultProps = {
+  children: null,
+  isSelected: false,
+  cursor: 'pointer',
+  isDisabled: false
+}, _Item)) || _class);
+export default Item;
+export { Item };

package/{src/index.ts → es/AppNav/v2/Item/props.js}

@@ -22,8 +22,5 @@
  * SOFTWARE.
  */
 
-export { AppNav } from './AppNav'
-export { Item as AppNavItem } from './AppNav/Item'
-
-export type { AppNavProps } from './AppNav/props'
-export type { AppNavItemProps } from './AppNav/Item/props'
+const allowedProps = ['renderLabel', 'renderAfter', 'renderIcon', 'href', 'onClick', 'isSelected', 'elementRef', 'as', 'cursor', 'isDisabled'];
+export { allowedProps };

package/es/AppNav/v2/Item/styles.js

@@ -0,0 +1,85 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props) => {
+  const isSelected = props.isSelected,
+    isDisabled = props.isDisabled;
+  const itemStyles = {
+    appearance: 'none',
+    overflow: 'visible',
+    direction: 'inherit',
+    margin: '0',
+    textDecoration: 'none',
+    userSelect: 'none',
+    touchAction: 'manipulation',
+    background: 'transparent',
+    border: 'none',
+    outline: 'none',
+    lineHeight: componentTheme.height,
+    padding: `0 ${componentTheme.padding}`,
+    alignItems: 'flex-start',
+    '&:hover': {
+      textDecoration: 'underline',
+      textDecorationColor: componentTheme.textColor
+    },
+    ...(isDisabled && {
+      pointerEvents: 'none',
+      opacity: 0.5
+    })
+  };
+  return {
+    item: {
+      label: 'item',
+      ...itemStyles,
+      // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
+      '&:is(a), &:is(button)': itemStyles,
+      '&:-webkit-any(a), &:-webkit-any(button)': itemStyles
+    },
+    label: {
+      label: 'item__label',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      fontFamily: componentTheme.fontFamily,
+      fontSize: componentTheme.fontSize,
+      fontWeight: componentTheme.fontWeight,
+      color: componentTheme.textColor,
+      ...(isSelected && {
+        color: componentTheme.textColorSelected,
+        textDecoration: 'underline'
+      })
+    }
+  };
+};
+export default generateStyle;

package/es/AppNav/v2/index.js

@@ -0,0 +1,123 @@
+var _dec, _class, _AppNav;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component } from 'react';
+import { withStyle } from '@instructure/emotion';
+import { callRenderProp, omitProps } from '@instructure/ui-react-utils';
+import { View } from '@instructure/ui-view/latest';
+import { Menu } from '@instructure/ui-menu/latest';
+import { Item } from "./Item/index.js";
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { TruncateList } from '@instructure/ui-truncate-list';
+
+/**
+---
+category: components
+---
+**/
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+let AppNav = (_dec = withStyle(generateStyle), _dec(_class = (_AppNav = class AppNav extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      isMeasuring: false
+    };
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  renderMenu(items) {
+    return _jsx(Menu, {
+      trigger: _jsx(AppNav.Item, {
+        renderLabel: callRenderProp(this.props.renderTruncateLabel)
+      }),
+      children: items.map((item, index) => {
+        return _jsx(Menu.Item, {
+          href: item.props.href ? item.props.href : void 0,
+          onClick: item.props.onClick && !item.props.href ? item.props.onClick : void 0,
+          children: callRenderProp(item.props.renderLabel)
+        }, index);
+      })
+    });
+  }
+  render() {
+    const _this$props3 = this.props,
+      visibleItemsCount = _this$props3.visibleItemsCount,
+      screenReaderLabel = _this$props3.screenReaderLabel,
+      margin = _this$props3.margin,
+      debounce = _this$props3.debounce,
+      styles = _this$props3.styles;
+    const passthroughProps = View.omitViewProps(omitProps(this.props, AppNav.allowedProps), AppNav);
+    const renderBeforeItems = callRenderProp(this.props.renderBeforeItems);
+    const renderAfterItems = callRenderProp(this.props.renderAfterItems);
+    const hasRenderedContent = renderBeforeItems || renderAfterItems;
+    return _jsxs(View, {
+      ...passthroughProps,
+      as: "nav",
+      css: [styles === null || styles === void 0 ? void 0 : styles.appNav, hasRenderedContent ? styles === null || styles === void 0 ? void 0 : styles.alignCenter : ''],
+      margin: margin,
+      display: hasRenderedContent ? 'flex' : 'block',
+      elementRef: this.handleRef,
+      "data-cid": "AppNav",
+      children: [renderBeforeItems && _jsx("span", {
+        children: renderBeforeItems
+      }), _jsx(TruncateList, {
+        visibleItemsCount: visibleItemsCount,
+        debounce: debounce,
+        onUpdate: this.props.onUpdate,
+        renderHiddenItemMenu: hiddenChildren => this.renderMenu(hiddenChildren),
+        itemSpacing: styles === null || styles === void 0 ? void 0 : styles.horizontalMargin,
+        fixMenuTriggerWidth: styles === null || styles === void 0 ? void 0 : styles.menuTriggerWidth,
+        css: styles === null || styles === void 0 ? void 0 : styles.list,
+        "aria-label": callRenderProp(screenReaderLabel),
+        children: this.props.children
+      }), renderAfterItems && _jsx("span", {
+        children: renderAfterItems
+      })]
+    });
+  }
+}, _AppNav.displayName = "AppNav", _AppNav.componentId = 'AppNav', _AppNav.allowedProps = allowedProps, _AppNav.defaultProps = {
+  children: null,
+  debounce: 300,
+  margin: '0',
+  renderTruncateLabel: () => 'More',
+  visibleItemsCount: 0
+}, _AppNav.Item = Item, _AppNav)) || _class);
+export { AppNav };
+export default AppNav;

package/es/AppNav/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['screenReaderLabel', 'children', 'debounce', 'renderBeforeItems', 'renderAfterItems', 'margin', 'elementRef', 'renderTruncateLabel', 'onUpdate', 'visibleItemsCount'];
+export { allowedProps };

package/es/AppNav/v2/styles.js

@@ -0,0 +1,58 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = componentTheme => {
+  return {
+    appNav: {
+      label: 'appNav',
+      fontFamily: componentTheme.fontFamily,
+      borderBottom: `${componentTheme.borderWidth} ${componentTheme.borderStyle} ${componentTheme.borderColor}`
+    },
+    alignCenter: {
+      alignItems: 'center'
+    },
+    list: {
+      label: 'appNav__list',
+      height: componentTheme.height,
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: '0',
+      minWidth: '0.0625rem',
+      paddingInlineStart: componentTheme.horizontalMargin
+    },
+    horizontalMargin: componentTheme.horizontalMargin,
+    menuTriggerWidth: componentTheme.menuTriggerWidth
+  };
+};
+export default generateStyle;

package/es/{index.js → exports/a.js}

@@ -21,5 +21,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { AppNav } from "./AppNav/index.js";
-export { Item as AppNavItem } from "./AppNav/Item/index.js";
+export { AppNav } from "../AppNav/v1/index.js";
+export { Item as AppNavItem } from "../AppNav/v1/Item/index.js";

package/es/exports/b.js

@@ -0,0 +1,25 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export { AppNav } from "../AppNav/v2/index.js";
+export { Item as AppNavItem } from "../AppNav/v2/Item/index.js";

package/lib/AppNav/v1/Item/index.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Item = void 0;
+var _react = require("react");
+var _console = require("@instructure/console");
+var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
+var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
+var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _v11_ = require("@instructure/ui-view/v11_6");
+var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _class, _Item;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+parent: AppNav
+id: AppNav.Item
+---
+@module Item
+**/
+let Item = exports.Item = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_Item = class Item extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+    this.handleClick = e => {
+      const _this$props = this.props,
+        isDisabled = _this$props.isDisabled,
+        onClick = _this$props.onClick;
+      if (isDisabled) {
+        e.preventDefault();
+        e.stopPropagation();
+      } else if (typeof onClick === 'function') {
+        onClick(e);
+      }
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props2;
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props3;
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+  }
+  render() {
+    var _this$props$styles, _this$props$styles2;
+    const ElementType = (0, _getElementType.getElementType)(Item, this.props);
+    const _this$props4 = this.props,
+      renderIcon = _this$props4.renderIcon,
+      renderLabel = _this$props4.renderLabel,
+      href = _this$props4.href,
+      renderAfter = _this$props4.renderAfter,
+      cursor = _this$props4.cursor,
+      isDisabled = _this$props4.isDisabled;
+    const icon = (0, _callRenderProp.callRenderProp)(renderIcon);
+    const label = (0, _callRenderProp.callRenderProp)(renderLabel);
+    const labelIsForScreenReaders = (0, _matchComponentTypes.matchComponentTypes)(label, [_ScreenReaderContent.ScreenReaderContent]);
+    if (icon) {
+      (0, _console.logError)(labelIsForScreenReaders, '[AppNav] If an icon is used, the label text should be wrapped in <ScreenReaderContent />.');
+    }
+    return (0, _jsxRuntime.jsxs)(_v11_.View, {
+      ...(0, _passthroughProps.passthroughProps)(this.props),
+      as: ElementType,
+      href: href,
+      onClick: this.handleClick,
+      disabled: isDisabled,
+      elementRef: this.handleRef,
+      display: "flex",
+      position: "relative",
+      borderRadius: "medium",
+      cursor: isDisabled ? 'not-allowed' : cursor,
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.item,
+      "data-cid": "AppNav.Item",
+      children: [icon, labelIsForScreenReaders ? label : (0, _jsxRuntime.jsx)("span", {
+        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label,
+        children: label
+      }), renderAfter && (0, _callRenderProp.callRenderProp)(renderAfter)]
+    });
+  }
+}, _Item.displayName = "Item", _Item.componentId = 'AppNav.Item', _Item.allowedProps = _props.allowedProps, _Item.defaultProps = {
+  children: null,
+  isSelected: false,
+  cursor: 'pointer',
+  isDisabled: false
+}, _Item)) || _class);
+var _default = exports.default = Item;

package/lib/AppNav/{index.js → v1/index.js}

@@ -9,8 +9,8 @@ var _react = require("react");
 var _emotion = require("@instructure/emotion");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _View = require("@instructure/ui-view/lib/View");
-var _Menu = require("@instructure/ui-menu/lib/Menu");
+var _v11_ = require("@instructure/ui-view/v11_6");
+var _v11_2 = require("@instructure/ui-menu/v11_6");
 var _Item = require("./Item");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
@@ -46,7 +46,7 @@ var _dec, _class, _AppNav;
 category: components
 ---
 **/
-let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_AppNav = class AppNav extends _react.Component {
+let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_AppNav = class AppNav extends _react.Component {
   constructor(...args) {
     super(...args);
     this.state = {
@@ -70,12 +70,12 @@ let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
   renderMenu(items) {
-    return (0, _jsxRuntime.jsx)(_Menu.Menu, {
+    return (0, _jsxRuntime.jsx)(_v11_2.Menu, {
       trigger: (0, _jsxRuntime.jsx)(AppNav.Item, {
         renderLabel: (0, _callRenderProp.callRenderProp)(this.props.renderTruncateLabel)
       }),
       children: items.map((item, index) => {
-        return (0, _jsxRuntime.jsx)(_Menu.Menu.Item, {
+        return (0, _jsxRuntime.jsx)(_v11_2.Menu.Item, {
           href: item.props.href ? item.props.href : void 0,
           onClick: item.props.onClick && !item.props.href ? item.props.onClick : void 0,
           children: (0, _callRenderProp.callRenderProp)(item.props.renderLabel)
@@ -90,11 +90,11 @@ let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _
       margin = _this$props3.margin,
       debounce = _this$props3.debounce,
       styles = _this$props3.styles;
-    const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, AppNav.allowedProps), AppNav);
+    const passthroughProps = _v11_.View.omitViewProps((0, _omitProps.omitProps)(this.props, AppNav.allowedProps), AppNav);
     const renderBeforeItems = (0, _callRenderProp.callRenderProp)(this.props.renderBeforeItems);
     const renderAfterItems = (0, _callRenderProp.callRenderProp)(this.props.renderAfterItems);
     const hasRenderedContent = renderBeforeItems || renderAfterItems;
-    return (0, _jsxRuntime.jsxs)(_View.View, {
+    return (0, _jsxRuntime.jsxs)(_v11_.View, {
       ...passthroughProps,
       as: "nav",
       css: [styles === null || styles === void 0 ? void 0 : styles.appNav, hasRenderedContent ? styles === null || styles === void 0 ? void 0 : styles.alignCenter : ''],

package/lib/AppNav/{Item → v2/Item}/index.js

@@ -11,11 +11,10 @@ var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js
 var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-var _View = require("@instructure/ui-view/lib/View");
+var _latest = require("@instructure/ui-view/latest");
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _class, _Item;
@@ -49,7 +48,7 @@ id: AppNav.Item
 ---
 @module Item
 **/
-let Item = exports.Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_Item = class Item extends _react.Component {
+let Item = exports.Item = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_Item = class Item extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -96,7 +95,7 @@ let Item = exports.Item = (_dec = (0, _emotion.withStyle)(_styles.default, _them
     if (icon) {
       (0, _console.logError)(labelIsForScreenReaders, '[AppNav] If an icon is used, the label text should be wrapped in <ScreenReaderContent />.');
     }
-    return (0, _jsxRuntime.jsxs)(_View.View, {
+    return (0, _jsxRuntime.jsxs)(_latest.View, {
       ...(0, _passthroughProps.passthroughProps)(this.props),
       as: ElementType,
       href: href,