Adding getNativeElementProps (microsoft#13272)

* Exporting a getNativeElementProps function.

* Change files

* update api.

* pr feedback.

* fixing lint

change/@uifabric-utilities-2020-05-21-12-59-12-feat-getNativeElementProps.json

@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Adding `getNativeElementProps` helper which takes the element tag name in + props and filters out unrecognized props.",
+  "packageName": "@uifabric/utilities",
+  "email": "dzearing@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-05-21T19:59:12.182Z"
+}

packages/utilities/etc/utilities.api.md

@@ -333,6 +333,9 @@ export function getLastFocusable(rootElement: HTMLElement, currentElement: HTMLE
 // @public
 export function getLastTabbable(rootElement: HTMLElement, currentElement: HTMLElement, includeElementsInFocusZones?: boolean, checkNode?: boolean): HTMLElement | null;
 
+// @public
+export function getNativeElementProps<TAttributes extends React.HTMLAttributes<any>>(tagName: keyof React.ReactHTML, props: {}, excludedPropNames?: string[]): TAttributes;
+
 // @public
 export function getNativeProps<T>(props: {}, allowedPropNames: string[], excludedPropNames?: string[]): T;
 

packages/utilities/src/getNativeElementProps.test.ts

@@ -0,0 +1,9 @@
+import { getNativeElementProps } from './getNativeElementProps';
+
+describe('getNativeElementProps', () => {
+  it('can filter native element properties', () => {
+    expect(getNativeElementProps('div', { id: '123', checked: true })).toEqual({ id: '123' });
+    expect(getNativeElementProps('input', { id: '123', checked: true })).toEqual({ id: '123', checked: true });
+    expect(getNativeElementProps('input', { id: '123', checked: true }, ['id'])).toEqual({ checked: true });
+  });
+});

packages/utilities/src/getNativeElementProps.ts

@@ -0,0 +1,66 @@
+import {
+  labelProperties,
+  audioProperties,
+  videoProperties,
+  olProperties,
+  liProperties,
+  anchorProperties,
+  buttonProperties,
+  inputProperties,
+  textAreaProperties,
+  selectProperties,
+  optionProperties,
+  tableProperties,
+  trProperties,
+  thProperties,
+  tdProperties,
+  colGroupProperties,
+  colProperties,
+  formProperties,
+  iframeProperties,
+  imgProperties,
+  htmlElementProperties,
+  getNativeProps,
+} from './properties';
+import * as React from 'react';
+
+const nativeElementMap: Record<string, string[]> = {
+  label: labelProperties,
+  audio: audioProperties,
+  video: videoProperties,
+  ol: olProperties,
+  li: liProperties,
+  a: anchorProperties,
+  button: buttonProperties,
+  input: inputProperties,
+  textarea: textAreaProperties,
+  select: selectProperties,
+  option: optionProperties,
+  table: tableProperties,
+  tr: trProperties,
+  th: thProperties,
+  td: tdProperties,
+  colGroup: colGroupProperties,
+  col: colProperties,
+  form: formProperties,
+  iframe: iframeProperties,
+  img: imgProperties,
+};
+
+/**
+ * Given an element tagname and user props, filters the props to only allowed props for the given
+ * element type.
+ * @param tagName - Tag name (e.g. "div")
+ * @param props - Props object
+ * @param excludedPropNames - List of props to disallow
+ */
+// tslint:disable-next-line:no-any
+export function getNativeElementProps<TAttributes extends React.HTMLAttributes<any>>(
+  tagName: keyof React.ReactHTML,
+  props: {},
+  excludedPropNames?: string[],
+): TAttributes {
+  const allowedPropNames = (tagName && nativeElementMap[tagName]) || htmlElementProperties;
+
+  return getNativeProps(props, allowedPropNames, excludedPropNames);
+}

packages/utilities/src/index.ts

@@ -39,6 +39,7 @@ export * from './dom';
 export * from './extendComponent';
 export * from './focus';
 export * from './getId';
+export * from './getNativeElementProps';
 export * from './hoist';
 export * from './hoistStatics';
 export * from './initializeComponentRef';