@react-md/divider - npm Package Compare versions

Comparing version 2.0.0-alpha.5 to 2.0.0-alpha.6

es/Divider.js

@@ -17,4 +17,6 @@ var __assign = (this && this.__assign) || function () {
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
@@ -24,3 +26,3 @@ };
 import cn from "classnames";
-import { bem } from "@react-md/theme";
+import { bem } from "@react-md/utils";
 var block = bem("rmd-divider");
@@ -27,0 +29,0 @@ var Divider = function (providedProps) {

es/VerticalDivider.js

@@ -17,7 +17,10 @@ var __assign = (this && this.__assign) || function () {
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
 };
-import React, { useCallback, useState } from "react";
+import React, { forwardRef, useCallback, useState, } from "react";
+import { applyRef } from "@react-md/utils";
 import Divider from "./Divider";
@@ -32,3 +35,3 @@ /**
  */
-export function useVerticalDividerHeight(maxHeight) {
+export function useVerticalDividerHeight(maxHeight, forwardedRef) {
     if (process.env.NODE_ENV !== "production" && maxHeight < 0) {
@@ -39,2 +42,3 @@ throw new Error("The `maxHeight` for a vertical divider height must be greater than 0");
     var ref = useCallback(function (instance) {
+        applyRef(instance, forwardedRef);
         if (!instance || !instance.parentElement) {
@@ -50,3 +54,3 @@ return;
         }
-    }, [maxHeight]);
+    }, [maxHeight, forwardedRef]);
     return { ref: ref, height: height };
@@ -63,4 +67,4 @@ }
 var VerticalDivider = function (providedProps) {
-    var _a = providedProps, style = _a.style, maxHeight = _a.maxHeight, props = __rest(_a, ["style", "maxHeight"]);
-    var _b = useVerticalDividerHeight(maxHeight), ref = _b.ref, height = _b.height;
+    var _a = providedProps, style = _a.style, maxHeight = _a.maxHeight, forwardedRef = _a.forwardedRef, props = __rest(_a, ["style", "maxHeight", "forwardedRef"]);
+    var _b = useVerticalDividerHeight(maxHeight, forwardedRef), ref = _b.ref, height = _b.height;
     return React.createElement(Divider, __assign({}, props, { style: __assign({}, style, { height: height }), ref: ref, vertical: true }));
@@ -82,6 +86,7 @@ };
             // @ts-ignore
-            _validateMaxHeight: function (props, _, componentName) {
-                if (props.maxHeight < 0) {
+            _validateMaxHeight: function (_a, _, componentName) {
+                var maxHeight = _a.maxHeight;
+                if (maxHeight < 0) {
                     return new Error("The maxHeight prop for `" + componentName + "` must be a number greater " +
-                        ("than 0, but received `" + props.maxHeight + "`."));
+                        ("than 0, but received `" + maxHeight + "`."));
                 }
@@ -93,3 +98,3 @@ return null;
 }
-export default VerticalDivider;
+export default forwardRef(function (props, ref) { return React.createElement(VerticalDivider, __assign({}, props, { forwardedRef: ref })); });
 //# sourceMappingURL=VerticalDivider.js.map

lib/Divider.js

@@ -18,4 +18,6 @@ "use strict";
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
@@ -36,4 +38,4 @@ };
 var classnames_1 = __importDefault(require("classnames"));
-var theme_1 = require("@react-md/theme");
-var block = theme_1.bem("rmd-divider");
+var utils_1 = require("@react-md/utils");
+var block = utils_1.bem("rmd-divider");
 var Divider = function (providedProps) {
@@ -40,0 +42,0 @@ var _a = providedProps, inset = _a.inset, vertical = _a.vertical, forwardedRef = _a.forwardedRef, className = _a.className, props = __rest(_a, ["inset", "vertical", "forwardedRef", "className"]);

lib/VerticalDivider.js

@@ -18,4 +18,6 @@ "use strict";
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
@@ -35,2 +37,3 @@ };
 var react_1 = __importStar(require("react"));
+var utils_1 = require("@react-md/utils");
 var Divider_1 = __importDefault(require("./Divider"));
@@ -45,3 +48,3 @@ /**
  */
-function useVerticalDividerHeight(maxHeight) {
+function useVerticalDividerHeight(maxHeight, forwardedRef) {
     if (process.env.NODE_ENV !== "production" && maxHeight < 0) {
@@ -52,2 +55,3 @@ throw new Error("The `maxHeight` for a vertical divider height must be greater than 0");
     var ref = react_1.useCallback(function (instance) {
+        utils_1.applyRef(instance, forwardedRef);
         if (!instance || !instance.parentElement) {
@@ -63,3 +67,3 @@ return;
         }
-    }, [maxHeight]);
+    }, [maxHeight, forwardedRef]);
     return { ref: ref, height: height };
@@ -77,4 +81,4 @@ }
 var VerticalDivider = function (providedProps) {
-    var _a = providedProps, style = _a.style, maxHeight = _a.maxHeight, props = __rest(_a, ["style", "maxHeight"]);
-    var _b = useVerticalDividerHeight(maxHeight), ref = _b.ref, height = _b.height;
+    var _a = providedProps, style = _a.style, maxHeight = _a.maxHeight, forwardedRef = _a.forwardedRef, props = __rest(_a, ["style", "maxHeight", "forwardedRef"]);
+    var _b = useVerticalDividerHeight(maxHeight, forwardedRef), ref = _b.ref, height = _b.height;
     return react_1.default.createElement(Divider_1.default, __assign({}, props, { style: __assign({}, style, { height: height }), ref: ref, vertical: true }));
@@ -96,6 +100,7 @@ };
             // @ts-ignore
-            _validateMaxHeight: function (props, _, componentName) {
-                if (props.maxHeight < 0) {
+            _validateMaxHeight: function (_a, _, componentName) {
+                var maxHeight = _a.maxHeight;
+                if (maxHeight < 0) {
                     return new Error("The maxHeight prop for `" + componentName + "` must be a number greater " +
-                        ("than 0, but received `" + props.maxHeight + "`."));
+                        ("than 0, but received `" + maxHeight + "`."));
                 }
@@ -107,3 +112,3 @@ return null;
 }
-exports.default = VerticalDivider;
+exports.default = react_1.forwardRef(function (props, ref) { return react_1.default.createElement(VerticalDivider, __assign({}, props, { forwardedRef: ref })); });
 //# sourceMappingURL=VerticalDivider.js.map

package.json

 {
   "name": "@react-md/divider",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-alpha.6",
   "description": "This package is used to create horizontal or vertical dividers in your application.",
@@ -38,4 +38,4 @@ "scripts": {
   "dependencies": {
-    "@react-md/theme": "^2.0.0-alpha.5",
-    "@react-md/utils": "^2.0.0-alpha.5",
+    "@react-md/theme": "^2.0.0-alpha.6",
+    "@react-md/utils": "^2.0.0-alpha.6",
     "classnames": "^2.2.6"
@@ -52,3 +52,3 @@ },
   },
-  "gitHead": "3210cd3047162980716f1eb07cb25b364a241a70"
+  "gitHead": "e3db6427d83e1a66980662f3656557cc07dfabcc"
 }

types/VerticalDivider.d.ts

@@ -1,2 +0,2 @@
-import { FC, HTMLAttributes } from "react";
+import React, { HTMLAttributes, Ref } from "react";
 export interface VerticalDividerProps extends HTMLAttributes<HTMLDivElement> {
@@ -13,2 +13,6 @@ /**
 }
+interface VerticalDividerHeight {
+    ref: (instance: HTMLDivElement | null) => void;
+    height: number | undefined;
+}
 /**
@@ -22,15 +26,4 @@ * This is a small hook that is used to automatically create a vertical divider based
  */
-export declare function useVerticalDividerHeight(maxHeight: number): {
-    ref: (instance: HTMLDivElement | null) => void;
-    height: number | undefined;
-};
-/**
- * This component is used to create a vertical divider based on a parent element's
- * height. This is really only needed when the parent element **has no defined height**.
- * If there is a defined height, this component is not worth much as the height can
- * be computed in css as normal. This really just fixes the issue that the height would
- * be set to `auto` (which computes to 0 most of the time) when it is not set on a parent
- * element.
- */
-declare const VerticalDivider: FC<VerticalDividerProps>;
-export default VerticalDivider;
+export declare function useVerticalDividerHeight(maxHeight: number, forwardedRef?: Ref<HTMLDivElement | null> | undefined): VerticalDividerHeight;
+declare const _default: React.ForwardRefExoticComponent<VerticalDividerProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

No alert changes

Worsened metrics

Total package byte prevSize

62969

decreased by-4.66%

Number of package files

40

decreased by-6.98%

Lines of code

746

decreased by-2.23%

Dependency changes

• Updated@react-md/theme@^2.0.0-alpha.6

• Updated@react-md/utils@^2.0.0-alpha.6