@khanacademy/wonder-blocks-core 12.1.0 → 12.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/wonder-blocks-core
 
+## 12.2.0
+
+### Minor Changes
+
+- ed26d66: Enables View to accept all tag names
+
+## 12.1.1
+
+### Patch Changes
+
+- ee8d95a: Rollback rollup version from v4 to v2 to prevent an issue with CJS builds in unit tests
+
 ## 12.1.0
 
 ### Minor 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

@@ -1,11 +1,16 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _extends = require('@babel/runtime/helpers/extends');
 var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
 var React = require('react');
 var aphrodite = require('aphrodite');
 
-function _interopNamespaceDefault(e) {
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
     var n = Object.create(null);
     if (e) {
         Object.keys(e).forEach(function (k) {
@@ -18,11 +23,13 @@ function _interopNamespaceDefault(e) {
             }
         });
     }
-    n.default = e;
+    n["default"] = e;
     return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 function flatten(list) {
   const result = [];
@@ -95,11 +102,11 @@ const Text = React__namespace.forwardRef(function Text(_ref, ref) {
       tag: Tag = "span",
       testId
     } = _ref,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$2);
   const isHeader = isHeaderRegex.test(Tag);
   const styleAttributes = processStyleList([styles$1.text, isHeader && styles$1.header, style]);
   const classNames = otherProps.className ? [otherProps.className, styleAttributes.className].join(" ") : styleAttributes.className;
-  return (React__namespace.createElement(Tag, _extends({}, otherProps, {
+  return (React__namespace.createElement(Tag, _extends__default["default"]({}, otherProps, {
       style: styleAttributes.style,
       className: classNames,
       "data-testid": testId,
@@ -116,13 +123,13 @@ function addStyle(Component, defaultStyle) {
         className,
         style
       } = _ref,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+      otherProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$1);
     const reset = typeof Component === "string" ? overrides[Component] : null;
     const {
       className: aphroditeClassName,
       style: inlineStyles
     } = processStyleList([reset, defaultStyle, style]);
-    return React__namespace.createElement(Component, _extends({}, otherProps, {
+    return React__namespace.createElement(Component, _extends__default["default"]({}, otherProps, {
       ref: ref,
       className: [aphroditeClassName, className].filter(Boolean).join(" "),
       style: inlineStyles
@@ -155,44 +162,19 @@ 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,
       tag = "div"
     } = props,
-    restProps = _objectWithoutPropertiesLoose(props, _excluded);
-  const commonProps = _extends({}, restProps, {
+    restProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
+  const commonProps = _extends__default["default"]({}, restProps, {
     "data-testid": testId
   });
-  switch (tag) {
-    case "article":
-      return React__namespace.createElement(StyledArticle, _extends({}, commonProps, {
-        ref: ref
-      }));
-    case "aside":
-      return React__namespace.createElement(StyledAside, _extends({}, commonProps, {
-        ref: ref
-      }));
-    case "nav":
-      return React__namespace.createElement(StyledNav, _extends({}, commonProps, {
-        ref: ref
-      }));
-    case "section":
-      return React__namespace.createElement(StyledSection, _extends({}, commonProps, {
-        ref: ref
-      }));
-    case "div":
-      return React__namespace.createElement(StyledDiv, _extends({}, 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.0",
+  "version": "12.2.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -20,8 +20,8 @@
     "react-router-dom": "5.3.4"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "2.1.0",
-    "@khanacademy/wonder-blocks-testing-core": "2.1.0"
+    "@khanacademy/wb-dev-build-settings": "2.1.1",
+    "@khanacademy/wonder-blocks-testing-core": "2.2.0"
   },
   "author": "",
   "license": "MIT",