@react-md/divider - npm Package Compare versions

Comparing version 4.0.3 to 5.0.0

CHANGELOG.md

@@ -6,2 +6,15 @@ # Change Log
 
+# [5.0.0](https://github.com/mlaursen/react-md/compare/v4.0.3...v5.0.0) (2022-01-31)
+
+
+### Features
+
+* **@react-md/divider:** Update `useVerticalDividerHeight` to support any HTMLElement ([edd9287](https://github.com/mlaursen/react-md/commit/edd9287da1d41fb5ec1133b30437a246a6d24c28))
+* **@react-md/divider:** Update divider styles for non-hr elements ([7ccd0a6](https://github.com/mlaursen/react-md/commit/7ccd0a6cf61bbcbf01b7f92645bf74dda0d2f6bf))
+
+
+
+
+
+
 ## [4.0.3](https://github.com/mlaursen/react-md/compare/v4.0.2...v4.0.3) (2021-12-31)
@@ -8,0 +21,0 @@

es/index.js

@@ -5,3 +5,4 @@ /**
 export * from "./Divider";
+export * from "./useVerticalDividerHeight";
 export * from "./VerticalDivider";
 //# sourceMappingURL=index.js.map

es/VerticalDivider.js

@@ -23,51 +23,7 @@ var __assign = (this && this.__assign) || function () {
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useState } from "react";
-import { applyRef } from "@react-md/utils";
+import { forwardRef } from "react";
 import { Divider } from "./Divider";
+import { useVerticalDividerHeight } from "./useVerticalDividerHeight";
 /**
- * This is a small hook that is used to automatically create a vertical divider
- * based on the computed height of its parent element.
- *
- * @param maxHeight - The max height for the vertical divider. When the value is
- * between 0 and 1, it will be used as a percentage. Otherwise the smaller value
- * of parent element height and this will be used.
- */
-export function useVerticalDividerHeight(maxHeight, forwardedRef) {
-    if (process.env.NODE_ENV !== "production" && maxHeight < 0) {
-        throw new Error("The `maxHeight` for a vertical divider height must be greater than 0");
-    }
-    var _a = __read(useState(undefined), 2), height = _a[0], setHeight = _a[1];
-    var ref = useCallback(function (instance) {
-        applyRef(instance, forwardedRef);
-        if (!instance || !instance.parentElement) {
-            return;
-        }
-        var height = instance.parentElement.offsetHeight;
-        if (maxHeight <= 1) {
-            setHeight(height * maxHeight);
-        }
-        else {
-            setHeight(Math.min(height, maxHeight));
-        }
-    }, [maxHeight, forwardedRef]);
-    return { ref: ref, height: height };
-}
-/**
  * This component is used to create a vertical divider based on a parent
@@ -80,7 +36,11 @@ * element's height. This is really only needed when the parent element **has no
  */
-export var VerticalDivider = forwardRef(function VerticalDivider(_a, forwardedRef) {
+export var VerticalDivider = forwardRef(function VerticalDivider(_a, ref) {
     var style = _a.style, _b = _a.maxHeight, maxHeight = _b === void 0 ? 1 : _b, props = __rest(_a, ["style", "maxHeight"]);
-    var _c = useVerticalDividerHeight(maxHeight, forwardedRef), ref = _c.ref, height = _c.height;
-    return (_jsx(Divider, __assign({}, props, { style: __assign(__assign({}, style), { height: height }), ref: ref, vertical: true }), void 0));
+    var heightProps = useVerticalDividerHeight({
+        ref: ref,
+        style: style,
+        maxHeight: maxHeight,
+    });
+    return _jsx(Divider, __assign({}, props, heightProps, { vertical: true }), void 0);
 });
 //# sourceMappingURL=VerticalDivider.js.map

lib/index.d.ts

@@ -5,2 +5,3 @@ /**
 export * from "./Divider";
+export * from "./useVerticalDividerHeight";
 export * from "./VerticalDivider";

lib/index.js

@@ -17,3 +17,4 @@ "use strict";
 __exportStar(require("./Divider"), exports);
+__exportStar(require("./useVerticalDividerHeight"), exports);
 __exportStar(require("./VerticalDivider"), exports);
 //# sourceMappingURL=index.js.map

lib/VerticalDivider.d.ts

@@ -1,27 +0,7 @@
-import { HTMLAttributes, Ref } from "react";
+import { HTMLAttributes } from "react";
 export interface VerticalDividerProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * The max height for the vertical divider. This number **must** be greater
-     * than 0 to work correctly.
-     *
-     * When the value is between 0 and 1, it will be used as a multiplier with the
-     * parent element's height. When the value is greater than 1, it will be used
-     * in `Math.min(parentElementHeight, maxHeight)`.
-     */
+    /** {@inheritDoc VerticalDividerHookOptions.maxHeight} */
     maxHeight?: number;
 }
-interface VerticalDividerHeight {
-    ref: (instance: HTMLDivElement | null) => void;
-    height: number | undefined;
-}
 /**
- * This is a small hook that is used to automatically create a vertical divider
- * based on the computed height of its parent element.
- *
- * @param maxHeight - The max height for the vertical divider. When the value is
- * between 0 and 1, it will be used as a percentage. Otherwise the smaller value
- * of parent element height and this will be used.
- */
-export declare function useVerticalDividerHeight(maxHeight: number, forwardedRef?: Ref<HTMLDivElement | null> | undefined): VerticalDividerHeight;
-/**
  * This component is used to create a vertical divider based on a parent
@@ -35,2 +15,1 @@ * element's height. This is really only needed when the parent element **has no
 export declare const VerticalDivider: import("react").ForwardRefExoticComponent<VerticalDividerProps & import("react").RefAttributes<HTMLDivElement>>;
-export {};

lib/VerticalDivider.js

@@ -24,54 +24,9 @@ "use strict";
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VerticalDivider = exports.useVerticalDividerHeight = void 0;
+exports.VerticalDivider = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var utils_1 = require("@react-md/utils");
 var Divider_1 = require("./Divider");
+var useVerticalDividerHeight_1 = require("./useVerticalDividerHeight");
 /**
- * This is a small hook that is used to automatically create a vertical divider
- * based on the computed height of its parent element.
- *
- * @param maxHeight - The max height for the vertical divider. When the value is
- * between 0 and 1, it will be used as a percentage. Otherwise the smaller value
- * of parent element height and this will be used.
- */
-function useVerticalDividerHeight(maxHeight, forwardedRef) {
-    if (process.env.NODE_ENV !== "production" && maxHeight < 0) {
-        throw new Error("The `maxHeight` for a vertical divider height must be greater than 0");
-    }
-    var _a = __read((0, react_1.useState)(undefined), 2), height = _a[0], setHeight = _a[1];
-    var ref = (0, react_1.useCallback)(function (instance) {
-        (0, utils_1.applyRef)(instance, forwardedRef);
-        if (!instance || !instance.parentElement) {
-            return;
-        }
-        var height = instance.parentElement.offsetHeight;
-        if (maxHeight <= 1) {
-            setHeight(height * maxHeight);
-        }
-        else {
-            setHeight(Math.min(height, maxHeight));
-        }
-    }, [maxHeight, forwardedRef]);
-    return { ref: ref, height: height };
-}
-exports.useVerticalDividerHeight = useVerticalDividerHeight;
-/**
  * This component is used to create a vertical divider based on a parent
@@ -84,7 +39,11 @@ * element's height. This is really only needed when the parent element **has no
  */
-exports.VerticalDivider = (0, react_1.forwardRef)(function VerticalDivider(_a, forwardedRef) {
+exports.VerticalDivider = (0, react_1.forwardRef)(function VerticalDivider(_a, ref) {
     var style = _a.style, _b = _a.maxHeight, maxHeight = _b === void 0 ? 1 : _b, props = __rest(_a, ["style", "maxHeight"]);
-    var _c = useVerticalDividerHeight(maxHeight, forwardedRef), ref = _c.ref, height = _c.height;
-    return ((0, jsx_runtime_1.jsx)(Divider_1.Divider, __assign({}, props, { style: __assign(__assign({}, style), { height: height }), ref: ref, vertical: true }), void 0));
+    var heightProps = (0, useVerticalDividerHeight_1.useVerticalDividerHeight)({
+        ref: ref,
+        style: style,
+        maxHeight: maxHeight,
+    });
+    return (0, jsx_runtime_1.jsx)(Divider_1.Divider, __assign({}, props, heightProps, { vertical: true }), void 0);
 });
 //# sourceMappingURL=VerticalDivider.js.map

package.json

 {
   "name": "@react-md/divider",
-  "version": "4.0.3",
+  "version": "5.0.0",
   "description": "This package is used to create horizontal or vertical dividers in your application.",
@@ -31,4 +31,4 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@react-md/theme": "^4.0.3",
-    "@react-md/utils": "^4.0.3",
+    "@react-md/theme": "^5.0.0",
+    "@react-md/utils": "^5.0.0",
     "classnames": "^2.3.1"
@@ -55,3 +55,3 @@ },
   },
-  "gitHead": "39edcb237de86528426b8011396f677b01b6a929"
+  "gitHead": "a67e871627db20ca8ee4b672f6e99f2f7f438c96"
 }

src/index.ts

@@ -5,3 +5,3 @@ /**
 export * from "./Divider";
-
+export * from "./useVerticalDividerHeight";
 export * from "./VerticalDivider";

types/index.d.ts

@@ -5,2 +5,3 @@ /**
 export * from "./Divider";
+export * from "./useVerticalDividerHeight";
 export * from "./VerticalDivider";

types/VerticalDivider.d.ts

@@ -1,27 +0,7 @@
-import { HTMLAttributes, Ref } from "react";
+import { HTMLAttributes } from "react";
 export interface VerticalDividerProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * The max height for the vertical divider. This number **must** be greater
-     * than 0 to work correctly.
-     *
-     * When the value is between 0 and 1, it will be used as a multiplier with the
-     * parent element's height. When the value is greater than 1, it will be used
-     * in `Math.min(parentElementHeight, maxHeight)`.
-     */
+    /** {@inheritDoc VerticalDividerHookOptions.maxHeight} */
     maxHeight?: number;
 }
-interface VerticalDividerHeight {
-    ref: (instance: HTMLDivElement | null) => void;
-    height: number | undefined;
-}
 /**
- * This is a small hook that is used to automatically create a vertical divider
- * based on the computed height of its parent element.
- *
- * @param maxHeight - The max height for the vertical divider. When the value is
- * between 0 and 1, it will be used as a percentage. Otherwise the smaller value
- * of parent element height and this will be used.
- */
-export declare function useVerticalDividerHeight(maxHeight: number, forwardedRef?: Ref<HTMLDivElement | null> | undefined): VerticalDividerHeight;
-/**
  * This component is used to create a vertical divider based on a parent
@@ -35,2 +15,1 @@ * element's height. This is really only needed when the parent element **has no
 export declare const VerticalDivider: import("react").ForwardRefExoticComponent<VerticalDividerProps & import("react").RefAttributes<HTMLDivElement>>;
-export {};

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

Total package byte prevSize

63899

increased by6.87%

Number of package files

44

increased by18.92%

Lines of code

685

increased by16.89%

Number of low supply chain risk alerts

0

decreased by-100%

Dependency changes

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

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

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

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

• Updated@react-md/theme@^5.0.0

• Updated@react-md/utils@^5.0.0