@baseline-ui/icons 0.1.3 → 0.2.0

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 (5) hide show
  1. package/dist/index.d.mts +1 -1
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.js +12 -8
  4. package/dist/index.mjs +9 -5
  5. package/package.json +3 -2
package/dist/index.d.mts CHANGED
@@ -41,4 +41,4 @@ type SVGRProps = {
41
41
  };
42
42
  type IconProps = SVGRProps & SVGProps<SVGSVGElement>;
43
43
 
44
- export { Icon, IconComponentProps, IconProps, SVGRProps };
44
+ export { Icon, type IconComponentProps, type IconProps, type SVGRProps };
package/dist/index.d.ts CHANGED
@@ -41,4 +41,4 @@ type SVGRProps = {
41
41
  };
42
42
  type IconProps = SVGRProps & SVGProps<SVGSVGElement>;
43
43
 
44
- export { Icon, IconComponentProps, IconProps, SVGRProps };
44
+ export { Icon, type IconComponentProps, type IconProps, type SVGRProps };
package/dist/index.js CHANGED
@@ -35,10 +35,11 @@ __export(src_exports, {
35
35
  module.exports = __toCommonJS(src_exports);
36
36
 
37
37
  // src/Icon.tsx
38
+ var import_utils = require("@react-aria/utils");
38
39
  var Dompurify = __toESM(require("dompurify"));
39
40
  var import_react = __toESM(require("react"));
40
41
  var import_react_aria = require("react-aria");
41
- var import_utils = require("@baseline-ui/utils");
42
+ var import_utils2 = require("@baseline-ui/utils");
42
43
 
43
44
  // src/Icon.css.ts
44
45
  var iconWrapper = "Icon_iconWrapper__1rl8ope0";
@@ -57,11 +58,12 @@ var setSizeAttributes = (svgElement, size) => {
57
58
  };
58
59
  var updateSvgTitle = (svgElement, title, id) => {
59
60
  const titleElement = svgElement.querySelector("title");
61
+ const ownerDocument = (0, import_utils.getOwnerDocument)(svgElement);
60
62
  if (titleElement) {
61
63
  titleElement.textContent = title;
62
64
  titleElement.setAttribute("id", id);
63
65
  } else {
64
- const newTitleElement = document.createElement("title");
66
+ const newTitleElement = ownerDocument.createElement("title");
65
67
  newTitleElement.textContent = title;
66
68
  newTitleElement.setAttribute("id", id);
67
69
  svgElement.prepend(newTitleElement);
@@ -72,20 +74,22 @@ var setClassName = (svgElement, className) => {
72
74
  svgElement.classList.add(className);
73
75
  }
74
76
  };
75
- var getSanitizedSvgElement = (_svg) => {
76
- const span = document.createElement("span");
77
+ var getSanitizedSvgElement = (_svg, ownerDocument) => {
78
+ const span = ownerDocument.createElement("span");
77
79
  span.innerHTML = Dompurify.default.sanitize(_svg);
78
80
  const svgElement = span.querySelector("svg");
79
- (0, import_utils.invariant)(svgElement, "Icon: svg prop must be a valid svg string");
81
+ (0, import_utils2.invariant)(svgElement, "Icon: svg prop must be a valid svg string");
80
82
  return svgElement;
81
83
  };
82
84
  var Icon = import_react.default.forwardRef(
83
85
  ({ size, title, className, style, ...rest }, ref) => {
84
86
  const id = (0, import_react_aria.useId)();
87
+ const svgRef = import_react.default.useRef(null);
85
88
  const _svg = "svg" in rest ? rest.svg : void 0;
86
89
  const svgString = import_react.default.useMemo(() => {
87
90
  if (_svg) {
88
- const svgElement = getSanitizedSvgElement(_svg);
91
+ const ownerDocument = (0, import_utils.getOwnerDocument)(svgRef.current);
92
+ const svgElement = getSanitizedSvgElement(_svg, ownerDocument);
89
93
  if (size) {
90
94
  setSizeAttributes(svgElement, size);
91
95
  }
@@ -99,8 +103,8 @@ var Icon = import_react.default.forwardRef(
99
103
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
100
104
  "span",
101
105
  {
102
- className: (0, import_utils.classNames)(iconWrapper, className),
103
- ref,
106
+ className: (0, import_utils2.classNames)(iconWrapper, className),
107
+ ref: (0, import_utils.mergeRefs)(ref, svgRef),
104
108
  style,
105
109
  dangerouslySetInnerHTML: svgString ? { __html: svgString } : void 0
106
110
  }
package/dist/index.mjs CHANGED
@@ -1,4 +1,5 @@
1
1
  // src/Icon.tsx
2
+ import { getOwnerDocument, mergeRefs } from "@react-aria/utils";
2
3
  import * as Dompurify from "dompurify";
3
4
  import React from "react";
4
5
  import { useId } from "react-aria";
@@ -21,11 +22,12 @@ var setSizeAttributes = (svgElement, size) => {
21
22
  };
22
23
  var updateSvgTitle = (svgElement, title, id) => {
23
24
  const titleElement = svgElement.querySelector("title");
25
+ const ownerDocument = getOwnerDocument(svgElement);
24
26
  if (titleElement) {
25
27
  titleElement.textContent = title;
26
28
  titleElement.setAttribute("id", id);
27
29
  } else {
28
- const newTitleElement = document.createElement("title");
30
+ const newTitleElement = ownerDocument.createElement("title");
29
31
  newTitleElement.textContent = title;
30
32
  newTitleElement.setAttribute("id", id);
31
33
  svgElement.prepend(newTitleElement);
@@ -36,8 +38,8 @@ var setClassName = (svgElement, className) => {
36
38
  svgElement.classList.add(className);
37
39
  }
38
40
  };
39
- var getSanitizedSvgElement = (_svg) => {
40
- const span = document.createElement("span");
41
+ var getSanitizedSvgElement = (_svg, ownerDocument) => {
42
+ const span = ownerDocument.createElement("span");
41
43
  span.innerHTML = Dompurify.default.sanitize(_svg);
42
44
  const svgElement = span.querySelector("svg");
43
45
  invariant(svgElement, "Icon: svg prop must be a valid svg string");
@@ -46,10 +48,12 @@ var getSanitizedSvgElement = (_svg) => {
46
48
  var Icon = React.forwardRef(
47
49
  ({ size, title, className, style, ...rest }, ref) => {
48
50
  const id = useId();
51
+ const svgRef = React.useRef(null);
49
52
  const _svg = "svg" in rest ? rest.svg : void 0;
50
53
  const svgString = React.useMemo(() => {
51
54
  if (_svg) {
52
- const svgElement = getSanitizedSvgElement(_svg);
55
+ const ownerDocument = getOwnerDocument(svgRef.current);
56
+ const svgElement = getSanitizedSvgElement(_svg, ownerDocument);
53
57
  if (size) {
54
58
  setSizeAttributes(svgElement, size);
55
59
  }
@@ -64,7 +68,7 @@ var Icon = React.forwardRef(
64
68
  "span",
65
69
  {
66
70
  className: classNames(iconWrapper, className),
67
- ref,
71
+ ref: mergeRefs(ref, svgRef),
68
72
  style,
69
73
  dangerouslySetInnerHTML: svgString ? { __html: svgString } : void 0
70
74
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@baseline-ui/icons",
3
- "version": "0.1.3",
3
+ "version": "0.2.0",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -17,9 +17,10 @@
17
17
  ],
18
18
  "license": "ISC",
19
19
  "dependencies": {
20
+ "@react-aria/utils": "^3.22.0",
20
21
  "dompurify": "^3.0.6",
21
22
  "react-aria": "^3.30.0",
22
- "@baseline-ui/utils": "0.1.3"
23
+ "@baseline-ui/utils": "0.2.0"
23
24
  },
24
25
  "devDependencies": {
25
26
  "@svgr/cli": "^8.1.0",