@khanacademy/wonder-blocks-core 12.1.1 → 12.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-core
 
+## 12.2.0
+
+### Minor Changes
+
+- ed26d66: Enables View to accept all tag names
+
 ## 12.1.1
 
 ### Patch Changes

package/dist/components/view.d.ts

@@ -1,11 +1,10 @@
 import * as React from "react";
 import type { TextViewSharedProps } from "../util/types";
-type ValidViewTags = "div" | "article" | "aside" | "nav" | "section";
 type Props = TextViewSharedProps & {
     /**
      * The HTML tag to render.
      */
-    tag?: ValidViewTags;
+    tag?: keyof JSX.IntrinsicElements;
 };
 /**
  * View is a building block for constructing other components. `View` roughly

package/dist/es/index.js

@@ -1,7 +1,7 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import * as React from 'react';
-import { useId, useEffect as useEffect$1, useContext as useContext$1 } from 'react';
+import { useMemo, useId, useEffect as useEffect$1, useContext as useContext$1 } from 'react';
 import { StyleSheet, css } from 'aphrodite';
 
 function flatten(list) {
@@ -135,11 +135,6 @@ const styles = StyleSheet.create({
     minWidth: 0
   }
 });
-const StyledDiv = addStyle("div", styles.default);
-const StyledArticle = addStyle("article", styles.default);
-const StyledAside = addStyle("aside", styles.default);
-const StyledNav = addStyle("nav", styles.default);
-const StyledSection = addStyle("section", styles.default);
 const View = React.forwardRef(function View(props, ref) {
   const {
       testId,
@@ -149,30 +144,10 @@ const View = React.forwardRef(function View(props, ref) {
   const commonProps = _extends({}, restProps, {
     "data-testid": testId
   });
-  switch (tag) {
-    case "article":
-      return React.createElement(StyledArticle, _extends({}, commonProps, {
-        ref: ref
-      }));
-    case "aside":
-      return React.createElement(StyledAside, _extends({}, commonProps, {
-        ref: ref
-      }));
-    case "nav":
-      return React.createElement(StyledNav, _extends({}, commonProps, {
-        ref: ref
-      }));
-    case "section":
-      return React.createElement(StyledSection, _extends({}, commonProps, {
-        ref: ref
-      }));
-    case "div":
-      return React.createElement(StyledDiv, _extends({}, commonProps, {
-        ref: ref
-      }));
-    default:
-      throw Error(`${tag} is not an allowed value for the 'tag' prop`);
-  }
+  const StyledTag = useMemo(() => addStyle(tag, styles.default), [tag]);
+  return React.createElement(StyledTag, _extends({}, commonProps, {
+    ref: ref
+  }));
 });
 
 let RenderState = function (RenderState) {

package/dist/index.js

@@ -162,11 +162,6 @@ const styles = aphrodite.StyleSheet.create({
     minWidth: 0
   }
 });
-const StyledDiv = addStyle("div", styles.default);
-const StyledArticle = addStyle("article", styles.default);
-const StyledAside = addStyle("aside", styles.default);
-const StyledNav = addStyle("nav", styles.default);
-const StyledSection = addStyle("section", styles.default);
 const View = React__namespace.forwardRef(function View(props, ref) {
   const {
       testId,
@@ -176,30 +171,10 @@ const View = React__namespace.forwardRef(function View(props, ref) {
   const commonProps = _extends__default["default"]({}, restProps, {
     "data-testid": testId
   });
-  switch (tag) {
-    case "article":
-      return React__namespace.createElement(StyledArticle, _extends__default["default"]({}, commonProps, {
-        ref: ref
-      }));
-    case "aside":
-      return React__namespace.createElement(StyledAside, _extends__default["default"]({}, commonProps, {
-        ref: ref
-      }));
-    case "nav":
-      return React__namespace.createElement(StyledNav, _extends__default["default"]({}, commonProps, {
-        ref: ref
-      }));
-    case "section":
-      return React__namespace.createElement(StyledSection, _extends__default["default"]({}, commonProps, {
-        ref: ref
-      }));
-    case "div":
-      return React__namespace.createElement(StyledDiv, _extends__default["default"]({}, commonProps, {
-        ref: ref
-      }));
-    default:
-      throw Error(`${tag} is not an allowed value for the 'tag' prop`);
-  }
+  const StyledTag = React.useMemo(() => addStyle(tag, styles.default), [tag]);
+  return React__namespace.createElement(StyledTag, _extends__default["default"]({}, commonProps, {
+    ref: ref
+  }));
 });
 
 let RenderState = function (RenderState) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "12.1.1",
+  "version": "12.2.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -21,7 +21,7 @@
   },
   "devDependencies": {
     "@khanacademy/wb-dev-build-settings": "2.1.1",
-    "@khanacademy/wonder-blocks-testing-core": "2.1.1"
+    "@khanacademy/wonder-blocks-testing-core": "2.2.0"
   },
   "author": "",
   "license": "MIT",