@instructure/ui-navigation 8.8.1-snapshot.8 → 8.9.1

package/src/Navigation/NavigationItem/props.ts

@@ -0,0 +1,87 @@
+/*
+ * 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 PropTypes from 'prop-types'
+
+import type { AsElementType, PropValidators } from '@instructure/shared-types'
+import type { WithStyleProps } from '@instructure/emotion'
+
+type NavigationItemOwnProps = {
+  icon: React.ReactNode
+  label: React.ReactNode
+  as?: AsElementType
+  href?: string
+  onClick?: (...args: any[]) => any
+  selected?: boolean
+  minimized?: boolean
+}
+
+type PropKeys = keyof NavigationItemOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type NavigationItemProps = NavigationItemOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  /**
+   * The visual to display (ex. an Image, Logo, Avatar, or Icon)
+   */
+  icon: PropTypes.node.isRequired,
+  /**
+   * The text to display  for the Navigation Link
+   */
+  label: PropTypes.node.isRequired,
+  /**
+   * The element type to render as (will default to `<a>` if href is provided)
+   */
+  as: PropTypes.elementType,
+  /**
+   * If the NavigationItem goes to a new page, pass an href
+   */
+  href: PropTypes.string,
+  /**
+   * If the NavigationItem does not go to a new page pass an onClick
+   */
+  onClick: PropTypes.func,
+  /**
+   * Denotes which NavigationItem is currently selected
+   */
+  selected: PropTypes.bool,
+  /**
+   * When minimized is set to true, the `<Navigation />` shows icons only while the text becomes a tooltip. When it is set to false, the `<Navigation />` shows text in addition to the icons
+   */
+  minimized: PropTypes.bool
+}
+
+const allowedProps: AllowedPropKeys = [
+  'icon',
+  'label',
+  'as',
+  'href',
+  'onClick',
+  'selected',
+  'minimized'
+]
+
+export type { NavigationItemProps }
+export { propTypes, allowedProps }

package/src/Navigation/NavigationItem/styles.ts

@@ -23,7 +23,7 @@
  */
 
 import { NavigationItemTheme } from '@instructure/shared-types'
-import { NavigationItemProps } from './types'
+import { NavigationItemProps } from './props'
 
 /**
  * ---

package/src/Navigation/index.tsx

@@ -23,13 +23,9 @@
  */
 /** @jsx jsx */
 import { Component, Children, ReactElement } from 'react'
-import PropTypes from 'prop-types'
 
 import { testable } from '@instructure/ui-testable'
-import {
-  controllable,
-  Children as ChildrenPropTypes
-} from '@instructure/ui-prop-types'
+
 import { omitProps, safeCloneElement } from '@instructure/ui-react-utils'
 import { IconMoveStartLine } from '@instructure/ui-icons'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
@@ -39,7 +35,8 @@ import { NavigationItem } from './NavigationItem'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import { NavigationProps, NavigationState } from './types'
+import type { NavigationProps, NavigationState } from './props'
+import { allowedProps, propTypes } from './props'
 
 // @ts-expect-error ts-migrate(7031) FIXME: Binding element 'minimized' implicitly has an 'any... Remove this comment to see the full error message
 const navMinimized = ({ minimized }) => ({ minimized: !minimized })
@@ -54,44 +51,8 @@ category: components
 class Navigation extends Component<NavigationProps, NavigationState> {
   static readonly componentId = 'Navigation'
 
-  static propTypes = {
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object,
-    /**
-     * children of type Navigation.Item
-     */
-    children: ChildrenPropTypes.oneOf([NavigationItem]),
-    /**
-     * When minimized is set to true, the `<Navigation />` shows icons only while the text becomes a tooltip. When it is set to false, the `<Navigation />` shows text in addition to the icons
-     */
-    minimized: controllable(PropTypes.bool, 'onMinimized', 'defaultMinimized'),
-    /**
-     * Whether the `<Navigation />` is initially minimized (uncontrolled)
-     */
-    defaultMinimized: PropTypes.bool,
-    onMinimized: PropTypes.func,
-    /**
-     * Screen reader label for the main Navigation
-     */
-    label: PropTypes.string.isRequired,
-    /**
-     * Screen reader label for the toggle button expanded/minimized state
-     */
-    toggleLabel: PropTypes.shape({
-      expandedLabel: PropTypes.string,
-      minimizedLabel: PropTypes.string
-    }).isRequired,
-    /**
-     * If the `<Navigation.Item>` goes to a new page, pass an href
-     */
-    href: PropTypes.string,
-    /**
-     * If the `<Navigation.Item>` does not go to a new page pass an onClick
-     */
-    onClick: PropTypes.func
-  }
+  static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static defaultProps = {
     children: null,
@@ -99,9 +60,7 @@ class Navigation extends Component<NavigationProps, NavigationState> {
     // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
     onMinimized: function (event, minimized) {},
     // @ts-expect-error ts-migrate(6133) FIXME: 'e' is declared but its value is never read.
-    onClick: function (e) {},
-    href: undefined,
-    minimized: undefined
+    onClick: function (e) {}
   }
 
   static Item = NavigationItem
@@ -119,13 +78,11 @@ class Navigation extends Component<NavigationProps, NavigationState> {
   }
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles({ minimized: this.minimized })
+    this.props.makeStyles?.({ minimized: this.minimized })
   }
 
   componentDidUpdate() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles({ minimized: this.minimized })
+    this.props.makeStyles?.({ minimized: this.minimized })
   }
 
   get minimized() {
@@ -154,7 +111,7 @@ class Navigation extends Component<NavigationProps, NavigationState> {
       const navItem = safeCloneElement(child as ReactElement, {
         minimized: this.state.minimized
       })
-      return <li css={this.props.styles.list}>{navItem}</li>
+      return <li css={this.props.styles?.list}>{navItem}</li>
     })
   }
 
@@ -170,15 +127,15 @@ class Navigation extends Component<NavigationProps, NavigationState> {
     const props = omitProps(this.props, Navigation.propTypes, ['minimized'])
 
     return (
-      <nav {...props} css={this.props.styles.navigation} aria-label={label}>
-        <ul css={this.props.styles.content}>{this.renderChildren()}</ul>
-        <div css={this.props.styles.toggle}>
+      <nav {...props} css={this.props.styles?.navigation} aria-label={label}>
+        <ul css={this.props.styles?.content}>{this.renderChildren()}</ul>
+        <div css={this.props.styles?.toggle}>
           <NavigationItem
             aria-expanded={!this.minimized}
             onClick={this.handleNavToggle}
             icon={
               <IconMoveStartLine
-                css={this.props.styles.toggleIcon}
+                css={this.props.styles?.toggleIcon}
                 inline={false}
               />
             }

package/src/Navigation/props.ts

@@ -0,0 +1,108 @@
+/*
+ * 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 PropTypes from 'prop-types'
+
+import {
+  controllable,
+  Children as ChildrenPropTypes
+} from '@instructure/ui-prop-types'
+
+import { NavigationItem } from './NavigationItem'
+
+import type { PropValidators } from '@instructure/shared-types'
+import type { WithStyleProps } from '@instructure/emotion'
+
+type NavigationOwnProps = {
+  minimized?: any // TODO: controllable(PropTypes.bool, 'onMinimized', 'defaultMinimized')
+  defaultMinimized?: boolean
+  onMinimized?: (...args: any[]) => any
+  label: string
+  toggleLabel: {
+    expandedLabel?: string
+    minimizedLabel?: string
+  }
+  href?: string
+  onClick?: (...args: any[]) => any
+  children?: React.ReactNode
+}
+
+type NavigationState = {
+  minimized: boolean
+}
+
+type PropKeys = keyof NavigationOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type NavigationProps = NavigationOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  /**
+   * children of type Navigation.Item
+   */
+  children: ChildrenPropTypes.oneOf([NavigationItem]),
+  /**
+   * When minimized is set to true, the `<Navigation />` shows icons only while the text becomes a tooltip. When it is set to false, the `<Navigation />` shows text in addition to the icons
+   */
+  minimized: controllable(PropTypes.bool, 'onMinimized', 'defaultMinimized'),
+  /**
+   * Whether the `<Navigation />` is initially minimized (uncontrolled)
+   */
+  defaultMinimized: PropTypes.bool,
+  onMinimized: PropTypes.func,
+  /**
+   * Screen reader label for the main Navigation
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Screen reader label for the toggle button expanded/minimized state
+   */
+  toggleLabel: PropTypes.shape({
+    expandedLabel: PropTypes.string,
+    minimizedLabel: PropTypes.string
+  }).isRequired,
+  /**
+   * If the `<Navigation.Item>` goes to a new page, pass an href
+   */
+  href: PropTypes.string,
+  /**
+   * If the `<Navigation.Item>` does not go to a new page pass an onClick
+   */
+  onClick: PropTypes.func
+}
+
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'minimized',
+  'defaultMinimized',
+  'onMinimized',
+  'label',
+  'toggleLabel',
+  'href',
+  'onClick'
+]
+
+export type { NavigationProps, NavigationState }
+export { propTypes, allowedProps }

package/src/Navigation/styles.ts

@@ -23,7 +23,7 @@
  */
 
 import { NavigationTheme } from '@instructure/shared-types'
-import { NavigationProps, NavigationState } from './types'
+import { NavigationProps, NavigationState } from './props'
 
 /**
  * ---

package/src/index.ts

@@ -25,7 +25,7 @@
 export { AppNav } from './AppNav'
 export { Navigation, NavigationItem } from './Navigation'
 
-export type { AppNavProps } from './AppNav/types'
-export type { AppNavItemProps } from './AppNav/Item/types'
-export type { NavigationProps } from './Navigation/types'
-export type { NavigationItemProps } from './Navigation/NavigationItem/types'
+export type { AppNavProps } from './AppNav/props'
+export type { AppNavItemProps } from './AppNav/Item/props'
+export type { NavigationProps } from './Navigation/props'
+export type { NavigationItemProps } from './Navigation/NavigationItem/props'

package/types/AppNav/Item/index.d.ts

@@ -1,8 +1,7 @@
 /** @jsx jsx */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { jsx } from '@instructure/emotion';
-import { AppNavItemProps } from './types';
+import type { AppNavItemProps } from './props';
 /**
 ---
 parent: AppNav
@@ -12,61 +11,34 @@ id: AppNav.Item
 **/
 declare class Item extends Component<AppNavItemProps> {
     static readonly componentId = "AppNav.Item";
-    static propTypes: {
-        makeStyles: PropTypes.Requireable<(...args: any[]) => any>;
-        styles: PropTypes.Requireable<object>;
-        /**
-         * The text to display. If the `icon` prop is used, label text must be wrapped
-         * in `ScreenReaderContent`.
-         */
-        renderLabel: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        /**
-         * Content to display after the renderLabel text, such as a badge
-         */
-        renderAfter: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        /**
-         * The visual to display (ex. an Image, Logo, Avatar, or Icon)
-         */
-        renderIcon: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        /**
-         * If the item goes to a new page, pass an href
-         */
-        href: PropTypes.Requireable<string>;
-        /**
-         * If the item does not go to a new page, pass an onClick
-         */
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Denotes which item is currently selected
-         */
-        isSelected: PropTypes.Requireable<boolean>;
-        /**
-         * provides a reference to the underlying focusable (`button` or `a`) element
-         */
-        elementRef: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * The element type to render as (will default to `<a>` if href is provided)
-         */
-        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        /**
-         * Specify the mouse cursor to use on :hover.
-         * The `pointer` cursor is used by default.
-         */
-        cursor: PropTypes.Requireable<string>;
-        /**
-         * Disables the link or button visually and functionally
-         */
-        isDisabled: PropTypes.Requireable<boolean>;
-    };
+    static allowedProps: readonly (keyof {
+        renderLabel: import("react").ReactNode | ((...args: any[]) => any);
+        renderAfter?: import("react").ReactNode | ((...args: any[]) => any);
+        renderIcon?: import("react").ReactNode | ((...args: any[]) => any);
+        href?: string | undefined;
+        onClick?: ((...args: any[]) => any) | undefined;
+        isSelected?: boolean | undefined;
+        elementRef?: ((...args: any[]) => any) | undefined;
+        as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
+        cursor?: string | undefined;
+        isDisabled?: boolean | undefined;
+    })[];
+    static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
+        renderLabel: import("react").ReactNode | ((...args: any[]) => any);
+        renderAfter?: import("react").ReactNode | ((...args: any[]) => any);
+        renderIcon?: import("react").ReactNode | ((...args: any[]) => any);
+        href?: string | undefined;
+        onClick?: ((...args: any[]) => any) | undefined;
+        isSelected?: boolean | undefined;
+        elementRef?: ((...args: any[]) => any) | undefined;
+        as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
+        cursor?: string | undefined;
+        isDisabled?: boolean | undefined;
+    }>;
     static defaultProps: {
         children: null;
         onClick: (event: any) => void;
         isSelected: boolean;
-        href: undefined;
-        elementRef: undefined;
-        renderIcon: undefined;
-        renderAfter: undefined;
-        as: undefined;
         cursor: string;
         isDisabled: boolean;
     };