@arc-ui/community-components 3.13.0 → 3.13.1

package/lib/index.d.cts

@@ -602,6 +602,11 @@ interface ArticleSidebarProps {
      * Sharing options for the article.
      */
     share?: Share;
+    /**
+     * The article URL used by the share buttons.
+     * If it is not provided, the component uses the current browser URL.
+     */
+    url?: string;
 }
 
 type ListProps = InformationCardProps;

package/lib/index.d.mts

@@ -602,6 +602,11 @@ interface ArticleSidebarProps {
      * Sharing options for the article.
      */
     share?: Share;
+    /**
+     * The article URL used by the share buttons.
+     * If it is not provided, the component uses the current browser URL.
+     */
+    url?: string;
 }
 
 type ListProps = InformationCardProps;

package/lib/index.mjs

@@ -3835,10 +3835,15 @@ var styles$e = {"tagGroup":"ArticleSidebar-module_tagGroup__rIPQc","textContent"
  */
 var ArticleSidebar = function (_a) {
     var _b;
-    var author = _a.author, aboutSection = _a.aboutSection, topics = _a.topics, share = _a.share, additionalContent = _a.additionalContent, linkSection = _a.linkSection, props = __rest(_a, ["author", "aboutSection", "topics", "share", "additionalContent", "linkSection"]);
+    var author = _a.author, aboutSection = _a.aboutSection, topics = _a.topics, share = _a.share, additionalContent = _a.additionalContent, linkSection = _a.linkSection, providedUrl = _a.url, props = __rest(_a, ["author", "aboutSection", "topics", "share", "additionalContent", "linkSection", "url"]);
     var id = useId();
     var _c = useState(false), showToast = _c[0], setShowToast = _c[1];
-    var url = location.href;
+    var _d = useState(""), clientUrl = _d[0], setClientUrl = _d[1];
+    useEffect(function () {
+        if (!providedUrl)
+            setClientUrl(window.location.href);
+    }, [providedUrl]);
+    var url = providedUrl !== null && providedUrl !== void 0 ? providedUrl : clientUrl;
     var copyTextToClipBoard = function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -3859,14 +3864,14 @@ var ArticleSidebar = function (_a) {
                 ariaLabel: share.clipboardAriaLabel || "Copy url to clipboard",
             },
             {
-                href: "mailto:?subject=".concat(share.articleTitle, "&body=").concat(url),
+                href: "mailto:?subject=".concat(encodeURIComponent(share.articleTitle), "&body=").concat(encodeURIComponent(url)),
                 icon: BtIconEmailUnread,
                 ariaLabel: share.emailAriaLabel || "Share by email",
             }
         ], (share.linkedin
             ? [
                 {
-                    href: "https://www.linkedin.com/sharing/share-offsite/?url=".concat(url),
+                    href: "https://www.linkedin.com/sharing/share-offsite/?url=".concat(encodeURIComponent(url)),
                     icon: ArcIconSocialLinkedin,
                     ariaLabel: share.linkedInAriaLabel || "Share on LinkedIn",
                 },
@@ -3874,14 +3879,15 @@ var ArticleSidebar = function (_a) {
             : []), true), (share.x
             ? [
                 {
-                    href: "https://twitter.com/intent/tweet?url=".concat(url),
+                    href: "https://twitter.com/intent/tweet?url=".concat(encodeURIComponent(url)),
                     icon: ArcIconSocialX,
                     ariaLabel: share.xAriaLabel || "Share on x",
                 },
             ]
             : []), true) : [];
     var hasTopContent = Boolean(author || aboutSection || additionalContent);
-    var hasBottomContent = Boolean(linkSection || topics || share);
+    var showShare = share && url;
+    var hasBottomContent = Boolean(linkSection || topics || showShare);
     return (React.createElement("div", __assign({}, filterAttrs(props)),
         React.createElement("div", { className: classNames((_b = {},
                 _b[styles$e.textContent] = hasTopContent,
@@ -3909,9 +3915,9 @@ var ArticleSidebar = function (_a) {
             React.createElement(Heading, { level: linkSection.headingLevel }, linkSection.heading),
             linkSection.links.map(function (_a) {
                 var text = _a.text, url = _a.url, ariaLabel = _a.ariaLabel;
-                return (React.createElement(React.Fragment, null,
+                return (React.createElement(React.Fragment, { key: "".concat(id, "-").concat(url) },
                     React.createElement(VerticalSpace, { size: "8" }),
-                    React.createElement("div", { key: "".concat(id, "-").concat(url) },
+                    React.createElement("div", null,
                         React.createElement(Link, { "aria-label": ariaLabel, size: "s", href: url }, text))));
             }))),
         topics && (React.createElement(React.Fragment, null,
@@ -3919,7 +3925,7 @@ var ArticleSidebar = function (_a) {
             React.createElement(Heading, { level: topics.headingLevel }, topics.heading),
             React.createElement(VerticalSpace, { size: "16" }),
             React.createElement("div", { className: styles$e.tagGroup }, topics.tags.map(function (tag) { return (React.createElement(Tag, __assign({ key: "".concat(id, "-").concat(tag.title) }, tag))); })))),
-        share && (React.createElement(React.Fragment, null,
+        showShare && (React.createElement(React.Fragment, null,
             (linkSection || topics) && (React.createElement("div", { "data-testid": "links-topics-content-rule" },
                 React.createElement(VerticalSpace, { size: "32" }),
                 React.createElement(Rule, null),