@fremtind/jkl-react-hooks - npm Package Compare versions

Comparing version 12.0.0 to 12.0.1

build/cjs/useAnimatedHeight/useAnimatedHeight.js

@@ -36,3 +36,3 @@ "use strict";
   const display = (options == null ? void 0 : options.display) || defaultDisplay;
-  const transition = `${import_jkl_core.timings[timing]} height ${import_jkl_core.easings[easing]}`;
+  const transition = "".concat(import_jkl_core.timings[timing], " height ").concat(import_jkl_core.easings[easing]);
   const { prefersReducedMotion } = (0, import_useBrowserPreferences.useBrowserPreferences)();
@@ -84,3 +84,3 @@ const raf1 = (0, import_react.useRef)();
       element.style.height = "0";
-      element.style.height = `${element.scrollHeight}px`;
+      element.style.height = "".concat(element.scrollHeight, "px");
     } else {
@@ -91,6 +91,6 @@ if (element.scrollHeight === 0) {
       }
-      element.style.height = `${element.scrollHeight}px`;
+      element.style.height = "".concat(element.scrollHeight, "px");
       raf1.current = requestAnimationFrame(() => {
         raf2.current = requestAnimationFrame(() => {
-          element.style.height = `${0}px`;
+          element.style.height = "".concat(0, "px");
         });
@@ -97,0 +97,0 @@ });

build/cjs/useAnimatedHeight/useAnimatedHeightBetween.js

@@ -41,7 +41,7 @@ "use strict";
     element.dataset["expanded"] = "true";
-    element.style.setProperty("height", `${expandedHeight}px`);
+    element.style.setProperty("height", "".concat(expandedHeight, "px"));
     element.style.setProperty("overflow-y", "hidden");
     raf2.current = requestAnimationFrame(() => {
       element.style.setProperty("transition", transition);
-      element.style.setProperty("height", `${collapsedHeight}px`);
+      element.style.setProperty("height", "".concat(collapsedHeight, "px"));
       element.dataset["expanded"] = "false";
@@ -61,7 +61,7 @@ });
     const collapsedHeight = element.getBoundingClientRect().height;
-    element.style.setProperty("height", `${collapsedHeight}px`);
+    element.style.setProperty("height", "".concat(collapsedHeight, "px"));
     element.style.setProperty("overflow-y", "hidden");
     raf2.current = requestAnimationFrame(() => {
       element.style.setProperty("transition", transition);
-      element.style.setProperty("height", `${expandedHeight}px`);
+      element.style.setProperty("height", "".concat(expandedHeight, "px"));
       element.dataset["expanded"] = "true";
@@ -75,3 +75,3 @@ });
   const timing = (options == null ? void 0 : options.timing) || defaultTiming;
-  const transition = `${import_jkl_core.timings[timing]} height ${import_jkl_core.easings[easing]}`;
+  const transition = "".concat(import_jkl_core.timings[timing], " height ").concat(import_jkl_core.easings[easing]);
   const { prefersReducedMotion } = (0, import_useBrowserPreferences.useBrowserPreferences)();
@@ -78,0 +78,0 @@ const raf1 = (0, import_react.useRef)();

build/cjs/useAnimatedHeight/useAutoAnimateHeight.js

@@ -35,3 +35,3 @@ "use strict";
   const timing = (options == null ? void 0 : options.timing) || defaultTiming;
-  const transition = `${import_jkl_core.timings[timing]} height ${import_jkl_core.easings[easing]}`;
+  const transition = "".concat(import_jkl_core.timings[timing], " height ").concat(import_jkl_core.easings[easing]);
   const { prefersReducedMotion } = (0, import_useBrowserPreferences.useBrowserPreferences)();
@@ -60,7 +60,7 @@ const raf1 = (0, import_react.useRef)();
       element.style.removeProperty("transition");
-      element.style.setProperty("height", `${previousHeight}px`);
+      element.style.setProperty("height", "".concat(previousHeight, "px"));
       element.style.setProperty("overflow-y", "hidden");
       raf2.current = requestAnimationFrame(() => {
         element.style.setProperty("transition", transition);
-        element.style.setProperty("height", `${newHeight}px`);
+        element.style.setProperty("height", "".concat(newHeight, "px"));
       });
@@ -67,0 +67,0 @@ });

build/cjs/useId.js

@@ -44,3 +44,3 @@ "use strict";
   if (id && options.generateSuffix) {
-    elementId = `${id}-${uid}`;
+    elementId = "".concat(id, "-").concat(uid);
   }
@@ -54,3 +54,3 @@ const [elId] = import_react.default.useState(elementId || uid);
   if (id && options.generateSuffix) {
-    elementId = `${id}-${uid}`;
+    elementId = "".concat(id, "-").concat(uid);
   }
@@ -57,0 +57,0 @@ const [elId] = import_react.default.useState(elementId || uid);

build/cjs/useListNavigation.js

@@ -101,3 +101,3 @@ "use strict";
     case "first":
-      const firstItem = list.querySelector(`[role="option"]`);
+      const firstItem = list.querySelector('[role="option"]');
       if (firstItem) {
@@ -108,3 +108,3 @@ firstItem.focus();
     case "last":
-      const listItems = list.querySelectorAll(`[role="option"]`);
+      const listItems = list.querySelectorAll('[role="option"]');
       if (listItems.length) {
@@ -117,3 +117,3 @@ listItems[listItems.length - 1].focus();
 function findItem({ list, key, search, searchResetTimer }) {
-  const listItems = list.querySelectorAll(`[role="option"]`);
+  const listItems = list.querySelectorAll('[role="option"]');
   if (!listItems.length)
@@ -120,0 +120,0 @@ return null;

build/cjs/useScreen/useScreen.js

@@ -29,6 +29,6 @@ "use strict";
 const MEDIA_RULES = {
-  isSmallDevice: `(max-width: ${import_jkl_core.breakpoints.medium - 1}px)`,
-  isMediumDevice: `(min-width: ${import_jkl_core.breakpoints.medium}px) and (max-width: ${import_jkl_core.breakpoints.large - 1}px)`,
-  isLargeDevice: `(min-width: ${import_jkl_core.breakpoints.large}px) and (max-width: ${import_jkl_core.breakpoints.xl - 1}px)`,
-  isXlDevice: `(min-width: ${import_jkl_core.breakpoints.xl}px)`,
+  isSmallDevice: "(max-width: ".concat(import_jkl_core.breakpoints.medium - 1, "px)"),
+  isMediumDevice: "(min-width: ".concat(import_jkl_core.breakpoints.medium, "px) and (max-width: ").concat(import_jkl_core.breakpoints.large - 1, "px)"),
+  isLargeDevice: "(min-width: ".concat(import_jkl_core.breakpoints.large, "px) and (max-width: ").concat(import_jkl_core.breakpoints.xl - 1, "px)"),
+  isXlDevice: "(min-width: ".concat(import_jkl_core.breakpoints.xl, "px)"),
   isPortrait: "(orientation: portrait)",
@@ -35,0 +35,0 @@ isLandscape: "(orientation: landscape)"

build/esm/useAnimatedHeight/useAnimatedHeight.js

@@ -13,3 +13,3 @@ import { easings, timings } from "@fremtind/jkl-core";
   const display = (options == null ? void 0 : options.display) || defaultDisplay;
-  const transition = `${timings[timing]} height ${easings[easing]}`;
+  const transition = "".concat(timings[timing], " height ").concat(easings[easing]);
   const { prefersReducedMotion } = useBrowserPreferences();
@@ -61,3 +61,3 @@ const raf1 = useRef();
       element.style.height = "0";
-      element.style.height = `${element.scrollHeight}px`;
+      element.style.height = "".concat(element.scrollHeight, "px");
     } else {
@@ -68,6 +68,6 @@ if (element.scrollHeight === 0) {
       }
-      element.style.height = `${element.scrollHeight}px`;
+      element.style.height = "".concat(element.scrollHeight, "px");
       raf1.current = requestAnimationFrame(() => {
         raf2.current = requestAnimationFrame(() => {
-          element.style.height = `${0}px`;
+          element.style.height = "".concat(0, "px");
         });
@@ -74,0 +74,0 @@ });

build/esm/useAnimatedHeight/useAnimatedHeightBetween.js

@@ -18,7 +18,7 @@ import { timings, easings } from "@fremtind/jkl-core";
     element.dataset["expanded"] = "true";
-    element.style.setProperty("height", `${expandedHeight}px`);
+    element.style.setProperty("height", "".concat(expandedHeight, "px"));
     element.style.setProperty("overflow-y", "hidden");
     raf2.current = requestAnimationFrame(() => {
       element.style.setProperty("transition", transition);
-      element.style.setProperty("height", `${collapsedHeight}px`);
+      element.style.setProperty("height", "".concat(collapsedHeight, "px"));
       element.dataset["expanded"] = "false";
@@ -38,7 +38,7 @@ });
     const collapsedHeight = element.getBoundingClientRect().height;
-    element.style.setProperty("height", `${collapsedHeight}px`);
+    element.style.setProperty("height", "".concat(collapsedHeight, "px"));
     element.style.setProperty("overflow-y", "hidden");
     raf2.current = requestAnimationFrame(() => {
       element.style.setProperty("transition", transition);
-      element.style.setProperty("height", `${expandedHeight}px`);
+      element.style.setProperty("height", "".concat(expandedHeight, "px"));
       element.dataset["expanded"] = "true";
@@ -52,3 +52,3 @@ });
   const timing = (options == null ? void 0 : options.timing) || defaultTiming;
-  const transition = `${timings[timing]} height ${easings[easing]}`;
+  const transition = "".concat(timings[timing], " height ").concat(easings[easing]);
   const { prefersReducedMotion } = useBrowserPreferences();
@@ -55,0 +55,0 @@ const raf1 = useRef();

build/esm/useAnimatedHeight/useAutoAnimateHeight.js

@@ -12,3 +12,3 @@ import { easings, timings } from "@fremtind/jkl-core";
   const timing = (options == null ? void 0 : options.timing) || defaultTiming;
-  const transition = `${timings[timing]} height ${easings[easing]}`;
+  const transition = "".concat(timings[timing], " height ").concat(easings[easing]);
   const { prefersReducedMotion } = useBrowserPreferences();
@@ -37,7 +37,7 @@ const raf1 = useRef();
       element.style.removeProperty("transition");
-      element.style.setProperty("height", `${previousHeight}px`);
+      element.style.setProperty("height", "".concat(previousHeight, "px"));
       element.style.setProperty("overflow-y", "hidden");
       raf2.current = requestAnimationFrame(() => {
         element.style.setProperty("transition", transition);
-        element.style.setProperty("height", `${newHeight}px`);
+        element.style.setProperty("height", "".concat(newHeight, "px"));
       });
@@ -44,0 +44,0 @@ });

build/esm/useId.js

@@ -11,3 +11,3 @@ import { nanoid } from "nanoid";
   if (id && options.generateSuffix) {
-    elementId = `${id}-${uid}`;
+    elementId = "".concat(id, "-").concat(uid);
   }
@@ -21,3 +21,3 @@ const [elId] = React.useState(elementId || uid);
   if (id && options.generateSuffix) {
-    elementId = `${id}-${uid}`;
+    elementId = "".concat(id, "-").concat(uid);
   }
@@ -24,0 +24,0 @@ const [elId] = React.useState(elementId || uid);

build/esm/useListNavigation.js

@@ -78,3 +78,3 @@ import { useEffect } from "react";
     case "first":
-      const firstItem = list.querySelector(`[role="option"]`);
+      const firstItem = list.querySelector('[role="option"]');
       if (firstItem) {
@@ -85,3 +85,3 @@ firstItem.focus();
     case "last":
-      const listItems = list.querySelectorAll(`[role="option"]`);
+      const listItems = list.querySelectorAll('[role="option"]');
       if (listItems.length) {
@@ -94,3 +94,3 @@ listItems[listItems.length - 1].focus();
 function findItem({ list, key, search, searchResetTimer }) {
-  const listItems = list.querySelectorAll(`[role="option"]`);
+  const listItems = list.querySelectorAll('[role="option"]');
   if (!listItems.length)
@@ -97,0 +97,0 @@ return null;

build/esm/useScreen/useScreen.js

@@ -6,6 +6,6 @@ import { breakpoints } from "@fremtind/jkl-core";
 const MEDIA_RULES = {
-  isSmallDevice: `(max-width: ${breakpoints.medium - 1}px)`,
-  isMediumDevice: `(min-width: ${breakpoints.medium}px) and (max-width: ${breakpoints.large - 1}px)`,
-  isLargeDevice: `(min-width: ${breakpoints.large}px) and (max-width: ${breakpoints.xl - 1}px)`,
-  isXlDevice: `(min-width: ${breakpoints.xl}px)`,
+  isSmallDevice: "(max-width: ".concat(breakpoints.medium - 1, "px)"),
+  isMediumDevice: "(min-width: ".concat(breakpoints.medium, "px) and (max-width: ").concat(breakpoints.large - 1, "px)"),
+  isLargeDevice: "(min-width: ".concat(breakpoints.large, "px) and (max-width: ").concat(breakpoints.xl - 1, "px)"),
+  isXlDevice: "(min-width: ".concat(breakpoints.xl, "px)"),
   isPortrait: "(orientation: portrait)",
@@ -12,0 +12,0 @@ isLandscape: "(orientation: landscape)"

package.json

 {
     "name": "@fremtind/jkl-react-hooks",
-    "version": "12.0.0",
+    "version": "12.0.1",
     "publishConfig": {
@@ -41,3 +41,3 @@ "access": "public"
     "dependencies": {
-        "@fremtind/jkl-core": "^13.0.0",
+        "@fremtind/jkl-core": "^13.0.1",
         "nanoid": "^3.3.6"
@@ -58,3 +58,3 @@ },
     },
-    "gitHead": "dc186201b35de12936fd8944b5ff713437312239"
+    "gitHead": "a3f698343dbc966239d274bb0b55b193c5c23a9e"
 }

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

Improved metrics

Total package byte prevSize

267232

increased by0.25%

Dependency changes

• Updated@fremtind/jkl-core@^13.0.1