microsoft · layershifter · Jul 14, 2020 · Jul 8, 2020
@@ -5,8 +5,7 @@
   "author": "Oleksandr Fediashov <a@fedyashov.com>",
   "bugs": "https://github.com/microsoft/fluentui/issues",
   "dependencies": {
-    "@babel/runtime": "^7.10.4",
-    "prop-types": "^15.7.2"
+    "@babel/runtime": "^7.10.4"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "^0.51.0",

@@ -1,28 +1,12 @@
-import * as PropTypes from 'prop-types';
-
 import { useEventListener } from './useEventListener';
-import { EventListenerOptions, EventTypes, Target, TargetRef } from './types';
+import { EventListenerOptions, EventTypes } from './types';
 
 export function EventListener<T extends EventTypes>(props: EventListenerOptions<T>) {
   useEventListener(props);
 
   return null;
 }
 
-EventListener.displayName = 'EventListener';
-// TODO: use Babel plugin for this
-EventListener.propTypes =
-  process.env.NODE_ENV !== 'production'
-    ? {
-        capture: PropTypes.bool,
-        listener: PropTypes.func.isRequired,
-        target: PropTypes.object as PropTypes.Validator<Target>,
-        targetRef: PropTypes.shape({
-          current: PropTypes.object,
-        }) as PropTypes.Validator<TargetRef>,
-        type: PropTypes.string.isRequired as PropTypes.Validator<EventTypes>,
-      }
-    : {};
 EventListener.defaultProps = {
   capture: false,
 };
@@ -6,7 +6,6 @@
   "bugs": "https://github.com/microsoft/fluentui/issues",
   "dependencies": {
     "@babel/runtime": "^7.10.4",
-    "prop-types": "^15.7.2",
     "react-is": "^16.6.3"
   },
   "devDependencies": {

@@ -1,10 +1,9 @@
-import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import * as ReactIs from 'react-is';
 
 import { RefFindNode } from './RefFindNode';
 import { RefForward } from './RefForward';
-import { RefProps, refPropType } from './types';
+import { RefProps } from './utils';
 
 export const Ref: React.FunctionComponent<RefProps> = props => {
   const { children, innerRef, ...rest } = props;
@@ -15,12 +14,3 @@ export const Ref: React.FunctionComponent<RefProps> = props => {
 
   return <ElementType innerRef={innerRef}>{childWithProps}</ElementType>;
 };
-
-Ref.displayName = 'Ref';
-// TODO: use Babel plugin for this
-if (process.env.NODE_ENV !== 'production') {
-  Ref.propTypes = {
-    children: PropTypes.element.isRequired,
-    innerRef: refPropType.isRequired,
-  };
-}
@@ -1,22 +1,9 @@
-import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-import { handleRef } from './handleRef';
-import { RefProps, refPropType } from './types';
+import { handleRef, RefProps } from './utils';
 
 export class RefFindNode extends React.Component<RefProps> {
-  static displayName = 'RefFindNode';
-
-  // TODO: use Babel plugin for this
-  static propTypes =
-    process.env.NODE_ENV !== 'production'
-      ? {
-          children: PropTypes.element.isRequired,
-          innerRef: refPropType.isRequired,
-        }
-      : {};
-
   prevNode: Node | null = null;
 
   componentDidMount() {

@@ -1,21 +1,7 @@
-import * as PropTypes from 'prop-types';
 import * as React from 'react';
-
-import { handleRef } from './handleRef';
-import { RefProps, refPropType } from './types';
+import { handleRef, RefProps } from './utils';
 
 export class RefForward extends React.Component<RefProps> {
-  static displayName = 'RefForward';
-
-  // TODO: use Babel plugin for this
-  static propTypes =
-    process.env.NODE_ENV !== 'production'
-      ? {
-          children: PropTypes.element.isRequired,
-          innerRef: refPropType.isRequired,
-        }
-      : {};
-
   currentNode: Node | null = null;
 
   handleRefOverride = (node: HTMLElement) => {

@@ -1,8 +1,5 @@
-export { handleRef } from './handleRef';
-export { isRefObject } from './isRefObject';
-
 export { Ref } from './Ref';
 export { RefFindNode } from './RefFindNode';
 export { RefForward } from './RefForward';
 
-export * from './types';
+export * from './utils';
@@ -1,5 +1,16 @@
 import * as React from 'react';
 
+export interface RefProps {
+  children: React.ReactElement;
+
+  /**
+   * Called when a child component will be mounted or updated.
+   *
+   * @param node - Referred node.
+   */
+  innerRef: React.Ref<HTMLElement>;
+}
+
 /**
  * The function that correctly handles passing refs.
  *
@@ -26,3 +37,8 @@ export const handleRef = <N>(ref: React.Ref<N> | undefined, node: N) => {
     (ref as React.MutableRefObject<N>).current = node;
   }
 };
+
+/** Checks that the passed object is a valid React ref object. */
+export const isRefObject = (ref: any): ref is React.RefObject<any> =>
+  // https://github.com/facebook/react/blob/v16.8.2/packages/react-reconciler/src/ReactFiberCommitWork.js#L665
+  ref !== null && typeof ref === 'object' && ref.hasOwnProperty('current');
@@ -1,5 +1,46 @@
+import { ComponentSlotStyle, ComponentVariablesInput } from '@fluentui/styles';
+import { ComponentDesignProp } from '@fluentui/react-bindings';
 import * as customPropTypes from '@fluentui/react-proptypes';
 import * as PropTypes from 'prop-types';
+import * as React from 'react';
+
+import { ReactChildren } from '../types';
+
+export interface StyledComponentProps<P = any, V = any> {
+  /** Additional CSS styles to apply to the component instance.  */
+  styles?: ComponentSlotStyle<P, V>;
+
+  /** Override for theme site variables to allow modifications of component styling via themes. */
+  variables?: ComponentVariablesInput;
+}
+
+export interface UIComponentProps<P = any, V = any> extends StyledComponentProps<P, V> {
+  /** Additional CSS class name(s) to apply.  */
+  className?: string;
+  design?: ComponentDesignProp;
+}
+
+export type SizeValue = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
+
+export type AlignValue = 'start' | 'end' | 'center' | 'justify';
+
+export interface ColorComponentProps<TColor = string> {
+  /** A component can have a color. */
+  color?: TColor;
+}
+
+export interface ContentComponentProps<TContent = React.ReactNode> {
+  /** Shorthand for primary content. */
+  content?: TContent;
+}
+
+export interface ChildrenComponentProps<TChildren = ReactChildren> {
+  /**
+   *  Content for childrenApi
+   *  @docSiteIgnore
+   */
+  children?: TChildren;
+}
 
 export interface CreateCommonConfig {
   accessibility?: boolean;
@@ -11,39 +52,41 @@ export interface CreateCommonConfig {
   styled?: boolean;
 }
 
-export const createCommon = (config: CreateCommonConfig = {}) => {
-  const {
-    accessibility = true,
-    as = true,
-    children = 'node',
-    className = true,
-    color = false,
-    content = 'node',
-    styled = true,
-  } = config;
-  return {
-    ...(accessibility && {
-      accessibility: customPropTypes.accessibility,
-    }),
-    ...(as && {
-      as: PropTypes.elementType,
-    }),
-    ...(children && {
-      children: children === 'element' ? PropTypes.element : PropTypes.node,
-    }),
-    ...(className && {
-      className: PropTypes.string,
-    }),
-    ...(color && {
-      color: PropTypes.string,
-    }),
-    ...(content && {
-      content: content === 'shorthand' ? customPropTypes.itemShorthand : customPropTypes.nodeContent,
-    }),
-    ...(styled && {
-      styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-      variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-      design: customPropTypes.design,
-    }),
-  };
+export const commonPropTypes = {
+  createCommon: (config: CreateCommonConfig = {}) => {
+    const {
+      accessibility = true,
+      as = true,
+      children = 'node',
+      className = true,
+      color = false,
+      content = 'node',
+      styled = true,
+    } = config;
+    return {
+      ...(accessibility && {
+        accessibility: customPropTypes.accessibility,
+      }),
+      ...(as && {
+        as: PropTypes.elementType,
+      }),
+      ...(children && {
+        children: children === 'element' ? PropTypes.element : PropTypes.node,
+      }),
+      ...(className && {
+        className: PropTypes.string,
+      }),
+      ...(color && {
+        color: PropTypes.string,
+      }),
+      ...(content && {
+        content: content === 'shorthand' ? customPropTypes.itemShorthand : customPropTypes.nodeContent,
+      }),
+      ...(styled && {
+        styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+        variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+        design: customPropTypes.design,
+      }),
+    };
+  },
 };
@@ -19,12 +19,5 @@ export { createComponent } from './createComponent';
 export { getKindProp } from './getKindProp';
 export * from './whatInput';
 
-export * from './commonPropInterfaces';
 export { screenReaderContainerStyles } from './accessibility/Styles/accessibilityStyles';
-// work around api-extractor limitation
-import { CreateCommonConfig as CreateCommonConfigLocal, createCommon as createCommonLocal } from './commonPropTypes';
-
-export module commonPropTypes {
-  export type CreateCommonConfig = CreateCommonConfigLocal;
-  export const createCommon = createCommonLocal;
-}
+export * from './commonPropTypes';
@@ -10,14 +10,6 @@ import { isBrowser } from './isBrowser';
 // last used input type
 let currentInput = 'initial';
 
-// check for sessionStorage support
-// then check for session variables and use if available
-try {
-  if (window.sessionStorage.getItem('what-input')) {
-    currentInput = window.sessionStorage.getItem('what-input');
-  }
-} catch (e) {}
-
 // event buffer timer
 let eventTimer = null;
 
@@ -130,11 +122,6 @@ const setInput = event => {
 
     if (currentInput !== value && shouldUpdate) {
       currentInput = value;
-
-      try {
-        window.sessionStorage.setItem('what-input', currentInput);
-      } catch (e) {}
-
       doUpdate(event.view.document);
     }
   }

@@ -38,6 +38,17 @@ module.exports = api => {
     '@babel/plugin-syntax-dynamic-import',
     ['@babel/plugin-transform-runtime', { useESModules }],
 
+    useESModules && 'babel-plugin-iife-wrap-react-components',
+    useESModules && [
+      'babel-plugin-annotate-pure-imports',
+      {
+        imports: {
+          '@fluentui/react-bindings': 'compose',
+          '@fluentui/react-context-selector': 'createContext',
+          '../utils/createSvgIcon': ['createSvgIcon'],
+        },
+      },
+    ],
     isDistBundle && 'lodash',
   ].filter(Boolean);
 

@@ -61,7 +61,9 @@
     "autoprefixer": "^9.7.6",
     "babel-jest": "^24.5.0",
     "babel-loader": "^8.0.6",
+    "babel-plugin-annotate-pure-imports": "^1.0.0-1",
     "babel-plugin-lodash": "^3.3.4",
+    "babel-plugin-iife-wrap-react-components": "^1.0.0-5",
     "beachball": "^1.31.2",
     "chalk": "^2.1.0",
     "circular-dependency-plugin": "^5.0.2",