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

package/src/AppNav/v2/Item/props.ts

@@ -0,0 +1,103 @@
+/*
+ * 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 type {
+  AsElementType,
+  AppNavItemTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { Cursor } from '@instructure/shared-types'
+import React from 'react'
+import { Renderable } from '@instructure/shared-types'
+
+type AppNavItemOwnProps = {
+  /**
+   * The text to display. If the `icon` prop is used, label text must be wrapped
+   * in `ScreenReaderContent`.
+   */
+  renderLabel: Renderable
+  /**
+   * Content to display after the renderLabel text, such as a badge
+   */
+  renderAfter?: Renderable
+  /**
+   * The visual to display (ex. an Image, Logo, Avatar, or Icon)
+   */
+  renderIcon?: Renderable
+  /**
+   * If the item goes to a new page, pass an href
+   */
+  href?: string
+  /**
+   * If the item does not go to a new page, pass an onClick
+   */
+  onClick?: (event: React.MouseEvent) => void
+  /**
+   * Denotes which item is currently selected
+   */
+  isSelected?: boolean
+  /**
+   * provides a reference to the underlying focusable (`button` or `a`) element
+   */
+  elementRef?: (element: Element | null) => void
+  /**
+   * The element type to render as (will default to `<a>` if href is provided)
+   */
+  as?: AsElementType
+  /**
+   * Specify the mouse cursor to use on :hover.
+   * The `pointer` cursor is used by default.
+   */
+  cursor?: Cursor
+  /**
+   * Disables the link or button visually and functionally
+   */
+  isDisabled?: boolean
+}
+
+type PropKeys = keyof AppNavItemOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type AppNavItemProps = AppNavItemOwnProps &
+  WithStyleProps<AppNavItemTheme, AppNavItemStyle> &
+  OtherHTMLAttributes<AppNavItemOwnProps>
+
+type AppNavItemStyle = ComponentStyle<'item' | 'label'>
+const allowedProps: AllowedPropKeys = [
+  'renderLabel',
+  'renderAfter',
+  'renderIcon',
+  'href',
+  'onClick',
+  'isSelected',
+  'elementRef',
+  'as',
+  'cursor',
+  'isDisabled'
+]
+
+export type { AppNavItemProps, AppNavItemStyle }
+export { allowedProps }

package/src/AppNav/v2/Item/styles.ts

@@ -0,0 +1,97 @@
+/*
+ * 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 type { NewComponentTypes } from '@instructure/ui-themes'
+import type { AppNavItemProps, AppNavItemStyle } from './props'
+
+/**
+ * ---
+ * 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: NewComponentTypes['AppNavItem'],
+  props: AppNavItemProps
+): AppNavItemStyle => {
+  const { isSelected, isDisabled } = props
+
+  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/src/AppNav/v2/README.md

@@ -0,0 +1,103 @@
+---
+describes: AppNav
+---
+
+`AppNav` is a navigation component currently intended for use within LTI apps. AppNav
+can be configured to adapt to small screen widths by truncating nav items that
+don't fit within the available space.
+
+The `onUpdate` function prop returns the number of visible nav items, while the
+`renderTruncateLabel` function prop allows you to customize the trigger for the Menu
+that contains the truncated items. The example below shows how you can use both of
+these props to create a hamburger menu when the number of visible nav items is less
+than two.
+
+```js
+---
+type: example
+---
+const totalItemsCount = 5
+
+const AppNavExample = () => {
+  const [visibleItemsCount, setVisibleItemsCount] = useState(totalItemsCount)
+
+  const handleUpdate = ({ visibleItemsCount }) => {
+    setVisibleItemsCount(visibleItemsCount)
+  }
+
+  return (
+    <AppNav
+      screenReaderLabel="App navigation"
+      visibleItemsCount={visibleItemsCount >= 2 ? visibleItemsCount : 0}
+      onUpdate={handleUpdate}
+      renderBeforeItems={
+        <AppNav.Item
+          renderLabel={<ScreenReaderContent>Instructure</ScreenReaderContent>}
+          renderIcon={
+            <CommandInstUIIcon inline={false} size="2xl" color="baseColor" />
+          }
+          href="http://instructure.com"
+        />
+      }
+      renderAfterItems={
+        <IconButton
+          onClick={() => console.log('Add')}
+          renderIcon={<PlusInstUIIcon/>}
+          margin="0 0 0 x-small"
+          screenReaderLabel="Add something"
+          withBorder={false}
+          withBackground={false}
+        />
+      }
+      renderTruncateLabel={() => {
+        const hiddenItemsCount = totalItemsCount - visibleItemsCount
+        if (visibleItemsCount >= 2) {
+          return `${hiddenItemsCount} More`
+        } else {
+          return (
+            <span>
+              <MenuInstUIIcon size={'2xl'} inline={false} />
+              <ScreenReaderContent>{`${hiddenItemsCount} More`}</ScreenReaderContent>
+            </span>
+          )
+        }
+      }}
+    >
+      <AppNav.Item
+        renderLabel="instructure-ui"
+        href="http://instructure.design"
+        renderAfter={
+          <Badge
+            type="notification"
+            variant="success"
+            standalone
+            formatOutput={() => {
+              return (
+                <ScreenReaderContent>
+                  You have notifications from instructure-ui
+                </ScreenReaderContent>
+              )
+            }}
+          />
+        }
+      />
+      <AppNav.Item
+        isSelected
+        renderLabel="Canvas"
+        href="https://www.instructure.com/canvas/"
+      />
+      <AppNav.Item renderLabel="Canvas Network" href="https://canvas.net" />
+      <AppNav.Item
+        renderLabel={() => 'Canvas Community'}
+        href="https://community.canvaslms.com/"
+      />
+      <AppNav.Item
+        renderLabel="Bridge"
+        href="https://www.instructure.com/bridge/"
+      />
+    </AppNav>
+  )
+}
+
+render(<AppNavExample />)
+```

package/src/AppNav/v2/index.tsx

@@ -0,0 +1,166 @@
+/*
+ * 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 { ComponentElement, 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'
+
+import generateStyle from './styles'
+import type { AppNavProps } from './props'
+import { allowedProps } from './props'
+import { AppNavItemProps } from './Item/props'
+
+import { TruncateList } from '@instructure/ui-truncate-list'
+
+/**
+---
+category: components
+---
+**/
+@withStyle(generateStyle)
+class AppNav extends Component<AppNavProps> {
+  static readonly componentId = 'AppNav'
+
+  static allowedProps = allowedProps
+
+  static defaultProps = {
+    children: null,
+    debounce: 300,
+    margin: '0',
+    renderTruncateLabel: () => 'More',
+    visibleItemsCount: 0
+  }
+
+  static Item = Item
+
+  state = {
+    isMeasuring: false
+  }
+
+  ref: Element | null = null
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  handleRef = (el: Element | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  renderMenu(items: ComponentElement<AppNavItemProps, Item>[]) {
+    return (
+      <Menu
+        trigger={
+          <AppNav.Item
+            renderLabel={callRenderProp(this.props.renderTruncateLabel)}
+          />
+        }
+      >
+        {(items as ComponentElement<AppNavItemProps, Item>[]).map(
+          (item, index) => {
+            return (
+              <Menu.Item
+                href={item.props.href ? item.props.href : undefined}
+                onClick={
+                  item.props.onClick && !item.props.href
+                    ? item.props.onClick
+                    : undefined
+                }
+                key={index}
+              >
+                {callRenderProp(item.props.renderLabel)}
+              </Menu.Item>
+            )
+          }
+        )}
+      </Menu>
+    )
+  }
+
+  render() {
+    const { visibleItemsCount, screenReaderLabel, margin, debounce, styles } =
+      this.props
+
+    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 (
+      <View
+        {...passthroughProps}
+        as="nav"
+        css={[styles?.appNav, hasRenderedContent ? styles?.alignCenter : '']}
+        margin={margin}
+        display={hasRenderedContent ? 'flex' : 'block'}
+        elementRef={this.handleRef}
+        data-cid="AppNav"
+      >
+        {renderBeforeItems && <span>{renderBeforeItems}</span>}
+
+        <TruncateList
+          visibleItemsCount={visibleItemsCount}
+          debounce={debounce}
+          onUpdate={this.props.onUpdate}
+          renderHiddenItemMenu={(hiddenChildren) =>
+            this.renderMenu(
+              hiddenChildren as ComponentElement<AppNavItemProps, Item>[]
+            )
+          }
+          itemSpacing={styles?.horizontalMargin}
+          fixMenuTriggerWidth={styles?.menuTriggerWidth}
+          css={styles?.list}
+          aria-label={callRenderProp(screenReaderLabel)}
+        >
+          {this.props.children}
+        </TruncateList>
+
+        {renderAfterItems && <span>{renderAfterItems}</span>}
+      </View>
+    )
+  }
+}
+
+export { AppNav }
+export default AppNav

package/src/AppNav/v2/props.ts

@@ -0,0 +1,113 @@
+/*
+ * 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 React from 'react'
+
+import type {
+  Spacing,
+  WithStyleProps,
+  ComponentStyle
+} from '@instructure/emotion'
+import type {
+  AppNavTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+import { Renderable } from '@instructure/shared-types'
+
+type AppNavOwnProps = {
+  /**
+   * Screenreader label for the overall navigation
+   */
+  screenReaderLabel: string
+  /**
+   * The rate (in ms) the component responds to container resizing or
+   * an update to one of its child items
+   */
+  debounce?: number
+  /**
+   * Content to display before the navigation items, such as a logo
+   */
+  renderBeforeItems?: Renderable
+  /**
+   * Content to display after the navigation items, aligned to the far end
+   * of the navigation
+   */
+  renderAfterItems?: Renderable
+  /**
+   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
+   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
+   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
+   */
+  margin?: Spacing
+  /**
+   * Provides a reference to the underlying nav element
+   */
+  elementRef?: (element: Element | null) => void
+  /**
+   * Customize the text displayed in the menu trigger when links overflow
+   * the overall nav width.
+   */
+  renderTruncateLabel?: Renderable
+  /**
+   * Called whenever the navigation items are updated or the size of
+   * the navigation changes. Passes in the `visibleItemsCount` as
+   * a parameter.
+   */
+  onUpdate?: (visibleItemsCount: { visibleItemsCount: number }) => void
+  /**
+   * Sets the number of navigation items that are visible.
+   */
+  visibleItemsCount?: number
+  /**
+   * Only accepts `AppNav.Item` as children
+   */
+  children?: React.ReactNode
+}
+
+type PropKeys = keyof AppNavOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type AppNavProps = AppNavOwnProps &
+  WithStyleProps<AppNavTheme, AppNavStyle> &
+  OtherHTMLAttributes<AppNavOwnProps>
+
+type AppNavStyle = ComponentStyle<'appNav' | 'alignCenter' | 'list'> & {
+  horizontalMargin: string
+  menuTriggerWidth: string
+}
+const allowedProps: AllowedPropKeys = [
+  'screenReaderLabel',
+  'children',
+  'debounce',
+  'renderBeforeItems',
+  'renderAfterItems',
+  'margin',
+  'elementRef',
+  'renderTruncateLabel',
+  'onUpdate',
+  'visibleItemsCount'
+]
+
+export type { AppNavProps, AppNavStyle }
+export { allowedProps }

package/src/AppNav/v2/styles.ts

@@ -0,0 +1,62 @@
+/*
+ * 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 type { NewComponentTypes } from '@instructure/ui-themes'
+import type { AppNavStyle } from './props'
+
+/**
+ * ---
+ * 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: NewComponentTypes['AppNav']): AppNavStyle => {
+  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/src/exports/a.ts

@@ -0,0 +1,29 @@
+/*
+ * 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/v1'
+export { Item as AppNavItem } from '../AppNav/v1/Item'
+
+export type { AppNavProps } from '../AppNav/v1/props'
+export type { AppNavItemProps } from '../AppNav/v1/Item/props'