@react-md/typography - npm Package Compare versions

Comparing version 3.1.0 to 4.0.0

CHANGELOG.md

@@ -6,2 +6,38 @@ # Change Log
 
+# [4.0.0](https://github.com/mlaursen/react-md/compare/v3.1.1...v4.0.0) (2021-11-24)
+
+
+### Bug Fixes
+
+* **sass:** Do not use legacy global functions ([6159e16](https://github.com/mlaursen/react-md/commit/6159e161af72a6e2d5fe43afb02ef537c3f55c11))
+
+
+### Features
+
+* Update to use new JSX Transform and latest `eslint` ([8111cd3](https://github.com/mlaursen/react-md/commit/8111cd31e45bf60c1b92509264af1b71dfba5696))
+* **@react-md/typography:** Renamed Text to `Typography` ([30cf056](https://github.com/mlaursen/react-md/commit/30cf056fbaf0e3d28e04dd03f1fd37929967f7ab))
+
+
+### Other Internal Changes
+
+* always skip lib check ([229cef1](https://github.com/mlaursen/react-md/commit/229cef1e3d338ea362c1a2eaac06204c84ff21a6))
+* **@react-md/format:** ran `prettier` after upgrading to v2.4.0 ([06110af](https://github.com/mlaursen/react-md/commit/06110afb20c2b83bb76a187f21e5edcd975d1147))
+* **react-md:** Remove prop-types package and usage ([2637a6f](https://github.com/mlaursen/react-md/commit/2637a6f43d681a06054e3a4518f692cf51baf997))
+* **stylelint:** Updated to use `stylelint` ([22d1598](https://github.com/mlaursen/react-md/commit/22d15985061df76d827d4ca9319198526e320f11))
+
+
+### Breaking Changes
+
+* Minimum React version is now 16.14 instead of 16.8
+* **@react-md/typography:** The Text component has been renamed to Typography to
+help with auto-imports conflicting with the Text element that exists in
+`lib.d.ts`
+* **react-md:** There will no longer be run-time prop validation with
+the `prop-types` package.
+
+
+
+
+
+
 # [3.1.0](https://github.com/mlaursen/react-md/compare/v3.0.1...v3.1.0) (2021-09-10)
@@ -8,0 +44,0 @@

es/index.js

 /**
  * @module @react-md/typography
  */
-export * from "./Text";
+export * from "./SrOnly";
 export * from "./TextContainer";
-export * from "./SrOnly";
+export * from "./Typography";
 //# sourceMappingURL=index.js.map

es/SrOnly.js

@@ -23,6 +23,7 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import cn from "classnames";
 import { bem } from "@react-md/utils";
-import { Text } from "./Text";
+import { Typography, } from "./Typography";
 var block = bem("rmd-sr-only");
@@ -40,22 +41,4 @@ /**
     }
-    return (React.createElement(Text, __assign({}, props, { ref: ref, tabIndex: tabIndex, component: component, className: cn(block({ focusable: focusable }), className) }), children));
+    return (_jsx(Typography, __assign({}, props, { ref: ref, tabIndex: tabIndex, component: component, className: cn(block({ focusable: focusable }), className) }, { children: children }), void 0));
 });
-/* istanbul ignore next */
-if (process.env.NODE_ENV !== "production") {
-    try {
-        var PropTypes = require("prop-types");
-        SrOnly.propTypes = {
-            className: PropTypes.string,
-            children: PropTypes.node,
-            tabIndex: PropTypes.number,
-            focusable: PropTypes.bool,
-            component: PropTypes.oneOfType([
-                PropTypes.string,
-                PropTypes.func,
-                PropTypes.object,
-            ]),
-        };
-    }
-    catch (e) { }
-}
 //# sourceMappingURL=SrOnly.js.map

es/TextContainer.js

@@ -23,7 +23,8 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { Children, cloneElement, forwardRef, isValidElement, } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, forwardRef, isValidElement, } from "react";
 import cn from "classnames";
 export 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, clone = _a.clone, props = __rest(_a, ["className", "component", "size", "children", "clone"]);
-    var className = cn("rmd-text-container rmd-text-container--" + size, propClassName);
+    var className = cn("rmd-text-container rmd-text-container--".concat(size), propClassName);
     if (clone && isValidElement(children)) {
@@ -38,22 +39,4 @@ var child = Children.only(children);
     }
-    return (React.createElement(Component, __assign({}, props, { className: className, ref: ref }), children));
+    return (_jsx(Component, __assign({}, props, { className: className, ref: ref }, { children: children }), void 0));
 });
-/* istanbul ignore next */
-if (process.env.NODE_ENV !== "production") {
-    try {
-        var PropTypes = require("prop-types");
-        TextContainer.propTypes = {
-            className: PropTypes.string,
-            size: PropTypes.oneOf(["auto", "mobile", "desktop"]),
-            component: PropTypes.oneOfType([
-                PropTypes.string,
-                PropTypes.func,
-                PropTypes.object,
-            ]),
-            children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-            clone: PropTypes.bool,
-        };
-    }
-    catch (e) { }
-}
 //# sourceMappingURL=TextContainer.js.map

lib/index.d.ts

 /**
  * @module @react-md/typography
  */
-export * from "./Text";
+export * from "./SrOnly";
 export * from "./TextContainer";
-export * from "./SrOnly";
+export * from "./Typography";

lib/index.js

@@ -16,5 +16,5 @@ "use strict";
  */
-__exportStar(require("./Text"), exports);
+__exportStar(require("./SrOnly"), exports);
 __exportStar(require("./TextContainer"), exports);
-__exportStar(require("./SrOnly"), exports);
+__exportStar(require("./Typography"), exports);
 //# sourceMappingURL=index.js.map

lib/SrOnly.d.ts

@@ -1,4 +0,4 @@
-import React from "react";
-import { TextElement, TextProps } from "./Text";
-export interface SrOnlyProps extends TextProps {
+/// <reference types="react" />
+import { TypographyHTMLElement, TypographyProps } from "./Typography";
+export interface SrOnlyProps extends TypographyProps {
     /**
@@ -16,2 +16,2 @@ * Boolean if the text should become visible when focused. If this prop is
  */
-export declare const SrOnly: React.ForwardRefExoticComponent<SrOnlyProps & React.RefAttributes<TextElement>>;
+export declare const SrOnly: import("react").ForwardRefExoticComponent<SrOnlyProps & import("react").RefAttributes<TypographyHTMLElement>>;

lib/SrOnly.js

@@ -13,21 +13,2 @@ "use strict";
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
@@ -49,6 +30,7 @@ var t = {};
 exports.SrOnly = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("@react-md/utils");
-var Text_1 = require("./Text");
+var Typography_1 = require("./Typography");
 var block = (0, utils_1.bem)("rmd-sr-only");
@@ -66,22 +48,4 @@ /**
     }
-    return (react_1.default.createElement(Text_1.Text, __assign({}, props, { ref: ref, tabIndex: tabIndex, component: component, className: (0, classnames_1.default)(block({ focusable: focusable }), className) }), children));
+    return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, __assign({}, props, { ref: ref, tabIndex: tabIndex, component: component, className: (0, classnames_1.default)(block({ focusable: focusable }), className) }, { children: children }), void 0));
 });
-/* istanbul ignore next */
-if (process.env.NODE_ENV !== "production") {
-    try {
-        var PropTypes = require("prop-types");
-        exports.SrOnly.propTypes = {
-            className: PropTypes.string,
-            children: PropTypes.node,
-            tabIndex: PropTypes.number,
-            focusable: PropTypes.bool,
-            component: PropTypes.oneOfType([
-                PropTypes.string,
-                PropTypes.func,
-                PropTypes.object,
-            ]),
-        };
-    }
-    catch (e) { }
-}
 //# sourceMappingURL=SrOnly.js.map

lib/TextContainer.d.ts

@@ -1,2 +0,2 @@
-import React, { ElementType, HTMLAttributes, ReactElement, ReactNode } from "react";
+import { ElementType, HTMLAttributes, ReactElement, ReactNode } from "react";
 import { ClassNameCloneableChild } from "@react-md/utils";
@@ -51,2 +51,2 @@ /**
 }
-export declare const TextContainer: React.ForwardRefExoticComponent<TextContainerProps & React.RefAttributes<HTMLDivElement | React.ElementType<any>>>;
+export declare const TextContainer: import("react").ForwardRefExoticComponent<TextContainerProps & import("react").RefAttributes<HTMLDivElement | ElementType<any>>>;

lib/TextContainer.js

@@ -13,21 +13,2 @@ "use strict";
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
@@ -49,7 +30,8 @@ var t = {};
 exports.TextContainer = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var classnames_1 = __importDefault(require("classnames"));
 exports.TextContainer = (0, 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, clone = _a.clone, props = __rest(_a, ["className", "component", "size", "children", "clone"]);
-    var className = (0, classnames_1.default)("rmd-text-container rmd-text-container--" + size, propClassName);
+    var className = (0, classnames_1.default)("rmd-text-container rmd-text-container--".concat(size), propClassName);
     if (clone && (0, react_1.isValidElement)(children)) {
@@ -64,22 +46,4 @@ var child = react_1.Children.only(children);
     }
-    return (react_1.default.createElement(Component, __assign({}, props, { className: className, ref: ref }), children));
+    return ((0, jsx_runtime_1.jsx)(Component, __assign({}, props, { className: className, ref: ref }, { children: children }), void 0));
 });
-/* istanbul ignore next */
-if (process.env.NODE_ENV !== "production") {
-    try {
-        var PropTypes = require("prop-types");
-        exports.TextContainer.propTypes = {
-            className: PropTypes.string,
-            size: PropTypes.oneOf(["auto", "mobile", "desktop"]),
-            component: PropTypes.oneOfType([
-                PropTypes.string,
-                PropTypes.func,
-                PropTypes.object,
-            ]),
-            children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-            clone: PropTypes.bool,
-        };
-    }
-    catch (e) { }
-}
 //# sourceMappingURL=TextContainer.js.map

package.json

 {
   "name": "@react-md/typography",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "The base package for including typography for react-md.",
@@ -31,4 +31,4 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@react-md/theme": "^3.1.0",
-    "@react-md/utils": "^3.1.0",
+    "@react-md/theme": "^4.0.0",
+    "@react-md/utils": "^4.0.0",
     "classnames": "^2.3.1"
@@ -41,11 +41,8 @@ },
   "peerDependencies": {
-    "react": ">= 16.8"
+    "react": ">= 16.14"
   },
-  "optionalDependencies": {
-    "prop-types": ">= 15.6"
-  },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5891a3255f12fb34d2cc82d81d10f85f712a21e8"
+  "gitHead": "a9f2d64a777698fa65bb3196f6063cdd8321f5cb"
 }

README.md

@@ -8,6 +8,6 @@ # @react-md/typography
 This package is mostly for generating the base typography onto different classes
-throughout your app, but it also exposes `Text` and `TextContainer` components
-to help add typography throughout your app. There is also an accessibility
-helper component named `SrOnly` that allows you to display text to screen
-readers only.
+throughout your app, but it also exposes `Typography` and `TextContainer`
+components to help add typography throughout your app. There is also an
+accessibility helper component named `SrOnly` that allows you to display text to
+screen readers only.
 
@@ -38,22 +38,21 @@ If you'd like to change the typography values, check out the
 ```tsx
-import React from "react";
 import { render } from "react-dom";
-import { Text, TextContainer } from "@react-md/typography";
+import { Typography, TextContainer } from "@react-md/typography";
 
 const App = () => (
   <TextContainer>
-    <Text type="headline-1">Headline 1</Text>
-    <Text type="headline-2">Headline 2</Text>
-    <Text type="headline-3">Headline 3</Text>
-    <Text type="headline-4">Headline 4</Text>
-    <Text type="headline-5">Headline 5</Text>
-    <Text type="headline-6">Headline 6</Text>
-    <Text type="subtitle-1">Subtitle 1</Text>
-    <Text type="subtitle-2">Subtitle 2</Text>
-    <Text type="body-1">Body 1</Text>
-    <Text type="body-2">Body 2</Text>
-    <Text type="overline">Overline</Text>
-    <Text type="caption" component="p">
+    <Typography type="headline-1">Headline 1</Typography>
+    <Typography type="headline-2">Headline 2</Typography>
+    <Typography type="headline-3">Headline 3</Typography>
+    <Typography type="headline-4">Headline 4</Typography>
+    <Typography type="headline-5">Headline 5</Typography>
+    <Typography type="headline-6">Headline 6</Typography>
+    <Typography type="subtitle-1">Subtitle 1</Typography>
+    <Typography type="subtitle-2">Subtitle 2</Typography>
+    <Typography type="body-1">Body 1</Typography>
+    <Typography type="body-2">Body 2</Typography>
+    <Typography type="overline">Overline</Typography>
+    <Typography type="caption" component="p">
       Caption
-    </Text>
+    </Typography>
   </TextContainer>
@@ -60,0 +59,0 @@ );

src/index.ts

 /**
  * @module @react-md/typography
  */
-export * from "./Text";
+export * from "./SrOnly";
 export * from "./TextContainer";
-export * from "./SrOnly";
+export * from "./Typography";

types/index.d.ts

 /**
  * @module @react-md/typography
  */
-export * from "./Text";
+export * from "./SrOnly";
 export * from "./TextContainer";
-export * from "./SrOnly";
+export * from "./Typography";

types/SrOnly.d.ts

@@ -1,4 +0,4 @@
-import React from "react";
-import { TextElement, TextProps } from "./Text";
-export interface SrOnlyProps extends TextProps {
+/// <reference types="react" />
+import { TypographyHTMLElement, TypographyProps } from "./Typography";
+export interface SrOnlyProps extends TypographyProps {
     /**
@@ -16,2 +16,2 @@ * Boolean if the text should become visible when focused. If this prop is
  */
-export declare const SrOnly: React.ForwardRefExoticComponent<SrOnlyProps & React.RefAttributes<TextElement>>;
+export declare const SrOnly: import("react").ForwardRefExoticComponent<SrOnlyProps & import("react").RefAttributes<TypographyHTMLElement>>;

types/TextContainer.d.ts

@@ -1,2 +0,2 @@
-import React, { ElementType, HTMLAttributes, ReactElement, ReactNode } from "react";
+import { ElementType, HTMLAttributes, ReactElement, ReactNode } from "react";
 import { ClassNameCloneableChild } from "@react-md/utils";
@@ -51,2 +51,2 @@ /**
 }
-export declare const TextContainer: React.ForwardRefExoticComponent<TextContainerProps & React.RefAttributes<HTMLDivElement | React.ElementType<any>>>;
+export declare const TextContainer: import("react").ForwardRefExoticComponent<TextContainerProps & import("react").RefAttributes<HTMLDivElement | ElementType<any>>>;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Dependency count

4

decreased by-20%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

195235

decreased by-5.21%

Lines of code

2183

decreased by-11.12%

Number of lines in readme file

61

decreased by-1.61%

Dependency changes

• + Added@react-md/theme@4.0.3(transitive)

• + Added@react-md/utils@4.0.3(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedscheduler@0.23.2(transitive)

• - Removed@react-md/theme@3.1.0(transitive)

• - Removed@react-md/utils@3.1.0(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact-is@16.13.1(transitive)

• Updated@react-md/theme@^4.0.0

• Updated@react-md/utils@^4.0.0