@instructure/ui-top-nav-bar 8.30.1-snapshot-15

package/src/TopNavBar/utils/mapItemsForDrilldown.tsx

@@ -0,0 +1,228 @@
+/*
+ * 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, { Children } from 'react'
+
+import { warn } from '@instructure/console'
+import { generateId } from '@instructure/ui-utils'
+import {
+  matchComponentTypes,
+  generateInstanceCounterMap
+} from '@instructure/ui-react-utils'
+
+import { Drilldown } from '@instructure/ui-drilldown'
+import type {
+  DrilldownPageChild,
+  DrilldownOptionChild,
+  DrilldownOptionProps
+} from '@instructure/ui-drilldown'
+
+import { TopNavBarItem } from '../TopNavBarItem'
+import type { ItemChild, TopNavBarItemProps } from '../TopNavBarItem/props'
+
+type ItemMappedForDrilldownOption = {
+  item: ItemChild
+  optionData: DrilldownOptionProps
+  submenuPages?: DrilldownPageChild[]
+}
+
+type RenderOptionContent = (
+  children: React.ReactNode,
+  itemProps: TopNavBarItemProps
+) => React.ReactNode
+
+const mapItemsForDrilldown = (
+  itemList?: ItemChild | ItemChild[],
+  options: {
+    currentPageId?: string
+    renderOptionContent?: RenderOptionContent
+  } = {}
+) => {
+  const submenus: ItemMappedForDrilldownOption[] = []
+  const { currentPageId, renderOptionContent } = options
+
+  const customPopoverIdMap = generateInstanceCounterMap()
+
+  Children.forEach(itemList, (item) => {
+    if (!item || !matchComponentTypes(item, [TopNavBarItem])) return
+
+    const {
+      renderSubmenu,
+      customPopoverConfig,
+      id,
+      children,
+      status,
+      variant,
+      href,
+      onClick
+    } = item.props
+
+    let submenu: TopNavBarItemProps['renderSubmenu'] = renderSubmenu
+    let customPopover: TopNavBarItemProps['customPopoverConfig'] =
+      customPopoverConfig
+    let customPopoverId: string | undefined
+    let optionSubPageId: string | undefined
+
+    const submenuPages: DrilldownPageChild[] = []
+
+    if (submenu) {
+      if (!matchComponentTypes(submenu, [Drilldown])) {
+        warn(
+          false,
+          `The "renderSubmenu" prop accepts only Drilldown components, but the item with id "${id}" received: "${renderSubmenu}".`
+        )
+
+        submenu = undefined
+      }
+
+      // if still has submenu...
+      if (submenu) {
+        optionSubPageId = submenu.props.rootPageId
+        submenuPages.push(
+          ...(Children.toArray(submenu.props.children) as DrilldownPageChild[])
+        )
+      }
+    }
+
+    if (customPopover) {
+      if (!customPopover.children) {
+        warn(
+          false,
+          `Pass the content of the custom Popover as "customPopoverConfig.children" for the item with id: "${id}".`
+        )
+
+        customPopover = undefined
+      }
+
+      if (submenu) {
+        warn(
+          false,
+          `TopNavBar.Items are not allowed to have both the "renderSubmenu" and "customPopoverConfig" props. For submenus, pass a Drilldown component via the "renderSubmenu" prop, and only use "customPopoverConfig" for custom features. Item with id: "${id}" will ignore the "customPopoverConfig" prop.`
+        )
+
+        customPopover = undefined
+      }
+
+      // if still has customPopover...
+      if (customPopover) {
+        customPopoverId = generateId(
+          `TopNavBarItem__customPopoverOption`,
+          customPopoverIdMap
+        )
+        optionSubPageId = customPopoverId
+        submenuPages.push(
+          <Drilldown.Page id={customPopoverId} key={customPopoverId}>
+            <Drilldown.Option id={`${customPopoverId}__option`}>
+              {customPopover.children}
+            </Drilldown.Option>
+          </Drilldown.Page>
+        )
+      }
+    }
+
+    let ariaCurrent =
+      item.props['aria-current'] || (id === currentPageId ? 'page' : undefined)
+
+    if (ariaCurrent) {
+      if (variant !== 'default') {
+        warn(
+          false,
+          `Only \`variant="default"\` items can be set to current/active, but the item with id "${id}" is "${variant}" variant.`
+        )
+
+        ariaCurrent = undefined
+      }
+
+      if (status === 'disabled') {
+        warn(
+          false,
+          `Disabled items can not be set to current/active, but the item with id "${id}" is disabled.`
+        )
+
+        ariaCurrent = undefined
+      }
+    }
+
+    submenus.push({
+      item,
+      submenuPages,
+      optionData: {
+        id,
+        disabled: status === 'disabled',
+        href,
+        onOptionClick: (event) => {
+          onClick?.(event as any)
+        },
+        children:
+          typeof renderOptionContent === 'function'
+            ? renderOptionContent(children, {
+                ...item.props,
+                status: ariaCurrent === 'page' ? 'active' : item.props.status
+              })
+            : children,
+        subPageId: optionSubPageId,
+        'aria-current': ariaCurrent
+      }
+    })
+  })
+
+  return submenus
+}
+
+const renderMappedItemDrilldownSubpages = (
+  mappedItems: ItemMappedForDrilldownOption[]
+) => {
+  const subPages = mappedItems
+    .map((option) => option.submenuPages)
+    .filter((submenu) => !!submenu) as DrilldownPageChild[][]
+
+  return subPages.flat()
+}
+
+const renderMappedItemsAsDrilldownOptions = (
+  mappedItems: ItemMappedForDrilldownOption[]
+) => {
+  return mappedItems.map<DrilldownOptionChild>((mappedItem) => {
+    const { optionData } = mappedItem
+
+    return (
+      <Drilldown.Option
+        {...optionData}
+        key={optionData.id}
+        afterLabelContentVAlign="center"
+      >
+        {optionData.children}
+      </Drilldown.Option>
+    )
+  })
+}
+
+export default mapItemsForDrilldown
+export {
+  mapItemsForDrilldown,
+  renderMappedItemDrilldownSubpages,
+  renderMappedItemsAsDrilldownOptions
+}
+
+export type { ItemMappedForDrilldownOption, RenderOptionContent }

package/src/index.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.
+ */
+
+export { TopNavBar } from './TopNavBar'
+
+export type { TopNavBarProps, TopNavBarOwnProps } from './TopNavBar/props'
+export type {
+  TopNavBarActionItemsProps,
+  TopNavBarActionItemsOwnProps
+} from './TopNavBar/TopNavBarActionItems/props'
+export type {
+  TopNavBarBrandProps,
+  TopNavBarBrandOwnProps
+} from './TopNavBar/TopNavBarBrand/props'
+export type {
+  TopNavBarItemProps,
+  TopNavBarItemOwnProps,
+  TopNavBarItemTooltipType
+} from './TopNavBar/TopNavBarItem/props'
+export type {
+  TopNavBarLayoutProps,
+  CommonTopNavBarLayoutProps
+} from './TopNavBar/TopNavBarLayout/props'
+export type {
+  TopNavBarDesktopLayoutProps,
+  TopNavBarDesktopLayoutOwnProps,
+  DesktopLayoutOwnProps
+} from './TopNavBar/TopNavBarLayout/DesktopLayout/props'
+export type {
+  TopNavBarSmallViewportLayoutProps,
+  TopNavBarSmallViewportLayoutOwnProps,
+  SmallViewportLayoutOwnProps
+} from './TopNavBar/TopNavBarLayout/SmallViewportLayout/props'
+export type {
+  TopNavBarMenuItemsProps,
+  TopNavBarMenuItemsOwnProps
+} from './TopNavBar/TopNavBarMenuItems/props'
+export type {
+  TopNavBarUserProps,
+  TopNavBarUserOwnProps
+} from './TopNavBar/TopNavBarUser/props'

package/tsconfig.build.json

@@ -0,0 +1,37 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./types",
+    "composite": true
+  },
+  "include": ["src"],
+  "references": [
+    { "path": "../console/tsconfig.build.json" },
+    { "path": "../emotion/tsconfig.build.json" },
+    { "path": "../shared-types/tsconfig.build.json" },
+    { "path": "../ui-a11y-content/tsconfig.build.json" },
+    { "path": "../ui-avatar/tsconfig.build.json" },
+    { "path": "../ui-buttons/tsconfig.build.json" },
+    { "path": "../ui-dialog/tsconfig.build.json" },
+    { "path": "../ui-dom-utils/tsconfig.build.json" },
+    { "path": "../ui-drilldown/tsconfig.build.json" },
+    { "path": "../ui-icons/tsconfig.build.json" },
+    { "path": "../ui-link/tsconfig.build.json" },
+    { "path": "../ui-popover/tsconfig.build.json" },
+    { "path": "../ui-prop-types/tsconfig.build.json" },
+    { "path": "../ui-react-utils/tsconfig.build.json" },
+    { "path": "../ui-responsive/tsconfig.build.json" },
+    { "path": "../ui-testable/tsconfig.build.json" },
+    { "path": "../ui-tooltip/tsconfig.build.json" },
+    { "path": "../ui-tray/tsconfig.build.json" },
+    { "path": "../ui-truncate-list/tsconfig.build.json" },
+    { "path": "../ui-utils/tsconfig.build.json" },
+    { "path": "../ui-view/tsconfig.build.json" },
+    { "path": "../ui-babel-preset/tsconfig.build.json" },
+    { "path": "../ui-color-utils/tsconfig.build.json" },
+    { "path": "../ui-test-locator/tsconfig.build.json" },
+    { "path": "../ui-test-utils/tsconfig.build.json" },
+    { "path": "../ui-themes/tsconfig.build.json" }
+  ]
+}