@react-md/typography - npm Package Compare versions

Comparing version 2.0.0-alpha.15 to 2.0.0-beta.0

es/SrOnly.js

@@ -33,3 +33,3 @@ var __assign = (this && this.__assign) || function () {
  */
-function SrOnly(_a, ref) {
+var SrOnly = forwardRef(function SrOnly(_a, ref) {
     var className = _a.className, children = _a.children, _b = _a.focusable, focusable = _b === void 0 ? false : _b, propTabIndex = _a.tabIndex, _c = _a.component, component = _c === void 0 ? "span" : _c, props = __rest(_a, ["className", "children", "focusable", "tabIndex", "component"]);
@@ -41,8 +41,10 @@ var tabIndex = propTabIndex;
     return (React.createElement(Text, __assign({}, props, { ref: ref, tabIndex: tabIndex, component: component, className: cn(block({ focusable: focusable }), className) }), children));
-}
-var ForwardedSrOnly = forwardRef(SrOnly);
+});
 if (process.env.NODE_ENV !== "production") {
     try {
         var PropTypes = require("prop-types");
-        ForwardedSrOnly.propTypes = {
+        SrOnly.propTypes = {
+            className: PropTypes.string,
+            children: PropTypes.node,
+            tabIndex: PropTypes.number,
             focusable: PropTypes.bool,
@@ -58,3 +60,3 @@ component: PropTypes.oneOfType([
 }
-export default ForwardedSrOnly;
+export default SrOnly;
 //# sourceMappingURL=SrOnly.js.map

es/Text.js

@@ -83,3 +83,3 @@ var __assign = (this && this.__assign) || function () {
  */
-function Text(_a, ref) {
+var Text = forwardRef(function Text(_a, ref) {
     var _b;
@@ -105,8 +105,7 @@ var propClassName = _a.className, children = _a.children, _c = _a.type, type = _c === void 0 ? "body-1" : _c, _d = _a.component, component = _d === void 0 ? null : _d, align = _a.align, color = _a.color, decoration = _a.decoration, transform = _a.transform, weight = _a.weight, fontStyle = _a.fontStyle, _e = _a.margin, margin = _e === void 0 ? "initial" : _e, props = __rest(_a, ["className", "children", "type", "component", "align", "color", "decoration", "transform", "weight", "fontStyle", "margin"]);
     return createElement(getComponent(component, type), __assign(__assign({}, props), { className: className, ref: ref }), children);
-}
-var ForwardedText = forwardRef(Text);
+});
 if (process.env.NODE_ENV !== "production") {
     try {
         var PropTypes = require("prop-types");
-        ForwardedText.propTypes = {
+        Text.propTypes = {
             className: PropTypes.string,
@@ -160,3 +159,3 @@ type: PropTypes.oneOf([
 }
-export default ForwardedText;
+export default Text;
 //# sourceMappingURL=Text.js.map

es/TextContainer.js

@@ -25,3 +25,3 @@ var __assign = (this && this.__assign) || function () {
 import cn from "classnames";
-function TextContainer(_a, ref) {
+var TextContainer = forwardRef(function TextContainer(_a, ref) {
     var propClassName = _a.className, _b = _a.component, Component = _b === void 0 ? "div" : _b, _c = _a.size, size = _c === void 0 ? "auto" : _c, children = _a.children, props = __rest(_a, ["className", "component", "size", "children"]);
@@ -33,8 +33,7 @@ var className = cn("rmd-text-container rmd-text-container--" + size, propClassName);
     return (React.createElement(Component, __assign({}, props, { className: className, ref: ref }), children));
-}
-var ForwardedTextContainer = forwardRef(TextContainer);
+});
 if (process.env.NODE_ENV !== "production") {
     try {
         var PropTypes = require("prop-types");
-        ForwardedTextContainer.propTypes = {
+        TextContainer.propTypes = {
             className: PropTypes.string,
@@ -52,3 +51,3 @@ size: PropTypes.oneOf(["auto", "mobile", "desktop"]),
 }
-export default ForwardedTextContainer;
+export default TextContainer;
 //# sourceMappingURL=TextContainer.js.map

lib/SrOnly.d.ts

@@ -11,3 +11,8 @@ import React from "react";
 }
-declare const ForwardedSrOnly: React.ForwardRefExoticComponent<SrOnlyProps & React.RefAttributes<TextElement>>;
-export default ForwardedSrOnly;
+/**
+ * This component is used to create text that is only visible to screen readers.
+ * If you enable the `focusable` prop, the text will become visible to all users
+ * while focused.
+ */
+declare const SrOnly: React.ForwardRefExoticComponent<SrOnlyProps & React.RefAttributes<TextElement>>;
+export default SrOnly;

lib/SrOnly.js

@@ -45,3 +45,3 @@ "use strict";
  */
-function SrOnly(_a, ref) {
+var SrOnly = react_1.forwardRef(function SrOnly(_a, ref) {
     var className = _a.className, children = _a.children, _b = _a.focusable, focusable = _b === void 0 ? false : _b, propTabIndex = _a.tabIndex, _c = _a.component, component = _c === void 0 ? "span" : _c, props = __rest(_a, ["className", "children", "focusable", "tabIndex", "component"]);
@@ -53,8 +53,10 @@ var tabIndex = propTabIndex;
     return (react_1.default.createElement(Text_1.default, __assign({}, props, { ref: ref, tabIndex: tabIndex, component: component, className: classnames_1.default(block({ focusable: focusable }), className) }), children));
-}
-var ForwardedSrOnly = react_1.forwardRef(SrOnly);
+});
 if (process.env.NODE_ENV !== "production") {
     try {
         var PropTypes = require("prop-types");
-        ForwardedSrOnly.propTypes = {
+        SrOnly.propTypes = {
+            className: PropTypes.string,
+            children: PropTypes.node,
+            tabIndex: PropTypes.number,
             focusable: PropTypes.bool,
@@ -70,3 +72,3 @@ component: PropTypes.oneOfType([
 }
-exports.default = ForwardedSrOnly;
+exports.default = SrOnly;
 //# sourceMappingURL=SrOnly.js.map

lib/Text.d.ts

@@ -100,3 +100,29 @@ import { ElementType, HTMLAttributes, ReactElement, ReactNode } from "react";
 }
-declare const ForwardedText: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<TextElement>>;
-export default ForwardedText;
+/**
+ * The `Text` component is used to render text with the material design
+ * typography styles applied.  By default, everything will be rendered in a
+ * `<p>` tag with the normal paragraph styles.
+ *
+ * When the `type` prop is changed to another typography style, this component
+ * will determine the "best" element to render the text in *unless* the
+ * `component` prop is provided. The default mapping is:
+ *
+ * - `"headline-1" -> <h1>`
+ * - `"headline-2" -> <h2>`
+ * - `"headline-3" -> <h3>`
+ * - `"headline-4" -> <h4>`
+ * - `"headline-5" -> <h5>`
+ * - `"headline-6" -> <h6>`
+ * - `"subtitle-1" -> <h5>`
+ * - `"subtitle-2" -> <h6>`
+ * - `"body-1"     -> <p>`
+ * - `"body-2"     -> <p>`
+ * - `"caption"    -> <caption>`
+ * - `"overline"   -> <span>`
+ * - `"button"     -> <button>`
+ *
+ * NOTE: if the `component` prop is not `null`, this logic will be ignored and
+ * the provided `component` will be used instead.
+ */
+declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<TextElement>>;
+export default Text;

lib/Text.js

@@ -88,3 +88,3 @@ "use strict";
  */
-function Text(_a, ref) {
+var Text = react_1.forwardRef(function Text(_a, ref) {
     var _b;
@@ -110,8 +110,7 @@ var propClassName = _a.className, children = _a.children, _c = _a.type, type = _c === void 0 ? "body-1" : _c, _d = _a.component, component = _d === void 0 ? null : _d, align = _a.align, color = _a.color, decoration = _a.decoration, transform = _a.transform, weight = _a.weight, fontStyle = _a.fontStyle, _e = _a.margin, margin = _e === void 0 ? "initial" : _e, props = __rest(_a, ["className", "children", "type", "component", "align", "color", "decoration", "transform", "weight", "fontStyle", "margin"]);
     return react_1.createElement(getComponent(component, type), __assign(__assign({}, props), { className: className, ref: ref }), children);
-}
-var ForwardedText = react_1.forwardRef(Text);
+});
 if (process.env.NODE_ENV !== "production") {
     try {
         var PropTypes = require("prop-types");
-        ForwardedText.propTypes = {
+        Text.propTypes = {
             className: PropTypes.string,
@@ -165,3 +164,3 @@ type: PropTypes.oneOf([
 }
-exports.default = ForwardedText;
+exports.default = Text;
 //# sourceMappingURL=Text.js.map

lib/TextContainer.d.ts

@@ -42,3 +42,3 @@ import React, { ElementType, HTMLAttributes, ReactElement, ReactNode } from "react";
 }
-declare const ForwardedTextContainer: React.ForwardRefExoticComponent<TextContainerProps & React.RefAttributes<"symbol" | "object" | HTMLDivElement | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any>>>;
-export default ForwardedTextContainer;
+declare const TextContainer: React.ForwardRefExoticComponent<TextContainerProps & React.RefAttributes<"symbol" | "object" | HTMLDivElement | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any>>>;
+export default TextContainer;

lib/TextContainer.js

@@ -37,3 +37,3 @@ "use strict";
 var classnames_1 = __importDefault(require("classnames"));
-function TextContainer(_a, ref) {
+var TextContainer = react_1.forwardRef(function TextContainer(_a, ref) {
     var propClassName = _a.className, _b = _a.component, Component = _b === void 0 ? "div" : _b, _c = _a.size, size = _c === void 0 ? "auto" : _c, children = _a.children, props = __rest(_a, ["className", "component", "size", "children"]);
@@ -45,8 +45,7 @@ var className = classnames_1.default("rmd-text-container rmd-text-container--" + size, propClassName);
     return (react_1.default.createElement(Component, __assign({}, props, { className: className, ref: ref }), children));
-}
-var ForwardedTextContainer = react_1.forwardRef(TextContainer);
+});
 if (process.env.NODE_ENV !== "production") {
     try {
         var PropTypes = require("prop-types");
-        ForwardedTextContainer.propTypes = {
+        TextContainer.propTypes = {
             className: PropTypes.string,
@@ -64,3 +63,3 @@ size: PropTypes.oneOf(["auto", "mobile", "desktop"]),
 }
-exports.default = ForwardedTextContainer;
+exports.default = TextContainer;
 //# sourceMappingURL=TextContainer.js.map

package.json

 {
   "name": "@react-md/typography",
-  "version": "2.0.0-alpha.15",
+  "version": "2.0.0-beta.0",
   "description": "The base package for including typography for react-md.",
@@ -38,4 +38,4 @@ "scripts": {
   "dependencies": {
-    "@react-md/theme": "^2.0.0-alpha.15",
-    "@react-md/utils": "^2.0.0-alpha.15",
+    "@react-md/theme": "^2.0.0-beta.0",
+    "@react-md/utils": "^2.0.0-beta.0",
     "classnames": "^2.2.6"
@@ -52,3 +52,3 @@ },
   },
-  "gitHead": "c20671308497530c59f6563eafd1914b55122b8c"
+  "gitHead": "8d754a2c2734ee98eaf571e348a836cf12a9f104"
 }

types/SrOnly.d.ts

@@ -11,3 +11,8 @@ import React from "react";
 }
-declare const ForwardedSrOnly: React.ForwardRefExoticComponent<SrOnlyProps & React.RefAttributes<TextElement>>;
-export default ForwardedSrOnly;
+/**
+ * This component is used to create text that is only visible to screen readers.
+ * If you enable the `focusable` prop, the text will become visible to all users
+ * while focused.
+ */
+declare const SrOnly: React.ForwardRefExoticComponent<SrOnlyProps & React.RefAttributes<TextElement>>;
+export default SrOnly;

types/Text.d.ts

@@ -100,3 +100,29 @@ import { ElementType, HTMLAttributes, ReactElement, ReactNode } from "react";
 }
-declare const ForwardedText: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<TextElement>>;
-export default ForwardedText;
+/**
+ * The `Text` component is used to render text with the material design
+ * typography styles applied.  By default, everything will be rendered in a
+ * `<p>` tag with the normal paragraph styles.
+ *
+ * When the `type` prop is changed to another typography style, this component
+ * will determine the "best" element to render the text in *unless* the
+ * `component` prop is provided. The default mapping is:
+ *
+ * - `"headline-1" -> <h1>`
+ * - `"headline-2" -> <h2>`
+ * - `"headline-3" -> <h3>`
+ * - `"headline-4" -> <h4>`
+ * - `"headline-5" -> <h5>`
+ * - `"headline-6" -> <h6>`
+ * - `"subtitle-1" -> <h5>`
+ * - `"subtitle-2" -> <h6>`
+ * - `"body-1"     -> <p>`
+ * - `"body-2"     -> <p>`
+ * - `"caption"    -> <caption>`
+ * - `"overline"   -> <span>`
+ * - `"button"     -> <button>`
+ *
+ * NOTE: if the `component` prop is not `null`, this logic will be ignored and
+ * the provided `component` will be used instead.
+ */
+declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<TextElement>>;
+export default Text;

types/TextContainer.d.ts

@@ -42,3 +42,3 @@ import React, { ElementType, HTMLAttributes, ReactElement, ReactNode } from "react";
 }
-declare const ForwardedTextContainer: React.ForwardRefExoticComponent<TextContainerProps & React.RefAttributes<"symbol" | "object" | HTMLDivElement | "meter" | "textarea" | "button" | "style" | "progress" | "text" | "ruby" | "table" | "small" | "sub" | "circle" | "embed" | "pre" | "caption" | "menu" | "menuitem" | "big" | "link" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "meta" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any>>>;
-export default ForwardedTextContainer;
+declare const TextContainer: React.ForwardRefExoticComponent<TextContainerProps & React.RefAttributes<"symbol" | "object" | HTMLDivElement | "meter" | "textarea" | "button" | "style" | "progress" | "text" | "ruby" | "table" | "small" | "sub" | "circle" | "embed" | "pre" | "caption" | "menu" | "menuitem" | "big" | "link" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "meta" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any>>>;
+export default TextContainer;

No alert changes

Improved metrics

Total package byte prevSize

203084

increased by1.01%

Lines of code

2217

increased by2.78%

Dependency changes

• Updated@react-md/theme@^2.0.0-beta.0

• Updated@react-md/utils@^2.0.0-beta.0