@instructure/ui-side-nav-bar 11.6.0 → 11.6.1-snapshot-129

package/es/SideNavBar/v2/SideNavBarItem/index.js

@@ -0,0 +1,109 @@
+var _dec, _class, _SideNavBarItem;
+/*
+ * 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 { omitProps, getElementType } from '@instructure/ui-react-utils';
+import { Tooltip } from '@instructure/ui-tooltip/latest';
+import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+/**
+---
+parent: SideNavBar
+id: SideNavBar.Item
+---
+**/
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+let SideNavBarItem = (_dec = withStyle(generateStyle, 'SideNavBarItem'), _dec(_class = (_SideNavBarItem = class SideNavBarItem 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);
+      }
+    };
+  }
+  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, {
+      minimized: this.props.minimized
+    });
+  }
+  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, {
+      minimized: this.props.minimized
+    });
+  }
+  renderLink(addRef) {
+    var _this$props$styles, _this$props$styles2, _this$props$styles3;
+    const ElementType = getElementType(SideNavBarItem, this.props);
+    const _this$props3 = this.props,
+      href = _this$props3.href,
+      onClick = _this$props3.onClick,
+      icon = _this$props3.icon,
+      label = _this$props3.label;
+    const props = omitProps(this.props, SideNavBarItem.allowedProps);
+    return _jsxs(ElementType, {
+      ...props,
+      href: href,
+      onClick: onClick,
+      ref: addRef ? this.handleRef : void 0,
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.navigationItem,
+      "aria-label": this.props.minimized ? label : void 0,
+      "data-cid": "SideNavBarItem",
+      children: [_jsx("div", {
+        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon,
+        children: icon
+      }), !this.props.minimized ? _jsx("div", {
+        css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.label,
+        children: label
+      }) : null]
+    });
+  }
+  render() {
+    const _this$props4 = this.props,
+      minimized = _this$props4.minimized,
+      label = _this$props4.label;
+    const hasTooltip = minimized && hasVisibleChildren(label);
+    const link = this.renderLink(!hasTooltip);
+    return hasTooltip ? _jsx(Tooltip, {
+      renderTip: label,
+      placement: "end",
+      elementRef: this.handleRef,
+      children: link
+    }) : link;
+  }
+}, _SideNavBarItem.displayName = "SideNavBarItem", _SideNavBarItem.componentId = 'SideNavBar.Item', _SideNavBarItem.allowedProps = allowedProps, _SideNavBarItem.defaultProps = {
+  as: 'a',
+  selected: false,
+  minimized: false
+}, _SideNavBarItem)) || _class);
+export default SideNavBarItem;
+export { SideNavBarItem };

package/{src/index.ts → es/SideNavBar/v2/SideNavBarItem/props.js}

@@ -22,7 +22,5 @@
  * SOFTWARE.
  */
 
-export { SideNavBar, SideNavBarItem } from './SideNavBar'
-
-export type { SideNavBarProps } from './SideNavBar/props'
-export type { SideNavBarItemProps } from './SideNavBar/SideNavBarItem/props'
+const allowedProps = ['elementRef', 'icon', 'label', 'as', 'href', 'onClick', 'selected', 'minimized'];
+export { allowedProps };

package/es/SideNavBar/v2/SideNavBarItem/styles.js

@@ -0,0 +1,101 @@
+/*
+ * 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} sharedTokens Shared theme token object
+ * @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 selected = props.selected;
+  return {
+    navigationItem: {
+      borderRadius: componentTheme.borderRadius,
+      label: 'navigationItem',
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      display: 'block',
+      width: '100%',
+      textAlign: 'center',
+      padding: componentTheme.contentPadding,
+      cursor: 'pointer',
+      border: 'none',
+      boxSizing: 'border-box',
+      textDecoration: componentTheme.linkTextDecoration,
+      overflowWrap: 'break-word',
+      wordWrap: 'break-word',
+      hyphens: 'auto',
+      ...(selected ? {
+        backgroundColor: componentTheme.selectedBackgroundColor,
+        color: componentTheme.selectedFontColor,
+        '&:active, &:hover': {
+          backgroundColor: componentTheme.selectedBackgroundColor,
+          color: componentTheme.selectedFontColor,
+          textDecoration: componentTheme.linkTextDecoration
+        },
+        '&:focus': {
+          backgroundColor: componentTheme.selectedBackgroundColor,
+          boxShadow: `${componentTheme.selectedOuterFocusOutlineColor}, ${componentTheme.selectedInnerFocusOutlineColor}`,
+          outline: 'none'
+        }
+      } : {
+        backgroundColor: componentTheme.backgroundColor,
+        color: componentTheme.fontColor,
+        '&:active': {
+          backgroundColor: componentTheme.hoverBackgroundColor
+        },
+        '&:hover': {
+          transition: 'background-color .3s',
+          backgroundColor: componentTheme.hoverBackgroundColor,
+          color: componentTheme.fontColor,
+          textDecoration: componentTheme.linkTextDecoration
+        },
+        '&:focus': {
+          backgroundColor: componentTheme.hoverBackgroundColor,
+          boxShadow: `inset 0 0 0 0.125rem ${componentTheme.outerFocusOutlineColor}, inset 0 0 0 0.25rem ${componentTheme.innerFocusOutlineColor}`,
+          outline: 'none'
+        }
+      })
+    },
+    icon: {
+      label: 'navigationItem__icon',
+      height: componentTheme.iconWrapperHeight,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    label: {
+      label: 'navigationItem__label',
+      fontSize: componentTheme.fontSize,
+      lineHeight: componentTheme.lineHeight
+    }
+  };
+};
+export default generateStyle;

package/es/SideNavBar/v2/index.js

@@ -0,0 +1,135 @@
+var _dec, _class, _SideNavBar;
+/*
+ * 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, Children, isValidElement } from 'react';
+import { omitProps, safeCloneElement } from '@instructure/ui-react-utils';
+import { PanelLeftCloseInstUIIcon, PanelLeftOpenInstUIIcon, renderIconWithProps } from '@instructure/ui-icons';
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { withStyle } from '@instructure/emotion';
+import { SideNavBarItem } from "./SideNavBarItem/index.js";
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+const navMinimized = ({
+  minimized
+}) => ({
+  minimized: !minimized
+});
+
+/**
+---
+category: components
+---
+**/
+let SideNavBar = (_dec = withStyle(generateStyle), _dec(_class = (_SideNavBar = class SideNavBar extends Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+    this.handleNavToggle = event => {
+      if (!this.isControlled()) {
+        this.setState(navMinimized);
+      }
+      if (typeof this.props.onMinimized === 'function') {
+        this.props.onMinimized(event, !this.minimized);
+      }
+    };
+    this.state = {
+      minimized: this.isControlled(props) ? !!props.minimized : !!props.defaultMinimized
+    };
+  }
+  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, {
+      minimized: this.minimized
+    });
+  }
+  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, {
+      minimized: this.minimized
+    });
+  }
+  get minimized() {
+    if (this.isControlled()) {
+      return !!this.props.minimized;
+    }
+    return !!this.state.minimized;
+  }
+  isControlled(props = this.props) {
+    return typeof props.minimized === 'boolean';
+  }
+  renderChildren() {
+    return Children.map(this.props.children, child => {
+      var _this$props$styles;
+      if (! /*#__PURE__*/isValidElement(child)) return null;
+      const navItem = safeCloneElement(child, {
+        minimized: this.state.minimized
+      });
+      return _jsx("li", {
+        css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.list,
+        children: navItem
+      });
+    });
+  }
+  renderIcon() {
+    const icon = this.minimized ? PanelLeftOpenInstUIIcon : PanelLeftCloseInstUIIcon;
+    const iconColor = this.props.selected ? 'sideNavActiveColor' : 'sideNavColor';
+    return renderIconWithProps(icon, 'lg', iconColor); //TODO-rework remove after merging into v12
+  }
+  toggleMessage() {
+    return this.state.minimized ? this.props.toggleLabel.minimizedLabel : this.props.toggleLabel.expandedLabel;
+  }
+  render() {
+    var _this$props$styles2, _this$props$styles3;
+    const label = this.props.label;
+    const props = omitProps(this.props, SideNavBar.allowedProps, ['minimized']);
+    return _jsxs("nav", {
+      ...props,
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.navigation,
+      "data-cid": "SideNavBar",
+      "aria-label": label,
+      ref: element => {
+        this.ref = element;
+      },
+      children: [_jsx("ul", {
+        css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.content,
+        children: this.renderChildren()
+      }), _jsx(SideNavBarItem, {
+        "aria-expanded": !this.minimized,
+        onClick: this.handleNavToggle,
+        icon: this.renderIcon(),
+        label: _jsx(ScreenReaderContent, {
+          children: this.toggleMessage()
+        })
+      })]
+    });
+  }
+}, _SideNavBar.displayName = "SideNavBar", _SideNavBar.componentId = 'SideNavBar', _SideNavBar.allowedProps = allowedProps, _SideNavBar.defaultProps = {
+  children: null,
+  defaultMinimized: false,
+  // TODO we should investigate later if it used or not
+  onClick: function (_e) {}
+}, _SideNavBar.Item = SideNavBarItem, _SideNavBar)) || _class);
+export default SideNavBar;
+export { SideNavBar, SideNavBarItem };

package/es/SideNavBar/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 = ['children', 'minimized', 'defaultMinimized', 'onMinimized', 'label', 'toggleLabel', 'href', 'onClick'];
+export { allowedProps };

package/es/SideNavBar/v2/styles.js

@@ -0,0 +1,95 @@
+/*
+ * 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 { boxShadowObjectsToCSSString } from '@instructure/ui-themes';
+
+/**
+ * ---
+ * 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} sharedTokens Shared theme token object
+ * @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, _sharedTokens, state) => {
+  const minimized = state.minimized;
+  const layoutVariants = {
+    minimized: {
+      width: componentTheme.minimizedWidth,
+      margin: componentTheme.minimizedMargin,
+      borderRadius: componentTheme.minimizedBorderRadius
+    },
+    expanded: {
+      width: componentTheme.width,
+      margin: componentTheme.margin,
+      borderRadius: componentTheme.borderRadius
+    }
+  };
+  return {
+    navigation: {
+      label: 'navigation',
+      color: componentTheme.fontColor,
+      backgroundColor: componentTheme.backgroundColor,
+      boxSizing: 'border-box',
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+      overflowY: 'auto',
+      boxShadow: boxShadowObjectsToCSSString(componentTheme.boxShadow),
+      ...layoutVariants[minimized ? 'minimized' : 'expanded'],
+      // The layout toggle button needs the nav's border radius to visually match the container corners.
+      '& > [data-cid="SideNavBarItem"]': {
+        borderRadius: minimized ? componentTheme.minimizedBorderRadius : componentTheme.borderRadius
+      }
+    },
+    list: {
+      label: 'navigation__list',
+      padding: 0,
+      margin: 0
+    },
+    content: {
+      label: 'navigation__content',
+      listStyleType: 'none',
+      margin: componentTheme.contentMargin,
+      padding: 0,
+      display: 'flex',
+      flex: '1 0 auto',
+      flexDirection: 'column',
+      gap: componentTheme.contentGap
+    },
+    toggleIcon: {
+      fill: componentTheme.fill,
+      margin: '0 auto',
+      transform: 'translate3d(0, 0, 0)',
+      transition: `all ${componentTheme.toggleTransition}`,
+      ...(minimized ? {
+        transform: 'rotate3d(0, 1, 0, -180deg)'
+      } : {})
+    }
+  };
+};
+export default generateStyle;

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

@@ -21,4 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { SideNavBar, SideNavBarItem } from "./SideNavBar/index.js";
+export { SideNavBar, SideNavBarItem } from "../SideNavBar/v1/index.js";

package/es/exports/b.js

@@ -0,0 +1,24 @@
+/*
+ * 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 { SideNavBar, SideNavBarItem } from "../SideNavBar/v2/index.js";

package/lib/SideNavBar/{SideNavBarItem → v1/SideNavBarItem}/index.js

@@ -8,7 +8,7 @@ exports.default = exports.SideNavBarItem = void 0;
 var _react = require("react");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
-var _Tooltip = require("@instructure/ui-tooltip/lib/Tooltip");
+var _v11_ = require("@instructure/ui-tooltip/v11_6");
 var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
@@ -45,7 +45,7 @@ parent: SideNavBar
 id: SideNavBar.Item
 ---
 **/
-let SideNavBarItem = exports.SideNavBarItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_SideNavBarItem = class SideNavBarItem extends _react.Component {
+let SideNavBarItem = exports.SideNavBarItem = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_SideNavBarItem = class SideNavBarItem extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -101,7 +101,7 @@ let SideNavBarItem = exports.SideNavBarItem = (_dec = (0, _emotion.withStyle)(_s
       label = _this$props4.label;
     const hasTooltip = minimized && (0, _hasVisibleChildren.hasVisibleChildren)(label);
     const link = this.renderLink(!hasTooltip);
-    return hasTooltip ? (0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+    return hasTooltip ? (0, _jsxRuntime.jsx)(_v11_.Tooltip, {
       renderTip: label,
       placement: "end",
       elementRef: this.handleRef,

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

@@ -15,7 +15,7 @@ exports.default = void 0;
 var _react = require("react");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
-var _IconMoveStartLine = require("@instructure/ui-icons/lib/IconMoveStartLine.js");
+var _IconMoveStartLine = require("@instructure/ui-icons/lib/generated/IconMoveStartLine.js");
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
 var _emotion = require("@instructure/emotion");
 var _SideNavBarItem = require("./SideNavBarItem");
@@ -58,7 +58,7 @@ const navMinimized = ({
 category: components
 ---
 **/
-let SideNavBar = exports.SideNavBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_SideNavBar = class SideNavBar extends _react.Component {
+let SideNavBar = exports.SideNavBar = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_SideNavBar = class SideNavBar extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;

package/lib/SideNavBar/v2/SideNavBarItem/index.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SideNavBarItem = void 0;
+var _react = require("react");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
+var _latest = require("@instructure/ui-tooltip/latest");
+var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _class, _SideNavBarItem;
+/*
+ * 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: SideNavBar
+id: SideNavBar.Item
+---
+**/
+let SideNavBarItem = exports.SideNavBarItem = (_dec = (0, _emotion.withStyle)(_styles.default, 'SideNavBarItem'), _dec(_class = (_SideNavBarItem = class SideNavBarItem 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);
+      }
+    };
+  }
+  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, {
+      minimized: this.props.minimized
+    });
+  }
+  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, {
+      minimized: this.props.minimized
+    });
+  }
+  renderLink(addRef) {
+    var _this$props$styles, _this$props$styles2, _this$props$styles3;
+    const ElementType = (0, _getElementType.getElementType)(SideNavBarItem, this.props);
+    const _this$props3 = this.props,
+      href = _this$props3.href,
+      onClick = _this$props3.onClick,
+      icon = _this$props3.icon,
+      label = _this$props3.label;
+    const props = (0, _omitProps.omitProps)(this.props, SideNavBarItem.allowedProps);
+    return (0, _jsxRuntime.jsxs)(ElementType, {
+      ...props,
+      href: href,
+      onClick: onClick,
+      ref: addRef ? this.handleRef : void 0,
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.navigationItem,
+      "aria-label": this.props.minimized ? label : void 0,
+      "data-cid": "SideNavBarItem",
+      children: [(0, _jsxRuntime.jsx)("div", {
+        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon,
+        children: icon
+      }), !this.props.minimized ? (0, _jsxRuntime.jsx)("div", {
+        css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.label,
+        children: label
+      }) : null]
+    });
+  }
+  render() {
+    const _this$props4 = this.props,
+      minimized = _this$props4.minimized,
+      label = _this$props4.label;
+    const hasTooltip = minimized && (0, _hasVisibleChildren.hasVisibleChildren)(label);
+    const link = this.renderLink(!hasTooltip);
+    return hasTooltip ? (0, _jsxRuntime.jsx)(_latest.Tooltip, {
+      renderTip: label,
+      placement: "end",
+      elementRef: this.handleRef,
+      children: link
+    }) : link;
+  }
+}, _SideNavBarItem.displayName = "SideNavBarItem", _SideNavBarItem.componentId = 'SideNavBar.Item', _SideNavBarItem.allowedProps = _props.allowedProps, _SideNavBarItem.defaultProps = {
+  as: 'a',
+  selected: false,
+  minimized: false
+}, _SideNavBarItem)) || _class);
+var _default = exports.default = SideNavBarItem;