@imtf/icons 0.6.0 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/lib/components/IconSVG.d.ts +1 -1
  2. package/lib/components/IconSVG.js +25 -20
  3. package/lib/components/IconSVG.mjs +26 -21
  4. package/lib/components/IconSVG.spec.d.ts +1 -0
  5. package/lib/tests/setup.d.ts +6 -0
  6. package/package.json +7 -1
package/lib/components/IconSVG.d.ts CHANGED
@@ -5,5 +5,5 @@ type IconSVGProps = {
5
5
  src?: string;
6
6
  children?: ReactElement;
7
7
  };
8
- export declare const IconSVG: import("react").ForwardRefExoticComponent<IconSVGProps & import("react").RefAttributes<import("react").FC<{}>>>;
8
+ export declare const IconSVG: import("react").ForwardRefExoticComponent<IconSVGProps & import("react").RefAttributes<HTMLDivElement | SVGSVGElement>>;
9
9
  export {};
package/lib/components/IconSVG.js CHANGED
@@ -4,7 +4,9 @@ const jsxRuntime = require("react/jsx-runtime");
4
4
  const react = require("react");
5
5
  const Context = require("../providers/IconProvider/Context.js");
6
6
  const get = require("../utils/get.js");
7
- const IconComponent = ({ color: defaultColor, size, src, children, ...props }, ref) => {
7
+ const IconComponent = ({ color: defaultColor, size, src, children, ...props }, outerRef) => {
8
+ const innerRef = react.useRef(null);
9
+ react.useImperativeHandle(outerRef, () => innerRef.current, []);
8
10
  const defaultContextValues = react.useContext(Context.IconContext);
9
11
  const defaultValues = {
10
12
  ...defaultContextValues,
@@ -16,23 +18,26 @@ const IconComponent = ({ color: defaultColor, size, src, children, ...props }, r
16
18
  return typeof color2 === "string" ? color2 : defaultValues.color;
17
19
  }, [defaultValues.color, defaultValues.palette]);
18
20
  react.useEffect(() => {
19
- if (src && !children) {
20
- const wrapper = document.getElementById("SVGWrapper");
21
- wrapper.innerHTML = atob(
22
- src.startsWith("data") ? src.split(",")[1] : src
23
- );
24
- const svg = wrapper == null ? void 0 : wrapper.children;
25
- const path = svg == null ? void 0 : svg[0].firstElementChild;
26
- svg == null ? void 0 : svg[0].setAttribute(
27
- "width",
28
- typeof defaultValues.size === "number" ? defaultValues.size + "px" : defaultValues.size
29
- );
30
- svg == null ? void 0 : svg[0].setAttribute(
31
- "height",
32
- typeof defaultValues.size === "number" ? defaultValues.size + "px" : defaultValues.size
33
- );
34
- path == null ? void 0 : path.setAttribute("fill", color);
35
- path == null ? void 0 : path.setAttribute("color", color);
21
+ if (innerRef.current && src && !children) {
22
+ const { current: wrapper } = innerRef;
23
+ try {
24
+ wrapper.innerHTML = atob(
25
+ src.startsWith("data") ? src.split(",")[1] : src
26
+ );
27
+ const svg = wrapper.children;
28
+ const path = svg[0].firstElementChild;
29
+ svg == null ? void 0 : svg[0].setAttribute(
30
+ "width",
31
+ typeof defaultValues.size === "number" ? defaultValues.size + "px" : defaultValues.size
32
+ );
33
+ svg == null ? void 0 : svg[0].setAttribute(
34
+ "height",
35
+ typeof defaultValues.size === "number" ? defaultValues.size + "px" : defaultValues.size
36
+ );
37
+ path == null ? void 0 : path.setAttribute("fill", color);
38
+ path == null ? void 0 : path.setAttribute("color", color);
39
+ } catch {
40
+ }
36
41
  }
37
42
  }, [color, src, children, size, defaultValues.size]);
38
43
  if (children) {
@@ -41,12 +46,12 @@ const IconComponent = ({ color: defaultColor, size, src, children, ...props }, r
41
46
  color,
42
47
  width: defaultValues.size,
43
48
  height: defaultValues.size,
44
- ref,
49
+ ref: innerRef,
45
50
  ...props
46
51
  });
47
52
  }
48
53
  if (src) {
49
- return /* @__PURE__ */ jsxRuntime.jsx("div", { id: "SVGWrapper" });
54
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: innerRef });
50
55
  }
51
56
  return null;
52
57
  };
package/lib/components/IconSVG.mjs CHANGED
@@ -1,8 +1,10 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { forwardRef, useContext, useMemo, useEffect, cloneElement } from "react";
2
+ import { forwardRef, useRef, useImperativeHandle, useContext, useMemo, useEffect, cloneElement } from "react";
3
3
  import { IconContext } from "../providers/IconProvider/Context.mjs";
4
4
  import get from "../utils/get.mjs";
5
- const IconComponent = ({ color: defaultColor, size, src, children, ...props }, ref) => {
5
+ const IconComponent = ({ color: defaultColor, size, src, children, ...props }, outerRef) => {
6
+ const innerRef = useRef(null);
7
+ useImperativeHandle(outerRef, () => innerRef.current, []);
6
8
  const defaultContextValues = useContext(IconContext);
7
9
  const defaultValues = {
8
10
  ...defaultContextValues,
@@ -14,23 +16,26 @@ const IconComponent = ({ color: defaultColor, size, src, children, ...props }, r
14
16
  return typeof color2 === "string" ? color2 : defaultValues.color;
15
17
  }, [defaultValues.color, defaultValues.palette]);
16
18
  useEffect(() => {
17
- if (src && !children) {
18
- const wrapper = document.getElementById("SVGWrapper");
19
- wrapper.innerHTML = atob(
20
- src.startsWith("data") ? src.split(",")[1] : src
21
- );
22
- const svg = wrapper == null ? void 0 : wrapper.children;
23
- const path = svg == null ? void 0 : svg[0].firstElementChild;
24
- svg == null ? void 0 : svg[0].setAttribute(
25
- "width",
26
- typeof defaultValues.size === "number" ? defaultValues.size + "px" : defaultValues.size
27
- );
28
- svg == null ? void 0 : svg[0].setAttribute(
29
- "height",
30
- typeof defaultValues.size === "number" ? defaultValues.size + "px" : defaultValues.size
31
- );
32
- path == null ? void 0 : path.setAttribute("fill", color);
33
- path == null ? void 0 : path.setAttribute("color", color);
19
+ if (innerRef.current && src && !children) {
20
+ const { current: wrapper } = innerRef;
21
+ try {
22
+ wrapper.innerHTML = atob(
23
+ src.startsWith("data") ? src.split(",")[1] : src
24
+ );
25
+ const svg = wrapper.children;
26
+ const path = svg[0].firstElementChild;
27
+ svg == null ? void 0 : svg[0].setAttribute(
28
+ "width",
29
+ typeof defaultValues.size === "number" ? defaultValues.size + "px" : defaultValues.size
30
+ );
31
+ svg == null ? void 0 : svg[0].setAttribute(
32
+ "height",
33
+ typeof defaultValues.size === "number" ? defaultValues.size + "px" : defaultValues.size
34
+ );
35
+ path == null ? void 0 : path.setAttribute("fill", color);
36
+ path == null ? void 0 : path.setAttribute("color", color);
37
+ } catch {
38
+ }
34
39
  }
35
40
  }, [color, src, children, size, defaultValues.size]);
36
41
  if (children) {
@@ -39,12 +44,12 @@ const IconComponent = ({ color: defaultColor, size, src, children, ...props }, r
39
44
  color,
40
45
  width: defaultValues.size,
41
46
  height: defaultValues.size,
42
- ref,
47
+ ref: innerRef,
43
48
  ...props
44
49
  });
45
50
  }
46
51
  if (src) {
47
- return /* @__PURE__ */ jsx("div", { id: "SVGWrapper" });
52
+ return /* @__PURE__ */ jsx("div", { ref: innerRef });
48
53
  }
49
54
  return null;
50
55
  };
package/lib/components/IconSVG.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/lib/tests/setup.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import "@testing-library/jest-dom/vitest";
2
+ /**
3
+ * TO BE REMOVED
4
+ * once https://github.com/testing-library/jest-dom/issues/567 is resolved
5
+ */
6
+ import "@testing-library/jest-dom";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@imtf/icons",
3
3
  "private": false,
4
- "version": "0.6.0",
4
+ "version": "0.6.1",
5
5
  "description": "Library of icons (React components, font and svg)",
6
6
  "type": "module",
7
7
  "main": "./lib/index.js",
@@ -32,6 +32,12 @@
32
32
  ],
33
33
  "scripts": {
34
34
  "clean": "rimraf ./lib ./svg ./src/icons/*.{ts,tsx}",
35
+ "test": "vitest",
36
+ "test:ui": "vitest --ui --coverage",
37
+ "test:coverage": "vitest run --coverage",
38
+ "typecheck": "tsc --noEmit",
39
+ "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
40
+ "checks": "concurrently --kill-others-on-fail npm:lint npm:typecheck 'vitest --bail=1 --run'",
35
41
  "build:svg": "node --loader ts-node/esm scripts/index.mts",
36
42
  "build:js": "vite build",
37
43
  "build:types": "tsc --project ./tsconfig.build.json",