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

Comparing version 12.0.24 to 12.0.25

./build/esm/index.js

@@ -8,3 +8,7 @@ import { Loader } from "./Loader";
 import { SkeletonRadioButtonGroup } from "./skeletons/SkeletonRadioButtonGroup";
-import { SkeletonTable, SkeletonTableHeader, SkeletonTableRow } from "./skeletons/SkeletonTable";
+import {
+  SkeletonTable,
+  SkeletonTableHeader,
+  SkeletonTableRow
+} from "./skeletons/SkeletonTable";
 import { SkeletonTextArea } from "./skeletons/SkeletonTextArea";
@@ -11,0 +15,0 @@ export {

build/cjs/skeletons/SkeletonButton.js

@@ -36,3 +36,7 @@ "use strict";
 var import_SkeletonElement = require("./SkeletonElement");
-const SkeletonButton = ({ style, density, ...rest }) => {
+const SkeletonButton = ({
+  style,
+  density,
+  ...rest
+}) => {
   return /* @__PURE__ */ import_react.default.createElement(
@@ -39,0 +43,0 @@ import_SkeletonElement.SkeletonElement,

build/cjs/skeletons/SkeletonCheckboxGroup.js

@@ -47,4 +47,25 @@ "use strict";
   const compact = density === "compact";
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("jkl-skeleton-input", className), ...rest }, /* @__PURE__ */ import_react.default.createElement(import_SkeletonLabel.SkeletonLabel, { density, ...labelProps }), Array.from(Array(checkboxes)).map((_, index) => /* @__PURE__ */ import_react.default.createElement("div", { key: "jkl-skeleton-checkbox-".concat(index), className: "jkl-skeleton-input__checkbox" }, /* @__PURE__ */ import_react.default.createElement(import_SkeletonElement.SkeletonElement, { width: compact ? 22 : 24, height: compact ? 22 : 24 }), /* @__PURE__ */ import_react.default.createElement(import_SkeletonElement.SkeletonElement, { width: compact ? 201 : 216, height: compact ? 22 : 24, ...inputProps }))));
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("jkl-skeleton-input", className), ...rest }, /* @__PURE__ */ import_react.default.createElement(import_SkeletonLabel.SkeletonLabel, { density, ...labelProps }), Array.from(Array(checkboxes)).map((_, index) => /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      key: "jkl-skeleton-checkbox-".concat(index),
+      className: "jkl-skeleton-input__checkbox"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_SkeletonElement.SkeletonElement,
+      {
+        width: compact ? 22 : 24,
+        height: compact ? 22 : 24
+      }
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_SkeletonElement.SkeletonElement,
+      {
+        width: compact ? 201 : 216,
+        height: compact ? 22 : 24,
+        ...inputProps
+      }
+    )
+  )));
 };
 //# sourceMappingURL=SkeletonCheckboxGroup.js.map

build/cjs/skeletons/SkeletonElement.js

@@ -36,7 +36,18 @@ "use strict";
 var import_react = __toESM(require("react"));
-const SkeletonElement = ({ shape = "rect", width, height, style, className, ...rest }) => {
+const SkeletonElement = ({
+  shape = "rect",
+  width,
+  height,
+  style,
+  className,
+  ...rest
+}) => {
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
-      className: (0, import_classnames.default)("jkl-skeleton-element", "jkl-skeleton-element--".concat(shape), className),
+      className: (0, import_classnames.default)(
+        "jkl-skeleton-element",
+        "jkl-skeleton-element--".concat(shape),
+        className
+      ),
       style: { width, height, ...style },
@@ -43,0 +54,0 @@ ...rest

build/cjs/skeletons/SkeletonInput.js

@@ -38,6 +38,19 @@ "use strict";
 var import_SkeletonLabel = require("./SkeletonLabel");
-const SkeletonInput = ({ className, density, labelProps, inputProps, ...rest }) => {
+const SkeletonInput = ({
+  className,
+  density,
+  labelProps,
+  inputProps,
+  ...rest
+}) => {
   const compact = density === "compact";
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("jkl-skeleton-input", className), ...rest }, /* @__PURE__ */ import_react.default.createElement(import_SkeletonLabel.SkeletonLabel, { density, ...labelProps }), /* @__PURE__ */ import_react.default.createElement(import_SkeletonElement.SkeletonElement, { width: compact ? 301 : 316, height: compact ? 32 : 48, ...inputProps }));
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("jkl-skeleton-input", className), ...rest }, /* @__PURE__ */ import_react.default.createElement(import_SkeletonLabel.SkeletonLabel, { density, ...labelProps }), /* @__PURE__ */ import_react.default.createElement(
+    import_SkeletonElement.SkeletonElement,
+    {
+      width: compact ? 301 : 316,
+      height: compact ? 32 : 48,
+      ...inputProps
+    }
+  ));
 };
 //# sourceMappingURL=SkeletonInput.js.map

build/cjs/skeletons/SkeletonLabel.js

@@ -38,4 +38,11 @@ "use strict";
   const compact = density === "compact";
-  return /* @__PURE__ */ import_react.default.createElement(import_SkeletonElement.SkeletonElement, { ...rest, width: compact ? 100 : 115, height: compact ? 12 : 16 });
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_SkeletonElement.SkeletonElement,
+    {
+      ...rest,
+      width: compact ? 100 : 115,
+      height: compact ? 12 : 16
+    }
+  );
 };
 //# sourceMappingURL=SkeletonLabel.js.map

build/cjs/skeletons/SkeletonRadioButtonGroup.js

@@ -47,11 +47,26 @@ "use strict";
   const compact = density === "compact";
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("jkl-skeleton-input", className), ...rest }, /* @__PURE__ */ import_react.default.createElement(import_SkeletonLabel.SkeletonLabel, { density, ...labelProps }), Array.from(Array(radioButtons)).map((_, index) => /* @__PURE__ */ import_react.default.createElement("div", { key: "jkl-skeleton-checkbox-".concat(index), className: "jkl-skeleton-input__checkbox" }, /* @__PURE__ */ import_react.default.createElement(
-    import_SkeletonElement.SkeletonElement,
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("jkl-skeleton-input", className), ...rest }, /* @__PURE__ */ import_react.default.createElement(import_SkeletonLabel.SkeletonLabel, { density, ...labelProps }), Array.from(Array(radioButtons)).map((_, index) => /* @__PURE__ */ import_react.default.createElement(
+    "div",
     {
-      width: compact ? 22 : 24,
-      height: compact ? 22 : 24,
-      style: { borderRadius: "50%" }
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(import_SkeletonElement.SkeletonElement, { width: compact ? 201 : 216, height: compact ? 22 : 24, ...inputProps }))));
+      key: "jkl-skeleton-checkbox-".concat(index),
+      className: "jkl-skeleton-input__checkbox"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_SkeletonElement.SkeletonElement,
+      {
+        width: compact ? 22 : 24,
+        height: compact ? 22 : 24,
+        style: { borderRadius: "50%" }
+      }
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_SkeletonElement.SkeletonElement,
+      {
+        width: compact ? 201 : 216,
+        height: compact ? 22 : 24,
+        ...inputProps
+      }
+    )
+  )));
 };
 //# sourceMappingURL=SkeletonRadioButtonGroup.js.map

build/cjs/skeletons/SkeletonTable.js

@@ -38,3 +38,9 @@ "use strict";
 var import_react = __toESM(require("react"));
-const SkeletonTable = ({ className, density, width, style, ...rest }) => {
+const SkeletonTable = ({
+  className,
+  density,
+  width,
+  style,
+  ...rest
+}) => {
   return /* @__PURE__ */ import_react.default.createElement(
@@ -50,8 +56,20 @@ "div",
 };
-const SkeletonTableHeader = ({ className, ...rest }) => {
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("jkl-skeleton-table__header", className), ...rest });
+const SkeletonTableHeader = ({
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)("jkl-skeleton-table__header", className),
+      ...rest
+    }
+  );
 };
-const SkeletonTableRow = ({ className, ...rest }) => {
+const SkeletonTableRow = ({
+  className,
+  ...rest
+}) => {
   return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("jkl-skeleton-table__row", className), ...rest });
 };
 //# sourceMappingURL=SkeletonTable.js.map

build/cjs/skeletons/SkeletonTextArea.js

@@ -38,6 +38,28 @@ "use strict";
 var import_SkeletonLabel = require("./SkeletonLabel");
-const SkeletonTextArea = ({ className, density, labelProps, inputProps, ...rest }) => {
+const SkeletonTextArea = ({
+  className,
+  density,
+  labelProps,
+  inputProps,
+  ...rest
+}) => {
   const compact = density === "compact";
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("jkl-skeleton-input", className), ...rest, "data-density": density }, /* @__PURE__ */ import_react.default.createElement(import_SkeletonLabel.SkeletonLabel, { density, ...labelProps }), /* @__PURE__ */ import_react.default.createElement(import_SkeletonElement.SkeletonElement, { width: compact ? 301 : 316, height: compact ? 148 : 168, ...inputProps }));
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)("jkl-skeleton-input", className),
+      ...rest,
+      "data-density": density
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_SkeletonLabel.SkeletonLabel, { density, ...labelProps }),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_SkeletonElement.SkeletonElement,
+      {
+        width: compact ? 301 : 316,
+        height: compact ? 148 : 168,
+        ...inputProps
+      }
+    )
+  );
 };
 //# sourceMappingURL=SkeletonTextArea.js.map

build/cjs/useDelayedRender.js

@@ -26,3 +26,5 @@ "use strict";
 function useDelayedRender(delayMilliseconds) {
-  const [renderComponent, setRenderComponent] = (0, import_react.useState)(delayMilliseconds === 0 ? true : false);
+  const [renderComponent, setRenderComponent] = (0, import_react.useState)(
+    delayMilliseconds === 0 ? true : false
+  );
   (0, import_react.useEffect)(() => {
@@ -32,3 +34,6 @@ if (delayMilliseconds === 0) {
     }
-    const timeout = setTimeout(() => setRenderComponent(true), delayMilliseconds);
+    const timeout = setTimeout(
+      () => setRenderComponent(true),
+      delayMilliseconds
+    );
     return () => clearTimeout(timeout);
@@ -35,0 +40,0 @@ }, [delayMilliseconds, setRenderComponent]);

build/esm/index.js

@@ -8,3 +8,7 @@ import { Loader } from "./Loader";
 import { SkeletonRadioButtonGroup } from "./skeletons/SkeletonRadioButtonGroup";
-import { SkeletonTable, SkeletonTableHeader, SkeletonTableRow } from "./skeletons/SkeletonTable";
+import {
+  SkeletonTable,
+  SkeletonTableHeader,
+  SkeletonTableRow
+} from "./skeletons/SkeletonTable";
 import { SkeletonTextArea } from "./skeletons/SkeletonTextArea";
@@ -11,0 +15,0 @@ export {

build/esm/skeletons/SkeletonButton.js

 import React from "react";
 import { SkeletonElement } from "./SkeletonElement";
-const SkeletonButton = ({ style, density, ...rest }) => {
+const SkeletonButton = ({
+  style,
+  density,
+  ...rest
+}) => {
   return /* @__PURE__ */ React.createElement(
@@ -5,0 +9,0 @@ SkeletonElement,

build/esm/skeletons/SkeletonCheckboxGroup.js

@@ -14,3 +14,24 @@ import cn from "classnames";
   const compact = density === "compact";
-  return /* @__PURE__ */ React.createElement("div", { className: cn("jkl-skeleton-input", className), ...rest }, /* @__PURE__ */ React.createElement(SkeletonLabel, { density, ...labelProps }), Array.from(Array(checkboxes)).map((_, index) => /* @__PURE__ */ React.createElement("div", { key: "jkl-skeleton-checkbox-".concat(index), className: "jkl-skeleton-input__checkbox" }, /* @__PURE__ */ React.createElement(SkeletonElement, { width: compact ? 22 : 24, height: compact ? 22 : 24 }), /* @__PURE__ */ React.createElement(SkeletonElement, { width: compact ? 201 : 216, height: compact ? 22 : 24, ...inputProps }))));
+  return /* @__PURE__ */ React.createElement("div", { className: cn("jkl-skeleton-input", className), ...rest }, /* @__PURE__ */ React.createElement(SkeletonLabel, { density, ...labelProps }), Array.from(Array(checkboxes)).map((_, index) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      key: "jkl-skeleton-checkbox-".concat(index),
+      className: "jkl-skeleton-input__checkbox"
+    },
+    /* @__PURE__ */ React.createElement(
+      SkeletonElement,
+      {
+        width: compact ? 22 : 24,
+        height: compact ? 22 : 24
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      SkeletonElement,
+      {
+        width: compact ? 201 : 216,
+        height: compact ? 22 : 24,
+        ...inputProps
+      }
+    )
+  )));
 };
@@ -17,0 +38,0 @@ export {

build/esm/skeletons/SkeletonElement.js

 import cn from "classnames";
 import React from "react";
-const SkeletonElement = ({ shape = "rect", width, height, style, className, ...rest }) => {
+const SkeletonElement = ({
+  shape = "rect",
+  width,
+  height,
+  style,
+  className,
+  ...rest
+}) => {
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: cn("jkl-skeleton-element", "jkl-skeleton-element--".concat(shape), className),
+      className: cn(
+        "jkl-skeleton-element",
+        "jkl-skeleton-element--".concat(shape),
+        className
+      ),
       style: { width, height, ...style },
@@ -9,0 +20,0 @@ ...rest

build/esm/skeletons/SkeletonInput.js

@@ -5,5 +5,18 @@ import cn from "classnames";
 import { SkeletonLabel } from "./SkeletonLabel";
-const SkeletonInput = ({ className, density, labelProps, inputProps, ...rest }) => {
+const SkeletonInput = ({
+  className,
+  density,
+  labelProps,
+  inputProps,
+  ...rest
+}) => {
   const compact = density === "compact";
-  return /* @__PURE__ */ React.createElement("div", { className: cn("jkl-skeleton-input", className), ...rest }, /* @__PURE__ */ React.createElement(SkeletonLabel, { density, ...labelProps }), /* @__PURE__ */ React.createElement(SkeletonElement, { width: compact ? 301 : 316, height: compact ? 32 : 48, ...inputProps }));
+  return /* @__PURE__ */ React.createElement("div", { className: cn("jkl-skeleton-input", className), ...rest }, /* @__PURE__ */ React.createElement(SkeletonLabel, { density, ...labelProps }), /* @__PURE__ */ React.createElement(
+    SkeletonElement,
+    {
+      width: compact ? 301 : 316,
+      height: compact ? 32 : 48,
+      ...inputProps
+    }
+  ));
 };
@@ -10,0 +23,0 @@ export {

build/esm/skeletons/SkeletonLabel.js

@@ -5,3 +5,10 @@ import React from "react";
   const compact = density === "compact";
-  return /* @__PURE__ */ React.createElement(SkeletonElement, { ...rest, width: compact ? 100 : 115, height: compact ? 12 : 16 });
+  return /* @__PURE__ */ React.createElement(
+    SkeletonElement,
+    {
+      ...rest,
+      width: compact ? 100 : 115,
+      height: compact ? 12 : 16
+    }
+  );
 };
@@ -8,0 +15,0 @@ export {

build/esm/skeletons/SkeletonRadioButtonGroup.js

@@ -14,10 +14,25 @@ import cn from "classnames";
   const compact = density === "compact";
-  return /* @__PURE__ */ React.createElement("div", { className: cn("jkl-skeleton-input", className), ...rest }, /* @__PURE__ */ React.createElement(SkeletonLabel, { density, ...labelProps }), Array.from(Array(radioButtons)).map((_, index) => /* @__PURE__ */ React.createElement("div", { key: "jkl-skeleton-checkbox-".concat(index), className: "jkl-skeleton-input__checkbox" }, /* @__PURE__ */ React.createElement(
-    SkeletonElement,
+  return /* @__PURE__ */ React.createElement("div", { className: cn("jkl-skeleton-input", className), ...rest }, /* @__PURE__ */ React.createElement(SkeletonLabel, { density, ...labelProps }), Array.from(Array(radioButtons)).map((_, index) => /* @__PURE__ */ React.createElement(
+    "div",
     {
-      width: compact ? 22 : 24,
-      height: compact ? 22 : 24,
-      style: { borderRadius: "50%" }
-    }
-  ), /* @__PURE__ */ React.createElement(SkeletonElement, { width: compact ? 201 : 216, height: compact ? 22 : 24, ...inputProps }))));
+      key: "jkl-skeleton-checkbox-".concat(index),
+      className: "jkl-skeleton-input__checkbox"
+    },
+    /* @__PURE__ */ React.createElement(
+      SkeletonElement,
+      {
+        width: compact ? 22 : 24,
+        height: compact ? 22 : 24,
+        style: { borderRadius: "50%" }
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      SkeletonElement,
+      {
+        width: compact ? 201 : 216,
+        height: compact ? 22 : 24,
+        ...inputProps
+      }
+    )
+  )));
 };
@@ -24,0 +39,0 @@ export {

build/esm/skeletons/SkeletonTable.js

 import cn from "classnames";
 import React from "react";
-const SkeletonTable = ({ className, density, width, style, ...rest }) => {
+const SkeletonTable = ({
+  className,
+  density,
+  width,
+  style,
+  ...rest
+}) => {
   return /* @__PURE__ */ React.createElement(
@@ -14,6 +20,18 @@ "div",
 };
-const SkeletonTableHeader = ({ className, ...rest }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: cn("jkl-skeleton-table__header", className), ...rest });
+const SkeletonTableHeader = ({
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn("jkl-skeleton-table__header", className),
+      ...rest
+    }
+  );
 };
-const SkeletonTableRow = ({ className, ...rest }) => {
+const SkeletonTableRow = ({
+  className,
+  ...rest
+}) => {
   return /* @__PURE__ */ React.createElement("div", { className: cn("jkl-skeleton-table__row", className), ...rest });
@@ -20,0 +38,0 @@ };

build/esm/skeletons/SkeletonTextArea.js

@@ -5,5 +5,27 @@ import cn from "classnames";
 import { SkeletonLabel } from "./SkeletonLabel";
-const SkeletonTextArea = ({ className, density, labelProps, inputProps, ...rest }) => {
+const SkeletonTextArea = ({
+  className,
+  density,
+  labelProps,
+  inputProps,
+  ...rest
+}) => {
   const compact = density === "compact";
-  return /* @__PURE__ */ React.createElement("div", { className: cn("jkl-skeleton-input", className), ...rest, "data-density": density }, /* @__PURE__ */ React.createElement(SkeletonLabel, { density, ...labelProps }), /* @__PURE__ */ React.createElement(SkeletonElement, { width: compact ? 301 : 316, height: compact ? 148 : 168, ...inputProps }));
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn("jkl-skeleton-input", className),
+      ...rest,
+      "data-density": density
+    },
+    /* @__PURE__ */ React.createElement(SkeletonLabel, { density, ...labelProps }),
+    /* @__PURE__ */ React.createElement(
+      SkeletonElement,
+      {
+        width: compact ? 301 : 316,
+        height: compact ? 148 : 168,
+        ...inputProps
+      }
+    )
+  );
 };
@@ -10,0 +32,0 @@ export {

build/esm/useDelayedRender.js

 import { useEffect, useState } from "react";
 function useDelayedRender(delayMilliseconds) {
-  const [renderComponent, setRenderComponent] = useState(delayMilliseconds === 0 ? true : false);
+  const [renderComponent, setRenderComponent] = useState(
+    delayMilliseconds === 0 ? true : false
+  );
   useEffect(() => {
@@ -8,3 +10,6 @@ if (delayMilliseconds === 0) {
     }
-    const timeout = setTimeout(() => setRenderComponent(true), delayMilliseconds);
+    const timeout = setTimeout(
+      () => setRenderComponent(true),
+      delayMilliseconds
+    );
     return () => clearTimeout(timeout);
@@ -11,0 +16,0 @@ }, [delayMilliseconds, setRenderComponent]);

build/index.d.ts

@@ -15,5 +15,5 @@ export { Loader } from "./Loader";
 export { SkeletonRadioButtonGroup } from "./skeletons/SkeletonRadioButtonGroup";
-export type { SkeletonTableProps, SkeletonTableHeaderProps, SkeletonTableRowProps } from "./skeletons/SkeletonTable";
-export { SkeletonTable, SkeletonTableHeader, SkeletonTableRow } from "./skeletons/SkeletonTable";
+export type { SkeletonTableProps, SkeletonTableHeaderProps, SkeletonTableRowProps, } from "./skeletons/SkeletonTable";
+export { SkeletonTable, SkeletonTableHeader, SkeletonTableRow, } from "./skeletons/SkeletonTable";
 export type { SkeletonTextAreaProps } from "./skeletons/SkeletonTextArea";
 export { SkeletonTextArea } from "./skeletons/SkeletonTextArea";

package.json

 {
     "name": "@fremtind/jkl-loader-react",
-    "version": "12.0.24",
+    "version": "12.0.25",
     "publishConfig": {
@@ -40,4 +40,4 @@ "access": "public"
     "dependencies": {
-        "@fremtind/jkl-core": "^14.8.1",
-        "@fremtind/jkl-loader": "^11.0.23",
+        "@fremtind/jkl-core": "^14.8.2",
+        "@fremtind/jkl-loader": "^11.0.24",
         "classnames": "^2.3.2"
@@ -58,3 +58,3 @@ },
     },
-    "gitHead": "9c4193c00f51b351ca7c65f951c78adf682c2c15"
+    "gitHead": "82508b6f72780226367f81cd8a6a2f5417484c9a"
 }

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

92114

increased by4.77%

Lines of code

1278

increased by22.3%

Dependency changes

• Updated@fremtind/jkl-core@^14.8.2

• Updated@fremtind/jkl-loader@^11.0.24