@instructure/ui-link 10.16.1-snapshot-0 → 10.16.1

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
+## [10.16.1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1) (2025-04-22)
 
 **Note:** Version bump only for package @instructure/ui-link
 

package/es/Link/__new-tests__/Link.test.js

@@ -23,18 +23,20 @@ var _Link, _Link2, _Link3, _svg, _TruncateText2, _svg2, _Link4, _Link5, _Link6,
  * SOFTWARE.
  */
 
-import React from 'react';
+/** jsxImportSource @emotion/react */
+import { Component } from 'react';
 import { userEvent } from '@testing-library/user-event';
 import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { vi } from 'vitest';
+import { expect, vi } from 'vitest';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import { Link } from '../index';
-
-//<unknown> is needed for React 17 compatibility
-class TruncateText extends React.Component {
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+class TruncateText extends Component {
   render() {
-    return /*#__PURE__*/React.createElement("span", null, this.props.children);
+    return _jsx("span", {
+      children: this.props.children
+    });
   }
 }
 TruncateText.displayName = "TruncateText";
@@ -48,68 +50,82 @@ describe('<Link />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render the children as text content', async () => {
-    render(_Link || (_Link = /*#__PURE__*/React.createElement(Link, {
-      href: "https://instructure.design"
-    }, "Hello World")));
+    render(_Link || (_Link = _jsx(Link, {
+      href: "https://instructure.design",
+      children: "Hello World"
+    })));
     const link = screen.getByRole('link');
     expect(link).toHaveTextContent('Hello World');
   });
   it('should render a button', async () => {
     const onClick = vi.fn();
-    render(/*#__PURE__*/React.createElement(Link, {
-      onClick: onClick
-    }, "Hello World"));
+    render(_jsx(Link, {
+      onClick: onClick,
+      children: "Hello World"
+    }));
     const button = screen.getByRole('button');
     expect(button).toHaveAttribute('type', 'button');
   });
   it('should meet a11y standards', async () => {
-    const _render = render(_Link2 || (_Link2 = /*#__PURE__*/React.createElement(Link, {
-        href: "https://instructure.design"
-      }, "Hello World"))),
+    const _render = render(_Link2 || (_Link2 = _jsx(Link, {
+        href: "https://instructure.design",
+        children: "Hello World"
+      }))),
       container = _render.container;
     const axeCheck = await runAxeCheck(container);
     expect(axeCheck).toBe(true);
   });
   it('should focus with the focus helper', async () => {
     let linkRef;
-    render(/*#__PURE__*/React.createElement(Link, {
+    render(_jsx(Link, {
       href: "https://instructure.design",
       elementRef: el => {
         linkRef = el;
-      }
-    }, "Hello World"));
+      },
+      children: "Hello World"
+    }));
     const linkElement = screen.getByRole('link');
     linkRef.focus();
     expect(linkElement).toHaveFocus();
   });
   it('should display block when TruncateText is a child', async () => {
-    render(_Link3 || (_Link3 = /*#__PURE__*/React.createElement(Link, {
-      href: "example.html"
-    }, /*#__PURE__*/React.createElement(TruncateText, null, "Hello World"))));
+    render(_Link3 || (_Link3 = _jsx(Link, {
+      href: "example.html",
+      children: _jsx(TruncateText, {
+        children: "Hello World"
+      })
+    })));
     const link = screen.getByRole('link');
     expect(link).toHaveStyle('display: block');
   });
   it('should display inline-flex when TruncateText is a child and there is an icon', async () => {
-    const customIcon = _svg || (_svg = /*#__PURE__*/React.createElement("svg", {
+    const customIcon = _svg || (_svg = _jsxs("svg", {
       height: "24",
-      width: "24"
-    }, /*#__PURE__*/React.createElement("title", null, "Custom icon"), /*#__PURE__*/React.createElement("circle", {
-      cx: "50",
-      cy: "50",
-      r: "40"
-    })));
-    render(/*#__PURE__*/React.createElement(Link, {
+      width: "24",
+      children: [_jsx("title", {
+        children: "Custom icon"
+      }), _jsx("circle", {
+        cx: "50",
+        cy: "50",
+        r: "40"
+      })]
+    }));
+    render(_jsx(Link, {
       href: "example.html",
-      renderIcon: customIcon
-    }, _TruncateText2 || (_TruncateText2 = /*#__PURE__*/React.createElement(TruncateText, null, "Hello World"))));
+      renderIcon: customIcon,
+      children: _TruncateText2 || (_TruncateText2 = _jsx(TruncateText, {
+        children: "Hello World"
+      }))
+    }));
     const link = screen.getByRole('link');
     expect(link).toHaveStyle('display: inline-flex');
   });
   it('should call the onClick prop when clicked', async () => {
     const onClick = vi.fn();
-    render(/*#__PURE__*/React.createElement(Link, {
-      onClick: onClick
-    }, "Hello World"));
+    render(_jsx(Link, {
+      onClick: onClick,
+      children: "Hello World"
+    }));
     const link = screen.getByRole('button');
     userEvent.click(link);
     await waitFor(() => {
@@ -118,30 +134,35 @@ describe('<Link />', () => {
   });
   it('should call the onMouseEnter prop when mouseEntered', async () => {
     const onMouseEnter = vi.fn();
-    const _render2 = render(/*#__PURE__*/React.createElement(Link, {
-        onMouseEnter: onMouseEnter
-      }, "Hello World")),
+    const _render2 = render(_jsx(Link, {
+        onMouseEnter: onMouseEnter,
+        children: "Hello World"
+      })),
       container = _render2.container;
-    const link = container.querySelector('span[class$="-link"]');
+    const link = container.querySelector('span[class*="-link"]');
     userEvent.hover(link);
     await waitFor(() => {
       expect(onMouseEnter).toHaveBeenCalledTimes(1);
     });
   });
   it('should pass down an icon via the icon property', async () => {
-    const customIcon = _svg2 || (_svg2 = /*#__PURE__*/React.createElement("svg", {
+    const customIcon = _svg2 || (_svg2 = _jsxs("svg", {
       "data-testid": "svg",
       height: "100",
-      width: "100"
-    }, /*#__PURE__*/React.createElement("title", null, "Custom icon"), /*#__PURE__*/React.createElement("circle", {
-      cx: "50",
-      cy: "50",
-      r: "40"
-    })));
-    render(/*#__PURE__*/React.createElement(Link, {
+      width: "100",
+      children: [_jsx("title", {
+        children: "Custom icon"
+      }), _jsx("circle", {
+        cx: "50",
+        cy: "50",
+        r: "40"
+      })]
+    }));
+    render(_jsx(Link, {
       href: "https://instructure.design",
-      renderIcon: customIcon
-    }, "Hello World"));
+      renderIcon: customIcon,
+      children: "Hello World"
+    }));
     const title = screen.getByText('Custom icon');
     const icon = screen.getByTestId('svg');
     expect(title).toBeInTheDocument();
@@ -149,37 +170,41 @@ describe('<Link />', () => {
   });
   describe('when interaction is disabled', () => {
     it('should apply aria-disabled when interaction is disabled', async () => {
-      render(_Link4 || (_Link4 = /*#__PURE__*/React.createElement(Link, {
+      render(_Link4 || (_Link4 = _jsx(Link, {
         href: "example.html",
-        interaction: "disabled"
-      }, "Hello World")));
+        interaction: "disabled",
+        children: "Hello World"
+      })));
       const link = screen.getByRole('link');
       expect(link).toHaveAttribute('aria-disabled');
     });
   });
   it('should apply aria-disabled when `disabled` is set', async () => {
-    render(_Link5 || (_Link5 = /*#__PURE__*/React.createElement(Link, {
+    render(_Link5 || (_Link5 = _jsx(Link, {
       href: "example.html",
-      disabled: true
-    }, "Hello World")));
+      disabled: true,
+      children: "Hello World"
+    })));
     const link = screen.getByRole('link');
     expect(link).toHaveAttribute('aria-disabled');
   });
   it('should not be clickable when interaction is disabled', async () => {
     const onClick = vi.fn();
-    render(/*#__PURE__*/React.createElement(Link, {
+    render(_jsx(Link, {
       onClick: onClick,
-      interaction: "disabled"
-    }, "Hello World"));
+      interaction: "disabled",
+      children: "Hello World"
+    }));
     const button = screen.getByRole('button');
     expect(button).toHaveAttribute('aria-disabled', 'true');
   });
   it('should not be clickable when `disabled` is set', async () => {
     const onClick = vi.fn();
-    render(/*#__PURE__*/React.createElement(Link, {
+    render(_jsx(Link, {
       onClick: onClick,
-      disabled: true
-    }, "Hello World"));
+      disabled: true,
+      children: "Hello World"
+    }));
     const button = screen.getByRole('button');
     expect(button).toHaveAttribute('aria-disabled', 'true');
   });
@@ -188,19 +213,21 @@ describe('with `as` prop', () => {
   describe('with `onClick`', () => {
     it('should render designated tag', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(Link, {
+      render(_jsx(Link, {
         as: "a",
-        onClick: onClick
-      }, "Hello World"));
+        onClick: onClick,
+        children: "Hello World"
+      }));
       const link = screen.getByText('Hello World');
       expect(link.tagName).toBe('A');
     });
     it('should set role="button"', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(Link, {
+      render(_jsx(Link, {
         as: "span",
-        onClick: onClick
-      }, "Hello World"));
+        onClick: onClick,
+        children: "Hello World"
+      }));
       const spanLink = screen.getByRole('button');
       expect(spanLink).toHaveAttribute('role', 'button');
     });
@@ -208,108 +235,121 @@ describe('with `as` prop', () => {
   describe('should not set type="button", unless it is actually a button', () => {
     it('should not set type="button" on other things like <span>s', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(Link, {
+      render(_jsx(Link, {
         as: "span",
-        onClick: onClick
-      }, "Hello World"));
+        onClick: onClick,
+        children: "Hello World"
+      }));
       const link = screen.getByText('Hello World');
       expect(link).not.toHaveAttribute('type', 'button');
     });
     it('should set type="button" on <button>s', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(Link, {
+      render(_jsx(Link, {
         as: "button",
-        onClick: onClick
-      }, "Hello World"));
+        onClick: onClick,
+        children: "Hello World"
+      }));
       const button = screen.getByText('Hello World');
       expect(button).toHaveAttribute('type', 'button');
     });
     it('should set tabIndex="0"', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(Link, {
+      render(_jsx(Link, {
         as: "span",
-        onClick: onClick
-      }, "Hello World"));
+        onClick: onClick,
+        children: "Hello World"
+      }));
       const spanLink = screen.getByText('Hello World');
       expect(spanLink).toHaveAttribute('tabIndex', '0');
     });
   });
   describe('without `onClick`', () => {
     it('should render designated tag', async () => {
-      render(_Link6 || (_Link6 = /*#__PURE__*/React.createElement(Link, {
-        as: "a"
-      }, "Hello World")));
+      render(_Link6 || (_Link6 = _jsx(Link, {
+        as: "a",
+        children: "Hello World"
+      })));
       const link = screen.getByText('Hello World');
       expect(link.tagName).toBe('A');
     });
     it('should not set role="button"', async () => {
-      render(_Link7 || (_Link7 = /*#__PURE__*/React.createElement(Link, {
-        as: "span"
-      }, "Hello World")));
+      render(_Link7 || (_Link7 = _jsx(Link, {
+        as: "span",
+        children: "Hello World"
+      })));
       const link = screen.getByText('Hello World');
       expect(link).not.toHaveAttribute('role', 'button');
     });
     it('should not set type="button"', async () => {
-      render(_Link8 || (_Link8 = /*#__PURE__*/React.createElement(Link, {
-        as: "span"
-      }, "Hello World")));
+      render(_Link8 || (_Link8 = _jsx(Link, {
+        as: "span",
+        children: "Hello World"
+      })));
       const link = screen.getByText('Hello World');
       expect(link).not.toHaveAttribute('type', 'button');
     });
     it('should not set tabIndex="0"', async () => {
-      render(_Link9 || (_Link9 = /*#__PURE__*/React.createElement(Link, {
-        as: "span"
-      }, "Hello World")));
+      render(_Link9 || (_Link9 = _jsx(Link, {
+        as: "span",
+        children: "Hello World"
+      })));
       const link = screen.getByText('Hello World');
       expect(link).not.toHaveAttribute('tabIndex', '0');
     });
   });
   describe('when an href is provided', () => {
     it('should render an anchor element', async () => {
-      render(_Link10 || (_Link10 = /*#__PURE__*/React.createElement(Link, {
-        href: "example.html"
-      }, "Hello World")));
+      render(_Link10 || (_Link10 = _jsx(Link, {
+        href: "example.html",
+        children: "Hello World"
+      })));
       const link = screen.getByRole('link');
       expect(link.tagName).toBe('A');
     });
     it('should set the href attribute', async () => {
-      render(_Link11 || (_Link11 = /*#__PURE__*/React.createElement(Link, {
-        href: "example.html"
-      }, "Hello World")));
+      render(_Link11 || (_Link11 = _jsx(Link, {
+        href: "example.html",
+        children: "Hello World"
+      })));
       const link = screen.getByRole('link');
       expect(link).toHaveAttribute('href', 'example.html');
     });
     it('should not set role="button"', async () => {
-      render(_Link12 || (_Link12 = /*#__PURE__*/React.createElement(Link, {
-        href: "example.html"
-      }, "Hello World")));
+      render(_Link12 || (_Link12 = _jsx(Link, {
+        href: "example.html",
+        children: "Hello World"
+      })));
       const link = screen.getByRole('link');
       expect(link).not.toHaveAttribute('role', 'button');
     });
     it('should not set type="button"', async () => {
-      render(_Link13 || (_Link13 = /*#__PURE__*/React.createElement(Link, {
-        href: "example.html"
-      }, "Hello World")));
+      render(_Link13 || (_Link13 = _jsx(Link, {
+        href: "example.html",
+        children: "Hello World"
+      })));
       const link = screen.getByRole('link');
       expect(link).not.toHaveAttribute('type', 'button');
     });
   });
   describe('when a `role` is provided', () => {
     it('should set role', async () => {
-      render(_Link14 || (_Link14 = /*#__PURE__*/React.createElement(Link, {
+      render(_Link14 || (_Link14 = _jsx(Link, {
         href: "example.html",
-        role: "button"
-      }, "Hello World")));
+        role: "button",
+        children: "Hello World"
+      })));
       const link = screen.getByText('Hello World');
       expect(link).toHaveAttribute('role', 'button');
     });
     it('should not override button role when it is forced by default', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(Link, {
+      render(_jsx(Link, {
         role: "link",
         onClick: onClick,
-        as: "a"
-      }, "Hello World"));
+        as: "a",
+        children: "Hello World"
+      }));
       const link = screen.getByText('Hello World');
       expect(link).toHaveAttribute('role', 'button');
     });
@@ -317,45 +357,50 @@ describe('with `as` prop', () => {
   describe('when a `forceButtonRole` is set to false', () => {
     it('should not force button role', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(Link, {
+      render(_jsx(Link, {
         onClick: onClick,
         as: "a",
-        forceButtonRole: false
-      }, "Hello World"));
+        forceButtonRole: false,
+        children: "Hello World"
+      }));
       const link = screen.getByText('Hello World');
       expect(link).not.toHaveAttribute('role');
     });
     it('should override button role with `role` prop', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(Link, {
+      render(_jsx(Link, {
         role: "link",
         onClick: onClick,
         as: "a",
-        forceButtonRole: false
-      }, "Hello World"));
+        forceButtonRole: false,
+        children: "Hello World"
+      }));
       const link = screen.getByText('Hello World');
       expect(link).toHaveAttribute('role', 'link');
     });
   });
   describe('when a `to` is provided', () => {
     it('should render an anchor element', async () => {
-      render(_Link15 || (_Link15 = /*#__PURE__*/React.createElement(Link, {
-        to: "/example"
-      }, "Hello World")));
+      render(_Link15 || (_Link15 = _jsx(Link, {
+        to: "/example",
+        children: "Hello World"
+      })));
       const link = screen.getByText('Hello World');
       expect(link.tagName).toBe('A');
     });
     it('should set the to attribute', async () => {
-      render(_Link16 || (_Link16 = /*#__PURE__*/React.createElement(Link, {
-        to: "/example"
-      }, "Hello World")));
+      render(_Link16 || (_Link16 = _jsx(Link, {
+        to: "/example",
+        children: "Hello World"
+      })));
       const link = screen.getByText('Hello World');
       expect(link).toHaveAttribute('to', '/example');
     });
     it('should not set role="button"', async () => {
-      render(_Link17 || (_Link17 = /*#__PURE__*/React.createElement(Link, {
-        to: "/example"
-      }, "Hello World")));
+      render(_Link17 || (_Link17 = _jsx(Link, {
+        to: "/example",
+        children: "Hello World"
+      })));
       const link = screen.getByText('Hello World');
       expect(link).not.toHaveAttribute('role', 'button');
     });

package/es/Link/index.js

@@ -25,18 +25,18 @@ var _dec, _dec2, _class, _Link;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
-import React, { Component } from 'react';
+import { Children, Component } from 'react';
 import { View } from '@instructure/ui-view';
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { isActiveElement, findFocusable } from '@instructure/ui-dom-utils';
 import { getElementType, getInteraction, matchComponentTypes, passthroughProps, callRenderProp } from '@instructure/ui-react-utils';
 import { logWarn as warn } from '@instructure/console';
 import { testable } from '@instructure/ui-testable';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
@@ -102,7 +102,7 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
   }
   get containsTruncateText() {
     let truncateText = false;
-    React.Children.forEach(this.props.children, child => {
+    Children.forEach(this.props.children, child => {
       if (child && matchComponentTypes(child, ['TruncateText'])) {
         truncateText = true;
       }
@@ -159,9 +159,10 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
     warn(
     // if display prop is used, warn about icon or TruncateText
     this.props.display === void 0, '[Link] Using the display property with an icon may cause layout issues.');
-    return jsx("span", {
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
-    }, callRenderProp(this.props.renderIcon));
+    return _jsx("span", {
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon,
+      children: callRenderProp(this.props.renderIcon)
+    });
   }
   render() {
     var _this$props$styles2;
@@ -180,7 +181,8 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
     const isDisabled = interaction === 'disabled';
     const type = this.element === 'button' || this.element === 'input' ? 'button' : void 0;
     const tabIndex = this.role === 'button' && !isDisabled ? 0 : void 0;
-    return jsx(View, Object.assign({}, passthroughProps(props), {
+    return _jsxs(View, {
+      ...passthroughProps(props),
       elementRef: this.handleElementRef,
       as: this.element,
       display: this.display,
@@ -194,8 +196,9 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
       role: this.role,
       type: type,
       tabIndex: tabIndex,
-      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.link
-    }), renderIcon && iconPlacement === 'start' ? this.renderIcon() : null, children, renderIcon && iconPlacement === 'end' ? this.renderIcon() : null);
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.link,
+      children: [renderIcon && iconPlacement === 'start' ? this.renderIcon() : null, children, renderIcon && iconPlacement === 'end' ? this.renderIcon() : null]
+    });
   }
 }, _Link.displayName = "Link", _Link.componentId = 'Link', _Link.propTypes = propTypes, _Link.allowedProps = allowedProps, _Link.defaultProps = {
   // Leave interaction default undefined so that `disabled` can also be supplied