@instructure/ui-view 8.8.1-snapshot.3 → 8.9.0

package/lib/View/index.js

@@ -31,7 +31,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 var _theme = _interopRequireDefault(require("./theme"));
 
-var _types = require("./types");
+var _props = require("./props");
 
 const _excluded = ["children", "textAlign", "background", "display", "withVisualDebug", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "overflowX", "overflowY", "stacking", "shadow", "position", "focusPosition", "focusColor", "shouldAnimateFocus", "borderColor", "className", "styles", "makeStyles"];
 
@@ -159,7 +159,7 @@ let View = (_dec = (0, _bidirectional.bidirectional)(), _dec2 = (0, _emotion.wit
     }), children);
   }
 
-}, _class2.displayName = "View", _class2.componentId = 'View', _class2.allowedProps = _types.allowedProps, _class2.propTypes = _types.propTypes, _class2.defaultProps = {
+}, _class2.displayName = "View", _class2.componentId = 'View', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   display: 'auto',
   overflowX: 'visible',
   overflowY: 'visible',
@@ -170,13 +170,17 @@ let View = (_dec = (0, _bidirectional.bidirectional)(), _dec2 = (0, _emotion.wit
   focusColor: 'info',
   shouldAnimateFocus: true
 }, _class2.omitViewProps = (props, Component) => {
+  // We don't want the theming and styling props to pass
+  // (these are added and handled by the `@withStyle` decorator)
+  const propsToOmit = [..._class2.allowedProps, 'styles', 'makeStyles', 'themeOverride'];
+
   if (process.env.NODE_ENV !== 'production') {
-    Object.keys((0, _pickProps.pickProps)(props, _class2.allowedProps)).forEach(prop => {
+    Object.keys((0, _pickProps.pickProps)(props, propsToOmit)).forEach(prop => {
       (0, _console.logError)(false, `[${Component.name}] prop '${prop}' is not allowed.`);
     });
   }
 
-  return (0, _omitProps.omitProps)(props, _class2.allowedProps);
+  return (0, _omitProps.omitProps)(props, propsToOmit);
 }, _temp)) || _class) || _class);
 exports.View = View;
 var _default = View;

package/lib/View/{types.js → props.js}

@@ -71,13 +71,11 @@ const propTypes = {
   focusColor: _propTypes.default.oneOf(['info', 'inverse', 'success', 'danger']),
   shouldAnimateFocus: _propTypes.default.bool,
   withVisualDebug: _propTypes.default.bool,
-  makeStyles: _propTypes.default.func,
-  styles: _propTypes.default.object,
   dir: _propTypes.default.oneOf(Object.values(_bidirectional.bidirectional.DIRECTION))
-}; //This variable will be attached as static property on the `View` component
-//so we don't rely on the `PropTypes` validators for our internal logic.
-//This means on prod builds the consuming applications can safely delete propTypes.
+}; // This variable will be attached as static property on the `View` component
+// so we don't rely on the `PropTypes` validators for our internal logic.
+// This means on prod builds the consuming applications can safely delete propTypes.
 
 exports.propTypes = propTypes;
-const allowedProps = ['as', 'background', 'borderColor', 'borderRadius', 'borderWidth', 'cursor', 'dir', 'display', 'elementRef', 'focusColor', 'focusPosition', 'height', 'insetBlockEnd', 'insetBlockStart', 'insetInlineEnd', 'insetInlineStart', 'makeStyles', 'margin', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'overflowX', 'overflowY', 'padding', 'position', 'shadow', 'shouldAnimateFocus', 'stacking', 'styles', 'textAlign', 'width', 'withFocusOutline', 'withVisualDebug'];
+const allowedProps = ['as', 'background', 'borderColor', 'borderRadius', 'borderWidth', 'children', 'cursor', 'dir', 'display', 'elementRef', 'focusColor', 'focusPosition', 'height', 'insetBlockEnd', 'insetBlockStart', 'insetInlineEnd', 'insetInlineStart', 'margin', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'overflowX', 'overflowY', 'padding', 'position', 'shadow', 'shouldAnimateFocus', 'stacking', 'textAlign', 'width', 'withFocusOutline', 'withVisualDebug'];
 exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-view",
-  "version": "8.8.1-snapshot.3+d5d6d4cd8",
+  "version": "8.9.0",
   "description": "A component for basic styles including spacing, sizing, borders, display, positioning, and focus states.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,21 +25,21 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/emotion": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-color-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-dom-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-i18n": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-position": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-prop-types": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-react-utils": "8.8.1-snapshot.3+d5d6d4cd8",
+    "@instructure/console": "8.9.0",
+    "@instructure/emotion": "8.9.0",
+    "@instructure/shared-types": "8.9.0",
+    "@instructure/ui-color-utils": "8.9.0",
+    "@instructure/ui-dom-utils": "8.9.0",
+    "@instructure/ui-i18n": "8.9.0",
+    "@instructure/ui-position": "8.9.0",
+    "@instructure/ui-prop-types": "8.9.0",
+    "@instructure/ui-react-utils": "8.9.0",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/shared-types": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-babel-preset": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-test-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-themes": "8.8.1-snapshot.3+d5d6d4cd8"
+    "@instructure/ui-babel-preset": "8.9.0",
+    "@instructure/ui-test-utils": "8.9.0",
+    "@instructure/ui-themes": "8.9.0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -47,6 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "d5d6d4cd8f300e8635c69248f5d794c002269e08"
+  "sideEffects": false
 }

package/src/ContextView/index.tsx

@@ -24,10 +24,8 @@
 /** @jsx jsx */
 
 import { Component } from 'react'
-import PropTypes from 'prop-types'
 
-import { jsx, withStyle, ThemeablePropTypes } from '@instructure/emotion'
-import { PositionPropTypes } from '@instructure/ui-position'
+import { jsx, withStyle } from '@instructure/emotion'
 import { omitProps } from '@instructure/ui-react-utils'
 import { OtherHTMLAttributes } from '@instructure/shared-types'
 
@@ -35,7 +33,8 @@ import { View } from '../View'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import { ContextViewProps } from './types'
+import { propTypes, allowedProps } from './props'
+import type { ContextViewProps } from './props'
 
 /**
 ---
@@ -48,81 +47,8 @@ class ContextView extends Component<
   ContextViewProps & OtherHTMLAttributes<ContextViewProps>
 > {
   static readonly componentId = 'ContextView'
-
-  static propTypes = {
-    /**
-     * The element to render as the component root
-     */
-    as: PropTypes.elementType,
-
-    /**
-     * provides a reference to the underlying html root element
-     */
-    elementRef: PropTypes.func,
-
-    /**
-     * 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: ThemeablePropTypes.spacing,
-    /**
-     * Valid values are `0`, `none`, `xxx-small`, `xx-small`, `x-small`,
-     * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-     * familiar CSS-like shorthand. For example: `padding="small x-large large"`.
-     */
-    padding: ThemeablePropTypes.spacing,
-
-    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /**
-     * The children to render inside the `<ContextView />`
-     */
-    children: PropTypes.node,
-
-    /**
-     * Designates the text alignment within the `<ContextView />`
-     */
-    textAlign: PropTypes.oneOf(['start', 'center', 'end']),
-
-    /**
-     * Controls the shadow depth for the `<ContextView />`
-     */
-    shadow: ThemeablePropTypes.shadow,
-
-    /**
-     * Controls the z-index depth for the `<ContextView />`
-     */
-    stacking: ThemeablePropTypes.stacking,
-
-    /**
-     * Designates the background style of the `<ContextView />`
-     */
-    background: PropTypes.oneOf(['default', 'inverse']),
-
-    /**
-     * Specifies how the arrow for `<ContextView />` will be rendered.
-     * Ex. `placement="top"` will render with an arrow pointing down.
-     */
-    placement: PositionPropTypes.placement,
-
-    /**
-     * Activate an outline around the component to make building your
-     * layout easier
-     */
-    debug: PropTypes.bool,
-
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object
-  }
-
+  static allowedProps = allowedProps
+  static propTypes = propTypes
   static defaultProps = {
     as: 'span',
     elementRef: () => {},
@@ -133,14 +59,7 @@ class ContextView extends Component<
     textAlign: 'start',
     background: 'default',
     shadow: 'resting',
-    placement: 'center end',
-    margin: undefined,
-    padding: undefined,
-    stacking: undefined,
-    maxWidth: undefined,
-    minWidth: undefined,
-    maxHeight: undefined,
-    minHeight: undefined
+    placement: 'center end'
   }
 
   componentDidMount() {

package/src/ContextView/props.ts

@@ -0,0 +1,156 @@
+/*
+ * 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 { ThemeablePropTypes } from '@instructure/emotion'
+import { PositionPropTypes } from '@instructure/ui-position'
+
+import type { AsElementType, PropValidators } from '@instructure/shared-types'
+import type { PlacementPropValues } from '@instructure/ui-position'
+import type {
+  Shadow,
+  Spacing,
+  Stacking,
+  WithStyleProps
+} from '@instructure/emotion'
+
+type ContextViewOwnProps = {
+  as?: AsElementType
+  elementRef?: (...args: any[]) => any
+  height?: string | number
+  width?: string | number
+  maxHeight?: string | number
+  maxWidth?: string | number
+  minHeight?: string | number
+  minWidth?: string | number
+  children?: React.ReactNode
+  textAlign?: 'start' | 'center' | 'end'
+  background?: 'default' | 'inverse'
+  debug?: boolean
+  margin?: Spacing
+  padding?: Spacing
+  shadow?: Shadow
+  stacking?: Stacking
+  placement?: PlacementPropValues
+}
+
+type PropKeys = keyof ContextViewOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ContextViewProps = ContextViewOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  /**
+   * The element to render as the component root
+   */
+  as: PropTypes.elementType,
+
+  /**
+   * provides a reference to the underlying html root element
+   */
+  elementRef: PropTypes.func,
+
+  /**
+   * 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: ThemeablePropTypes.spacing,
+  /**
+   * Valid values are `0`, `none`, `xxx-small`, `xx-small`, `x-small`,
+   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
+   * familiar CSS-like shorthand. For example: `padding="small x-large large"`.
+   */
+  padding: ThemeablePropTypes.spacing,
+
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * The children to render inside the `<ContextView />`
+   */
+  children: PropTypes.node,
+
+  /**
+   * Designates the text alignment within the `<ContextView />`
+   */
+  textAlign: PropTypes.oneOf(['start', 'center', 'end']),
+
+  /**
+   * Controls the shadow depth for the `<ContextView />`
+   */
+  shadow: ThemeablePropTypes.shadow,
+
+  /**
+   * Controls the z-index depth for the `<ContextView />`
+   */
+  stacking: ThemeablePropTypes.stacking,
+
+  /**
+   * Designates the background style of the `<ContextView />`
+   */
+  background: PropTypes.oneOf(['default', 'inverse']),
+
+  /**
+   * Specifies how the arrow for `<ContextView />` will be rendered.
+   * Ex. `placement="top"` will render with an arrow pointing down.
+   */
+  placement: PositionPropTypes.placement,
+
+  /**
+   * Activate an outline around the component to make building your
+   * layout easier
+   */
+  debug: PropTypes.bool
+}
+
+const allowedProps: AllowedPropKeys = [
+  'as',
+  'elementRef',
+  'margin',
+  'padding',
+  'height',
+  'width',
+  'maxHeight',
+  'maxWidth',
+  'minHeight',
+  'minWidth',
+  'children',
+  'textAlign',
+  'shadow',
+  'stacking',
+  'background',
+  'placement',
+  'debug'
+]
+
+export type { ContextViewProps }
+export { propTypes, allowedProps }

package/src/ContextView/styles.ts

@@ -25,7 +25,7 @@
 import { mirrorPlacement } from '@instructure/ui-position'
 import type { PlacementPropValues } from '@instructure/ui-position'
 import { ContextViewTheme } from '@instructure/shared-types'
-import { ContextViewProps } from './types'
+import { ContextViewProps } from './props'
 
 type PlacementArray = PlacementPropValues[]
 
@@ -279,7 +279,7 @@ const generateStyle = (
   }
 
   const arrowPlacementVariant = getArrowPlacementVariant(
-    placement,
+    placement!,
     background,
     componentTheme
   )
@@ -289,7 +289,7 @@ const generateStyle = (
       label: 'contextView',
       boxSizing: 'border-box',
       minHeight: `calc(${componentTheme?.arrowSize} * 2)`,
-      ...getPlacementStyle(placement, componentTheme)
+      ...getPlacementStyle(placement!, componentTheme)
     },
     contextView__content: {
       label: 'contextView__content',
@@ -302,7 +302,7 @@ const generateStyle = (
       borderWidth: `calc(${componentTheme?.arrowSize} + ${componentTheme?.arrowBorderWidth})`,
       borderColor: arrowBackGroundVariants[background!],
       ...arrowPlacementVariant.main,
-      ...getArrowCorrections(placement, componentTheme),
+      ...getArrowCorrections(placement!, componentTheme),
       '&::after': {
         borderWidth: componentTheme?.arrowSize,
         borderColor: arrowBackGroundVariants[background!],

package/src/View/__examples__/View.examples.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 import { ThemeablePropValues } from '@instructure/emotion'
-import { ViewProps } from '../types'
+import { ViewProps } from '../props'
 
 const { SHADOW_TYPES, BORDER_WIDTHS, BORDER_RADII } = ThemeablePropValues
 

package/src/View/index.tsx

@@ -35,11 +35,13 @@ import {
   passthroughProps
 } from '@instructure/ui-react-utils'
 import { jsx, withStyle } from '@instructure/emotion'
-import { OtherHTMLAttributes } from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import { allowedProps, ViewProps, propTypes } from './types'
+
+import { propTypes, allowedProps } from './props'
+import type { ViewProps } from './props'
 
 /**
 ---
@@ -67,7 +69,7 @@ class View extends Component<ViewProps & OtherHTMLAttributes<ViewProps>> {
     focusPosition: 'offset',
     focusColor: 'info',
     shouldAnimateFocus: true
-  }
+  } as const
 
   // TODO: Remove this code once all components are using passthroughProps in place
   // of omitProps and have removed this function
@@ -89,12 +91,21 @@ class View extends Component<ViewProps & OtherHTMLAttributes<ViewProps>> {
     props: Record<string, any>,
     Component: ComponentType<any>
   ) => {
+    // We don't want the theming and styling props to pass
+    // (these are added and handled by the `@withStyle` decorator)
+    const propsToOmit = [
+      ...View.allowedProps,
+      'styles',
+      'makeStyles',
+      'themeOverride'
+    ]
+
     if (process.env.NODE_ENV !== 'production') {
-      Object.keys(pickProps(props, View.allowedProps)).forEach((prop) => {
+      Object.keys(pickProps(props, propsToOmit)).forEach((prop) => {
         error(false, `[${Component.name}] prop '${prop}' is not allowed.`)
       })
     }
-    return omitProps(props, View.allowedProps)
+    return omitProps(props, propsToOmit)
   }
 
   private spanMarginVerified: boolean
@@ -199,9 +210,11 @@ class View extends Component<ViewProps & OtherHTMLAttributes<ViewProps>> {
 
     return (
       <ElementType
+        //@ts-expect-error TODO: `ref` prop causes: "Expression produces a union type that is too complex to represent.ts(2590)"
         {...passthroughProps(props)}
         className={className}
         css={styles?.view}
+        //@ts-expect-error TODO: null not assignable
         style={styles?.inlineStyles}
         ref={this.handleElementRef}
       >